/* ED28 V2 Stage 2B -- Home page composition.
   Home-specific layout only; every color/spacing/radius/motion value below
   is a Frontend Foundation token (frontend/tokens/*.css) -- this file
   never introduces a new literal color or a second responsive system, it
   only arranges Foundation primitives into this page's unique sections
   (Foundation Report 第十四部分 explicitly reserves this for page-level
   CSS, not for frontend/components/). Class names are all home-* prefixed
   to guarantee zero collision with main.css (still loaded on the other,
   not-yet-migrated V1 pages) or with Foundation's own class names.
*/

.home-hero {
  padding: var(--space-10) 0 var(--space-6);
  text-align: center;
}
.home-hero h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-2);
}
.home-hero p {
  color: var(--text-secondary);
  font-size: var(--text-md);
  max-width: 640px;
  margin: 0 auto;
}

.home-grid-2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 900px) {
  .home-grid-2 { grid-template-columns: 1fr; }
}
/* Grid/flex items default to min-width:auto (content's own min-content
   size), which stops them shrinking to the track width and forces the
   whole page to scroll horizontally on narrow phones -- min-width:0
   overrides that so text wraps inside the card instead of the card
   overflowing it. Needed anywhere a flex/grid item's content (icon+label
   rows, long link text) could exceed the track at 320-360px. */
.home-grid-2 > * {
  min-width: 0;
}

.home-draw-balls {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.home-ball {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: #fff;
  flex-shrink: 0;
}
.home-ball-a { background: var(--data-tiger); }
.home-ball-b { background: var(--data-odd); }
.home-ball-c { background: var(--data-even); }
.home-total {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--brand-400);
}

.home-countdown-value {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.home-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  min-width: 0;
}
.home-quick-grid > * {
  min-width: 0;
}
@media (max-width: 640px) {
  .home-quick-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
  .home-quick-grid { grid-template-columns: 1fr; }
}
.home-quick-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-5);
  text-align: left;
  min-width: 0;
}
.home-quick-card strong,
.home-quick-card .text-xs {
  overflow-wrap: break-word;
}
.home-quick-card .icon {
  width: 32px; height: 32px;
  color: var(--brand-400);
}
.home-quick-card.is-soon { opacity: 0.75; }

.home-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 480px) {
  .home-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.home-stat-cell {
  padding: var(--space-4);
  text-align: center;
}
.home-stat-cell .value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}
.home-stat-cell .label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 4px;
}

.home-hotcold-row { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.home-hotcold-group { display: flex; flex-direction: column; gap: 8px; }
.home-hotcold-group .badges { display: flex; gap: 6px; }

.home-trend-svg { width: 100%; height: 120px; display: block; }
.home-trend-svg polyline { fill: none; stroke: var(--brand-400); stroke-width: 2; }

@media (max-width: 640px) {
  .home-hero { padding: var(--space-6) 0 var(--space-4); }
  .home-hero h1 { font-size: var(--text-2xl); }
}

/* Stage 2F.15 spec 九: lightweight, non-blocking "data just updated"
   status bar inside the Data Radar card -- shown briefly by
   home-brief.js when a genuinely new draw result triggers a real content
   swap (never a toast/Modal over MiPai, never blocks the scratch
   gesture). Auto-hidden again a few seconds later, same posture as the
   MiPai-local "新一期开奖结果已到达" toast in draw-reveal.css. */
.data-update-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 10px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.data-update-toast[hidden] { display: none; }
.data-update-toast a { color: var(--brand-400); }