/* ==========================================================================
   idtmock.com — shared styles

   Colour is sampled from the logo, not guessed: navy #003060, blue #1860a8,
   green #307848, on paper #f7f7f8. The masthead keeps that paper colour in
   BOTH themes so the mark's own background blends into the bar rather than
   showing as a white rectangle on a dark page.

   Type takes its cue from the wordmark, a geometric sans with near-circular
   bowls — Poppins for headings and display figures. Table data stays on IBM
   Plex Sans, which has far better tabular numerals and holds up at the small
   sizes where Poppins goes wide and loose.

   PHONE IS THE PRIMARY VIEW. Screenshots of it get posted, and the bottom
   third of that frame is covered by the app's own overlay, so the standings
   card has to finish inside roughly the first 560px. Everything above it is
   on a height budget because of that.
   ========================================================================== */

/* ---- Reset ---------------------------------------------------------------
   A plain static site: nothing injects a baseline, so it lives here. The
   viewport meta is in each page's head — without it phones lay the page out
   at about 980px and scale the whole thing down.                            */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ---- Tokens ------------------------------------------------------------- */

:root {
  --ground:      #f2f4f6;
  --surface:     #ffffff;
  --surface-alt: #eaeef1;
  --ink:         #16202b;
  --ink-soft:    #3b4754;
  --muted:       #5d6b7b;
  --rule:        #d8dee4;
  --rule-strong: #b6c0c9;
  --accent:      #133560;
  --accent-2:    #1a6cb0;
  --accent-soft: #e6eef7;
  --on-accent:   #ffffff;
  --gain:        #2d7a4a;
  --loss:        #a3342a;
  --flag:        #7d5210;
  --flag-soft:   #fbf2df;

  /* Chart series, validated for protan, deutan and tritan separation against
     the light surface. Do not substitute by eye. */
  --s1: #1a6cb0;   /* the portfolio */
  --s2: #d98324;   /* Dow */
  --s3: #8e5bb5;   /* Nasdaq */
  --s4: #4a9a6a;   /* S&P 500 */
  --grid: #e4e9ed;

  /* The logo's own paper. Identical in both themes, deliberately. */
  --masthead:     #f7f7f8;
  --masthead-ink: #16202b;
  --masthead-mut: #5d6b7b;

  --display: Poppins, "Century Gothic", "Avenir Next", sans-serif;
  --sans:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --figures: var(--sans);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0d1117;
    --surface:     #141b23;
    --surface-alt: #1b242e;
    --ink:         #e6ecf2;
    --ink-soft:    #c0cad4;
    --muted:       #93a1b0;
    --rule:        #27313c;
    --rule-strong: #3a4653;
    --accent:      #5aa3e0;
    --accent-2:    #7ab8ea;
    --accent-soft: #16222f;
    --on-accent:   #0d1117;
    --gain:        #48ad74;
    --loss:        #dd7568;
    --flag:        #d8a75a;
    --flag-soft:   #2a2216;
    --s1: #4287c4;
    --s2: #bf8236;
    --s3: #9569b8;
    --s4: #4a9e74;
    --grid: #202a34;
  }
}

:root[data-theme="dark"] {
  --ground:      #0d1117;
  --surface:     #141b23;
  --surface-alt: #1b242e;
  --ink:         #e6ecf2;
  --ink-soft:    #c0cad4;
  --muted:       #93a1b0;
  --rule:        #27313c;
  --rule-strong: #3a4653;
  --accent:      #5aa3e0;
  --accent-2:    #7ab8ea;
  --accent-soft: #16222f;
  --on-accent:   #0d1117;
  --gain:        #48ad74;
  --loss:        #dd7568;
  --flag:        #d8a75a;
  --flag-soft:   #2a2216;
  --s1: #4287c4;
  --s2: #bf8236;
  --s3: #9569b8;
  --s4: #4a9e74;
  --grid: #202a34;
}

/* ---- Base --------------------------------------------------------------- */

body {
  margin: 0;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 20px;
  padding-block: 0 56px;
}

h1, h2, h3 {
  font-family: var(--display); font-weight: 600;
  letter-spacing: -0.012em; text-wrap: balance; margin: 0;
}
p { margin: 0; }
a { color: var(--accent-2); }

.num  { font-family: var(--figures); font-variant-numeric: tabular-nums; }
.gain { color: var(--gain); }
.loss { color: var(--loss); }

/* ---- Demo notice -------------------------------------------------------- */

