/* ============================================================
   Design tokens
   Full light palette on bare :root, then only the values that
   change get redefined for dark. Nothing is defined *only*
   inside a media query, so the explicit theme toggle can win
   in both directions.
   ============================================================ */
:root {
  --bg:            #f5f5f7;
  --bg-elevated:   #ffffff;
  --surface:       rgba(255, 255, 255, 0.72);
  --surface-solid: #ffffff;
  --hairline:      rgba(0, 0, 0, 0.10);
  --hairline-soft: rgba(0, 0, 0, 0.055);

  --text:          #1d1d1f;
  --text-2:        #52525b;
  --text-3:        #86868b;

  --accent:        #0a84ff;
  --yes:           #00875a;   /* Kalshi's market green  */
  --yes-bg:        rgba(0, 135, 90, 0.10);
  --no:            #c8102e;   /* Kalshi's market red    */
  --no-bg:         rgba(200, 16, 46, 0.10);

  --fill:          rgba(120, 120, 128, 0.12);
  --fill-strong:   rgba(120, 120, 128, 0.20);
  --shadow-card:   0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-chrome: 0 1px 0 rgba(0,0,0,.05);

  --logo-plate:    #ffffff;

  --radius:   18px;
  --radius-s: 11px;

  /* Apple's shipped spring values, expressed as CSS easings.
     Damping 1.0 -> no overshoot, for anything that isn't
     momentum-driven. The bounce curve is reserved for elements
     the user actually flicked or tapped open. */
  --ease-settle: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.46, 1);
  --dur:         0.4s;
  --dur-fast:    0.22s;
}

:root:not([data-theme="light"]) {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #000000;
    --bg-elevated:   #1c1c1e;
    --surface:       rgba(28, 28, 30, 0.72);
    --surface-solid: #1c1c1e;
    --hairline:      rgba(255, 255, 255, 0.12);
    --hairline-soft: rgba(255, 255, 255, 0.07);

    --text:          #f5f5f7;
    --text-2:        #aeaeb2;
    --text-3:        #8e8e93;

    --accent:        #0a84ff;
    --yes:           #30d158;
    --yes-bg:        rgba(48, 209, 88, 0.15);
    --no:            #ff453a;
    --no-bg:         rgba(255, 69, 58, 0.15);

    --fill:          rgba(120, 120, 128, 0.24);
    --fill-strong:   rgba(120, 120, 128, 0.36);
    --shadow-card:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
    --shadow-chrome: 0 1px 0 rgba(255,255,255,.04);
    --logo-plate:    #f2f2f4;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #000000;
  --bg-elevated:   #1c1c1e;
  --surface:       rgba(28, 28, 30, 0.72);
  --surface-solid: #1c1c1e;
  --hairline:      rgba(255, 255, 255, 0.12);
  --hairline-soft: rgba(255, 255, 255, 0.07);
  --text:          #f5f5f7;
  --text-2:        #aeaeb2;
  --text-3:        #8e8e93;
  --yes:           #30d158;
  --yes-bg:        rgba(48, 209, 88, 0.15);
  --no:            #ff453a;
  --no-bg:         rgba(255, 69, 58, 0.15);
  --fill:          rgba(120, 120, 128, 0.24);
  --fill-strong:   rgba(120, 120, 128, 0.36);
  --shadow-card:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
  --shadow-chrome: 0 1px 0 rgba(255,255,255,.04);
  --logo-plate:    #f2f2f4;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  /* Tabular figures everywhere: prices must not reflow as they tick. */
  font-variant-numeric: tabular-nums;
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input  { font: inherit; color: inherit; }

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding-inline: 16px;   /* never collapses at any width */
}

/* ============================================================
   Header - a translucent layer content scrolls beneath,
   not an opaque strip that eats a fixed band of the viewport.
   ============================================================ */
.chrome {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--surface);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--hairline-soft);
  box-shadow: var(--shadow-chrome);
}

.chrome-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 14px 10px;
  flex-wrap: wrap;
}

h1 {
  margin: 0;
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.024em;   /* large text reads too loose without this */
  font-weight: 700;
}

