/* ONE CHROME (2026-09-11). site.css (a byte copy of thesimfather.com/style.css) owns the
   design: tokens, type, masthead, hero, buttons, sections, workspace, cards, forms, footer.
   This file is app-only overrides and the legacy component rules the pages still being
   rebuilt need. It never redefines a site token or a site class. The --sf-* block below is
   the 2026-09-09 Design LGTM record pinned by tests/app-chrome-dump.test.mjs; the aliases
   under it are what the legacy rules read, and they resolve to the site's own tokens. */
:root {
  --sf-bg:        #0a0a0a;
  --sf-bg-2:      #0e0e0e;
  --sf-surface:   #171717;
  --sf-surface-2: #1c1c1c;
  --sf-parchment: #e8e0d0;
  --sf-muted:     #9a9486;
  --sf-brass:     #b6934b;
  --sf-on-brass:  #0a0a0a;

  --panel-2:      var(--bg-lift);
  --line-strong:  var(--line);
  --accent:       var(--brass-bright);
  --accent-strong:var(--brass);
  --accent-text:  var(--bg);
  --ok:           var(--brass-bright);
  /* THE FIRST GREEN IN THIS PALETTE, 2026-09-21, and it exists because there was no way to
     say "this one is fine" that did not look like everything else. --ok above is an alias
     onto brass, so on a black and gold page the good state was gold on gold. The owner, on
     the lineup-status banner: "maybe a different color or something so it doesn't get
     blended in".

     TURF, not a stock success green. #22c55e and its neighbours are the default every
     framework ships and they read as a notification on a page built out of brass, parchment
     and near-black. This is the green of a lit field at night, desaturated enough to sit
     beside brass without arguing with it.

     Measured against the real tokens rather than chosen by eye: 8.83:1 on --bg-lift and
     8.06:1 on --field-bg in the dark theme, 6.46:1 and 6.69:1 in the light one, so it
     carries text at either size in both.

     AND IT IS NEVER THE ONLY SIGNAL. Its contrast against brass is 1.21:1, which is
     luminance, not hue: to a reader with red-green colour blindness this green and that gold
     are close to the same colour. Everywhere it is used, a shape or a word says the same
     thing, a check against the word "not set yet". Colour reinforces; it never decides. */
  --good:         #8ec07c;
  --warn:         #d09a5a;
  --err:          var(--danger);
  /* RENAMED FROM --mono ON 2026-09-13. It never held a monospace: it held the display face,
     and it is used on uppercase letterspaced labels, chips and small headings. site.css now
     defines a REAL --mono (JetBrains Mono) for data columns, so the old alias had to give up
     the name or all 32 call sites here would silently have become monospace, the wordmark
     included. --label is what this always meant. */
  --label:        var(--ui);
  --sans:         var(--body);
  --maxw:         var(--wrap);
}
/* Brand faces, self-hosted, same two the main site uses, and this file declares NONE of them:
   --display and --body come from site.css, which every app page loads first, so the app followed
   the 2026-09-12 move from Libre Franklin and Source Serif to Sora and Manrope without a line
   changing here. --mono above is an alias onto --display and is not a monospace: figures set in
   the display face with tabular numerals give the ruled-column look without a coding face. */
/* The toggle setting dark explicitly lands on the same values as the base. */
/* --warn is the one status token above declared as a literal rather than through a token that
   inverts, so on the light theme every "you are stuck" guidance line measured 2.28:1. This is
   6.04:1 on --panel and 5.54:1 on --bg. Design seat, 2026-09-15. */
