/* Shared screen parts (see kit.js). Same tokens and scales as style.css:
   spacing 2 4 6 8 12 16 24 32 (48 for card pages), type 11 12 13 14 16 18 24
   (32 44 60 96 for card pages). */

/* ---- Clickable things look clickable ------------------------------------- */
[data-cmd], button, summary, label[for], .th-sort { cursor: pointer; }
.is-clickable:hover { background: var(--panel-2); }

/* A plain label is never boxed; a box means you can press it. */
.tag { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border: 1px solid var(--rule-strong); background: transparent;
  color: var(--text-2); font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  white-space: nowrap;
}
.chip:hover { color: var(--text); background: var(--panel-3); text-decoration: none; }

/* Words that stay on one line (Rule G: a hero's final phrase). */
.nowrap { white-space: nowrap; }

/* ---- What a fill means (rule C), site-wide -----------------------------------------
   - WHITE fill (--primary: the near-white text colour, ink text) = the ONE action on a
     page: SUBSCRIBE, START, SHARE, PLAY, RUN, GUESS, SEND. It is .btn-solid, so every
     primary button changes here; a screen's own button adds the class for its fill and
     keeps its own size. One per screen at most (test/layout-rules.test.js).
   - ICE-BLUE fill (--here) = where you are: the active panel strip, the active F-key,
     the selected range chip, the active tab or toggle. Never an action.
   - OUTLINE = a key or a chip. Hover tints (--accent-tint), it never fills blue.
   - Date boxes and inputs are never filled: plain text on the page, a box on focus.
   Rule A: one number and one change per screen, each change labelled by its range
   ("today", "1Y"). Rule B: sources, times, LIVE, RT/DLY once per panel, in its strip.
   Rule D (phones): readable text 13 px at least; 11-12 px only for tracked uppercase
   labels.
   Rule E: Art screens (GRAVEYARD, the WHATIF catalogue, FISHTANK) are their own layout.
   The picture is the screen. The two-layouts rule applies to text and data screens only.
   Rule F: Never reflow, crop or restructure a drawn scene without showing the plan first
   and getting an OK.
   Rule G: A hero never ends a line on a preposition or an article (on, of, for, the, a).
   Wrap the final phrase in nowrap and let the size do the rest. */
.btn-solid, .btn.btn-solid, .chip.btn-solid { background: var(--primary); border-color: var(--primary); color: var(--ink); }
.btn-solid:hover, .btn.btn-solid:hover, .chip.btn-solid:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--ink); text-decoration: none; }
.btn-solid:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- The row under a panel title: filters left, a mode pair at the right end -- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 32px; padding: 4px 8px;
  border-bottom: 1px solid var(--rule);
}
.toolbar-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.toolbar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }

/* Segmented: a mode pair, a range set, a small set of views. */
.seg { display: inline-flex; align-items: stretch; height: 24px; border: 1px solid var(--rule-strong); }
.seg-item {
  display: flex; align-items: center; padding: 0 8px;
  border: 0; background: transparent;
  color: var(--dim); font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  white-space: nowrap;
}
.seg-item + .seg-item { border-left: 1px solid var(--rule); }
.seg-item:hover { color: var(--text); background: var(--panel-3); text-decoration: none; }
.seg-item.is-active { color: var(--ink); background: var(--here); }

/* ---- Panel title bar tools (right): count and CSV --------------------------- */
.panel-tools { display: inline-flex; align-items: center; gap: 8px; }
.tools-count { color: var(--dim); font-size: 11px; letter-spacing: .04em; }
.panel-tools .chip { height: 18px; }

/* "More rows": bottom-left under the table. */
.table-more { display: flex; justify-content: flex-start; padding: 8px; }