.freshness {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.005em;
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--yes);
  box-shadow: 0 0 0 3px var(--yes-bg);
}
.dot.stale { background: #ff9f0a; box-shadow: 0 0 0 3px rgba(255,159,10,.15); }

.subhead {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 12px;
  letter-spacing: 0.003em;
}

/* Segmented control - the iOS pill, with a sliding indicator that
   moves under the active label rather than repainting per tab. */
.segmented {
  position: relative;
  display: flex;
  gap: 2px;
  background: var(--fill);
  border-radius: 10px;
  padding: 2px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }

.segmented button {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-settle);
}
.segmented button[aria-selected="true"] { color: var(--text); font-weight: 600; }
.segmented button:active { transform: scale(0.96); }

.seg-thumb {
  position: absolute;
  top: 2px; bottom: 2px; left: 0;
  border-radius: 8px;
  background: var(--surface-solid);
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
  transition: transform var(--dur) var(--ease-settle),
              width    var(--dur) var(--ease-settle);
  pointer-events: none;
}

.search {
  width: 100%;
  padding: 9px 13px;
  border-radius: var(--radius-s);
  background: var(--fill);
  border: 1px solid transparent;
  margin-bottom: 12px;
  transition: border-color var(--dur-fast) var(--ease-settle),
              background   var(--dur-fast) var(--ease-settle);
}
.search::placeholder { color: var(--text-3); }
.search:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-solid);
}

/* ============================================================
   Cards
   ============================================================ */
main { padding-block: 18px 64px; }

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 17px;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-settle);
}
/* Feedback on the press itself, not on release. */
.card-head:active { background: var(--fill); }

.matchup { flex: 1; min-width: 0; }

.matchup { display: block; }

.teams {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta {
  display: block;
  font-size: 12.5px;
  color: var(--text-3);
  letter-spacing: 0.004em;
  margin-top: 2px;
}

.count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--fill);
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.chev {
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease-settle);
}
.card[open] .chev,
.card.open .chev { transform: rotate(90deg); }

/* The disclosure animates on a grid track rather than max-height,
   so it opens to the content's true height at any width. */
.card-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-settle);
}
.card.open .card-body { grid-template-rows: 1fr; }
.card-body > div { overflow: hidden; }

.body-inner { padding: 0 17px 15px; }

/* ============================================================
   Market rows
   ============================================================ */
.group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.055em;   /* small text needs positive tracking */
  text-transform: uppercase;
  color: var(--text-3);
  margin: 16px 0 7px;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 2px;
  border-top: 1px solid var(--hairline-soft);
}
.row:first-of-type { border-top: 0; }

.row-label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-vol {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
}

.prices { display: flex; gap: 6px; flex-shrink: 0; }

.price {
  min-width: 54px;
  padding: 5px 9px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: transform 100ms var(--ease-settle),
              filter    100ms var(--ease-settle);
}
.price:active { transform: scale(0.95); filter: brightness(0.94); }

.price .side {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  opacity: 0.72;
}

.price.yes { background: var(--yes-bg); color: var(--yes); }
.price.no  { background: var(--no-bg);  color: var(--no);  }
.price.empty { background: var(--fill); color: var(--text-3); font-weight: 500; }

/* A probability bar under the label reads faster than the number
   alone - it maps price to the thing price actually means. */
.prob {
  height: 3px;
  border-radius: 2px;
  background: var(--fill);
  overflow: hidden;
  margin-top: 5px;
}
.prob i {
  display: block;
  height: 100%;
  background: var(--yes);
  border-radius: 2px;
  transition: width var(--dur) var(--ease-settle);
}

.delta { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.delta.up   { color: var(--yes); }
.delta.down { color: var(--no); }

/* ============================================================
   States
   ============================================================ */
.notice {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-2);
}
.notice h2 {
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.notice p { margin: 0; font-size: 14px; }

.banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(255, 159, 10, 0.14);
  border: 1px solid rgba(255, 159, 10, 0.3);
  color: var(--text);
  padding: 11px 14px;
  border-radius: var(--radius-s);
  font-size: 13px;
  margin-bottom: 14px;
}

.skeleton {
  height: 74px;
  border-radius: var(--radius);
  background: var(--fill);
  margin-bottom: 12px;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 0.95; } }

