/* ED28 Design System v1 (Phase 3B) -- see ED28_DESIGN_SYSTEM.md.
   Original CSS, no third-party framework, no external font files. */

/* 1. CSS Variables */
:root {
  --color-bg: #0B0E14;
  --color-bg-card: #141822;
  --color-bg-card-alt: #171C28;
  --color-divider: #232838;
  --color-primary: #D4AF37;
  --color-text: #E6E8EC;
  --color-text-muted: #8A94A6;
  --color-success: #2ECC71;
  --color-warning: #F5A623;
  --color-error: #E74C3C;
  --color-ball-a: #3B82F6;
  --color-ball-b: #A855F7;
  --color-ball-c: #22C55E;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-mono: "DIN Alternate", "Helvetica Neue", monospace;
  --radius-card: 12px;
  --max-width: 1200px;
}

/* UX Fix Round 1 / P0-4 -- these v1 tokens were dark-only from the day this
   file was written (no [data-theme="light"] branch ever existed here).
   Foundation's own components (card.css, table.css thead/td, ...) load
   after this file and happen to redeclare the SAME class names with
   properly-themed tokens, so most v1 markup was accidentally already
   light-theme-safe by cascade order -- except .data-table tbody row
   background and a handful of muted-text/divider spots on pages that
   were never migrated off this v1 system (/trend, /omission, /insights/*,
   all Dashboard pages), which is exactly what UX Review Round 1 section 9
   reproduced (real-browser: light theme text on unswapped dark rows was
   near-unreadable). Root-causing at the token level fixes it everywhere
   in one place instead of continuing the page-by-page .data-table
   overrides this codebase had already started accumulating (home.css/
   draw.css/history.css -- now removed, superseded by this). Values reuse
   Foundation's own light-theme tokens (frontend/tokens/colors.css),
   already contrast-audited there -- no new colors introduced. */
:root[data-theme="light"] {
  --color-bg: var(--bg-canvas);
  --color-bg-card: var(--bg-surface-1);
  --color-bg-card-alt: var(--bg-surface-2);
  --color-divider: var(--border-default);
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-secondary);
  /* Real-browser contrast audit (Playwright, /trend /omission /history
     /live /insights) also caught .tag--hot/.tag--cold/.tag--pattern/
     .omission-cell--fresh rendering their un-themed dark accent color
     directly on the now-light page/tint background inside these same
     tables (measured 1.80:1-3.68:1, below WCAG AA's 4.5:1) -- same root
     cause, same fix shape: reuse Foundation's already-audited light
     equivalents instead of the raw dark hex. */
  --color-primary: var(--warning-500);
  --color-warning: var(--warning-500);
  --color-success: var(--success-500);
  --color-error: var(--danger-500);
  --color-ball-a: var(--info-500);
  --color-ball-b: var(--data-odd);
}

/* 2. Reset + base */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.6;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}

/* 6. Typography */
h1, h2, h3 { font-weight: 700; line-height: 1.3; margin: 0 0 0.6em; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

/* Layout */
.site-main { max-width: var(--max-width); margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.section { margin-bottom: 2rem; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .two-col { grid-template-columns: 1fr 1fr; } }
/* Stage 2F.9 product audit: a `1fr` grid track's automatic minimum size is
   the MAX of its items' min-content sizes, not 0 -- found via a real
   horizontal-overflow bug on /insights/distribution and /insights/backtest
   at 390/768px (spec 三十三). Scoped to .two-col's direct children only,
   not every .card sitewide, since elsewhere a .card's natural sizing is
   fine and shouldn't be touched without a reason. */
.two-col > .card { min-width: 0; }

/* Stage 2B (ED28 V2 Core Layout): the old .site-nav*/.hamburger rules that
   used to live here were deleted -- components/nav.html now renders the
   Stage 2A Frontend Foundation header (layouts/header.css's
   .site-header/.header-inner/.brand/.nav-primary + components/drawer.css
   for the mobile menu), not this markup, and nothing else in the
   templates ever referenced these class names (verified via grep across
   templates/ and static/js/ before deleting) -- see
   ED28_V2_STAGE2B_CORE_LAYOUT_HOME_IMPLEMENTATION_REPORT.md. */

/* Demo banner */
.demo-banner {
  background: rgba(245,166,35,0.12);
  color: var(--color-warning);
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-divider);
}

/* Hero */
.hero { text-align: center; padding: 2rem 0 1rem; }
.hero__tagline { color: var(--color-text-muted); }

/* 7. Card */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-card);
  padding: 1.25rem;
}
a.card.quick-link:hover, .card--interactive:hover { border-color: var(--color-primary); }
.card__header { display: flex; align-items: center; justify-content: space-between; }

