/* BluBox v0 — styles.
   Measurements come from the signed-off mockup v1
   Ruled colors: #378ADD flat = home lens (#17), #2E7FB8 metallic = off-default (#32),
   rank border = homepage HERO fade at 14px doubled width (#21),
   cluster fade = suggestion-button transition (#36). */

:root{
  --card-blue:#378ADD;
  --card-steel:#2E7FB8;
  --gold:#ffdb01;
  --hero-fade:linear-gradient(to right,#ffdb01,#ff0f6f,#fe01fa);
  --rounded:"Arial Rounded MT Bold","Arial Rounded MT",ui-rounded,"SF Pro Rounded","Helvetica Neue",Arial,sans-serif;   /* the LOGO voice — the BluBox card, its pills, and the wordmark only (BossA 2026-08-02: "that font is the logo") */
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;   /* Path A 2026-08-02: the app's one UI voice — system sans, weight carries the hierarchy Arial Rounded used to */
  --times:"Times New Roman",Times,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sys:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* dark — the ruled default (#19) */
  --page:#0d1117; --surface:#151c28; --line:#243044; --ink:#e6edf5;
  --muted:#8ba2bd; --faint:#64788f; --btn:#161e2b; --btnline:#26324a;
  --chipbg:#1c2634; --chipline:#2b3850; --workbg:#0e1520; --rowline:#1f2a3c;
  --dot:#3a4a60; --doton:#cfdcea; --err:#ff5d5d; --good:#4cc26a; --shadow:rgba(0,0,0,.22);   /* Path A: .30→.22 — softer lift */
  --title:#d9a441;   /* #101: box titles wear bronze-amber — warm, and far enough from status-gold #ffdb01 */
  --burnt:#d9a441;   /* #277d (BossA: "Make the font Amber for Burnt column"): its OWN token, because Slate's --title is deliberately ink — amber must survive every theme */
  --daywait:#ffdb01; --dayok:#378ADD;   /* #68: Day gold until chain-confirmed, then Blu */
  --idle:#b3a558;   /* #460 (BossA, 08-25: "Idle could be grey yellow"): the LPX Idle word's own token — grey-yellow, themed so it reads on every paper */
}
html.light{
  /* #154/#155: face SETTLED at #e1e9f3.  Shared light tokens; the ledger-paper
     choice (#155: Green or Buff) sets the card/menu/button surfaces below. */
  --page:#e1e9f3; --ink:#17222f;
  --muted:#544f30; --faint:#655e34;   /* #155: darkened so "Show Work" + sub-text read on ledger paper */
  --dot:#b9c6d6; --doton:#31435a; --err:#c02929; --good:#2e8b47; --shadow:rgba(23,34,47,.12);   /* Path A: .18→.12 */
  --title:#6f4d16;   /* #101 light: DEEPER bronze (BossA: darker for light mode only) */
  --burnt:#6f4d16;   /* #277d: same deep bronze on ledger paper — the amber hex would wash out */
  --daywait:#9a7b00; --dayok:#2E7FB8;   /* #68 light: readable gold-wait; steel Blu */
  --idle:#8a7414;   /* #460: deep khaki — the grey-yellow that survives ledger paper */
}
html.light.paper-buff{   /* #155: Ledger Buff (workbg/rowline deepened so Show Work + token rows read clearly) */
  --surface:#f1e6ac; --line:#b0a052; --btn:#f7f0c6; --btnline:#b0a052;
  --chipbg:#ecdf9e; --chipline:#b0a052; --workbg:#e6d894; --rowline:#cdbd72;
}
html.light.paper-green{   /* #155: Ledger Green (rowline deepened for clearer token rows) */
  --surface:#d3e6bf; --line:#7ba05e; --btn:#e0efd0; --btnline:#7ba05e;
  --chipbg:#c9dfad; --chipline:#7ba05e; --workbg:#c2dba8; --rowline:#a8c688;
}
html.dark-screen{   /* #158b (BossA): the WOW dark — a phosphor accounting terminal.
     Near-black green page, pale-green ink, bright phosphor title + lit dots. */
  --page:#060d08; --surface:#0c1710; --line:#244a2e; --ink:#d6ebd8;
  --muted:#78ad82; --faint:#5a8a64; --btn:#0e1c13; --btnline:#26472f;
  --chipbg:#122419; --chipline:#26472f; --workbg:#08130c; --rowline:#183020;
  --dot:#2c5236; --doton:#74e08c; --err:#ff6b6b; --good:#5bd47f; --shadow:rgba(0,0,0,.5);
  --title:#5bd47f;   /* phosphor-green box titles — the terminal glow */
  --idle:#cbc06a;   /* #460: warm khaki against the phosphor greens */
}
html.dark-slate{   /* Path B (BossA, 2026-08-03): the modern-minimal sixth theme — neutral
     near-black, hairline lines, ink titles, ONE accent (the Blu).  No terminal
     tint, no ledger paper: the quiet room the numbers speak in. */
  --page:#09090b; --surface:#131316; --line:#26262b; --ink:#e9e9ec;
  --muted:#9a9aa3; --faint:#6e6e78; --btn:#151519; --btnline:#2a2a30;
  --chipbg:#1b1b20; --chipline:#303038; --workbg:#0e0e11; --rowline:#202025;
  --dot:#3a3a42; --doton:#d6d6dc; --err:#ff6b6b; --good:#4cc26a; --shadow:rgba(0,0,0,.45);
  --title:#e9e9ec;   /* ink titles — the accent stays in the interactive chrome */
  --daywait:#d9a441; --dayok:#5ea2e8;
}
html.dark-blue{   /* #158d (BossA): the blue twin of the green-screen — the white ink
     goes soft LIGHT-BLUE the same way green-screen turns it light-green. Navy terminal. */
  --page:#070d18; --surface:#0f1a2e; --line:#26426e; --ink:#d0e4fb;
  --muted:#84a4cc; --faint:#6484ac; --btn:#101d33; --btnline:#294870;
  --chipbg:#152740; --chipline:#294870; --workbg:#0a1424; --rowline:#182c48;
  --dot:#2e4a72; --doton:#78b6ef; --err:#ff6b6b; --good:#4cc26a; --shadow:rgba(0,0,0,.5);
  --title:#68b0f2;   /* sky-blue box titles — the blue glow */
}
/* #155: theme swatches in the Settings row — each wears its theme's title color */
.thopt{display:inline-block;padding:2px 5px;border-radius:8px;font-size:12.5px;font-weight:600;
  margin:0 1px;cursor:pointer;border:1.5px solid transparent;vertical-align:middle}   /* BossA 2026-08-03: sides 9→5, margin 2→1 — five swatches (Slate joined) ran 37px past the phone row; this buys 50 so the ✓ fits on any label */
.thopt.th-slate,.thopt.th-screen,.thopt.th-blue{padding:2px 7px;border-color:var(--line)}   /* BossA 2026-08-03: the DARK swatches run wider AND wear a visible edge — their near-black fills vanished into Slate's panel, so Green and Blue read as bare words, "cards removed" (the .thon ink ring still outranks this on the active pick) */
.thopt.th-green,.thopt.th-buff{padding:2px 4px}   /* …and the light papers, short words in bright pills, run a little thinner */
.thopt.th-dark{background:#151c28;color:#d9a441}
.thopt.th-screen{background:#0c1710;color:#5bd47f}   /* #158b: phosphor-green terminal swatch */
.thopt.th-blue{background:#0f1a2e;color:#68b0f2}   /* #158d: blue-screen swatch */
.thopt.th-slate{background:#131316;color:#e9e9ec}   /* Path B: the Slate swatch — neutral ink on neutral dark */
.thopt.th-green{background:#d3e6bf;color:#6f4d16}
.thopt.th-buff{background:#f1e6ac;color:#6f4d16}
.thopt.thon{border-color:var(--ink);font-weight:800}
html.light #setVault{color:#9a6b00}   /* #155: Vault line — readable dark gold on light paper (bright gold vanishes) */
html.light .menu-about{color:#3f3a20}   /* #155: darker bottom explanatory text on light paper */
/* #161 (BossA, 2026-07-24): active/pressed button states need DARK, saturated accents on
   the light papers — the dark-theme brights (gold #ffdb01, light-blue #cfe4fa, card-blue
   as text) wash out on cream/paper (measured 1.0–2.9:1). These restore ≥4.5:1. */
html.light .timerlock.on{background:rgba(150,105,0,.16);border-color:rgba(150,105,0,.6);color:#6e4f00}
html.light .charttoggle.active{background:rgba(55,138,221,.16);border-color:#4d7cbb;color:#164a88}
html.light .pxseg button.on{background:rgba(55,138,221,.18);color:#164a88}
html.light .row.sel .row-name{color:#164a88}
html.light .hd-token.srt,html.light .hd-token.srt .sortcaret{color:#164a88}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--page);color:var(--ink);font-family:var(--sys);
  -webkit-font-smoothing:antialiased;transition:background .25s ease,color .25s ease}
button{font:inherit;color:inherit}

#app{max-width:430px;margin:0 auto;padding:12px 16px 30px}
/* #154: on desktop/localhost the 430px column floats as loose cards on a wide
   page — frame it like a phone screen. Real phones (narrow) get NO frame: the
   app fills the actual screen. */
@media (min-width:481px){
  body{background:#000}   /* #154: black desk behind the phone so the frame pops */
  #app{position:relative;background:var(--page);
    width:min(430px, calc(100vw - 56px));   /* the whole frame always fits — no clipped borders */
    border:12px solid #0a0a0a;              /* the phone body / bezel */
    border-radius:54px;
    box-shadow:0 0 0 1px rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.04), 0 26px 70px rgba(0,0,0,.65);  /* rim + glass edge + lift */
    margin:24px auto;
    padding-top:42px;padding-bottom:28px}   /* status-bar strip for the island + home-bar room */
  #app::before{                             /* Dynamic Island + camera cutout on the right */
    content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:112px;height:29px;border-radius:16px;z-index:60;
    background:radial-gradient(circle at 82% 50%, #16283a 0 2.4px, #060a12 2.8px 4.8px, #000 5.2px), #000;
    box-shadow:0 0 0 1px rgba(255,255,255,.05)}
  #app::after{                              /* iOS-style home indicator */
    content:"";position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
    width:120px;height:5px;border-radius:3px;background:var(--muted);opacity:.5}
}
/* #159 (BossA, 2026-07-23): the DESKTOP display. At true desktop widths the
   phone frame gives way to a wider 900px panel that uses the empty desk. The
   iPhone chrome (Dynamic Island, home indicator) retires; the canvas widens
   for the columns / large-chart work to come. Content is still single-column
   here — this is the room, not yet the layout. */
@media (min-width:960px){
  #app{width:900px;max-width:900px;border-radius:32px;padding-top:28px}
  #app::before,#app::after{display:none}
  /* #159 (BossA, 2026-07-23): the desktop ledger gains a DETAILS column —
     TOKEN | DETAILS | QTY. | PRICE. Line 1 of a row's detail shows in it; a click
     stacks the rest (rows 2,3,4…) directly beneath, left-justified, same column. */
  #app .row-head,#app .row-line.bal{grid-template-columns:172px minmax(0,1fr) 56px 88px;grid-template-rows:auto;align-items:start}   /* #166: minmax(0,…) so a long detail line can't shove Qty/Price off-screen */
  #app .hd-details{display:block;text-align:left}
  /* every cell places explicitly so the mobile stake double-row doesn't leak in */
  #app .row-line.bal .row-name{grid-column:1;grid-row:1}
  #app .row-line.bal .row-detail{grid-column:2;grid-row:1;display:block;justify-self:start;min-width:0;
    font-family:var(--sys);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;   /* BossA 2026-08-28: "Make the text larger" — 12 -> 13 */
    white-space:normal;overflow-wrap:anywhere;line-height:1.5}   /* #166: wrap long lines inside the column instead of pushing the grid wider */
  #app .row-line.bal .row-amt{grid-column:3;grid-row:1;justify-self:end;align-self:start}
  #app .row-line.bal .row-right{grid-column:4;grid-row:1;justify-self:end;align-self:start}
  /* BossA 2026-08-28 ("make the rest of the row bottom justified, in line with
     the LP label"): a PAIR row's name stacks — marks over text (#463) — which
     left the details/qty/price floating at the top beside the marks.  On a
     CLOSED row every other cell seats to the bottom line, where the label is;
     an OPEN row keeps the top anchor so the fold grows down without dragging
     the value cells with it. */
  #app .row:not(.open) .row-line.bal .row-detail{align-self:end}
  #app .row:not(.open) .row-line.bal .row-amt{align-self:end}
  #app .row:not(.open) .row-line.bal .row-right{align-self:end}
  #app .row-detail .rd-one{display:block}
  #app .row-detail .rd-rest{display:none}
  /* #192: the desk's Token Prices grid.  It MUST carry #app — the Balances rule
     above is id-qualified, so a plain .pxhead class loses to it and the card
     would silently wear a four-column track list with two columns empty.
     (That exact specificity trap collapsed the LPX card's grid in #189.) */
  #app .row-head.pxhead,#app .row-line.px{grid-template-columns:minmax(172px,1fr) 72px 110px 130px;grid-template-rows:auto;align-items:baseline}   /* #277: + the Burnt column (60px seated the 0.0₅24% grammar at 13px — measured 53px).  #368: the figure grew to 15.5px, so the track grows by the same ratio, 60 -> 72; the flexible name column gives the width, and 900px is fixed here so nothing else moves. */
  /* #188c (BossA): "make the T-Share font match the token font."  On a stake row
     the Details cell is row DATA now — part of the line the eye reads across —
     not the 12px system footnote every other row keeps there.  It wears the
     token face, size and ink, so name and T-Shares read as one line. */
  #app .row.stake .row-detail, #app .row.stake .row-detail .rd-one{
    font-family:var(--ui);font-size:15.5px;color:var(--ink);line-height:normal}   /* BossA 2026-08-30 ("the row is not on the same level"): the inherited 1.5 line-height put ~4px of leading UNDER this cell's baseline — bottom-seated (the 08-28 ruling) that rode its text above the name's and the value's; normal leading seats all four cells' baselines within a pixel */
  #app .row.open .row-detail .rd-rest{display:block;margin-top:2px}   /* the click stacks the list beneath line 1 */
  #app .rd-rest .dl{padding-left:20px;text-indent:-20px}   /* #166 (BossA): hanging indent — a wrapped line tucks under, the field indents (.wl-sub) stay put */
  /* desktop: where the column ALREADY carries the breakdown (sample mode's
     .hasdetail rows), the box is redundant and folds away.  #184 (BossA): a REAL
     row's Details cell holds only the wallet name — its derivation still needs
     the box, so an unqualified rule here was swallowing every real-mode Show
     Work on the desk (the "HSI dropdown does not open" report). */
  /* #188c (BossA): …and a STAKE row no longer carries it either — its cell now
     states the T-Shares and the derivation went back to the fold, so the box
     must show.  Same failure mode as the #184 bug above, one class narrower. */
  #app .row.hasdetail.open:not(.stake) .work{display:none}
  .entry.wide{max-width:600px}   /* #184 (BossA): "that line might have to be wider" — Watched Addresses gets the desk's room so Preset · Hide · Delete fit beside the address */
}

/* 2026-08-30 (lever one): the storm line — a quiet strip in flow under the
   header (never floating, never covering content; the bottom-right corner
   belongs to Suggest).  Weather-red family at whisper strength; ink text. */
.stormline{margin:0 2px 10px;padding:7px 12px;border-radius:10px;font-size:12.5px;color:var(--ink);
  background:color-mix(in srgb, var(--err) 12%, transparent);border:1px solid color-mix(in srgb, var(--err) 30%, transparent)}
.stormline[hidden]{display:none}

/* ---------- corner buttons: page-header furniture, not card elements (#31) ---------- */
/* #411 (BossA, from his Home-Screen copy: "the top is behind the time camera
   hole and signal battery graphics"): opened from the Home Screen, BluBox runs
   STANDALONE — viewport-fit=cover + the black-translucent status bar mean the
   page extends under the clock, the island and the battery, and nothing padded
   the top to answer for it.  env(safe-area-inset-top) is that exact height, and
   it is 0 in an ordinary Safari tab (the browser's own chrome already holds
   that ground), so this changes NOTHING outside the Home-Screen app.
   The padding rides ON the sticky apphead, not the body: a body padding would
   scroll away and the stuck header would slide back under the clock.  Every
   consumer of the header's height (yTop, --colstick, the seal) measures
   offsetHeight at runtime, so they follow this without being touched. */
.apphead{position:sticky;top:0;z-index:25;background:var(--page);display:flex;justify-content:space-between;align-items:center;padding:calc(6px + env(safe-area-inset-top, 0px)) 2px 14px}   /* #138 (BossA): with the BluBox unsticky (#137), the menu row keeps the post */
/* #307b: the seal under the apphead — masks rows scrolling through the air
   below the menu row.  z-5 is the whole design: docked boxes (16–19) ride OVER
   it so no card top is ever painted out (the Balances-era band's failure);
   plain rows pass UNDER it.  Seated/sized by layoutSticky(). */
.apphead-seal{position:sticky;z-index:5;background:var(--page);pointer-events:none}
/* #306: the Added-by-You reorder grip — a visible handle (no invisible
   controls); touch-action:none HERE ALONE, so a finger on the grip drags the
   row while a finger anywhere else still scrolls the page */
.wgrip{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  color:var(--faint);font-size:15px;line-height:1;padding:4px 9px 4px 2px;margin-left:-2px}
.wgrip:active{cursor:grabbing}
/* #316's eye and its 08-29 wallet twin RETIRED the same night (BossA: "too
   much noise … Make it hover text in large font") — held/watched now speak
   through data-tip on the row NAME; no mark elements remain */
/* #318: The Walk — the early-HTT chart row under the board */
.walk-sect{margin-top:10px}
/* #348: the convergence legend — one swatch-and-name per HTT series, the
   ladder's order (red = nearest maturity), wearing walkColor's exact hue */
.walk-legend{display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px 6px 2px;font-family:var(--sys);font-size:12.5px;color:var(--ink)}
.wl-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.wl-item b{width:9px;height:9px;border-radius:50%;flex:none}
.walk-sect .row-line{cursor:pointer}
.walk-name{line-height:1.22}
/* #323 (BossA: "The Long Walk: (wrap)1 HTT to 1 HEX … Use The Walk row as the
   guide"): a walk fence is not a price row — it carries no burn and no percent,
   so it drops those tracks and spends the width on the title.  Measured: at the
   shared four-track grid the name cell was 66px on a 360px phone and BOTH
   titles broke into four and five lines.  Two tracks, and the range rides under
   the title as its own quiet line. */
#app .row-line.px.walk-line{grid-template-columns:minmax(124px,1fr) auto}
/* #403c (BossA: "Make HTT-2460 thru HTT-3000 no color INK"): the range reads in
   plain ink, not the muted grey it wore — the same call he made on the TOKENS
   and PRICE heads (#401).  One rule, so the phone's short form ("2460 → 3000")
   is the same ink: colour carries no width risk, which is the only reason that
   text ever splits phone from desk. */
.walk-tag{display:block;font-family:var(--sys);font-size:12px;font-weight:400;color:var(--ink);margin-top:3px;white-space:nowrap}
/* #403: the phone keeps #323's stack — title, the wrap line, then the range */
.walk-name .wk-t,.walk-name .wk-s{display:block}
/* #403 (BossA: "On the desktop, remove the wrap and display like this:
   The Walk:   1 HTT to 1 HEX   HTT-2400 > HTT-3000"): the desk lays the three
   parts on ONE line.  baseline, not center — the range runs smaller than the
   title and centering would float it off the words' own line. */
@media (min-width:960px){
  #app .row-name.walk-name{display:flex;align-items:baseline;gap:14px;white-space:nowrap}
  #app .walk-name .wk-t,#app .walk-name .wk-s{display:inline}
  #app .walk-name .walk-tag{display:inline;margin-top:0}
}
.walk-fold svg{display:block;width:100%}
.walk-fold .bc-line{margin-bottom:10px}
.row.wdragging,.walk-sect.wdragging{outline:1.5px dashed var(--card-blue);outline-offset:-1px;opacity:.93;position:relative;z-index:3}   /* #318e: the seated Walk fence drags too */
.cornerbtn{width:40px;height:40px;border-radius:12px;background:var(--btn);border:1px solid var(--btnline);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.cornerbtn svg{display:block}
/* 2026-08-10 (BossA): btnMenu IS the blu box — brand blue in every theme (it is
   the brand, not chrome), Blu in the logo voice sized to fill the 40px card.
   The box's own corner ratio (rx 18 of 64) lands at the cornerbtn's 12 of 40. */
#btnMenu{background:#378ADD;border-color:#378ADD;color:#fff;font-family:var(--rounded);font-size:19px;font-weight:700;line-height:1;padding:0}
#btnMenu:hover{background:#2f7cc9;border-color:#2f7cc9}
/* #411b: the Blu menu and the Settings panel both hang from this, absolutely
   seated inside the padded .apphead — left at 50px they would open OVER the
   buttons that summon them, which now sit an inset lower. */
.dropdown{position:absolute;top:calc(50px + env(safe-area-inset-top, 0px));z-index:30;min-width:252px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 2px 6px var(--shadow),0 10px 28px var(--shadow);display:none;
  max-height:calc(100vh - 70px);overflow-y:auto;overscroll-behavior:contain}   /* #76 audit: the menu scrolls inside itself — before, its bottom was reachable only when the page behind happened to be taller */
.dropdown.openmenu{display:block}
#menuPanel{left:0}
#settingsPanel{right:0}
.menu-cap{font-size:11px;color:var(--faint);padding:4px 11px 7px}
/* #274: the trust row's responsive labels — the short forms existed because
   THREE cards shared one line on the phone column.  2026-08-10 (BossA): Learn
   Security made it a 2x2, two cards per row fit the FULL words at every width
   (measured down to 320px, icons kept), so the phone swap is retired.  The
   .tl-s spans stay in the markup, parked, in case a fifth card ever crowds
   a row again. */
.tl-s{display:none}
.menu-item{font-family:var(--ui);font-size:13.5px;color:var(--ink);padding:10px 11px;border-radius:8px;
  border-top:1px solid var(--rowline);cursor:pointer;width:100%;text-align:left;background:none;border-left:none;border-right:none;border-bottom:none;display:block}
.menu-item:first-of-type{border-top:none}
a.menu-item{text-decoration:none}   /* #342: the Pages rows are true anchors — new tab, right-click, copy-link all behave */
.menu-item .offapp{margin-left:7px;font-size:11px;color:var(--muted)}   /* the ↗ that says "opens its own page" */
.menu-item:hover{background:var(--chipbg)}
/* .menu-item.current retired 2026-08-10 — the navigator menu OMITS the current lens/view instead of outlining it */
.menu-item .def{color:var(--muted);font-size:11.5px;font-family:var(--sys)}
.menu-item.danger{color:var(--err)}
/* BossA 07-25: the Vault row wears its state — name blue, On green, Off red, action muted */
.bv-name{color:var(--card-blue);font-weight:700}
.bv-on{color:var(--good);font-weight:700}
.bv-off{color:var(--err);font-weight:700}
.bv-act{color:var(--muted)}
.menu-item.danger.armed{color:#fff;background:var(--err)}
.menu-row{display:flex;gap:8px;margin:4px 0}
.menu-item.half{flex:1;border:1px solid var(--line);border-radius:12px;text-align:left;background:none}   /* BossA 07-29: every card wears the Theme fence's border — one line color across the panel */
.menu-item.half:hover{background:var(--chipbg)}
.menu-ico{display:inline-block;vertical-align:-3px;margin-left:4px;color:var(--muted)}   /* BossA 07-29: the printer says "Print" better than three dots did */
/* BossA 07-29: on ledger paper (Sage and Buff) the PulseChain card goes black —
   the same black the Ranking card wears, and the fade reads its best on it.
   Ethereum keeps the paper.  Light-only: the dark themes are already near-black. */
html.light .menu-item.half.chain-pls{background:#000;border-color:#000;color:#e6edf5}
html.light .menu-item.half.chain-pls:hover{background:#141414}
html.light .menu-item.half.chain-pls .def{color:#9fb2c7}   /* the muted olive would vanish on black */
.menu-about{font-size:11px;color:var(--faint);line-height:1.55;padding:9px 11px 5px;border-top:1px solid var(--rowline);margin-top:4px}

/* ---------- The Card (#17, #32, #39) ---------- */
.card{position:relative;z-index:20;border-radius:24px;padding:17px 22px 10px;color:#fff;font-family:var(--rounded);   /* BossA 2026-08-02: 5px shorter top to bottom — 20/12 → 17/10 */
  box-shadow:0 1px 2px var(--shadow),0 8px 24px var(--shadow);margin-bottom:14px;outline:none;touch-action:pinch-zoom}   /* 2026-08-10 (BossA's demo disaster): pinch-zoom ALLOWED — touch-action:none was silently blocking the two-finger spread; single-finger stays with the JS lens swipe */   /* Path A: layered soft lift — a tight contact shadow + a wide low one, not one heavy throw */   /* #137 (BossA, re-rules #49): the BluBox scrolls up WITH the Hex Fade — transaction readers want the space; the middle box (Restore, range, chart) keeps the sticky post */
.card.flat{background:var(--card-blue)}          /* home lens — FLAT, no sheen */
.card.metal{background:
    linear-gradient(155deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 30%,
                    rgba(7,20,34,.20) 58%, rgba(255,255,255,.10) 84%, rgba(4,12,22,.14) 100%),
    var(--card-steel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.18), 0 1px 2px var(--shadow), 0 8px 24px var(--shadow)}
.card-title{font-size:15px;opacity:.95;letter-spacing:.01em;text-align:center}
#yieldTitle .tkmark{vertical-align:-4px;margin-right:7px}   /* BossA 2026-08-29 ("Include the logo"): the face's token mark leads the Value card's title */
/* #182: the Included Addresses lens — the card grows a row per address */
#cardAddrs{display:flex;flex-direction:column;gap:8px;margin:46px auto 6px;width:100%;max-width:400px;padding:0 4px}
#cardAddrs .ca-scroll{display:flex;flex-direction:column;gap:8px;max-height:212px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.45) transparent}   /* BossA 2026-08-29 ("Since the arrows are locked... the BluBox can be longer... focus on ease of gaining information"): EIGHT whole rows before any scroll (8×19.5 + 7×8 = 212) — length is free now, information first */   /* BossA 2026-08-29 ("25 wallets?"): the ADDRESS rows scroll in their own window — the Total below it is ALWAYS whole, never clipped */
/* BossA 2026-08-29 ("I didn't realize there were scroll sideways and up down.
   People need to know these things"): his own no-invisible-controls law
   applied to SCROLL — macOS hides overlay scrollbars until touched, so a
   scrollable region looked like a wall.  Custom thumbs render ALWAYS. */
#cardAddrs .ca-scroll{scrollbar-width:none}
#cardAddrs .ca-scroll::-webkit-scrollbar{display:none}
#cardAddrs .ca-scroll.is-scrollable{scrollbar-width:thin}
#cardAddrs:has(.ca-scroll.is-scrollable){padding-right:6px}   /* BossA 2026-08-29 ("Have the Total Number right justify with the numbers above it"): the scrollbar lane insets the WHOLE list — rows and Total keep ONE shared right edge in both states */
#cardAddrs .ca-scroll.is-scrollable::-webkit-scrollbar{display:block;width:8px}
#cardAddrs .ca-scroll.is-scrollable::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:4px}
#cardAddrs .ca-scroll.is-scrollable::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:4px}
/* BossA 2026-08-29 ("you don't look at your work?"): the track painted even
   with NOTHING to scroll — a bare gutter over the value column.  The visible
   scrollbar now exists ONLY when the list actually overflows (the
   is-scrollable class, toggled at render by measurement). */
#cardAddrs .ca-scroll.ca-all{max-height:none}   /* the Show All Addresses door — the card grows downward, the pinned arrows never move */   /* BossA 2026-08-29 ("stay half size" then his clipped-row "fail"): the window fits 3 two-line rows + the one-line Total (measured 35px/row) — his 3 addresses + Total show complete, a bigger wallet scrolls on clean row edges, and no row is ever sliced mid-glyph; the old 46px pill clearance fell with the centered pill */
/* BossA 2026-08-29 late: "These 2 cards need to be shorter.  They are
   wasting a lot of space."  The one-height 240 (81px chrome + the 3-row
   address window) made every SHORT face carry the tall face's dead air —
   so the floor drops to the chrome + one breath, and each face sets its
   own height.  His standing laws hold it together: the arrows are PINNED
   top-right (motion under the cursor stays impossible), and the address
   face still takes all the room its rows need — length is free,
   information over compactness.  Show Work still opens downward. */
#card{min-height:150px}
@media print{ #card{min-height:0} }
#cardAddrs .ca-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:17px;color:#fff}   /* BossA 07-25: bigger text and numbers */
#cardAddrs .ca-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#cardAddrs .ca-usd{flex:0 0 auto}
#cardAddrs .ca-usd sup{font-size:11px}
/* #188m (BossA): "make $ superscript in all fields."  One class, sized in em so it
   rides whatever text it lands in — fold bullets, row values, the Price line.
   #188o (BossA): "the Superscript is above the number line… it looks really
   strange."  It was, and there is a reason the eye rejects it: a RAISED small
   figure means CENTS ($12⁹⁹), so a raised $ reads as a typesetting error.
   Financial setting CAP-ALIGNS the mark instead — same vertical band as the
   digits, just smaller, so it stops looking like a numeral without floating.
   The offset is MEASURED, not guessed: canvas actualBoundingBoxAscent for "1" at
   1em minus "$" at .62em gives 0.21–0.22em, and it holds across both faces and
   every size in the app (rounded 15.5/34px, system 12.5px).  The old .38em was
   nearly double that — hence the float.
   TWO traps, both measured rather than reasoned about:
   1. <sup> carries a browser default of `vertical-align:super`, which was being
      ADDED to the offset — the mark rode the super lift PLUS .38em.  Reset to
      baseline first, then apply the raise.
   2. `top` in em resolves against the element's OWN font-size, not the parent's,
      so the number here is not the parent-em figure.
   And a third, caught by BossA's eye rather than by a metric: aligning the INK
   TOPS is the wrong target.  The $ glyph runs above cap height AND below the
   baseline, so top-of-ink alignment reads as vertically CENTRED on the digits —
   BossA, seeing it: "the $ is top aligned in the BluBox card, all other locations
   it is center aligned."  The Card had been right since #77.  So the law is now
   the CARD's own numbers, applied everywhere: .55em, raised .45em of its own em.
   One appearance, already signed off, in every field. */
sup.cur{font-size:.55em;line-height:0;vertical-align:baseline;position:relative;top:-.45em;
  margin-right:1px;font-weight:inherit}
#cardAddrs .ca-un{opacity:.7;font-size:14px}
#cardAddrs .ca-tot{border-top:1px solid rgba(255,255,255,.28);padding-top:7px;margin-top:1px;font-weight:600}   /* #184 (BossA): the rows are checkable — the Total closes the list */
.card-value{font-size:38px;line-height:1.08;margin-top:6px;text-align:center}   /* #77, then 2px smaller (BossA, 07-19) */
.card-value .cur{font-size:.55em;position:relative;top:-.45em;margin-right:1px}   /* the $ rides superscript */
/* #90: the lens rail — one pill on the RIGHT holding arrow, dots, arrow */
.lensrail{position:absolute;right:10px;top:12px;display:flex;flex-direction:column;   /* BossA 2026-08-29 ("the buttons move… users cannot click through without moving the mouse"): the pill anchors to the TOP corner, not the center — a face may change the card's height, the buttons never walk out from under the cursor */
  align-items:center;gap:2px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  border-radius:12px;padding:2px}   /* #132: the pill shrinks — the arrows keep their length */
.card .lensrail .cbtn{width:18px;height:26px;background:none;border:0;color:#fff}   /* #133 (BossA): the pill runs SHORTER — still a fatter press than the original 22px */
  /* #94 (BossA): match the legend card — the pill is the card, the arrows are bare glyphs like the dots */
.lensdots{display:flex;flex-direction:column;gap:4px;background:none;border:0;padding:0 4px;cursor:pointer}   /* #133: tighter legend; #209 (BossA): dots spread a little — the pill runs longer */
.lensdots b{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.30)}
.lensdots b.on{background:#fff}
/* #110 (BossA, re-rules #92): mobile navigates by swipe, so every rail arrow goes on
   touch — the pill legends (lens dots + the window pill) stay as the position marker.
   The flip cluster + pane arrows already hide via .cluster{display:none} below. */
@media (hover:none) and (pointer:coarse){.lensrail .cbtn{display:none}}   /* #36: gestures rule on touch.  #328: the .pricerail half of this rule died with the rail — the range arrows now ride the chip in the head, where they are the phone's only VISIBLE way back a range (the chip alone steps forward), so they deliberately stay on touch */
@media (hover:none) and (pointer:coarse){.card .lensrail{padding:9px 2px}}   /* #210c (BossA): "make the pill legend a little taller" — the phone pill holds only the dots, so it ran short; 2→9px caps stretch it */
.card-foot{margin-top:8px;text-align:center}

.fitline{display:block;white-space:nowrap;overflow:hidden}   /* auto-shrink law (#37) */
.workaff{font-size:11px;letter-spacing:.02em;opacity:.6;background:none;border:none;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:3px;padding:8px 12px;margin:-8px -12px}   /* #155: underlined text-link — no leading triangle (it never indicated state).  BossA 2026-08-29 ("The click path needs to be checked"): the link was a 61×13px target on desktop and every near-miss FLIPPED the card — the invisible hit halo (the #449f pattern: padding out, margin back in, seat unmoved) now rides every pointer, not just coarse ones */
.box .workaff{color:var(--faint);opacity:1}
.workaff-row{text-align:center}
/* #210h (BossA): the Ranking face's Show Work link retired — the work lives on
   the 4th face (#183's door and its #195d wrap rules went with it) */
#rankSources{background:rgba(255,255,255,.05)}   /* #209: the 4th face's pane — the #183 fold's colors carry over */
#rankSources, #rankSources li{color:#d9cfa3}
.rank-src-h{font-family:var(--ui);font-weight:700;color:var(--gold);font-size:13px;letter-spacing:.05em;margin:10px 0 4px}   /* #209: each face's header over its own bullets */
#rankSources .rank-src-h:first-child{margin-top:2px}

/* ---------- Rank box (#21): black + gold by ruling, in BOTH themes ---------- */
/* #127 (BossA, re-ruled): the Fade Card wears its own dot legend IN the right
   border — bare dots, no pill chrome, the full 14px band on all four sides;
   the lit dot is the face showing, a tap returns Home (the Ranking). */
.rankwrap{position:relative;z-index:1;border-radius:24px;padding:10px 14px 10px 10px;background:var(--hero-fade);margin-bottom:14px}   /* Path A (BossA, 2026-08-02): the Hex Fade BAND returns at 10px — 14px on the right, the dots' lane */
/* #334 (BossA, 2026-08-14): "make the BluBox half page width and the Hex Fade half
   page width and place side by side."  DESKTOP ONLY — on the 900px desk each card
   gets ~427px, the app's native phone width, so every face was already designed
   for the room it lands in.  align-items:stretch marries their heights; each
   card's own flex centering fills whichever is the shorter.  gap is 0 14px —
   the cards' own 14px bottom margins already space a wrapped line, so a row-gap
   would double it.  Phones never see this: below 960px .blurow is an unstyled
   div and the cards stack as they always have. */
@media (min-width:960px){
  .blurow{display:flex;flex-wrap:wrap;gap:0 14px;align-items:stretch}
  .blurow>.card{flex:0 0 calc(50% - 7px);min-width:0;display:flex;flex-direction:column;justify-content:center}   /* an EXPLICIT half: flex:1 1 0 measured 448/382 in WebKit — the engine would not split the row evenly, so the basis states the halves outright (each 50% minus its share of the 14px gap) */
  /* BossA 2026-08-29 ("it's width not height"): the ca-on full-row widening is
     RETIRED — cycling onto Included Addresses used to DOUBLE the card's width,
     leap the right-anchored arrow pill across the screen and wrap the fade
     card below.  The card now holds ONE width on every face; the whole
     42-char address fits the half card at a smaller mono size (below) —
     #188's essence (all 42 characters visible) survives, the jump does not. */
  .blurow>.rankwrap{flex:0 0 calc(50% - 7px);min-width:0;display:flex;flex-direction:column;
    z-index:6}   /* #307b's ladder: the seal masks passing rows at z-5, docked boxes ride 16–19, the BluBox card 20.  Stacked, the fade lived BELOW the seal's band and its z-1 never mattered; beside the card it sits IN the band, so it steps one rung over the seal — still under everything docked */
  .blurow>.rankwrap .rank{flex:1}   /* the black box fills the band when the BluBox is the taller — .rank's own align-items:center seats the text mid-card */
  /* #358: the desk needs NO wrap now — BossA's "100,082 Stakers" is short
     enough to sit on one line where "of N Staker Wallets" never could (it had
     been clipped 27px past its box since #334, at fitAll's 8px floor).  The
     desk keeps its own nowrap; the newline in the string collapses to a space
     here and breaks only on the phone, exactly as he ruled. */
}
/* #357 (BossA, 2026-08-15): the pair goes side by side BELOW the desk too —
   his rulings, mocked and approved one at a time: keep the Hide button and its
   text, smaller fonts, the blue Forward math horizontal along the bottom, the
   HEX logo at the left middle, Hide in the lower corner as just "Hide", Show
   Work as just "Work", and BOTH pill legends in the bottom-right margin at one
   size.  Keyed at 959 because the app column is the same ~430px everywhere
   below the desk (#195d: key on the desk, not the viewport), so a narrow
   desktop window gets the same honest layout a phone does.
   Measured at 375 and 430: zero overflow, no sideways scroll, and the pair
   stands 159px/147px tall against 390 stacked. */
@media (max-width:959px){
  .blurow{display:flex;gap:0 10px;align-items:stretch}
  .blurow>.card,.blurow>.rankwrap{flex:0 0 calc(50% - 5px);min-width:0}
  /* #359 (BossA, from the live phone): ONE top buffer for both cards — his
     "make the top margin buffer the same in the BluBox".  Measured before the
     change: BluBox 9px, Hex Fade 24px.  The variable is the single source, so
     the two can never drift apart again. */
  .blurow{--sbs-top:24px;--sbs-logo:clamp(34px, 9.8vw, 42px)}   /* #361: ONE size shared by the Hide square and the Hex logo — his "bottom left matches the Hide button", so they cannot drift apart */
  /* ONE legend voice: VERTICAL in the bottom-right margin — his ruling, and
     his reason: "Swipes are vertical", so the dots must read the way the
     gesture moves. */
  .blurow .lensrail{position:absolute;right:6px;bottom:6px;top:auto;left:auto;transform:none;
    flex-direction:column;padding:5px 3px;gap:3px}
  .blurow .lensdots{flex-direction:column;gap:3px;padding:0}
  .blurow .lensdots b{width:5px;height:5px}
  /* BluBox: the ruled top buffer, Hide a rounded SQUARE in the corner, Work centred */
  .blurow>.card{padding:var(--sbs-top) 8px 8px;display:flex;flex-direction:column;justify-content:flex-start}
  .blurow>.card .bbclose{left:7px;bottom:7px;top:auto;transform:none;
    width:var(--sbs-logo);height:var(--sbs-logo);
    padding:0;border-radius:11px;align-items:center;justify-content:center}   /* #360 (BossA): "make the Hide Text and box larger" — and DYNAMIC like everything else in this pair, so it grows with the screen instead of snapping */
  .blurow>.card .bbclose .seg{font-size:clamp(9.5px, 2.9vw, 12px);min-height:0;padding:0;border-radius:0}   /* #360: the word grows with its box */
  .blurow>.card .bbclose .seg + .seg{display:none;margin:0}   /* "BluBox" stands down — the corner says just Hide */
  .blurow .card-title{font-size:10px;line-height:1.2}
  .blurow .card-value{font-size:26px;line-height:1.1;margin-top:5px}
  .blurow .card-foot{margin-top:auto;text-align:center;padding:0 46px}   /* centred between the Hide square and the legend, both of which are absolute; the padding stays SYMMETRIC so "centred" keeps meaning the card's own centre, and it clears the #360 square at its widest */
  .blurow .card-foot .workaff{font-size:9.5px}
  .blurow .card-foot .workaff .wa-show{display:none}   /* just "Work" in the crowded corner (BossA) */
  /* Hex Fade: the same top buffer, the title at the BluBox's own size, and every
     other line LARGER but dynamic — bigger on a big phone, easing down on a
     small one (his "larger and dynamic smaller for smaller screens"). */
  .blurow>.rankwrap{padding:7px;z-index:6;display:flex;flex-direction:column}
  .blurow>.rankwrap .rank{flex:1;position:relative;padding:calc(var(--sbs-top) - 8px) 5px calc(var(--sbs-logo) * 0.88 + 8px);gap:0;align-items:flex-start;flex-wrap:nowrap}   /* #361: the foot RESERVES the logo's strip — the text block simply ends above it, so no line can reach the logo whatever the rank numbers grow to (they are data, and data changes width) */   /* #359: flex-START so the text begins at the padding — centring made the buffer float with the content height (measured 27 vs the BluBox's 24) */
  /* #361 (BossA: "The Hex fade text seem bumped from the logo.  Can the Hex logo
     use the gap in the fade text paragraph?").  It can, and it should: the logo
     was a flex SIBLING, so every pixel it grew was a pixel stolen from the text
     column — measured, that squeezed the delta line 3px past its box at 320.
     It floats now.  The text spans the WHOLE card and centres itself, which
     leaves a natural margin either side, and the logo sits in the left one at
     the card's own middle.  Nothing is bumped, and the text got its width back. */
  /* #361 (BossA: "Bottom left matches the Hide button").  The middle gap is
     only as wide as the delta line leaves it — 18px at 320, measured per LINE
     against real glyph positions — so a big logo cannot live there.  The
     bottom-left strip can: it is clear ink-to-ink, and it puts the logo in the
     Hex Fade's corner exactly where Hide sits in the BluBox's, so the pair
     reads as a pair.  Same clamp as that square, for the same reason. */
  .blurow .rank .phex{position:absolute;left:4px;bottom:4px;top:auto;transform:none;
    width:var(--sbs-logo);flex:none;z-index:1}   /* the Hide square's OWN size, exactly — the reserved strip above makes the match safe */
  .blurow .rank-text{flex:1 1 100%;min-width:0}
  .blurow .rank-title{font-size:10px;line-height:1.2;white-space:normal;transform:none !important}   /* #359: the BluBox title's own size, exactly — and its own WRAP: .fitline's #37 nowrap law was shrinking this to 8px to hold one line, so matching the size means matching the wrap (the BluBox title wraps to two lines at 10px too) */
  .blurow .rank-cols{flex-direction:column;align-items:stretch;gap:2px;margin-top:4px}
  .blurow .rank-col{align-items:center;flex:none !important;margin:0 !important;padding:0 !important}
  .blurow .rank-value{font-size:clamp(20px, 6.9vw, 30px);line-height:1.05;text-align:center;transform:none !important}
  .blurow .rank-sub{font-size:clamp(8px, 2.5vw, 10px);text-align:center;white-space:pre-line;margin-top:2px;line-height:1.25}
  .blurow .rank-col-r{margin-top:3px}
  .blurow .rank-delta{display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:4px;
    font-size:clamp(12px, 3.7vw, 17px);line-height:1.1}
  .blurow .rank-was{display:inline;font-size:clamp(9px, 2.7vw, 12px)}
  .blurow .rank-dir{display:inline;font-size:clamp(8.5px, 2.6vw, 11.5px)}
}
/* #336 (BossA): "make the dots on the right side of the HEX fade match the
   BluBox Pill legend in style and function."  The band's bare dots became the
   card's own .lensrail pill — same frame, arrows, white dots — seated at the
   same right:10px the BluBox wears, riding OVER the black box's edge.  The old
   .rankdots band-lane block died here; the dots button keeps the class so the
   dormant veil, print rules and the slate override still find it. */
.rankrail{z-index:2}   /* over the box edge it straddles; under nothing that matters */
.rankrail .cbtn{width:18px;height:26px;background:none;border:0;color:#fff}   /* the card pill's own arrow grammar (#133) */
@media (hover:none) and (pointer:coarse){.rankrail{padding:9px 2px}}   /* #210c's taller phone pill, matched — dots-only there, like the card */
.rank{background:#000;border-radius:12px;display:flex;align-items:center;gap:12px;padding:14px 22px 14px 14px;cursor:pointer;outline:none}   /* Path A: gap 15→12, sides 16→14 — the captions buy back the room the system font spends; radius 12 nests inside the 24px wrap minus its 13.5px band */   /* #336: right side 14→22 — the rail rides over the box edge now, and the right column's ink steps clear of it */
.rank .phex{width:46px;height:auto;flex:none}
/* #97: the logo waves at newcomers — never tapped, or 30 days quiet */
.phex.beckon{animation:beckon 2.8s ease-in-out infinite;transform-origin:50% 55%}
@keyframes beckon{0%,100%{transform:scale(1) rotate(0deg)}12%{transform:scale(1.08) rotate(-4deg)}24%{transform:scale(1.08) rotate(3deg)}36%{transform:scale(1) rotate(0deg)}}
@media (prefers-reduced-motion:reduce){.phex.beckon{animation:none}}
.rank-text{min-width:0;flex:1}
.rank-title{font-family:var(--ui);font-weight:700;color:var(--gold);font-size:14.5px;letter-spacing:.05em;text-align:center}   /* first-level tracking (#51); BossA 07-25: centered logo-edge to fade-edge, matching the alternate faces */
/* two columns (#51): rank over "of N Stakers" left, delta over its window right;
   each column right-aligns so number and caption share a flush right edge */
.rank-cols{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-top:9px}   /* air above the numbers */
.rank-col{display:flex;flex-direction:column;align-items:flex-end;min-width:0}
.rank-col-l{flex:1.4}
.rank-col-r{flex:1}
@media (min-width:410px){.rank-col-r{margin-right:16px}}   /* inset mirrors the logo's border gap where width allows (#51) */
@media (min-width:410px){.rank.egg .rank-col-r{margin-right:8px}}   /* #195d (BossA: the Liquid face's "30-day change could move right"): the alternate faces sat 8px further left than the Ranking face — measured 58px vs 50px from the fade edge.  Halving the #51 inset on .egg (the class both alternate faces wear) squares all three faces on one right edge. */
.rank-value{display:block;font-family:var(--ui);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--gold);font-size:36px;line-height:1.12;text-align:right;width:100%}
.rank-delta{display:block;font-family:var(--ui);font-weight:900;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--gold);font-size:36px;line-height:1.12;text-align:right;width:100%}   /* emphatically bold (Path A: the Times text-stroke retired — weight 900 carries it alone) */
.rank-dir{display:block;font-size:13.5px;font-weight:800;letter-spacing:.03em;line-height:1.25}   /* #328b (BossA): the direction is a WORD above the number — "Back" or "Forward", his exact casing — because a sign can be read backwards and a word cannot; wears the delta's own gold */
.rank-was{display:block;font-size:15px;font-weight:800;line-height:1.3}   /* #328d (BossA's stack, top line): the rank it was — read downward the column is a sentence: #5,618 · Forward · 14 */
.rank-was sup{font-size:.55em}
.rank-sub{font-family:var(--ui);font-weight:600;color:var(--gold);opacity:.82;font-size:12px;margin-top:8px;text-align:right;white-space:nowrap;letter-spacing:.02em;width:100%;min-width:0}   /* Path A: width:100% makes the caption's box the COLUMN's box — before this, the box grew with the text, fitAll saw no overflow, and the two captions could collide mid-card (Times was narrow enough to hide it) */   /* air below the numbers */
.rank-value sup,.rank-delta sup{font-size:.55em}   /* superscript # and +/- */
.rank-sub .sep-dot{font-size:.95em;line-height:0}   /* the enlarged separator dot (true bullet; 'dot' belongs to the pane pips) */
.rank .phex#rankLogo{cursor:pointer}
.rank.egg{cursor:pointer}
.rank-title.eggt{cursor:pointer;text-align:center;text-decoration:underline;text-decoration-thickness:.5px;text-underline-offset:3px;text-decoration-color:rgba(255,219,1,.35)}   /* centered logo-edge to fade-edge (ruled 07-15) */
.rank.egg .rank-col-l{padding-right:14px}   /* the supply column slides left a little (ruled 07-15) */
.rank.egg .rank-text{transform:translateX(-8px)}   /* whole text block bumps left so the side gaps read even (ruled 07-15) */
.rank-chartwrap{margin-top:9px}
.rank-chartwrap svg{width:100%;height:auto;display:block}
/* Timer Lock (#83; #98: two lines, riding the pane rail below the arrows) */
.timerlock{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;font-weight:700;
  line-height:1.15;color:var(--muted);background:var(--chipbg);border:1px solid var(--chipline);
  border-radius:8px;padding:5px 8px;cursor:pointer}
.timerlock .tl2{display:flex;align-items:center;gap:4px}
.timerlock .tl-clock{display:none}   /* #373: the clock is the PHONE's word for "All Timers" — the desk card keeps the words themselves */
.timerlock.on{background:rgba(255,219,1,.13);border-color:rgba(255,219,1,.45);color:#ffdb01}
.pane-stick .timerlock{position:absolute;top:0;right:0}   /* #100/#104: LEFT of the pill, same top line; #209: 104→160 — the enlarged letter cards need the room */
@media (hover:none) and (pointer:coarse){.pane-stick .timerlock{right:0}}   /* phone: the arrows hide, the lock holds the corner */

/* ---------- generic box ---------- */
.box{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:15px 18px;margin-bottom:14px;outline:none}
.box-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.box-title{font-family:var(--ui);font-size:15px;color:var(--ink);color:var(--title);min-width:0;flex:1}   /* #132: long face names shrink, never shove the chips */
.head-right{display:flex;align-items:center;gap:8px;flex:none;position:relative;z-index:1}   /* #328, a defect found while moving the arrows here (it predates them, 07-25): alignYieldTitle centers the title over its value line with a transform, and a transform promotes that element above its non-positioned siblings — so the title's TRANSPARENT box (flex:1, far wider than its glyphs) painted over these controls and swallowed their taps.  The glyphs were always clamped 8px clear, so nothing looked wrong; the range chip simply did not answer on the desk.  Controls outrank a label: this z-index puts them back on top. */
.chip{white-space:nowrap;font-size:11px;font-weight:700;color:var(--muted);background:var(--chipbg);border:1px solid var(--chipline);
  border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums}   /* bold time field (#48) */
#yieldChip{width:84px;height:28px;border-radius:8px;padding:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center}   /* #209 (BossA): the date-range button and the chart button share ONE size and shape.  #271: 70→84 — "Pulse-Origin" renders 73px of text and overflowed the 70px seat; both buttons widen together, the one-size law holds */
/* #337: the .charttoggle chart button RETIRED — the box body is the flip now
   (its 84×28 one-size law with #yieldChip lives on in the chip alone) */

#yield{touch-action:pan-y pinch-zoom;position:sticky;z-index:19}   /* #337: pan-y JOINS pinch — a finger landing on this box could not scroll the page at all (the old pinch-zoom-only ate the vertical pan for the retired V-flip); vertical drags belong to the scroll now, the H window-step stays JS */   /* docks below the Card; top set by layoutSticky() (#49) */
/* #158e (BossA): seals the sticky seam — a page-colored band under the stuck Value
   card so token rows can't flash in the gap above the Token Balances header.
   #188v (BossA, 2026-07-26) RE-RULES ITS SIZE: at 13px the band filled almost the
   whole 14px gap, and BossA, watching the ledger scroll: "the black strip blocked
   transactions from showing as they scroll up in the blank space."  Same band,
   opposite verdict — it was hiding rows that should still be readable, not just
   the flash it was built for.  4px is enough to cover the seam itself and gives
   the other 10px back to the rows. */
#yield::after{content:"";position:absolute;left:0;right:0;top:100%;height:4px;background:var(--page)}
.yield-line{font-family:var(--ui);font-size:27px;color:var(--ink);margin:9px 0 3px;text-align:center}
.scope{font-size:12px;color:var(--muted);margin-bottom:7px;text-align:center;white-space:pre-line}   /* #133: two-line scope texts */
.chartwrap{margin:10px 0 4px}
.chartwrap svg{width:100%;height:auto;display:block}
.chart-total{font-family:var(--ui);font-size:16px;color:var(--ink);margin-top:6px;text-align:center}

/* ---------- pane rows ---------- */
#pane{touch-action:pan-y pinch-zoom}   /* 2026-08-10: pan-y alone was also refusing the pinch */
.row{border-top:1px solid var(--rowline)}
.row:first-of-type{border-top:none}
.row-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;cursor:pointer}
.row-name{font-family:var(--ui);font-size:15.5px;color:var(--ink);min-width:0}   /* #155: +1px */
/* #463 (BossA: "place the logos above the token title row"): a PAIR row's
   name STACKS — the marks (and the phone's verdict letter) take the first
   line, the pair text the second WHOLE and nowrap.  The 172px Token cell
   fits every pair that exists today ("HTT-8000 ⇆ HTT-7000" = 170px, 2px to
   spare); at 19+ characters .rn-tight steps the text down one size so a
   future five-digit series shrinks rather than wraps — no intermittency, by
   construction.  Single-token rows never carry these classes. */
.row-name .rn-marks{display:inline-flex;align-items:center}
.row-name .rn-pair{display:block;white-space:nowrap}
.row-name .rn-pair.rn-tight{font-size:14px}
/* #270: the token mark — 18px display from an 80px source (3x-retina headroom),
   circled the way every wallet and DEX presents these, baseline-tucked so the
   row's line height never moves.  Rows without a mark simply have no img. */
.tkmark{width:18px;height:18px;border-radius:50%;vertical-align:-3.5px;margin-right:7px}
.row-amt{font-size:13px;color:var(--muted);margin-left:7px;font-family:var(--sys);font-variant-numeric:tabular-nums}   /* #155: +1px */
.row-right{flex:none;display:flex;align-items:baseline}
.row-usd{font-family:var(--ui);font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}   /* #155: +1px; #195d (BossA): "Price will be small for all tokens" — 17px steps down to the Qty column's own 13px, so the row reads as one quiet line */
.chev{font-size:11px;color:var(--faint);margin-left:9px}
.tx-date{font-family:var(--mono);font-size:15.5px;color:var(--faint);margin-right:8px;display:inline-block;width:50px;box-sizing:content-box}   /* #169l (BossA): row date matches the Transaction name size; #169m fixed-width column so the Transaction label lines up over the names in BOTH header and rows regardless of the date's font size */
.tx-head .tx-date{font-size:11px}   /* the column heading keeps its small uppercase label size — the fixed width holds the alignment */
.tx-date.tx-date-full{font-size:11.5px;width:78px}   /* #199b (dormant since #199c): a >5-char date gets the wider cell */
.txleg-step{font-weight:700}   /* #199c: the ‹ Newer / Older › pagers — chips like the months, no tint */
.row.sel .row-line{background:linear-gradient(to right,transparent,rgba(55,138,221,.10) 12%,rgba(55,138,221,.10) 88%,transparent);
  border-radius:8px}
.row.sel .row-name{color:var(--card-blue)}     /* tap-to-select highlight (#35) */
/* #156: columnar Token Balances — Token left, Qty + Price right, one shared 14px
   left gutter so every column stays straight; LP rows flag with a ledger tab in
   that gutter (color flips with the theme). Qty column locked to the 0.09/999M max. */
.row-line.bal{display:grid;grid-template-columns:minmax(0,1fr) max-content max-content;column-gap:14px;padding:10px 6px 10px 14px}   /* #195d (BossA: "Qty needs to move right closer to the Price") — the name takes the slack; Qty sits against the Price column instead of stranded mid-row */
.row-line.bal .row-name{text-align:left}
.row-line.bal .row-amt{margin-left:0;text-align:right;justify-self:end}
.row-line.bal .row-right{justify-self:end}
.row-head{display:grid;grid-template-columns:minmax(0,1fr) max-content max-content;column-gap:14px;padding:2px 6px 6px 14px;margin-top:-5px;
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--faint);border-bottom:1.5px solid var(--line)}   /* #164 (BossA): bold column labels + the sort caret (inherits) */
.row-head span{text-align:right}
.row-head span:first-child{text-align:left}
/* #159 (BossA): the Token header is a sort toggle — click to sort A→Z, click again to return */
.row-head .hd-token{cursor:pointer;display:inline-flex;align-items:center;gap:5px;user-select:none}
.row-head .hd-token .sortcaret{font-size:9px;letter-spacing:0;color:var(--faint)}
.row-head .hd-token.srt,.row-head .hd-token.srt .sortcaret{color:var(--card-blue)}
.row-head.balhead .hd-token{margin-left:24px}   /* BossA 08-29: "Token is over the grab bar, move it left justified with the left side of the logos" — the numbered grip is a fixed 26px lane (17px min-width + 2/9 padding − 2 margin, measured 249→275); the header's first label steps past it to the logos' shared left edge.  Balances headers only (.balhead) — the Prices/LP heads keep their own seats */
/* #192 (BossA): the Token Prices card — Token left, the 24-hour change and the
   price right.  Its own track list, not the Balances one: this card has no
   Details and no Qty, so borrowing that grid would leave two empty columns and
   strand the price short of the right edge every other card shares. */
.row-head.pxhead,.row-line.px{display:grid;grid-template-columns:minmax(66px,2fr) 60px 78px minmax(62px,1fr);column-gap:6px;align-items:baseline}   /* #374 (BossA, reading the shipped card: "we removed a digit from the change %.  There looks like the Burnt % can slide right a little") — he was right, and MEASURED: with #371's one decimal the change ink runs 51-72px on EIGHT of the nine windows, leaving 28-39px of dead space between Burnt and the figure.  The track was really sized for the ninth — ATL's 6-digit percent at 94.2px.  So the track drops 90 -> 78 (the worst normal window, 71.6 + its 6px padding) and the ATL percent alone gives way below; the freed 12px falls to the NAME column, which is the flexible one. */   /* #370: with the phone list's price a digit shorter (fmtPriceCell), the change and price floors give 4px and 2px back and the gap goes 7 -> 6 — width the NAME column takes, which is the whole point: PRVX, uPX and eHEX* stopped wrapping under their logos.  Measured, config by config: shortening the figure alone changed NOTHING, because a narrower ink cannot shrink a track that is already sitting on its floor. */   /* #368/#368b: ONLY the Burnt track moves, 44 -> 60px — the name floor (66), the change track (94) and the price floor (64) are exactly as #277/#278c measured them, because shrinking the name floor to 60 made PLSX, PRVX, HDRN and ACTR all wrap under their logos (seen, not computed).  The room the bigger bold figure needs comes from #278d's decorative padding instead, below. */   /* #368/#368b: the Burnt track 44 -> 60px and the change track 94 -> 87, a NET ZERO trade — at 375 the name column already sits on its 66px floor, so a wider Burnt column had to be paid for, not just asked for.  MEASURED at 15.5px bold: the widest form fmtBurntPct can build is the subscript one ("0.0₄7%") at 57.4px — the 8-glyph "0.0₅24%" in #277's note is not reachable, the formatter emits ONE digit after the subscript.  The change track keeps 28px of right padding inside it, so −4.70% bold (58px + 28) still seats in 87.  A grid item wider than its track does not report as page overflow; it silently overprints its neighbour, which is how PRVX came to read "PRVX0.0₄7%" — measure the BOX against the track, never the page. */   /* #368: the Burnt track 44 -> 53px.  MEASURED, not guessed: at #368's 15.5px the widest sample figure ("0.0₄7%") inks 52px, and a 44px track let the cell's box overflow LEFT past its own gap — PRVX read "PRVX0.0₄7%" with the name touching the figure on his screen.  A grid item wider than its track does not report as overflow; only the picture shows it. */   /* #278c (BossA: "Everything has room … The column slid to the right"): a fixed price track pooled ALL spare width into the name column, sliding Burnt + change right until the percents hugged the prices.  The price track flexes now — prices stay right-aligned, so its extra width becomes AIR between change and price, split 2:1 with the name on wide phones (an even split re-wrapped PRVX at 390 by half a pixel — WebKit type runs a touch wider than Chrome, measured) */   /* #278b (BossA: "Burnt and Price look elevated"): the phone header never had the desk's baseline rule, so the plain-span heads (BURNT, PRICE) sat at the stretched cell's top while TOKEN and the chip cluster self-centered — baseline seats all four on one line */   /* #210u: the third column holds the range steppers — its 98px floor is the ‹ 24h › chip cluster (two 29px chips + label + gaps), never squeeze it below that.  #277/#277c: the Burnt column seats between name and change (44px holds 0.0₅2%); every other track gave ground (name min 96→60, change 100→94, gaps 12→7) so no width ever scrolls sideways — measured, not assumed.  #277e: the price track rides at 64px because the 2-zero rounding rule makes every sub-dollar price the same handful of glyphs.  On a 390px phone every single-word name holds one line; at 375 the four burn tokens wrap under their marks — the fence's padding leaves no more to give.  The pair rows (HEX ⇆ eHEX, eHEX (bridged)) wrap at any phone width; accepted deliberately */
/* #210u (BossA): the range steppers — LONG chips, easy hotspots, flanking the label */
.hd-chg.chgwin{display:flex;align-items:center;justify-content:flex-end;gap:4px;text-transform:none}
.chgstep{background:var(--chipbg);border:1px solid var(--chipline);border-radius:8px;color:var(--muted);
  font-size:17px;font-weight:700;line-height:1;padding:3px 10px;cursor:pointer;font-family:var(--ui)}   /* #212 (BossA): the range arrows read LARGER — 13→17px glyph, the horizontal padding 9→10px.  Then "a little shorter, keep the width": the VERTICAL padding alone came back 5→3px, so the chip stands 25px instead of 29 and its 29px width is untouched. */
.chg-lab{min-width:28px;text-align:center;cursor:default;font-size:11px;font-weight:700;color:var(--faint)}
.row-line.px{padding:10px 6px 10px 14px;align-items:baseline}
.row-line.px .row-name{text-align:left}
.row-line.px .px-chg,.row-line.px .px-px{justify-self:end;text-align:right;font-variant-numeric:tabular-nums}
/* #277b: the Burnt column's own tip — native title bubbles cannot be sized, so
   this one is drawn by the app at half again the native type (BossA: "make the
   hover text 50% larger").  pre-line keeps the header + bullet grammar. */
.hover-tip{position:fixed;display:none;z-index:60;max-width:480px;white-space:pre-line;overflow-wrap:anywhere;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;font-family:var(--sys);font-size:18px;line-height:1.45;
  box-shadow:0 8px 24px var(--shadow);pointer-events:none}
/* #277: the Burnt cell — data weight without the change column's bold voice.
   #277d (BossA: "Make the font Amber"): it wears var(--title), the box-title
   amber — theme-aware like every other amber in the app, never the raw hex. */
.row-line.px .px-burnt{justify-self:end;text-align:right;font-variant-numeric:tabular-nums;font-family:var(--sys);font-size:15.5px;font-weight:700;color:var(--burnt)}   /* #368b (BossA: "Make the % Burnt font bold") — the same 700 the change column and the yield figure already wear, so all three read at one weight */   /* #368 (BossA: "Make the Burnt font the same size as the % and price font"): 13 -> 15.5, the same figure #367 gave the change and the price — the three columns are one line of facts and now read as one */
.bcap{display:none}   /* #368: the card's caption — the LIST has a column head to name this cell, so it stays silent here */
.row-line.px .px-burnt.px-apr{color:var(--good);font-weight:700}   /* #321: a liquid-staking token's measured yield — green bold, BossA's ink */
.row-head.pxhead .hd-note{grid-column:2 / -1}   /* #277: the seam stamps span the trailing columns instead of squeezing into the 40px Burnt track */
.row-line.px .px-px{font-family:var(--ui);font-size:15.5px;color:var(--ink)}   /* the price reads like a row value, because it is one */
/* the INK is the sign — a gain and a loss are equal citizens (#189f), same
   weight and size, only the colour differs.  Both wear the theme's own good/err,
   so all four themes stay legible instead of one hard-coded green. */
.row-line.px .px-chg{font-family:var(--sys);font-size:15.5px;font-weight:700;padding-right:6px}   /* #368c: on the PHONE #278d's 28px centering padding drops to 8.  MEASURED at 375: the widest change ink is now 81.7px (+174.01% on the 30-day window), which leaves 66px of room inside a 94px track carrying 28px of padding — the figure overprinted the Burnt column beside it.  The padding is decoration (it centred the value under the ‹24h› chip); a collision is a defect, so the decoration is what yields.  The DESK keeps all 28px — measured 20.6px of spare room there. */   /* #367 (BossA, 2026-08-17: "make the % change the same size as the price font"): 13 -> 15.5, the .px-px size directly below.  The two figures are one statement — what it costs and which way it moved — so they read at one size.  The ATL cell's day-count and low (.atl-d/.atl-v, 10.5px) are NOT the change and keep their own size. */   /* #278d (BossA: "The % right margin needs a little space to still right align, but more in the center of the <24h>"): the values stay a right-aligned column, their right edge tucked in from the track edge to sit under the ‹24h› cluster's middle — the header itself never moved.  28px clears the › chip; the widest realistic percent still seats inside the track */
@media (min-width:960px){ #app .row-line.px .px-chg{padding-right:28px} }   /* #368c: #278d's centering padding survives where there is room for it */
.row-line.px .px-chg.px-atl{padding-right:0}   /* #278d: the ATL cell's three figures need the full track — it keeps the edge */
/* .row-head gives the Token label a pointer because it SORTS on the Balances
   card.  This card has no sort, and a pointer promising a control that isn't
   there is the same lie as a control you can't see. */
.row-head.pxhead .hd-token{cursor:default}
/* #192c: an HTT's ratio to HEX, shown as a percent of a HEX.  It sits in the
   PRICE column but is not a price, and the row already carries a percentage in
   the 24H column — so it stays PLAIN ink at the row's own weight while the
   change beside it is bold and coloured.  Weight and colour are what keep a
   LEVEL from being read as a CHANGE. */
.row-line.px .px-ratio{font-weight:400}
.px-up{color:var(--good)}
.px-down{color:var(--err)}
.px-none{color:var(--faint);font-weight:400}
/* #159 (BossA): the ledger-tab bar now marks every row that OPENS to a breakdown —
   LPs AND stakes (never a single-line token). It's the "there's more here" cue. */
.row.expandable{position:relative}
.row.expandable::before{content:"";position:absolute;left:2px;top:3px;bottom:3px;width:5px;border-radius:3px;background:var(--card-blue);z-index:1}
html.light.paper-buff .row.expandable::before{background:#6a9a4e}   /* buff theme → green tab */
html.light.paper-green .row.expandable::before{background:#b0902f}   /* green theme → gold tab */
html.dark-screen .row.expandable::before{background:#e0a83a}   /* #158b: phosphor terminal → amber tab, the contrast note */
html.dark-blue .row.expandable::before{background:#e0a83a}   /* #158d: blue terminal → amber tab too, the warm contrast */
/* #156: stakes are the reason BluBox exists — their long names ("HSI Portable
   Stakes", "Native HEX Stakes") don't fit a token column, so they get a DOUBLE
   ROW: full-width name on top, T-shares left + value right aligned below. */
.row.stake .row-line.bal{grid-template-columns:minmax(0,1fr) max-content max-content;grid-template-rows:auto auto;row-gap:2px}
.row.stake .row-name{grid-column:1 / -1;grid-row:1}
.row.stake .row-amt{grid-column:2;grid-row:2;justify-self:end;text-align:right;margin-left:0}   /* #159: stake QTY = count, in the QTY column */
.row.stake .row-right{grid-column:3;grid-row:2;justify-self:end;align-self:end}
/* #159 (BossA): the DETAILS column header hides on the phone (the ledger stays 3-col there) */
.hd-details{display:none}
/* #151 LAW (BossA, 2026-07-22): Show Work is prose a human reads to trust a number —
   bullets, system sans 12.5px, FULL INK. Never mono, never muted, never 11px. */
.work{font-family:var(--sys);font-size:12.5px;line-height:1.65;color:var(--ink);background:var(--workbg);
  border-left:3px solid var(--card-blue);border-radius:6px;padding:8px 11px;margin:2px 0 10px;display:none}
.row.open .work{display:block}
/* BossA 2026-08-28 ("Make this easier to read and understand quickly"): the
   stake folds' per-stake arithmetic sits in a TABLE now — #50's law holds
   (system sans 12.5px, full ink), the tags ride once as column heads, numbers
   share right edges, hairlines part the rows.  Wider than a phone it scrolls
   inside its own box; the page never moves sideways (the site's standing rule). */
.work li.wk-raw-li{list-style:none;margin-left:-14px}
.work .wk-tblwrap{overflow-x:auto;margin:4px 0 6px;scrollbar-width:thin;scrollbar-color:rgba(139,162,189,.55) transparent}   /* BossA 2026-08-29: sideways scroll must SHOW (no-invisible-controls) */
.work .wk-tblwrap::-webkit-scrollbar{height:8px}
.work .wk-tblwrap::-webkit-scrollbar-thumb{background:rgba(139,162,189,.5);border-radius:4px}
.work .wk-tblwrap::-webkit-scrollbar-track{background:rgba(139,162,189,.12);border-radius:4px}
.work .wk-tbl{border-collapse:collapse;font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.work .wk-tbl th{font-weight:600;text-align:right;padding:2px 9px;border-bottom:1px solid var(--btnline)}
.work .wk-tbl td{text-align:right;padding:3px 9px;border-bottom:1px solid var(--btnline)}
.work .wk-tbl th.l,.work .wk-tbl td.l{text-align:left}
.work .wk-tbl th:first-child,.work .wk-tbl td:first-child{padding-left:0}
.work .wk-tbl .wk-b{font-weight:700}
.work .wk-tbl .wk-note{color:var(--muted);font-size:11.5px}
.work .wk-tbl .wk-sub td{font-size:11.5px;color:var(--muted);padding:1px 9px 5px;text-align:left}
/* BossA 2026-08-30 ("Make the font larger for all fields… We have more space"):
   the A card's changes table runs 14px with a touch more cell air — a modifier,
   so the stake folds' shared 12.5px wk-tbl dress (#50's law) is untouched. */
.work .wk-tbl.actu-tbl{font-size:14px}
.work .wk-tbl.actu-tbl th{padding:3px 11px}
.work .wk-tbl.actu-tbl td{padding:4px 11px}
.work .wk-tbl.actu-tbl .wk-note{font-size:12.5px}   /* the muted notes scale with the 14px table */
.work .wk-tbl.actu-tbl .up{color:var(--good)}   /* BossA 2026-08-30: the Change column wears the sign — the same up/down pair the price badges speak */
.work .wk-tbl.actu-tbl .down{color:var(--err)}
/* BossA 2026-08-30 ("do it", closing #2): the changes block's heading is a
   real head — ink, bold (the header-color law) — and the footnotes are small
   muted notes; neither wears a bullet any more. */
.work .actu-chg-head{color:var(--ink);font-weight:700;font-size:14px;margin-bottom:2px}
.work .actu-chg-foot{color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:2px}
/* #533 (BossA: "2 charts: Farm and Vault", then "Put the farm chart over the
   Farm rows and the Vaults chart over the Vault rows"): each kind's panel
   runs full width directly above its own rows; lines and labels wear the
   up/down pair by where they end */
.work .actu-flow{width:100%;height:auto;display:block;margin:6px 0 2px}
.work .actu-flow .ac-title{fill:var(--ink);font:700 11.5px var(--sys)}
.work .actu-flow .ac-zero{stroke:var(--line);stroke-dasharray:3 3}
.work .actu-flow .ac-up{stroke:var(--good);fill:none;stroke-width:1.5;opacity:.85}
.work .actu-flow .ac-dn{stroke:var(--err);fill:none;stroke-width:1.5;opacity:.85}
.work .actu-flow .ac-lab{font:600 12.5px var(--sys)}   /* BossA 2026-08-30: "Make the HTT-xxxx larger" on the chart lines */
.work .actu-flow .ac-lup{fill:var(--good)}
.work .actu-flow .ac-ldn{fill:var(--err)}
.work .actu-flow .ac-tick{stroke:var(--line)}   /* BossA 2026-08-30: the date line under each chart */
.work .actu-flow .ac-date{fill:var(--muted);font:600 12px var(--sys)}
/* BossA 2026-08-30 ("Use the larger hover font"): the guide tips ride data-tip
   and the app's ONE #277b hover bubble draws them — no second tooltip here. */
/* #410: the growth popup's Show Work — the fold lives in a MODAL, where no
   .row.open exists to unlock it, so the modifier does; the [hidden] guard is
   what the button toggles, and it must still win over the display:block. */
.work.grow-work{display:block;text-align:left;margin:8px 2px}
.work.grow-work[hidden]{display:none}
.row-detail{display:none}   /* #159: the inline second-tap line — desktop only (see the 960px block) */
/* BossA 2026-08-28: the Actuator card speaks the scoreboard at EVERY width —
   its rows always had the room (name over det in the left zone) */
.actu-line .row-detail{display:block;font-family:var(--sys);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.5;min-width:0}
.actu-line .row-detail .rd-one{display:block}
.actu-line .row-detail .rd-rest{display:none}
.row-detail .rd-src{color:var(--ink)}   /* #457 (BossA, 08-24): the Description's SOURCE NAME — PlusX Pool #N, Actuator Farm, Actuator Vault, the venue's pair — reads in ink; the stats after it keep the muted voice */
/* #457b (BossA, 08-24): the stats sit in fixed slots — mini-columns the eye
   can run straight down — sized in ch so each row family lines up at its own
   font.  A long value (the "no trade in Nd+" sentence) overflows its slot
   and simply pushes right; nothing clips. */
.row-detail .rd-one .rd-src{display:inline-block;min-width:15ch;margin-right:12px}
.row-detail .rd-seg{display:inline-block;margin-right:10px}   /* BossA 2026-08-28 wrap fix: 12 -> 10, measured against the 428px det cell */
/* BossA 2026-08-29 ("These %/yr lost their column setting" + the pools' %/yr
   wrapping): the slotted det line is a FLEX row that never wraps — the head
   may shrink to its 15ch floor and ellipsize, every slot keeps its width, and
   the Claim + %/yr tail anchors to the cell's right edge, so the figures share
   one right edge on every row of every family (the 08-28 ruling), Firefox's
   metrics included. */
.row-detail .rd-one.rd-slots{display:flex;align-items:baseline;white-space:nowrap;min-width:0;overflow:hidden}   /* NOTE (2026-08-30, measured): on the desk this flex NEVER APPLIES — the id-qualified `#app .row-detail .rd-one{display:block}` in the 960px block outranks it, so the slots lay out as inline-blocks; the ch min-widths are what really hold the columns */
.row-detail .rd-one.rd-slots > *{flex:0 0 auto}
.row-detail .rd-one.rd-slots .rd-src{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;min-width:6ch;vertical-align:bottom}   /* under pressure the head gives way down to 6ch before any slot clips — a truncated name beats a wrapped or clipped figure.  BossA 2026-08-30 ("the row is not on the same level"): vertical-align:bottom — an ellipsizing (overflow:hidden) inline-block's BASELINE is its box bottom, so baseline-aligned it rode ~3px above its siblings' text; bottom-aligned, its equal-metrics box seats its text exactly on theirs */
.row-detail .rd-one.rd-slots .rd-tail{margin-left:auto;display:inline-flex;align-items:baseline}
/* BossA 2026-08-29 ("yield to par" piece two): the Curve face's ground — the
   tank's own dark field, the chart breathing inside it */
.bub-curve{background:#000;border-radius:10px;padding:10px 8px 6px}
.walk-curve{padding-left:0;padding-right:0}   /* BossA 2026-08-29 "match the points vertically": the walk fold's Curve sheds its side padding so its svg spans the very width the ladder's does — the shared x-fractions then land on shared vertical lines */
.row-detail .rd-mbuy{min-width:10ch}
.row-detail .rd-age{min-width:4ch;text-align:right;margin-right:26px}   /* BossA 2026-08-28: the age column right-justifies — 6 d and 13 d share a right edge — and sits a step left of the %/yr column (his "away from the %/yr": 26px vs the 12px every other slot keeps) */
.row-detail .rd-margin{min-width:10ch;text-align:right;color:var(--ink);font-size:13px}   /* #459a (BossA, 08-25): the %/yr figure reads in ink, like the source name, 1px above the line's 12px */   /* BossA 2026-08-28 (his screenshot ruling): the %/yr column RIGHT-justifies — every family's figures share a right edge; 9ch -> 10ch so the widest normal figure (2,260 %/yr) sits inside the box instead of growing past it */
.row-detail .rd-margin.rd-pos{color:var(--good)}   /* BossA 2026-08-28: the color carries the sign the symbol used to */
.row-detail .rd-margin.rd-neg{color:var(--err)}
.row-detail .rd-venue{min-width:9ch}   /* wrap fix: 12ch held air — the longest venue is 'PulseX v1' at 9 */
.dots{display:flex;justify-content:center;gap:6px;padding-top:11px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dot)}
.dot.on{background:var(--doton)}
#yieldChip{cursor:pointer}
#yieldTitle{flex:1;text-align:center}   /* #108 (BossA): Price centered between the card's left border and the date chip */
/* #86: the HEX value toggle — the Ledger Tabs (design 3 ruled 07-19: "it shows truth").
   Both modes always readable; the lit tab is the mode showing. FUTURE turns the number Blu. */
.valtoggle{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:52px;border-radius:12px;
  background:var(--card-blue);border:1px solid rgba(255,255,255,.35);cursor:pointer;padding:4px;z-index:6}
.valtoggle .seg{display:flex;align-items:center;justify-content:center;min-height:20px;border-radius:9px;padding:6px 2px;font-size:9px;letter-spacing:.03em;
  font-weight:700;color:rgba(255,255,255,.9);transition:all .2s;line-height:1;font-family:var(--rounded)}   /* #159 (BossA): flex-centered so the label doesn't drift in the pill at Cmd+/- zoom */
.valtoggle .seg.on{background:#fff;color:#1a5296;box-shadow:0 1px 4px rgba(0,0,0,.3)}   /* #161: darker blue on the white pill — the small 9px label needs ≥4.5:1 (card-blue read 3.59) */
.valtoggle .seg + .seg{margin-top:3px}
.yield-line.sky,.chart-total.sky{color:var(--card-blue)}
#yield{padding-left:72px;padding-right:56px}   /* #138 (BossA, re-rules #86/#39 symmetry): the Value stack slides right — the right band only needs the chevrons */
#yield .box-head{margin-left:-58px;margin-right:-16px}   /* #138b: 2px back left (BossA) */   /* #132/#133: the header escapes the toggle band — the rail lives BELOW it; the chip and chart button slide right for the title */
@media (hover:none) and (pointer:coarse){#yield{padding-right:20px}#yield .box-head{margin-right:-12px}}   /* #133/#138: no chevrons on touch — the header and the Value stack take the full width */   /* #133: on the phone the flip cluster is gone — the header takes the whole width and the title looks left */

/* ---------- arrow clusters (#36): desktop only; idle 50% -> hover 100%,
     transition lifted from the suggestion button ---------- */
.cluster{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;
  opacity:.5;transition:all 150ms cubic-bezier(0.4, 0, 0.2, 1);z-index:5}
.cluster:hover,.cluster:focus-within{opacity:1}
.cluster--h{flex-direction:row}
.cbtn{width:22px;height:22px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:var(--ink)}
html.light .cbtn{background:rgba(23,34,47,.06);border-color:rgba(23,34,47,.16)}
.card .cbtn{background:rgba(8,18,30,.34);border-color:rgba(255,255,255,.22);color:#fff}
/* arrow buttons run 2:1 along the axis they point (BossA, 07-19) — pane arrows keep it.
   #90: cardUp/cardDown moved inside the lens rail; #96 (BossA): the Price/Yield card's
   arrows go SMALL again — the rails are the targets now */
#dpUp,#dpDown{width:22px;height:44px}   /* #104: arrow-ONLY cards run 2:1 again (the #82 law); rail glyphs stay small */
/* #197e: the arrows' 44px hit-targets retired with them — the pill legend took the rail */
/* #328 (BossA, 2026-08-14): the bottom-right price rail is RETIRED — #95's pill,
   #157's fat hotspots, #85/#90's dot legend, all of it.  Its two arrows moved up
   to flank the range chip they move ("Move the arrows to the left and right side
   of the 24-hours card"), and the dots went with the pill: every one of them was
   identical, so the row could say only how many ranges exist and which is
   showing — and the chip between the arrows says the range in WORDS.
   The three ride one group so they cannot separate; the arrows wear the chip's
   own height, so the trio reads as a single control, and the ::before hotspot
   keeps #157's lesson — a short arrow with a long press. */
.winstep{position:absolute;right:10px;bottom:8px;display:flex;align-items:center;gap:4px}   /* the retired rail's own seat, kept (BossA: "Move the range to the bottom where the pill legend was") */
.winstep .cbtn{width:20px;height:28px;border-radius:8px;position:relative}   /* as tall as the chip beside it (#209's one-size law), narrow because a chevron is narrow */
.winstep .cbtn::before{content:"";position:absolute;top:-7px;bottom:-7px;left:-4px;right:-4px}   /* #157's law, kept: the press reaches past the button it belongs to */
/* #328, measured: on the phone the trio runs 146px and only 121px stand free
   beside Show Work — the old dot pill was narrow enough to share that line, and
   this is not.  Rather than shave the arrows under a thumb's size, the range
   takes its own centred line at the foot of the card.  Still the bottom, still
   the last thing in the box; it simply stops fighting a button for the corner. */
@media (hover:none) and (pointer:coarse){
  .winstep{position:static;justify-content:center;gap:5px;margin:2px 0 -2px}
  .winstep .cbtn{display:none}}   /* #328a (BossA: "phone does not need a label, because it slides") — #36's law restored for this rail: the swipe steps the range BOTH ways on touch, so the card stands alone there */
#yield{padding-bottom:14px;min-height:150px}   /* #100/#104: rail beside Show Work; floor keeps the long flip pair clear */
#yield.alm-on{min-height:0}   /* BossA 08-30: the Expiring Stakes / HTTs Reaching Maturity face sizes to its content — "shorter minimum height until it needs more space"; the flip rail is hidden on this face, so the #100 floor has nothing to keep clear */
.yield-flip{top:8px;transform:none}   /* #92/#104: anchored high — the 2:1 pair clears the rail on any face */
.dpad .blank{visibility:hidden}
@media (hover:none) and (pointer:coarse){.cluster{display:none}}   /* gestures rule on touch (#36) */

/* #198 (BossA): the by-wallet ledger — one bordered card per address, its
   identity at the top; the fence bleeds its padding (the px-sect trick) so
   rows keep the full width */
.wcard{border:1px solid var(--line);border-radius:10px;margin:6px -9px 12px;padding:0 8px 3px}
/* #208 (BossA 07-30): TXNs dealt by wallet — the brick grid.  The 900px desk
   lays cards two across (each column ≈ the phone pane, so rows read the
   same); below the desk the phone column holds one.  Missing cards slide
   forward, keeping the brick look. */
.txw-grid{display:grid;grid-template-columns:1fr;gap:0 10px;align-items:start;margin:0 -9px}
@media (min-width:960px){.txw-grid{grid-template-columns:1fr 1fr}}
.txw-grid .wcard{margin:6px 0 12px}
.wcard-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--ui);font-size:12px;font-weight:700;color:var(--title);padding:6px 2px 3px}
.wcard-head .wc-tot{font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
/* #198: the grouping toggle beside the Timer Lock — same card voice */
.grouplock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.15;
  font-size:10.5px;font-weight:700;font-family:var(--ui);color:var(--muted);   /* #209g (BossA): 9.5→10.5 — the Sort by card's text runs 1px larger; gap 3→2 + sides 5→4 so the box HOLDS the 66×37 Timer-Lock match */
  background:var(--chipbg);border:1px solid var(--chipline);border-radius:8px;padding:4px 8px;cursor:pointer}   /* #210b (BossA): the ONE chip voice across the rail and the Value card */   /* BossA 07-30: two lines — Sort / By Token, the Timer Lock's stance; #209f (BossA): the Timer Lock's exact chrome too — radius 10, 8px sides */
.timerlock,.grouplock,.searchlock{width:66px;min-height:37px;box-sizing:border-box;justify-content:center;white-space:nowrap}   /* #209f (BossA): "make the sort button the same size as the All timers lock" — one fixed box guarantees it in every browser; #210: the spyglass wears it too */
/* #210b: ONE hover for the whole family — the resting colors are now identical,
   so the old background-swap hovers said nothing; a light lift says "pressable".
   Rides BEFORE the :active rules so the press-darken beats it while held. */
@media (hover:hover) and (pointer:fine){
  .pane-pill .pp:hover,.grouplock:hover,.timerlock:hover,.searchlock:hover,.chgstep:hover,#yieldChip:hover,.charttoggle:hover{filter:brightness(1.12)}}
/* #209h (BossA): the buttons feel the press — a 120ms fade on every state change
   and a dip while held.  scale() paints without laying out, so no box ever
   shifts; reduced-motion keeps the shade change and drops the movement. */
.pane-pill .pp,.grouplock,.timerlock,.searchlock,.chgstep,#yieldChip,.charttoggle{
  transition:background-color .12s ease,border-color .12s ease,color .12s ease,transform .12s ease,filter .12s ease,outline-color .12s ease,box-shadow .12s ease}
.pane-pill .pp:active,.grouplock:active,.timerlock:active,.searchlock:active,.chgstep:active,#yieldChip:active,.charttoggle:active{
  transform:scale(.97);filter:brightness(.9);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.35)}   /* #209i (BossA: "try it") — the pushed-in face: an inset lip of shade along the top edge reads as real depth, only while held */
@media (prefers-reduced-motion:reduce){
  .pane-pill .pp,.grouplock,.timerlock,.searchlock,.chgstep,#yieldChip,.charttoggle{transition:none}
  .pane-pill .pp:active,.grouplock:active,.timerlock:active,.searchlock:active,.chgstep:active,#yieldChip:active,.charttoggle:active{transform:none}}
.grouplock[hidden]{display:none}   /* the two-line display:flex would otherwise beat the hidden attribute's UA display:none */
.pane-stick .grouplock{position:absolute;top:0;right:144px}
.pane-stick #viewGroup{width:auto;min-width:66px;padding-left:9px;padding-right:9px}   /* BossA 08-29: "Make the card slightly wider for the button: Sort / Token · Kind" — the Balances label outgrew the family 66px box, so this ONE chip sizes to its words (never below the family box).  Right-anchored, so it grows LEFTWARD into the spyglass's retired 232 seat — empty on Balances at every width; on TXNs its label ("Sort by / Date") fits 66 and nothing moves */   /* #344: the desk row slid RIGHT INTACT (BossA: "slide the row intact") — the spyglass left for the bar and the letter pill left in #336, so the whole row moved 160px to the right margin, 72px pitch untouched: Lock 0 · Details/Add 72 · Sort 144 · Story 216 */   /* left of the spyglass's seat; #209/#210: 176→232→304 — Sort sits outboard because it comes and goes with the data, the always-present spyglass holds the inner seat so its absence never leaves a hole.  #223: 304→376 on the desk — the Value Card replica is present whenever Balances is, so IT takes the inner seat by that same rule and Sort stays outboard of it.  The phone/coarse seats below are untouched (the replica never renders there). */
@media (max-width:959px){.pane-stick .grouplock{top:42px;right:232px}}   /* BossA 07-30: below the 960 desk the app column is ~430px at EVERY window width (#195d's lesson — key on the desk, not the viewport), so the line is too tight and Sort drops below the Timer Lock — #210: outboard of the spyglass there too */
@media (hover:none) and (pointer:coarse){.pane-stick .grouplock{top:42px;right:0}}   /* phone: the lock holds the corner, the spyglass beside it (#210c), Sort back on the row beneath */
/* #223 (BossA): the Value Card replica sits BESIDE Sort, and takes the INNER of
   the two seats (304; Sort moved out to 376).  That is the rail's own rule, not
   a preference: a control that comes and goes sits outboard so its absence
   never opens a hole between the ones that remain — and Sort comes and goes
   with the data (one wallet, or no real read, and it is gone) while this
   replica is there whenever Balances is.  MEASURED with Sort hidden: at 376 the
   replica left a 72px gap in the middle of the rail; at 304 the rail closes up.
   It wears .grouplock for the family chrome (#210b's one chip voice).
   DESKTOP ONLY, twice over: under 960 the app column is ~430px at every window
   width (#195d's lesson) and the rail's second row is already spoken for, and a
   coarse pointer is a phone whatever its width. */
.pane-stick .valcard{right:72px;top:0}   /* #344: beside the Lock — the row slid right intact */
@media (max-width:959px){.pane-stick .valcard{display:none}}
@media (hover:none) and (pointer:coarse){.pane-stick .valcard{display:none}}

/* #210 (BossA): the spyglass — the Sort/Timer card voice, always present */
.searchlock[hidden]{display:none}   /* #311b: the .grouplock lesson again — the display:flex below beats the hidden attribute's UA display:none, so the off-pane chip (Add Token on Balances/TXNs, the spyglass on Prices) kept painting over its seat-mate and stole its clicks */
.searchlock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.15;
  font-size:10.5px;font-weight:700;font-family:var(--ui);color:var(--muted);
  background:var(--chipbg);border:1px solid var(--chipline);border-radius:8px;padding:4px 8px;cursor:pointer}   /* #210b: the ONE chip voice */
.searchlock .tl2{display:flex;align-items:center}   /* kills the inline-svg baseline slack — the box holds 66×37 like its rail-mates */
.searchlock .tl2 svg{width:12px;height:12px}
.pane-stick .searchlock{position:absolute;top:0;right:232px}
@media (max-width:959px){.pane-stick .searchlock{top:42px;right:160px}}   /* under the Timer Lock's seat */
@media (hover:none) and (pointer:coarse){.pane-stick .searchlock{top:0;right:74px}}   /* #210c (BossA): beside the Timer Lock, not under it — the phone has no letter pill, so the top row has the room; the 42-row goes back to Sort alone and the body legend breathes */
/* #326 (BossA: "add the search button back to the price lens"): BOTH chips ride
   the Prices rail now, so Add Token leaves the spyglass's seat for the outboard
   one at every tier — the #311b stacking trap, met again live in WebKit when the
   returned spyglass rendered under Add Token and lost its taps.  The seats
   mirror Sort's own ladder; Sort itself never shares a pane with Add Token. */
.pane-stick .searchlock.addtok{right:72px}   /* #344: Add Token holds the same seat on Prices */
@media (max-width:959px){.pane-stick .searchlock.addtok{top:42px;right:232px}}
@media (hover:none) and (pointer:coarse){.pane-stick .searchlock.addtok{top:0;right:148px}}
/* (#312 briefly seated Add Token on the Balances rail; #313 re-ruled it the
   same day — the automatic path made the second door unnecessary) */
/* the search modal: input + grouped live results, everything esc'd (#76) */
.s-out{max-height:52vh;overflow-y:auto;margin-top:10px;text-align:left}
.s-note{font-family:var(--sys);font-size:12.5px;line-height:1.65;color:var(--muted)}
.s-head{font-family:var(--ui);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--faint);margin:12px 0 4px;border-bottom:1.5px solid var(--line);padding-bottom:3px}
.s-head:first-child{margin-top:2px}
.s-hit{display:block;width:100%;text-align:left;font-family:var(--sys);font-size:12.5px;color:var(--ink);
  background:none;border:none;border-radius:8px;padding:5px 6px;cursor:pointer}
.s-hit:hover{background:var(--chipbg)}
.s-more{font-family:var(--sys);font-size:11.5px;color:var(--faint);padding:4px 6px 2px}
/* the landing flash — the found row announces itself, then quiets */
.s-flash{outline:2px solid var(--card-blue);outline-offset:-2px;border-radius:8px;transition:outline-color 1.6s ease .6s}
@media (prefers-reduced-motion:reduce){.s-flash{transition:none}}

/* #197e (BossA): the pill legend that replaced the pane arrows — three tiny
   letter cards, arranged by the settings Order, the showing card lit */
.pane-pill{display:inline-flex;gap:6px;align-items:center}   /* #209 (BossA): the letter cards run 50% larger — desktop-only by construction (the cluster hides on touch) */
/* #336: the head pill's seat is the apphead now — beside the Blu logo, the
   margin-right:auto holding it left so the absolutely-centered Day chip keeps
   its seat.  Desktop only: the .cluster that used to hide it on touch is gone,
   so the touch hide is stated here directly (the foot pill is the phone's way, #327). */
.apphead .pane-pill{margin-left:12px;margin-right:auto}   /* the auto margin holds the left cluster (logo + pill) together; the corner tools pack right */
/* #346: the SPYGLASS seats in the corner — between the RPC dots and the gear,
   icon-only (the phone already runs it icon-only, the glyph is understood),
   wearing .cornerbtn's exact chrome: 40×40, radius 12, --btn face — the gear's
   twin.  body.search-corner (set by seatChips) slides the dots left to make
   its room; everywhere else the spyglass is a rail chip and none of this
   applies. */
@media (min-width:960px){
  .apphead>.searchlock{width:40px;height:40px;min-height:0;border-radius:12px;background:var(--btn);border-color:var(--btnline);padding:0;margin-right:10px}
  .apphead>.searchlock .tl1{display:none}   /* the word stands down — the glyph carries it */
  .apphead>.searchlock .tl2 svg{width:19px;height:19px}   /* the 13px rail glyph grows to the corner's voice (the gear draws at 20) */
  body.search-corner .wxdots{right:102px}   /* the dots slide left of the spyglass's 40px + gap; their #73 seat (54) returns with them to the rail layouts */
}
@media (hover:none) and (pointer:coarse){.apphead .pane-pill{display:none}}
@media (max-width:959px){.apphead .pane-pill{display:none}}   /* below the 960 desk the app column is ~430px and the pill would run into the centered Day chip — the foot pill carries the links there, measured: logo 40 + 12 + pill 147 ends at 211, the Day chip begins at ~173 */
.pane-pill .pp{border:1px solid var(--chipline);border-radius:8px;background:var(--chipbg);color:var(--muted);
  font-family:var(--ui);font-size:16.5px;font-weight:700;line-height:1;padding:0 9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;height:37px;box-sizing:border-box}   /* #209g (BossA): the letter cards stand as tall as the Timer Lock card; #210b: the ONE chip voice */
.pane-pill .pp.on{outline:1.5px solid var(--card-blue);outline-offset:-1.5px;color:var(--ink)}   /* the showing card lit — outline + ink */
/* #327 (BossA): the foot legend, standing where the dots stood.  Same cards,
   same voice — it only has to CENTER itself (the head pill sits in an
   absolutely-positioned rail) and keep the dots' own breathing room above.
   The cards run a touch shorter here than the head rail's 37px: that height
   exists to match the Timer Lock beside it, and there is no lock down here. */
.pane-pill--foot{display:flex;justify-content:center;gap:6px;padding-top:11px}
.pane-pill--foot .pp{height:31px;font-size:15px;padding:0 11px}
@media (hover:none) and (pointer:coarse){.pane-pill--foot{gap:8px;padding-top:12px}}   /* a thumb wants the gap the mouse does not */

/* #211 (BossA, after a friend "landed on the price page on his first visit" and
   never found the other cards): the letters teach themselves.  Each card holds
   a CONSECUTIVE SLICE of one PulseChain fade — the same five stops the chain
   row wears (#79/#202) — sized N×100% and stepped across by position, so the
   colors line up across the gaps and the leftmost card really does wear the
   left end of the fade.  The cards then light in turn (--ppd) and the row
   reads as one wave.  It runs until the visitor taps a card, once, ever. */
.pane-pill .pp{position:relative;overflow:hidden}
.pane-pill .ppl{position:relative;z-index:1}   /* the letter rides ABOVE the fade — an overlay that swallowed its own letter would teach nothing */
body.bb-teach .pane-pill .pp::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:linear-gradient(to right,#00EAFF,#0080FF,#8000FF,#E619E6,#FF0000);
  background-size:calc(var(--ppn) * 100%) 100%;background-position:var(--ppp) 0;
  opacity:0;animation:ppwave 3.2s ease-in-out var(--ppd) infinite}
@keyframes ppwave{0%{opacity:0}8%{opacity:.9}22%{opacity:0}100%{opacity:0}}   /* the sweep takes ~1.3s of the 3.2, so the row rests between passes instead of strobing */
body.bb-dormant .pane-pill .pp::after{animation:none}   /* the Welcome veil hides this rail (visibility:hidden) — a wave nobody can see would spend its first passes on an empty screen */
@media (prefers-reduced-motion:reduce){
  body.bb-teach .pane-pill .pp::after{animation:none;opacity:.3}}   /* no motion, but the invitation stays — the fade sits steady across the row */

/* #211c (BossA's ruling on the phone half of #211): the letter cards are
   desktop-only by construction — .cluster is display:none on coarse pointers,
   MEASURED 0×0 at 390×844 — so the phone gets its own pair of signals, and
   they teach the two different things a lost visitor needs.

   The NUDGE performs the gesture instead of naming it: the card slides left
   and springs back, twice, then rests.  Deliberately NOT an arrow — an arrow
   reads as a button, and #36 took the arrows off touch precisely because
   gestures rule there; a flashing control that cannot be pressed is a broken
   promise.

   #327 RETIRES this block's second half: the dots that answered "how many
   cards are there" are now the foot pill legend, so the phone wears the SAME
   letter-card wave as the desktop — the .pane-pill rule above carries no media
   gate, so it lights the foot cards at every width, and the dot rules that used
   to slice the fade into circles are gone with the circles.  The nudge stays:
   it teaches the SWIPE, which the legend does not replace, and it is no longer
   a promise the reader cannot press — the cards under it are real buttons now.

   Both stop with the same tap that stops the letters (bb-teach, store.ppSeen).
   The nudge's transform is always retired before swapAnim's own: ppTaught()
   runs ahead of setPane on every path that changes a card. */
@media (hover:none) and (pointer:coarse){
  body.bb-teach:not(.bb-dormant) #paneBody{animation:ppnudge 4s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){
    body.bb-teach:not(.bb-dormant) #paneBody{animation:none}}   /* the nudge IS motion — with motion refused there is nothing left of it to keep */
}
@keyframes ppnudge{0%,6%{transform:none}14%{transform:translateX(-14px)}22%{transform:none}30%{transform:translateX(-14px)}38%,100%{transform:none}}   /* two passes inside the first 1.5s, then 2.5s of stillness — a hint, not a twitch */

/* #55: the pane arrows ride a zero-height sticky rail pinned under the Yield box */
.pane-stick{position:sticky;height:0;z-index:18}   /* top set by layoutSticky() */
.pane-stick .cluster{top:0;transform:none}
/* #84: the pane's title + Timer Lock pin at the same stop line as the arrows,
   so all three stay in reach however deep the list scrolls */
#pane .box-head{position:sticky;z-index:17;background:var(--surface);padding-bottom:6px;min-height:46px}   /* #100: the strip covers the rail line */

/* #56: the provenance note toggle — the title itself and the ⓘ beside it */
/* #159 (BossA): quick-print glyph on the Token Balances header */
.pane-print{background:none;border:0;padding:0 2px;margin-left:5px;cursor:pointer;color:var(--muted);vertical-align:middle;line-height:0}
.pane-print:hover{color:var(--ink)}
.pane-print svg{display:block}
/* #106: the address chip — how many addresses feed the totals; tap to glance, tap again to manage */
.addr-chip{font-size:11px;font-weight:700;color:var(--muted);background:var(--chipbg);border:1px solid var(--chipline);
  border-radius:999px;padding:2px 9px;cursor:pointer;font-variant-numeric:tabular-nums;
  display:table;margin:7px 0 0}   /* #107: always its own line, clear air below the title — no accidental title taps */
.addr-chip[aria-expanded="true"]{background:rgba(55,138,221,.20);border-color:#37588a;color:#cfe4fa}
#paneTitle{font-size:17px;padding-right:192px;align-self:flex-start;line-height:1.05;margin-top:2px}   /* BossA 07-29: Token Balances / Transactions / Token Prices are page titles — 2px above a box title */   /* #106/#107: the Timer Lock + arrows claim 190px of the header's right; the title's cap-top rides level with their card tops (line box tightened, measured) */
@media (hover:hover){
  #card{padding-left:46px;padding-right:46px}
  .pane-stick .cluster{right:0;top:0}   /* #100: the rail lives INSIDE the head strip now — rows own the full width */
}

/* focus visibility for keyboard control (#36) */
.card:focus-visible,.rank:focus-visible,.box:focus-visible{box-shadow:0 0 0 2.5px rgba(55,138,221,.55)}

/* ---------- overlays / modals ---------- */
.overlay{position:fixed;inset:0;background:rgba(4,8,14,.72);display:flex;align-items:center;justify-content:center;
  padding:calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px));z-index:50}   /* #411: a TALL modal (Add Addresses is the phone's first screen) reaches the frame's edges — in the standalone app those edges are under the clock and the home bar */
.overlay.hidden{display:none}
/* #470: the Welcome overlay is OPAQUE — a first screen, not a scrim over
   half-loaded chrome.  Its Verify link wears the button clothes whole, and
   the fingerprint line stays small: the signpost for those who know it. */
#welcome{background:var(--page)}
#welcome .go2{display:block;width:fit-content;text-align:center;text-decoration:none;box-sizing:border-box;margin:0 auto 10px;border:.5px solid currentColor;border-radius:999px;padding:10px 24px}
#welcome .go:hover{box-shadow:0 0 0 2px #fff}   /* BossA 2026-08-28: Open BluBox's hover wears a WHITE ring (his "add a white border to the pill button hover", clarified to THIS button).  A box-shadow ring, not a border: a real border would nudge layout, and a thin recolored one was invisible in Safari/Firefox.  2px on his "Make it thicker" */   /* BossA 2026-08-28: the Verify door is a PILL — capsule, snug, centered, with a VISIBLE resting border (his "border prior to the hover blue"; the .entry line was too faint here); hover still fills card-blue.  Open BluBox below stays the full-width primary */
#welcome .go{width:100%}
#welcome .wel-fine{text-align:center;font-family:var(--ui);font-size:11.5px;color:var(--muted);margin:12px 0 0}
.entry{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;
  max-height:calc(100vh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));overflow-y:auto}   /* #76: many addresses scroll inside the modal instead of clipping off-screen.  #411: the height gives back what the safe-area padding took, or the card would overflow its own frame */
.entry .sampletop{text-align:center;font-family:var(--ui);font-size:13px;color:var(--gold);
  letter-spacing:.03em;margin-bottom:10px}   /* ruling #66 — first thing a first-arrival reads */
/* #184b (BossA: "these 2 lines need contrast against their background").  MEASURED:
   bright gold #ffdb01 on the ledger papers read 1.08:1 (buff) and 1.03:1 (green)
   — the two gold lines in the entry popup were all but invisible on paper.  The
   #161 failure class again; the dark themes are fine (12.5–13.4:1).  Dark gold
   restores 5.2:1 on buff and 4.9:1 on green. */
html.light .entry .sampletop{color:#7d5600}
.entry .entrylead{text-align:center;font-family:var(--ui);font-size:13px;color:var(--ink);
  line-height:1.5;margin-bottom:10px}   /* the Desktop-first / QR line, framed by the two gold tildes */
.entry h2{font-family:var(--ui);font-weight:normal;font-size:18px;margin-bottom:8px}
.entry h2.mtitle{font-weight:600}   /* #152: bold modal title by ruling */
.entry p{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:12px}
.entry .modal-lead{font-weight:600;color:var(--ink);margin-bottom:8px}
.entry .modal-bullets{list-style:disc;padding-left:20px;margin:0 0 12px}
.entry .modal-bullets li{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:6px}
.entry .modal-bullets ul{list-style:circle;padding-left:18px;margin:5px 0 0}   /* #152: nested sub-bullets */
.entry .modal-bullets ul li{margin-bottom:4px}
.entry .modal-bullets ul ul{list-style:square}   /* #152: third level */
.entry .modal-steps{list-style:decimal;padding-left:22px;margin:0 0 10px}   /* #152: numbered steps */
.entry .modal-steps li{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:7px}
.entry .modal-steps strong{color:var(--ink)}
.entry .modal-steps ul{list-style:disc;padding-left:18px;margin:5px 0 0}
.entry .modal-steps ul li{margin-bottom:4px}
.entry .modal-bullets strong{color:var(--ink)}
.entry .modal-note{font-size:12px;color:var(--muted);line-height:1.55;margin:10px 2px 4px}
.entry .modal-note strong{color:var(--ink)}
/* #121: modal bullet lists — same muted note voice, tight bullets */
.entry .modal-list{font-size:12px;color:var(--muted);line-height:1.5;margin:8px 0 4px;padding-left:18px}
.entry .modal-list li{margin:3px 0}
.entry .modal-list strong{color:var(--ink)}
.entry .mono{font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--muted);background:var(--workbg);
  border-radius:12px;padding:10px 12px;margin-bottom:12px;word-break:break-all}
.entry input,.entry textarea{width:100%;background:var(--workbg);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);font-family:var(--mono);font-size:13px;padding:11px 12px}
.entry textarea{min-height:86px;resize:vertical}
.entry .err{color:var(--err);font-size:12px;min-height:30px;line-height:1.5;padding-top:6px}
.entry .go{width:100%;margin-top:6px;background:var(--card-blue);border:none;color:#fff;font-family:var(--ui);
  font-size:15px;padding:12px;border-radius:12px;cursor:pointer}
.entry .go:hover{filter:brightness(1.12)}   /* BossA 2026-08-28: the primary answers the mouse too — a lift of the same blue, no second color; phones have no hover and keep the pressed state (#195c's stuck-hover lesson: a brightness that sticks is harmless) */
/* #121: secondary modal actions (Save as File, Show QR) stack full-width under the primary */
.entry .go2{display:block;width:100%;margin-top:8px;background:none;border:1px solid var(--line);color:var(--ink);
  font-family:var(--ui);font-size:14px;padding:10px;border-radius:12px;cursor:pointer}
.entry .go2:hover{border-color:var(--card-blue);background:var(--card-blue);color:#fff}   /* #195c (BossA's screenshot): white text with NO fill — invisible on the light papers, and a phone's tap leaves hover stuck, so "Preset when clicked" vanished on Buff.  The blue fill under the white is the same pair the primary button already wears on every theme. */
/* #121: the QR courier is computer-only — a phone has nothing to beam to */
@media (hover:none) and (pointer:coarse){.qr-courier{display:none}}
.entry .quiet{display:block;width:100%;margin-top:10px;text-align:center;background:none;border:none;cursor:pointer;
  color:var(--faint);font-size:12px}

/* suspected tokens (#42): below the list, red border, counted nowhere */
.row.suspect{border:1.5px solid #e5484d;border-radius:8px;padding:0 9px;margin:8px 0 2px}
.row-excl{font-size:11.5px;color:#e5484d;font-family:var(--sys)}

/* watched-address rows (#41): hidden = red border + the exclusion flag */
.addr-row{border:1.5px solid transparent;border-radius:8px;padding:7px 9px;margin-bottom:6px;background:var(--workbg)}
.addr-row.off{border-color:#e5484d}
.addr-line{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}   /* #184: the Preset chip wraps to its own row where the width isn't there */
.addr{font-family:var(--mono);font-size:12.5px;color:var(--ink);min-width:0;overflow-wrap:anywhere;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.addr-nick{font-family:var(--sys);color:var(--muted);margin-left:8px;font-size:12px}
.nick-btn{font-family:var(--sys);font-size:12px;color:var(--muted);background:none;border:none;border-bottom:1px dashed var(--chipline);cursor:pointer;padding:0 0 1px}
/* #377: the copy glyph sits WITH the address it copies.  A 28px box on a coarse
   pointer so a finger has a real target, while the glyph itself stays 13px —
   the icon is small, the button is not. */
.addr-copy{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;margin-left:-2px;padding:0;border-radius:6px;cursor:pointer;
  color:var(--muted);background:none;border:1px solid transparent}
.addr-copy svg{display:block}
.addr-copy.ok{color:var(--good);border-color:transparent}
@media (hover:hover) and (pointer:fine){
  .addr-copy:hover{color:var(--ink);background:var(--chipbg);border-color:var(--chipline)}}
@media (hover:none) and (pointer:coarse){.addr-copy{width:28px;height:28px}}
.addr-copy:active{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){.addr-copy:active{transform:none}}
.nick-btn.unnamed{color:var(--faint);font-style:italic}
.addr-sub{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-bottom:6px}
.addr-row.editing{border-color:var(--card-blue)}
.nick-edit{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:var(--sys);font-size:12.5px;padding:7px 9px}
.addr-left{display:flex;align-items:center;gap:8px;min-width:0}
.reorder{display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.reord-btn{font-size:9px;line-height:1;color:var(--muted);background:var(--chipbg);border:1px solid var(--chipline);border-radius:5px;padding:3px 6px;cursor:pointer}
.reord-btn:disabled{opacity:.28;cursor:default}
.addr-actions{display:flex;gap:5px;flex:0 0 auto}   /* BossA 07-25 (#184): tighter gap — Preset · Hide · Delete share one line */
.addr-line > .addr-actions:only-child{margin-left:auto}   /* BossA 07-25: Save/Cancel keep the same right edge as every control pair */
.addr-btn{font-size:11px;font-family:var(--sys);color:var(--muted);background:var(--chipbg);border:1px solid var(--chipline);border-radius:8px;padding:3px 6px;cursor:pointer;white-space:nowrap}   /* #184: 8px→6px, "slightly tighter" — and a chip never wraps its own label */
.addr-flag{display:block;width:100%;text-align:left;margin-top:7px;color:#e5484d;background:rgba(229,72,77,.08);border:1px solid #e5484d;border-radius:8px;font-size:11.5px;line-height:1.45;padding:6px 9px;cursor:pointer;font-family:var(--sys)}
/* ---- #181: Presets — the ⅔/⅓ Settings row, the popup rows, the pickers ---- */
.menu-item.half.w23{flex:2}
.menu-item.half.w13{flex:1}
/* BossA 07-29: the two chain cards size to their own text and split what's left.
   min-width:max-content is what holds the line — the ✓ moves between the cards,
   so a fixed ratio can't fit both states at 375px; letting each card claim its
   content first does.  Tighter side padding buys the room. */
.menu-item.half.chain-pls, .menu-item.half.chain-eth{flex:1 1 auto;min-width:max-content;padding-left:8px;padding-right:8px}
.menu-item.half.wkeep{flex:4}   /* BossA 07-29: the keep-BluBox card takes the wider share — its longest label must sit on one line.  #322 (BossA: "Add BluBox to Home Screen" · "Take spcae from the Print button if necessary for narrow phones"): 1.8 left it 9.7px of slack at 320px, measured.  #322c ("Add BluBox to Dock / Bookmark") is the longest of the three at 225px with its ribbon, and needed 2.2 -> 4: measured at 320px that seats it with 14.1px to spare while Print, which wants only 50.3px for its word and printer, still keeps 61.3px.  Print looks small because it IS small — it gave up width it was not using */
.pre-name{font-family:var(--sys);font-size:13px;color:var(--ink);background:none;border:none;cursor:pointer;text-align:left;padding:2px 0}
.pre-name .def{font-weight:400;color:var(--muted);font-size:11.5px}
.addr-row.pre-active{outline:1px solid var(--chipline);border-radius:8px}
/* BossA 07-25: paired buttons share one width; the affirmative (Edit, Save)
   reads slightly stronger than its neighbor (Delete, Cancel) */
.pm-edit,.pm-del,.pm-save,.pm-cancel{min-width:62px;text-align:center}
.pm-edit,.pm-save{color:var(--ink);border-color:var(--muted);font-weight:700}
/* BossA 07-25 (#184): the Preset chip joins Hide/Delete on the desk.  On a phone
   the line has no room for a fourth thing, so it keeps its old row beneath —
   and its old dashed-link look, undoing the .addr-btn chip it now shares. */
.addr-pre{order:3;flex:0 0 100%;margin-top:5px;text-align:left;overflow:hidden;text-overflow:ellipsis;
  color:var(--muted);background:none;border:none;border-radius:0;border-bottom:1px dashed var(--chipline);
  font-size:11.5px;line-height:1.45;padding:0 0 2px}
.addr-actions{order:2}
/* the desk has the room: the chip leaves its own row and joins Hide + Delete,
   margin-left:auto holding the trio together at the right edge.  This block
   sits AFTER the base rule on purpose — same specificity, so source order is
   what decides which one wins. */
@media (min-width:960px){
  .addr-pre{order:0;flex:0 0 auto;max-width:200px;margin:0 0 0 auto;   /* #184b: measured — the 600px row has ~244px spare here, so an 18-character preset name shows in full */
    background:var(--chipbg);border:1px solid var(--chipline);border-radius:8px;
    font-size:11px;line-height:normal;padding:3px 6px}
}
.addr-flag.soft{color:var(--muted);background:var(--chipbg);border-color:var(--chipline);cursor:default}
.pre-list{display:flex;flex-direction:column;gap:4px;margin:7px 0}
.pre-members{font-family:var(--sys);font-size:11.5px;color:var(--muted);line-height:1.55;margin:2px 0 5px 4px}
.pre-row{display:flex;align-items:center;gap:8px}
.pre-row .reorder{flex:0 0 auto}
.pm-ghost{display:inline-block;width:21px}   /* matches the measured ▲▼ column so every checkbox shares one left edge */
.pre-check{display:flex;align-items:center;justify-content:flex-start;gap:8px;font-family:var(--sys);font-size:12.5px;color:var(--ink);cursor:pointer;text-align:left}
.pre-check input{flex:0 0 auto;width:15px;height:15px;margin:0}
.pre-check .def{color:var(--muted);font-size:11px}
.pre-summary{display:block;width:100%;text-align:left;font-family:var(--sys);font-size:12.5px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 9px;margin-top:6px;cursor:pointer}
#prePick{border:1px solid var(--line);border-radius:8px;padding:8px 9px;margin-top:5px}

.sampletag{text-align:center;font-size:11px;color:var(--faint);padding:8px 0 0;font-family:var(--mono)}

/* selection check marks are bold (#47); the alarm-area annotation stays plain */
.defck{font-weight:700}

/* #184 (BossA): back to top — desktop only.  Hidden until the page has actually
   scrolled, so it never sits on a screen with nothing above it. */
.totop{display:none}
@media (min-width:960px){
  .totop{display:flex;position:fixed;right:26px;bottom:26px;z-index:60;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:50%;cursor:pointer;
    background:var(--chipbg);border:1px solid var(--chipline);color:var(--muted);
    box-shadow:0 3px 14px rgba(0,0,0,.28)}
  .totop[hidden]{display:none}
  .totop:hover{color:var(--ink);border-color:var(--muted)}
}
/* address-change notice (#45) */
.notice{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:70;width:calc(100% - 32px);max-width:420px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--card-blue);border-radius:16px;
  padding:12px 14px;box-shadow:0 2px 6px var(--shadow),0 10px 28px var(--shadow);font-size:12.5px;line-height:1.55;color:var(--muted)}
.notice.hidden{display:none}
.notice strong{display:block;color:var(--ink);font-size:13px;margin-bottom:3px}
.notice .notice-quote{display:block;margin-top:6px;font-style:italic;color:var(--ink)}
.notice-actions{display:flex;gap:10px;align-items:center;margin-top:9px}
.notice-actions .go2{background:var(--card-blue);border:none;color:#fff;font-family:var(--ui);font-size:12.5px;padding:7px 12px;border-radius:8px;cursor:pointer}
.notice-actions .quiet2{background:none;border:none;color:var(--faint);font-size:12px;cursor:pointer}


/* HEX-day complication, header center (#67): the watch face wears its own
   calendar — contract count, same number on both chains */
/* #411b (BossA's Home-Screen shot: Blu and the gear cleared the island, the Day
   chip and the dots did not).  #411 padded .apphead, which moves its FLOW
   children — but an absolutely positioned child is seated from the padding
   BOX's top edge, which padding does not move.  So these kept their old 26px
   seat and stayed under the island while everything around them dropped.
   This one matters most of the four: the Day chip IS the Force Reload control
   ("Tap to Force Reload — Everything Reproves Itself"), so the one in-app
   button a stuck reader would reach for was the one still buried. */
.hexday{position:absolute;left:50%;top:calc(26px + env(safe-area-inset-top, 0px));transform:translate(-50%,-50%);
  font-family:var(--ui);font-size:13px;color:var(--ink);opacity:.95;
  border:1px solid var(--line);background:var(--surface);border-radius:8px;
  padding:3px 10px;font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap}
.hexday b{font-weight:700;color:var(--daywait)}
.hexday.ok,.hexday.ok b{color:var(--dayok)}
/* #303 (BossA 2026-08-11, ruled from a four-way audition: "The border is the
   best looking. make every 2 seconds"): a page left un-reloaded for 24 hours
   wakes its Day totem's BORDER — a ring swells out and the line brightens,
   every 2 seconds until the reload happens.  The pill IS the reload button
   (#70), so the motion points at the exact control that cures the staleness;
   a motion, never a modal (inform-never-command).  One infinite CSS loop —
   the class lands once when the page turns stale, and nothing in JS ticks
   per-pulse.  The pulse rides the first 70% of each cycle, then rests. */
@keyframes day-stale-border{
  0%{box-shadow:0 0 0 0 rgba(55,138,221,0)}
  25%{box-shadow:0 0 0 6px rgba(55,138,221,.35);border-color:#378ADD}
  70%{box-shadow:0 0 0 0 rgba(55,138,221,0)}
  100%{box-shadow:0 0 0 0 rgba(55,138,221,0)}
}
.hexday.stale{animation:day-stale-border 2s ease-in-out infinite}
/* a reader who turned motion off still deserves the signal — the border
   simply stays bright instead of pulsing (no invisible states) */
@media (prefers-reduced-motion: reduce){
  .hexday.stale{animation:none;border-color:#378ADD;box-shadow:0 0 0 3px rgba(55,138,221,.25)}
}

/* Validators box (#69): rows on existing tokens; slashed wears --err */
.vals{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.val-row{border:1px solid var(--rowline);border-radius:12px;padding:9px 11px;
  font-family:var(--ui);font-size:13.5px;color:var(--ink)}
.val-id{font-family:var(--mono);font-size:12px;color:var(--muted)}
.val-status{font-weight:700}
.val-status.slashed{color:var(--err)}
.val-bal{font-variant-numeric:tabular-nums}
.val-sub{font-size:12px;color:var(--muted);margin-top:2px}
.val-stale{color:var(--daywait)}
.val-fresh{color:var(--dayok)}   /* the chain vouched just now — same Blu as the Day */

/* BossA 07-29: the Token Prices board fence — Core PulseChain reads as one object.
   The side margins BLEED (−9px) exactly what the padding + border cost (8+1),
   so the rows inside keep the same width and x as the WALLET rows below —
   the fence line rides in the pane's gutter, and nothing pinches. */
.px-sect{border:1px solid var(--line);border-radius:12px;margin:2px -9px 10px;padding:0 8px 2px}
.px-sect-cap{font-family:var(--ui);font-size:14px;color:var(--title);text-align:center;padding:5px 0 3px;letter-spacing:.4px}   /* BossA 07-30: "Enlarge" — 11px → 14px, the plsfade voice */
/* #210q (BossA): the stamps live back in the seam's own hd-note — the original
   #196 seat, opaque and sticky.  PLS directly left of ETH, a tab of air
   between (#210o); the pair wraps right-aligned where the phone runs tight. */
.pxhead-note .hd-note{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 32px;white-space:normal}
.pxhead-note .hd-note>span{white-space:nowrap}
/* #196: a board row's chart unfolds INLINE, full pane width (BossA: "in the
   dropdown, rather than a popup") — window rail, the line, its caption */
.bc-rail{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 8px}
/* #393 (BossA: "Use the new <24h> style that is in the column header"): the
   rail's ‹ chip › arrows retired — the fold wears #383's stepper, whose rules
   live with the header's own below (one home, no drift).  #271's constant-
   width lesson survives by construction: the short label hugs fixed 6px
   triangle gaps inside a min-width control, so the marks never re-seat. */
.bc-svg{width:100%;height:auto;display:block}
.bc-line{font-size:10.5px;color:var(--muted);text-align:center;margin:8px 0 2px;font-family:var(--mono);line-height:1.4}
/* #441: the LP-share lines — ink by his word ("in no color ink"), never the
   caption grey and never a gain/loss color */
.lp-line{color:var(--ink)}
.stk-lp{font-size:11.5px;color:var(--ink);font-family:var(--sys);padding:4px 2px 0}
/* #394 (BossA: "remove the blue left border strip and add the border"): the
   chart folds shed #151's Show-Work strip — that strip marks PROSE — and wear
   the card grammar instead: a 1px frame running the token's own fade
   (--bcfade, set per fold by setFoldFade), the share card's border come home.
   The two-layer background is the house fade-frame construction (#183/#202's
   pattern); the padding-box layer keeps the fold's own --workbg. */
.bc-fold{cursor:default;border:1px solid transparent;border-radius:10px;
  background:linear-gradient(var(--workbg),var(--workbg)) padding-box,var(--bcfade,var(--line)) border-box}

/* #399 (BossA: "On Desktop, add a new button Grid Chart view"): the chart
   wall — auto-filling tiles, each in its token's own fade frame, one range
   rail above them all.  Desk only (the JS hides the chip on coarse pointers);
   the tile seat rules mirror the fold's. */
/* #405 (BossA: "move the date range button into the chart, so users can change
   the range without going to the top of the page"): the rail rides INSIDE each
   tile, under its chart, so the control is always beside the chart being read.
   Tighter than the retired head rail — it repeats once per tile now, so it has
   to sit quietly; the .bc-rail control it wraps is unchanged (#393). */
.cg-rail{display:flex;justify-content:center;padding:2px 0 0}
.cg-rail .bc-rail{margin:0}
.cg-tile.open .cg-rail{padding:5px 0 1px}
.cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;padding:6px 8px}
.cg-tile{border:1px solid transparent;border-radius:10px;padding:2px 2px 4px;
  background:linear-gradient(var(--workbg),var(--workbg)) padding-box,var(--bcfade,var(--line)) border-box}
.cg-tile svg{width:100%;height:auto;display:block}
/* #404 (BossA: "clicking a chart makes it page width and shows the Invert and
   Share buttons"): the opened tile takes the WHOLE row — grid-column 1/-1 —
   however many columns the wall happens to have at this width.  It keeps its
   own fade frame; only its span, its ink and its shelf change. */
.cg-tile{cursor:pointer}
.cg-tile.open{grid-column:1/-1;border-color:var(--chipline)}
.cg-tile.open .cg-t{font-size:15px}
.cg-tile.open .cg-p{font-size:14px}
/* the caption reads as the fold's does — mono, muted, its own air.  .bc-line
   already carries that voice; this only seats it inside a tile. */
.cg-line{padding:2px 10px 0;text-align:center}
.cg-tile.open .bc-share{margin:6px 0 4px}
.cg-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 10px 1px;font-family:var(--sys)}
/* #403b (BossA: "Add logos to the Grid Chart view"): the mark and the name are
   ONE unit, so the percent still takes the far edge and a long name ellipses
   against the mark instead of shoving it out of the tile.  min-width:0 is what
   lets the ellipsis happen at all inside a flex row. */
.cg-n{display:flex;align-items:center;gap:6px;min-width:0}
/* #403d: the trailing mark on a ratio tile.  flex:none so it can never be the
   thing that shrinks — the NAME is what ellipses when a tile runs narrow. */
.cg-logo-r{flex:none}
/* 4px, matching .bch-sym img — the chart CARD's own mark, drawn from the same
   cardLogoSrc.  NOT .tkmark's 50%: a circle would clip HEX's official hexagon
   back into the round coin badge that was retired 2026-08-17. */
.cg-logo{width:18px;height:18px;flex:none;border-radius:4px;display:block;align-self:center}
.cg-t{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-p{font-size:12.5px;font-weight:700;flex:none}
.cg-p.up{color:var(--good)}
.cg-p.down{color:var(--err)}
.cg-cap{font-family:var(--sys);font-size:12.5px;line-height:1.5;color:var(--muted);padding:8px 10px 12px;text-align:center}
/* the second view chip takes the next 72px seat outboard of Grid/List — the
   #344 pitch, and the same reasoning #363 used: Story's seats are free on the
   Prices pane.  Desk only; the phone never sees it.  Its OWN class — sharing
   .gridview put every late seat rule on both chips and they stacked. */
.pane-stick .chartgridview{position:absolute;top:0;right:216px}
@media (max-width:959px){.pane-stick .chartgridview{top:42px;right:376px}}
@media (max-width:959px) and (hover:hover) and (pointer:fine){.pane-stick .chartgridview{top:0;right:376px}}
@media (hover:none) and (pointer:coarse){.chartgridview{display:none !important}}
.chartgridview .gl-ico{display:none}   /* the desk keeps the words, #372's stance */
.chartgridview .gl1{font-size:9.5px;letter-spacing:-.01em}   /* "Grid Chart" must HOLD the 66x37 box — measured, 10.5px spilled it */

/* #398 (BossA: "I want to see this always … and share it"): the card's head
   at home in the fold — headline percent, now-line, the token column — in the
   typewriter voice with the theme's own inks, every paper */
.bch{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:4px 10px 6px;font-family:var(--sys)}   /* BossA 2026-08-18: "Use a modern font on the chart card" — the head speaks the modern sans; the chart's instruments stay mono */
.bch-k{font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--muted)}
/* #438c (BossA: "match these font selections and changes with all the
   charts"): the type scale he dialed on the pair head (#436c + #438b) is the
   ONE scale now — every chart fold's head wears it, so the .pair overrides
   collapsed into these base rules.  Only the nowrap stays pair-scoped: the
   pair's now-line is short by construction; a token's can run longer and
   must stay free to wrap. */
.bch-pct{font-size:28px;font-weight:700;line-height:1.15}
.bch-pct.up{color:var(--good)}
.bch-pct.down{color:var(--err)}
.bch-now{font-size:15px;color:var(--ink)}
.bch-now b{font-weight:700}
.bch-now sup{font-size:.7em}
.bch-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;flex:none;padding-top:2px}
.bch-sym{display:flex;align-items:center;gap:6px;font-size:19.5px;font-weight:700;color:var(--ink)}   /* #442b/#442c (BossA, twice): the corner column steps up — and one size larger again, all charts */
.bch-sym img{border-radius:4px;display:block;width:24px;height:24px}
.bch.pair .bch-now{white-space:nowrap}   /* #436c: one fact, one line */
/* #436b: the pair fold's corner carries the chart's ONE title — "HEX ⇆ eHEX"
   in the Hex Fade between its legs' marks — with HEX.com linked on the line
   below, off-site ↗.  Underline on hover says pressable. */
.bch-pairfade{background:linear-gradient(to right,#ffdb01,#ff0f6f,#fe01fa);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
a.bch-hexcom{text-decoration:none}
a.bch-hexcom:hover{text-decoration:underline}
.bch-site{font-size:15.5px;color:var(--muted)}   /* #438c one scale; #442b/#442c bigger corner */
.bch-chain{display:flex;align-items:center;gap:5px;font-size:16.5px;font-weight:600;color:var(--ink)}
.bch-chain img{display:block;width:18px;height:18px}
.bch-burn{font-size:15px;font-weight:700;color:var(--ink)}   /* #442b/#442c: it rides the same corner column */
/* #417: the ratio head's two legs, priced — the numbers the ratio divides.
   #417b (BossA: "make the eWBTC and wETH price font larger"): they read at
   the head's own weight now — these are the facts the ratio is built from,
   not a footnote to it. */
/* #417c (BossA: "make it larger again and the labels"): the symbols rise with
   their figures — the whole line is the ratio's evidence, so it reads at the
   head's own scale rather than beneath it. */
/* #419 (BossA): the pool's verdict on the COLLAPSED row — the full words in
   the desktop Details column, a single letter on the phone where that column
   is display:none.  Both wear #413y's state inks. */
.det-ps{display:none;margin-left:9px;font-weight:700}   /* the WORDS are the desk's — the phone carries the letter instead, or a row would say it twice */
.det-ps.lx-ps-work{color:var(--card-blue)}
.det-ps.lx-ps-idle{color:var(--idle)}   /* #460: Working keeps its blue (his word); Idle wears grey-yellow */
.det-ps.lx-ps-off{color:var(--err)}
.ps-let{display:none}
@media (hover:none) and (pointer:coarse){
  /* the phone shows the letter — L / I / O since #463's "Live & Off" — as the
     Details column it would otherwise ride is hidden there */
  .ps-let{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:11.5px;
    font-weight:700;line-height:1;padding:2px 5px;border-radius:6px;
    border:1px solid currentColor;vertical-align:middle}
  .ps-let.lx-ps-work{color:var(--card-blue)}
  .ps-let.lx-ps-idle{color:var(--idle)}   /* #460: Working keeps its blue (his word); Idle wears grey-yellow */
  .ps-let.lx-ps-off{color:var(--err)}
}
@media (min-width:960px){
  .det-ps{display:inline}
  /* #463: the verdict word can never wrap or drift — inside a Description
     line it anchors to the cell's right edge in its own reserved slot (the
     stat columns yield room; the word does not move).  The ruled "Live &
     Off" set measures Live 25 · Idle 22 · Off 19px, so 30px reserves it.
     2026-08-28: the Pools section renders through the scoreboard door now,
     so its rows share this anchored seat — one voice, one geometry. */
  .rd-one.has-ps{position:relative;padding-right:32px}   /* BossA 2026-08-28 ("Actuator Farm the %/yr wrapped.  Space so it does not wrap"): the 32px verdict seat is reserved ONLY where a verdict exists (LPX rows) — farm, vault and plain-pair rows get the width back, which is what re-seats the right-justified farm line (#487d widened Claim + %/yr by ~13px) on one row */
  .rd-one .det-ps{position:absolute;right:0;top:0;white-space:nowrap;margin-left:0}
}
/* #418: the burn curve rides under its token's price chart in the same fold */
.bc-burnfold{margin-top:14px;padding-top:10px;border-top:1px solid var(--rowline)}
.bc-burnhead{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.bc-burnhead span{color:#f5a524}
.bch-legs{font-family:var(--mono);font-size:13.5px;color:var(--ink);margin-top:5px}   /* #438c: the dialed size is the base now — the .pair override retired */
.bch-legs b{color:var(--ink);font-size:18px}
/* #394: the share door — a small chip-voice button under the caption */
.bc-share{display:flex;justify-content:center;gap:10px;margin:3px 0 5px}   /* #402: the shelf can hold two — Invert rides beside Share on the ratio fold */
.bc-shbtn{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted);
  background:var(--chipbg);border:1px solid var(--chipline);border-radius:14px;padding:5px 16px;cursor:pointer}   /* BossA 2026-08-18: "Typewrite font" — the one sans element in an all-mono fold falls in line */
/* #402 (BossA: "include a button labeled Invert, that makes the numbers and
   chart switch to PLSX<>PLS"): while the fold reads inverted, the button says
   so — the app's own blue, the #383 dash's voice for "this one is engaged" */
.bc-invbtn.on{color:var(--card-blue);border-color:var(--card-blue)}

/* #196: the WALLET head's provenance note — small, right-justified, never uppercase */
.row-head.pxhead.pxhead-note, #app .row-head.pxhead.pxhead-note{grid-template-columns:1fr}   /* #316a: the "Your Wallet" label left the strip — the stamps hold the line alone, still right-seated */
.row-head .hd-note{justify-self:end;align-self:end;text-align:right;text-transform:none;letter-spacing:0;font-weight:600;font-size:10px;color:var(--muted);white-space:nowrap;cursor:default}

/* #73: settings fence for the operator wing */
.menu-sect{border:1px solid var(--line);border-radius:12px;margin:6px 4px;padding:2px 2px 4px}
.menu-sect.sect-tight{margin:6px 2px;padding:2px 0 4px}   /* BossA 07-29: the Theme/Order fence gives its side room back — the full 12px cost wrapped "Buff" onto a second line at 375px */
.menu-sect-cap{font-family:var(--ui);font-size:11px;color:var(--title);text-align:center;padding:4px 0 2px;letter-spacing:.4px}   /* #102: amber */

/* #73: RPC weather complication — three gateway dots by the gear */
.wxdots{position:absolute;right:54px;top:calc(26px + env(safe-area-inset-top, 0px));transform:translateY(-50%);   /* #411b: the RPC dots share the Day chip's line, so they share its seat correction */
  display:flex;gap:5px;align-items:center;padding:6px;cursor:pointer;border-radius:8px}
.wxdots[hidden]{display:none}   /* #78: author display:flex beats the UA [hidden] rule — without this, Weather Off left gray dots painted */
/* #412c (BossA, reading his Home-Screen shot: "Move the Day field and whole
   top line up 3 px in phone view.  There is wasted space"): the WHOLE line
   lifts as one — the flow children (Blu, gear) ride the header's padding, the
   two absolutely-seated ones (Day chip, RPC dots) ride their own top, and both
   move by the same 3px or the chip drifts off the buttons' line.
   Seated HERE, after .apphead / .hexday / .wxdots, on purpose: this carries the
   same specificity as those base rules, so only source order decides it.  The
   first draft sat above them and would have been silently overruled.
   Phone only — the desk keeps the seat it was given. */
@media (hover:none) and (pointer:coarse){
  .apphead{padding-top:calc(3px + env(safe-area-inset-top, 0px))}
  .hexday,.wxdots{top:calc(23px + env(safe-area-inset-top, 0px))}
}
/* #79: the chain row wears PulseChain's own fade — same stops as the #pls-grad logo gradient */
.plsfade{font-size:14.5px;   /* BossA 07-29: PulseChain RPC speaks 1px above the row */
  background:linear-gradient(to right,#00EAFF,#0080FF,#8000FF,#E619E6,#FF0000);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.wxdots b{width:9px;height:9px;border-radius:50%;background:var(--dot)}
.wxdots b.blu{background:var(--dayok)}
.wxdots b.gold{background:var(--daywait)}
.wxdots b.red{background:var(--err)}

/* #73: the full-screen weather report (header chrome stays above) */
/* #411b: FIXED, so its 56px is measured from the SCREEN's top — which in the
   standalone app is behind the clock.  The full-screen RPC Weather page would
   otherwise start under the island. */
.wxscreen{position:fixed;left:0;right:0;bottom:0;top:calc(56px + env(safe-area-inset-top, 0px));background:var(--page);z-index:40;
  overflow-y:auto;padding:10px 14px 20px}
.wxscreen.hidden{display:none}
.wxhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.wxtitle{font-family:var(--ui);font-size:17px;font-weight:700;color:var(--ink)}
.wxsub{font-size:12px;color:var(--muted);flex:1}
.wxsect{font-family:var(--ui);font-size:12px;color:var(--faint);letter-spacing:.4px;margin:12px 0 6px;text-transform:uppercase}
.wxrow{display:flex;align-items:center;gap:10px;border:1px solid var(--rowline);border-radius:12px;
  padding:9px 12px;margin-bottom:8px;font-family:var(--ui);font-size:13.5px;color:var(--ink)}
.wxrow b{width:10px;height:10px;border-radius:50%;background:var(--dot);flex-shrink:0}
.wxrow b.blu{background:var(--dayok)} .wxrow b.gold{background:var(--daywait)} .wxrow b.red{background:var(--err)}
.wxname{flex:1;font-family:var(--mono);font-size:12.5px}
.wxstat{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px}
.wxfoot{font-size:11.5px;color:var(--faint);margin-top:14px;line-height:1.5}
.wxref{font-size:11px;color:var(--faint);margin:-6px 2px 10px 32px;line-height:1.45}

/* #123's phone chart-button hide RETIRED with the button itself (#337) —
   rotating the phone is STILL the chart toggle there, and now a tap is too. */
/* #123: the sideways face — the middle box's chart fills the screen; the
   overlay sits above everything and vanishes the moment the phone tilts back */
.landchart{position:fixed;inset:0;z-index:80;background:var(--page);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  padding:10px calc(16px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}
.landchart svg{width:100%;max-width:calc(72vh * 2.47);height:auto;display:block}
/* #399c: sideways with the card head on — the chart gives the head its room,
   and the head rides at the chart's own width in a compact voice */
.landchart.lc-hashead svg{max-width:calc(56vh * 2.47)}
.landchart .bch{width:100%;max-width:calc(56vh * 2.47);box-sizing:border-box;padding:0 4px 2px}
.landchart .bch-k{font-size:9px}
.landchart .bch-pct{font-size:21px}
.landchart .bch-now{font-size:11.5px}
.landchart .bch-sym{font-size:12.5px}
.landchart .bch-site,.landchart .bch-chain,.landchart .bch-burn{font-size:10.5px}
.landchart .bch-r{gap:2px}
.lc-head{display:flex;align-items:center;gap:10px}
.lc-title{font-family:var(--ui);font-size:16px;color:var(--title)}
.lc-line{font-family:var(--ui);font-size:17px;color:var(--ink);text-align:center}
.lc-line.sky{color:var(--card-blue)}

/* #124 (BossA): the chart-scale segment on the Token Balances header —
   Price × Qty (the portfolio default) | Price (the unit price alone) */
.pxseg{display:inline-flex;gap:2px;vertical-align:middle;margin-left:8px;padding:2px;
  background:var(--chipbg);border:1px solid var(--chipline);border-radius:8px}
.pxseg button{border:0;background:transparent;color:var(--muted);font-size:10px;font-weight:700;
  font-family:var(--ui);letter-spacing:.02em;padding:3px 8px;border-radius:8px;cursor:pointer;white-space:nowrap}
.pxseg button.on{background:rgba(55,138,221,.22);color:#cfe4fa}

/* #128/#130 (BossA): the privacy curtain — Close BluBox folds the BluBox and
   the Hex Fade away. The button is the TRUE/FUTURE toggle's twin: same size,
   same Blu, same left rail of the middle box (which survives the curtain, so
   Restore always has a home). When TRUE/FUTURE is showing (#yield.vt-on),
   the two stack on the shared rail. */
.bbclose{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:52px;border-radius:12px;
  background:var(--card-blue);border:1px solid rgba(255,255,255,.35);cursor:pointer;padding:4px;z-index:6}
.bbclose .seg{display:flex;align-items:center;justify-content:center;min-height:20px;border-radius:9px;padding:6px 2px;font-size:9px;letter-spacing:.03em;
  font-weight:700;color:rgba(255,255,255,.9);line-height:1;font-family:var(--rounded)}   /* #159 (BossA): flex-centered so the label doesn't drift in the pill at Cmd+/- zoom */
.bbclose .seg + .seg{margin-top:3px}
/* #131 (BossA): Close lives ON the BluBox card (left rail, every lens — the
   lensrail's mirror); while the curtain is drawn the card is gone and
   #bbRestore takes the TRUE/FUTURE slot on the middle box. */
.card .bbclose{left:10px}
.card.ca-on .bbclose{top:20px;transform:none}   /* #182: on the extended Included Addresses face the centered pill would sit ON the rows */
.card.ca-on .card-value{display:none}   /* #182-3 (BossA): no big Total here — that is the front page's detail; this face is the split */
#cardAddrs .ca-addr{font-family:var(--mono);font-size:13.5px;opacity:.75;margin-left:8px}   /* #182-2: the address rides beside the nick on desktop */
@media (hover:none) and (pointer:coarse){#cardAddrs .ca-addr{display:none}}   /* touch keeps the tight row */
/* #188 (BossA, 2026-07-26): "show the whole address — this will require adjusting
   the distance between existing columns."  All 42 characters print at 351px in
   this mono face (measured), so the desktop list widens from 400 to 660 and the
   row becomes three columns: nick | whole address | value.  The address column
   right-aligns inside the name cell and the value cell takes a fixed width, so
   the three columns line up DOWN the list however long the nicks are.  Touch is
   untouched — .ca-addr is display:none there and the row keeps its tight pair. */
@media (min-width:960px){
  /* BossA 2026-08-29 ("Now make the text readable"): one line could not hold
     nick + 42 whole characters + value inside the half card — the nicks
     ellipsized away and the values printed OVER the address tails.  The row
     is TWO LINES now: nick and value at full size on the first, the whole
     address beneath in small readable mono.  #188's essence (all 42
     characters, checkable) holds; nothing overlaps at any width. */
  /* BossA 2026-08-29 ("Make the letters larger.  Why would you make the
     letters small and have open space"): the two-line row existed only to
     seat 42 characters — his short form ("0x9a6…07c03") fits ONE line at
     FULL size, so the row is one line again and the small type is gone. */
  #cardAddrs{max-width:none;padding:0;margin-left:-32px;margin-right:-32px;width:calc(100% + 64px);margin-top:84px}   /* BossA 2026-08-29 (the stray chevron on $2,823 — MEASURED: the top-pinned pill's foot at y234 over the first value at y204): full-width rows START BELOW the pill's lane, so the arrows never sit on the money */   /* BossA 2026-08-29 ("So much wasted space on the left and right sides"): the card's own 46px side padding measured as the waste — the list bleeds into it down to a 14px inset, so the rows use the card's width */
  #cardAddrs .ca-name{display:flex;align-items:baseline;gap:12px;min-width:0;flex:1}
  #cardAddrs .ca-nick{overflow:hidden;text-overflow:clip;white-space:nowrap;min-width:9ch}   /* BossA 2026-08-29 ("not use the ... and get the digits shown"): the ellipsis spent two characters saying nothing — a clean clip shows real letters to the last pixel */   /* BossA 2026-08-29: the name FLEXES — guaranteed 9 characters (his "8... 9"), takes 13-14 whenever the row has room; the address's last five outrank a longer name when space runs out */
  #cardAddrs .ca-nick.ca-fb{display:none}   /* unnicked: the short address alone names the row */
  #cardAddrs .ca-addr{margin:0 0 0 auto;white-space:nowrap;font-size:15px;opacity:.85;flex:0 0 auto}   /* BossA 2026-08-29 ("Slide the address right... and right justify"): margin-left:auto seats every address against the copy column — ONE right edge, and the freed slack lands on the name's side */   /* BossA 2026-08-29 ("too many first digits and not enough last 5"): the ADDRESS never shrinks — 0x+5…5 is sacred; the name is the flex column */
  #cardAddrs .ca-addr{cursor:copy;touch-action:manipulation}   /* BossA 2026-08-29: the address IS the copy control — double-click copies (the symbol retired); the cursor says so */
  #cardAddrs .ca-usd{text-align:right}   /* BossA 2026-08-29 ("more room between the copy symbol and the $"): no reserved width — the column is sized AT RENDER to the group's own widest value (renderCard measures), so the gap is exactly one column's worth and the name gets the rest */
}
body.bb-closed .card, body.bb-closed .rankwrap{display:none}
/* ---- #218 (BossA, 2026-08-01): "There needs to be a way to hide the Value card.
   It's nice to see at a glance, but when looking at Balances with dropdowns, it
   takes too much space."  This is NOT the Hide BluBox curtain above — that one
   is a privacy gesture, it takes the Rank with it, and it can carry an unlock
   code.  This is room: one Settings toggle, remembered, and the Rank stays.
   SCREEN ONLY — on paper the print presets already decide what the sheet
   carries (#209's four), and a screen preference must not rewrite a preset.

   ⚠️ #222 (BossA, 2026-08-02): "The BluBox card is gone, not the Value card.  The
   BluBox card scrolls away, so that is fine the way it was."  #218 aimed at
   `.card` — the blue Total Wallet card — which is the BLUBOX card, not this
   one.  The Value Card is #yield: the box whose title becomes "<the row you
   tapped> Value" and whose figure is that row's worth ("LP HEX⇆HTT-5000 =
   $750").  Re-aimed, and the Total Wallet card is untouched again.

   `:not(.bb-closed)` is LOAD-BEARING, not tidiness: Restore BluBox lives INSIDE
   #yield (#131 put it there deliberately — the card it restores is hidden, so
   its own control cannot ride on it).  Hiding this box while the curtain is
   drawn would take the only way back with it, and a control the user cannot see
   is one this app does not ship.  So while BluBox is hidden, the Value Card
   stays regardless of this setting.
   Safe on the Prices view: that board is #pane, a different element. ---- */
@media screen { body.novalcard:not(.bb-closed) #yield, body.novalcard:not(.bb-closed) #card, body.novalcard:not(.bb-closed) .rankwrap{display:none} }   /* #338 (BossA, 2026-08-14): "If the Hide Value button hides, the BluBox and Hex fade need to be hidden as well.  The reason ... is to make space to look at Balances."  All three top cards fold together; :not(.bb-closed) stays — under the curtain #yield must stand (Restore lives on it) and the curtain manages the other two itself */
.modal-code{display:block;width:100%;margin:10px 0;background:var(--btn);border:1px solid var(--btnline);
  border-radius:8px;color:var(--ink);font-size:15px;padding:10px 11px;font-family:var(--mono)}

/* #141 (BossA): the curtain's prompt line — smaller, plain Arial Bold (the
   value lines wear Arial ROUNDED Bold; the straight face marks instruction) */
.yield-line.prompt{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:14px;color:var(--muted)}

/* #142: the landscape day-range pill — the portrait pill's twin */
/* #271: the same stability for the landscape head — the chip holds one width
   and the window rail is pinned to the right edge, so neither a longer window
   label nor a longer token title re-seats the arrows. */
.landchart .lc-head .chip{width:100px;text-align:center;box-sizing:border-box}
.landchart .lc-rail{margin-left:auto}
.landchart .lc-rail{display:inline-flex;align-items:center;gap:2px;background:var(--chipbg);
  border:1px solid var(--chipline);border-radius:12px;padding:0 3px;height:24px}
.landchart .lc-rail .cbtn{background:none;border:0;width:36px;height:20px;color:var(--ink)}
.landchart .lc-dots{display:flex;gap:3px;padding:0 3px}
.landchart .lc-dots b{width:6px;height:6px;border-radius:50%;background:var(--dot)}
.landchart .lc-dots b.on{background:var(--doton)}

/* BluBox-Vault (2026-07-22): the phone's front door. Opaque — the empty-booted
   app behind it never reads. .entry supplies the card; the container centers it. */
#vaultGate{position:fixed;inset:0;z-index:120;background:var(--page);display:flex;
  align-items:flex-start;justify-content:center;overflow:auto;padding:calc(46px + env(safe-area-inset-top, 0px)) 20px 20px}   /* #411: the vault door is the FIRST screen a locked Home-Screen copy shows — its card must clear the island too */
.entry ul.sub{margin-left:16px}   /* the "which method locks it" sub-bullets */
#setVault{color:var(--gold)}   /* BossA's ruling: the Vault label wears amber — the row must catch the eye */
.chain-ico{width:15px;height:15px;display:inline-block;vertical-align:-3px;margin-right:4px}   /* chain-row logos (2026-07-22): real marks at row size */   /* BossA 07-29: both marks up 1px */
.chain-ico-eth{width:9.6px}   /* the diamond is tall — narrow box keeps it visually level with the pulse hex (width tracks the 1px height bump) */
.menu-item[hidden]{display:none}   /* .menu-item's display:block was beating the hidden attribute — the Vault row leaked onto desktop */

/* Rung-1 Welcome face (2026-07-22): the Price card's once-per-session greeting.
   Straight Arial Bold marks instruction (the #141 convention); the mono path
   wears card-blue so the checkable thing is the visually distinct thing. */
.greet{padding:14px 6px 10px;text-align:center;margin:0 calc(15px - 56px) 0 calc(15px - 72px)}   /* same rail-padding compensation as the head — the message centers on the CARD */
/* #278 (BossA option 1: "Welcome moves to whatever card is visible"): on the
   pane card the yield rail compensation has no rail to compensate — margins
   reset so the message centers on THIS card.  The belt below is for a stray
   porta outliving dormancy (the renderYield restore is the suspenders). */
#greetPorta .greet{margin:0}
body:not(.bb-dormant) #greetPorta{display:none}
.greet-main{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:17px;color:var(--ink);line-height:1.55}
.greet-main .greet-addr{display:block;font-family:var(--mono);font-size:15px;color:var(--card-blue);margin-bottom:2px}   /* its own line, no underline — a signpost, not a door (BossA): nothing detours the balance-seeker */
.greet-tap{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:15px;color:var(--gold);margin-top:12px}   /* BossA: the main action wears amber, 1px up from the ink pass */

/* Dormant open (BossA's rulings 2026-07-22): until the wallet awakens, every value
   is BLANK — visibility keeps the layout steady while nothing personal reads.
   A veil, not $0: zero is a false number and the load-failure symptom. Visual
   only — the chain reads continue underneath, so awakening is instant. */
body.bb-dormant #yield .head-right{display:none}   /* the empty control cluster kept Welcome off-center */
body.bb-dormant #yield .box-head{margin:0 calc(15px - 56px) 0 calc(15px - 72px)}   /* the box pads 72/56 for its rails; symmetric 15px gaps truly center Welcome */
/* BossA's blessing ("awesome as the opening look"): the veiled cards COLLAPSE —
   a slim true-blue bar, the fade frame holding only the logo — while the token
   pane keeps its tall frame, an empty space promising nothing. */
body.bb-dormant .card-title,body.bb-dormant .rank-title,body.bb-dormant #paneTitle,
body.bb-dormant .card-value,body.bb-dormant .card-foot,
body.bb-dormant .lensrail,body.bb-dormant .lensdots,body.bb-dormant .bbclose,
body.bb-dormant .rank-cols,body.bb-dormant .rankrail,body.bb-dormant .rank-chartwrap,   /* #336: the whole rail sleeps (arrows + dots), not just the old dots button */
body.bb-dormant #cardAddrs{display:none}   /* #182: the address list sleeps under the dormant veil like the rest of the card */
body.bb-dormant #paneBody,body.bb-dormant #pane .cluster,
body.bb-dormant #pane .timerlock,body.bb-dormant #pane .searchlock,body.bb-dormant #pane .cbtn{visibility:hidden}   /* #210: the spyglass sleeps with the rail */
.work ul{margin:0;padding-left:16px;list-style:disc}   /* #151 (BossA): Show Work reads as bullets */
.work li{margin:3px 0}
/* #186 (BossA): the "= total" line is the CONCLUSION of the line above it, not
   another item — "needs an indent and no bullet".  So: no marker, indented past
   the bullet text, and a hanging indent so a long total wraps under its own "="
   instead of running back to the margin. */
.work li.wl-total{list-style:none;margin-left:12px;padding-left:14px;text-indent:-14px}
/* ---------- #189 (BossA): the LPX pool CARD.  DESKTOP ONLY ("This can be desktop
   only") — the card and the bullets both render, and width picks one, the same
   two-homes pattern #169n uses for the month legend.  Under 960px nothing here
   applies and the phone fold is byte-for-byte what it was.

   ⚠️ #234 (BossA, 2026-08-02): "Printing the Balance page in detail does not show
   the PlusX dropdown."  It could not: LETTER IS 816px, under this 960px bar, so
   on paper the whole block below never applied — the card stayed display:none
   and the PHONE bullets printed in its place.  The #188 note further down had
   already written that sentence about #cardAddrs and nobody carried the lesson
   here.  `, print` is the whole fix: paper gets the card and loses the bullets,
   exactly like the desk.  The width suits it — the fold is ~806px on screen and
   the card lays out at ~775px, which is what a Letter page gives it too. ---------- */
.lpxcard{display:none}
@media (min-width:960px), print{
  #app .work.haslpx > ul{display:none}          /* on the desk the card IS the fold */
  #app .work.haslpx .lpxcard{display:block}
  /* #416 (BossA: "Enlarge all text, Do not enlarge the Chart text: High/Low,
     Dates, and Thought"): one step up across the card's HTML text.  The
     chart's own labels are SVG drawn in app.js — no CSS reaches them, so his
     exclusion holds by construction. */
  .lpxcard{font-family:var(--sys);font-size:14px;line-height:1.5;color:var(--ink)}
  /* ONE grid for the card's DATA — sections and rows are display:contents, so
     every line's label / quantity / value land in the same three columns and
     all three size themselves to their own widest entry.  Fixed tracks would
     have been a guess: a 253,629,903.3808 PRVX side is real, and a bigger one
     overflowed into the column beside it.
     #189b (BossA): `width:max-content` is the whole ruling — the block stops at
     its own content instead of stretching to the fold, so a label sits a gap
     away from its number rather than a column away. */
  /* #218: the LABEL column is `auto`, not max-content — under the two-track grid
     below this block gives way before the history does, and a squeezed label
     must WRAP (auto's floor is min-content) rather than push its own figures out
     of the box.  The two number columns stay max-content: a wrapped figure is
     unreadable.
     ⚠️ TWO measured dead ends on the way here, both worth not repeating:
     `minmax(0,max-content)` resolved the label column to 0px and blew the two
     number columns to 371px each — a 0 min never grows back under negative free
     space.  And `width:max-content` on the box fought the same battle from the
     other side.  #189b's ruling survives both: the width now comes from the
     TRACK, which is itself max-content whenever the card has room, so the block
     still stops at its own content — it only yields when the history needs its
     floor. */
  /* #413o (BossA ruled option 2 of the visual pass, "one change at a time"):
     ZONE PANELS.  Each section becomes its own softly rounded panel — the chip
     voice's background and border — so the eye finds structure without
     reading.  Mechanically: .lx-body stops being the one shared grid (a
     display:contents section cannot paint a panel) and becomes a column of
     panels; each .lx-sec carries the SAME three-track grid itself, so every
     row keeps its label/quantity/value seats.  Columns align within a panel,
     not across panels — panels made cross-panel alignment moot.  #218's
     escapes and the 1/-1 spans now answer to the section's grid, unchanged. */
  .lpxcard .lx-body{display:flex;flex-direction:column;gap:9px;width:100%;max-width:100%}
  .lpxcard .lx-sec{display:grid;grid-template-columns:auto max-content max-content;column-gap:22px;
    background:var(--chipbg);border:1px solid var(--chipline);border-radius:12px;padding:7px 12px 9px}
  .lpxcard .lx-row{display:contents}
  /* ⚠️ #218: PROSE MUST NOT SIZE THE COLUMNS.  MEASURED on a live-shaped card —
     the two notes and the gauge's caption carry 470–800px of max-content each,
     and as full-row grid items they grew this block's three tracks to 787px
     inside a 377px box: the Value column landed 65px INSIDE the Position History
     pane beside it.  #197's flex-wrap hid the defect rather than fixing it —
     the history simply wrapped away and handed the left block the whole card,
     which is exactly the inconsistency BossA is asking us to remove.
     width:0 + min-width:100% is the standard escape: the item contributes
     nothing to intrinsic track sizing and still renders across the full row. */
  /* #413u: these were .lx-body-scoped and SILENTLY STOPPED MATCHING when the
     zone gadget moved to the shelf (#413q) — the chart fell to part width while
     the gauge, styled elsewhere, spanned on (BossA: "Why is there still empty
     space on the right side?").  Card-scoped now: they hold in both homes. */
  .lpxcard .lx-note,.lpxcard .lx-gauge,
  .lpxcard .lx-foot,
  .lpxcard .lx-chartslot,   /* #413/#413d: the pool chart's slot is a full-row item — it must never size the three tracks */
  .lpxcard .lx-notedoor,.lpxcard .lx-footfold,   /* #413n: the note doors and their folds are full-row items too */
  .lpxcard .lx-h{width:0;min-width:100%}
  /* #413: the pool price chart — the fold's own bc-svg grammar, sized to the row.
     grid-column:1/-1 is load-bearing: the escape list above only stops the box
     from SIZING the tracks — placed in one column it rendered ~190px wide on
     BossA's own screen (his report, 2026-08-20: "The chart does not show").
     Spanning all three tracks is what gives min-width:100% the full row. */
  .lpxcard .lx-chartslot,.lpxcard .lx-gauge,
  .lpxcard .lx-notedoor,.lpxcard .lx-footfold{grid-column:1/-1}   /* #413b's lesson: the escape only stops sizing — spanning is this line.  #413o doors; #413u card-scoped + the gauge, so auto-placement can never seat one in a side column */
  .lpxcard .lx-chartw{margin:8px 0 0}   /* #413q: the chart's own frame retired — the gadget (.lx-zonesec) wears it */
  .lpxcard .lx-zonesec{border-width:1.5px;border-color:transparent;border-radius:16px;
    grid-template-columns:minmax(0,1fr) max-content max-content}   /* #413t: the first track absorbs the free space — no dead air right of the plot */
  .lpxcard .lx-quote{grid-column:1/-1;margin:1px 0}
  .lpxcard .lx-quote span{font-weight:700}
  /* #414: the gauge's five voices — ticks and labels in the chart's own inks */
  /* #414c (BossA: "Move Sell up and OMP down.  Use an arrow type point
     towards their bars"): the lanes gain air and each label wears a caret
     aimed at its own peg — Sell's points down from above, OMP's points up
     from below */
  .lpxcard .lx-gnames{position:relative;height:27px;font-family:var(--mono);font-size:11.5px;font-weight:700}
  .lpxcard .lx-gnames span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;text-align:center}
  .lpxcard .lx-gnames span::after{content:'▾';display:block;line-height:.7;font-size:11px}
  /* #414c: the ends are REAL places — colored caps, so "Min Buy 0.000374152"
     visibly names the gray cap it sits beneath (his question: "Why is it not
     on the bar?" — it IS the bar's left edge, and now the edge shows it) */
  .lpxcard .lx-gtrack::before,.lpxcard .lx-gtrack::after{content:'';position:absolute;top:-3px;width:3.5px;height:9px;border-radius:2px}
  .lpxcard .lx-gtrack::before{left:0;background:#7f8ea3}
  .lpxcard .lx-gtrack::after{right:0;background:#c9a15f}
  .lpxcard .lx-gt-sell{color:#f23645}
  .lpxcard .lx-gt-buy{color:#0aa14f}
  .lpxcard .lx-gt-omp{color:#00eaff}
  .lpxcard .lx-gt-minbuy{color:#7f8ea3}
  .lpxcard .lx-gt-maxsell{color:#c9a15f}
  /* #414b: lanes — Buy pegs the TOP edge, OMP pegs the BOTTOM edge, Sell's
     marker crosses; stacked prices stay tellable and the split means
     something: the pool's own quotes above, the market below */
  .lpxcard .lx-gtrack b.lx-gt-buy,.lpxcard .lx-gtrack b.lx-gt-omp{position:absolute;width:2.5px;border-radius:2px;transform:translateX(-50%)}
  .lpxcard .lx-gtrack b.lx-gt-buy{background:#0aa14f;top:-5px;height:9px}
  .lpxcard .lx-gtrack b.lx-gt-omp{background:#00eaff;bottom:-5px;height:9px}
  .lpxcard .lx-gnamesb{position:relative;height:27px;font-family:var(--mono);font-size:11.5px;font-weight:700;margin-top:5px}
  .lpxcard .lx-gnamesb span{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap;text-align:center}
  .lpxcard .lx-gnamesb span::before{content:'▴';display:block;line-height:.7;font-size:11px}
  /* #413y: the verdict wears its state's voice — blue working, muted idle, red off */
  .lpxcard .lx-pstate.lx-ps-work{color:var(--card-blue)}
  .lpxcard .lx-pstate.lx-ps-idle{color:var(--idle)}   /* #460: Working keeps its blue (his word); Idle wears grey-yellow */
  .lpxcard .lx-pstate.lx-ps-off{color:var(--err)}
  .lpxcard .lx-chartbig .lx-zonesec{padding:10px 16px 12px}   /* a touch more air at full width */
  .lpxcard .lx-chartw svg{cursor:pointer}   /* #413d: the #404 convention — the chart itself is the expand door */
  .lpxcard .lx-chartbig{margin:12px 0 4px}
  /* #413k: the chart's own name plate — marks first, words after.
     #413l (BossA: "Place this in a rounded corner border in the tokens fade"):
     a pill whose border runs the fund token's own fade — the gradient border
     rides an inline style from renderLpxChart, where the fade is known. */
  .lpxcard .lx-chead{display:flex;align-items:flex-start;gap:7px;margin:0 0 2px}   /* #413p pill retired; #413v the table rides this row's right */
  .lpxcard .lx-chead .lx-linetbl{margin-left:auto}
  .lpxcard .lx-chead .lx-chlogo,.lpxcard .lx-chead .lx-chpair,.lpxcard .lx-chead .lx-chpool{margin-top:3px}
  .lpxcard .lx-zht{margin-right:0}
  .lpxcard .lx-chlogo{width:20px;height:20px;border-radius:50%;display:block}
  .lpxcard .lx-chlogo2{margin-left:-2px}   /* #413l (BossA: "The logo overlap") — side by side, a hair apart */
  .lpxcard .lx-chpair{font-family:var(--ui);font-size:16px;font-weight:700;color:var(--ink)}
  .lpxcard .lx-chpool{font-family:var(--sys);font-size:13.5px;color:var(--muted)}
  /* #413l: the fine-print door — one short line; the sentences open on click */
  .lpxcard .lx-footdoor{display:block;background:none;border:none;padding:2px 0;cursor:pointer;
    font-family:var(--sys);font-size:13.5px;color:var(--muted);text-align:left}
  .lpxcard .lx-footdoor::after{content:' ▸'}
  /* #413n: the note doors — a two-word LINK in the app's own accent voice */
  .lpxcard .lx-notedoor{color:var(--card-blue);text-decoration:underline;font-size:13.5px;font-weight:400;margin:1px 0}
  /* #413z (BossA: "Place it in a card and the other read note information on
     it's related card"): every opened note is its own small card */
  .lpxcard .lx-footfold:not([hidden]){background:var(--chipbg);border:1px solid var(--chipline);border-radius:10px;padding:8px 12px;margin:4px 0 6px}
  .lpxcard .lx-notedoor::after{content:''}
  .lpxcard .lx-workdoor{font-weight:700;color:var(--ink);font-size:14px;margin-bottom:3px}   /* #413l: Show Work's door keeps the heading's voice */
  .lpxcard .lx-footdoor.open::after{content:' ▾'}
  .lpxcard .lx-crail{display:flex;justify-content:flex-start;align-items:flex-start;gap:8px;margin:2px 0 0}   /* #413v: ranges alone — the table moved up beside the plate; tighter, the plot rides higher */
  /* #413g: the range chips — the board rail's words in the chip voice, sized down */
  .lpxcard .lx-rangec{display:flex;gap:6px;flex-wrap:wrap}
  .lpxcard .lx-rbtn{padding:3px 11px;font-size:12.5px}
  /* #413h: the show/hide table — five rows in his order, where the Max Sell
     chip stood; a row engaged = its line drawn, a hidden line's row dims */
  .lpxcard .lx-linetbl{display:flex;flex-direction:column;gap:2px}
  .lpxcard .lx-lrow{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;font-weight:600;
    color:var(--muted);background:var(--chipbg);border:1px solid var(--chipline);border-radius:8px;
    padding:2px 10px;cursor:pointer;opacity:.5;text-align:left;min-width:215px}
  .lpxcard .lx-lv{margin-left:auto;font-weight:700}   /* #413s: the row's live value rides the right edge */
  .lpxcard .lx-lrow.on{opacity:1;color:var(--ink)}
  /* #413e: the row swatches — a short sample of the line's own ink and dash;
     the dimmed state answers the Max Sell chip (line off -> key says so) */
  .lpxcard .lx-sw{display:inline-block;width:16px;border-top:2px dashed;vertical-align:middle;margin-right:7px}
  /* #413h: a hidden line dims its swatch on the price rows — key and chart one story */
  .lpxcard.lx-off-maxsell .lx-swk-maxsell,.lpxcard.lx-off-sell .lx-swk-sell,
  .lpxcard.lx-off-ourprice .lx-swk-ourprice,.lpxcard.lx-off-buy .lx-swk-buy,
  .lpxcard.lx-off-minbuy .lx-swk-minbuy{opacity:.25}
  /* #413f: the thought bubble's gentle bob — a reading, not an alarm */
  @keyframes lxbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
  .lpxcard .lx-bub{animation:lxbob 3.4s ease-in-out infinite}
  /* #413c: an off-scale wall's note — right-aligned under the chart, echoing
     the edge its line would have ridden */
  .lpxcard .lx-chartw .lx-chartnote{text-align:right;margin-top:0}
  .lpxcard .lx-chartw svg{width:100%;height:auto;display:block}
  /* ⚠️ #218b (BossA, 2026-08-19, on a 14-inch Air: "The Max Sell is wrapped and
     the dollar amount is pushed across the center line in some LPXs").  That is
     #218's own failure, verbatim — a full-row item sizing the three tracks until
     the Value column crosses into the Position History pane beside it.
     .lx-foot was the one left out.  It sits on the SAME rule line as .lx-note
     (grid-column:1/-1, below) but never joined the escape above, and it carries
     the longest prose on the card: the derivation sentence plus the 95-character
     PlusX caveat.  As a max-content full-row item that inflates all three
     tracks, which squeezes the auto label column until even "Max Sell" breaks in
     two — while the card still LOOKS to have room, because the room is held by
     the history pane's 404px floor.
     Bites on a 14-inch and not a 16-inch because the floor's note assumed the
     fold's parent is a fixed 806px at every desktop width; that assumption is
     what a narrower machine breaks.
     NOT VERIFIED LOCALLY: the card renders only for a real wallet holding a
     PlusX position, and the sample carries none, so no render path here can show
     it.  Found by reading, matched to his symptom, and awaiting his eyes.
     .lx-head remains the last unescaped full-row item — short today (pool #,
     pair, share), so left alone rather than changed on speculation. */
  /* the head carries the three facts the collapsed row also shows — kept here
     because the fold has to stand on its own when it is what you are reading */
  /* #413r: the head lives INSIDE the first panel now — a hair of separation
     below it, the panel's border above */
  .lpxcard .lx-head{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;margin-bottom:4px;
    padding-bottom:6px;margin-bottom:2px;border-bottom:1px solid var(--line)}
  .lpxcard .lx-pool{font-family:var(--ui);font-size:16.5px}
  .lpxcard .lx-pair{font-family:var(--ui);font-size:16.5px;color:var(--muted)}
  .lpxcard .lx-share{margin-left:auto;font-variant-numeric:tabular-nums}
  /* #413m (BossA ruled 3): headings step back so DATA is the loudest ink —
     smaller, letterspaced, muted; no text-transform, because a token symbol's
     case is its identity (uPX is not UPX) */
  .lpxcard .lx-h{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;font-weight:700;margin:8px 0 3px;
    font-size:12px;letter-spacing:.07em;color:var(--muted)}
  .lpxcard .lx-h .lx-sub{letter-spacing:normal}
  /* #413m: and the two numbers a reader came for get the crown */
  .lpxcard .lx-tot .lx-k,.lpxcard .lx-tot .lx-v{font-size:15.5px}
  .lpxcard .lx-hil,.lpxcard .lx-h12{font-size:15px}
  /* #413m (BossA ruled 1): the fold's flat blue edge yields to the token's own
     fade — desk only; the phone fold keeps the house blue with its bullets */
  #app .work.haslpx{border-left-color:transparent}
  .lpxcard{position:relative;padding-left:13px}
  .lpxcard::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:3.5px;border-radius:2px;
    background:var(--lxfade,var(--card-blue))}
  .lpxcard .lx-sub{font-weight:400;color:var(--muted);font-size:12.5px}   /* the NTZ caption rides its header */
  .lpxcard .lx-k,.lpxcard .lx-q,.lpxcard .lx-v{padding:1px 0;font-variant-numeric:tabular-nums}
  .lpxcard .lx-q,.lpxcard .lx-v{text-align:right;white-space:nowrap}
  /* display:contents leaves a row with no box of its own, so a total's rule is
     its own full-width element rather than a border that would break at the gaps */
  .lpxcard .lx-rule{grid-column:1/-1;border-top:1px solid var(--rowline);margin:3px 0 2px}
  .lpxcard .lx-rule-foot{margin-top:9px}
  .lpxcard .lx-tot .lx-k,.lpxcard .lx-tot .lx-v{font-weight:700}
  .lpxcard .lx-spot .lx-k,.lpxcard .lx-spot .lx-v{font-weight:700}   /* Price is the one the eye hunts for; the four zone bounds frame it */
  .lpxcard .lx-wall .lx-k,.lpxcard .lx-wall .lx-v{font-weight:700}   /* #197f (BossA): the WALLS bold too — he read Sell as Max Sell; the stale boundaries must not dress like the NTZ band */
  /* #215: "Run by you" is the one word on this card that changes what every
     number below it means — your own pool has no manager taking a joiner's fee.
     It reads bold; someone else's manager reads as a plain address, because an
     address is all we can honestly say about them. */
  .lpxcard .lx-mine .lx-v,.lpxcard .lx-you{font-weight:700}
  /* the market comparison sits a half-step back from the five prices — it
     ANNOTATES the Price line rather than joining the zone it describes */
  .lpxcard .lx-mkt .lx-k{color:var(--muted)}
  .lpxcard .lx-far .lx-k,.lpxcard .lx-far .lx-v{color:var(--err);font-weight:700}   /* 2x or more from our own price — the zone has been left behind */
  /* #189d (BossA): two zones — the position as it stands on the left, how it got
     there on the right.  The left keeps its max-content width so labels stay
     beside their figures; the right takes whatever is left and has room to grow
     into, which is what BossA asked the width to be spent on. */
  /* #218 (BossA: "make the row show the Position History beside the Held in
     Wallet column.  It is in some pools and not in others"): #197's flex-wrap
     dropped the history BELOW the position whenever less than ~300px remained
     beside it — and that width is set by the left block's own content, so the
     same card read one way on one pool and another way on the next.  Two grid
     tracks settle it: the history track keeps a 300px floor and the position
     track gives way first (its labels wrap).  #197's actual guarantee still
     holds below — the hrow's shrinkable columns and this pane's overflow:hidden
     are what keep the Value column inside the card.
     The second track is declared only on .lx-2col, which the card adds when a
     history exists — a card without one must not reserve 300px of empty air. */
  .lpxcard .lx-cols{display:grid;grid-template-columns:minmax(0,max-content);align-items:start;gap:18px}
  /* the floor is 404px, not #197's 300: with each side now carrying its dollars
     under its count, 300px left the two number columns ~54px and every
     303,928,631 in them ellipsised away.  #219 raised it again — bolding the
     Now row (BossA) widened a 12-character count past the 83px that 380px
     bought, and it ellipsised to "301,500,0…".  MEASURED: 404px puts ~95px in
     each number column, which clears a BOLD 12-character count, and still
     leaves the position block ~353px — above the gauge's ~280px of labels.
     The pair needs ~700px of card to sit side by side without the position
     block spilling.  MEASURED: the fold's parent is a FIXED 806px at every
     desktop width (960 and 1280 both), so the card is ~775px always — there is
     no reachable width where this floor bites. */
  .lpxcard .lx-cols.lx-2col{grid-template-columns:minmax(0,auto) minmax(404px,1fr)}
  .lpxcard .lx-hist{min-width:0;background:var(--chipbg);border:1px solid var(--chipline);
    border-radius:12px;padding:8px 14px 10px}   /* #413o: Position History wears the same panel — the divider line retired with it */
  /* #190: the wallet label takes the label AND quantity columns.  Sized into
     column 1 it would set that column's max-content width — a label carrying an
     address, a nickname AND a preset is ~210px, which came straight out of the
     history zone's number columns. */
  .lpxcard .lx-held .lx-k{grid-column:1/3;font-weight:700}   /* #197d (BossA): the wallet identity speaks bold */
  .lpxcard .lx-held .lx-q{display:none}
  .det-ceil{}   /* #330 (BossA): the wall label reads PLAIN at rest — #197c's always-bold retired; urgency is earned, not worn */
  .det-ceil.det-hot{color:var(--err)}   /* #330: red at ≥90% of the way to a wall ("10% from each side, max & min, or it becomes noise") */
  .det-ceil.det-max{font-weight:700;font-size:1.2em}   /* #330: the last 5% — "Bolding and enlarging the font 20%" — the real alarm */
  .lpxcard .lx-hist .lx-h{margin-top:0}
  .lpxcard .lx-hnote{color:var(--muted);padding-left:14px;text-indent:-14px}
  /* #197 (BossA's screenshot): FIXED columns cannot shrink, and on a narrower
     desk the left zone left this grid less than its 196px of fixed mins — the
     Value column fell off the card's right edge.  Every column now has a
     shrinkable floor; the two quantity columns give way first (ellipsis),
     the Value column never leaves the card. */
  /* #466 (BossA's screenshot: "2025-07-12Opening" — column overlap): the Date
     and Move tracks were CAPPED (72px/52px) under nowrap cells, so a full ISO
     date and "Opening" overflowed their tracks into each other at larger text
     sizes.  max-content lets each fit what it actually says; the two fr
     quantity columns give the room back. */
  .lpxcard .lx-hrow{display:grid;grid-template-columns:minmax(62px,max-content) minmax(40px,max-content) minmax(0,1fr) minmax(0,1fr) minmax(50px,max-content);
    gap:6px;font-variant-numeric:tabular-nums;padding:1px 0}
  .lpxcard .lx-hist{overflow:hidden}
  /* an ISO date breaks at its own hyphens if left to wrap — width alone is not the fix */
  .lpxcard .lx-hd,.lpxcard .lx-hm{white-space:nowrap}
  .lpxcard .lx-hsum .lx-hd,.lpxcard .lx-hil .lx-hd{white-space:normal}
  .lpxcard .lx-hf,.lpxcard .lx-ha,.lpxcard .lx-hv{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* #218: the second line inside a summary cell — the side's DOLLARS under its
     count, and the growth percent under its quantity.  A step back in ink and
     size so the count still leads; the cell keeps one text-align and one
     column, so the two lines stay stacked on the same right edge. */
  /* #219 (BossA): "Make the dollar amounts below the token Qty … the same font
     size as the token Qty."  The 11.5px step-down is gone — the second line is
     a figure the reader compares across columns, not a caption.  Only the ink
     steps back now, and it inherits weight so a bolded row bolds both lines. */
  .lpxcard .lx-hu{display:block;color:var(--muted)}
  /* two lines need room to be two lines — the clip guard (#197) stays on, and it
     is no longer what cuts the growth percent off: the percent has its own line. */
  .lpxcard .lx-hsum .lx-hf,.lpxcard .lx-hsum .lx-ha,
  .lpxcard .lx-hgrow .lx-hf,.lpxcard .lx-hgrow .lx-ha{line-height:1.35;padding-bottom:2px}
  .lpxcard .lx-hhead{color:var(--muted);font-weight:700}
  .lpxcard .lx-hhead .lx-hf,.lpxcard .lx-hhead .lx-ha,.lpxcard .lx-hhead .lx-hv{color:var(--ink)}
  /* #189e: the verdict — did the pool beat holding?  It is the line the eye
     should land on, so it reads bold and takes the good/bad ink the app already
     uses for a gain and a loss. */
  .lpxcard .lx-hil span{font-weight:700}
  /* #197c (BossA): the WHOLE verdict row wears its color — BluBox blue for a
     gain (his call, over the app's green), red for a loss */
  .lpxcard .lx-hil.lx-up span,.lpxcard .lx-h12.lx-up span{color:var(--card-blue)}
  .lpxcard .lx-hil.lx-down span,.lpxcard .lx-h12.lx-down span{color:var(--err)}
  /* #218: the 12-month PACE takes the verdict's shape and its ink.  #219 (BossA)
     re-ruled the weight — it reads BOLD, the same as the verdict it paces: he
     asked for the line, so it is not a footnote to the line above it. */
  .lpxcard .lx-h12 .lx-hd{grid-column:1/4;white-space:normal}
  .lpxcard .lx-h12 .lx-hm,.lpxcard .lx-h12 .lx-hf{display:none}
  .lpxcard .lx-h12 span{font-weight:700}
  /* #219 (BossA): "Make the row 'Now…' Bold" — label, both counts, both dollar
     lines and the total.  It is the row the whole ledger settles into. */
  .lpxcard .lx-hnow span{font-weight:700}
  .lpxcard .lx-hnow .lx-hu{color:var(--ink)}
  /* #219 (BossA): "Make the titles and numbers in Your Position Bold." */
  .lpxcard .lx-pos .lx-k,.lpxcard .lx-pos .lx-q,.lpxcard .lx-pos .lx-v{font-weight:700}
  /* ---- #219 (BossA): "Add the math you used to calculate the loss/gain and 12 mo
     pace.  Show Work."  The #50 law rules the shape — bullets, system sans,
     12.5px, full ink, never mono and never muted.  The arithmetic line under
     each bullet is the one indent, so the claim and its working read apart. ---- */
  .lpxcard .lx-hwork{margin-top:8px;border-top:1px solid var(--rowline);padding-top:6px}
  .lpxcard .lx-wh{font-weight:700;margin-bottom:3px}
  .lpxcard .lx-hwork ul{margin:0;padding-left:15px}
  .lpxcard .lx-hwork li{margin:0 0 4px}
  .lpxcard .lx-wm{display:block;font-variant-numeric:tabular-nums}
  /* the verdict's label takes the three left columns; its percent lands in the
     anchor column and its dollars in the Value column, so it lines up with the
     two figures it is the difference of */
  .lpxcard .lx-hil .lx-hd{grid-column:1/4}
  .lpxcard .lx-hil .lx-hm,.lpxcard .lx-hil .lx-hf{display:none}
  .lpxcard .lx-hist .lx-hnote{margin-top:4px;font-size:12.5px}
  /* a 59-move position is the longest measured — it scrolls in place rather than
     growing the card and re-entering the #188p/#188u sticky problems */
  .lpxcard .lx-hscroll{max-height:132px;overflow-y:auto}
  .lpxcard .lx-wdr .lx-hm{color:var(--err)}
  .lpxcard .lx-hist .lx-rule{margin:4px 0 3px}
  /* a summary line has no Move, so its label takes both label columns — otherwise
     "Qty Growth from LPX" wraps inside an 80px Date column */
  .lpxcard .lx-hsum .lx-hd,.lpxcard .lx-hgrow .lx-hd{grid-column:1/3;font-weight:700}
  .lpxcard .lx-hsum .lx-hm,.lpxcard .lx-hgrow .lx-hm{display:none}
  .lpxcard .lx-hgrow{margin-top:3px}
  .lpxcard .lx-hgrow .lx-hf,.lpxcard .lx-hgrow .lx-ha{font-weight:700}
  /* #197: the ceiling gauge — Price between the floor and Max Sell, log-scaled.
     grid-column 1/-1 is LOAD-BEARING: as a plain child of the display:contents
     section it landed in COLUMN 1 of the left grid, and its ~280px of labels
     blew the label column to ~500px — BossA: "I like the left pane closer to
     the labels, like the previous load."  Spanning the row keeps column 1
     label-sized; the width cap keeps the gauge from stretching the card. */
  /* #197e (BossA): the bar runs the full section, to the divider — width:0 +
     min-width:100% makes it FILL the zone without CONTRIBUTING to the
     max-content width (the 250px cap solved the stretch by shrinking the bar,
     which put the marker's third-of-the-way on a bar that wasn't the space). */
  .lpxcard .lx-gauge{grid-column:1/-1;margin-top:7px;width:0;min-width:100%}
  .lpxcard .lx-gtrack{position:relative;height:6px;border-radius:3px;background:var(--chipbg);border:1px solid var(--chipline)}
  .lpxcard .lx-gtrack i{position:absolute;top:-3px;width:2.5px;height:12px;border-radius:2px;background:var(--card-blue);transform:translateX(-50%)}
  .lpxcard .lx-stale .lx-gtrack i,.lpxcard .lx-near .lx-gtrack i{background:var(--err)}   /* #197c: red within 20% of either wall */
  .lpxcard .lx-glbl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:3px;gap:6px}
  .lpxcard .lx-glbl span{font-weight:700}   /* #197d (BossA): all three labels bold */
  .lpxcard .lx-glbl span:nth-child(2){color:var(--ink)}
  .lpxcard .lx-stale .lx-glbl span:nth-child(2){color:var(--err)}
  .lpxcard .lx-gnote{font-size:11.5px;color:var(--muted);margin-top:3px}
  .lpxcard .lx-stale .lx-gnote{color:var(--err);font-weight:600}
  .lpxcard .lx-note,.lpxcard .lx-foot{grid-column:1/-1}
  .lpxcard .lx-note{color:var(--muted);margin-top:3px}
  .lpxcard .lx-foot{color:var(--muted);margin-top:5px;padding-left:14px;text-indent:-14px}   /* hanging, like every other wrapped line in the app */
  .lpxcard .lx-warn{color:var(--ink)}   /* the trust caveat is never a footnote grey */
}
/* #160d (BossA): each HSI's field lines indent one level under their 'HSI #x' head */
.wl-sub{margin-left:22px}
/* #464e (BossA): the fold's Total HSI T-Shares roll-up — the full-precision
   figure the row face now rounds away — steps up from the fold's 12.5px */
.wl-key{font-size:14.5px}
/* #465d (BossA: "Make xxx Claimable bold, no color, INK") — the Claimable
   slot leaves the tail's muted voice: full ink, bold, no color */
.rd-claim{color:var(--ink);font-weight:700}
.row-detail .rd-claim{min-width:11ch;text-align:right}   /* BossA 2026-08-28 (his screenshot ruling): the Claim column right-justifies on farm and vault rows — 11ch covers the widest form (6.21K Claim), so 250K/103K/36K share a right edge */
/* #188h (BossA): "insert a tab space after Extracted" — a real tab collapses in
   HTML, so the gap is an inline-block of fixed width.  Wide enough to read as a
   deliberate column break, not an accidental double space. */
.wl-tab{display:inline-block;width:26px}
/* #167 (BossA): the HSI sort control — two toggles above HSI #1 */
.hsisort{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:5px 0 7px}
.hsisort-lbl{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.03em}
.hsisort-btn{cursor:pointer;color:var(--muted);white-space:nowrap;user-select:none;font-weight:700}
.hsisort-btn:hover{color:var(--ink)}
.hsisort-btn.on{color:var(--card-blue)}
html.light .hsisort-btn.on{color:#164a88}   /* #161: readable on light paper */
/* #169d (BossA): Transactions age legend — 6-over-6 BRICK WALL of tinted cards.
   13 columns; each card spans 2, the bottom row starts at col 2 → offset half a card. */
/* #199c: the legend holds a VARIABLE set now — Last 31-Days + only the months
   that exist + the pagers — so #169g's rigid 15-column brick (built for
   exactly fourteen fixed cards) gives way to content-sized chips that wrap
   into their own brick.  Same cap, same centering, same tint grammar. */
.tx-legend{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;padding:2px 5px 9px;margin:0 auto 4px;max-width:377px;border-bottom:1.5px solid var(--line)}
/* BossA 2026-08-03: the month legend STICKS — it is the page's navigation, and on a
   352-move card switching months meant scrolling all the way back up.  It pins on
   the --legstick line layoutSticky computes (under the box-head, clearing the
   hanging Sort/Search chips below 960), and the column heads re-anchor beneath it.
   Opaque surface so the rows pass under, z below the rail's chips (18) and the
   box-head, above the rows. */
.tx-legend--body{position:sticky;top:var(--legstick,0);z-index:15;background:var(--surface);
  max-width:none;padding-top:var(--legpad,2px);margin-bottom:0;padding-bottom:13px}   /* the at-rest 4px margin-bottom was a TRANSPARENT band — row text ghosted through it while pinned; it folds into opaque padding (9+4) */   /* full pane width — a 377px box let rows slide visibly past its flanks when pinned;
  the top padding is measured by layoutSticky to absorb the chip band below 960, so no see-through seam opens above the pinned legend */
/* #210c (BossA: "the month buttons on the TXNs page overlap"): the #169h/#169n
   header home is RETIRED — its premise was free middle space in the band, and
   the #209/#210 rail (letter cards + Search + Sort + Timer Lock) owns that
   band now.  ONE home at every width: the body copy, above the column heading.
   Below 960 the Search/Sort seats hang at top:42 into the body's first inches,
   so the legend steps clear of them there. */
@media (max-width:959px){ .tx-legend--body{margin-top:34px} }
.txleg{border-radius:5px;padding:3px 7px;text-align:center;font-size:9px;font-weight:600;cursor:pointer;
  color:var(--ink);white-space:nowrap;
  background:hsla(210,72%,52%,calc(0.30 - var(--n) * 0.020));border:1px solid hsla(210,55%,50%,.22)}   /* single-hue tint, newest month darkest (theme-safe: tint over surface, ink text) */
/* #180 (BossA): the All card resets the ledger to every date. It leads the brick so the
   way OUT of a filter reads before the filters, and wears no --n tint — it is not a month. */
.txleg-all{background:transparent;border-style:dashed;font-weight:700}
.txleg-all.on{background:hsla(210,72%,52%,.30);border-style:solid}
.txleg.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);font-weight:700}   /* #169j (BossA): the month being filtered — an ink ring on the lit card */
/* #169k (BossA): the ledger column heading — mirrors .row-head (bold, uppercase, faint, ruled) */
.tx-head{display:flex;justify-content:space-between;align-items:baseline;padding:2px 0 6px;margin-top:-2px;
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--faint);border-bottom:1.5px solid var(--line)}
/* #210e (BossA): "All cards, make Column headers sticky" — every column head
   stops at the line layoutSticky publishes (one under the box-head) and rides
   there while its own list scrolls; a head inside a by-wallet card sticks
   within that card's bounds, so the next card's head takes over naturally.
   Opaque surface so rows never show through; under the box-head (17) and
   rail (18), over the rows. */
#pane .row-head, #pane .tx-head{position:sticky;top:var(--colstick,52px);z-index:16;background:var(--surface)}
/* #307c: on the Prices card the COLUMN line (.pxcols) holds --colstick for the
   whole card; the section labels stack one line lower and pass UNDER it (z15
   vs 16) during handoff — the columns never get buried again */
#pane .row-head.pxhead:not(.pxcols){top:var(--colstick2,var(--colstick,52px));z-index:15}
.tx-none{padding:18px 12px;text-align:center;color:var(--muted);font-size:13px}   /* #169j: empty state when a month has no transactions */
.entry a{color:var(--card-blue);text-underline-offset:2px}   /* modal links wear the house blue — never the browser's visited-purple */

/* #159 (BossA, 2026-07-23): PRINT — white paper, dark ink, no line split across a
   page. Three presets scope what prints via a body class (printChooser/doPrint). */
#printPresets{display:none}   /* the presets print sheet exists only for the printer */

@media print {
  @page { margin: 12mm; }
  html, body { background: #fff !important; }
  /* preset: PRESET GLOBAL VIEW — the roll call alone, ink on white (BossA 07-25) */
  body.print-presets #app, body.print-presets .sampletag { display: none !important; }
  body.print-presets::before, body.print-presets::after { display: none !important; }   /* the phone-frame dressing never prints */
  body.print-presets #printPresets { display: block !important; font-family: var(--sys); }
  body.print-presets #printPresets, body.print-presets #printPresets * { color: #111 !important; text-shadow: none !important; }   /* ink, not theme green */
  #printPresets h1 { font-size: 18px; margin: 0 0 12px; }
  #printPresets .pp-group { break-inside: avoid; page-break-inside: avoid; margin: 0 0 12px; }
  #printPresets .pp-name { font-weight: 700; font-size: 14px; margin: 0 0 3px; }
  #printPresets .pp-addr { font-size: 12px; line-height: 1.6; margin-left: 14px; }
  #printPresets .modal-bullets { font-size: 12px; line-height: 1.55; margin: 0 0 14px; break-inside: avoid; }
  /* strip the phone frame; dark ink everywhere */
  #app { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important;
    background: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  #app::before, #app::after { display: none !important; }
  #app, #app * { color: #111 !important; text-shadow: none !important; -webkit-print-color-adjust: exact; }
  /* #159 (BossA): sticky headers print in normal flow — otherwise the "Token Balances"
     title renders where it was stuck (mid-page) instead of atop the ledger */
  .apphead, #yield, #pane, #pane .box-head, .box-head, .pane-stick { position: static !important; top: auto !important; }
  .apphead-seal { display: none !important; }   /* #307b: the seal is a screen instrument — paper scrolls nothing */
  #pane .box-head, .box-head { background: transparent !important; }   /* no grey band on paper */
  /* cards → white with a hairline rule, no gradients/shadows */
  .card, .rankwrap, #yield, #pane, .box, .rank {
    background: #fff !important; border: 1px solid #bbb !important; box-shadow: none !important;
    border-radius: 8px !important; margin: 0 0 10px !important; }
  .rankwrap { padding: 10px !important; }
  /* interface chrome drops away */
  .apphead, .dropdown, .lensrail, .lensdots, .rankdots, .dots, .pane-pill,   /* #327: the foot legend is screen furniture — paper never navigates (the head pill already fell with .pane-stick).  #328: .pricerail left this list with the rail itself; its arrows now fall with .head-right below */
  .bbclose, .valtoggle, .charttoggle, #chartToggle, .workaff, .workaff-row,
  .pane-print, .pane-stick, .timerlock, .grouplock, .searchlock, .head-right, #wxScreen, .wxdots, .chev, .totop { display: none !important; }   /* .chev: the ▸/▾ expander is a screen cue — never ink (#169o) */
  /* never split a card / row / line across a page break */
  .card, .rankwrap, #yield, .box, .row, .row-head { break-inside: avoid; page-break-inside: avoid; }
  /* #208 (BossA 07-30): a wallet card MAY break between rows — but its header
     never sits orphaned at a page's foot with the first row overleaf */
  .txw-grid { display: block; }
  .wcard { break-inside: auto; page-break-inside: auto; }
  .wcard-head { break-inside: avoid; break-after: avoid; page-break-after: avoid; }
  /* the ledger prints every row EXPANDED — the full detail box, on white */
  .row .work { display: block !important; background: #fff !important; border-left: 2px solid #999 !important;
    border-radius: 0 !important; padding: 4px 0 6px 10px !important; margin: 2px 0 4px !important; }
  /* #159 (BossA): the expandable-tab bar is a screen cue — on paper it's just wasted ink */
  .row.expandable::before { display: none !important; }
  /* #169n: the month legend + row tints are screen cues — on paper the date column already says the month, so the blue would be wasted ink (tints ride inline styles; !important outranks them) */
  .tx-legend { display: none !important; }
  .row-line { background: none !important; }

  /* preset: THIS PAGE — the cards, no ledger */
  body.print-page #pane, body.print-page .sampletag { display: none !important; }
  /* preset: ADDRESS LIST WITH VALUE TOTALS (#182, BossA) — the Included
     Addresses card alone, its Show Work breakdown expanded on paper */
  body.print-addrs .rankwrap, body.print-addrs #yield, body.print-addrs #pane,
  body.print-addrs .sampletag { display: none !important; }
  body.print-addrs #cardWork { display: block !important; }
  body.print-addrs #cardAddrs { margin-top: 12px; }   /* no pill on paper — the clearance gap closes */
  /* the dormant veil never prints — a fresh session can print before its wake tap */
  body.print-addrs .card-title { display: block !important; }
  body.print-addrs #cardAddrs { display: flex !important; }
  /* #188 (BossA): the whole address prints too — this preset IS the address list,
     and paper is where you check one against a wallet.  Letter is 816px, under
     the 960px desktop breakpoint, so that block never applies here; the same
     three columns are restated for the page's own width. */
  #cardAddrs { max-width: none !important; width: 100% !important; padding: 0 !important; }
  #cardAddrs .ca-name { display: flex !important; align-items: baseline; gap: 12px; flex: 1; overflow: visible !important; }
  #cardAddrs .ca-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  #cardAddrs .ca-nick.ca-fb { display: none; }
  #cardAddrs .ca-addr { margin: 0 0 0 auto !important; white-space: nowrap; flex: 0 0 auto; opacity: 1 !important; }
  #cardAddrs .ca-usd { min-width: 116px; text-align: right; }
  /* the card's work fold prints like the ledger's: ink on white, ruled left (#183: the rank fold too; #209: the fold became the 4th face's pane) */
  #cardWork, #rankSources { background: #fff !important; border: 0 !important; border-left: 2px solid #999 !important;
    border-radius: 0 !important; padding: 4px 0 6px 10px !important; margin: 8px 0 4px !important; }
  #rankSources, #rankSources li, #rankSources .rank-src-h { color: #111 !important; }
  /* preset: SELECTED GRAPH — only the showing card, its chart blown up */
  body.print-graph #card, body.print-graph .rankwrap, body.print-graph #pane,
  body.print-graph .sampletag { display: none !important; }
  body.print-graph .chartwrap svg { width: 100% !important; height: auto !important; }
  /* preset: TOKEN BALANCES — only the ledger */
  body.print-ledger #card, body.print-ledger .rankwrap, body.print-ledger #yield { display: none !important; }
  /* preset: TRANSACTION BALANCE — only the Transactions ledger, in the selected month range (#169o, BossA) */
  body.print-tx #card, body.print-tx .rankwrap, body.print-tx #yield,
  body.print-txbrief #card, body.print-txbrief .rankwrap, body.print-txbrief #yield { display: none !important; }
  /* #199d (BossA): the STATEMENT — one line per move, folds closed on paper.
     This must outrank the print law that expands every fold. */
  body.print-txbrief .row .work { display: none !important; }
  body.print-txbrief .row, body.print-txbrief .row-line { break-inside: avoid !important; page-break-inside: avoid !important; }
  /* each transaction (its line + expanded detail) stays whole, so page breaks fall BETWEEN transactions, never mid-transaction */
  body.print-tx .row, body.print-tx .row-line, body.print-tx .row .work { break-inside: avoid !important; page-break-inside: avoid !important; }
}

/* ================= #170: the Start page — the desktop first view =================
   A marketing surface with ONE deliberate look: the dark brand shell (the app's
   ruled dark palette, hardcoded so a visitor's stored theme cannot restyle the
   front door), Blu for every interactive accent.  The two device frames wear
   Buff and Sage on purpose — the landing quietly teaches that themes exist. */
body.landing #app, body.landing .overlay, body.landing .wxscreen, body.landing .notice { display: none !important; }
body.landing { background: #0d1117; }
#start { display: none; }
body.landing #start {
  display: block; min-height: 100vh; background: #0d1117; color: #e6edf5;
  font-family: var(--sys); -webkit-font-smoothing: antialiased;
}
#start .st-head { display: flex; align-items: center; gap: 10px; max-width: 1140px; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top, 0px)) 24px 6px; }   /* #411: the landing's own head answers the standalone status bar the same way the apphead does */
#start .st-mark { display: inline-flex; align-items: center; gap: 3px; }   /* the wordmark IS the logo: "Blu" in a blu box, "Box" beside it */
#start .st-logo { font-family: var(--rounded); font-size: 18px; color: #fff; background: #378ADD; border-radius: 10px; padding: 4px 10px 5px; }
#start .st-brand { font-family: var(--rounded); font-size: 21px; color: #e6edf5; }
#start .st-domain { font-family: var(--mono); font-size: 12.5px; color: #8ba2bd; margin-top: 3px; }
#start .st-head .st-mini { margin-left: auto; }
#start h1 { font-family: var(--ui); font-size: 44px; line-height: 1.12; color: #e6edf5; margin: 0 0 16px; }
#start h2 { font-family: var(--ui); font-size: 24px; color: #e6edf5; text-align: center; margin: 0 0 22px; }
#start h3 { font-family: var(--ui); font-size: 16.5px; color: #e6edf5; margin: 0 0 8px; }
#start p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.62; color: #b6c5d8; }
#start strong { color: #e6edf5; }
#start .st-mono { font-family: var(--mono); font-size: 13px; color: #cfdcea; }
.st-open {
  display: inline-block; background: #378ADD; color: #fff; border: 0; border-radius: 12px;
  font-family: var(--rounded); font-size: 17px; padding: 12px 30px; cursor: pointer;
}   /* BossA 2026-08-10: the blue pills speak the LOGO voice, like the Send button — the system sans read as the wrong font */
/* BossA 2026-08-10: the landing pages' Open BluBox pills are ANCHORS (the app's
   are buttons), and the blanket #start a rule was painting their text brand-blue
   on the brand-blue field — invisible since #243a.  Anchors wearing the pill
   class get the pill's white. */
#start a.st-open, #start a.st-open:visited { color: #fff; }
.st-open:hover { background: #2E7FB8; }
.st-open.st-mini { font-size: 13.5px; padding: 8px 16px; border-radius: 12px; }
/* BossA 2026-08-10: the hero tab plays the HEX sample movie — ".watch" over a
   smaller "Click Here", one blue hotspot, no underline (it is a button that
   happens to be an anchor). */
.st-open.st-watch { text-decoration: none; text-align: center; line-height: 1.2; padding: 13px 44px 12px; font-size: 27px; border-radius: 14px; }   /* #319 (BossA, the YouTuber's demo: "make the Watch blue box and text larger.  The youtuber almost missed it") — was 21px over 9/30/8 */
#start .st-open.st-watch, #start .st-open.st-watch:visited { color: #fff; }   /* the #start a rule paints anchors blue; this tab is a button wearing white */
.st-open.st-watch .st-ch { display: block; font-size: 16px; font-weight: 400; opacity: .92; }   /* #319: grown with its box — was 12.5px */
.st-hero {
  display: flex; align-items: center; gap: 44px; max-width: 1140px;
  margin: 0 auto; padding: 44px 24px 30px;
}
.st-copy { flex: 1 1 46%; min-width: 0; }
.st-sub { font-size: 16px; }
/* #175 (BossA): the three claims lead — enlarged and bold, Free + No Account on
   one line, the community line beneath.  They outrank the sample-data note. */
#start .st-claims { display: flex; flex-direction: column; gap: 5px; margin: 18px 0 6px 63px;
  font-family: var(--ui); font-size: 18.5px; color: #e6edf5; }   /* BossA 07-25: stacked; the 63px centers "Free" under the Open BluBox button (measured) */
#start .st-claims .st-in1 { margin-left: 3ch; }    /* BossA 07-25: his slant, tuned by eye — lines 2 and 3 sit one space left of the even grid */
#start .st-claims .st-in2 { margin-left: 7ch; }
#start .st-claims .st-in3 { margin-left: 11ch; }
/* BossA 2026-08-10: the claims take a bow after the hero reel plays itself out —
   each line doubles and settles, one after the next.  Left-anchored so the
   staircase slant holds while a line grows. */
/* #407 (BossA: "On exiting the animation, the text below enlarges 100%.  Make
   the text enlarge only 25%, soo it is more subtle"): scale(2) IS the 100%
   he is naming — double size.  A quarter more is scale(1.25). */
@keyframes clmPop { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
#start .st-claims span { transform-origin: left center; }
#start .st-claims span.clm-pop { animation: clmPop .8s ease-in-out; }
@media (prefers-reduced-motion: reduce) { #start .st-claims span.clm-pop { animation: none; } }
.st-frames { flex: 1 1 54%; min-width: 0; margin: 0; position: relative; text-align: center; }
.st-shot { border-radius: 16px; box-shadow: 0 18px 48px rgba(0,0,0,.55); height: auto; }
.st-shot-d { width: 74%; max-width: 460px; }
.st-shot-p { width: 24%; max-width: 150px; position: absolute; right: 2%; top: 9%; }
.st-cap { font-size: 12.5px; color: #8ba2bd; margin-top: 14px; }
/* BossA 2026-08-03: the Features Card — the page's established card chrome (.st-pillar's),
   two columns of bullets inside, matching the two groups he wrote. */
.st-features { grid-column: 1 / span 2; grid-row: 2; background: #151c28; border: 1px solid #243044;
  border-radius: 16px; padding: 18px 22px 6px; }
.st-feat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; }
.st-features .st-bullets { margin-bottom: 8px; }
.st-features .st-sub { margin: 4px 0 0; }

/* BossA 2026-08-03: a link with no inline colour fell back to the UA's #0000EE on the
   #151c28 pillar — measured 1.3:1, unreadable.  Every other link on this page happened
   to carry an inline colour, so the gap only showed on a NEW link.  This makes
   legibility the default; the inline-styled links (incl. the muted footer) still win. */
#start a, #start a:visited { color: #378ADD; }
.st-never { font-size: 14.5px; color: #e6edf5; margin-top: 12px; line-height: 1.45; }   /* BossA 2026-08-03: the connect-a-wallet warning rides under the hero photo, centered by .st-frames */
.st-steps { max-width: 1140px; margin: 0 auto; padding: 34px 24px 10px; border-top: 1px solid #243044; }
.st-step-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }   /* BossA 2026-08-03: flex -> grid so the Features Card can occupy the room Steps 1 and 2 gave back */
.st-step-row > .st-step:nth-child(3) { grid-column: 3; grid-row: 1 / span 2; }   /* the COLUMN must be explicit too: an item with a definite row is placed before the auto-flow items, so row-only sent Step 3 to column 1 and shoved Steps 1-2 sideways */   /* Step 3 is the tallest — it spans both rows, and the card fills the space beside it rather than pushing the section taller */
.st-step { flex: 1 1 0; min-width: 0; }
.st-n {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: #378ADD; color: #fff; font-family: var(--ui);
  font-size: 15px; margin-bottom: 10px;
}
.st-bullets { margin: 0 0 12px; padding-left: 20px; }   /* hanging indent — bullets' law */
.st-bullets li { font-size: 14.5px; line-height: 1.62; color: #b6c5d8; margin-bottom: 6px; }
/* .st-qr / .st-qr-cap removed with the landing's demo QR (BossA 2026-08-03) */
.st-band {
  display: flex; gap: 28px; max-width: 1140px; margin: 0 auto; padding: 30px 24px;
  border-top: 1px solid #243044;
}
.st-pillar { flex: 1 1 0; min-width: 0; background: #151c28; border: 1px solid #243044; border-radius: 16px; padding: 20px 22px; }
.st-pillar h3 { color: #378ADD; }
.st-foot { text-align: center; padding: 26px 24px 44px; border-top: 1px solid #243044; max-width: 1140px; margin: 0 auto; }
#start .st-foot .st-open { margin-bottom: 28px; }   /* #320 (BossA): buffer air below the closing Open BluBox — the pill and the fine print stop touching */
.st-fine { font-family: var(--mono); font-size: 11.5px; color: #64788f; margin-top: 16px; }
@media (max-width: 959px) {
  .st-hero { flex-direction: column; padding-top: 26px; }
  #start h1 { font-size: 34px; }
  .st-step-row, .st-band { flex-direction: column; }
  .st-step-row { grid-template-columns: 1fr; }   /* the grid stacks with everything else below 960 */
  .st-step-row > .st-step:nth-child(3) { grid-column: 1; grid-row: auto; }
  .st-features { grid-column: 1; grid-row: auto; }
  .st-feat-cols { grid-template-columns: 1fr; }   /* one column on a phone — two would halve an already narrow line */
  .st-shot-d { width: 92%; max-width: 430px; }
  .st-shot-p { width: 30%; max-width: 132px; right: -2%; }
}

/* #195 (BossA): the Start Pane row — four equal buttons under the Theme row.
   "Transactions" must fit a 390px phone quarter, so the type steps down and
   centers.  Selection marks like the chain row: a ✓ and an ink border. */
/* #195b (BossA): ONE line — "Order:" then three view-cards, each [Blu ✓ | name | n].
   Tight per his earlier rulings (swatch height, ridden up into the Theme row's
   own bottom padding).  The Blu zone is its own target; tapping a card
   anywhere else cycles its number — the badge is small, the intent is not. */
.menu-row.r4{margin:-4px 0 4px}
.menu-row.r4 .vlabel{align-self:center;font-family:var(--ui);font-size:13.5px;color:var(--ink);padding:0 1px 0 11px}   /* #195b (BossA: "Order needs better visibility") — the label speaks at Theme's own size and ink, not a whisper */
.menu-row.r4 .menu-item{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-start;gap:5px;border:1px solid var(--line);border-radius:8px;background:none;font-size:11px;padding:3px 5px}   /* BossA 07-29: same border as the fence.  2026-08-03: flex 1→1 1 auto (the Bal card carries four pieces), and flex-start — number + label cluster LEFT, the zones ride right on the auto margin below */
.menu-row.r4 .vblu,.menu-row.r4 .vval{white-space:nowrap}
.menu-row.r4 .vname + .vblu{margin-left:auto}   /* BossA 2026-08-03 card grammar: [n] Label ……… Blu Val */
.menu-row.r4 .vcard-txn{flex:0.72}
.menu-row.r4 .menu-item:hover{background:var(--chipbg)}
.menu-row.r4 .vblu,.menu-row.r4 .vval{font-size:10.5px;color:var(--faint)}
.menu-row.r4 .vblu.von,.menu-row.r4 .vval.von{color:var(--ink);font-weight:700}
.menu-row.r4 .vname{font-weight:600;color:var(--ink)}
.menu-row.r4 .vord{border:1px solid var(--rowline);border-radius:5px;padding:0 4px;font-variant-numeric:tabular-nums;color:var(--ink)}
/* #195: BluBox deselected — the upper cards (the Card with its HexFade, and the
   Price/Value box) leave; only the lower pane shows, full window */
body.noblu #card,body.noblu .rankwrap,body.noblu #yield{display:none}   /* #195b fix (BossA: "Hex Fade rides with the BluBox Order selection") — the fade card is a SIBLING of #card, not a child, so the first cut left it standing when Blu was off.  "BluBox includes the HexFade" was the ruling from the start. */

/* #195c (BossA: add-address, nickname, preset entries "not visible in Buff"):
   no ::placeholder rule existed, so every empty field showed the browser's
   default grey — ~3.3:1 on buff paper, washy to invisible on a real screen.
   An empty form shows ONLY placeholders, so the placeholders ARE the form.
   The theme's own faint ink replaces the UA grey on every field, every theme. */
input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}
/* #201: the A card's section caps — the settings fence lettering, resized for the pane */
.actu-cap{margin:14px 4px 6px;text-align:center}
.actu-sel{margin:8px 4px 2px;font-family:var(--sys);font-size:12.5px;color:var(--ink);display:flex;align-items:center;flex-wrap:wrap}   /* #201c: the notify-threshold row — #50 ink, the pill dress reused */
.actu-sel-top{margin:2px 4px 8px}   /* #532 (BossA): the Window row leads the block — above the table so the buttons never move when the rows change */
.actu-det{margin-left:10px;color:var(--muted);font-size:12.5px}   /* #201h (BossA's screenshot): the detail ran into the symbol — my invented class had no dress; now it wears the muted detail voice with its own gap */
/* #201j: the A card's three-zone row — name | value centered | new-data slot right */
.actu-line{display:grid;grid-template-columns:minmax(0,2fr) auto minmax(140px,1fr);align-items:center}   /* BossA 2026-08-28 ("Move the center column right so the %/yr number does not wrap"): the left zone takes 2fr — the scoreboard line needs the room; the right keeps a 140px floor for its per-kind fact */
.actu-line .actu-mid{justify-self:center}
.actu-line .row-right{justify-self:end;display:flex;align-items:center;gap:6px}
.actu-total .actu-mid{border-top:1px solid var(--ink);font-weight:700;padding-top:5px;margin-top:2px}   /* BossA 2026-08-28: the sum under the rule, like a math problem */
/* BossA 2026-08-28: the Dates-ahead TABLE — aligned columns, no Show Work bar */
/* BossA 2026-08-30 ("start with 1 and 5"): the A card's zones — positions,
   fees, dates — each wear the Theme fence (BossA 07-29: "every card wears the
   Theme fence's border — one line color across the panel"), so the page reads
   as cards, not loose strays.  The changes block keeps its work dress: the
   blue bar is the annotation marker, and the notices are annotation.
   Fences only where the page has room — #154's doctrine: real phones (narrow)
   get NO frame, and MEASURED 2026-08-30: the fence's 28px of padding tipped
   the farm rows' name into the centered value at 390px (13px overlap; bare
   had 17px clear), so below 481px the zones are invisible and the geometry is
   exactly what it was. */
@media (min-width:481px){
  .actu-zone{border:1px solid var(--line);border-radius:12px;padding:8px 14px;margin:2px 0 12px}
  .actu-dates.actu-zone{margin:2px 0 12px;max-width:560px}   /* the fence replaces the old hanging left margin; a touch wider so the fence breathes around the 520px table */
}
.actu-dates{margin:12px 6px 10px 14px;max-width:520px;font-family:var(--sys);font-size:14px;font-variant-numeric:tabular-nums}   /* capped so the right-aligned day counts sit near their dates, not across the pane */   /* BossA 2026-08-30: 13→14px — "Make the font larger for all fields… We have more space" */
.actu-dates .ad-head{color:var(--ink);font-weight:600;margin-bottom:6px}
.actu-dates .ad-row{display:grid;grid-template-columns:minmax(9ch,max-content) max-content 1fr;column-gap:18px;padding:3px 0;border-top:1px solid var(--line)}   /* BossA 2026-08-28: the first column fits its widest word — 2026-10-09 must never wrap */
.actu-dates .ad-sym{color:var(--ink);font-weight:600;white-space:nowrap}
.actu-dates .ad-date{color:var(--muted)}
.actu-dates .ad-days{color:var(--muted);justify-self:end;text-align:right}
.actu-dates .ad-note{grid-template-columns:minmax(9ch,max-content) 1fr;border-top-width:2px;margin-top:6px;padding-top:6px}   /* BossA 2026-08-30 ("Do 6"): the EVENT row is a different kind of fact — a firmer rule and its own air part it from the maturity rhythm */
.actu-dates .ad-span{color:var(--muted)}
/* BossA 2026-08-30 ("Fix 4"): where the pane runs wide the maturity rows flow
   TWO columns — the dead right half fills, the list halves in height, and each
   column stays narrow enough that the day counts still sit near their dates
   (the old 520px cap's own reason, honored per column instead of per pane). */
@media (min-width:960px){
  .actu-dates.actu-zone{max-width:none}
  .actu-dates .ad-flow{columns:2;column-gap:48px}
  .actu-dates .ad-row{break-inside:avoid}
}
.actu-dates .ad-trust{color:var(--faint);font-size:12px;margin-top:7px}
.actu-totrow{border-bottom:none}
.actu-new{color:var(--muted);font-size:12px;white-space:nowrap}
.actu-wall{white-space:nowrap}   /* BossA 2026-08-30 ("use users clock"): the wall-clock half of the read-live stamp breaks as a unit — never a dangling "EDT" */
/* #202 (BossA's TODO, built 2026-07-30): the PulseChain fade — the Core
   PulseChain board wears the same frame grammar as the HEX Fade Card
   (.rankwrap), in PulseChain's own gradient (the #pls-grad stops, as the
   chain row's .plsfade text already does).  The fence inside goes solid so
   the rows read on the surface, not on the gradient. */
.plswrap{border-radius:16px;padding:2px;margin:2px -6px 10px;
  border:2.5px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(to right,#00EAFF,#0080FF,#8000FF,#E619E6,#FF0000) border-box}   /* Path A trial 2026-08-02: the PulseChain fade thins to a 2.5px frame, same grammar as the Hex Fade */
/* #428 (BossA: the Core fence "lost its left and right sides"): #421's -5px
   bleed aligned the rows but painted this OPAQUE surface over the plswrap
   frame's own left/right gradient.  Padding reaches the same row seat and
   cannot cover the frame. */
.plswrap .px-sect{background:var(--surface);border:none;border-radius:12px;margin:0;padding-left:3px;padding-right:3px}
.lx-side{font-size:9.5px;opacity:.78;letter-spacing:.4px}   /* #197i: LPX's own words — Fund / Anchor — ride small above/before the symbol */
/* #229: the marker on a move recovered from custody transfers rather than from
   an event of its own — a quiet star, the note under the table explains it. */
@media (min-width:960px), print{ .lpxcard .lx-rec{color:var(--muted);font-weight:700;cursor:help} }
/* #231: the ENDING BALANCE line under each move — the position the chain held
   after it.  A step back in ink so the moves stay the story and the balance
   reads as the running consequence of them. */
@media (min-width:960px), print{
  .lpxcard .lx-hend .lx-hm{color:var(--muted);font-style:italic}
  .lpxcard .lx-hend .lx-hf,.lpxcard .lx-hend .lx-ha{color:var(--muted)}
}
/* #237: the Min Buy TICK — the floor drawn where it actually falls on the
   0..Max Sell track, instead of being asserted at the left cap where the pool
   can never reach.  A quiet mark, not a second marker: the price indicator
   stays the thing the eye finds. */
@media (min-width:960px), print{
  .lpxcard .lx-gtrack{position:relative}
  .lpxcard .lx-gfloor{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;
    background:var(--muted);opacity:.55;border-radius:1px;cursor:help}
}

/* ================= Path A (BossA, 2026-08-02): the modern pass ================= */
/* 1. WEIGHT CARRIES THE HIERARCHY.  Arial Rounded MT Bold was a bold-only face —
   every element set in it was bold for free.  The system font is not, so the
   elements that traded --rounded for --ui get their weight stated here, in one
   block, instead of forty scattered edits.  600 = the working semibold voice;
   the selectors that already declared 700 keep it (this block omits them). */
#app .row.stake .row-detail, #app .row.stake .row-detail .rd-one,
.menu-item,.box-title,.yield-line,.chart-total,.row-name,.row-usd,
.row-line.px .px-px,.entry .sampletop,.entry .entrylead,.entry h2,
.hexday,.val-row,.wxsect,.wxrow,.lc-title,.lc-line,
.px-sect-cap,.menu-sect-cap,.lpxcard .lx-pool,.lpxcard .lx-pair,
.menu-row.r4 .vlabel{font-weight:600}
.entry .go{font-weight:700}   /* the primary action speaks up */
.entry .go2,.notice-actions .go2{font-weight:600}
#start h1{font-weight:800;letter-spacing:-.015em}   /* modern display type: heavy and slightly tight */
#start h2,#start h3{font-weight:700}
#start .st-claims{font-weight:600}
#start .st-open{font-weight:700}
#start .st-n{font-weight:700}
/* 2. NUMBERS SIT IN COLUMNS.  Tabular figures wherever a value is the message. */
.yield-line,.chart-total{font-variant-numeric:tabular-nums}
/* 3. MICRO-TRANSITIONS.  Interactive chrome eases instead of snapping; the
   pressed-state cluster at #209i already carries its own richer transition and
   is not repeated here.  Reduced-motion users get instant switches. */
.menu-item,.menu-item.half,.cornerbtn,.thopt,.addr-btn,.entry .go,.entry .go2,
.notice-actions .go2,.pxseg button,.st-open{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
@media (prefers-reduced-motion:reduce){
  .menu-item,.menu-item.half,.cornerbtn,.thopt,.addr-btn,.entry .go,.entry .go2,
  .notice-actions .go2,.pxseg button,.st-open{transition:none}}
/* 4. SKELETON LOADERS.  While a value is genuinely unknown (first real-wallet
   read, the price board's first fetch) the slot shows a quiet shimmer bar the
   size of the number it awaits — never a blank, never a false zero.  app.js
   paints .skel spans into the waiting slots and removes them when data lands. */
.skel{display:inline-block;height:1em;min-width:64px;border-radius:6px;vertical-align:-.15em;
  background:linear-gradient(90deg,var(--chipbg) 25%,var(--line) 50%,var(--chipbg) 75%);
  background-size:200% 100%;animation:skelshine 1.4s ease-in-out infinite}
.skel.w-lg{min-width:150px}
.skel.w-sm{min-width:40px}
@keyframes skelshine{from{background-position:150% 0}to{background-position:-150% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none;background:var(--chipbg)}}
.skelrows{padding:4px 2px 8px}
.skelrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid var(--rowline)}
.skelrow:last-child{border-bottom:none}

/* ================= Path B (BossA, 2026-08-03): the Slate face ================= */
/* Slate is the ONE theme where the brand fences go quiet: hairline borders in
   place of the gradients, the rank card on the theme surface instead of black,
   ink numbers with the Blu carrying the delta.  Every other theme keeps its
   fades exactly as ruled (#241 / BossA's 10px band).  The HEX logo mark stays
   full-color — the one point of brand saturation in the quiet room. */
html.dark-slate .rankwrap{border:.5px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--hero-fade) border-box}   /* BossA 2026-08-03: a HALF-point Hex Fade frames the T-Shares card — one physical pixel on retina, the way iOS draws its own hairlines (3px→2px→1px trialed down to here) */
html.dark-slate .rank{background:none}
html.dark-slate .rankdots b{background:var(--dot)}
html.dark-slate .rankdots b.on{background:var(--doton)}
html.dark-slate .rank-title,html.dark-slate .rank-src-h{color:var(--muted)}
html.dark-slate .rank-value{color:var(--ink)}
html.dark-slate .rank-delta{color:var(--dayok)}   /* the one accent speaks the change */
html.dark-slate .rank-sub{color:var(--faint);opacity:1}
html.dark-slate .plswrap{border:.5px solid transparent;padding:2px;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(to right,#00EAFF,#0080FF,#8000FF,#E619E6,#FF0000) border-box}   /* BossA 2026-08-03: the PulseChain Core board wears its own chain's fade at a HALF point — the T-Shares ring's twin, one physical pixel on retina */

/* BossA 2026-08-03: on phone the Search and Sort chips speak in SYMBOLS alone —
   the spyglass and the stacked-cards glyph, centered in the same #209f chip box
   (one-size law untouched, tap targets unchanged).  Desktop keeps the words. */
#viewGroup .gl-ico{display:none}
#viewGrid .gl-ico{display:none}   /* #372: the desk keeps the words — the glyph is the phone's voice */
@media (hover:none) and (pointer:coarse){
  #viewGroup .gl-ico{display:block}
  #viewGroup .gl1,#viewGroup .gl2{display:none}
  #viewGrid .gl-ico{display:block}
  #viewGrid .gl1,#viewGrid .gl2{display:none}   /* #372 (BossA): Grid/List joins Sort and the spyglass — a symbol alone, in the same 66x37 box, tap target unchanged */
  #viewGrid .gl-ico svg{width:19px;height:19px;display:block}
  /* #373 (BossA: "make the All Timers Lock button graphic with clock symbol and
     lock symbol") — the last worded chip on the Prices rail joins the others.
     The clock IS "All Timers" and the padlock IS "Lock", so both words go; the
     STATE is still visible without them, because the shackle still opens and
     closes (renderTimerLock) and the whole chip still turns gold when locked. */
  #timerLock .tl1,#timerLock #timerLockLbl{display:none}
  #timerLock .tl-clock{display:block}
  #timerLock .tl2{gap:7px}
  #timerLock .tl2 svg{width:17px;height:17px;display:block}
  .searchlock .tl1{display:none}
  .searchlock .tl2 svg{width:17px;height:17px}
  /* #275 (BossA 2026-08-08, label "+ Add / Token"): Add Token's plus lives in
     .tl1 now, which the line above hides.  Keep the GLYPH and drop only the
     words, so the phone shows a bare + exactly as it shows a bare spyglass. */
  .searchlock.addtok .tl1{display:flex;align-items:center}
  .searchlock.addtok .tl1 svg{width:17px;height:17px}
  .searchlock.addtok .atk-w{display:none}
  .searchlock.addtok .tl2{display:flex;align-items:center}
}

/* BossA 2026-08-03 ("do A first"): the collapsed caution runs.  The summary is the
   quiet voice — muted ink, same row grammar; the dealt-out run nests beneath it.
   PRINT always deals the runs out: a statement omits nothing. */
.cau-run{display:none}
.cau-run.open{display:block}
.cau-sum .row-name,.cau-sum .row-usd{color:var(--muted)}
@media print{
  .cau-sum{display:none !important}
  .cau-run{display:block !important}
}

/* #469 (BossA 2026-08-27): the day-grouped mint collapse — one summary row per
   day, a line per kind when the day holds more than one, the rows beneath that.
   Same quiet grammar as the caution summary; each rung steps in so the nesting
   is read rather than counted.  PRINT deals every rung out, as ever. */
.mint-kinds,.mint-run{display:none}
.mint-kinds.open,.mint-run.open{display:block}
.mint-sum .row-name,.mint-sum .row-usd,
.mint-kind .row-name,.mint-kind .row-usd{color:var(--muted)}
.mint-kinds{padding-left:14px}
.mint-run{padding-left:14px}
/* the kind line carries no date, so its empty date cell goes rather than
   reserving 58px that a wrapped second line would then fall behind — the
   indent moves onto the name, and long kind names wrap in line with
   themselves instead of jumping back to the rail (seen at 375px). */
.mint-kind .tx-date{display:none}
.mint-kind .row-name{padding-left:58px;text-indent:0}
@media print{
  .mint-sum,.mint-kind{display:none !important}
  .mint-kinds,.mint-run{display:block !important;padding-left:0}
}

/* BossA 2026-08-03 (B): the Combined-view toggle's seats — the #209f chip box,
   one seat outboard of Sort on the desk, beside the spyglass on the phone
   (his ruling: "The toggle can go in the sticky row.  My phone shows room"). */
.pane-stick .viewstory{position:absolute;top:0;right:216px}   /* #344: the row's outboard seat, slid right with the rest */
@media (max-width:959px){.pane-stick .viewstory{top:42px;right:304px}}
@media (hover:none) and (pointer:coarse){.pane-stick .viewstory{top:0;right:148px}}

/* ---- #255: the Scene lens — the ▶ door, the scrubbing arrows, the exit that
   lands where you traveled.  Theme-aware through the same variables every
   chip wears; the backdrop dims either paper. */
/* #255a (BossA): 'Play Button needs to be larger' — 11→16px, with padding so
   the thumb target outgrows the glyph */
.scenebtn{color:var(--dayok);font-size:16px;margin-right:6px;padding:2px 6px;cursor:pointer;opacity:.85;align-self:center;line-height:1}
@media (hover:hover) and (pointer:fine){ .scenebtn:hover{opacity:1;filter:brightness(1.15)} }
#sceneLens{position:fixed;inset:0;background:var(--shadow);backdrop-filter:blur(2px) brightness(.55);-webkit-backdrop-filter:blur(2px) brightness(.55);z-index:400;display:flex;align-items:center;justify-content:center}
/* #255a (BossA): 'Arrow buttons cannot move up and down with additional text'
   — the box holds ONE height, the stage scrolls inside it, so the arrows
   never move and a rapid forward-tap stays smooth.  Bottom, not top: the
   jump was the fault, and bottom is where the phone thumb lives. */
.scene-box{background:var(--surface);color:var(--ink);border:1px solid var(--chipline);border-radius:14px;max-width:700px;width:96%;height:min(560px,88vh);display:flex;flex-direction:column;padding:18px 16px;font-family:var(--ui);box-shadow:0 12px 40px var(--shadow);box-sizing:border-box}   /* BossA 2026-08-04: bigger stage — still ONE fixed height (#255a: arrows never move), just a larger one */
.scene-head{font-size:14px;font-weight:800;color:var(--ink);text-align:center;margin-bottom:12px}
.scene-stage{flex:1;overflow:auto;display:flex;flex-direction:column;justify-content:flex-start;text-align:center;padding:10px 4px 14px}   /* BossA 2026-08-04: top-aligned — centering in the fixed box split the spare height into a dead band under the title */
.scene-step{font-size:10.5px;font-weight:700;color:var(--muted);margin-bottom:8px}
.scene-title{font-size:17px;font-weight:800;margin-bottom:6px}
.scene-amt{font-size:15px;font-weight:700;margin-bottom:10px}
.scene-line{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.4}
.scene-when{font-size:13px;font-weight:700;color:var(--ink);margin-top:6px;line-height:1.4}
.scene-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:8px}
.scene-nav{font-size:26px;font-weight:800;line-height:1;padding:6px 18px;border-radius:10px;border:1px solid var(--chipline);background:var(--chipbg);color:var(--ink);cursor:pointer}
.scene-nav:disabled{opacity:.35;cursor:default}
.scene-exitbtn{font-size:11px;font-weight:700;padding:8px 14px;border-radius:10px;border:1px solid var(--chipline);background:var(--chipbg);color:var(--ink);cursor:pointer;font-family:var(--ui)}
.row.scene-exit .row-line{outline:2px solid var(--dayok);outline-offset:-2px;transition:outline-color 1.2s}
.scene-art{width:100%;max-width:460px;margin:2px auto 0;display:block;flex-shrink:0}
.scene-rail{display:flex;align-items:center;gap:8px;padding-top:6px}
.scene-rail input[type=range]{flex:1;min-width:0}
.scene-raildate{font-size:10px;color:var(--muted);white-space:nowrap}
.scene-railnow{text-align:center;margin-top:2px;font-size:13px;font-weight:700;color:var(--ink)}
#sceneSpd{width:140px}
.wc-play{margin-left:auto;margin-right:8px}
.smdoor{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:9px 12px;margin:4px 0 10px;border:1px solid var(--chipline);border-radius:10px;background:var(--surface)}   /* #264/#265: the Sample Videos' doors */
/* the video buttons style THEMSELVES: .go2 has no base rule (it is only ever styled inside
   .entry and .notice-actions), so bare .go2 here rendered as unreadable system defaults.
   --btn/--btnline/--ink exist in every theme block, so this holds across all six. */
.smv{white-space:nowrap;background:var(--btn);border:1px solid var(--btnline);color:var(--ink);font-family:var(--ui);font-weight:700;font-size:12.5px;padding:6px 12px;border-radius:8px;cursor:pointer}
@media (hover:hover) and (pointer:fine){ .smv:hover{filter:brightness(1.12)} }
.smdoor-t{font-weight:800;font-size:13.5px;color:var(--ink);white-space:nowrap}
.smdoor-s{font-size:11px;color:var(--muted)}

/* ================= #275 (BossA, 2026-08-07): Add Token =================
   "Remove the search button on the price page.  Add a button that adds tokens
   not in the wallet."  The button rides the spyglass's own seat (it carries
   .searchlock, so every rail position and the phone icon-only rule apply to it
   unchanged) — only one of the two is ever visible, so they cannot collide. */
.searchlock .tl-n{margin-left:4px;font-size:9.5px;font-weight:800;color:var(--doton)}
/* the + sits beside the word on line 1, not jammed against it (BossA's "+ Add") */
.searchlock.addtok .tl1 svg{margin-right:3px;vertical-align:-1px}   /* how many are watched, read at a glance */
@media (hover:none) and (pointer:coarse){.searchlock .tl-n{font-size:12px}}   /* phone hides .tl1, so the count rides the glyph */

/* the picker sheet.  System sans + full ink, per the Show Work law (#50) —
   never mono, never muted-and-tiny. */
.wl-head{font-family:var(--ui);font-size:12.5px;font-weight:800;color:var(--title);
  margin:12px 0 4px;text-align:left}
.wl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-bottom:1px solid var(--rowline)}
.wl-row:last-of-type{border-bottom:0}
.wl-add{flex:1;display:flex;align-items:center;gap:8px;background:none;border:0;
  padding:9px 2px;cursor:pointer;text-align:left;font-family:var(--ui);color:var(--ink)}
.wl-add:hover{background:var(--workbg)}
.wl-sym{font-family:var(--ui);font-size:13.5px;font-weight:700;color:var(--ink)}
/* #294b: the Watching-Now row is a flex with the Remove button pushed right;
   its mark must not stretch, and the symbol sits beside it, not after a gap. */
.wl-row > .tkmark{flex:0 0 auto;margin-right:-2px}
.wl-row > .tkmark + .wl-sym{margin-right:auto}
/* a token with no daily archive prices live but cannot draw a change — say so
   HERE, before it is added, rather than leaving a bare dash to explain itself */
.wl-nohist{font-family:var(--sys);font-size:11px;font-weight:600;color:var(--faint);
  border:1px solid var(--chipline);border-radius:6px;padding:1px 5px}
/* #298b (BossA: "'In Your Wallet' font ink, so it looks different") — the two
   badges say different KINDS of thing, so they no longer look alike: the wallet
   one is a fact about YOU and speaks in ink; the archive one is a fact about our
   data and stays a faint footnote. */
.wl-nohist.wl-held{color:var(--ink);border-color:var(--line)}
.wl-x{font-family:var(--ui);font-size:11.5px;font-weight:700;color:var(--muted);
  background:var(--chipbg);border:1px solid var(--chipline);border-radius:7px;
  padding:4px 9px;cursor:pointer}
.wl-x:hover{color:var(--err);border-color:var(--err)}

/* ================= #276 (BossA 2026-08-08): the ATL cell =================
   Three figures in the space one percentage used to hold: the span, the gain,
   and the lowest daily close.  Stacked, because 143,465% beside a date and a
   price will not sit on one line at phone width — and BossA ruled the big
   percent stays as a percent for every token rather than switching some rows to
   x-multiples ("it needs to be the same for all tokens"). */
.px-atl{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;gap:1px}
.px-atl .atl-d{font-family:var(--sys);font-size:10.5px;font-weight:600;color:var(--faint)}
.px-atl .atl-p{font-weight:800}
.px-atl .atl-v{font-family:var(--sys);font-size:10.5px;font-weight:600;color:var(--muted)}

/* #298: a modal long enough to scroll needs its exit in reach — the Add Token
   sheet runs 84 rows, and the bottom close was 3,300px down.  Sticky header,
   same surface as the sheet so rows slide under it cleanly. */
.wl-top{position:sticky;top:0;z-index:3;display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;background:var(--surface);padding:2px 0 6px;margin-bottom:2px}
.wl-top .mtitle{margin:0}
.modal-x{flex:0 0 auto;background:none;border:1px solid var(--line);border-radius:11px;
  color:var(--ink);font-size:30px;line-height:1;padding:6px 14px;cursor:pointer}   /* #298b (BossA): twice the size — the way out of an 84-row sheet should not be a squint */
.modal-x:hover{background:var(--chipbg)}

/* #299: the row awaiting its second tap — the same amber the app uses when it
   is holding a question open, and a label that states the next move. */
.wl-add.armed{background:var(--chipbg);outline:1.5px solid var(--title);outline-offset:-1.5px;border-radius:8px}
/* #312: Add by Address — the paste field, the DexScreener chip, the ring mark */
.wl-paste{display:flex;align-items:center;gap:8px;margin:2px 0 6px;flex-wrap:wrap}
.paste-in{flex:1;min-width:200px;background:var(--btn);border:1px solid var(--btnline);border-radius:8px;
  color:var(--ink);font-family:var(--mono);font-size:12.5px;padding:8px 10px}
.paste-in:focus{outline:1.5px solid var(--title);outline-offset:-1px}
.dexscr{font-family:var(--sys);font-size:11px;font-weight:600;color:var(--title);text-decoration:none;
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;margin-left:6px;white-space:nowrap}
.dexscr:hover{background:var(--workbg)}
.dexscr-li{list-style:none}
.lp-nm{font-weight:600;margin-right:2px}   /* the added row's own name, beside its address chip */
.wl-arm{font-family:var(--sys);font-size:11px;font-weight:700;color:var(--title);white-space:nowrap}

/* #300: the not-priced row identifies itself by address, never by a name it
   claims for itself.  Mono, so the characters that matter are countable. */
.lp-addr{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:12.5px;color:var(--ink)}
.lp-copy{margin-left:7px;font-family:var(--sys);font-size:10.5px;font-weight:700;color:var(--muted);
  background:none;border:1px solid var(--chipline);border-radius:6px;padding:1px 6px;cursor:pointer}
.lp-copy:hover{background:var(--chipbg);color:var(--ink)}

/* #300b (BossA's screenshot): this head carries ONE long label, not the card's
   four column names, so it must not inherit the four-column grid — at 390px it
   was folding "Your Wallet - Not Priced, LP below $36,900" into a seven-line
   stack.  One column, wrapping normally. */
#app .row-head.pxhead.lp-head{grid-template-columns:1fr}
#app .row-head.lp-head .hd-token{display:block;text-align:left;line-height:1.4;cursor:default}

/* ================= #314: Bubbles — the fourth card ================= */
/* the pill's one pictogram rides the letter's seat */
.pane-pill .ppl svg.ppb{display:block;margin:0 auto}
.bub-rail{padding:8px 6px 2px}
.bub-sets{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:6px}   /* BossA 2026-08-13: a chip half off the screen reads as broken — the row WRAPS, every set visible */
.bub-pers{display:flex;gap:6px;flex-wrap:wrap;padding-top:2px}
.bub-chip{flex:none;font-family:var(--sys);font-size:12.5px;line-height:1;padding:7px 10px;border-radius:999px;border:1px solid var(--btnline);background:var(--btn);color:var(--muted);cursor:pointer;white-space:nowrap}
.bub-chip.on{border-color:var(--ink);color:var(--ink);font-weight:700}
.bub-rest .bub-per{opacity:.45}   /* Stables: distance is a now-question — the caption says why these rest */
.bub-storm{margin-left:auto}
/* #354: the chip WAVES before it is ever pressed — a reader has to learn the
   button exists before they can want it (#97's logo law, same 30-day rest
   after the first press).  A gust runs across the chip and rocks it, on a
   long quiet cycle so it invites without nagging; the tank behind it still
   never moves by itself (#255) — this is chrome, not weather. */
.bub-chip.beckon-chip{
  animation: bub-beckon 3.4s ease-in-out infinite;
  border-color: rgba(120, 190, 255, .45);
}
@keyframes bub-beckon{
  0%, 62%, 100% { transform: translateX(0) rotate(0deg); box-shadow: 0 0 0 0 rgba(120, 190, 255, 0) }
  70%  { transform: translateX(-2px) rotate(-2deg); box-shadow: 0 0 0 2px rgba(120, 190, 255, .26), 0 0 10px rgba(120, 190, 255, .34) }
  78%  { transform: translateX(1.8px) rotate(1.6deg); box-shadow: 0 0 0 2px rgba(120, 190, 255, .22), 0 0 9px rgba(120, 190, 255, .28) }
  86%  { transform: translateX(-1.2px) rotate(-1deg); box-shadow: 0 0 0 1px rgba(120, 190, 255, .14), 0 0 6px rgba(120, 190, 255, .18) }
  94%  { transform: translateX(0.5px) rotate(0.4deg); box-shadow: 0 0 0 0 rgba(120, 190, 255, .06), 0 0 3px rgba(120, 190, 255, .08) }
}
/* #354b: the two chips take TURNS — a half-cycle apart, so a fresh reader is
   invited twice over rather than shown one synchronized decoration */
.bub-create.beckon-chip{ animation-delay: 1.7s }
@media (prefers-reduced-motion: reduce){
  /* the invitation stays, the movement goes — #211c's stance on the teaching wave */
  .bub-chip.beckon-chip{ animation: none; border-color: rgba(120, 190, 255, .55); box-shadow: 0 0 0 1px rgba(120, 190, 255, .20) }
}
/* #353: the Storm chip blows with the tank — one pulse per real gust, on the
   cadence JS publishes (--gust-ms × --gusts), so the picture can never drift
   from the weather.  The blow leans the chip into the wind and lights its rim;
   both decay across the run exactly as the shoves do, and the class is pulled
   the moment the last gust lands. */
.bub-storm.blowing{
  animation: bub-blow var(--gust-ms, 280ms) ease-in-out var(--gusts, 9),
             bub-blow-fade calc(var(--gust-ms, 280ms) * var(--gusts, 9)) linear 1;
  border-color: rgba(120, 190, 255, .55);
}
@keyframes bub-blow{           /* one gust: a lean into the wind and back */
  0%   { transform: translateX(0) rotate(0deg) }
  22%  { transform: translateX(-1.6px) rotate(-1.6deg) }
  55%  { transform: translateX(1.4px) rotate(1.2deg) }
  100% { transform: translateX(0) rotate(0deg) }
}
@keyframes bub-blow-fade{      /* the whole run eases off — the late gusts are breezes, and the chip says so */
  0%   { opacity: 1; box-shadow: 0 0 0 2px rgba(120, 190, 255, .30), 0 0 12px rgba(120, 190, 255, .40) }
  60%  { box-shadow: 0 0 0 1px rgba(120, 190, 255, .16), 0 0 7px rgba(120, 190, 255, .20) }
  100% { opacity: 1; box-shadow: 0 0 0 0 rgba(120, 190, 255, 0), 0 0 0 rgba(120, 190, 255, 0) }
}
@media (prefers-reduced-motion: reduce){
  /* the storm is the reader's own doing, so it still blows — but the chip
     reports it with light alone, never movement */
  .bub-storm.blowing{ animation: bub-blow-fade calc(var(--gust-ms, 280ms) * var(--gusts, 9)) linear 1 }
}
/* BossA 2026-08-18: "make the Subtract button background field a very light
   red" — a wash of the danger ink over the chip's own field, so it reads in
   every theme without shouting */
.bub-sub{background:color-mix(in srgb, var(--err) 14%, var(--btn))}
/* BossA 2026-08-18 (his ruling after the shimmer stopped): "Instead of adding
   the Storm movement back, just add a blue border to Storm and a red border
   to Heat map."  The #354 beckon retires for Storm — a standing border is the
   invitation now, both states. */
.bub-storm,.bub-storm.on{border-color:var(--card-blue)}
.bub-heatb,.bub-heatb.on{border-color:var(--err)}
.bub-sub.on{border-color:var(--err);color:var(--err);font-weight:700;
  background:color-mix(in srgb, var(--err) 26%, var(--btn))}   /* armed: the chip says danger-adjacent — a tap now removes; the field deepens a step */
.bub-subhint{font-family:var(--sys);font-size:12.5px;color:var(--muted);align-self:center}
/* #406: Restore rides the RAIL beside Subtract now, not the caption under the
   tank, so it drops the caption's margin and takes the app's own blue — the
   interactive accent.  Subtract is red because it removes; its undo reads in
   the accent that means "an action lives here", never in the caption's muted
   grey, which is what let it hide in plain sight. */
.bub-restore{border-color:var(--card-blue);color:var(--card-blue);font-weight:700;
  background:color-mix(in srgb, var(--card-blue) 14%, var(--btn))}
/* the tank: always a dark medium — smoke needs the dark, whatever the theme */
.bub-tank{position:relative;overflow:hidden;margin:8px 6px;border:1px solid var(--line);border-radius:10px;background:#05070c;touch-action:pan-y}
.bub-tank canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bub{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:50%;border:2px solid;background:rgba(10,14,22,.55);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;text-align:center;line-height:1.15;font-family:var(--sys);will-change:transform;z-index:1}
.bub:active{cursor:grabbing}
.bub-up{border-color:var(--good);color:var(--good)}
.bub-down{border-color:var(--err);color:var(--err)}
.bub .bub-sym{font-weight:700;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.bub .bub-rv{font-weight:700;pointer-events:none}
.bub .bub-pct{font-size:.85em;pointer-events:none}
/* #396: the Heat map face — the tank's frame, tiles instead of bubbles.  Each
   tile fills with its gain/loss ink mixed to its move's weight (set inline);
   the ink pair and the dark medium are the tank's own. */
.bub-heat{position:relative;overflow:hidden;margin:8px 6px;border:1px solid var(--line);border-radius:10px;background:#05070c;touch-action:manipulation}   /* #451: manipulation keeps pan and pinch but retires iOS double-tap zoom — the tiles answer a double-tap with the token's chart now */
.bht{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  box-sizing:border-box;border:1px solid #05070c;text-align:center;line-height:1.15;font-family:var(--sys);
  color:#eaf6ff;user-select:none;-webkit-user-select:none;overflow:hidden}
.bht .bht-sym{font-weight:700;max-width:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.bht .bht-rv{font-weight:700;font-size:.8em;pointer-events:none}
.bht .bht-pct{font-size:.8em;pointer-events:none}
.bub-cap{font-family:var(--sys);font-size:12.5px;line-height:1.5;color:var(--muted);padding:2px 8px 10px}
/* #358: the Staker room.  Its caption wears the same dress as the tank's, and
   its summary line is full INK — it states counts the reader is meant to read,
   not an aside about them. */
.stk-head{font-family:var(--sys);font-size:13px;line-height:1.5;color:var(--ink);padding:6px 8px 2px}
.stk-cap{font-family:var(--sys);font-size:12.5px;line-height:1.5;color:var(--muted);padding:2px 8px 10px}
.stk-pairsum-h{font-size:12.5px;font-weight:600;color:var(--ink);margin-left:auto;margin-right:.6em;white-space:nowrap}   /* BossA 2026-08-30 (screenshot ruling, then "Move HEX + eHEX = $ 5 spaces before the R HEX : eHEX"): the pair price stands just ahead of the ratio on the RIGHT — margin-left:auto pushes it over; the button's 10px gap + .6em ≈ five spaces of the head's own 12.5px face before the R */
.bub-note{font-family:var(--sys);font-size:13px;color:var(--muted);padding:18px 8px}
/* the set-order modal rows */
.bubo-cap{font-family:var(--sys);font-size:12.5px;color:var(--muted);margin:2px 0 10px;line-height:1.5}
/* #343: You Create — the personal-set door */
.buby-name{display:block;width:100%;max-width:280px;margin:2px 0 12px;padding:9px 11px;border-radius:10px;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);font-family:var(--sys);font-size:14px}
.buby-grid{display:flex;flex-wrap:wrap;gap:6px;max-height:300px;overflow-y:auto;padding:2px 0 6px}
.buby-grid .buby-chip.on{border-color:var(--card-blue);color:var(--ink);background:rgba(55,138,221,.16)}
.buby-foot{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.buby-del{color:var(--err)}
.bub-you.on,.bub-chip.bub-you.on{border-color:var(--card-blue)}
.bubo-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);font-family:var(--sys);font-size:14px;color:var(--ink);background:var(--surface)}
.bubo-row .bubo-grip{cursor:grab;touch-action:none;color:var(--muted);padding:0 4px;font-size:15px}
.bubo-row.wdragging{outline:1.5px dashed var(--card-blue);outline-offset:-1px;opacity:.93;position:relative;z-index:3}

/* #314h (BossA, re-ruled): the pictogram's bubbles BREATHE — the cluster
   drifts APART toward the card's edges and back to the center, one shared
   rhythm, each circle along its own outward line.  The svg lets them travel
   past its box; the card's own overflow:hidden is the outer wall.  Reduced
   motion stills them. */
.ppb{overflow:visible}
.ppb circle{animation:5s ease-in-out infinite}
.ppb .ppb1{animation-name:ppbout1}
.ppb .ppb2{animation-name:ppbout2}
.ppb .ppb3{animation-name:ppbout3}
.ppb .ppb4{animation-name:ppbout4}
@keyframes ppbout1{0%,100%{transform:translate(0,0)}50%{transform:translate(-2.7px,-1.2px)}}
@keyframes ppbout2{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-2.2px)}}
@keyframes ppbout3{0%,100%{transform:translate(0,0)}50%{transform:translate(-1.7px,2.5px)}}
@keyframes ppbout4{0%,100%{transform:translate(0,0)}50%{transform:translate(2.6px,1.5px)}}
@media (prefers-reduced-motion: reduce){.ppb circle{animation:none}}

/* #358h: the Staker room's zoom rail — Zoom Out plus the range it is showing.
   Dressed like the board chart's window rail so one learned control reads the
   same in both rooms. */
.stk-rail{display:flex;align-items:center;gap:9px;padding:2px 8px 8px;flex-wrap:wrap}
.stk-rail .chip{font-family:var(--sys);font-size:12px;color:var(--ink)}
.stk-hid{font-family:var(--sys);font-size:11.5px;color:var(--muted)}
.stk-rail .cbtn[disabled]{opacity:.4;pointer-events:none}

/* #358i: the Staker room's Zoom Out card — above the chart, and dressed to be
   found at a glance rather than hunted for.  The button carries a border and
   real padding because it is the one control in the room that undoes a move. */
.stk-card{display:flex;align-items:center;gap:12px;margin:6px 8px 2px;padding:9px 11px;
  border:1px solid var(--btnline);border-radius:11px;background:var(--btn)}
.stk-card .stk-out{font-family:var(--sys);font-size:13px;font-weight:600;color:var(--ink);
  background:rgba(55,138,221,.16);border:1px solid var(--card-blue);border-radius:9px;
  padding:7px 12px;cursor:pointer;white-space:nowrap}
.stk-card .stk-out[disabled]{opacity:.35;pointer-events:none}
.stk-where{display:flex;flex-direction:column;gap:1px;font-family:var(--sys);font-size:13px;color:var(--ink);line-height:1.35}
.stk-where .stk-hid{font-size:11.5px;color:var(--muted)}

/* #358k: the month view's stake list — five columns, his own words for them.
   Monospace on the numbers so days and T-Shares line up column-wise; the dates
   stay in the system face because they are read, not compared digit by digit. */
.stk-list{margin:2px 8px 10px;overflow-x:auto}
.stk-list table{width:max-content;min-width:100%;border-collapse:collapse;font-family:var(--sys);font-size:12.5px;color:var(--ink)}
.stk-list th{text-align:left;font-weight:600;color:var(--muted);font-size:11.5px;
  padding:4px 6px 4px 0;border-bottom:1px solid var(--rowline);white-space:nowrap}
.stk-list td{padding:5px 6px 5px 0;border-bottom:1px solid var(--rowline);white-space:nowrap}
.stk-list td.num{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;text-align:right;padding-right:6px}
.stk-list th:nth-child(n+3){text-align:right;padding-right:6px}
/* #358n: six columns do not fit a 430px phone, and width:100% made the table
   OVERFLOW its box instead of scrolling inside it — the T-Shares column was
   simply cut off ("1.200(").  max-content lets overflow-x actually scroll. */
/* #358m: the visible-range total, one step brighter than the excluded count —
   what is in front of the reader outranks what is not. */
.stk-where .stk-sum{font-size:12px;color:var(--ink);font-family:ui-monospace,Menlo,monospace}
.stk-list tfoot td{padding:6px 8px 4px 0;border-top:1px solid var(--btnline);border-bottom:none;
  font-weight:600;color:var(--ink)}
.stk-list tfoot td.num{padding-right:6px}

/* #358q: the Stakes Timeline door.  Dressed as a card like Zoom Out, because a
   ledger row in this app means "read me" and this one means "press me". */
.stk-fold{margin:10px 8px 4px}
.stk-foldbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:11px 13px;border:1px solid var(--btnline);border-radius:11px;background:var(--btn);
  cursor:pointer;font-family:var(--sys);text-align:left}
.stk-foldbtn:hover{border-color:var(--card-blue)}
.stk-foldname{font-size:13.5px;font-weight:600;color:var(--ink)}
.stk-foldmeta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.stk-foldmeta .chev{margin-left:0;font-size:12px;color:var(--card-blue)}
/* #359d: the chain stat panel.  Three columns so the pairs that belong together
   — a T-Share's cost in HEX and in dollars, its daily pay in each — sit side by
   side and read as one fact, not two.  The empty key on the dollar cells is
   deliberate: the figure above already named it. */
/* #359e: TWO columns, not three.  Each cell now carries a fact and both its
   units ("46.5K HEX · $135"), so it needs the width — and every cell keeps its
   own name, which three columns could not fit without ellipsing. */
.stk-wing{display:flex;align-items:center;gap:7px;margin:10px 10px 4px;
  font-family:var(--sys);font-size:13px;font-weight:600;color:var(--ink)}
.stk-wing-dot{width:8px;height:8px;border-radius:50%;flex:none}
.stk-wing .tkmark{width:18px;height:18px;margin:0;flex:none;vertical-align:0}   /* #364: the wing's mark — the flex gap spaces it, so the row-seat margin stands down */
/* #365 (BossA, 2026-08-17: "Make the symbols and text 25% larger in desktop
   view"): the wing head — mark, dot, name and chain — steps up exactly 25%
   OVER WHAT THE DESK ALREADY SHOWS.  The desk gate below (900 + fine pointer,
   the '20%' block's own line) was already lifting the name to 120% = 19.2px,
   so +25% means 150% = 24px, stated at the SAME .stk-wingbox specificity that
   was beating the first cut of this rule; the sub likewise seats after its
   11.5px base.  The phone keeps the #358 sizes untouched. */
/* (#365's desk sizes live in ONE block, at the desk gate lower in the file —
   a second block here lost the specificity/order fight and read as applied
   when it was not; measured 19.2px until folded down there) */
.stk-wing-sub{font-weight:400;font-size:11.5px;color:var(--muted)}
.stk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:4px 8px 2px;
  background:var(--btnline);border:1px solid var(--btnline);border-radius:11px;overflow:hidden}
.stk-cell{background:var(--btn);padding:9px 10px;min-width:0}
.stk-v{font-family:var(--sys);font-size:14px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk-k{font-family:var(--sys);font-size:11px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The staked/liquid split.  One bar, two numbers, no legend to look up. */
.stk-split{margin:6px 8px 10px}
.stk-split-bar{height:10px;border-radius:5px;background:var(--btn);
  border:1px solid var(--btnline);overflow:hidden}
.stk-split-bar span{display:block;height:100%;background:var(--card-blue);opacity:.85}
.stk-split-legend{display:flex;justify-content:space-between;gap:10px;margin-top:4px;
  font-family:var(--sys);font-size:11.5px}
.stk-split-on{color:var(--card-blue)}
.stk-split-off{color:var(--muted)}

/* ── #360: Shares History + Wayback (BossA 2026-08-16) ───────────────────────
   Wayback's controls are a DATE FIELD and a SLIDER together, deliberately: you
   type when you know the day and scrub when you are hunting for the day a thing
   changed.  Both are visible controls — the room's law is that a control the
   reader cannot see is not a control. */
.stk-way{margin:8px 8px 4px}
.stk-way-lab{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.stk-way-date{margin-left:6px;font:inherit;font-size:12.5px;color:var(--ink);
  background:var(--btn);border:1px solid var(--line);border-radius:8px;padding:3px 6px}
.stk-way-range{width:100%;margin:2px 0 6px;accent-color:var(--card-blue)}
.stk-way-sum{font-size:13px;color:var(--ink)}
.stk-way-sum b{font-weight:600}
.stk-way-now{color:var(--muted);font-size:12px}
.stk-waylist{margin:6px 8px 4px;display:flex;flex-direction:column;gap:3px}
.stk-wayrow{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink)}
.stk-wayid{flex:0 0 auto;min-width:74px;font-family:ui-monospace,Menlo,monospace;color:var(--muted)}
.stk-wayid i{font-style:normal;opacity:.75}
.stk-waybar{flex:1 1 auto;height:6px;border-radius:3px;background:var(--btn);overflow:hidden}
.stk-waybar i{display:block;height:100%;border-radius:3px}
.stk-wayqty{flex:0 0 auto;font-family:ui-monospace,Menlo,monospace;color:var(--muted);white-space:nowrap}

/* #360c: the stake map's own heading.  Every other section on this page names
   itself in its fold button; the map — the thing the room opens with — carried
   only an aria-label, which a sighted reader never sees.  Same weight and ink as
   a fold name so the six sections read as one set, but no button, because there
   is nothing to collapse. */
.stk-mapname{margin:10px 8px 4px;font-size:13.5px;font-weight:600;color:var(--ink)}

/* #360e→#360i (BossA 2026-08-16), and the third pass is the one that stuck.
   He asked for the two brand fades, then replaced them with a blue and an orange
   swatch, then: "Pick the middle of the blue color to use and the color over the
   618B of the orange color.  Do not use a fade."

   So these are FLAT.  A gradient inside a 6px bar and behind 12px text was
   spending its range on nothing — at that size a fade reads as a slightly
   uneven flat colour, which is worse than a flat colour.  One value per wing,
   and the SAME value drives the chart lines (TSR_COLOR in app.js) so the room
   speaks one colour per chain everywhere. */
:root{
  --wing-hex:#2563c4;    /* HEX — the middle of his blue */
  --wing-ehex:#e2622b;   /* eHEX — the orange under "618B" */
}
.stk-wingbox{border:0.5px solid var(--wing-hex);border-radius:14px;margin:8px;padding:8px 4px 10px}
.stk-wingbox.eth{border-color:var(--wing-ehex)}

/* Bar and staked figure wear the frame's colour, so each box and its contents
   say one thing. */
.stk-wingbox.pls .stk-split-bar span{background:var(--wing-hex)}
.stk-wingbox.eth .stk-split-bar span{background:var(--wing-ehex)}
.stk-wingbox.pls .stk-split-on{color:var(--wing-hex)}
.stk-wingbox.eth .stk-split-on{color:var(--wing-ehex)}

/* #365 (BossA, 2026-08-17: "Make the symbols and text 25% larger in desktop
   view", then "I said 25%.  Is 100% + 25% 120%?"): the desk enlargement is
   EXACTLY the base size x 1.25, stated in px so no %-of-parent arithmetic can
   drift it — the earlier cut of this block said font-size:120% (the 08-16
   'enlarge 20%' ruling) and 150%-of-parent for the head, neither of which is
   what he said.  Every figure below is its base times 1.25 to the digit:
   value 14 -> 17.5 · label 11 -> 13.75 · legend 11.5 -> 14.375 ·
   head 13 -> 16.25 · chain sub 11.5 -> 14.375 · mark 18 -> 22.5 · dot 8 -> 10.
   Gated on width plus a fine pointer so a large phone in landscape does not
   trip it (the old block's own guard, kept). */
@media (min-width:900px) and (pointer:fine){
  .stk-wingbox .stk-v{font-size:17.5px}
  .stk-wingbox .stk-k{font-size:13.75px}
  .stk-wingbox .stk-split-legend{font-size:14.375px}
  .stk-wingbox .stk-wing{font-size:16.25px}
  .stk-wingbox .stk-wing-sub{font-size:14.375px}
  .stk-wingbox .stk-wing .tkmark{width:22.5px;height:22.5px}
  .stk-wingbox .stk-wing-dot{width:10px;height:10px}
}
.stk-ratio{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}   /* BossA 2026-08-30: the whole ratio wears the pair line's exact face (.stk-pairsum-h's 12.5/600/ink) — one voice on the head's right side */

/* #360n: a wing we could not read says so.  Amber, not red — nothing is broken
   and nothing is wrong with the wallet; the reading is incomplete, and the one
   unforgivable thing would be to let it pass as complete. */
.stk-missing{color:var(--title);margin:2px 8px 6px;font-size:12.5px;line-height:1.4}

/* ═══ #362 — Share a HEX Stake Growth ═══
   The Top Stake row on the Prices board, and the share modal's furniture.
   All class names are new (grow-*) — no existing rule wears them. */
/* the px row-line is a GRID (name | burnt 44px | change 94px | price) — this row
   has different freight, so it declares its own tracks rather than squeezing
   a percent into the Burnt column */
/* #379 (BossA: "Make the Share card narrower on Your Top Stake, so the green
   XXXX % center with the column better"): the row stops inventing its own three
   tracks and becomes a citizen of the card's columns — name across the name and
   fire tracks (it carries no Burnt figure, #375's rule), the percent in the
   CHANGE track, the button in the price track.  Then the green figure does not
   merely centre "better", it lands on the same column as every other change on
   the card, at both widths, by construction rather than by tuning.
   It also fixes a real misalignment nobody had measured: on the DESK the id-
   qualified #app template outranked the old three-track rule, so this row's
   three children fell into tracks 1-2-3 and the percent sat in the FIRE column,
   117px left of every other change figure. */
.grow-row .row-line.px{align-items:center}
.grow-row .row-line.px .row-name{grid-column:1 / span 2}
.grow-row .row-line.px .grow-pct{grid-column:3;justify-self:end;padding-right:6px}
@media (min-width:960px){ #app .grow-row .row-line.px .grow-pct{padding-right:28px} }   /* #379: the change figures are INSET inside their track — 6px on the phone, #278d's 28px on the desk, so their ink sits under the ‹24h› cluster's middle.  Matching the box edge would still leave this percent visibly right of every other one; it has to carry the same inset.  Measured on INK, not boxes — a box edge is not where a reader sees the figure. */
.grow-row .row-line.px .grow-share{grid-column:4;justify-self:stretch;width:100%}
/* #380b (BossA: "the desktop view shows Share button too wide.  The text is fine,
   reduce the side buffers"): the desk's price track is 130px while its price INK
   is ~68px, so a chip filling the track floated its word in ~90px of air.  On the
   desk the chip hugs its own text instead — right-aligned on the price column's
   edge, with the side buffers cut.  The PHONE keeps width:100%, where the track
   and the price cell are the same 62px and the match is exact. */
@media (min-width:960px){
  #app .grow-row .row-line.px .grow-share{justify-self:end;width:auto;padding:1px 14px}   /* #425 */
}   /* #380 (BossA: "Make the Share button the same width as the HEX price above it"): it fills the PRICE track, so the chip and the price above it are one column wide — a width that follows the track and can never drift from it, rather than a number copied off today's figure */
.grow-row .row-name{white-space:nowrap;overflow:hidden;font-size:14px}
.grow-sub{display:block;font-size:11px;color:var(--muted,#8ba2bd);font-weight:400;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow-pct{text-align:right;font-weight:700;font-size:16px;white-space:nowrap}
.grow-share{margin-left:0;border:1px solid #2b4257;background:none;color:var(--ink,#cfe0f0);
  border-radius:999px;padding:1px 6px;   /* #449f (audit): 'Share ↗' needs 63px, the track gives 62 — the 2px live here; 8px ellipsised the word to 'Sha…' on every phone */line-height:1;font-size:14px;font-weight:700;cursor:pointer;flex:none;   /* #425: 1px vertical + line-height 1 — the chip sits at the row's own 18px, out-talling nothing */
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}   /* #380: "the Text larger and bold" — 12 -> 14px, 700 */   /* #379: narrower (his word) — the 4px lead margin goes and the sides tighten 10 -> 8, so the chip seats inside the price track it now shares with every other row's price */
.grow-cv{width:100%;height:auto;border-radius:12px;display:block;margin:8px 0 10px}
.grow-rail{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.grow-wins{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}   /* #451b: the chart card's own window row */
.grow-chip{min-width:44px}
.grow-pick{flex:1;min-width:160px}
.grow-note{font-size:12.5px;color:var(--title,#8ba2bd);min-height:16px;margin:2px 0 6px}
.grow-btns{display:flex;gap:10px;align-items:center}
.grow-btns #growShare,.grow-btns #chartShare{border:1px solid var(--wing-hex,#2563c4);background:#16283c;color:#eaf6ff;
  border-radius:999px;padding:8px 22px;font-size:14px;cursor:pointer}   /* #394: the token cards' door dresses like the growth card's */

/* ============================================================================
   #363 (BossA, 2026-08-17, the two-across screenshot): the GRID VIEW — Token
   Prices as two cards per line: the mark large, the name beneath it, the price,
   and the change worn as a pill.  A VIEW, not a second render path: the class
   on #paneBody re-seats the exact rows renderPane already built, so every
   figure, fold, warning and tap is the list's own and the two can never drift.
   The rail chip (#viewGrid) flips it; the stance lives in its own device slot
   (#335's grammar, never inside `store`).
   What the grid declines, deliberately: the Burnt column and the reorder grips
   — both stay with the list, where columns exist to hold them (the title on
   the chip says so).  What keeps its full-width shape: suspected rows (a #42
   warning squeezed to half-width would be a smaller warning), the Top Stake
   row (#362), the walk fences (#318/#323), and any OPEN row — its unfolded
   chart needs the whole pane, so an open card simply grows to both columns. */
#paneBody.pxgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#paneBody.pxgrid>*{grid-column:1 / -1;min-width:0}
#paneBody.pxgrid .px-sect:not(.walk-sect){display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 8px 8px}
#paneBody.pxgrid .px-sect:not(.walk-sect)>*{grid-column:1 / -1;min-width:0}
/* only a plain CLOSED card takes a half seat — open rows (their chart needs the
   pane), suspected rows and the Top Stake row keep the full line via the >* rule
   above.  The exceptions live INSIDE this selector (:not), never as a second
   rule: a separate .row.open rule loses this pair's specificity fight — measured
   in WebKit, the open card stayed at half width until the carve-out moved here. */
#paneBody.pxgrid>.row:not(.open):not(.suspect):not(.grow-row){grid-column:auto}
#paneBody.pxgrid .px-sect:not(.walk-sect)>.row:not(.open):not(.suspect):not(.grow-row){grid-column:auto}
/* the separators belong to the list — a card carries its own fence instead.
   The row is a COLUMN whose line flexes to fill: that is what squares up a
   side-by-side pair (the grid stretches the rows, the line follows), and it is
   also why height:100% must never do this job — an OPEN row's height includes
   its unfolded chart, so a percentage line ballooned to cover both and the
   chart painted under the neighboring cards (measured in WebKit). */
#paneBody.pxgrid>.row:not(.grow-row):not(.suspect),
#paneBody.pxgrid .px-sect:not(.walk-sect)>.row:not(.grow-row):not(.suspect){
  border-top:none;display:flex;flex-direction:column;min-width:0}
/* the card itself — chrome on the ROW-LINE, so an open row's chart unfolds
   beneath the card the way the list's unfolds beneath the row */
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line){
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:13px 8px 11px;text-align:center;position:relative;flex:1 1 auto;box-sizing:border-box;
  border:1px solid var(--line);border-radius:12px;background:var(--surface)}
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .row-name{
  display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;max-width:100%;text-align:center}
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .row-name .tkmark{
  width:42px;height:42px;margin:0}
/* the photo's order — name above, price, then the change pill under it */
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .px-px{
  order:2;font-size:16.5px;text-align:center}
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .px-chg{
  order:3;padding:2.5px 10px;border-radius:999px;text-align:center;margin-top:1px;font-size:16.5px}   /* #367: the card's own price size, stated because the card raised the price above the row's 15.5 */
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .px-chg.px-up{
  background:color-mix(in srgb,var(--good) 14%,transparent)}
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .px-chg.px-down{
  background:color-mix(in srgb,var(--err) 14%,transparent)}
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .px-chg.px-atl{
  display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px}
/* #368: the Burnt / Yield cell joins the card — under the change pill, at the
   card's own price size, its caption naming it because no column head can. */
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .px-burnt{
  order:4;font-size:16.5px;text-align:center;justify-self:center;margin-top:3px;line-height:1.15}
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .px-burnt:empty{display:none}   /* a token with no burn and no yield adds no empty gap */
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .bcap{
  display:block;font-style:normal;font-family:var(--sys);font-size:11px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;color:var(--faint)}   /* the .row-head column voice, said on the card */
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .wgrip{display:none}
/* the column line sheds its columns — only the range stepper has a job here */
#paneBody.pxgrid .row-head.pxhead.pxcols{display:flex;justify-content:center}
#paneBody.pxgrid .row-head.pxhead.pxcols .hd-token,
#paneBody.pxgrid .row-head.pxhead.pxcols .hd-burnt,
#paneBody.pxgrid .row-head.pxhead.pxcols .hd-px{display:none}
/* #363: the chip's seats.  The base .grouplock seats serve two of three tiers
   (desk right:144 and the phone's 42-row are Sort's, and Sort never shows on
   Prices) — but the <960 desk seat (232) is Add Token's on this pane, so the
   chip steps outboard to Story's 304 there (Story never shows on Prices). */
@media (max-width:959px) and (hover:hover) and (pointer:fine){.pane-stick .gridview{right:304px}}   /* fine pointers only — stated at the file's END, an unscoped rule outranked the coarse right:0 seat by ORDER and beached the chip mid-page on the phone (measured in WebKit) */
/* #369 (BossA): on the PHONE the spyglass stands down on the Prices lens, and
   Grid/List takes the seat it leaves — the top row reads Lock · Grid · Add
   Token, all three on one line.  Before this the chip inherited .grouplock's
   coarse seat (top:42) and opened a SECOND rail row, which the #307 hang
   measurement then pushed the whole card down to clear. */
@media (hover:none) and (pointer:coarse){.pane-stick .gridview{top:0;right:74px}}

/* #366: the ratio card's two faces — HEX leads the name, eHEX closes it.  The
   trailing mark mirrors the leading one's 7px air; in the grid card the name
   returns to ONE ROW (the card grammar stacks names into a column) so the two
   marks truly flank the words, sized between the row's 18 and the card's 42. */
.pairmark-r .tkmark{margin:0 0 0 7px}
.pairtail{white-space:nowrap}
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .row-name.pairname{flex-direction:row;justify-content:center;align-items:center;gap:0}
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .row-name.pairname .tkmark{width:22px;height:22px;margin-right:7px}
#paneBody.pxgrid .row:not(.grow-row):not(.suspect)>.row-line.px:not(.walk-line) .row-name.pairname .pairmark-r .tkmark{margin:0 0 0 7px}
.pairtail{white-space:nowrap}


/* #370 (BossA: "In phone view, list mode, remove a digit from the price field to
   reduce wrap"): the digit came off in JS (fmtPriceCell), and THIS is what turns
   it into fewer wrapped names — the freed width has to actually reach the name
   column.  Phone only, list only: the fence and the row hand over their side
   padding.  Measured at 390: 12 of 17 names wrapped before, 9 after — and 9 is
   fewer than the 10 that wrapped before ANY of today's work.  What still wraps
   is what always did: the pair name, Your Top Stake's two-line label, "eHEX
   (bridged)", the two Walk fences, and the grip rows. */
@media (hover:none) and (pointer:coarse){
  #paneBody:not(.pxgrid) .row-line.px{padding-left:10px;padding-right:4px}
  #paneBody:not(.pxgrid) .px-sect{padding-left:4px;padding-right:4px}
  /* #389c (BossA: "Right justify the $$$ with the prices below it"): the head
     must share the ROW's right padding, not .row-head's own — #370 took the
     rows to 4px and left the head at 6px, which set the $$$ 6px inboard of every
     price beneath it.  One edge for the column, head and figures alike. */
  #paneBody:not(.pxgrid) .row-head.pxhead{padding-right:4px}
}


/* #374: the ATL cell's percent is a different animal from "−4.3%" — six or seven
   digits in a cell that already stacks three figures at mixed sizes (the day-count
   and the low ride at 10.5px by #276's own design).  On the PHONE it steps down so
   the change column can fit the other eight windows honestly; the desk keeps the
   matched size, where the track is 110px and has the room.  #367's rule stands
   where it was given — on the ordinary change figure the reader actually watches. */
@media (hover:none) and (pointer:coarse){
  .row-line.px .px-chg.px-atl .atl-p{font-size:12.5px}
}


/* #375 (BossA: "HDRN does not have a burnt column.  Can HDRN and other wide letter
   token names use that space to not wrap?"): a row with NO Burnt figure gives that
   column to its name.  Every price row is its own grid, so this changes one row's
   internal division and nothing else — the change and price columns keep the exact
   seats they hold on every other row, so the card still reads as columns.  The
   cells are placed EXPLICITLY rather than left to auto-placement: with the empty
   Burnt span gone, an unplaced change cell would drift into the track the name is
   already spanning. */
.row-line.px.noburnt .px-burnt{display:none}
.row-line.px.noburnt .row-name{grid-column:1 / span 2}
.row-line.px.noburnt .px-chg{grid-column:3}
.row-line.px.noburnt .px-px{grid-column:4}


/* #376 (BossA: "Build 3", after seeing all three side by side): the DESK's Prices
   rail becomes one line per button — the symbol, then one plain word.  His own
   label law (#198) is unchanged: each word names the view a tap GIVES.
     [four panes] Grid / [lines] List · [plus] Add · [clock+padlock] Lock/Unlock
   Why it can be this shape here and nowhere else: the Prices card is the ONE rail
   whose chips are exactly these three (Sort, Story and the Value Card never render
   on it), so the wider 92px chip and its 100px pitch move nothing else.  Scoped by
   body.bb-pxrail for exactly that reason.
   The PHONE is untouched — it keeps the symbols-only chips of #372/#373, where the
   room genuinely was not there. */
@media (min-width:960px) and (hover:hover) and (pointer:fine){
  body.bb-pxrail .pane-stick #viewGrid,
  body.bb-pxrail .pane-stick #addTokBtn,
  body.bb-pxrail .pane-stick #timerLock{
    flex-direction:row;align-items:center;justify-content:center;gap:7px;
    width:92px;min-height:37px;padding:4px 10px}
  body.bb-pxrail .pane-stick #timerLock{right:0}
  body.bb-pxrail .pane-stick #addTokBtn{right:100px}
  body.bb-pxrail .pane-stick #viewGrid{right:200px}
  /* #399: Grid Chart joins the #376 rail at the next seat — wider box because
     its word pair is longer; nothing sits outboard of it to collide with */
  body.bb-pxrail .pane-stick #viewChartGrid{
    flex-direction:row;align-items:center;justify-content:center;gap:7px;
    width:110px;min-height:37px;padding:4px 10px;right:300px}
  body.bb-pxrail #viewChartGrid .gl-ico{display:block}
  body.bb-pxrail #viewChartGrid .gl-ico svg{width:16px;height:16px;display:block}
  body.bb-pxrail #viewChartGrid .gl1{display:block;font-size:11.5px;letter-spacing:0}
  body.bb-pxrail #viewChartGrid .gl2{display:none}
  body.bb-pxrail #viewGrid .gl-ico{display:block}
  body.bb-pxrail #viewGrid .gl-ico svg{width:16px;height:16px;display:block}
  body.bb-pxrail #viewGrid .gl1{display:block;font-size:11.5px}
  body.bb-pxrail #viewGrid .gl2{display:none}
  body.bb-pxrail #addTokBtn .tl1{display:flex;align-items:center;gap:6px;font-size:11.5px}
  body.bb-pxrail #addTokBtn .tl1 svg{width:14px;height:14px}
  body.bb-pxrail #addTokBtn .tl2{display:none}
  body.bb-pxrail #timerLock .tl1{display:none}
  body.bb-pxrail #timerLock .tl-clock{display:block}
  body.bb-pxrail #timerLock .tl2{display:flex;align-items:center;gap:6px;font-size:11.5px}
  body.bb-pxrail #timerLock .tl2 svg{width:15px;height:15px;display:block}
}


/* #378: the Burnt column's head is an emoji now, and an emoji is not type — the
   uppercase transform and letter-spacing the .row-head labels carry do nothing
   for it but the size does, so both heads state their own.  The flame keeps its
   own colours (a colour emoji ignores `color` entirely), which is the point. */
.row-head.pxhead .hd-burnt{font-size:15px;letter-spacing:0;line-height:1;
  justify-self:end;text-align:right;padding-right:17px}
/* #381 (BossA: "also center over the column better"): the range control sits on
   its own column's centre, the way the flame now sits on the fire column's.  The
   worded heads (TOKEN, PRICE) keep their edges — they label columns of text that
   align to an edge; these two label columns whose contents are a lone glyph and a
   cluster, and a cluster has no edge worth agreeing with. */
.row-head.pxhead .hd-chg{justify-self:center}   /* #378b (BossA: "center it over the column"): the flame sits on the TRACK's centre, not the right edge the worded heads keep — a lone glyph over a column whose figures run from "2.1%" to "0.0₄7%" has no edge to agree with, so the column's middle is the honest place for it */
.bcap.fire{font-size:13px;letter-spacing:0;line-height:1.15}


/* #382 (BossA): the Token column's head is his three marks — HEX, PLSX, PLS.
   Each turns a full circle, then FREEZES upright for exactly one second, then
   turns again: a 2.2s cycle whose last 1.0s is the hold (1.2s spin, 54.55% of
   the cycle, then rest).  All three turn together, so the frozen second always
   shows the arrangement he sent.
   Reduced motion stops the turning and keeps the marks — the picture is the
   content here, the movement is decoration, so only the decoration goes. */
/* #384: the three marks INTERLOCK into BossA's own composite instead of sitting
   apart.  The overlap is not eyeballed — his artwork measures 810x327, an aspect
   of 2.477, while the three marks laid edge to edge come to 3.050 of their
   height.  The difference, halved across the two joints, is the overlap:
   H x (3.050 - 2.477) / 2, which is 5.2px at this 18px height.  Stated as a
   ratio of the mark's own size, so it holds if the size ever changes. */
/* #401 (BossA: "Put TOKENS back … use no color INK and keep the 3 symbols next
   to it on the right"): the word leads in INK — not the row-head's faint, not
   an accent — and the trio artwork sits 6px to its right.  The old gap:0 law
   guarded the three-mark interlock; #387 made the trio ONE image, so there is
   no joint left for a gap to break. */
.row-head .hd-token.hd-tok3{display:inline-flex;align-items:center;gap:6px;justify-self:start;cursor:default}
.hd-tok3 .hd-tokw{color:var(--ink)}
/* #387: one image now, so no joint to tune */
/* #382c: each mark is DOUBLE-SIDED — the same artwork on both faces, so a half
   turn brings a forward-facing symbol back and the logo is never seen mirrored
   (BossA: "the symbols never show backwards.  So a half spin shows everything
   facing forward").  One turn per page load, then still: the animation runs
   ONCE and its final frame is kept (forwards), and a card repaint after the
   window has passed emits .settled, which carries no animation at all. */
.hd-tok3 .hdtok{position:relative;height:18px;display:block;flex:none;
  -webkit-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:50% 50%}
.hd-tok3 .hdtok img{height:18px;width:auto;display:block}
/* each mark keeps its OWN width, so none is squeezed into a square it was never
   drawn for: HEX 1.138:1, the candles 0.841:1, PulseChain 1.071:1 */
/* widths = each mark's own MEASURED aspect x the 18px height, so nothing is
   squeezed into a square it was never drawn for:
   HEX 80x70 = 1.1429 · candles 135x160 = 0.8438 · PulseChain 80x75 = 1.0667 */
.hd-tok3 .hdtok-art{width:44.5px}   /* his artwork 811x328 = 2.4726:1 -> 18px tall is 44.5 wide */
.hd-tok3 .hdtok-f,.hd-tok3 .hdtok-b{position:absolute;inset:0;display:block;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  -webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.hd-tok3 .hdtok-b{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.hd-tok3 .hdtok.spinning{animation:hdtokspin 2.2s ease-in-out 1 forwards}
/* the settled mark shows its FRONT face untransformed.  The turn ends on the
   back face, which carries the same artwork, so the two are identical to the
   eye — and a plain resting element cannot inherit any 3D artefact. */
.hd-tok3 .hdtok.settled{transform:none}
/* #382b (BossA: "Make them spin edge moving back and forward along a center
   vertical axis, not rotate around the center flat facing") — rotateY, not
   rotate: the mark turns about the vertical line through its middle, so its
   left and right edges swing toward and away from the reader and it passes
   edge-on twice a turn.  The perspective() rides INSIDE the transform rather
   than on the flex parent: a `perspective` property on the container puts one
   vanishing point at the container's centre, which would make the three marks
   lean differently the further each sits from it — this way each turns about
   its own axis. */
/* a second at rest facing forward (0 - 45.45% of 2.2s = 1.00s), then ONE half
   turn (1.2s) that ends facing forward again on the back face. */
/* No perspective(): at 18px it buys no visible depth, and nesting it around a
   child that carries its own rotateY foreshortened the resting mark into a
   squashed hexagon (seen, then measured).  A plain rotateY is the clean coin
   flip — the edges still swing toward and away, with no distortion. */
@keyframes hdtokspin{
  0%{transform:rotateY(0deg)}
  45.45%{transform:rotateY(0deg)}
  100%{transform:rotateY(180deg)}
}
@media (prefers-reduced-motion:reduce){ .hd-tok3 .hdtok.spinning{animation:none;transform:none} }

/* #383 (BossA: "I like A best, dots with blue dash") + #383b (triangles above
   the dots, each half of the control its own hotspot): no chip chrome at all —
   the range name with a solid triangle either side, and one mark per range
   beneath with the active one stretched into a blue dash.
   The two buttons are ABSOLUTE halves of the control, meeting at the label's
   centre and running the full height, so the tap regions are ~46x34 while the
   glyphs stay 11px.  The dots sit under them and stay decorative: an indicator
   the eye reads, never a target a finger must find. */
/* #393: the chart folds' .bc-rail wears the SAME control — every selector below
   serves both homes, so the header and the folds can never drift apart. */
.row-head.pxhead .hd-chg.chgwin{display:flex;align-items:center;justify-content:center}
.row-head.pxhead .cw-mid,.bc-rail .cw-mid{position:relative;display:flex;flex-direction:column;
  align-items:center;gap:3px;min-width:74px;padding:1px 0}
/* #383c: the marks hug the label — the row sizes to its own content, so the
   triangles sit a fixed 6px from the word however long the range name runs. */
.row-head.pxhead .cw-top,.bc-rail .cw-top{display:flex;align-items:center;justify-content:center;
  gap:6px;line-height:1;position:relative;z-index:1}
.row-head.pxhead .cw-tri,.bc-rail .cw-tri{font-style:normal;font-size:10px;line-height:1;color:var(--muted);
  user-select:none}
.row-head.pxhead .chg-lab,.bc-rail .chg-lab{font-size:12.5px;font-weight:700;color:var(--ink);
  letter-spacing:0;text-transform:none;line-height:1;background:none;border:none;padding:0}
.bc-rail .chg-lab{font-size:14px}   /* #436d (BossA: "Make the 24h label larger"): the fold rails' window label steps up; the card header's stays 12.5 */
/* the two targets: invisible halves meeting at the label's centre, full height.
   They carry no glyph now — the marks above do that — so nothing about where a
   triangle SITS constrains where a finger may LAND. */
.row-head.pxhead .hd-chg .chgstep,.bc-rail .chgstep{position:absolute;top:0;bottom:0;width:50%;
  padding:0;margin:0;min-width:0;background:none;border:none;box-shadow:none;
  font-size:0;line-height:0;cursor:pointer;z-index:2}
.row-head.pxhead .hd-chg .chgstep.cw-l,.bc-rail .chgstep.cw-l{left:0}
.row-head.pxhead .hd-chg .chgstep.cw-r,.bc-rail .chgstep.cw-r{right:0}
.row-head.pxhead .hd-chg .chgstep:active,.bc-rail .chgstep:active{transform:none}
@media (hover:hover) and (pointer:fine){
  .row-head.pxhead .hd-chg .chgstep:hover ~ .cw-top .cw-tri,
  .bc-rail .chgstep:hover ~ .cw-top .cw-tri{color:var(--ink)} }
.row-head.pxhead .cw-dots,.bc-rail .cw-dots{display:flex;gap:3px;align-items:center;position:relative;z-index:1}
.row-head.pxhead .cw-dots i,.bc-rail .cw-dots i{width:4px;height:4px;border-radius:50%;background:var(--chipline);display:block;
  transition:width .16s ease,background-color .16s ease}
.row-head.pxhead .cw-dots i.on,.bc-rail .cw-dots i.on{background:var(--card-blue);width:10px;border-radius:3px}
@media (prefers-reduced-motion:reduce){ .row-head.pxhead .cw-dots i,.bc-rail .cw-dots i{transition:none} }


/* #401 (BossA: "Put PRICE back as the label and remove the $$$ symbols use no
   color INK"): the #389/#389b $$$ mark and its green retire.  The worded head
   keeps the row-head's own size and voice, in INK rather than the faint the
   other labels wear — his call, said twice (TOKENS carries the same ink). */
.row-head.pxhead .hd-px{color:var(--ink)}


/* #390 (BossA: "run the digits smaller in that size screen"): below 360pt —
   Display-Zoom phones report 320 — the three figure columns step down one size
   so the row fits the screen and the sideways scroll dies.  The names and the
   card grammar are untouched; 375pt and up never sees this. */
@media (hover:none) and (pointer:coarse) and (max-width:359px){
  .row-line.px .px-px{font-size:13.5px}
  .row-line.px .px-chg{font-size:13.5px}
  .row-line.px .px-burnt{font-size:13.5px}
  /* REVIEW CATCH: the first cut kept 60/52/80/56 minimums — 266px with gaps in a
     row whose content box is ~240 at 320pt, so the grid SPILLED and the price
     cells overhung their own row edge by 28px while the page-overflow number
     read 0 (the spill stayed inside the viewport).  Track minimums must fit the
     row: these sum to 233 with the 5px gaps, measured against the 13.5px ink. */
  .row-head.pxhead,.row-line.px{grid-template-columns:minmax(50px,2fr) 48px 70px minmax(50px,1fr);column-gap:5px}
}

/* #391 (BossA: "move the walk's numbers to the correct location"): the Walk
   fences' R-values join the price column's edge.  Their rows keep the #323
   two-column template (the wide title needs it); only the VALUE cell's seat
   moves — the same 4px right padding the price rows carry, replacing the
   fence-edge seat it had. */
.row-line.px.walk-line .px-px{padding-right:4px}
@media (min-width:960px){ #app .row-line.px.walk-line .px-px{padding-right:5px} }   /* the walk fence's row box sits 5px wide of the BOARD fence's on the desk — 5, not 6, lands its ink on the same edge as the board rows and the $$$ above */

/* #413l: paper keeps the full fine print — the door hides, the fold shows */
@media print{
  .lpxcard .lx-footdoor{display:none}
  .lpxcard .lx-footfold[hidden]{display:block}
}
/* #421d (BossA's second ruled-line photo: "Make the left margin align the
   logos"): the grip and the eye leave the name's flow and hang in the row's
   LEFT MARGIN, so a row's logo starts at the same x whether the row is
   fenced-core (no controls), a holding (grip), or watched (grip + eye).
   The gutter is real estate the card already owns — box padding — and the
   grip keeps its full touch target. */
.hwrow .row-line.px{position:relative}
.hwrow .row-line.px .wgrip{position:absolute;left:-30px;top:50%;transform:translateY(-50%);margin-left:0}
/* #421d-b (measured LIVE under iPhone emulation, 375/320pt): the TOUCH
   layout's gutter is 21px, not the desk's 34 — a -30px hang left 9px of the
   grip off the screen edge — and #370's touch list runs the fence at its 4px
   tier, where -5px overshoots by 4.  Both corrections key on the SAME media
   #370 keys the tier on (hover:none + coarse pointer): the first cut keyed
   on width/view and broke the desk by +4px — the discriminator is the touch
   layout itself, never a proxy for it. */
@media (hover:none) and (pointer:coarse){
  .hwrow .row-line.px .wgrip{left:-21px}
  /* #428: same padding seat as the desk rule — restated here only to outrank
     the touch tier's 4px #paneBody padding override (id-selector specificity) */
  #paneBody:not(.pxgrid) .plswrap .px-sect{padding-left:3px;padding-right:3px}
  .row-head.pxhead .hd-burnt{padding-right:19.5px}   /* #426b: the touch font's tail is 2.6px narrower — the flame's left edge holds the decimal line there too */
}
/* #423: the ratio builder's two selectors — native controls, the card's inks */
.wl-build{gap:8px;flex-wrap:wrap}
.rb-sel{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;
  padding:6px 8px;font:600 13px var(--sys);max-width:132px}
.rb-div{color:var(--muted);font-weight:700}
/* #423c/#423d: the builder's type-ahead boxes and their drop lists */
.rb-find{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;
  padding:6px 10px;font:600 13px var(--sys);width:150px}
.rb-wrap{position:relative;display:inline-block}
.rb-list{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:40;min-width:100%;max-height:230px;
  overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.45)}
.rb-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;
  color:var(--ink);font:600 13px var(--sys);padding:7px 9px;border-radius:7px;cursor:pointer;white-space:nowrap}
.rb-opt:hover,.rb-opt.rb-top{background:rgba(120,150,200,.14)}
.rb-none{color:var(--muted);font:500 12px var(--sys);padding:7px 9px}
/* #423f: the Add button's focus ring — "highlights Add" must be visible */
#rbGo:focus{outline:2px solid #378ADD;outline-offset:2px}
/* #444: the export row's format chips — each a sub-target inside the one
   shared button; the underline says pressable, the incumbent CSV needs no id */
.menu-item .fmt{text-decoration:underline;text-underline-offset:2px}
/* #447: the reader's note on a transaction — the ✎ mark on the closed row,
   the words + door in the fold */
.txn-mark{margin-left:6px;color:var(--muted);font-size:.85em}
.txn-note{margin:8px 0 2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.txn-note-txt{color:var(--ink);font-size:12.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
/* #447b (BossA's screenshot): the button wore .go2's modal dress — a light
   pill inside the dark fold, white on white.  It wears the fold's own quiet
   outline now, legible in every theme. */
.txn-note-btn{font-size:11.5px;padding:3px 10px;background:none;border:1px solid var(--line,#3a4a5c);border-radius:8px;color:var(--muted);cursor:pointer}
.txn-note-btn:hover{color:var(--ink)}
/* #448: the wallet-card deal — the chooser hides where geometry already chose */
.txcols{display:flex;justify-content:flex-end;margin:4px 0 0}
.txcol-btn{font-size:11.5px;padding:3px 10px;background:none;border:1px solid var(--line,#3a4a5c);border-radius:8px;color:var(--muted);cursor:pointer}
.txcol-btn:hover{color:var(--ink)}
@media (max-width:959px){.txcols{display:none}}
.txw-grid.cols1{grid-template-columns:1fr}
/* #447c: the note inside a scene — the reader's own words, ink, set apart
   from the scene's muted narration */
.scene-note{color:var(--ink);font-size:12.5px;line-height:1.45;margin-top:5px;white-space:pre-wrap;overflow-wrap:anywhere}
/* #447d: shared notes — the rider count whispers, the attach list reads as notes */
.txn-note-uses{color:var(--muted);font-weight:400;font-size:.9em}
.txn-attach{display:block;width:100%;text-align:left;margin-top:6px;background:none;border:1px solid var(--line,#3a4a5c);border-radius:8px;color:var(--ink);padding:7px 10px;font-size:12.5px;cursor:pointer}
.txn-attach:hover{border-color:var(--ink)}

/* ── #449: the Pools section on the Prices pane ── */
.row-head.pxhead.pools-head{display:flex;align-items:center;justify-content:space-between;gap:8px}   /* triple selector: .row-head.pxhead is a grid, and specificity — not order — decides */
.pool-chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pool-chip{font-family:var(--sys);font-size:12px;color:var(--ink);background:var(--btn);
  border:1px solid var(--btnline);border-radius:8px;padding:4px 9px;cursor:pointer;white-space:nowrap}
.pool-chip:disabled{opacity:.55;cursor:default}
.pool-stub{font-family:var(--sys);font-size:12.5px;color:var(--ink);padding:8px 10px}   /* #50's law: full ink, never muted */
.pool-venue{display:inline-block;font-family:var(--sys);font-size:10.5px;color:var(--muted);
  border:1px solid var(--btnline);border-radius:6px;padding:0 5px;margin-left:7px;vertical-align:1px;letter-spacing:.3px}
.pool-det{display:block;font-family:var(--sys);font-size:11.5px;color:var(--muted);margin-top:1px}   /* retired 2026-08-28 with .pool-venue — the pool rows render through realDetailHtml (the scoreboard door) now; rules kept for one review round */
/* BossA 2026-08-28 ("add the scoreboard to the Price page"): the pool rows'
   det renders through realDetailHtml — the same slot door the Balances ledger
   and the A card use.  .row-detail is display:none by default (the desktop
   ledger seats it in its own grid column), so the pool rows open it here at
   EVERY width, exactly as .actu-line does — same face, same size. */
.poolrow .row-detail{display:block;font-family:var(--sys);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.5;min-width:0;margin-top:1px;white-space:normal;overflow-wrap:anywhere}
.poolrow .row-detail .rd-one{display:block}
.poolrow .row-detail .rd-rest{display:none}
/* BossA 2026-08-28 ("missing the time field"): the aged slot rides the
   scoreboard line now, so the side age cell and the always-empty Burnt seat
   left the pool rows' markup — the name cell takes their two tracks, which
   is the width the line's age and %/yr slots seat in. */
.poolrow .row-line.px .row-name{grid-column:1/4}
.pool-cap{display:inline-block;font-style:italic;font-family:var(--sys);font-size:10px;color:var(--muted);margin-left:4px}
.pool-age{font-variant-numeric:tabular-nums}
.poolrow .row-name{min-width:0}
.pool-bld{border:1px solid var(--btnline);border-radius:10px;padding:9px 10px;margin:6px 8px}
.pool-bld-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pool-bld-line select{font-family:var(--sys);font-size:12.5px;color:var(--ink);background:var(--btn);
  border:1px solid var(--btnline);border-radius:8px;padding:4px 6px;max-width:150px}
.pool-bld-x{color:var(--muted)}
.pool-bld-note{font-family:var(--sys);font-size:12.5px;color:var(--ink);padding-top:7px}
.pool-bld-hit{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--sys);font-size:12.5px;color:var(--ink);padding:6px 2px 0}
.pool-bld-on{font-family:var(--sys);font-size:11.5px;color:var(--muted)}
.pool-del{margin:6px 10px 8px}
/* #449b: the Sort menu — selectable, not a rotation (BossA's ruling) */
.pool-sort-wrap{position:relative;display:inline-block}
.pool-sort-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:60;background:var(--surface);
  border:1px solid var(--btnline);border-radius:10px;padding:4px;min-width:158px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.pool-sort-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  font-family:var(--sys);font-size:12.5px;color:var(--ink);background:none;border:0;border-radius:7px;
  padding:7px 9px;cursor:pointer}
.pool-sort-opt:hover{background:var(--btn)}
.pool-sort-opt.sel{font-weight:700}
.pool-sort-opt .on{color:var(--muted)}

/* ── #449d (the audit's phone-ergonomics findings) ── */
.pool-age{color:var(--muted)}   /* was inheriting the faint ink — 3.68:1 on a key reading path; muted clears the 4.5:1 floor */
@media (hover:none) and (pointer:coarse){
  /* the Pools flow's controls sat far under the ~40px tap floor (Sort 81×25,
     selects 94×20, menu options 148×29).  Padding grows the TARGET; the type
     size stays the design's own. */
  .pool-chip{min-height:40px;padding-top:9px;padding-bottom:9px}
  .pool-bld-line select{min-height:40px}
  .pool-sort-opt{min-height:40px}
  /* the value card's two smallest controls (Work 24.5×11, the lens dots 5px
     wide): an invisible hit halo — padding out, margin back in, so the visual
     seat does not move by a pixel */
  .workaff{padding:10px 12px;margin:-10px -12px}
  .lensdots{padding:10px 12px;margin:-10px -8px}
}


/* ── #449f: the second audit's design/UI fixes ── */
/* the tx-row fold chevron was a 3px faint speck over the month tint while the
   IDENTICAL affordance on Stakes folds wears card-blue 12px — one component,
   one ink (the Stakes treatment) */
.chev{font-size:12px;color:var(--card-blue)}
/* statuses and wall references drop as ONE unit, never 'not / counted' or
   'Min Buy / 98%' fragments */
.row-excl{white-space:nowrap}
.det-ceil{white-space:nowrap}
/* the landing staircase's fourth step wrapped at 375px, breaking the diagonal */
@media (max-width:430px){
  #start .st-claims{margin-left:24px}
  #start .st-claims span{white-space:nowrap}
}
/* #449f: the A6 re-fix, measured dead in WebKit last round —
   selects ignore min-height (height works); the .blurow .lensdots{padding:0}
   at 0-2-0 beat the 0-1-0 halo (equal specificity now, later source wins) */
@media (hover:none) and (pointer:coarse){
  .pool-bld-line select{height:40px}
  .blurow .lensdots{padding:10px 12px;margin:-10px -8px}
  .workaff{padding:14px 12px;margin:-14px -12px}
}
/* #454: the venue's real mark at the head of an LP row's fact line — the PLSX
   logo on PulseX pools, the PlusX mark on LPX pools in INK (his ruling: no
   color for PlusX — grayscale on their own SVG, never a redrawn mark) */
.vmark{width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin-right:7px;object-fit:contain}
.vmark-ink{filter:grayscale(1) brightness(1.55);opacity:.85;border-radius:0}
/* #456: a pool row's pair faces — both legs' marks, overlapped in name order */
.pairmarks{display:inline-flex;align-items:center;margin-right:7px;vertical-align:-3px}
.pairmarks .tkmark{margin:0}
.pairmarks .tkmark+.tkmark{margin-left:-6px}

/* ── BossA 2026-08-29 pixel review ── */
#cardAddrs[hidden]{display:none}   /* ("make the proportions better"): the hidden address list still occupied its 84px lane on every OTHER face — the blue Card's dead middle, gone */
.rank-delta .rank-zero{color:var(--muted);opacity:.75}   /* a zero change in quiet ink — color means movement */
.tk-htt{position:relative;display:inline-block;line-height:0}
.tk-htt b{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:800 7.5px var(--sys);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85);pointer-events:none}   /* the series digits on the family mark */
#paneBody .wgrip{display:inline-block;margin-top:-4px;margin-bottom:-4px;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.02em;opacity:.65;min-width:17px;text-align:center}   /* the numbered grip — two digits in the handle's quiet voice.  BossA 2026-08-30: inline-block, or min-width and text-align are inert on the plain span and 1- vs 3-digit numbers shove the title sideways; the negative vertical margins hand back the 4px padding the box now counts, so the grab target keeps its height and the row's line does not grow */
#viewGroup{padding-left:12px;padding-right:12px}   /* ("The Sort button looks a little tight") — the chip breathes */

/* ═══ BossA 08-29: the Expiring Stakes / HTTs Reaching Maturity card ═══
   it borrows the Value card's seat; full ink, system sans, the date on every
   line; Mute and the Warns step are its only controls */
.alm-list{display:flex;flex-direction:column;gap:8px;margin:8px 0 2px;font-family:var(--sys);font-size:13px;color:var(--ink);text-align:left}
.alm-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.alm-what{font-weight:700;white-space:nowrap}
.alm-when{color:var(--ink)}
.alm-when.alm-late{color:var(--err);font-weight:700}
.alm-sub{margin-top:11px;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.alm-mute{margin-left:auto;flex:none;font-family:var(--sys);font-size:11px;color:var(--muted);background:var(--btn);border:1px solid var(--btnline);border-radius:7px;padding:2px 8px;cursor:pointer}
.alm-foot{display:flex;align-items:center;gap:10px;margin-top:12px}
.alm-step{font-family:var(--sys);font-size:11.5px;color:var(--muted);background:var(--btn);border:1px solid var(--btnline);border-radius:7px;padding:3px 9px;cursor:pointer}