.player-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.player-team {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

footer {
  padding: 26px 0 40px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.7;
}
footer a { color: var(--text-2); }

/* ============================================================
   Accessibility preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Reduced motion means gentler feedback, not none: the card still
     opens, it just cross-fades instead of springing. */
  .card-body { transition: none; }
  .price:active, .card-head:active, .segmented button:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .chrome { background: var(--surface-solid); backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .card   { border-color: var(--text-3); }
  .chrome { background: var(--surface-solid); backdrop-filter: none; }
  .price  { outline: 1px solid currentColor; }
}

@media (max-width: 560px) {
  .row { flex-wrap: wrap; gap: 8px; }
  .row-label { flex-basis: 100%; white-space: normal; }
  .price { min-width: 50px; }
}

/* ------------------------------------------------------------
   Refinements after looking at the rendered page
   ------------------------------------------------------------ */

/* The probability bar is a glanceable cue, not a full-width rule.
   Capping it keeps it readable next to long market labels. */
.prob { max-width: 260px; }

/* Nested (in-card) segmented controls have no sliding thumb, so the
   selected state needs its own background to stay legible. */
.body-inner .segmented button[aria-selected="true"] {
  background: var(--surface-solid);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

/* ============================================================
   Panels — each market type gets its own kind of box rather
   than one uniform list of rows. A moneyline is a head-to-head;
   a spread is a ladder; a prop belongs to a person. Making them
   look different is what lets you find them without reading.
   ============================================================ */

.panel {
  background: var(--surface-solid);
  border: 1px solid var(--hairline-soft);
  border-radius: 15px;
  margin-top: 12px;
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 11px 14px 9px;
  border-bottom: 1px solid var(--hairline-soft);
  background: var(--fill);
}

.panel-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;   /* small caps need the extra tracking */
  text-transform: uppercase;
  color: var(--text-2);
}

.panel-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-inline-start: auto;
  letter-spacing: 0.004em;
}

.panel-body { padding: 11px; }

/* ---- Head-to-head: the marquee market, so it gets the space ---- */
.h2h {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
  padding: 4px 3px 8px;
}

.h2h-side {
  background: var(--fill);
  border-radius: 13px;
  padding: 14px 12px;
  text-align: center;
  transition: transform 120ms var(--ease-settle),
              background 120ms var(--ease-settle);
}
.h2h-side:active { transform: scale(0.98); background: var(--fill-strong); }

.h2h-team {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.008em;
  margin-bottom: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.h2h-price {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;   /* large numerals read loose without this */
  color: var(--yes);
}
.h2h-price small { font-size: 15px; font-weight: 600; opacity: 0.6; }

.h2h-imp {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 5px;
}

.h2h-vs {
  align-self: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

/* ---- Tiles: one small box per market, wrapping into a grid ---- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 8px;
}

.tile {
  background: var(--fill);
  border-radius: 12px;
  padding: 10px 11px;
  transition: transform 120ms var(--ease-settle),
              background 120ms var(--ease-settle);
}
.tile:active { transform: scale(0.985); background: var(--fill-strong); }

.tile-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A strike number is the thing you scan for, so it leads the tile. */
.tile-strike {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.tile-strike em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin-inline-start: 5px;
  letter-spacing: 0;
}

.tile-prices { display: flex; gap: 6px; }
.tile-prices .price { flex: 1; min-width: 0; }

.tile-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  font-size: 11px;
  color: var(--text-3);
}
.tile-foot .delta { margin-inline-start: auto; }

/* ---- Player prop boxes: a person, then their ladders ---- */
.player-box {
  background: var(--fill);
  border-radius: 13px;
  padding: 11px;
  margin-bottom: 9px;
}
.player-box:last-child { margin-bottom: 0; }

.player-box-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}

.player-box-name {
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.player-box-team {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-3);
  background: var(--fill-strong);
  padding: 2px 6px;
  border-radius: 5px;
}

.player-box-count {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--text-3);
}

.stat-row { margin-bottom: 10px; }
.stat-row:last-child { margin-bottom: 0; }

.stat-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}

