/* ── Chainfax public page — rules PORTED from dashboard/public/index.html ──
   Same tokens, same anatomy, same modes. gs-theme.css (the brand) is loaded
   first; nothing here redefines it. No inline style anywhere: the CSP is
   style-src 'self'. Comments name the dashboard rule each block comes from. */

/* palette: the dashboard's base (light) :root, then the neon/focus rack, then peanut */
:root{
  color-scheme:light;
  --plane:#f9f9f7; --surface:#fcfcfb;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --border:rgba(11,11,11,.10);
  --s1:#1C7FA8; --s2:#7A3FC4; --s3:#2E6FD0; --s4:#8A5AB8;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b;
  --success-text:#006300;
  --pos:#0A7325; --neg:#C62828;
  --tok:var(--s1); --tok-2:var(--s2); --tok-text:var(--s1); --tok-ink:#07070C;
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:40px;
  --gutter:var(--sp-4);
}
@media (max-width:720px){ :root{ --gutter:var(--sp-3) } }
:root:is([data-theme=neon],[data-theme=focus]){
  color-scheme:dark;
  --plane:var(--gs-rack); --surface:var(--gs-panel);
  --ink:var(--gs-text); --ink-2:var(--gs-text-dim); --muted:var(--gs-text-mute);
  --grid:var(--gs-rule); --axis:var(--gs-rule-strong); --border:var(--gs-rule);
  --s1:var(--gs-signal); --s2:var(--gs-settle); --s3:#3F92FF; --s4:var(--gs-peak-hi);
  --pos:#3DDC84; --neg:#FF5C5C;
  --good:var(--gs-signal); --warn:var(--gs-text-dim); --serious:var(--gs-text-dim);
  --crit:var(--gs-peak-hi); --success-text:var(--gs-peak);
}
:root:is([data-theme=neon],[data-theme=focus]) body{
  background-image:
    radial-gradient(120% 70% at 12% -10%, color-mix(in srgb, var(--tok) 13%, transparent) 0%, transparent 62%),
    radial-gradient(110% 65% at 92% -6%, color-mix(in srgb, var(--tok-2) 9%, transparent) 0%, transparent 58%),
    repeating-linear-gradient(45deg,color-mix(in srgb, var(--tok) 3%, transparent) 0 1px,transparent 1px 15px),
    repeating-linear-gradient(-45deg,color-mix(in srgb, var(--tok-2) 2.5%, transparent) 0 1px,transparent 1px 15px);
  background-attachment:fixed;
}
:root:is([data-theme=neon],[data-theme=focus]) h1{color:var(--gs-text)}
:root:is([data-theme=neon],[data-theme=focus]) .panel{
  background:linear-gradient(180deg, rgba(255,255,255,.022) 0%, transparent 42%), var(--gs-panel);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--tok) 9%, transparent), 0 1px 0 rgba(255,255,255,.03) inset,
             0 10px 30px -12px rgba(0,0,0,.75);
  border-color:transparent;
  transition:box-shadow .45s ease;
}
:root:is([data-theme=neon],[data-theme=focus]) .panel:hover{ box-shadow:0 0 0 1px color-mix(in srgb, var(--tok) 16%, transparent),
  0 1px 0 rgba(255,255,255,.04) inset, 0 14px 36px -14px rgba(0,0,0,.8) }
:root:is([data-theme=neon],[data-theme=focus]) .grouphdr h3{color:var(--gs-text-mute)}
:root:is([data-theme=neon],[data-theme=focus]) .dot{box-shadow:0 0 8px currentColor}
:root:is([data-theme=neon],[data-theme=focus]) .chip[aria-pressed=true]{
  background:var(--tok);border-color:var(--tok);color:var(--tok-ink);font-weight:700}
