/* Equyx Screener — its own page, same amber-on-black terminal skin */

body.term.scr { overflow: auto; }
.scr-shell { display: grid; grid-template-rows: var(--topbar) 1fr; min-height: 100vh; }
.scr-body { padding: 18px 20px 60px; max-width: 1900px; margin: 0 auto; width: 100%; }

.hero { margin-bottom: 16px; }
.hero h1 { font-size: 21px; color: var(--amber); margin: 0 0 6px; letter-spacing: .01em; font-weight: 700; }
.hero p { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.65; max-width: 900px; }

/* THE SCREEN CARDS ARE PILLS NOW, and their 20 rules went with them: a grid of
   two-line `.pick` cards, its close button, its "mine" bullet and its media
   query all styled markup that nothing has rendered since every screen became
   a `[data-qpill]`. Dead CSS reads as proof that the element still exists.
   `.pick-cards` / `.pcard` below are a different thing and are live. */
.pick-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -6px 0 10px; font-size: 11px; }
.pick-note { color: var(--good, #3fb950); }
.pick-note.bad { color: var(--bad, #e5484d); }
.ab-rank { color: var(--muted); line-height: 1.6; margin: 2px 0 2px; }
.ab-rank b { color: var(--text); font-weight: 600; }
.ab-crit { display: inline-block; margin: 0 10px 0 4px; white-space: nowrap; }
.ab-crit i { font-style: normal; color: var(--amber-dim, #c8912f); }

.explain { border: 1px solid var(--border); border-left: 3px solid var(--amber); background: var(--panel-2, #0c0a07); padding: 9px 13px; color: var(--text-2); font-size: 12.5px; line-height: 1.6; margin-bottom: 12px; }

.runbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.runbar .run { font-size: 12.5px; padding: 7px 18px; }
.runbar .muted { font-size: 11px; }

/* ------------------------------------------------------------- table */

.tablewrap { overflow-x: auto; border: 1px solid var(--border); }
/* Fixed layout so the header and every tbody share one column model. With auto
   layout the browser sized the header independently of the rows and the labels
   drifted away from their columns. */
/* A MIN-WIDTH SIZED FOR THE WIDEST TABLE MAKES EVERY TABLE THAT WIDE.
   1352px was the fixed starter set, which carries four weekly columns a
   question-built table does not. It forced 366px of overflow onto an
   eleven-column plan whose own widths add up to 902 - and the column pushed
   off the end was `ask`, the one button on every row. The floor is now what a
   narrow table needs; a genuinely wider one still scrolls, which is what
   `.tablewrap { overflow-x: auto }` is for. */
.scr-table { width: 100%; border-collapse: collapse; font-size: 11.5px; min-width: 900px; table-layout: fixed; }
.scr-table col.w-rank { width: 34px; }
.scr-table col.w-stock { width: 182px; }
.scr-table col.w-spark { width: 100px; }
.scr-table col.w-px { width: 80px; }
.scr-table col.w-n { width: 84px; }
.scr-table col.w-wk { width: 92px; }
.scr-table col.w-score { width: 56px; }
.scr-table col.w-verdict { width: 110px; }
.scr-table thead th {
  background: var(--amber); color: var(--on-accent, #000); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; padding: 4px 8px; text-align: right;
  position: sticky; top: 0; z-index: 2;
}
.scr-table thead th.c-stock, .scr-table thead th.c-rank, .scr-table thead th.c-spark,
.scr-table thead th.c-verdict { text-align: left; }
.scr-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: right; font-variant-numeric: tabular-nums; }
.scr-table tr.scr-row { cursor: pointer; }
/* The banding and the hover wash skip the pinned columns. They are painted
   with translucent colours, and a pinned cell painted translucent shows the
   columns sliding underneath — the ticker ends up overprinted by whatever
   numbers scroll past it. The pinned cells paint themselves, opaquely. */
.scr-table tr.scr-row:nth-child(4n+1) td:not(.c-rank):not(.c-stock):not(.c-ask) { background: rgba(255,255,255,.014); }
.scr-table tr.scr-row:hover td:not(.c-rank):not(.c-stock):not(.c-ask) { background: var(--hover, #17130c); }
.scr-table tr.scr-row.open td:not(.c-rank):not(.c-stock):not(.c-ask) { background: var(--active, #1d1509); }

.c-rank { color: var(--faint); text-align: left !important; width: 34px; }
.c-stock { text-align: left !important; min-width: 178px; }
.st-sym { color: var(--amber); font-weight: 700; font-size: 12.5px; }
.st-name { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 168px; }
.c-spark { width: 100px; text-align: left !important; }
.spark { width: 92px; height: 26px; display: block; }
.c-px { color: var(--text); font-weight: 600; }
.st-chg { font-size: 10px; font-weight: 400; }
.c-n { color: var(--text); min-width: 76px; }
.c-sub { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; font-weight: 400; }

.wk { min-width: 84px; }
.wk-move { font-weight: 700; font-size: 12.5px; }
.wk-odds { font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; }
.c-score { font-weight: 700; font-size: 16px; min-width: 52px; }
.c-verdict { text-align: left !important; min-width: 104px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.c-score.up, .c-verdict.up { color: var(--good); }
.c-score.warn, .c-verdict.warn { color: var(--amber); }
.c-score.down, .c-verdict.down { color: var(--muted); }
.none { text-align: center !important; color: var(--muted); padding: 26px !important; }

/* ------------------------------------------------------------ detail */

.detail-row td { background: var(--panel-2, #0a0906) !important; padding: 0 !important; }
.detail { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; padding: 14px 16px 18px; text-align: left; }
.d-col { min-width: 0; }
.d-h { color: var(--amber); font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; margin-bottom: 8px; }
.dp { margin-bottom: 9px; }
.dp-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-2); margin-bottom: 3px; }
.dp-top span:last-child { color: var(--faint); }
.dp-plain { font-size: 10.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

.wk-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.wk-table th { background: var(--hover, #17130c); color: var(--amber-dim); font-size: 9.5px; text-transform: uppercase; padding: 3px 6px; text-align: right; letter-spacing: .05em; }
.wk-table th:first-child, .wk-table td:first-child { text-align: left; }
.wk-table td { padding: 3px 6px; border-bottom: 1px solid var(--border); text-align: right; color: var(--text); }
.d-note { font-size: 10px; color: var(--faint); line-height: 1.5; margin-top: 6px; }

.lv { display: grid; gap: 2px; font-size: 11px; }
.lv div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border); padding: 2px 0; }
.lv span { color: var(--muted); }
.lv b { color: var(--text); font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; }
.lv b.na { color: var(--faint); font-style: italic; }

.detail .ai-out { background: transparent; border: none; padding: 0; font-size: 11.5px; color: var(--text-2); line-height: 1.6; }
.detail .ai-out p { margin: 0 0 8px; }
.detail .ai-out strong { color: var(--amber); }

.foot-note {
  margin-top: 16px; border: 1px solid var(--border); border-left: 3px solid var(--amber);
  background: var(--panel-2, #0c0a07); padding: 11px 14px; color: var(--muted); font-size: 11.5px; line-height: 1.65;
}
.foot-note b { color: var(--text-2); }

@media (max-width: 1400px) { .detail { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } .hero h1 { font-size: 17px; } }

/* --------------------------------------------------------- landing gate */

.gate { min-height: 100vh; display: grid; place-items: center; padding: 26px 18px;
  background: radial-gradient(900px 480px at 50% -10%, rgba(255,160,40,.09), transparent 62%), var(--bg, #000); }
.gate-card { width: 100%; max-width: 980px; display: grid; grid-template-columns: 1.1fr .9fr;
  border: 1px solid var(--border-strong); background: var(--bg-2); }
.gate-left { padding: 30px 30px 26px; border-right: 1px solid var(--border); background: var(--panel-3); }
.gate-left .brand { margin-bottom: 18px; }
.gate-left h1 { font-size: 22px; color: var(--amber); margin: 0 0 8px; line-height: 1.3; font-weight: 700; }
.gate-sub { color: var(--text-2); font-size: 12.5px; line-height: 1.65; margin: 0 0 20px; }
.gate-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gate-features li { display: grid; gap: 2px; }
.gate-features b { color: var(--text); font-size: 12px; font-weight: 700; }
.gate-features b::before { content: '▸ '; color: var(--amber); }
.gate-features span { color: var(--muted); font-size: 11.5px; line-height: 1.5; padding-left: 12px; }

.gate-right { padding: 30px 28px 26px; display: flex; flex-direction: column; }
.gate-right h2 { margin: 0 0 4px; font-size: 15px; color: var(--text); text-transform: uppercase; letter-spacing: .08em; }
.gate-hint { color: var(--muted); font-size: 11.5px; line-height: 1.5; margin-bottom: 18px; }

body.term .prov-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-bottom: 8px; padding: 9px 12px; font-size: 12px; background: var(--chip);
  border: 1px solid var(--border-strong); color: var(--text); text-transform: none; letter-spacing: 0;
}
body.term .prov-btn:hover:not(:disabled) { background: var(--amber); color: var(--on-accent, #000); border-color: var(--amber); }
body.term .prov-btn:disabled { opacity: .45; }

.or-line { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.gate-email input { width: 100%; margin-bottom: 7px; padding: 8px 10px; font-size: 12px;
  background: var(--chip, #12100c); border: 1px solid var(--border-strong); color: var(--text); }
.gate-email input:focus { border-color: var(--amber); box-shadow: none; outline: none; }

.gate-guest { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.linkish { background: none; border: none; color: var(--amber); cursor: pointer; font-family: var(--mono);
  font-size: 12px; padding: 0; text-transform: none; letter-spacing: 0; }
.linkish:hover { text-decoration: underline; }
.gate-guest-note { color: var(--faint); font-size: 10.5px; line-height: 1.5; margin-top: 5px; }
.gate-foot { margin-top: auto; padding-top: 16px; color: var(--faint); font-size: 10px; line-height: 1.55; }
.gate-foot b { color: var(--amber-dim); }

@media (max-width: 820px) {
  .gate-card { grid-template-columns: 1fr; }
  .gate-left { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ---------------------------------------------------- market selector */

.mkt-bar { display: flex; gap: 1px; flex-wrap: wrap; background: var(--border); border: 1px solid var(--border); margin-bottom: 12px; }
.mkt-btn { background: var(--surface); border: none; padding: 6px 12px; cursor: pointer; font-family: var(--mono);
  font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.mkt-btn:hover { background: var(--hover, #17130c); color: var(--amber); }
.mkt-btn.on { background: var(--amber); color: var(--on-accent, #000); font-weight: 700; }
.mkt-note { font-size: 10.5px; color: var(--faint); margin: -6px 0 12px; line-height: 1.5; }

.st-sym.clickable { cursor: pointer; }
.st-sym.clickable:hover { text-decoration: underline; }

/* ------------------------------------------------------------- home */

.home { display: grid; grid-template-rows: var(--topbar) 1fr; min-height: 100vh; }
.home-body { padding: 34px 22px 60px; max-width: 1080px; margin: 0 auto; width: 100%; }
.home-hero { margin-bottom: 26px; }
.home-hero h1 { font-size: 24px; color: var(--amber); margin: 0 0 9px; font-weight: 700; line-height: 1.3; }
.home-hero p { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.7; max-width: 800px; }

.home-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.home-app { display: block; background: var(--surface); padding: 22px 22px 20px; text-decoration: none; position: relative; }
.home-app:hover { background: var(--hover, #17130c); text-decoration: none; }
.ha-tag { position: absolute; top: 16px; right: 18px; background: var(--amber); color: var(--on-accent, #000);
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; padding: 2px 7px; }
.home-app h2 { margin: 0 0 5px; font-size: 17px; color: var(--amber); font-weight: 700; }
.ha-line { color: var(--text); font-size: 13px; margin-bottom: 10px; }
.home-app p { color: var(--text-2); font-size: 12px; line-height: 1.6; margin: 0 0 12px; }
.home-app ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 5px; }
.home-app li { color: var(--muted); font-size: 11.5px; line-height: 1.5; padding-left: 13px; position: relative; }
.home-app li::before { content: '▸'; position: absolute; left: 0; color: var(--amber-dim); }
.ha-go { color: var(--amber); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.home-foot { margin-top: 22px; border: 1px solid var(--border); border-left: 3px solid var(--amber);
  background: var(--panel-2, #0c0a07); padding: 13px 16px; color: var(--muted); font-size: 11.5px; line-height: 1.65; }
.home-foot b { color: var(--text-2); }

@media (max-width: 820px) { .home-apps { grid-template-columns: 1fr; } }

/* honeypot: off-screen but not display:none, which some bots skip */
.gate-email .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gate-small { color: var(--faint); font-size: 10.5px; line-height: 1.55; margin-top: 8px; }
.linkish.sm { font-size: 10.5px; }
.gate-verify { margin-top: 10px; padding: 9px 11px; border: 1px solid var(--amber-faint);
  background: var(--chip); color: var(--amber-dim); font-size: 11.5px; line-height: 1.55; }

/* ------------------------------------------------- column picker + sort */

.colwrap { position: relative; display: inline-block; }
.col-btn {
  font: inherit; font-size: 11px; padding: 3px 9px; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 3px; margin-left: 4px;
}
.col-btn:hover { color: var(--text); border-color: var(--accent); }
.col-btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #000); }
.col-btn.clear { color: var(--accent); border-color: var(--accent); }

.colpick {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  min-width: 210px; padding: 10px 12px;
  background: var(--panel, #14120e); border: 1px solid var(--border);
  border-radius: 4px; box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
}
.cp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.cp-head b { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.cp-reset {
  font: inherit; font-size: 10.5px; background: none; border: none; padding: 0;
  color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.cp-list { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; }
.cp-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; cursor: pointer; }
.cp-item input { accent-color: var(--accent); cursor: pointer; margin: 0; }
.cp-item.fixed { cursor: default; opacity: .7; }
.cp-item i { font-style: normal; font-size: 10px; color: var(--muted); margin-left: 5px; }
.cp-note { font-size: 10px; color: var(--muted); margin-top: 8px; }

.scr-table th.sortable { cursor: pointer; user-select: none; }
/* ACCENT ON AN ACCENT BAND IS NOT A STATE, IT IS A DISAPPEARING ACT.
   `thead th` is `background: var(--amber)` and every theme sets
   `--accent: var(--amber)`, so the old `color: var(--accent)` here painted
   the sorted header's label in the colour of its own background - measured
   at rgb(20,88,240) on rgb(20,88,240). The sort column is the one a reader
   most needs named, and hovering any header erased that one too.
   The state travels on a rule and on contrast instead. */
.scr-table thead th.sortable:hover { color: var(--on-accent, #000); opacity: 1;
  box-shadow: inset 0 -2px 0 var(--on-accent, #000); }
.scr-table thead th.sorted { color: var(--on-accent, #000); opacity: 1;
  box-shadow: inset 0 -2px 0 var(--on-accent, #000); }
/* DIMMING THE OTHERS WAS A SECOND CONTRAST BUG, measured at 3.82:1 by the
   audit above - white at .74 over the band composites to rgb(194,212,251),
   and 9.5px bold is not "large text", so AA wants 4.5. The sorted column is
   already named by its rule and its arrow; nothing needs fading. */
.sort-mark { font-style: normal; font-size: 8px; margin-left: 3px; vertical-align: middle; }
/* the screener starts from a question, not from a menu of setups */
.askline { display: flex; gap: 8px; margin-bottom: 10px; }
.askline-in { flex: 1; min-width: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  padding: 11px 13px; font-size: 14px; font-family: inherit; border-radius: 3px; }
.askline-in:focus { outline: none; border-color: var(--amber); }
.askline-go { white-space: nowrap; }
/* tickers are real links now: keep the terminal look, not the browser's */
a.st-sym, a.linkish, a.wl-link { color: inherit; text-decoration: none; display: block; }
/* A TICKER IS THE MOST-PRESSED THING ON THIS TABLE, and it was 20px tall - under
   every touch-target minimum there is, measured as `TITAN.NS is 70x20`. It is
   the cell's own height that has to grow, not the text, so the link centres
   itself in 24px instead of sitting on one line of it. */
a.st-sym { color: var(--amber); min-height: 24px; display: flex; align-items: center; }
a.st-sym.with-logo { display: flex; }
a.linkish { display: inline; color: var(--amber); }
a.wl-link { display: inline; }
/* A DASHED BOX AROUND ONE SENTENCE IS A BOX AROUND NOTHING.
   This framed a 249-character instruction; the instruction is now six words,
   and six words in a dashed box read as an error message. */
.ask-empty { color: var(--muted); margin: 0 0 8px; line-height: 1.5; font-size: 12px; }
/* small pills, not blocks: questions to start from, and the screens asked or kept */
.qpills { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.qpill { background: transparent; border: 1px solid var(--border); color: var(--text-2, var(--muted)); border-radius: 999px;
  padding: 4px 11px; font-size: 11.5px; line-height: 1.35; cursor: pointer; font-family: inherit; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.qpill:hover { border-color: var(--amber); color: var(--text); }
.qpill.mine { border-style: dashed; }
.qpill:disabled { opacity: .5; cursor: default; }
@media (max-width: 600px) { .qpill { white-space: normal; } }

/* ---- pick cards: the answer, drawn ---- */
.pick-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.pcard { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 12px 12px 10px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: border-color .15s, transform .15s; }
.pcard:hover { border-color: var(--amber); transform: translateY(-1px); }
.pc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-rank { font-size: 11px; color: var(--faint, var(--muted)); width: 14px; text-align: center; flex: 0 0 auto; }
.pc-id { min-width: 0; flex: 1 1 auto; }
/* `a.pc-sym`, NOT `.pc-sym`. `body.term a { color: var(--cyan) }` is (0,1,1) and
   this was (0,1,0), so the card's ticker has been painting the generic link
   cyan and not the accent for as long as both rules have existed - an audit
   caught it as `rgb(8, 145, 178)` at 3.29:1, and the colour it was meant to be
   clears 4.5:1 in every theme. The 24px is a touch target: it measured 70x20,
   and it is the most-pressed thing on the card. */
a.pc-sym, .pc-sym { color: var(--amber); font-weight: 700; font-size: 15px; text-decoration: none;
  letter-spacing: .02em; min-height: 24px; display: inline-flex; align-items: center; }
.pc-sym:hover { text-decoration: underline; }
.pc-name { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-score { flex: 0 0 auto; min-width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; border: 2px solid var(--muted); color: var(--text); }
.pc-score.up { border-color: var(--good, #3fb950); color: var(--good, #3fb950); }
.pc-score.warn { border-color: var(--amber); color: var(--amber); }
.pc-path { width: 100%; height: 56px; display: block; }
.pc-hist { fill: none; stroke: var(--text-2, var(--muted)); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.pc-band { fill: var(--amber); opacity: .16; }
.pc-proj { stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.pc-proj.up { stroke: var(--good, #3fb950); }
.pc-proj.down { stroke: var(--bad, #e5484d); }
.pc-now { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pc-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pc-figs div { min-width: 0; }
.pc-figs b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.pc-figs b.up { color: var(--good, #3fb950); }
.pc-figs b.down { color: var(--bad, #e5484d); }
.pc-figs span { display: block; font-size: 10px; color: var(--muted); line-height: 1.3; }
.pc-why { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-why span { font-size: 10.5px; border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; color: var(--text-2, var(--muted)); }
.results.folded .tablewrap { display: none; }   /* the sources and the warning stay */
.table-toggle { margin: 0 0 12px; }
@media (max-width: 700px) {
  .pick-cards { grid-template-columns: minmax(0, 1fr); }
  .pc-figs span { font-size: 11.5px; }
  .pc-why span { font-size: 11.5px; }
}
/* why fewer names than asked for: each condition and how many survived it */
.funnel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 11px; color: var(--muted); margin: -6px 0 14px; }
.fn-lead { color: var(--text); font-weight: 600; }
.fn-step { border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.fn-step + .fn-step::before { content: ''; }
.fn-step.cut { border-color: var(--amber-dim, #c8912f); color: var(--text-2, var(--text)); }


/* ---- saved screens live in the pill row now ---- */
.qpill-saved { border-color: var(--amber, #ffa028); color: var(--amber, #ffa028); }
.qpill-saved.on { background: var(--amber, #ffa028); color: var(--on-accent, #000); }
.qpill-x { font-style: normal; margin-left: 6px; opacity: .55; }
.qpill-x:hover { opacity: 1; }
.qpill-unsaved { border-style: dashed; color: var(--muted); cursor: default; }


/* ---- folded detail: simple on the surface, everything still there ----
   The body is capped and scrolls, so opening one block never pushes the rest
   of the page around - the commonest reason a disclosure feels worse than the
   wall of text it replaced. */
.foldout { border-top: 1px solid var(--border); margin-top: 10px; }
.foldout > summary {
  cursor: pointer; list-style: none; padding: 8px 2px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.foldout > summary::-webkit-details-marker { display: none; }
.foldout > summary::before { content: '▸'; display: inline-block; width: 14px; color: var(--faint); }
.foldout[open] > summary::before { content: '▾'; }
.foldout > summary:hover { color: var(--amber, #ffa028); }
.foldout-body { max-height: 46vh; overflow-y: auto; padding: 2px 2px 10px; }
.plan-note { font-size: 12.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 8px; }
.plan-bits { display: flex; flex-wrap: wrap; gap: 5px; }
.plan-bit {
  font-size: 11px; padding: 2px 8px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 4px); color: var(--muted);
}
.plan-bit.col { border-style: dashed; }
@media (pointer: coarse) { .foldout > summary { min-height: 34px; } }


/* ---- one collapsed row, a real + , and room to breathe on a phone ----
   A disclosure needs to look pressable at a glance, so the marker is drawn as
   a + that becomes a - rather than borrowed from the browser's default
   triangle, which is nearly invisible at this size and different in every
   engine. The touch target is 40px tall because a 20px one is the single most
   common reason a control "does not work" on a phone. */
.scr-more { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 10px 0 4px; }
.scr-more > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; min-height: 40px; box-sizing: border-box;
  font-size: 12px; color: var(--muted);
}
.scr-more > summary::-webkit-details-marker { display: none; }
.scr-more > summary:hover { color: var(--text); background: var(--hover); }
.scr-more-sign {
  position: relative; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 3px;
  border: 1px solid var(--border-strong);
}
.scr-more-sign::before, .scr-more-sign::after {
  content: ''; position: absolute; background: currentColor;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.scr-more-sign::before { width: 8px; height: 1.5px; }
.scr-more-sign::after { width: 1.5px; height: 8px; }
/* open: the vertical stroke goes, leaving a minus */
.scr-more[open] .scr-more-sign::after { display: none; }
.scr-more-body { padding: 4px 12px 12px; }
.scr-more-body .mkt-bar { margin-bottom: 8px; }

@media (max-width: 720px) {
  /* SAME SHAPE ON A PHONE, NOT A DIFFERENT SCREEN. The question, the two
     dials and the table are what a phone shows; everything else is behind the
     same one row it is behind on a desktop. */
  .scr-more { margin: 8px 0 2px; }
  .scr-more > summary { padding: 10px 12px; min-height: 44px; font-size: 12.5px; }
  .scr-more-body { padding: 4px 10px 10px; }
  .scr-more-body .mkt-bar { display: flex; flex-wrap: wrap; gap: 6px; }
  .scr-more-body .qpills { gap: 6px; }
}

/* a dial the current question does not use: dimmed, still readable, still
   pressable - pressing one is how you find out it was ignored, and the note
   beside it already says so */
.hzbar.overridden .hz-btn { opacity: .5; }
.hzbar.overridden .hz-btn.on { opacity: .7; }
.hzbar.overridden .hz-note { color: var(--warn); }