:root[data-theme="light"] { --warn: #8f5511; }
/* ON ITS OWN LINE, not folded into the one above, which is pinned verbatim by
   generator-three-steps.test.mjs: that line is the record of a measured fix and a test reads
   it as a literal. 6.46:1 on --bg-lift and 6.69:1 on --field-bg in this theme. */
:root[data-theme="light"] { --good: #37672c; }
:root[data-theme="light"] body { background-image: none; }
img, svg { max-width: 100%; }

/* ---- header ---- */
.top {
  display: flex; align-items: center; justify-content: flex-start; gap: 24px;
  flex-wrap: nowrap;
  /* padding-block, NOT the padding shorthand. Every header in the app is
     class="wrap top", and .wrap above sets padding-inline: var(--gutter). The shorthand
     reset that to 0, so the brand sat flush against the left edge of the screen and the
     theme toggle against the right, on every page at every width. */
  padding-block: 0.85rem; border-bottom: 1px solid var(--line);
}
.brand b { font-family: var(--label); font-weight: 600; letter-spacing: 0.02em; }
.brand .tag {
  font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.1rem 0.4rem;
}
/* Generator chip is brass-filled so the live product is what the header leads with.
   Funded keeps the muted outline. Dump tokens only. */
.brand .tag--gen {
  color: var(--sf-on-brass);
  background: var(--sf-brass);
  border-color: var(--sf-brass);
}
.top nav,
.product-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 22px;
  margin-left: auto;
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
}
.product-nav__links {
  display: flex;
  align-items: center;
  gap: 22px;
}
.top nav a,
.product-nav__links a {
  font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); text-decoration: none;
  padding: 0.1rem 0;
  border-bottom: 2px solid transparent;
}
.top nav a:hover,
.product-nav__links a:hover { color: var(--text); }
.top nav a[aria-current="page"],
.product-nav__links a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--sf-brass);
}
@media (max-width: 639px) {
  .nav__burger { display: inline-flex; }
  .product-nav__links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 12rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.7rem 0.85rem;
    background: var(--panel);
    border: 1px solid var(--line);
    z-index: 60;
  }
  .product-nav[data-nav-open] .product-nav__links { display: flex; }
  .product-nav__links a { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
  .product-nav__links a:last-child { border-bottom: 0; }
}

/* ---- generic sections ---- */
main { padding-bottom: 4rem; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
.hero p.lede { margin-top: 1rem; max-width: 46ch; font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--text); }
.note {
  margin-top: 1.4rem; padding: 0.8rem 1rem; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  background: var(--panel); color: var(--muted); font-size: 0.9rem; max-width: 52ch;
}
.steps li {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.9rem; align-items: start;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.steps .n { font-family: var(--label); font-variant-numeric: tabular-nums; color: var(--accent-strong); font-variant-numeric: tabular-nums; padding-top: 0.15rem; }
.steps h3 { font-size: 1.05rem; }
.steps p { margin-top: 0.25rem; color: var(--muted); font-size: 0.94rem; max-width: 54ch; }

/* ---- forms ---- */
.card {
  margin-top: 1.2rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); padding: clamp(1rem, 3vw, 1.6rem);
}
.card h2 { font-size: 1.25rem; }
.field input[type="email"], .field input[type="text"],
.field input[type="password"], .field select {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--text);
  background: var(--field-bg); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
  color-scheme: dark;
}
:root[data-theme="light"] .field input[type="email"],
:root[data-theme="light"] .field input[type="text"],
:root[data-theme="light"] .field input[type="password"],
:root[data-theme="light"] .field select {
  color-scheme: light;
}
/* DOB stays dark in both themes. A light color-scheme on .field select would
   otherwise wash the native list, which is the contrast bug. */
:root[data-theme="light"] .dob,
:root[data-theme="light"] .dob__set,
:root[data-theme="light"] .dob .dob__select {
  color-scheme: dark;
}

/* EVERY OTHER SELECT GETS WHAT THE DOB GOT, because color-scheme alone did not hold.
   Reported 2026-09-14: the account page list was white and hard to see. The control was
   dark and the LIST that dropped out of it was white with grey text, on the state select
   beside the date of birth.
   `.field select` already carried color-scheme: dark and the rule is live, so the hint was
   being sent and the popup ignored it: color-scheme is advisory for the native list and
   honouring it varies by browser, platform and OS theme. The DOB selects never showed this
   because they were given real option colours and a painted picker on top of the hint.
   This is that same treatment, nothing new invented for it.

   SCOPED TO THE DARK THEME, and that matters. In light theme .field select is deliberately
   color-scheme: light and its native list is light on light, which is right there. Painting
   these colours unconditionally would have swapped one unreadable list for another. */