.demo-bar {
  background: var(--flag-soft); color: var(--flag);
  border-bottom: 1px solid var(--rule); font-size: 14px;
}
.demo-bar .wrap { padding-block: 9px; display: flex; gap: 7px; flex-wrap: wrap; }
.demo-bar strong { color: var(--flag); font-weight: 600; }

/* ---- Masthead ----------------------------------------------------------- */

.masthead { background: var(--masthead); border-bottom: 1px solid var(--rule-strong); }
.masthead .wrap {
  padding-block: 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

/* The mark is a traced SVG on a transparent ground, cropped tight at export,
   so it only needs a height. The old version was a JPEG with the artwork
   floating in a 2000x1091 field, which took a four-number CSS crop to place. */
.logo { display: block; flex: none; line-height: 0; --logo-h: 136px; }
.logo img { display: block; height: var(--logo-h); width: auto; }

.mast-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.season { color: var(--masthead-mut); font-size: 14.5px; }
.season .num { color: var(--masthead-ink); }

nav.tabs { display: flex; gap: 4px; }
nav.tabs a {
  font-family: var(--display); font-weight: 500;
  font-size: 15px; text-decoration: none; color: var(--masthead-ink);
  padding: 8px 16px; border: 1px solid var(--rule-strong); border-radius: 3px;
}
nav.tabs a[aria-current="page"] { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- The tape ----------------------------------------------------------- */

.tape { background: var(--surface); border-bottom: 1px solid var(--rule); overflow: hidden; }
.tape-track { display: flex; width: max-content; animation: tape-roll 55s linear infinite; }
.tape:hover .tape-track,
.tape:focus-within .tape-track { animation-play-state: paused; }
.tape-item {
  display: flex; align-items: baseline; gap: 9px;
  padding: 10px 20px; border-right: 1px solid var(--rule);
  white-space: nowrap; font-size: 15px;
}
.tape-item b { font-family: var(--display); font-weight: 600; }
.tape-held { color: var(--muted); font-size: 13.5px; }

@keyframes tape-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Sections ----------------------------------------------------------- */

section { margin-top: 38px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 13px;
}
.section-head h2 { font-size: 23px; }
.section-head p { color: var(--muted); font-size: 14.5px; }

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; }

/* The card the screenshot is of. Sits straight under the tape with no
   section heading above it stealing height. */
.headline { margin-top: 18px; }

/* ---- Chart -------------------------------------------------------------- */

.chart-box { padding: 15px 17px 12px; border-bottom: 1px solid var(--rule); }
.chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 9px;
}
.chart-head h3 { font-size: 17px; }
.chart-head .as-of { color: var(--muted); font-size: 13.5px; }
.chart-figure { position: relative; }
.chart-figure svg { display: block; width: 100%; height: auto; }

.legend { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 9px; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-soft); }
.legend-swatch { width: 14px; height: 3px; border-radius: 2px; flex: none; }

.chart-tip {
  position: absolute; pointer-events: none; z-index: 2;
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: 4px; padding: 8px 10px; font-size: 13px;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.13); min-width: 138px;
}
.chart-tip .when { color: var(--muted); font-size: 12.5px; margin-bottom: 5px; }
.chart-tip .line { display: flex; align-items: center; gap: 9px; justify-content: space-between; }
.chart-tip .line > span { display: flex; align-items: center; gap: 6px; }
.chart-tip .line b { font-family: var(--figures); font-variant-numeric: tabular-nums; font-weight: 500; }

/* ---- Controls ----------------------------------------------------------- */

.controls {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 13px 17px; border-bottom: 1px solid var(--rule);
}
.control-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.control-group > span { color: var(--muted); font-size: 14.5px; }

.seg { display: flex; border: 1px solid var(--rule-strong); border-radius: 3px; overflow: hidden; }
.seg button {
  font-family: var(--display); font-weight: 500; font-size: 14.5px; padding: 8px 16px;
  background: var(--surface); color: var(--ink-soft);
  border: 0; border-left: 1px solid var(--rule-strong); cursor: pointer;
}
.seg button:first-child { border-left: 0; }
.seg .short { display: none; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.seg button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }

/* ---- Tables ------------------------------------------------------------- */