/* ---- Tables: labels hug their content, numbers right-aligned ---------------- */
.dt { width: auto; max-width: 960px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dt th, .dt td { height: var(--row-h); padding: 0 12px; white-space: nowrap; text-align: left; border-bottom: 1px solid var(--rule); }
.dt th { font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
/* Column heads as HOME's (style.css .grid-table thead th): 11px 600 caps .1em in the accent on
   --panel, 24px. A row's own th (tbody) stays the label above. */
.dt thead th { height: 24px; font-weight: 600; letter-spacing: .1em; color: var(--accent); background: var(--panel); }
.dt .num { text-align: right; }
.dt tbody tr[data-cmd]:hover td, .dt tbody tr[data-cmd]:focus-visible td { background: var(--panel-2); }
.dt .th-sort {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.dt .th-sort:hover, .dt .th-sort.is-sorted { color: var(--text); }
.dt th.num .th-sort { flex-direction: row-reverse; }
.sort-arrow { display: inline-block; width: 8px; font-size: 8px; }

/* A name that truncates before any column is dropped. */
.cell-name { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; }

/* A capped table plus a side panel, instead of a wide gap between label and numbers. */
.with-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1280px) {
  .with-side { grid-template-columns: minmax(0, 960px) minmax(280px, 1fr); align-items: start; }
}

/* ---- Strips that scroll sideways fade at the edge that has more ------------- */
.scroll-x { overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.scroll-x.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); }
.scroll-x.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

@media (max-width: 639px) {
  .cell-name { max-width: 16ch; }
  .dt th, .dt td { padding: 0 8px; }
  .toolbar { flex-wrap: wrap; }
}

/* ---- Card pages (kit.js cardPage) -------------------------------------------------
   The screens that are one thing, not a table: BBRK, SPONSOR, PRO, LOGIN, REDEEM,
   GIFT, FEEDBACK, CHAT without Pro. One centred column; the slots always in the same
   order (kicker, hero, sub | action, note | chart | facts | media | links, + Details).
   The rules, so no card page invents its own:
   - sizes from the type scale in style.css (11 12 13 14 16 18 24 32 44 60 96), spaces
     from its spacing scale (2 4 6 8 12 16 24 32 48); 32 between groups (24 on a short or
     narrow window), 8 inside a group (a group gap is >= 2x);
   - text colours: --text (the main thing), --text-2 (second), --dim (third). Nothing else;
   - weights: 400, and 700 for the hero only; labels are .tag (11 px uppercase, --dim);
   - one primary (solid) button at most; lines of words no wider than 60ch;
   - the column is --card-w (text pages) or --card-w-wide (BBRK, SPONSOR). */
.card {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  width: 100%; max-width: var(--card-w); margin: 0 auto; padding: 32px 0;
  text-align: center;
}
.card-wide { max-width: var(--card-w-wide); }
.card-head, .card-cta, .card-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.card-alert { max-width: 60ch; font-size: 14px; color: var(--text); }
.card-alert.warn { color: var(--down); }
.card-kicker { letter-spacing: .2em; }
.card-hero { font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
.card-hero-96 { font-size: 96px; }
.card-hero-60 { font-size: 60px; }
.card-hero-44 { font-size: 44px; line-height: 1.1; white-space: normal; }
.card-hero-32 { font-size: 32px; letter-spacing: .04em; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.card-sub { max-width: 60ch; font-size: 18px; color: var(--text-2); }
.card-sub .up { color: var(--up); }
.card-sub .down { color: var(--down); }
.card-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.btn.card-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; font-size: 14px; letter-spacing: .08em; white-space: nowrap; text-decoration: none; }
.btn.card-btn:disabled { opacity: .5; cursor: wait; }
.card-note { max-width: 60ch; font-size: 12px; color: var(--dim); }
/* A line that wraps wraps evenly, never one word alone on the last line. */
.card-alert, .card-sub, .card-note, .card-hero-44 { text-wrap: balance; }
.card-note [hidden] { display: none; }
.card-chart { position: relative; width: 100%; }
.card-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; width: 100%; }
.card-facts.n1 { grid-template-columns: minmax(0, 1fr); }
.card-facts.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-facts.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-fact { display: flex; flex-direction: column-reverse; gap: 4px; min-width: 0; }
.card-fact dd { margin: 0; font-size: 24px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-fact dd.up { color: var(--up); }
.card-fact dd.down { color: var(--down); }
.card-media { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* Art: a small drawing above the head (SPONSOR's terminal), the column's width at most. */
.card-art { display: flex; justify-content: center; width: 100%; }
/* Links: a row that wraps between links, never inside one. */
.card-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 12px; letter-spacing: .06em; color: var(--dim); }
.card-link { padding: 0; border: 0; background: none; font: inherit; color: var(--dim); white-space: nowrap; cursor: pointer; }
.card-link:hover, .card-link:focus-visible { color: var(--text); text-decoration: none; }
/* + Details: WHATIF's .how toggle; what it holds reads left to right. */
.card-more { width: 100%; margin-top: 0; }
.card-details { margin-top: 12px; text-align: left; }
.card-rows { display: grid; gap: 8px; width: 100%; margin: 0 0 12px; }
.card-row { display: grid; grid-template-columns: 16ch minmax(0, 1fr); gap: 16px; align-items: baseline; }
.card-row dd { margin: 0; font-size: 14px; color: var(--text-2); }
.card-row a { color: var(--accent); }
/* A form in the action slot: one input and its button. */
.card-form { display: flex; gap: 8px; width: 100%; max-width: 480px; }
.card-input {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid var(--rule-strong); border-radius: 0; background: var(--bg);
  color: var(--text); font-family: var(--font); font-size: 16px; text-transform: uppercase;
}
.card-input::placeholder { color: var(--dim); }
.card-input:focus { border-color: var(--accent); outline: 0; }

/* Split (cardPage split: true, WHATIF): the art is the hero, so it takes the left column
   and the other slots, in their usual order, the right one; from 1100 px (the desktop
   layout) only. Below that it is the one centred column, the art first. The right column
   keeps the card's gaps and reads left to right, like a page. Two columns of 3:2, the
   art the wider; the whole no wider than two text columns (2 x --card-w). */
.card-col { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; min-width: 0; }
@media (min-width: 1100px) {
  .card.card-split {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 48px;
    max-width: calc(var(--card-w) * 2); text-align: left;
  }
  .card-split > .card-alert { grid-column: 1 / -1; }
  .card-split .card-col, .card-split .card-head, .card-split .card-cta, .card-split .card-foot { align-items: flex-start; }
  .card-split .card-act, .card-split .card-links { justify-content: flex-start; }
}

/* Below the desktop layout, and on a short desktop screen, the biggest hero steps down
   and the groups sit closer, so a card fits a 730 px high window. */
@media (max-width: 1099px), (max-height: 800px) {
  .card, .card-col { gap: 24px; }
  .card { padding: 24px 0; }
  .card-hero-96 { font-size: 60px; }
}
@media (max-width: 639px) {
  .card { gap: 24px; padding: 16px 0; }
  .card-col { gap: 24px; }
  .card-hero-96, .card-hero-60 { font-size: 44px; }
  .card-hero-44 { font-size: 32px; }
  .card-hero-32 { font-size: 24px; }
  .card-sub { font-size: 16px; }
  .card-facts.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-fact dd { font-size: 18px; }
  .card-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .card-form { flex-direction: column; }
}

/* ---- Card pages, left (kit.js cardPage align: 'left', cardStack) ------------------
   The account pages (ME, PRO): one column of --card-w-left, 24 between cards, 16 inside
   each. A card reads left to right: a title bar (the name at the left, one action at the
   right), then rows (label dim, 120 px, the value beside it, an action at the end) and
   fields (the label above; two may share a row). Only the hero card (the seat) stays
   centred: it is a plain card in the same column. Sentences live in the one + Details at
   the bottom. /founders, /guide and the legal pages keep the centred column above. */
.card-page-left { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: var(--card-w-left); margin: 0 auto; padding: 24px 0; }
.card-page-left[hidden], .card-page-left .card[hidden] { display: none; }
.card-page-left .card { gap: 16px; max-width: none; margin: 0; padding: 16px; border: 1px solid var(--rule-strong); }
.card.card-left { align-items: stretch; text-align: left; }
.card-left .card-head, .card-left .card-cta, .card-left .card-foot, .card-left .card-media { align-items: flex-start; }
.card-left .card-act, .card-left .card-links { justify-content: flex-start; }
.card-left .card-sub { font-size: 14px; color: var(--text-2); }
.card-left .card-alert { font-size: 13px; }
.card-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 24px; }
.card-title { margin: 0; letter-spacing: .2em; }
.card-bar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-left: auto; }
.card-bar-end:empty { display: none; }
.card-bar-end .btn.card-btn { height: 32px; padding: 0 16px; font-size: 12px; }
.card-body { display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; }
.card-lines { display: grid; gap: 8px; width: 100%; }
.card-line { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; min-width: 0; }
.card-line-v { min-width: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.card-line-end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; font-size: 12px; letter-spacing: .06em; }
.card-line-end .card-link, .card-line-v .card-link { font-size: 12px; letter-spacing: .06em; }
.card-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 16px; width: 100%; }
.card-fields.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-left .card-row { grid-template-columns: 120px minmax(0, 1fr); }
.card-left .card-details { margin-top: 12px; }
@media (max-width: 639px) {
  .card-page-left { gap: 16px; padding: 16px 0; }
  .card-page-left .card { padding: 12px; }
  .card-line { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .card-line-k { grid-column: 1 / -1; }
  .card-fields.n2 { grid-template-columns: minmax(0, 1fr); }
  .card-left .card-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Card pages as panels (kit.js cardPage panelCard) -------------------------------
   A card inside a strip panel, as HOME's panels: the panel's own 1px box in --rule-strong
   and its 22 px title strip (.panel-head) naming the card, the card's slots inside with its
   own padding and no second border. Stacked panels sit 8 px apart, as HOME's. A card
   hidden hides its panel. */
.panel-card { border: 1px solid var(--rule-strong); }
.panel-card[hidden], .panel-card:has(> .panel-body > .card[hidden]) { display: none; }
.panel-card > .panel-body { padding: 0; }
.card-page-left .panel-card > .panel-body > .card { border: 0; }
.card-page-left:has(> .panel-card) { gap: 8px; padding: 8px 0; }
/* The card's own room at the sides, so its words never touch the panel's border. */
.panel-card > .panel-body > .card { padding-left: 16px; padding-right: 16px; }
/* The strip's right end (end) holds small things at the strip's size: a link, a count, a
   switch, a button 18 px tall in 11 px caps, never the card's 32 px buttons. One line. */
.panel-card > .panel-head > .card-bar-end { flex-wrap: nowrap; gap: 0 12px; margin-left: auto; font-size: 11px; }
.panel-card > .panel-head > .card-bar-end .btn.card-btn { height: 18px; padding: 0 8px; font-size: 11px; letter-spacing: .1em; }
.panel-card > .panel-head > .card-bar-end .card-link { font-size: 11px; letter-spacing: .06em; }
/* Two panel cards on a page of their own (BBRK) sit 8 px apart, as HOME's panels. */
.view > .panel-card + .panel-card { margin-top: 8px; }
/* A card page is one thing, so its panel ends where the card ends (no empty box under it,
   as WHATIF, EMBED, MARKETS); taller than the window, the screen scrolls, as the card page
   did before it had a panel. A screen whose card fills the height (SPONSOR, BBRK) says so. */
@media (min-width: 1100px) {
  html:not(.is-embed) .view > .panel.panel-card:not([hidden]) { flex: 0 0 auto !important; min-height: 0 !important; }
  html:not(.is-embed) .view > .panel.panel-card > .panel-body { overflow: visible; }
}
@media (max-width: 639px) {
  .panel-card > .panel-body > .card { padding-left: 12px; padding-right: 12px; }
}

/* ---- Usage card and empty state (kit.js usageCard, emptyState) ----------------------
   A usage card is a card page with three slots only: the problem (hero 32), the format
   (sub, as code) and one example (the primary button); the rest behind + Details.
   An empty state is DESK's empty desk made the model: a title, one hint (60ch at most),
   one action, where the list would start. */
.card-hero-24 { font-size: 24px; line-height: 1.2; letter-spacing: 0; white-space: normal; }
/* The format: code, but not a link: the second text colour, one line on a desktop. */
.card-usage .card-sub { font-size: 14px; }
.card-format { font-family: var(--font); color: var(--text-2); white-space: nowrap; }
.card-grammar { color: var(--text-2); white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 639px) {
  .card-hero-24 { font-size: 18px; }
  .card-format { white-space: normal; overflow-wrap: anywhere; }
}
.card-details .codes { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 12px; text-align: left; }
.empty[hidden] { display: none; }
.empty-title { max-width: 60ch; font-size: 16px; font-weight: 600; color: var(--text); }
.empty-hint { max-width: 60ch; font-size: 13px; color: var(--text-2); }
.empty-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.empty-act .btn { display: inline-flex; align-items: center; text-decoration: none; }
.empty-note { max-width: 60ch; font-size: 12px; color: var(--dim); }
/* proLine: the word PRO in a quiet line, a link to the PRO screen. */
.pro-line-link { color: var(--accent); font-weight: 600; letter-spacing: .04em; }
.empty > .card-more { max-width: 60ch; }
.empty.is-small { padding: 8px 0; }
.empty.is-small .empty-title { font-size: 12px; font-weight: 400; color: var(--dim); }

/* ---- Card pages on result screens (Cards B): AFFORD, CPI, LOAN, WAGE, MCP, TAPE -----
   The kit's slots as they are; only what a screen's own media needs. */
/* AFFORD: the verdict stamp (style.css .stamp) and its line are the picture. */
.buy-verdict { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.buy-verdict .stamp-line { margin-top: 0; }
/* CPI's answer sits in a flush panel under its form: room at the sides. */
.cpi-card { padding-left: 16px; padding-right: 16px; }
/* TAPE: the moving tape (and a Pro list) run the width of the card; the list reads left. */
.tape-card .card-media { align-items: stretch; gap: 16px; }
.tape-card .tape-list { text-align: left; }