/* 8. Button */
.button {
  display: inline-block; padding: 0.6rem 1.2rem; border-radius: 8px;
  font-weight: 600; text-decoration: none; text-align: center; cursor: pointer;
}
.button--primary { background: var(--color-primary); color: #0B0E14; }
.button--secondary { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); }
.button[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* 9. Data Ball */
.data-balls { display: flex; gap: 0.75rem; margin: 0.75rem 0; }
.data-ball {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; color: #fff;
}
.data-ball--a { background: var(--color-ball-a); }
.data-ball--b { background: var(--color-ball-b); }
.data-ball--c { background: var(--color-ball-c); }
@media (max-width: 639px) { .data-ball { width: 32px; height: 32px; font-size: 0.85rem; } }
.draw-card__total strong { font-family: var(--font-mono); font-size: 1.3rem; color: var(--color-primary); }

/* 10. Tag / Badge */
.tag { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; border: 1px solid var(--color-divider); }
.tag--demo { border-color: var(--color-warning); color: var(--color-warning); }
.tag--big { border-color: var(--color-primary); color: var(--color-primary); }
.tag--small { border-color: var(--color-ball-a); color: var(--color-ball-a); }
.tag--odd { background: rgba(255,255,255,0.06); }
.tag--even { background: rgba(255,255,255,0.02); }
.tag--hot { border-color: var(--color-error); color: var(--color-error); }
.tag--cold { border-color: var(--color-ball-a); color: var(--color-ball-a); }
.tags { display: flex; gap: 0.5rem; }

/* 11. Table */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-divider); }
.data-table thead th { position: sticky; top: 0; background: var(--color-bg); color: var(--color-text-muted); font-weight: 600; }
.data-table tbody tr:nth-child(odd) { background: var(--color-bg-card); }
.data-table tbody tr:nth-child(even) { background: var(--color-bg-card-alt); }

/* 12. Pagination */
.pagination { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; }

/* 13. Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-card) 25%, var(--color-bg-card-alt) 37%, var(--color-bg-card) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 6px;
}
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* 14/15. Empty / Error state */
.empty-state, .error-page { text-align: center; padding: 3rem 1rem; color: var(--color-text-muted); }
.error-page h1 { font-size: 3rem; color: var(--color-primary); }

/* 16. Alert */
.alert { border-radius: var(--radius-card); padding: 1rem; border: 1px solid; }
.alert--warning { border-color: var(--color-warning); background: rgba(245,166,35,0.08); color: var(--color-warning); }
.alert--info { border-color: var(--color-text-muted); background: rgba(138,148,166,0.08); color: var(--color-text-muted); }

/* Countdown / bar-chart / qr placeholders */
.countdown { font-family: var(--font-mono); font-size: 2rem; color: var(--color-primary); }
.bar-chart-placeholder { display: flex; gap: 0.5rem; align-items: flex-end; height: 80px; }
.bar-chart-placeholder .bar { width: 30px; background: var(--color-primary); border-radius: 4px 4px 0 0; }
.qr-placeholder {
  width: 120px; height: 120px; border: 1px dashed var(--color-divider);
  display: flex; align-items: center; justify-content: center; color: var(--color-text-muted);
}

/* Quick links grid */
.quick-links__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .quick-links__grid { grid-template-columns: repeat(4, 1fr); } }
.quick-link { text-align: center; font-weight: 600; }