/* A ladder of strikes for one stat: compact chips, not full tiles,
   because the only thing that varies across them is two numbers. */
.ladder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
}

.rung {
  background: var(--surface-solid);
  border: 1px solid var(--hairline-soft);
  border-radius: 9px;
  padding: 7px 8px;
  text-align: center;
  transition: transform 120ms var(--ease-settle),
              border-color 120ms var(--ease-settle);
}
.rung:active { transform: scale(0.96); border-color: var(--yes); }

.rung-strike {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}

.rung-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--yes);
  letter-spacing: -0.015em;
}
.rung-price.cold { color: var(--text-3); }

.rung .prob { max-width: none; margin-top: 5px; height: 2.5px; }

.panel-empty {
  padding: 14px;
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
}

@media (max-width: 520px) {
  .h2h { grid-template-columns: 1fr; }
  .h2h-vs { display: none; }
  .tiles  { grid-template-columns: 1fr; }
  .ladder { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

/* A sub-heading inside a stat ladder, used only when one box holds more
   than one subject (two kickers' field-goal lines, say). */
.side-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  margin: 7px 0 5px;
  letter-spacing: 0.02em;
}
.side-name:first-child { margin-top: 0; }

/* ============================================================
   Team logos
   The monogram sits underneath the image and is revealed only if
   the logo fails to load, so a team never renders as a broken
   image icon.
   ============================================================ */

.logo {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--logo-size, 26px);
  height: var(--logo-size, 26px);
  flex-shrink: 0;
  /* A neutral plate, never the club colour: these crests are drawn to sit on
     white, and several are a single flat colour (Rams navy, Jets green, Giants
     navy), so a club-coloured plate makes those disappear entirely. Neutral
     also keeps dark marks legible against a dark page. */
  background: var(--logo-plate);
  border-radius: 50%;
  overflow: hidden;
}

.logo img,
.logo-mark {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}

.logo img { object-fit: contain; }

.logo-mark {
  display: grid;
  place-items: center;
  /* The fallback carries the club colour itself, since the plate is neutral. */
  background: var(--team, var(--fill-strong));
  color: #fff;
  font-size: calc(var(--logo-size, 26px) * 0.3);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* A class selector beats the UA stylesheet's [hidden] rule, so without this
   the monogram stays visible behind every crest and its letters bleed through
   transparent logos. */
.logo-mark[hidden] { display: none !important; }

/* Two crests on a matchup row. They sit apart rather than overlapping:
   an overlapped stack reads as "a group", which is the wrong idea for two
   opponents, and it hides half of the away club's crest. */
.crests {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* Full-bleed crest above the team name in the head-to-head box. */
.h2h-crest { margin-bottom: 7px; }

/* The small crest that replaces the plain text chip on a player card. */
.player-box-head .logo,
.card-head .matchup .logo { vertical-align: middle; }

@media (prefers-reduced-transparency: reduce) {
  .logo img { opacity: 1; }
}

/* ============================================================
   Game grid
   Every game is a box laid out left-to-right, top-to-bottom,
   with its headline numbers on the face. Nothing has to be
   opened to see who is favoured, by how much, and the total.
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}

.gcard {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 13px 14px 11px;
  text-align: left;
  width: 100%;
  transition: transform 140ms var(--ease-settle),
              border-color 140ms var(--ease-settle);
}
.gcard:active { transform: scale(0.985); border-color: var(--fill-strong); }

.gcard-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 11px;
}

.gcard-when {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--text-3);
}

.gcard-count {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--fill);
  padding: 2px 8px;
  border-radius: 20px;
}

/* One row per club: crest, name, and that club's moneyline price. */
.gteam {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
}

.gteam-name {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -0.008em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The favourite is stated outright rather than left to be inferred
   from which number happens to be larger. */
.gteam.fav .gteam-name { font-weight: 700; }

.gteam-price {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-3);
  min-width: 42px;
  text-align: right;
}
.gteam.fav .gteam-price { color: var(--yes); }

.gcard-lines {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline-soft);
}

.gline {
  flex: 1;
  background: var(--fill);
  border-radius: 9px;
  padding: 6px 8px;
  text-align: center;
  min-width: 0;
}

.gline-k {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 2px;
}

.gline-v {
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gline-v.none { color: var(--text-3); font-weight: 500; }

/* ---- Detail view ---- */
.detail-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--accent);
  white-space: nowrap;   /* "All games" must not wrap on a phone */
  padding: 7px 12px 7px 9px;
  border-radius: 20px;
  background: var(--fill);
  transition: transform 120ms var(--ease-settle),
              background 120ms var(--ease-settle);
}
.back:active { transform: scale(0.96); background: var(--fill-strong); }

