/* App layer on top of the vendored Ledger tokens (tokens.css, pinned from
   github.com/dgoodenough/style). Layout + app-specific components only —
   colors and type come from the tokens. */

html, body { margin: 0; }
#app { max-width: 1080px; margin: 0 auto; padding: 0 16px 32px; }

/* header */
#top { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; padding: 16px 0 10px; }
#top .kicker { margin: 0 0 2px; color: var(--ink-3); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; }
#top h1 { margin: 0; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.3px; }
#top .stakes { margin: 6px 0 0; font-size: var(--fs-body); color: var(--ink); font-variant-numeric: tabular-nums; }
#top .stakes b { font-weight: 700; }
#top .stakes .lk { color: var(--pos); }   /* locked in = have (green) */
#top .stakes .al { color: var(--pend); }  /* still contested = pending (yellow) */
#top .sub { margin: 5px 0 0; color: var(--ink-2); font-size: var(--fs-small); }
#live-note { margin: 5px 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--neg); }

/* pulsing "live" dot + badge */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--neg); vertical-align: middle; margin-right: 5px; animation: live-pulse 1.4s ease-in-out infinite; }
.live-badge { display: inline-block; font-size: var(--fs-caption); color: var(--neg); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.live-badge .live-dot { width: 6px; height: 6px; margin-right: 3px; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.controls { display: flex; gap: 8px; }

/* segmented control (band = active, per Ledger greyscale-structure rule) */
.seg { display: flex; border: 1px solid var(--grid-strong); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.seg button { font: inherit; padding: 6px 13px; background: none; border: none; color: var(--ink-2); cursor: pointer; }
.seg button.active { background: var(--band); color: var(--band-ink); font-weight: 700; }

/* tables */
.table-tools { display: flex; justify-content: flex-end; margin: 2px 0 6px; }
.table-tools .btn { font-size: var(--fs-small); padding: 4px 10px; }
/* overflow-x:visible in the default view keeps the page as the scroll context
   so the header can stick; only the "all columns" view scrolls horizontally */
.table-wrap { overflow-x: visible; }
.table-ledger { width: 100%; }
.table-ledger th { position: sticky; top: 0; z-index: 2; }

/* Responsive columns: hide low-priority tiers as the window narrows.
   Order of importance is #, Player, Points, Cup (core, never hidden) →
   Proj.pts + sparkline (t1) → Auto Bid + MVP Bid (t2) → GMC + MVP (t3) →
   Rating + Starts + Proj.rank (t4). "All columns" overrides every hide.
   Viewport (not container) queries so no scroll-container ancestor breaks
   the sticky header. */
@media (max-width: 940px) { .t4 { display: none; } }
@media (max-width: 790px) { .t3 { display: none; } }
@media (max-width: 690px) { .t2 { display: none; } }
@media (max-width: 560px) { .t1 { display: none; } }
/* All/Advanced: break out of the content column to the full viewport so the
   wide table uses the whole screen before it needs to scroll (the movers box
   and header stay at content width) */
.table-wrap.cols-all {
  overflow-x: auto;
  width: calc(100vw - 32px);
  margin-left: calc(50% - 50vw + 16px);
}
.table-wrap.cols-all .t1, .table-wrap.cols-all .t2,
.table-wrap.cols-all .t3, .table-wrap.cols-all .t4 { display: table-cell; }
/* let the table exceed the wrap so it scrolls (don't cram) */
.table-wrap.cols-all .table-ledger { width: auto; min-width: 100%; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--pend-on-band, #ffd21e); }
th.sorted { color: var(--pos-on-band, #7ee2a8); }
tbody tr.expandable { cursor: pointer; }
tbody tr.expandable:hover td { background: var(--pos-fill); }
tbody tr.detail > td { background: var(--chrome-2, var(--paper-2)) !important; padding: var(--pad-2) 14px 14px; }
.dim { color: var(--ink-3); }

/* PDGA-required player/event links: quiet in the tables, obvious on hover */
a.plink { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ink-3); }
a.plink:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* in-row sparkline of the finishing-position distribution (3 SVG paths) */
/* nationality flag column (advanced view): narrow, centered */
th[data-key="country"], td.flagcell { width: 34px; text-align: center; }
.flag { font-size: 1.05rem; line-height: 1; }

td.sparkcell { width: 130px; padding-top: 3px; padding-bottom: 3px; }
.spark { height: 22px; width: 120px; cursor: crosshair; }
.spark svg { width: 100%; height: 100%; display: block; }
.spark .sp-in { fill: var(--pos); }
.spark .sp-out { fill: var(--grid-strong); }
.spark .sp-over { fill: var(--neg); opacity: .7; }

/* floating tooltip (immediate, no native-title delay) */
#spark-tip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--band); color: var(--band-ink); font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption); padding: 2px 7px; border-radius: var(--radius);
  border: 1px solid var(--grid-strong); white-space: nowrap;
}

/* expanded detail: two-column breakdown + big histogram */
.detail-grid { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.detail-grid > div { flex: 1; min-width: 300px; max-width: 100%; overflow-x: auto; }
/* the 7-column what-if table scrolls inside its panel on phones */
.detail-grid > div:nth-child(2) .detail-tbl { min-width: 520px; }
@media (max-width: 700px) {
  /* cap the panels to the screen so their tables scroll internally instead
     of stretching the whole forecast table */
  .detail-grid > div { max-width: calc(100vw - 56px); }
}
.detail-tbl { margin-top: 4px; }
.detail-tbl th { position: static; font-size: var(--fs-caption); }
.detail-tbl td { font-size: var(--fs-small); }
tr.dropped td { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.drop-tag { color: var(--ink-3); font-size: var(--fs-caption); text-decoration: none; display: inline-block; }
.drop-hi { color: var(--ink-2); font-weight: 600; }  /* high drop odds: still bold, but muted */
.keep-tag { color: var(--pos); font-size: var(--fs-caption); }
.detail-grid .band { font-size: var(--fs-caption); margin-bottom: 2px; }
/* placement shown after a single event's points — smaller, quieter */
.place { color: var(--ink-3); font-size: var(--fs-caption); }
.ev-date { color: var(--ink-3); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.note-flag { color: var(--pend); font-size: var(--fs-caption); cursor: help; }
.medal { cursor: help; }
.detail-tbl input[type="checkbox"] { width: 14px; height: 14px; vertical-align: middle; }
/* events the player isn't projected to attend: greyed until checked */
.detail-tbl tr.not-att td:not(:first-child) { color: var(--ink-3); }

/* inline what-if scenario readout */
.wf-scenario { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wf-scenario .stat { font-size: 1.5rem; }
.wf-scenario .stat.pos { color: var(--pos); }
.wf-scenario .stat.pend { color: var(--pend); }
.wf-scenario .stat.dim { color: var(--ink-3); }
.wf-swing { font-variant-numeric: tabular-nums; font-weight: 600; }
.wf-swing.pos { color: var(--pos); }
.wf-swing.neg { color: var(--neg); }
.wf-scenario .btn { margin-left: auto; }

/* rank histogram (expanded detail) */
.bighist-wrap { margin-top: 14px; }
.hist { display: flex; align-items: flex-end; gap: 2px; height: 84px; margin: 4px 0 2px; }
.hist .col { flex: 1; min-width: 4px; background: var(--grid-strong); }
.hist .col.in-cut { background: var(--pos); }
.hist .col.overflow { background: var(--neg); opacity: .7; }
.hist-labels { display: flex; gap: 2px; font-size: 10px; color: var(--ink-3); }
.hist-labels span { flex: 1; text-align: center; min-width: 4px; }

/* headline stats */
.stat { font-size: 1.9rem; }
.stat-label { font-size: var(--fs-caption); color: var(--ink-2); text-transform: uppercase; letter-spacing: .6px; }
.hint { color: var(--ink-2); font-size: var(--fs-small); }

/* week-over-week movers panel */
.movers { margin: 0 0 10px; border: 1px solid var(--grid); background: var(--paper); overflow-x: auto; }
.movers .table-ledger { min-width: 560px; }  /* scroll inside the panel on phones, don't cram */
.movers summary { cursor: pointer; padding: 7px 10px; font-weight: 700; font-size: var(--fs-small); background: var(--band); color: var(--band-ink); }
.movers .table-ledger { margin: 0; }
.movers-up { color: var(--pos); font-weight: 600; }
.movers-down { color: var(--neg); font-weight: 600; }
.reg-chip { display: inline-block; font-size: var(--fs-caption); padding: 0 5px; border-radius: var(--radius); border: 1px solid var(--grid); white-space: nowrap; }
.reg-chip.reg-in { color: var(--pos); background: var(--pos-fill); }
.reg-chip.reg-out { color: var(--neg); background: var(--neg-fill); }

/* explainer / static pages */
.page { max-width: 780px; margin: 0 auto; padding: 0 16px 40px; }
.page h1 { font-size: 1.3rem; margin: 18px 0 4px; }
.page .band { margin: 22px 0 8px; }
.page p, .page li { font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }
.page li { margin: 3px 0; }
.page .table-ledger { margin: 8px 0; }
.page .table-ledger td, .page .table-ledger th { font-size: var(--fs-small); }
.changelog-date { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 10px; }

footer { margin-top: 22px; color: var(--ink-3); font-size: var(--fs-small); }