:root:not([data-theme="light"]) .field select:not(.dob__select) option {
  background: #171717;
  color: #e8e0d0;
}
:root:not([data-theme="light"]) .field select:not(.dob__select) option[value=""],
:root:not([data-theme="light"]) .field select:not(.dob__select) option:disabled {
  color: #9a9486;
  background: #171717;
}
:root:not([data-theme="light"]) .field select:not(.dob__select) option:checked,
:root:not([data-theme="light"]) .field select:not(.dob__select) option:checked:hover {
  background: #b6934b;
  color: #0a0a0a;
}
:root:not([data-theme="light"]) .field select:not(.dob__select) option:hover {
  background: #1c1c1c;
  color: #e8e0d0;
}
.field input:focus-visible, .field select:focus-visible { border-color: var(--accent); }
.dob .dob__select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  padding: 20px 24px 6px 10px;
  min-height: 48px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: #e8e0d0;
  background: #0e0e0e;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color-scheme: dark;
}
input[type="date"],
.date-picker,
.dob__input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.7rem 0.8rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: #e8e0d0;
  background: #0e0e0e;
  border: 1px solid #b6934b;
  border-radius: var(--radius);
  color-scheme: dark;
}
.dob .dob__select option {
  background: #171717;
  color: #e8e0d0;
}
.dob .dob__select option[value=""],
.dob .dob__select option:disabled {
  color: #9a9486;
  background: #171717;
}
.dob .dob__select option:checked,
.dob .dob__select option:checked:hover {
  background: #b6934b;
  color: #0a0a0a;
}
.dob .dob__select option:hover {
  background: #1c1c1c;
  color: #e8e0d0;
}
/* Chrome customizable select: the popover is a real DOM list we can paint.
   appearance: base-select on both the control and ::picker is required or
   the list never opens. Unsupported browsers keep the native list plus the
   color-scheme: dark hint above. */
@supports (appearance: base-select) {
  .dob .dob__select {
    appearance: base-select;
  }
  .dob .dob__select::picker(select) {
    appearance: base-select;
    background: #171717;
    color: #e8e0d0;
    border: 1px solid #b6934b;
  }
  .dob .dob__select option {
    padding: 0.45rem 0.7rem;
    background: #171717;
    color: #e8e0d0;
  }
  .dob .dob__select option:checked {
    background: #b6934b;
    color: #0a0a0a;
  }
  .dob .dob__select option:checked::checkmark {
    color: #0a0a0a;
  }

  /* The same painted list for the plain selects, which is what actually fixes the white
     popup where the browser ignores color-scheme. Scoped to .field so it reaches the state
     and any other form select without touching a control elsewhere on the page. */
  /* base-select swaps the control off the native widget, and the control is what carries
     this form's box. Re-asserting the box here means the switch cannot quietly hand back a
     browser default border or padding in the builds that support it. The values are the
     ones .field select already sets; this only makes them survive the appearance change.
     
     :not(.dob__select) IS LOAD BEARING AND THE FIRST VERSION OF THIS DID NOT HAVE IT. The
     date of birth fieldset is <fieldset class="field dob">, so the three dials inside it
     match .field select as well. This selector outweighs .dob .dob__select, so without the
     exclusion it took the dials' solid panel, their deliberate border: 0, and above all
     their padding, which reserves the room the MONTH, DAY and YEAR labels sit in. A fix
     written to stop a browser handing back defaults would have handed back defaults itself,
     on the one control on the page that most needed leaving alone. The dials set their own
     appearance: base-select and their own picker a few rules up, so excluding them here
     costs nothing. Found by the pre-deploy bug hunt on 2026-09-14. */
  :root:not([data-theme="light"]) .field select:not(.dob__select) {
    appearance: base-select;
    background: var(--field-bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0.7rem 0.8rem;
    color: var(--text);
    font-family: var(--sans);
    font-size: 1rem;
    width: 100%;
  }
  :root:not([data-theme="light"]) .field select:not(.dob__select)::picker(select) {
    appearance: base-select;
    background: #171717;
    color: #e8e0d0;
    border: 1px solid #b6934b;
  }
  :root:not([data-theme="light"]) .field select:not(.dob__select) option {
    padding: 0.45rem 0.7rem;
  }
  :root:not([data-theme="light"]) .field select:not(.dob__select) option:checked::checkmark {
    color: #0a0a0a;
  }
}
/* Today / focused day in a native date popover, when one exists. */
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus {
  background: #b6934b;
  color: #0a0a0a;
  outline: 1px solid #b6934b;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.85;
  cursor: pointer;
}
.dob .dob__select:focus, .dob .dob__select:focus-visible { outline: none; }

/* Under about 340px the three dials stop fitting side by side. Month takes its own
   row and day and year share the next one, which keeps every target thumb-sized. */
@media (max-width: 340px) {
  .dob__set { grid-template-columns: 1fr 1fr; }
  .dob__cell--month {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--line-strong);
  }
  .dob__cell--day { border-left: 0; }
}
.check { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1rem; }
.check input { margin-top: 0.2rem; }
.check label { font-size: 0.9rem; color: var(--muted); }
.btn-primary {
  background: var(--sf-brass); color: var(--sf-on-brass); border-color: var(--sf-brass); font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--sf-brass); }
