/* Name the Chart's own styles, on top of the family shell (/shared/css/family.css,
   loaded first): the masthead, tile row, buttons, guess bar, chips, dialogs and
   finished screen come from there. What's here is the game's own: the mystery
   ticker tiles, the range links and switches, the chart and its axis text, the
   picks list and the phone composer, and the page column they sit in. The
   chart is set like a newspaper markets page: one slate line on a dotted grid,
   blue range links, tabular figures. Green and red mean up and down, nothing
   else; the game's yellow never touches chart data. */
:root {
  --slate: #3b5378; --link: #326891; --grid: #c4c7cb;
  --up: #1d7a35; --down: #b3261e;
  --field-stroke: #a9adb2; --shadow-pop: 0 8px 24px rgba(18,18,18,.14);
  /* The page column: one centered column at every width, under the 1040px masthead. */
  --col: min(100% - 32px, 640px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sd-page); color: var(--sd-ink); font: 400 15px/1.45 var(--sd-text); caret-color: var(--slate); }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the column, and the tile row above it ---------- */
/* The tile row runs under the masthead with its own hairline, lined up with the column. */
.status-band { border-bottom: 1px solid var(--sd-hair); }
.status-band .sd-status { width: var(--col); margin: 0 auto; }
main { width: var(--col); margin: 0 auto; padding: 16px 0 56px; }
/* Six 30px tiles and "Guess 1 of 6" need about 320px; on the narrowest phones
   the tiles step down so the label still fits. */
@media (max-width: 359px) {
  .status-band .sd-tiles { gap: 4px; }
  .status-band .sd-tiles li { width: 26px; height: 26px; }
}

/* ---------- who it is: the mystery ticker tiles, then the clues ---------- */
.ticker-tiles { display: flex; gap: 8px; }
.tile { display: grid; place-items: center; width: 44px; height: 52px; border: 2px solid var(--sd-ink); border-radius: 4px;
  font: 800 28px/1 var(--sd-text); color: var(--grid); background: var(--sd-page); }
.tile.is-on { background: var(--sd-game); color: var(--sd-ink); }
#facts { margin-top: 12px; }
#facts:empty { display: none; }
/* A clue a miss just revealed lands in full yellow, then settles to the chip's soft yellow. */
.sd-chip.is-new { animation: land 1.6s ease-out; }
@keyframes land { 0%, 30% { background: var(--sd-game); } }

/* ---------- the chart's range links and switches ---------- */
.chart-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.ranges { display: flex; font: 800 12px/1 var(--sd-text); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ranges > * { display: inline-flex; align-items: center; min-height: 32px; padding: 0 9px; border-left: 1px solid var(--sd-line); }
.ranges > :first-child { border-left: 0; padding-left: 0; }
.ranges > :last-child { padding-right: 0; }
.ranges b { font-weight: 800; color: var(--sd-ink); }
.ranges a { color: var(--link); text-decoration: none; }
.ranges a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Log and Show guesses: a small track that fills ink when on. */
.switch { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 34px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 13px var(--sd-text); color: var(--sd-ink-2); white-space: nowrap; }
.switch span { position: relative; width: 28px; height: 16px; border: 1.5px solid var(--sd-ink); border-radius: 999px; transition: background-color .2s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--sd-ink);
  transition: transform .2s var(--sd-ease-out); }
.switch[aria-pressed="true"] { color: var(--sd-ink); }
.switch[aria-pressed="true"] span { background: var(--sd-ink); }
.switch[aria-pressed="true"] span::after { background: var(--sd-page); transform: translateX(12px); }

/* ---------- the chart ---------- */
/* The canvas with its axis text set beside and under it as page type: a
   y-axis column only as wide as its longest figure, and year labels below. */