/* Stage 2B: old .site-footer* rules deleted -- components/footer.html now
   renders the Frontend Foundation footer (layouts/footer.css), see the
   note above the deleted .site-nav* block. */

/* FAQ / command list */
.faq dt { font-weight: 700; margin-top: 1rem; }
.command-list { list-style: none; padding: 0; }
.command-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--color-divider); }
.command-list code { color: var(--color-primary); font-family: var(--font-mono); }

/* Filter skeleton */
.filter-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.filter-row input { background: var(--color-bg); border: 1px solid var(--color-divider); color: var(--color-text-muted); padding: 0.4rem; border-radius: 6px; }

/* Phase 3D: statistics/trend/omission -- data state line, window switcher */
.data-state { color: var(--color-text-muted); font-size: 0.9rem; }
.hint-text { color: var(--color-text-muted); font-size: 0.85rem; }
.window-switcher { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0 0; }
.window-switcher__item {
  padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--color-divider);
  color: var(--color-text-muted); font-size: 0.85rem;
}
.window-switcher__item:hover { border-color: var(--color-primary); text-decoration: none; }
.window-switcher__item.is-active { border-color: var(--color-primary); color: var(--color-primary); }

.stat-list { list-style: none; padding: 0; margin: 0; }
.stat-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--color-divider); }
.stat-list li:last-child { border-bottom: none; }

/* Horizontal-scroll wrapper for wide tables/charts on mobile (spec: 移动端横向滚动) */
.table-scroll { overflow-x: auto; }

/* CSS bar chart -- native, no chart library */
.bar-chart__row { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0; }
.bar-chart__label { width: 2.5rem; flex-shrink: 0; color: var(--color-text-muted); }
.bar-chart__track {
  flex: 1; height: 12px; background: var(--color-bg-card-alt); border-radius: 6px; overflow: hidden;
}
.bar-chart__fill { height: 100%; background: var(--color-primary); border-radius: 6px; }
.bar-chart__value { width: 6rem; flex-shrink: 0; text-align: right; font-family: var(--font-mono); font-size: 0.85rem; }

/* Compact numeric tables (0-27 / 0-9 distributions) */
.data-table--compact { min-width: 100%; }
.data-table--compact th, .data-table--compact td {
  padding: 0.35rem 0.5rem; text-align: center; font-family: var(--font-mono); font-size: 0.8rem; white-space: nowrap;
}

/* Native SVG trend line -- no chart library */
.trend-svg { width: 100%; height: 140px; display: block; }
.trend-svg__axis { stroke: var(--color-divider); stroke-width: 1; }
.trend-svg__line { stroke: var(--color-primary); stroke-width: 2; }
.chart-alt-text { color: var(--color-text-muted); font-size: 0.8rem; margin-top: 0.5rem; }

/* Omission heatmap table -- shading conveys emphasis, cell text still carries the actual value
   (spec: 不能仅靠颜色传达信息). Background switched from a hardcoded gold
   rgba() to --warning-tint: the hardcoded value was never paired against
   --color-primary's light-theme override, and measured only 4.40:1 (just
   under WCAG AA 4.5:1) even after that override -- --warning-tint is
   Foundation's own tint, already audited as a matched pair with
   --warning-500 in both themes. */
.omission-heatmap td.omission-cell--fresh { background: var(--warning-tint); color: var(--color-primary); font-weight: 700; }
.omission-heatmap td.omission-cell--never { color: var(--color-text-muted); }

/* Phase 4A: pattern (豹子/对子/顺子/杂六) / extreme (极大/极小) tags */
.tag--pattern { border-color: var(--color-ball-b); color: var(--color-ball-b); }
.tag--extreme { border-color: var(--color-error); color: var(--color-error); background: rgba(231,76,60,0.08); }

/* Phase 4A: real countdown widget (replaces the Phase 3B demo placeholder) */
.countdown-display { margin: 0.75rem 0; }
.countdown-timer { font-family: var(--font-mono); font-size: 2.2rem; color: var(--color-primary); font-weight: 700; }
.countdown-meta { color: var(--color-text-muted); font-size: 0.9rem; margin: 0.25rem 0 0; }
.countdown-sync-note { color: var(--color-warning); font-size: 0.85rem; margin-top: 0.5rem; }
.countdown-sync-note[hidden] { display: none; }