.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { padding: 10px 13px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child, th.left, td.left { text-align: left; }
thead th {
  font-weight: 600; font-size: 13.5px; color: var(--muted);
  border-bottom: 1px solid var(--rule-strong);
}
tbody tr { border-bottom: 1px solid var(--rule); }
tbody tr:last-child { border-bottom: 0; }
tbody tr.me { background: var(--accent-soft); }
.rank { color: var(--muted); width: 1%; }
.member { font-family: var(--display); font-weight: 500; font-size: 15px; }
.move { font-size: 13px; color: var(--muted); width: 1%; }
tfoot td { border-top: 1px solid var(--rule-strong); font-weight: 600; background: var(--surface-alt); }

.caption { padding: 11px 17px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px; }

/* ---- Figure row --------------------------------------------------------- */

.figures {
  margin-top: 22px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 4px;
  overflow: hidden;
}
.figure { background: var(--surface); padding: 15px 18px; }
.figure dt { color: var(--muted); font-size: 14px; }
.figure dd {
  margin: 3px 0 0; font-size: 26px;
  font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums;
}
.figure dd small { font-size: 14px; color: var(--muted); font-family: var(--sans); font-weight: 400; }

/* ---- Portfolio header --------------------------------------------------- */

.pf-head {
  padding: 15px 17px; border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; align-items: baseline;
}
.pf-head h3 { font-size: 19px; }
.pf-head .member { font-size: 16px; }
.pf-returns { display: flex; gap: 26px; flex-wrap: wrap; }
.pf-returns div { text-align: right; }
.pf-returns dt { color: var(--muted); font-size: 13.5px; }
.pf-returns dd {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-variant-numeric: tabular-nums; font-size: 21px;
}

.bench { max-width: 490px; }

/* ---- December entry preview -------------------------------------------- */

.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); }
.slot { background: var(--surface); padding: 12px 15px; display: flex; gap: 12px; align-items: baseline; }
.slot .n  { color: var(--muted); font-size: 13.5px; width: 20px; }
.slot .t  { font-family: var(--display); font-weight: 600; font-size: 15px; }
.slot .nm { color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Rules list --------------------------------------------------------- */

.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); }
.rule-item { background: var(--surface); padding: 14px 17px; }
.rule-item dt { color: var(--muted); font-size: 13.5px; }
.rule-item dd { margin: 3px 0 0; font-size: 15px; }

/* ==========================================================================
   Entry page
   ========================================================================== */

.deadline {
  margin-top: 22px; padding: 18px 20px;
  background: var(--accent-soft); border: 1px solid var(--rule); border-radius: 4px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: baseline;
}
.deadline h2 { font-size: 19px; }
.deadline p { color: var(--muted); font-size: 14.5px; margin-top: 5px; max-width: 62ch; }
.deadline .count {
  font-family: var(--display); font-weight: 600;
  font-variant-numeric: tabular-nums; font-size: 28px; color: var(--ink);
}
.deadline .count small {
  display: block; font-size: 13.5px; color: var(--muted);
  text-align: right; font-weight: 400;
}

.progress { padding: 15px 17px; border-bottom: 1px solid var(--rule); display: grid; gap: 10px; }
.progress-top { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.progress-top strong { font-family: var(--display); font-weight: 600; }
.progress-top .num { font-size: 16px; }
.meter { height: 6px; background: var(--surface-alt); border-radius: 3px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); width: 0; }

.entry-rows { display: grid; gap: 1px; background: var(--rule); }
.row {
  background: var(--surface); padding: 12px 17px;
  display: grid; grid-template-columns: 28px 128px 1fr auto; gap: 15px; align-items: center;
}
.row .n { color: var(--muted); font-size: 14.5px; font-variant-numeric: tabular-nums; }

/* 16px minimum: anything smaller makes iOS Safari zoom in on focus. */
.row input {
  font-family: var(--display); font-weight: 600; font-size: 16px; text-transform: uppercase;
  width: 100%; padding: 10px 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 3px;
}
.row input::placeholder { text-transform: none; font-weight: 400; font-size: 15px; color: var(--muted); }
.row input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -1px; border-color: var(--accent-2); }
.row.ok  input { border-color: var(--gain); }
.row.bad input { border-color: var(--loss); }

