/* Manual Acceptance Fix #1 (2026-08-10) -- Home Draw Workspace container
   layout. Stage 2B/2C never actually gave [data-draw-workspace] / its
   __main / __status-row / __countdown / __keno children any CSS rules of
   their own (grep across the whole repo turned up zero matches before
   this file existed) -- they were bare divs inheriting only generic
   .card/.card-pad-lg styling, which is the other half of why the MiPai
   surface read as a small, undersized afterthought rather than an
   intentional Hero (spec 十七: boss's screenshot showed "左上内容很少，
   右侧和中间存在巨大空白"). This file is the first real layout treatment
   for the Draw Workspace card itself; draw-reveal.css (Stage 2F.9) stays
   focused on the scratch mask's own internals as its header comment
   already documents -- this file owns the surrounding Hero chrome. */

.mipai-hero__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.mipai-hero__head-left {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}
.mipai-hero__period {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
.mipai-hero__head-right {
  text-align: right;
  flex-shrink: 0;
}

/* Stage 2F.13 spec 五/六/七: Hero header Sponsor Slot -- replaces what used
   to be this header's own countdown readout (spec 四: one countdown only,
   now solely inside the MiPai canvas). Deliberately restrained styling --
   spec 六: "不是普通广告Banner...视觉要克制" -- no color/animation beyond a
   quiet hover state, same visual language as the rest of the Hero chrome. */
.mipai-hero__sponsor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-base, 150ms) var(--ease-standard);
}
.mipai-hero__sponsor:hover,
.mipai-hero__sponsor:focus-visible {
  background: var(--bg-surface-2);
}
.mipai-hero__sponsor:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.mipai-hero__sponsor-full {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 1px;
}
.mipai-hero__sponsor-label { font-size: var(--text-xs); color: var(--text-tertiary); }
.mipai-hero__sponsor-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.mipai-hero__sponsor-handle { color: var(--brand-500); }
.mipai-hero__sponsor-compact { display: none; font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
.mipai-hero__sponsor-arrow { color: var(--text-tertiary); font-size: var(--text-sm); }

/* spec 二十三: Sponsor must never crowd 期号/倒计时/咪牌 out of the mobile
   first screen -- collapses to one compact line at the same 639px line the
   rest of this Hero already uses for its own mobile sizing. */
@media (max-width: 639px) {
  .mipai-hero__sponsor-full { display: none; }
  .mipai-hero__sponsor-compact { display: inline; }
}

/* The Hero surface's own min-height breakpoints live in draw-reveal.css
   (single source of truth -- see that file's comment for why this isn't
   split across two files). This file only adds the margin above it. */
.mipai-surface {
  margin-top: var(--space-4);
}

/* Stage 2F.13 spec 十九/二十: normal-flow now (was position:absolute
   top-right) so it stacks as the centered "第三行 弱CTA" directly under the
   revealed result instead of floating in a disconnected corner -- see
   draw-reveal.css's .mipai-surface for the flex-column context this relies
   on. Still `hidden` by default/only ever shown while the mask itself is
   hidden (static/js/draw-workspace.js), so it never competes with the mask
   for the same space. */
.mipai-surface__rescratch-btn {
  z-index: 6;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.2));
  background: var(--bg-surface-2, rgba(20, 22, 30, 0.85));
  color: var(--text-primary);
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.mipai-surface__rescratch-btn:hover,
.mipai-surface__rescratch-btn:focus-visible {
  border-color: var(--brand-400);
  color: var(--brand-400);
}
.mipai-surface__rescratch-btn:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

/* Stage 2F.10 spec 五/六: MiPai and 最近 5 期 share one grid row on
   desktop instead of Recent 5 being pushed below a full-width Hero +
   full-width Keno (real-browser discovery confirmed that left the first
   viewport ~85% low-density empty space, see
   ED28_V2_STAGE2F10_PRODUCT_POLISH_DISCOVERY.md 第二节). Roughly 58/42
   (spec's suggested 58-62%/38-42% band) via `minmax(0, ...)` so neither
   track can force the page to overflow horizontally at its own min-content
   width -- same guard `.home-grid-2 > *` already uses elsewhere on this
   page. Collapses to a single column under 900px, same breakpoint
   home-grid-2 already uses, so the whole page picks one consistent
   "desktop vs mobile" line rather than several different ones. */
.draw-workspace__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.draw-workspace__grid > * { min-width: 0; }
@media (max-width: 899px) {
  .draw-workspace__grid { grid-template-columns: 1fr; }
}

.draw-workspace__recent-list { display: flex; flex-direction: column; gap: var(--space-3); }
.draw-workspace__recent-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle, var(--border-default));
}
.draw-workspace__recent-row:last-child { padding-bottom: 0; border-bottom: none; }
.draw-workspace__recent-period { flex-shrink: 0; width: 4.5em; }
.draw-workspace__recent-row .draw-result-bar { min-width: 0; flex: 1; }
.draw-workspace__recent-row .draw-result-bar__equation { flex-wrap: nowrap; }

/* Keno stays visually secondary/compact under the workspace grid (spec
   十/十九) -- smaller title weight than the Hero's own heading, no card
   elevation change needed since .card already differentiates it from the
   page bg. Below 900px it starts collapsed behind a "展开查看" toggle
   (home.js wires data-keno-toggle); the toggle button itself is
   `hidden` in markup and only unhidden by that same breakpoint check so
   a no-JS visitor always sees the full panel rather than a dead button. */
.draw-workspace__keno { margin-top: var(--space-5); }
.draw-workspace__keno .panel-title h2 { font-weight: var(--weight-medium, 500); }
.draw-workspace__keno-toggle { background: none; border: none; cursor: pointer; font: inherit; }
/* .section-link (frontend/styles/utilities.css) sets its own
   `display: inline-flex`, which -- being author CSS -- silently overrides
   the browser's UA-stylesheet `[hidden] { display: none }` rule (same
   specificity, but author always beats UA regardless of source order).
   Without this, the button rendered visible even while `hidden` was
   correctly set (real bug caught via local Playwright + a matchMedia
   check before this ever reached Staging). */
.draw-workspace__keno-toggle[hidden] { display: none; }
@media (max-width: 899px) {
  .draw-workspace__keno:not(.is-expanded) [data-keno-body] { display: none; }
}

/* Stage 2F.10 spec 十一: homepage Prediction Brief -- reuses
   components/prediction_card.html's own card styling (prediction.css),
   this file only owns the brief's own grid (2 cards side by side on
   desktop, stacked on mobile, same 900px line as the rest of this page). */
.home-prediction-brief__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

@media (max-width: 639px) {
  .mipai-hero__period { font-size: var(--text-md); }
}