/* Phase 4A: scratch-to-reveal overlay -- canvas sits absolutely over the
   real (already server-rendered) result; revealing just hides the canvas,
   the underlying markup never changes. */
.scratch-wrap { position: relative; border-radius: var(--radius-card); overflow: hidden; }
.scratch-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; cursor: pointer; z-index: 1;
}
.scratch-reveal-btn {
  position: absolute; bottom: 0.6rem; right: 0.6rem; z-index: 2;
  background: rgba(11,14,20,0.75); color: var(--color-primary);
  border: 1px solid var(--color-primary); border-radius: 999px;
  padding: 0.3rem 0.9rem; font-size: 0.8rem; cursor: pointer;
}
.scratch-revealed .scratch-canvas, .scratch-revealed .scratch-reveal-btn { display: none; }

/* Stage 2F.8: DrawResultBar -- single-row-first unified result display
   (components/draw_result_bar.html). Two independent flex children
   (equation, tags) inside one wrapping flex row: the equation never
   breaks internally (white-space+flex-shrink:0 on its own children), so
   the only possible wrap point is "tags drop to their own line" -- at
   most 2 rows ever, never the old 5-6 row stacked list. */
.draw-result-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2, 8px) var(--space-4, 16px);
}
.draw-result-bar__equation {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 1.1rem; font-weight: 700;
}
.draw-result-bar--lg .draw-result-bar__equation { font-size: 1.4rem; }
.draw-result-bar__ball {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.95rem;
}
.draw-result-bar--lg .draw-result-bar__ball { width: 38px; height: 38px; font-size: 1.1rem; }
/* Stage 2F.10: 最近 5 期 list row size -- smaller than the base/default
   size (itself already smaller than --lg's Hero treatment) since 5 of
   these stack vertically in the Draw Workspace's right column. */
.draw-result-bar--sm .draw-result-bar__equation { font-size: 0.92rem; gap: 4px; }
.draw-result-bar--sm .draw-result-bar__ball { width: 22px; height: 22px; font-size: 0.75rem; }
.draw-result-bar--sm .draw-result-bar__tags .badge { font-size: 0.68rem; padding: 1px 8px; }
.draw-result-bar__ball--a { background: var(--data-tiger); }
.draw-result-bar__ball--b { background: var(--data-odd); }
.draw-result-bar__ball--c { background: var(--data-even); }
.draw-result-bar__op { color: var(--color-text-muted); }
.draw-result-bar__total { color: var(--color-primary); font-size: 1.2em; }
.draw-result-bar__tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Below ~340px an equation of 3 balls + operators can itself be tight --
   shave ball size/gaps one more notch rather than letting the row
   overflow (real 320px Playwright check in Stage 2F.8's Implementation
   Report confirms this stays inside the viewport). */
@media (max-width: 359px) {
  .draw-result-bar__ball { width: 26px; height: 26px; font-size: 0.85rem; }
  .draw-result-bar__equation { font-size: 1rem; gap: 4px; }
}

/* Stage 2F.8 proactive UX audit finding: .keno-pill/.keno-pill-row were
   used in templates/pages/live.html since Stage 2C but NEVER had a base
   CSS definition anywhere in the codebase -- history.css only carries a
   narrow max-width override scoped to `.history-keno-cell .keno-pill-row`,
   which does nothing without the base rule. The 20 Keno numbers have been
   rendering as unstyled plain-text spans in production this whole time.
   Fixed here (not a Stage 2F.8 feature -- home.html's new Keno panel
   reuses the same markup, which is what surfaced this while implementing
   it) rather than left for a future stage, since the fix is one small,
   contained, low-risk rule addition. */
.keno-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.keno-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 999px; background: var(--color-bg-card-alt);
  border: 1px solid var(--color-divider);
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text);
}
.keno-pill-bonus { border-color: var(--color-primary); color: var(--color-primary); font-weight: 700; }