:root[data-theme=peanut]{
  color-scheme:dark;
  --plane:#07070C; --surface:#0E0E18;
  --ink:#FFFFFF; --ink-2:#C9C9DC; --muted:#9A9AB4;
  --grid:#1D1D2E; --axis:#26264A; --border:#1D1D2E;
  --s1:var(--gs-signal); --s2:var(--gs-settle); --s3:#3F92FF; --s4:var(--gs-peak-hi);
  --pos:#3DDC84; --neg:#FF5C5C;
  --good:var(--gs-signal); --warn:var(--gs-text-dim); --serious:var(--gs-text-dim);
  --crit:var(--gs-peak-hi); --success-text:var(--gs-peak);
  --sp-4:32px; --sp-5:56px;
}
:root[data-theme=peanut] body{
  background-image:radial-gradient(120% 60% at 50% -12%, color-mix(in srgb, var(--tok) 10%, transparent) 0%, transparent 62%);
  background-attachment:fixed;
}
/* token colours, sampled from the official logos (dashboard 2026-09-18) */
[data-tok=phex]{ --tok:#FF2E7E; --tok-2:#FF8A1F; --tok-text:#FF2E7E; --tok-ink:#07070C }
[data-tok=ehex]{ --tok:#627EEA; --tok-2:#FF3546; --tok-text:#627EEA; --tok-ink:#07070C }
[data-tok=wpls]{ --tok:#8A2BFF; --tok-2:#5B2BE8; --tok-text:#9F51FF; --tok-ink:#FFFFFF }
[data-tok=plsx]{ --tok:#12E86A; --tok-2:#FF3B3B; --tok-text:#12E86A; --tok-ink:#07070C }
[data-tok=inc]{  --tok:#00E58A; --tok-2:#5CFFB0; --tok-text:#00E58A; --tok-ink:#07070C }
[data-tok=prvx]{ --tok:#FF9613; --tok-2:#D14BFF; --tok-text:#FF9613; --tok-ink:#07070C }

/* body / header / type — dashboard lines 680-745 */
body{margin:0;background:var(--plane);color:var(--ink);font:14px/1.5 var(--gs-body)}
body{overflow-x:hidden}
.gs-defs{position:absolute;width:0;height:0;overflow:hidden}
header{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) var(--gutter) var(--sp-2)}
h1{font-size:17px;margin:0;font-family:var(--gs-display);font-weight:800;
  letter-spacing:-.035em;text-transform:uppercase;line-height:1.02}
h2{font-family:var(--gs-display);font-weight:800;letter-spacing:-.035em;
  text-transform:uppercase;line-height:1.05}
table td,.v,.big,.num,.stamp b{font-family:var(--gs-mono);font-variant-numeric:tabular-nums}
.sub{color:var(--muted);font-size:12px}
.spacer{flex:1}
button.ghost,.file-btn{background:none;border:1px solid var(--border);color:var(--ink-2);
  border-radius:7px;padding:5px 11px;font:inherit;font-size:12px;cursor:pointer}
button.ghost:hover,.file-btn:hover{background:var(--surface)}
select{background:var(--surface);color:var(--ink);border:1px solid var(--border);
  border-radius:7px;padding:4px 9px;font:inherit;font-size:12px;max-width:320px}
:root:is([data-theme=neon],[data-theme=focus],[data-theme=peanut]) select{ color-scheme:dark }
.buildid{ font-family:var(--gs-mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
  border:1px solid var(--border); border-radius:6px; padding:2px 7px }
.modeswitch{ display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden }
.modeswitch button{ background:none; border:0; border-right:1px solid var(--border); color:var(--ink-2);
  padding:5px 10px; font:inherit; font-size:12px; cursor:pointer; letter-spacing:.02em }
.modeswitch button:last-child{ border-right:0 }
.modeswitch button[aria-pressed=true]{ background:var(--surface); color:var(--ink); font-weight:700 }
#stamp.stale{ color:var(--gs-peak-hi,#FF9BE9) }

/* main grid, panel anatomy — dashboard lines 793-812 */
main{padding:0 var(--gutter) var(--sp-5);display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));max-width:1680px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:var(--sp-3);min-width:0}
.panel.wide{grid-column:1/-1}
.panel h2{font-size:12px;margin:0 0 2px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2)}
.panel .note{color:var(--muted);font-size:11.5px;margin:0 0 var(--sp-3)}
.phead{display:flex;align-items:baseline;gap:var(--sp-2) var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.phead>h2{margin:0}
.phead .spacer{flex:1;min-width:0}
.phead .note{margin:0}
@media (max-width:720px){ .phead .spacer{flex:0 0 100%;height:0} }
.grouphdr{grid-column:1/-1;display:flex;align-items:baseline;gap:var(--sp-2);
  margin:var(--sp-4) 0 0;padding-bottom:var(--sp-2);border-bottom:1px solid var(--grid)}
.grouphdr h3{margin:0;font-size:12px;font-family:var(--gs-mono);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gs-text-mute)}
.grouphdr span{font-size:11.5px;color:var(--muted)}
.grouphdr:first-of-type{margin-top:0}

/* tables — dashboard 805-813 and the LP-movements / board table 1360-1365 */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{text-align:right;font-size:10.5px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;padding:6px 9px;border-bottom:1px solid var(--axis)}
th:first-child,td:first-child{text-align:left}
td{text-align:right;padding:7px 9px;border-bottom:1px solid var(--grid);font-size:13px}
tr:last-child td{border-bottom:none}
.lpm{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
.lpm td, .lpm th{ padding:7px 8px; border-bottom:1px solid var(--grid); text-align:left; font-size:12.5px }
.lpm th{ font-family:var(--gs-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.lpm td.num, .lpm th.num{ text-align:right }
.lpm .big td{ font-weight:600 }
.lpm td .k{ display:block; font-family:var(--gs-mono); font-size:10.5px; color:var(--muted); font-weight:400; margin-top:2px }
.tabtok{ color:var(--tok-text); font-weight:800; letter-spacing:.04em }
.pos{ color:var(--pos) } .neg{ color:var(--neg) }
/* SIGNED NUMBERS (director 2026-10-02): green up, red down, zero muted, the theme's own tokens; the sign or
   arrow stays beside the colour. A signed sub-line inside a table cell outranks the plain .k muting; an
   unvalued marker or "—" keeps it. */
.zero{ color:var(--muted) }
.lpm td .k.pos{ color:var(--pos) } .lpm td .k.neg{ color:var(--neg) }
.tblwrap,.panel table{max-width:100%}
@media (max-width:720px){
  .panel table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
}

/* chips, status — dashboard 814-824 */
.chiprow{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;margin-bottom:var(--sp-3)}
.chip{border:1px solid var(--border);background:none;color:var(--ink-2);border-radius:999px;
  padding:3px 10px;font:inherit;font-size:11.5px;cursor:pointer;white-space:nowrap}
.chip[aria-pressed=true]{background:var(--tok);border-color:var(--tok);color:var(--tok-ink)}
.status{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}

/* method folds — dashboard 1307-1313 */
details.method{ margin:var(--sp-2) 0 0 }
details.method>summary{ cursor:pointer; list-style:none; font-family:var(--gs-mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); user-select:none }
details.method>summary::-webkit-details-marker{ display:none }
details.method>summary::before{ content:"+ "; }
details.method[open]>summary::before{ content:"− "; }
details.method .note{ margin-top:6px }

/* the tracker's read-only notice and watch row — dashboard 1470-1480, 1777 */
.tk-rules { border:1px solid var(--border); border-left:3px solid var(--s1);
  border-radius:14px; padding:var(--sp-3) var(--sp-4); margin:var(--sp-3) 0 var(--sp-4);
  font-size:15px; line-height:1.55; color:var(--ink-2); }
.tk-rules strong { display:block; margin-bottom:4px; font-size:17px; color:var(--ink); }
.tk-add { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; margin-bottom:var(--sp-4); }
.tk-add input, .tk-add select { padding:11px 13px; border-radius:9px; border:1px solid var(--border);
  background:var(--plane); color:var(--ink); font:inherit; font-size:15px; }
.tk-add input:first-child { flex:1 1 26rem; font-family:var(--gs-mono); }
.tk-add button.ghost{ padding:10px 16px; font-size:14px; border-radius:9px }
.tk-add .hidden{ display:none }
.tk-basis { margin-top:var(--sp-3); font-size:13px; line-height:1.55; color:var(--muted); }
.tk-basis:empty{ display:none }
.tk-note{ font-size:13px; line-height:1.55; color:var(--ink-2); margin:0 0 var(--sp-3) }
.privacy{ border-left:3px solid var(--s2); padding-left:12px }
.tk-total { display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; margin:var(--sp-2) 0 var(--sp-3) }
.tk-total .v { font-family:var(--gs-mono); font-size:52px; font-weight:800; letter-spacing:-.03em; line-height:1 }
.tk-total .k { font-family:var(--gs-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
@media (max-width:720px){ .tk-total .v{ font-size:34px } }

/* saved addresses: the LP-movements row idiom */
.saved{ margin-top:var(--sp-4); border-top:1px solid var(--grid); padding-top:var(--sp-3) }
.saved-list{ list-style:none; padding:0; margin:0 0 var(--sp-3); display:grid; gap:6px }
.saved-list li{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-family:var(--gs-mono); font-size:12.5px; padding:6px 0; border-bottom:1px solid var(--grid) }
.saved-list li:last-child{ border-bottom:0 }
.saved-list .lbl{ color:var(--ink-2); font-family:var(--gs-body) }
.saved-list button.ghost{ padding:3px 9px; font-size:11.5px; border-radius:999px }
.file-btn{ display:inline-block }
.hidden{ display:none }

/* FOCUS — the same boxes with footnotes and folds folded away (dashboard 481-490) */
:root[data-theme=focus] details.method,
:root[data-theme=focus] .tk-basis,
:root[data-theme=focus] .tk-rules,
:root[data-theme=focus] .tk-note,
:root[data-theme=focus] .grouphdr span{ display:none }

/* THE PHONE LAYOUT, DECOUPLED FROM THE VIEW MODE (director 2026-10-03, B). Everything below under
   [data-layout=phone] is LAYOUT: one column, bigger type, explanatory chrome out, tabs one at a time, folds
   collapsed behind a summary, cards instead of tables, no sideways scroll. app.js sets data-layout="phone" on
   a viewport of 480 px or less in EVERY mode, and in Peanut mode at any width (so a desk in Peanut is unchanged).
   Neon / Focus / Peanut keep only their SKIN: the palette and glow (the two blocks above) and the board's
   column density ("delete before shrinking", below). */
:root[data-layout=phone] main{ grid-template-columns:1fr; gap:var(--sp-4) }
:root[data-layout=phone] .panel{ padding:var(--sp-4); border-radius:18px }
:root[data-layout=phone] .tk-basis,
:root[data-layout=phone] .tk-rules,
:root[data-layout=phone] .tk-note,
:root[data-layout=phone] details.method,
:root[data-layout=phone] #provPanel,
:root[data-layout=phone] header #stamp,
:root[data-layout=phone] header .buildid{ display:none }
:root[data-layout=phone] .panel h2{ font-size:22px }
:root[data-layout=phone] .panel .note, :root[data-layout=phone] .sub, :root[data-layout=phone] .grouphdr span{ font-size:13.5px }
:root[data-layout=phone] .lpm td, :root[data-layout=phone] .lpm th{ font-size:14px; padding:12px 10px }
:root[data-layout=phone] .lpm th{ font-size:13px; letter-spacing:.12em }
:root[data-layout=phone] .lpm td .k{ font-size:12.5px }
:root[data-layout=phone] .grouphdr h3{ font-size:13.5px }
:root[data-layout=phone] .modeswitch button{ font-size:13.5px; padding:8px 12px }

/* fidelity fixes after the first render (2026-09-30) */
.grouphdr{ flex-wrap:wrap }
.grouphdr h3{ white-space:nowrap }
/* SKIN, not layout — peanut rule 2, "delete before shrinking": the board keeps token, price, 1d, pooled float
   and the 2% size; 1% / 5% and the priced-by column go, with the pooled-float subline. */
:root[data-theme=peanut] .board th:nth-child(5), :root[data-theme=peanut] .board td:nth-child(5),
:root[data-theme=peanut] .board th:nth-child(7), :root[data-theme=peanut] .board td:nth-child(7),
:root[data-theme=peanut] .board th:nth-child(8), :root[data-theme=peanut] .board td:nth-child(8),
:root[data-theme=peanut] .board td:nth-child(4) .k{ display:none }
/* what a number depends on for its meaning is never hidden: a stale snapshot says so on phones too */
:root[data-layout=phone] header #stamp.stale{ display:inline; flex-basis:100% }

/* ── TABS: market · wallet · more — the dashboard's #tabbar (lines 1821-1857) ── */
#tabbar{
  position:sticky; top:0; z-index:40;
  display:flex; gap:var(--sp-2); align-items:stretch;
  padding:var(--sp-2) var(--gutter);
  margin-bottom:var(--sp-3);
  background:color-mix(in srgb, var(--plane) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid color-mix(in srgb, var(--tok) 22%, var(--border));
  overflow-x:auto; scrollbar-width:none;
}
#tabbar::-webkit-scrollbar{ display:none }
#tabbar button{
  flex:0 0 auto; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:10px;
  padding:9px 14px; color:var(--ink-2);
  font-family:var(--gs-mono); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap;
}
#tabbar button:hover{ color:var(--ink); border-color:var(--border) }
#tabbar button[aria-selected=true]{ color:var(--ink); border-color:var(--border); background:var(--surface); font-weight:700 }
#tabbar button[aria-selected=true]::after{
  content:""; display:block; height:2px; margin:7px -14px -9px;
  background:linear-gradient(100deg, var(--tok), var(--tok-2)); border-radius:2px;
}
:root[data-layout=phone] #tabbar{ justify-content:space-between }
:root[data-layout=phone] #tabbar button{ flex:1 1 0; text-align:center; font-size:13.5px; padding:10px 8px }

/* ── the view switch: inline on a desk, behind a settings button on a phone ── */
.settings{ display:inline-block; position:relative }
.settings>summary{ list-style:none; display:none; cursor:pointer; font-family:var(--gs-mono); font-size:12px; letter-spacing:.06em }
.settings>summary::-webkit-details-marker{ display:none }
:root[data-layout=phone] .settings>summary{ display:inline-block }
:root[data-layout=phone] .settings[open]>.modeswitch{ position:absolute; right:0; top:calc(100% + 6px); z-index:50; background:var(--surface); box-shadow:0 10px 30px -12px rgba(0,0,0,.8) }
:root[data-layout=phone] .settings .modeswitch{ flex-direction:column }
:root[data-layout=phone] .settings .modeswitch button{ border-right:0; border-bottom:1px solid var(--border); text-align:left; padding:10px 14px }
:root[data-layout=phone] .settings .modeswitch button:last-child{ border-bottom:0 }

/* ── desk vs phone copy ── */
.phone-only{ display:none }
:root[data-layout=phone] .phone-only{ display:inline }
:root[data-layout=phone] .desk-only{ display:none }

/* ── the header stays compact on a phone ── */
:root[data-layout=phone] header{ align-items:center; gap:var(--sp-2) }
:root[data-layout=phone] header .tagline{ display:none }
:root[data-layout=phone] header .gs-mark{ width:26px; height:26px }

/* ── folds: on a phone every .fold panel opens collapsed behind its one-line summary ── */
.psum, .pexp{ display:none }
:root[data-layout=phone] .fold .phead{ cursor:pointer; margin-bottom:0; align-items:center; flex-wrap:nowrap; gap:var(--sp-2) }
:root[data-layout=phone] .fold .phead>h2{ flex:1 1 auto; min-width:0 }
:root[data-layout=phone] .fold .phead .spacer{ display:none }
:root[data-layout=phone] .fold .psum{ display:block; flex:1 1 100%; order:3; font-family:var(--gs-mono); font-size:12.5px; color:var(--muted); margin:6px 0 0 }
:root[data-layout=phone] .fold .phead{ flex-wrap:wrap }
:root[data-layout=phone] .fold .pexp{ display:inline-block; flex:0 0 auto; padding:5px 11px; font-size:12px; font-family:var(--gs-mono); letter-spacing:.06em; text-transform:uppercase }
:root[data-layout=phone] .fold:not([data-open]) .pbody{ display:none }
:root[data-layout=phone] .fold[data-open] .phead{ margin-bottom:var(--sp-3) }
:root[data-layout=phone] .fold[data-open] .psum{ display:none }
:root[data-layout=phone] .coming .pexp{ opacity:.8 }

/* ── cards: the phone's board and holdings (the dashboard's tile idiom, one per token) ── */
.tok-cards{ display:none }
:root[data-layout=phone] .tok-cards{ display:grid; grid-template-columns:1fr; gap:var(--sp-2) }
:root[data-layout=phone] #boardBody .lpm, :root[data-layout=phone] #walletBody .lpm{ display:none }
.tok-card{ border:1px solid var(--border); border-radius:14px; background:var(--plane); overflow:hidden }
.tok-card>summary{ list-style:none; cursor:pointer; padding:14px 16px; display:grid; gap:6px }
.tok-card>summary::-webkit-details-marker{ display:none }
.tok-card .tc-l1, .tok-card .tc-l2{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; min-width:0 }
.tok-card .tc-l1 .tabtok{ font-size:17px }
.tok-card .tc-l1 .px{ font-size:20px; font-weight:600; letter-spacing:-.01em }
.tok-card .tc-l2{ font-size:13px; color:var(--ink-2) }
.tok-card .tc-l2 .head{ color:var(--ink); font-weight:600; text-align:right }
.tok-card[open]>summary{ border-bottom:1px solid var(--grid) }
.tok-card .tc-body{ padding:6px 16px 14px; display:grid; gap:2px }
.tok-card .row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px solid var(--grid); font-size:14px }
.tok-card .row:last-child{ border-bottom:0 }
.tok-card .row .k{ font-family:var(--gs-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); flex:0 0 auto }
.tok-card .row .v{ text-align:right; min-width:0; overflow-wrap:anywhere }
.tok-card .row .sub2{ display:block; font-size:11.5px; color:var(--muted); letter-spacing:0; text-transform:none; font-family:var(--gs-mono); margin-top:2px }
.tok-card .tc-body .note{ margin:8px 0 4px; font-size:12.5px }

/* ── no sideways scroll anywhere on a phone ── */
:root[data-layout=phone] main{ overflow-x:clip }
:root[data-layout=phone] .panel{ overflow-x:clip }
:root[data-layout=phone] .tk-add input, :root[data-layout=phone] .tk-add select{ flex:1 1 100%; min-width:0; max-width:100% }
:root[data-layout=phone] .tk-add button.ghost{ flex:1 1 40% }
:root[data-layout=phone] .tk-basis, :root[data-layout=phone] .saved-list li{ overflow-wrap:anywhere }
:root[data-layout=phone] .tk-total .v{ font-size:34px }
:root[data-layout=phone] .tk-total{ gap:var(--sp-2) }
/* the peanut density rules earlier in this file hid the receipts; the folds keep them one tap away instead */
:root[data-layout=phone] .fold[data-open] .tk-basis, :root[data-layout=phone] .fold[data-open] details.method, :root[data-layout=phone] #boardPanel .tk-basis, :root[data-layout=phone] #boardPanel details.method{ display:block }
:root[data-layout=phone] #boardPanel .tk-basis{ font-size:12.5px }
:root[data-layout=phone] #provPanel{ display:block }
:root[data-layout=phone] .grouphdr{ margin-top:var(--sp-3) }
:root[data-layout=phone] main{ padding-bottom:var(--sp-5) }

/* ── MORE · PLS/USD reference (v1.1 panel 1) ── */
.pls-head{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--sp-2) var(--sp-4); margin-bottom:var(--sp-3) }
.pls-head .row{ display:grid; gap:2px; padding:0 }
.pls-head .row .k{ font-family:var(--gs-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.pls-head .row .v{ font-size:18px; font-weight:600 }
.pls-head .row .sub2{ display:block; font-size:11.5px; font-weight:400; color:var(--muted); font-family:var(--gs-mono); margin-top:2px; text-transform:none; letter-spacing:0 }
.spark-wrap{ margin:0 0 var(--sp-3) }
.spark{ display:block; width:100%; height:110px; color:var(--ink-2); border-bottom:1px solid var(--grid) }
.spark polyline{ fill:none; stroke:currentColor; stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linejoin:round }
.spark-wrap figcaption{ font-family:var(--gs-mono); font-size:10.5px; color:var(--muted); margin-top:4px }
.pls-rows{ display:none }
:root[data-layout=phone] .pls-head{ grid-template-columns:1fr; gap:0; margin-bottom:var(--sp-2) }
:root[data-layout=phone] .pls-head .row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px solid var(--grid) }
:root[data-layout=phone] .pls-head .row .v{ font-size:15px; text-align:right; min-width:0; overflow-wrap:anywhere }
:root[data-layout=phone] .pls-pools{ display:none }
:root[data-layout=phone] .pls-rows{ display:block; border:0; background:none }
:root[data-layout=phone] .pls-rows .tc-body{ padding:0 }

/* ── MORE · pool depth (v1.1 panel 3) ── */
.depth-cards{ display:grid; grid-template-columns:1fr; gap:var(--sp-2) }
.depth-card .tc-l1 .px{ font-size:15px; font-weight:600 }
.depth-inner{ padding:6px 16px 14px; overflow-x:auto }
.depth-rows{ display:none }
.depth-table td .k, .pls-pools td .k{ display:block; font-size:11px; color:var(--muted) }
/* token symbols are case-sensitive (pHEX is not PHEX): pool and pair labels keep their case */
.depth-rows .row > .k, .pls-rows .row > .k{ text-transform:none; letter-spacing:.04em }
/* .tok-card .tc-body sets display:grid at the same specificity, so the hide is scoped to the card and comes after it */
.depth-card .depth-rows{ display:none }
:root[data-layout=phone] .depth-card .depth-table{ display:none }
:root[data-layout=phone] .depth-card .depth-rows{ display:grid; padding:0 }
:root[data-layout=phone] .depth-inner{ padding:2px 16px 12px; overflow-x:clip }

/* ── MORE · v1.1 panels 4, 5, 6, 9 ── */
.fold-rows{ display:none }
:root[data-layout=phone] .supply-table, :root[data-layout=phone] .stakes-table, :root[data-layout=phone] .flows-table, :root[data-layout=phone] .chain-table, :root[data-layout=phone] .bridge-table{ display:none }
.bridge-table td .k{ display:block; font-size:11px; color:var(--muted) }
:root[data-layout=phone] .fold-rows{ display:block; border:0; background:none }
:root[data-layout=phone] .fold-rows .tc-body{ padding:0 }
.fold-rows .row > .k{ text-transform:none; letter-spacing:.04em }
.supply-table td .k, .flows-table td .k, .stakes-table td .k{ display:block; font-size:11px; color:var(--muted) }
.spark.bars rect{ fill:currentColor; opacity:.75 }
.stale-note{ border-left:3px solid var(--warn, currentColor); padding-left:10px; margin:0 0 var(--sp-2) }
.lead-note{ border-left:3px solid var(--muted, currentColor); padding-left:10px; margin:0 0 var(--sp-2); color:var(--ink) }

/* the tab logic hides other tabs with the hidden attribute; an author display rule must never beat it */
[hidden]{ display:none !important }
/* phone header: mark + wordmark, the settings gear at the right, the (stale) stamp on its own line */
:root[data-layout=phone] header{ flex-wrap:wrap }
:root[data-layout=phone] header .gs-lockup{ order:1 }
:root[data-layout=phone] header .spacer{ order:2; flex:1 }
:root[data-layout=phone] header .settings{ order:3; margin-left:auto }
:root[data-layout=phone] header #stamp{ order:4; flex:0 0 100%; margin-top:2px }
:root[data-layout=phone] .settings>summary{ border:1px solid var(--border); border-radius:7px; padding:5px 10px; color:var(--ink-2); background:none }
:root[data-layout=phone] .settings[open]>.modeswitch{ min-width:170px; border:1px solid var(--border); border-radius:10px; overflow:hidden }
/* v1.1 panel 2 · price history: six small cards on a desk; the phone layout shows the tok-cards instead */
.hist-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-2) }
.hist-card{ border:1px solid var(--border); border-radius:12px; background:var(--plane); padding:12px 14px; display:grid; gap:6px; min-width:0 }
.hist-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px }
.hist-ch{ display:flex; gap:12px; font-size:.86em }
.hist-card .spark{ width:100%; height:64px }
@media (max-width:1100px){ .hist-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
:root[data-layout=phone] .hist-grid{ display:none }
/* Ratios (director 2026-10-07, item 2): bridged eHEX per pHEX as the headline; each token in WPLS as secondary lines */
.ratio-lead{ margin:0 0 var(--sp-3) }
.ratio-chart .spark{ color:var(--tok); height:120px }
.ratio-h3{ font-family:var(--gs-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:var(--sp-4) 0 var(--sp-2) }
.ratio-lines{ display:block; width:100%; height:150px; border-bottom:1px solid var(--grid) }
.ratio-lines polyline{ fill:none; stroke:var(--tok); stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linejoin:round }
.ratio-lines line.zero{ stroke:var(--muted); stroke-dasharray:4 4; vector-effect:non-scaling-stroke; opacity:.6 }
.ratio-legend{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--sp-2); margin-top:var(--sp-2) }
.ratio-legend .rl{ border:1px solid var(--border); border-radius:10px; background:var(--plane); padding:8px 10px; display:grid; gap:4px; min-width:0 }
.ratio-legend .rl-top{ display:flex; align-items:baseline; justify-content:space-between; gap:6px }
.ratio-legend .rl-ch{ display:flex; gap:10px; font-size:.86em }
@media (max-width:1100px){ .ratio-legend{ grid-template-columns:repeat(3, minmax(0, 1fr)) } }
:root[data-layout=phone] .ratio-legend{ grid-template-columns:1fr; gap:0 }
.ratio-legend .num{ white-space:nowrap }
.psum .num{ white-space:nowrap }   /* a signed value never splits from its arrow in a fold's one-line summary */
:root[data-layout=phone] .ratio-legend .rl{ border:0; border-bottom:1px solid var(--grid); border-radius:0; background:none; padding:8px 0; display:grid; gap:2px }
:root[data-layout=phone] .ratio-legend .rl-ch{ gap:12px; justify-content:flex-end }
/* the ratio picker (operator 2026-10-07): numerator / denominator, swap, back to eHEX / pHEX */
.ratio-pick{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 var(--sp-3) }
.ratio-sel{ font:inherit; font-family:var(--gs-mono); font-size:14px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--plane); color:var(--ink); min-width:7.5em }
.ratio-div{ font-family:var(--gs-mono); color:var(--muted); font-size:18px }
.ratio-swap, .ratio-reset{ font-family:var(--gs-mono); font-size:12.5px; padding:6px 10px }
:root[data-layout=phone] .ratio-pick{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); gap:8px }
:root[data-layout=phone] .ratio-sel{ min-width:0; width:100% }
:root[data-layout=phone] .ratio-swap{ grid-column:1 }
:root[data-layout=phone] .ratio-reset{ grid-column:2 / 4 }
/* About page and footer (Chainfax rebrand, director 2026-10-11 19:50) */
.about .panel p,.about .panel li{font-size:14px;line-height:1.6;max-width:72ch;margin:0 0 var(--sp-2)}
.about .panel ul{margin:0;padding-left:1.2em}
.site-foot{padding:var(--sp-3) var(--gutter) var(--sp-5);color:var(--muted);font-size:12px}
.site-foot a{color:inherit}