.btn-ghost:hover { border-color: var(--sf-brass); color: var(--sf-brass); }
/* Secondary outline. Funded Coming soon, never competing with a live Generator CTA. */
.btn-outline { background: transparent; color: var(--muted); border-color: var(--line-strong); }
.btn-outline:hover { color: var(--text); border-color: var(--text); }
.actions { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }

.status { min-height: 1.3rem; margin-top: 0.8rem; font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.status.ok { color: var(--ok); }
.status.err { color: var(--err); }
.status.warn { color: var(--warn); }

.builder { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 60rem) { .builder { grid-template-columns: 22rem 1fr; align-items: start; } }

.roster { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.roster-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--line);
}
.roster-head h2 { font-size: 1.05rem; }
.cap { font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.cap.over { color: var(--err); }
.slot-list { list-style: none; margin: 0; padding: 0; }
.slot {
  display: grid; grid-template-columns: 2.6rem 1fr auto 1.8rem; gap: 0.6rem; align-items: center;
  padding: 0.55rem 1rem; border-bottom: 1px solid var(--line);
}
.slot:last-child { border-bottom: 0; }
.slot .pos { font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--accent-strong); letter-spacing: 0.06em; }
.slot .who { font-size: 0.92rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .who.empty { color: var(--muted); font-style: italic; }
.slot .sal { font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.slot.active { background: var(--panel-2); }
.slot .x {
  display: grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-left: auto;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  color: var(--muted); font-family: var(--label); font-variant-numeric: tabular-nums;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.slot .x:hover, .slot .x:focus-visible { color: var(--err); border-color: var(--err); background: var(--panel-2); }
.slot .x:focus-visible { outline: 2px solid var(--err); outline-offset: 1px; }
.slot .x-spacer { width: 1.8rem; height: 1.8rem; }

.legal-box { padding: 0.8rem 1rem; border-top: 1px solid var(--line); }
.legal-box .ok { color: var(--ok); }
.legal-box ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.legal-box li { font-size: 0.85rem; color: var(--err); margin-top: 0.2rem; }

.pool { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.pool-head { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); }
.pool-head .filter {
  font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted);
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.3rem 0.55rem; cursor: pointer;
}
.pool-head .filter.on { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
.pool-table { width: 100%; border-collapse: collapse; }
.pool-table th, .pool-table td { text-align: left; padding: 0.5rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.pool-table th { font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.pool-table td.num { font-family: var(--label); font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums; text-align: right; }
.pool-table tr[data-disabled="1"] { opacity: 0.4; }
.pool-table .add {
  font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.74rem; color: var(--accent-text); background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius); padding: 0.25rem 0.55rem; cursor: pointer;
}
.pool-table .add:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- results ---- */
.result-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
.result-meta { margin: 1rem 0 0; font-size: 0.92rem; }
@media (min-width: 40rem) { .result-grid { grid-template-columns: repeat(2, 1fr); } }
.stat { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 1rem 1.2rem; }
.stat .k { font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.stat .v { margin-top: 0.35rem; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.78rem; padding: 0.2rem 0.5rem; border-radius: var(--radius); border: 1px solid var(--line-strong); }
.badge.pass { color: var(--ok); border-color: var(--ok); }
.badge.fail { color: var(--err); border-color: var(--err); }
.badge.pending { color: var(--muted); }

/* ---- v1: bankroll header (lobby, account) ---- */
.bankroll-header {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.8rem 1.6rem; margin-top: 1.4rem; padding: 0.9rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.bankroll-header .bh-amount { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.bankroll-header .bh-label {
  font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 0.15rem;
}
.bankroll-header .bh-meta { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.bankroll-header .bh-links { display: flex; gap: 1rem; align-items: center; }
.bankroll-header .bh-links a {
  font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.78rem; letter-spacing: 0.03em; text-decoration: none;
  color: var(--accent-strong);
}
.bankroll-header .bh-links a:hover { text-decoration: underline; }

/* ---- v1: honest empty / error states ---- */
.empty-state {
  margin-top: 1.4rem; padding: 1.6rem 1.2rem; border: 1px dashed var(--line-strong);
  border-radius: var(--radius); background: var(--panel); color: var(--muted);
  font-size: 0.92rem; text-align: center;
}
.empty-state strong { display: block; color: var(--text); font-size: 1rem; margin-bottom: 0.3rem; }
.error-state {
  margin-top: 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--err); border-left: 3px solid var(--err);
  border-radius: var(--radius); background: var(--panel); color: var(--err); font-size: 0.92rem;
}
.error-state strong { display: block; color: var(--err); font-size: 1rem; margin-bottom: 0.2rem; }

/* ---- v1: evaluation progress meter (account view) ---- */
.meter-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
.meter {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 0.9rem 1.1rem;
}
.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.meter-name { font-size: 0.92rem; color: var(--text); }
.meter-value {
  font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--muted);
}
.meter-track {
  margin-top: 0.55rem; height: 0.55rem; border-radius: var(--radius); background: var(--panel-2);
  border: 1px solid var(--line); overflow: hidden;
}
.meter-fill { height: 100%; background: var(--accent); transition: width 0.25s ease; }
.meter.risk .meter-value { color: var(--err); }
.meter.risk .meter-fill { background: var(--err); }
.meter.goal-met .meter-value { color: var(--ok); }
.meter.goal-met .meter-fill { background: var(--ok); }
.meter-note { margin-top: 0.4rem; font-size: 0.8rem; color: var(--muted); }
.meter.risk .meter-note { color: var(--err); }

/* ---- v1: statement table ---- */
.statement-summary { display: grid; gap: 1rem; margin-top: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .statement-summary { grid-template-columns: repeat(3, 1fr); } }
.table-wrap { overflow-x: auto; margin-top: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  text-align: left; padding: 0.55rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.88rem;
  white-space: nowrap;
}
.data-table th {
  font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.data-table td.num { font-family: var(--label); font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums; text-align: right; }
.data-table td.pos { color: var(--ok); }
.data-table td.neg { color: var(--err); }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* ---- v1: slate lobby ---- */
.slate-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.slate-card {
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 0.9rem 1.1rem;
}
.slate-card .sc-title { font-size: 1rem; font-weight: 600; }
.slate-card .sc-meta { margin-top: 0.25rem; font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.76rem; color: var(--muted); }
.slate-card .sc-fee { font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--muted); }
.slate-card .sc-lock { text-align: right; }
.slate-card .sc-lock .countdown {
  font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--accent-strong);
}
.slate-card .sc-lock .countdown.locked { color: var(--muted); }
.slate-card .sc-lock .local-time { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--muted); }
@media (max-width: 34rem) {
  .slate-card { grid-template-columns: 1fr; }
  .slate-card .sc-lock { text-align: left; }
}

/* ---- evaluation progress meter ---- */
.eval-preview { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.eval-preview-btn {
  font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted);
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.3rem 0.6rem; cursor: pointer;
}
.eval-preview-btn.on { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }

.eval-meter { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.eval-rows { list-style: none; margin: 0; padding: 0; }
.eval-row {
  display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; align-items: center;
  padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line);
}
.eval-row:last-child { border-bottom: 0; }
.eval-label {
  grid-column: 1; font-weight: 600; font-size: 0.98rem; color: var(--text);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.eval-target {
  grid-column: 1; grid-row: 2; font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.84rem; color: var(--muted);
}
.eval-status { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.eval-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.66rem;
  color: var(--muted); border: 1px solid var(--line-strong); border-radius: 50%; cursor: help;
}
.eval-info:hover, .eval-info:focus-visible { color: var(--accent-strong); border-color: var(--accent); }

.eval-pill { font-variant-numeric: tabular-nums; }
.eval-pill-clear { color: var(--ok); border-color: var(--ok); }
.eval-pill-risk { color: var(--warn); border-color: var(--warn); }

.eval-caption {
  padding: 0.85rem 1.1rem; border-top: 1px solid var(--line);
  font-size: 0.86rem; color: var(--muted);
}

.eval-empty { margin-top: 0; }

.eval-banner {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--panel); padding: clamp(1.1rem, 3vw, 1.6rem);
}
.eval-banner-passed { border-left-color: var(--ok); }
.eval-banner-breached { border-left-color: var(--err); }
.eval-banner-expired { border-left-color: var(--warn); }
.eval-banner-heading { font-size: 1.3rem; }
.eval-banner-body { margin-top: 0.7rem; max-width: 58ch; color: var(--text); }
.eval-banner-sub {
  margin-top: 0.9rem; font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.84rem; color: var(--muted);
}

/* ---- footer ---- */
.foot { border-top: 1px solid var(--line); padding-block: 1.6rem 3rem; color: var(--muted); font-size: 0.82rem; }
.foot__tagline {
  margin: 0 0 0.7rem;
  color: var(--muted);
  font-size: 0.82rem;
}
.foot .legal { max-width: 60ch; line-height: 1.6; }
.foot .links { display: flex; gap: 1.2rem; margin-bottom: 0.9rem; }
.foot .links a { font-family: var(--label); font-variant-numeric: tabular-nums; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); text-decoration: none; }
.foot .links a:hover { color: var(--accent-strong); }

@media (max-width: 34rem) {
  .actions .btn, .field-inline .btn { width: 100%; }
}

/* Turnstile widget placeholder: only occupies space once a widget renders into it. */
.turnstile-holder { margin: .75rem 0; }
.turnstile-holder:empty { margin: 0; }

/* ---- Brand marks and small copy classes ---- */
.brand-seal {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: contain;
  border-radius: 50%;
  border: 1px solid var(--sf-brass);
  padding: 2px;
  display: block;
  background: var(--sf-bg);
}
.card-lede {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 52ch;
}
.field-note { color: var(--muted); }

/* ---- lobby grouping (F3): sport and site headers, locked cards, whole-card links ---- */
.slate-group {
  list-style: none; margin: 1.4rem 0 0; padding: 0 0 0.4rem;
  font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--line-strong);
}
.slate-group:first-child { margin-top: 0; }
.slate-card.is-locked { opacity: 0.72; }
.slate-card .slate-link {
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center;
  grid-column: 1 / -1; color: inherit; text-decoration: none;
}
.slate-card .slate-link:hover .sc-title, .slate-card .slate-link:focus-visible .sc-title { color: var(--accent-strong); text-decoration: underline; }
.slate-card .slate-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
@media (max-width: 34rem) {
  .slate-card .slate-link { grid-template-columns: 1fr; }
}

/* Password panel on the account page. Set apart from the founders/billing rows by a rule
   rather than another card, so the account page does not become a stack of identical boxes. */
.pw-panel { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.pw-panel h3 { margin: 0 0 .35rem; font-size: 1.05rem; letter-spacing: .01em; }
.pw-panel .pw-lede { margin: 0 0 .9rem; color: var(--muted); font-size: .92rem; max-width: 60ch; }
.pw-panel .field { max-width: 26rem; }

/* ---- account tabs: sign in and create an account, one at a time ----------------
   Two full-width stacked sections put two email fields on one phone scroll, with the
   four-step explainer in between, and it read as one confused form. These
   are panels behind two tabs now.

   The hiding is gated on [data-auth-js], which auth-tabs.js stamps on the container. With
   scripting off nothing is hidden and both panels render exactly as they did before, which
   matters because the forms themselves are the only way into an account.

   Squared like everything else here: a ruled tab strip, the active tab carrying the brass
   underline. No pills, no sliding indicator. */
.auth-tabs {
  margin-top: 1.5rem; display: flex; gap: 0; border-bottom: 1px solid var(--line);
}
.auth-tab {
  flex: 1 1 0; min-width: 0; appearance: none; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-bottom: none; border-radius: 0;
  /* `font: inherit` on a button inherits the BODY serif, which is how the nav tabs first
     shipped in the wrong face. Name the stack. */
  font-family: var(--label); font-variant-numeric: tabular-nums;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.75rem 0.6rem; text-align: center;
}
.auth-tab + .auth-tab { border-left: none; }
.auth-tab:hover { color: var(--accent-strong); }
.auth-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.auth-tab[aria-selected="true"] {
  color: var(--accent-strong); background: var(--panel);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* The panel is inside .auth, so it must not re-apply the section's own top gap. */
.auth-panel { padding-top: clamp(1.2rem, 3vw, 1.8rem); }
.auth[data-auth-js] .auth-panel[hidden] { display: none !important; }

/* Screen-reader-only heading. The tab strip is the visible label. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Guilloche brass plate band: the home page's signature engraving --------
   Brass fill masked by the engraved curve, so it takes --accent in either theme.
   Decorative and inert. The header edge appears on every page because every app
   header is class="wrap top"; the .plate-band element is an explicit divider a
   page can drop under a compact hero. */
.top { position: relative; }
.top::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 11px;
  background-color: var(--accent);
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: var(--guilloche-fine);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: 600px 11px;
  mask-image: var(--guilloche-fine);
  mask-repeat: repeat-x;
  mask-size: 600px 11px;
}

.plate-band {
  height: 26px;
  margin: 1.6rem 0 0;
  background-color: var(--accent);
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: var(--guilloche-wide);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: 600px 26px;
  mask-image: var(--guilloche-wide);
  mask-repeat: repeat-x;
  mask-size: 600px 26px;
}
.plate-band--fine {
  height: 11px;
  -webkit-mask-image: var(--guilloche-fine);
  -webkit-mask-size: 600px 11px;
  mask-image: var(--guilloche-fine);
  mask-size: 600px 11px;
}
.plate-band--drift { animation: guilloche-drift 18000ms linear infinite alternate; }
@keyframes guilloche-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(24px); }
}
.btn:disabled:hover, .btn[disabled]:hover { transform: none; }

/* ---- Register Reveal: content rises 18px from 0 opacity on first crossing ---- */
.motion [data-reveal],
.motion [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 560ms var(--ease-out),
    transform 560ms var(--ease-out);
}
.motion [data-reveal].is-in,
.motion [data-reveal-group].is-in > * {
  opacity: 1;
  transform: none;
}
/* 70 ms sibling stagger, capped at the sixth child, same as the home page. */
.motion [data-reveal-group].is-in > :nth-child(2) { transition-delay: 70ms; }
.motion [data-reveal-group].is-in > :nth-child(3) { transition-delay: 140ms; }
.motion [data-reveal-group].is-in > :nth-child(4) { transition-delay: 210ms; }
.motion [data-reveal-group].is-in > :nth-child(5) { transition-delay: 280ms; }
.motion [data-reveal-group].is-in > :nth-child(n + 6) { transition-delay: 350ms; }

/* ---- Brass Draw: a hairline grows from 0 to full width with its section ------
   Opt in with .reveal-rule on a [data-reveal] section head. With motion off the
   rule paints full-width at rest, an engraved separator; with motion on it draws. */
.reveal-rule::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, var(--accent) 0%, var(--line) 100%);
  transform-origin: 0 50%;
}
.motion [data-reveal].reveal-rule::before {
  transform: scaleX(0);
  transition: transform 700ms var(--ease-out);
}
.motion [data-reveal].reveal-rule.is-in::before { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---- Reduced motion: every ported effect off, everything at rest ------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plate-band--drift { animation: none; }
  .motion [data-reveal],
  .motion [data-reveal-group] > * {
    opacity: 1;
    transform: none;
    transition-duration: 0ms;
  }
  .motion [data-reveal].reveal-rule::before {
    transform: none;
    transition-duration: 0ms;
  }
  .btn,
  .btn:hover,
  .btn:focus-visible {
    transform: none;
    transition-duration: 0ms;
  }
}