.detail-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.detail-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.018em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-when { font-size: 12.5px; color: var(--text-3); }

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

/* ============================================================
   Number line
   A ladder of strikes is one question asked twenty times, so it
   reads as one control rather than twenty boxes: drag along the
   line to move through the strikes and watch the price change.
   ============================================================ */

.nline {
  padding: 9px 4px 4px;
  touch-action: pan-y;   /* let the page scroll vertically, we own the X axis */
}

.nline-top {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 9px;
}

.nline-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.nline-out {
  margin-inline-start: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.nline-v {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nline-p {
  font-size: 15px;
  font-weight: 700;
  color: var(--yes);
  letter-spacing: -0.015em;
  min-width: 38px;
  text-align: right;
}
.nline-p.cold { color: var(--text-3); }

.nline-track {
  position: relative;
  height: 30px;
  cursor: pointer;
  touch-action: pan-y;
}
/* The rail is drawn as a child pseudo-element so the hit area can stay a
   comfortable 30px tall while the line itself is hairline-thin. */
.nline-track::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--fill-strong);
}

.nline-fill {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--yes);
}

.nline-tick {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 9px;
  margin-inline-start: -1px;
  transform: translateY(-50%);
  border-radius: 1px;
  background: var(--text-3);
  opacity: 0.35;
}

.nline-knob {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-inline-start: -9px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--surface-solid);
  border: 2px solid var(--yes);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Motion only on settle. While a finger is down the knob tracks it 1:1;
   a transition there would make it lag behind the pointer. */
.nline-fill,
.nline-knob { transition: left 260ms var(--ease-settle), width 260ms var(--ease-settle); }
.nline.dragging .nline-fill,
.nline.dragging .nline-knob { transition: none; }

.nline.dragging .nline-knob { transform: translateY(-50%) scale(1.18); }

.nline-track:focus-visible { outline: none; }
.nline-track:focus-visible .nline-knob {
  box-shadow: 0 0 0 4px var(--yes-bg), 0 1px 4px rgba(0, 0, 0, 0.3);
}

.nline-axis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

.nline-meta { opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  .nline-fill, .nline-knob { transition: none; }
  .nline.dragging .nline-knob { transform: translateY(-50%); }
}

/* ============================================================
   Traded-only switch, tiles for players and futures
   ============================================================ */

.controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.controls .search { margin-bottom: 0; }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 9px 13px;
  border-radius: var(--radius-s);
  background: var(--fill);
  font-size: 13px;
  font-weight: 550;
  color: var(--text-2);
  white-space: nowrap;
  transition: background 140ms var(--ease-settle),
              color 140ms var(--ease-settle),
              transform 120ms var(--ease-settle);
}
.toggle:active { transform: scale(0.97); }
.toggle[aria-checked="true"] { color: var(--text); background: var(--fill-strong); }

.toggle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  transition: background 140ms var(--ease-settle),
              box-shadow 140ms var(--ease-settle);
}
.toggle[aria-checked="true"] .toggle-dot {
  background: var(--yes);
  box-shadow: 0 0 0 3px var(--yes-bg);
}

/* A market family's page on Kalshi. Kalshi documents series-level URLs
   only, which is exactly the granularity a panel represents. */
.klink {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 140ms var(--ease-settle);
}
.klink:hover { color: var(--accent); }

.panel-head .klink { margin-inline-start: 10px; }

/* ---- Player tiles ---- */
.ptile-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.ptile-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ptile-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A couple of that player's headline lines, so the tile says something
   before it is opened. */
.ptile-lines { display: flex; flex-direction: column; gap: 5px; }

