/* Consensus Edge — Cricket Trust Page
 * Dark theme base + 3-section layout.
 * Sub-spec #2 UX + Trust Layer, Task 1.
 */

:root {
  --bg-0: #0b0d10;
  --bg-1: #14181d;
  --bg-2: #1c2128;
  --ck-border: #2a313a;
  --text-0: #e6edf3;
  --text-1: #9ba6b2;
  /* a11y: bumped from #6b7684 (~4.3:1) to #8b95a2 for WCAG AA 4.5:1 on bg-1 */
  --text-2: #8b95a2;
  --ck-accent: #3fb950;
  --accent-dim: #2ea043;
  --warn: #d29922;
  --danger: #f85149;
  --link: #58a6ff;
  --radius: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ck-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }

/* FIX 2026-07-23: this reset was `html, body` + a bare `a`, so it also landed on
   the SPA, where cricket.css is lazy-linked for the hidden cricket tab. Being the
   later sheet it overrode main.css app-wide — system sans instead of IBM Plex
   Sans, #0b0d10 page bg, and cricket's link blue on every anchor. Scoped to
   pages that aren't the app shell. */
body:not(.app-shell) {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body:not(.app-shell) a { color: var(--link); text-decoration: none; }
body:not(.app-shell) a:hover { text-decoration: underline; }

.trust-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  display: grid;
  /* minmax(0,1fr), not 1fr: a bare `1fr` track is minmax(auto,1fr), so it
     inflates to the widest child's min-content and drags every sibling past
     the viewport (30px overflow at 320px). minmax(0,...) lets it shrink so
     the .table-scroll containers inside can actually scroll. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.trust-hero {
  padding: var(--space-5) var(--space-4);
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border: 1px solid var(--ck-border);
  border-radius: var(--radius);
  text-align: center;
}

.trust-hero h1 {
  margin: 0 0 var(--space-3) 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero-kpi {
  font-size: 1.1rem;
  color: var(--text-1);
  margin: 0 0 var(--space-2) 0;
}

.hero-kpi strong {
  color: var(--text-0);
  font-family: var(--ck-font-mono);
  font-weight: 600;
}

.hero-caveat {
  font-size: 0.94rem;
  color: var(--text-2);
  margin: 0;
  font-style: italic;
}

.trust-page section {
  padding: var(--space-4);
  background: var(--bg-1);
  border: 1px solid var(--ck-border);
  border-radius: var(--radius);
}

.trust-page section h2 {
  margin: 0 0 var(--space-4) 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-0);
  border-bottom: 1px solid var(--ck-border);
  padding-bottom: var(--space-2);
}

.chart-container {
  width: 100%;
  height: 280px;
  margin-bottom: var(--space-4);
  background: var(--bg-2);
  border-radius: var(--radius);
}

.benchmark-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ck-font-mono);
  font-size: 0.94rem;
}

.benchmark-table th,
.benchmark-table td {
  padding: var(--space-2) var(--space-3);
  text-align: right;
  border-bottom: 1px solid var(--ck-border);
}

.benchmark-table th:first-child,
.benchmark-table td:first-child {
  text-align: left;
}

.benchmark-table th {
  color: var(--text-1);
  font-weight: 500;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.methodology {
  color: var(--text-1);
  line-height: 1.7;
}

.retraction-disclosure {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-2);
  border: 1px solid var(--ck-border);
  border-radius: var(--radius);
}

.retraction-disclosure summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--warn);
  padding: var(--space-1) 0;
}

.retraction-disclosure[open] summary {
  margin-bottom: var(--space-3);
}

.picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.picks-grid:last-child {
  margin-bottom: 0;
}

.pick-card {
  padding: var(--space-3);
  background: var(--bg-2);
  border: 1px solid var(--ck-border);
  border-radius: var(--radius);
  font-size: 0.94rem;
}

.pick-card .pick-title {
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.pick-card .pick-meta {
  color: var(--text-2);
  font-family: var(--ck-font-mono);
  font-size: 0.86rem;
}

.pick-card.settled-win { border-left: 3px solid var(--ck-accent); }
.pick-card.settled-loss { border-left: 3px solid var(--danger); }
.pick-card.settled-push { border-left: 3px solid var(--text-2); }

.delta-good { color: var(--ck-accent); font-weight: 500; }
.delta-bad { color: var(--danger); }
.chart-empty { color: var(--text-2); text-align: center; padding: var(--space-4); }

.chart-fallback-table { width: 100%; border-collapse: collapse; color: var(--text-0); }
.chart-fallback-table th, .chart-fallback-table td { padding: var(--space-2); border-bottom: 1px solid var(--ck-border); }

/* Task 12 — small-N banner + chart fallback list */
.small-n-banner {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: rgba(217, 163, 86, 0.1);
  border-left: 3px solid var(--lean-amber, #d9a356);
  border-radius: 4px;
  font-size: 0.94rem;
  color: var(--text, var(--cricket-text, #e4e8ed));
}
.chart-fallback-list {
  padding: 1rem;
  color: var(--text, var(--cricket-text, #e4e8ed));
}
.chart-fallback-list ul {
  margin: 0.5rem 0 0 1.5rem;
}
.chart-fallback-list li {
  color: var(--text-2, var(--cricket-text-dim, #8b95a2));
  font-size: 0.94rem;
  padding: 0.25rem 0;
}

@media (max-width: 720px) {
  .trust-page {
    padding: var(--space-3) var(--space-3);
    gap: var(--space-4);
  }
  .trust-hero h1 { font-size: 1.5rem; }
  .hero-kpi { font-size: 1rem; }
  .trust-page section { padding: var(--space-3); }
  .picks-grid { grid-template-columns: 1fr; }
  .benchmark-table { font-size: 0.86rem; }
  .benchmark-table th,
  .benchmark-table td { padding: var(--space-2); }
}

/* Task 5 — methodology + picks card details */
.pick-teams { color: var(--text, var(--cricket-text, #e4e8ed)); font-weight: 500; margin-bottom: 0.25rem; }
.pick-probs { color: var(--text-2, var(--cricket-text-dim, #7a8795)); font-size: 0.92rem; }

.methodology h2, .methodology h3 { margin-top: 1.5rem; }
.methodology p { line-height: 1.6; }
.methodology ul { margin: 0.5rem 0 1rem 1.5rem; }

/* Cricket tab — private side (Task 6) */
.cricket-header { padding: 1.5rem; background: var(--panel, var(--cricket-panel, #1a2028)); }
.cricket-header h2 { margin: 0; }
.cricket-subtitle { color: var(--text-2, var(--cricket-text-dim, #7a8795)); font-size: 0.94rem; }

.upgrade-prompt {
  margin: 1rem 1.5rem;
  padding: 1rem;
  background: var(--panel, var(--cricket-panel, #1a2028));
  border-left: 3px solid var(--lean-amber, #d9a356);
  border-radius: 4px;
}
.btn-upgrade {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--ck-accent, var(--cricket-accent, #56d9a7));
  color: var(--bg, var(--cricket-bg, #0f1419));
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
}

.cricket-table { width: 100%; border-collapse: collapse; background: var(--panel, var(--cricket-panel, #1a2028)); }
.cricket-table th { background: var(--bg, var(--cricket-bg, #0f1419)); color: var(--text-2, var(--cricket-text-dim, #7a8795)); padding: 0.5rem; text-align: left; cursor: pointer; }
.cricket-table th:hover { color: var(--ck-accent, var(--cricket-accent, #56d9a7)); }
.cricket-table td { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--defer-grey, #5c6873); }

.cricket-row { cursor: pointer; }
.cricket-row:hover { background: rgba(86, 217, 167, 0.05); }
.cricket-row.tier-bet { border-left: 3px solid var(--bet-green, #56d9a7); }
.cricket-row.tier-lean { border-left: 3px solid var(--lean-amber, #d9a356); }
.cricket-row.tier-defer { border-left: 3px solid var(--defer-grey, #5c6873); }

.cricket-drilldown { background: var(--bg, var(--cricket-bg, #0f1419)); padding: 1.5rem; }
.cricket-drilldown .drilldown-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
}

.nav-locked { opacity: 0.65; }
.nav-locked:hover { opacity: 0.85; }

@media (max-width: 768px) {
  .cricket-drilldown .drilldown-grid { grid-template-columns: 1fr; }
}

/* Drilldown sub-components (Task 9) */
.drilldown-chart h4, .drilldown-venue h4, .drilldown-teams h4, .drilldown-attribution h4 {
  margin: 0 0 0.5rem;
  color: var(--ck-accent, var(--cricket-accent, #56d9a7));
  font-size: 1rem;
}
.venue-stat {
  margin: 0.25rem 0;
  color: var(--text-2, var(--cricket-text-dim, #7a8795));
  font-size: 0.94rem;
}
.venue-stat strong { color: var(--text, var(--cricket-text, #e4e8ed)); }
.team-card {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--defer-grey, #5c6873);
}
.team-name { color: var(--text, var(--cricket-text, #e4e8ed)); font-weight: 500; }
.team-role { color: var(--text-2, var(--cricket-text-dim, #7a8795)); font-size: 0.86rem; }
.toss-info {
  margin-top: 0.75rem;
  padding: 0.5rem;
  background: var(--panel, var(--cricket-panel, #1a2028));
  border-radius: 4px;
  font-size: 0.94rem;
  color: var(--text-2, var(--cricket-text-dim, #7a8795));
}
.drilldown-attribution { margin-top: 1rem; }
.drilldown-empty {
  color: var(--text-2, var(--cricket-text-dim, #7a8795));
  font-style: italic;
  padding: 1rem;
  text-align: center;
}

/* Task 10 — public match permalink back link */
.back-link {
  display: inline-block;
  margin-top: 2rem;
  color: var(--ck-accent, var(--cricket-accent, #56d9a7));
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

/* Task 11 — a11y + mobile polish */
.skip-nav {
  position: absolute;
  left: -9999px;
  z-index: 999;
}
.skip-nav:focus {
  left: 1rem;
  top: 1rem;
  background: var(--ck-accent, #56d9a7);
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

/* Keyboard focus indicator on interactive match rows */
.cricket-row:focus {
  outline: 2px solid var(--ck-accent, #56d9a7);
  outline-offset: -2px;
  background: rgba(86, 217, 167, 0.08);
}

/* Tables that can overflow on narrow viewports — wrap in .table-scroll */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Chart canvas container — allow horizontal scroll if it ever gets clipped */
.chart-scroll {
  overflow-x: auto;
}

/* Chart.js falls back to a 300px intrinsic canvas width when it can't size
   responsively, which overflowed 320px viewports by 13px. Only one of the two
   .chart-container elements also has .chart-scroll, so don't rely on the
   container clipping — constrain the canvas itself. */
.chart-container canvas {
  max-width: 100%;
}

@media (max-width: 720px) {
  .chart-container { height: 220px; }
}

@media (max-width: 768px) {
  .cricket-table { font-size: 0.9rem; }
  .cricket-table th, .cricket-table td { padding: 0.4rem; }
}