@media print {
  .motion [data-reveal],
  .motion [data-reveal-group] > * { opacity: 1; transform: none; }
  .top::after, .plate-band { display: none; }
}
@media (max-width: 699px) {
  .hero__scrim {
    background: linear-gradient(180deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.78) 55%, rgba(10,10,10,0.92) 100%);
  }
}
body.generator-flow > header,
body.generator-flow > main,
body.generator-flow > footer,
body.generator-page > header,
body.generator-page > main,
body.generator-page > footer { position: relative; z-index: 1; }

.acct-card {
  background: var(--sf-surface);
  border: 1px solid color-mix(in srgb, var(--sf-brass) 45%, var(--line));
  border-radius: var(--radius);
  padding: 1.1rem;
  color: var(--sf-parchment);
}
.acct-card + .acct-card { margin-top: 1rem; }
.acct-card h2 { margin: 0 0 0.45rem; font-size: 1.05rem; }
.acct-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 60rem) {
  .acct-grid { grid-template-columns: 1fr 1fr; }
}

.term-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.8rem 0 0;
}
.term-chip {
  appearance: none;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--sf-brass) 45%, var(--line));
  background: var(--sf-surface);
  color: var(--sf-parchment);
  border-radius: var(--radius);
  padding: 0.45rem 0.85rem;
  font-family: var(--label);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.term-chip[aria-pressed="true"] {
  border-color: var(--sf-brass);
  box-shadow: 0 0 0 1px var(--sf-brass) inset, 0 0 14px color-mix(in srgb, var(--sf-brass) 30%, transparent);
}
.sub-sticky {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  padding: 0.75rem 1rem 1rem;
  background: color-mix(in srgb, var(--sf-bg) 86%, transparent);
  border-top: 1px solid var(--line);
}
.sub-sticky .btn { min-width: 10rem; }
.gbi-fail,
.gbi-card,
.gbi-modal__panel {
  margin-top: 0.85rem;
  padding: 0.9rem 1rem;
  background: var(--sf-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--sf-parchment);
}
.gbi-fail__line,
.gbi-card__kicker {
  margin: 0 0 0.35rem;
  font-family: var(--label);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-brass);
}
.gbi-fail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}
.gbi-dialog {
  max-width: 32rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: var(--sf-bg);
  color: var(--sf-parchment);
}
.gbi-dialog::backdrop { background: rgba(10, 10, 10, 0.72); }
@media (max-width: 24.375rem) {
  .sub-sticky { flex-direction: column; }
  .sub-sticky .btn { width: 100%; }
}

/* ---- App additions to the site vocabulary (2026-09-11 one chrome) ---------------- */
/* A HUD line that carries a figure rather than a label: the balance on the lobby. */
.hud-card__line--amount { font-size: var(--t-product); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.hud-card__links { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 0; }
/* A register row for a slate that can no longer be entered: present, quiet, no action. */
.register__row.is-locked .register__name { color: var(--muted); }
.register__row.is-locked .badge-soon { border-color: var(--line-soft); color: var(--muted); }
/* A block note that reports a failure keeps the site's note shape and takes the danger tone. */
.block-note--err { border-color: var(--danger); }
.block-note--err strong { color: var(--danger); display: block; }

/* The eligibility box, flagged when a checkout was stopped by it.
   Added 2026-09-19 after a live report that the checkout button "does nothing": it does
   nothing because this box is untouched, and the box sits below the button that was pressed.
   The page now scrolls here and focuses it, and this is what the customer sees when it does. */
.consent--needed {
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: var(--s3);
}
.consent--needed label { color: var(--danger); }