.ptile-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
}
.ptile-stat {
  flex: 1;
  min-width: 0;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ptile-val { font-weight: 650; }
.ptile-price { font-weight: 700; color: var(--yes); min-width: 34px; text-align: right; }

/* ---- Futures tiles ---- */
.ftile-title {
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ftile-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 10px;
}

.ftile-rows { display: flex; flex-direction: column; gap: 6px; }

.ftile-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.ftile-row .logo { --logo-size: 20px; }

.ftile-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ftile-price { font-weight: 700; color: var(--yes); }

.ftile-more {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-3);
}

/* ============================================================
   Sport switcher
   ============================================================ */

.sports {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 10px;
  padding-bottom: 2px;
}
.sports::-webkit-scrollbar { display: none; }

.sport {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--fill);
  font-size: 13px;
  font-weight: 550;
  color: var(--text-2);
  white-space: nowrap;
  transition: background 140ms var(--ease-settle),
              color 140ms var(--ease-settle),
              transform 120ms var(--ease-settle);
}
.sport:active { transform: scale(0.96); }
.sport[aria-selected="true"] { background: var(--text); color: var(--bg-elevated); }

/* A sport you have traded is marked, so your own leagues stand out from
   the ones merely listed. */
.sport-mine::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yes);
}
.sport[aria-selected="true"].sport-mine::after { background: var(--bg-elevated); }

.sport-count { font-size: 11px; opacity: 0.6; }

/* ============================================================
   Live score badge
   ============================================================ */

.score {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.score-live {
  color: var(--no);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.score-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--no);
  animation: pulse 1.6s ease-in-out infinite;
}
.score-final { color: var(--text-3); }

.gteam-score {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  min-width: 26px;
  text-align: right;
  color: var(--text-2);
}
.gteam.winning .gteam-score { color: var(--text); }

/* ============================================================
   Trades — stat tiles and the P&L chart
   ============================================================ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.stat {
  background: var(--bg-elevated);
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  padding: 13px 14px;
}

.stat-k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
}

.stat-v {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.028em;   /* large numerals read loose untracked */
}
.stat-v.up   { color: var(--yes); }
.stat-v.down { color: var(--no); }

.stat-note { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }

.chart-card {
  background: var(--bg-elevated);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: 15px 16px 12px;
  margin-bottom: 12px;
}

.chart-title {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.chart-sub { font-size: 11.5px; color: var(--text-3); margin-bottom: 12px; }

.chart { width: 100%; height: auto; display: block; overflow: visible; }

/* Axes and grid stay recessive: the data is the thing being read. */
.chart .grid-line { stroke: var(--hairline); stroke-width: 1; }
.chart .zero-line { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }
.chart .axis-text { fill: var(--text-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart .pnl-line  { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .pnl-area  { opacity: 0.12; }

.chart .cursor-line { stroke: var(--text-3); stroke-width: 1; opacity: 0.7; }
.chart .cursor-dot  { stroke: var(--bg-elevated); stroke-width: 2; }

.chart-tip {
  position: absolute;
  pointer-events: none;
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 12px;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  transform: translate(-50%, -115%);
  z-index: 5;
}
.chart-tip b { font-variant-numeric: tabular-nums; }
.chart-wrap { position: relative; }

/* Per-sport breakdown bars */
.bars { display: flex; flex-direction: column; gap: 9px; }

.bar-row {
  display: grid;
  grid-template-columns: 62px 1fr 74px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.bar-name { font-weight: 600; }

.bar-track {
  position: relative;
  height: 9px;
  background: var(--fill);
  border-radius: 5px;
  overflow: hidden;
}
.bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.bar-fill.up   { background: var(--yes); }
.bar-fill.down { background: var(--no); }

.bar-val { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.bar-val.up   { color: var(--yes); }
.bar-val.down { color: var(--no); }

.private-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: var(--fill);
  border-radius: var(--radius-s);
  padding: 10px 13px;
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 14px;
}

/* Link to the Ask the Board page (backend-powered Q&A). */
.ask-link {
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: var(--accent); background: var(--fill);
  padding: 4px 10px; border-radius: 999px;
}
.ask-link:hover { background: var(--fill-strong); }