.chart-wrap { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; margin: 6px 0 0; }
#chart { grid-column: 2; display: block; width: 100%; aspect-ratio: 400 / 240; touch-action: pan-y; cursor: crosshair; }
.y-axis { grid-column: 1; grid-row: 1; position: relative; }
.y-axis span, .x-axis span { position: absolute; font: 500 11px/1 var(--sd-text); color: var(--sd-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.y-axis span { right: 0; transform: translateY(-50%); }
/* Switching scale crossfades the figures while the chart morphs (0.7s). */
.y-axis span.is-in { animation: fig-in .5s var(--sd-ease-out) .2s backwards; }
.y-axis span.is-out { animation: fig-out .25s ease-out forwards; }
@keyframes fig-in { from { opacity: 0; } }
@keyframes fig-out { to { opacity: 0; } }
.x-axis { grid-column: 2; position: relative; height: 18px; }
.x-axis span { top: 5px; transform: translateX(-50%); }
.scrub-tip { position: absolute; top: -6px; transform: translateX(-50%); padding: 4px 8px; border: 1px solid var(--sd-line); border-radius: 3px;
  background: var(--sd-page); box-shadow: 0 2px 8px rgba(18,18,18,.1); font-size: 12px; white-space: nowrap; pointer-events: none;
  font-variant-numeric: tabular-nums; }
.scrub-tip b { font-weight: 700; margin-right: 4px; }
.up { color: var(--up); }
.down { color: var(--down); }

/* ---------- the guess bar (the family's), its picks, and the phone composer ---------- */
#form, .guess-open { margin-top: 16px; }
#form { position: relative; }
.picks { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; margin: 0; padding: 4px 0; list-style: none;
  background: var(--sd-page); border: 1px solid var(--field-stroke); border-radius: 8px; box-shadow: var(--shadow-pop); }
.picks li { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 12px; cursor: pointer;
  font-size: 14px; text-transform: uppercase; letter-spacing: .01em; }
.picks li.is-active, .picks li:hover { background: var(--sd-soft); }
.picks small { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--sd-ink-3); font-variant-numeric: tabular-nums; }
/* On phones the bar in the page is a button drawn like the bar, which opens
   the real one over the keyboard (composer.js). */
.guess-open { width: 100%; border: 0; cursor: text; text-align: left; }
.guess-open span { display: flex; align-items: center; flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1.5px solid var(--sd-ink); border-radius: 6px;
  background: #fff; color: var(--sd-ink-3); font: 400 16px var(--sd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guess-open b { display: grid; place-items: center; height: 44px; padding: 0 18px; border-radius: 6px; background: var(--sd-ink); color: #fff; font: 700 15px/1 var(--sd-text); }
.composer { position: fixed; inset: 0; z-index: 60; }
.composer-backdrop { position: absolute; inset: 0; background: rgba(18,18,18,.45); animation: fade .15s ease-out; }
.composer-panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 0 env(safe-area-inset-bottom); background: var(--sd-game); box-shadow: 0 -6px 24px rgba(18,18,18,.22); }
.composer #form { margin: 0; padding: 8px; border-radius: 0; }
.composer .picks { top: auto; bottom: calc(100% + 8px); left: 8px; right: 8px; display: flex; flex-direction: column-reverse; }
@keyframes fade { from { opacity: 0; } }
.empty { margin: 10px 2px 0; font-size: 14px; color: var(--sd-ink-2); }

/* ---------- your guesses: one line of chips, each naming its line on the chart ---------- */
.guess-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.guess-line:has(#rows:empty) { display: none; }
.guess-chip { position: relative; border: 0; background: var(--sd-page); box-shadow: inset 0 0 0 1.5px var(--sd-line); cursor: pointer; }
/* A taller hit area than the 28px chip. */
.guess-chip::after { content: ""; position: absolute; inset: -8px -3px; }
.guess-chip i { width: 9px; height: 9px; border-radius: 2px; }
.guess-chip:hover, .guess-chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--sd-ink); }

/* ---------- dialogs (the family's) ---------- */
/* The browser caps a modal dialog at 100% - 2em - 6px, narrower than the
   family's 14px margins on a phone; let the family's width stand. */

/* ---------- the finished screen ---------- */
/* The verdict leads, right under the tile row; on phones it runs edge to edge. */
.result { margin: -16px -16px 0; }
.is-done .chart-sec { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--sd-hair); }
.sec-head { margin: 0 0 4px; font: 700 20px/1.1 var(--sd-slab); }
.soon { margin: 80px 0; font: 700 26px/1.2 var(--sd-slab); text-align: center; }
.soon a { color: var(--sd-link); text-underline-offset: 3px; }

/* Wider screens keep the one column; the verdict becomes a panel in it, and
   Share stops at a comfortable width under it. */
@media (min-width: 672px) {
  main { padding-top: 24px; }
  .result { margin: 0; }
  .result .sd-verdict { padding: 28px 28px 26px; border-radius: 12px; }
  .result .sd-actions { width: min(100%, 400px); margin: 0 auto; padding: 20px 0 0; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }