/* ============================================================
   The SimFather: account, statement and welcome.
   ONE CHROME (2026-09-11). site.css owns the design system and every colour;
   this file is only what those three pages need on top of it: a card grid, a
   label/value HUD row, the rule-meter face on a `drawer`, the equity and
   calendar plates, and the ledger table's numeric columns.
   Every value here is a var(--...) from site.css. No hex, ever: a hex would
   be one theme's answer to a question both themes ask.
   ============================================================ */

/* ---- page furniture -------------------------------------------------- */

/* A heading inside a hud-card. The card's own kicker is the label above it, so this
   is the sentence, set in the display face at product size rather than section size. */
.acct-head {
  margin: 0 0 var(--s3);
  font-family: var(--display);
  font-size: var(--t-lead);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--parchment);
}
.acct-lede {
  margin: var(--s3) 0 0;
  max-width: 56ch;
  color: var(--muted);
}
/* Section heading beside its one action (Download CSV), stacked on a phone. */
.acct-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
}
.acct-head-row .section-head { margin-bottom: var(--s5); }

/* The card grid the spec asks for: two columns from 900 up, one below. auto-fit rather
   than a fixed pair, because half of these rows carry a card that is hidden until the
   data says otherwise (no subscription, no payout method), and a lone card stranded in
   the left column with empty space beside it reads like something failed to load. */