.row .detail { font-size: 15px; color: var(--ink-soft); min-width: 0; }
.row .detail .co { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.row .detail .meta { color: var(--muted); font-size: 13.5px; }
.row.bad .detail { color: var(--loss); }
.row .alloc { text-align: right; font-size: 14px; color: var(--muted); white-space: nowrap; }
.row .alloc b {
  display: block; color: var(--ink); font-weight: 500;
  font-family: var(--figures); font-variant-numeric: tabular-nums; font-size: 15px;
}

.tag {
  display: inline-block; font-size: 12.5px; padding: 1px 7px; border-radius: 2px;
  background: var(--flag-soft); color: var(--flag); margin-left: 7px;
}

.actions {
  padding: 15px 17px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; align-items: center;
}
.saved { color: var(--muted); font-size: 14.5px; }
.btn {
  font-family: var(--display); font-weight: 500; font-size: 15px;
  padding: 11px 22px; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
}
.btn[disabled] {
  background: var(--surface-alt); color: var(--muted);
  border-color: var(--rule-strong); cursor: not-allowed;
}
.btn.quiet { background: transparent; color: var(--ink-soft); border-color: var(--rule-strong); }
.btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.lock-warning {
  margin-top: 14px; padding: 15px 18px;
  border: 1px solid var(--rule); border-left: 3px solid var(--flag);
  border-radius: 4px; background: var(--surface);
  font-size: 15px; color: var(--ink-soft);
}
.lock-warning strong { color: var(--ink); }

/* ---- Footer ------------------------------------------------------------- */

footer { margin-top: 44px; border-top: 1px solid var(--rule); padding-top: 20px; }
footer p { color: var(--muted); font-size: 13.5px; max-width: 70ch; }
footer p + p { margin-top: 9px; }

/* ==========================================================================
   Narrow screens

   Everything above the standings card is on a height budget, because that
   card has to finish inside the top two-thirds of a phone screenshot.
   ========================================================================== */

@media (max-width: 900px) {
  .row { grid-template-columns: 24px 120px 1fr; row-gap: 7px; }
  .row .alloc { grid-column: 2 / -1; text-align: left; }
  .row .alloc b { display: inline; margin-right: 7px; }
}

@media (max-width: 760px) {
  .wrap { padding-inline: 16px; }

  /* Every rule in this block is paying for the screenshot budget. Measured:
     the card has to start the leaderboard before 563px on a 390x844 phone. */

  /* Not doubled here. A 136px mark leaves no room for the standings. */
  .logo { --logo-h: 62px; }
  .masthead .wrap { padding-block: 7px; gap: 6px; }
  .mast-right { width: 100%; justify-content: space-between; gap: 10px; }
  .season { display: none; }
  nav.tabs a { padding: 6px 12px; font-size: 13.5px; }

  .demo-bar { font-size: 12.5px; }
  .demo-bar .wrap { padding-block: 5px; }
  .demo-bar .long { display: none; }

  .tape-item { font-size: 13.5px; padding: 7px 14px; }
  .headline { margin-top: 12px; }

  /* The labels cost a wrapped line each; the buttons say what they are. */
  .control-group > span { display: none; }
  .controls { padding: 9px 15px; gap: 8px; }
  /* Measured: at 13px padding the two segments totalled 366px against
     357px of room and wrapped, costing 60px of the budget. */
  .seg button { padding: 8px 9px; font-size: 13.5px; }
  .seg .full { display: none; }
  .seg .short { display: inline; }

  .chart-box { padding: 6px 15px 7px; }
  .chart-head { margin-bottom: 5px; }
  .chart-head h3 { font-size: 15px; }
  .chart-head .as-of { display: none; }
  .legend { margin-top: 6px; gap: 4px 11px; }
  .legend-item { font-size: 12.5px; }

  .figures { grid-template-columns: repeat(2, 1fr); }
  .rules, .slots { grid-template-columns: 1fr; }
  .pf-returns { gap: 20px; }
  .section-head h2 { font-size: 22px; }

  /* Ten columns never fit a phone; the table scrolls inside its own box, and
     tighter cells simply put more of it on screen at once. */
  /* Row height is the currency here: every 5px buys most of a place
     on the leaderboard inside the screenshot. */
  table { font-size: 14px; }
  th, td { padding: 5px 10px; }

  .btn { padding: 12px 20px; }
  .actions > div { width: 100%; display: flex; gap: 10px; }
  .actions .btn { flex: 1; }

  .deadline { padding: 16px; }
  .deadline .count { font-size: 26px; }
  .deadline .count small { text-align: left; }
}

@media (max-width: 480px) {
  .figures { grid-template-columns: 1fr; }
  .figure { padding: 13px 16px; }
  .figure dd { font-size: 24px; }

  .row { grid-template-columns: 22px 1fr; gap: 10px; }
  .row .detail, .row .alloc { grid-column: 2 / -1; }

  .pf-head, .progress, .caption, .actions { padding-inline: 15px; }
  .legend { gap: 6px 13px; }
  .legend-item { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* With the roll stopped, the tape can still be read by scrolling it. */
  .tape { overflow-x: auto; }
}