.hud-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  align-items: stretch;
}
.hud-grid + .hud-grid { margin-top: var(--s4); }
.hud-grid + .hud-card { margin-top: var(--s4); }
@media (min-width: 900px) {
  .hud-grid { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
}
/* A section that carries only a status line and the states that are usually hidden.
   Full section padding around one line of text is a hole in the page. */
.section--status { padding-block: var(--s5); }

/* A hud row that carries a figure as well as a label. The site's own row is
   rule + label; this adds the value column and lets the figure keep its own
   casing and tabular figures. */
.hud-card__rows li.hud-row { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
.hud-row__value {
  color: var(--parchment);
  text-transform: none;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.hud-row__value.pos { color: var(--brass-bright); }
.hud-row__value.neg { color: var(--danger); }
/* A balance figure, not a label: the one number the page is read for. */
.hud-card__figure + .hud-card__rows { margin-top: var(--s3); }
.hud-card + .ref-table-wrap { margin-top: var(--s4); }
.hud-card + .form-fine,
.ref-table-wrap + .form-fine { margin-top: var(--s5); }
.hud-card__figure {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-section);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--parchment);
  font-variant-numeric: tabular-nums;
}

/* ---- at-a-glance rule ticks ------------------------------------------ */
.rule-glance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s4) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.rule-glance__tick {
  width: 2rem;
  height: 0.4rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.rule-glance__tick[data-state="good"] { background: var(--brass-bright); border-color: var(--brass-bright); }
.rule-glance__tick[data-state="near"] { background: var(--meter-near); border-color: var(--meter-near); }
.rule-glance__tick[data-state="breach"] { background: var(--danger); border-color: var(--danger); }
/* Plan-change line: under the figures, above the ticks, because it changes the
   next entry limit rather than reporting the end of anything. */
.dash-plan-note {
  margin: var(--s4) 0 0;
  color: var(--muted);
  font-size: var(--t-micro);
  line-height: 1.5;
}

/* ---- the six rule meters, on the site's drawer face ------------------- */
/* The front page lists the same six rules as `drawers`. These are the same rows with
   the live figure in the value column, a track under them, and the distance to the
   line as the last word. `near` has no token of its own on the site (brass is good,
   danger is bad, and nothing sits between), so it is mixed from the two rather than
   invented as a hex, which keeps it correct in the light theme as well. */
:root { --meter-near: color-mix(in srgb, var(--brass-bright) 45%, var(--danger)); }

.drawer--meter {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  row-gap: var(--s3);
}
.drawer--meter .drawer__label { min-width: 0; }
.drawer__track {
  grid-column: 1 / -1;
  height: 0.4rem;
  background: var(--field-bg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.drawer__fill {
  display: block;
  height: 100%;
  background: var(--brass);
  transition: width 0.25s ease;
}
.drawer__distance {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.drawer--met { border-left-color: var(--brass-bright); }
.drawer--met .drawer__fill { background: var(--brass-bright); }
.drawer--met .drawer__value,
.drawer--met .drawer__distance { color: var(--brass-bright); }
.drawer--near { border-left-color: var(--meter-near); }
.drawer--near .drawer__fill { background: var(--meter-near); }
.drawer--near .drawer__value,
.drawer--near .drawer__distance { color: var(--meter-near); }
.drawer--breach { border-left-color: var(--danger); }
.drawer--breach .drawer__fill { background: var(--danger); }
.drawer--breach .drawer__value,
.drawer--breach .drawer__distance { color: var(--danger); }
.drawer--unset .drawer__track { border-style: dashed; }

@media (max-width: 699px) {
  /* site.css already drops the drawer to two columns at this width; the value and the
     track have to follow it or the figure lands back under the number column. */
  .drawer--meter { grid-template-columns: 32px minmax(0, 1fr); }
  .drawer--meter .drawer__value { grid-column: 2 / -1; text-align: left; }
}

/* ---- the terminal banner --------------------------------------------- */
.hud-card--passed { border-left: 3px solid var(--brass-bright); }
.hud-card--failed { border-left: 3px solid var(--danger); }
.hud-card--funded { border-left: 3px solid var(--brass); }
.hud-card--failed .hud-card__kicker { color: var(--danger); }

/* ---- equity curve ----------------------------------------------------- */
.equity__svg { display: block; width: 100%; height: auto; }
.equity__grid { stroke: var(--line-soft); stroke-width: 1; }
.equity__baseline { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.equity__area { fill: var(--brass); opacity: 0.12; stroke: none; }
.equity__line { fill: none; stroke: var(--brass-bright); stroke-width: 1.6; stroke-linejoin: round; }
.equity__axis {
  font-family: var(--display);
  font-size: 9px;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}
.equity__caption,
.pnl-cal__legend,
.hud-note {
  margin: var(--s3) 0 0;
  font-family: var(--display);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---- daily result calendar -------------------------------------------- */
.pnl-cal__months {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin: 0 0 var(--s3);
  font-family: var(--display);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}
.pnl-cal__scroll { overflow-x: auto; }
.pnl-cal__grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 0.85rem);
  grid-auto-columns: 0.85rem;
  gap: 3px;
  width: max-content;
}
.pnl-cal__cell {
  width: 0.85rem;
  height: 0.85rem;
  background: var(--field-bg);
  border: 1px solid var(--line);
}
.pnl-cal__cell--up { background: var(--brass-bright); border-color: var(--brass-bright); }
.pnl-cal__cell--down { background: var(--danger); border-color: var(--danger); }
.pnl-cal__cell--none { background: transparent; border-style: dashed; }
.pnl-cal__cell--blank { background: transparent; border: 0; }
.pnl-cal__legend { display: flex; flex-wrap: wrap; gap: var(--s4); }
.pnl-cal__legend span { display: inline-flex; align-items: center; gap: var(--s2); }
.pnl-cal__swatch {
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid var(--line);
  display: inline-block;
}
.pnl-cal__swatch--up { background: var(--brass-bright); border-color: var(--brass-bright); }
.pnl-cal__swatch--down { background: var(--danger); border-color: var(--danger); }
.pnl-cal__swatch--none { background: transparent; border-style: dashed; }

/* ---- the ledger table -------------------------------------------------- */
/* The site's `ref-table` (the referrals table on the front page) carries the ruled
   rows and the brass heads. A money ledger adds right-aligned tabular figures and
   the two directions a net result can take. */
.ref-table th.num,
.ref-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A slate id is one token and a money column is a column: let the wrapper scroll at 390
   rather than folding "TEST-MLB-MAIN-2026-09-10" into five lines and shearing the
   figures out of line with their heads. .ref-table-wrap already scrolls on its own, so
   nothing here reaches the page's own horizontal scroll. */
.ref-table th,
.ref-table td { white-space: nowrap; }
.ref-table td.pos { color: var(--brass-bright); }
.ref-table td.neg { color: var(--danger); }
.ref-table tbody tr:last-child td { border-bottom: 0; }

/* ---- pending entries --------------------------------------------------- */
.entries-list { list-style: none; margin: 0; padding: 0; }
.entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s1) var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.entry-row:last-child { border-bottom: 0; }
.er-name { color: var(--parchment); }
.er-meta,
.er-fee {
  font-family: var(--display);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.er-lock {
  font-family: var(--display);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--brass-bright);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.er-fee { text-align: right; }

/* ---- alerts ------------------------------------------------------------ */
.notify-group { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.notify-group:last-of-type { border-bottom: 0; }
.notify-group > h3 {
  margin: 0 0 var(--s2);
  font-family: var(--display);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.notify-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
}
.notify-row label { color: var(--text); cursor: pointer; }
/* Same treatment the site gives its consent box, so a checkbox is brass and not the
   browser's default blue next to it. */
.notify-row input[type="checkbox"],
.referral__handle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brass);
  cursor: pointer;
}
.notify-save { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---- payout ------------------------------------------------------------ */
.payout__accrued {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-product);
  color: var(--parchment);
  font-variant-numeric: tabular-nums;
}
.payout__method,
.payout--empty,
.payout--nomethod { margin: var(--s3) 0 0; color: var(--muted); max-width: 52ch; }
.payout-form { margin-top: var(--s4); display: grid; gap: var(--s3); max-width: 24rem; }
.payout-form input,
.payout-form select {
  width: 100%;
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  padding: var(--s3);
  font: inherit;
}
.payout__request { margin-top: var(--s4); }

/* ---- referral ---------------------------------------------------------- */
.referral__lead { margin: 0; color: var(--parchment); font-size: var(--t-lead); }
.referral__code-label {
  margin: var(--s4) 0 var(--s1);
  font-family: var(--display);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.referral__code-glyph {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-product);
  letter-spacing: 0.12em;
  color: var(--brass-bright);
  font-variant-numeric: tabular-nums;
}
.referral__url {
  margin: var(--s2) 0 0;
  font-family: var(--display);
  font-size: var(--t-micro);
  color: var(--text);
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.referral__code { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.referral__handle { margin-top: var(--s5); display: grid; gap: var(--s3); max-width: 24rem; }
.referral__handle input {
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  padding: var(--s3);
  font: inherit;
}
.referral__earnings { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.referral__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s4);
}
.referral__stat { display: grid; gap: var(--s1); min-width: 0; }
.referral__stat-label {
  font-family: var(--display);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.referral__stat-value {
  font-family: var(--display);
  font-size: var(--t-lead);
  color: var(--parchment);
  font-variant-numeric: tabular-nums;
}
.referral__stat-note { font-size: var(--t-micro); color: var(--muted); }
.referral__redeem { margin-top: var(--s4); }
.referral__history { margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.referral__history li {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-size: var(--t-micro);
  border-top: 1px solid var(--line);
  padding-top: var(--s2);
}
.referral__history-amount { font-family: var(--display); color: var(--parchment); font-variant-numeric: tabular-nums; }
.referral__history-state {
  font-family: var(--display);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}
.referral__history-date { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- welcome: the numbered steps --------------------------------------- */
/* Named acct-steps rather than steps: funded.css already owns a .steps with a
   different shape, and the two would fight over the same rows. */
.acct-steps { counter-reset: step; list-style: none; margin: var(--s5) 0 0; padding: 0; }
.acct-steps li {
  counter-increment: step;
  position: relative;
  padding: var(--s3) 0 var(--s3) var(--s7);
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.acct-steps li:last-child { border-bottom: 0; }
.acct-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--s3);
  font-family: var(--display);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .drawer__fill { transition: none; }
}

/* ---- light theme: the one thing site.css leaves dark ------------------- */
/* site.css paints .hud-card with a fixed charcoal wash, rgba(23, 23, 23, 0.72), and never
   restates it under :root[data-theme="light"], so on the light theme every hud-card came
   back dark and the parchment-on-dark text inside it went dark-on-dark. Written here
   because this branch does not edit site.css; it belongs in live-site/style.css, where
   the lobby's balance card would get it too. Flagged in the report. */
:root[data-theme="light"] .hud-card {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border-color: var(--line);
}

/* ---- NO HERO, SO NO HERO-SIZED GAP (2026-09-18) ---------------------------
   The account hero came off because a full-height panel captioning a door the
   reader had already walked through pushed every card below the fold. Removing
   it left the gap it used to fill: 98px of an empty status section and a 64px
   section pad sized to clear a hero that is no longer there, so the page still
   opened on 162px of nothing.

   The status line collapses when it has nothing to say, and the section around
   it takes its room back only when the signed-out card is actually showing. */
.page-account #account-state { padding-block: 0; }
.page-account #account-state .status:empty { display: none; }
/* BOTH STATES, not just the signed-out one. The first version named #signed-out only, so a
   "Could not load your account" error would have rendered flush against the masthead with no
   room around it: the one moment the page most needs to look deliberate. */
.page-account #account-state:has(#signed-out:not([hidden])),
.page-account #account-state:has(#error:not([hidden])) { padding-block: var(--s5); }
.page-account #signed-in { padding-top: var(--s5); }