/* 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;
  --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,.30);
  --title:#d9a441;   /* #101: box titles wear bronze-amber — warm, and far enough from status-gold #ffdb01 */
  --daywait:#ffdb01; --dayok:#378ADD;   /* #68: Day gold until chain-confirmed, then Blu */
}
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,.18);
  --title:#6f4d16;   /* #101 light: DEEPER bronze (John: darker for light mode only) */
  --daywait:#9a7b00; --dayok:#2E7FB8;   /* #68 light: readable gold-wait; steel Blu */
}
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 (John): 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 */
}
html.dark-blue{   /* #158d (John): 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 9px;border-radius:7px;font-size:12.5px;font-weight:600;
  margin:0 2px;cursor:pointer;border:1.5px solid transparent;vertical-align:middle}
.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-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 (John, 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 (John, 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 (John, 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:12px;color:var(--muted);font-variant-numeric:tabular-nums;
    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}
  #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) 110px 130px;grid-template-rows:auto;align-items:baseline}
  /* #188c (John): "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(--rounded);font-size:15.5px;color:var(--ink)}
  #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 (John): 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 (John): 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 (John): …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 (John): "that line might have to be wider" — Watched Addresses gets the desk's room so Preset · Hide · Delete fit beside the address */
}

/* ---------- corner buttons: page-header furniture, not card elements (#31) ---------- */
.apphead{position:sticky;top:0;z-index:25;background:var(--page);display:flex;justify-content:space-between;align-items:center;padding:6px 2px 14px}   /* #138 (John): with the BluBox unsticky (#137), the menu row keeps the post */
.cornerbtn{width:40px;height:40px;border-radius:13px;background:var(--btn);border:1px solid var(--btnline);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.cornerbtn svg{display:block}
.dropdown{position:absolute;top:50px;z-index:30;min-width:252px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 14px 34px 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}
.menu-item{font-family:var(--rounded);font-size:13.5px;color:var(--ink);padding:10px 11px;border-radius:9px;
  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}
.menu-item:hover{background:var(--chipbg)}
.menu-item.current{outline:1.5px solid var(--card-blue);outline-offset:-1.5px}
.menu-item .def{color:var(--muted);font-size:11.5px;font-family:var(--sys)}
.menu-item.danger{color:var(--err)}
/* John 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(--rowline);border-radius:10px;text-align:left;background:none}
.menu-item.half:hover{background:var(--chipbg)}
.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:20px 22px 12px;color:#fff;font-family:var(--rounded);
  box-shadow:0 10px 26px var(--shadow);margin-bottom:14px;outline:none;touch-action:none}   /* #137 (John, 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 10px 26px var(--shadow)}
.card-title{font-size:15px;opacity:.95;letter-spacing:.01em;text-align:center}
/* #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}   /* #182-3: rows clear the pill; John 07-25: on the wide desktop card the list stays a centered column so names and numbers sit TOGETHER, never across the page */
#cardAddrs .ca-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:17px;color:#fff}   /* John 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 (John): "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 (John): "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 John'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 —
   John, 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 (John): 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 (John, 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:50%;transform:translateY(-50%);display:flex;flex-direction:column;
  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 (John): the pill runs SHORTER — still a fatter press than the original 22px */
  /* #94 (John): match the legend card — the pill is the card, the arrows are bare glyphs like the dots */
.lensdots{display:flex;flex-direction:column;gap:2px;background:none;border:0;padding:0 4px;cursor:pointer}   /* #133: tighter legend */
.lensdots b{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.30)}
.lensdots b.on{background:#fff}
/* #110 (John, 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,.pricerail .cbtn{display:none}}
.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}   /* #155: underlined text-link — no leading triangle (it never indicated state) */
.box .workaff{color:var(--faint);opacity:1}
.workaff-row{text-align:center}
/* #183: the Fade Card's Show Work — gold-muted link riding the sub-line row (John: "same line as the other Text — keep the box tighter"); the fold's text must read on black in EVERY theme (the card never changes color) */
.rank-cols .rank-foot{align-self:flex-end;flex:0 0 auto;padding-bottom:1px}
.rank .workaff{color:rgba(255,219,1,.72);opacity:1;white-space:nowrap}
@media (max-width:700px){   /* one line cannot hold three texts on a phone — the link wraps to its own centered row */
  .rank-cols{flex-wrap:wrap}
  .rank-cols .rank-foot{order:9;width:100%;text-align:center;padding:5px 0 0}
}
#rankWork{background:rgba(255,255,255,.05)}
#rankWork, #rankWork li{color:#d9cfa3}

/* ---------- Rank box (#21): black + gold by ruling, in BOTH themes ---------- */
/* #127 (John, 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:18px;background:var(--hero-fade);margin-bottom:14px}   /* #159 (John): the Hex Fade border runs thicker — 14→18px */   /* scrolls away under the Card (#49) */
.rankdots{position:absolute;right:0;top:0;bottom:0;display:flex;flex-direction:column;gap:5px;
  align-items:center;justify-content:center;appearance:none;-webkit-appearance:none;
  background:none;border:0;margin:0;padding:0 6px;cursor:pointer}
.rankdots b{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.35)}   /* #159 (John): larger dots to match the thicker band */
.rankdots b.on{background:#000}
.rank{background:#000;border-radius:10px;display:flex;align-items:center;gap:15px;padding:14px 16px;cursor:pointer;outline:none}
.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(--times);font-weight:bold;color:var(--gold);font-size:14.5px;letter-spacing:.05em;text-align:center}   /* first-level tracking (#51); John 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) */
.rank-value{display:block;font-family:var(--times);font-weight:bold;color:var(--gold);font-size:36px;line-height:1.12;text-align:right;width:100%}
.rank-delta{display:block;font-family:var(--times);font-weight:900;-webkit-text-stroke-width:.6px;color:var(--gold);font-size:36px;line-height:1.12;text-align:right;width:100%}   /* emphatically bold */
.rank-sub{font-family:var(--times);font-weight:bold;color:var(--gold);opacity:.82;font-size:12px;margin-top:8px;text-align:right;white-space:nowrap;letter-spacing:.05em}   /* 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:10px;padding:5px 8px;cursor:pointer}
.timerlock .tl2{display:flex;align-items:center;gap:4px}
.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:104px}   /* #100/#104: LEFT of the long arrows, same top line */
@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(--rounded);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}
.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) */
.charttoggle{width:56px;height:28px;border-radius:9px;background:var(--chipbg);border:1px solid var(--chipline);
  color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.charttoggle.active{background:rgba(55,138,221,.20);border-color:#37588a;color:#cfe4fa}

#yield{touch-action:none;position:sticky;z-index:19}   /* docks below the Card; top set by layoutSticky() (#49) */
/* #158e (John): 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 (John, 2026-07-26) RE-RULES ITS SIZE: at 13px the band filled almost the
   whole 14px gap, and John, 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(--rounded);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(--rounded);font-size:16px;color:var(--ink);margin-top:6px;text-align:center}

/* ---------- pane rows ---------- */
#pane{touch-action:pan-y}
.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(--rounded);font-size:15.5px;color:var(--ink);min-width:0}   /* #155: +1px */
.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(--rounded);font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}   /* #155: +1px */
.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 (John): 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 */
.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:96px 48px 1fr;column-gap:12px;padding:10px 6px 10px 14px}
.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:96px 48px 1fr;column-gap:12px;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 (John): bold column labels + the sort caret (inherits) */
.row-head span{text-align:right}
.row-head span:first-child{text-align:left}
/* #159 (John): 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)}
/* #192 (John): 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(96px,1fr) 78px 92px;column-gap:12px}
.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}
.row-line.px .px-px{font-family:var(--rounded);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:13px;font-weight:700}
/* .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 (John): 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:96px 48px 1fr;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 (John): the DETAILS column header hides on the phone (the ledger stays 3-col there) */
.hd-details{display:none}
/* #151 LAW (John, 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}
.row-detail{display:none}   /* #159: the inline second-tap line — desktop only (see the 960px block) */
.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 (John): 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 (John): 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 (John, 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 (John) */   /* #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:7px;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 (John, 07-19) — pane arrows keep it.
   #90: cardUp/cardDown moved inside the lens rail; #96 (John): 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 */
#paneLeft,#paneRight{width:44px;height:22px}
/* the Yield window pair rides the bottom-right corner, balances-card style (John, 07-19);
   the window dot legend mirrors it in the bottom-LEFT corner, and the box reserves the
   corner strip so flowing content never collides */
/* #95: the price rail — arrows and legend combined in one pill, bottom-right */
.pricerail{position:absolute;right:10px;bottom:8px;display:flex;align-items:center;gap:1px;padding:0 2px;height:22px;   /* #132: the pill shrinks */
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:13px}
.pricerail .cbtn{background:none;border:0;width:15px;height:18px;color:var(--ink);position:relative}   /* #157 (John): the pill runs SHORTER — the arrow's long hotspot no longer widens it */
.pricerail .cbtn::after{content:"";position:absolute;top:-6px;bottom:-6px;width:30px;z-index:3}   /* #157: the fat tap target lives HERE, reaching inward over the dots — the pill stays short, the press stays long */
.pricerail #dpLeft::after{left:0}     /* left arrow's hotspot reaches RIGHT into the dots */
.pricerail #dpRight::after{right:0}   /* right arrow's hotspot reaches LEFT into the dots */
/* #85/#90: the window dot legend — ONE pill, now bottom-RIGHT, the arrows riding just above it */
#yieldDots{display:flex;align-items:center;height:22px;padding:0 3px;gap:3px;background:none;border:0;cursor:pointer;position:relative;z-index:1}   /* #157: sits below the arrow hotspots so the outer edges step the window, the centre returns Home */
#yieldDots .dot{width:6px;height:6px}   /* #102: tight like the BluBox's lens dots */
html.light .pricerail{background:rgba(23,34,47,.06);border-color:rgba(23,34,47,.16)}
#yield{padding-bottom:14px;min-height:150px}   /* #100/#104: rail beside Show Work; floor keeps the long flip pair 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) */

/* #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 (John): 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{padding-right:192px;align-self:flex-start;line-height:1.05;margin-top:2px}   /* #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:20px;z-index:50}
.overlay.hidden{display:none}
.entry{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;
  max-height:calc(100vh - 40px);overflow-y:auto}   /* #76: many addresses scroll inside the modal instead of clipping off-screen */
.entry .sampletop{text-align:center;font-family:var(--rounded);font-size:13px;color:var(--gold);
  letter-spacing:.03em;margin-bottom:10px}   /* ruling #66 — first thing a first-arrival reads */
/* #184b (John: "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(--rounded);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(--rounded);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:10px;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:11px;
  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(--rounded);
  font-size:15px;padding:12px;border-radius:12px;cursor:pointer}
/* #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(--rounded);font-size:14px;padding:10px;border-radius:12px;cursor:pointer}
.entry .go2:hover{border-color:var(--card-blue);color:#fff}
/* #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:10px;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:10px;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}
.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}   /* John 07-25 (#184): tighter gap — Preset · Hide · Delete share one line */
.addr-line > .addr-actions:only-child{margin-left:auto}   /* John 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:7px;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}
.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}
/* John 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}
/* John 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:7px;
    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 (John): 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:14px;
  padding:12px 14px;box-shadow:0 14px 34px 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(--rounded);font-size:12.5px;padding:7px 12px;border-radius:9px;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 */
.hexday{position:absolute;left:50%;top:26px;transform:translate(-50%,-50%);
  font-family:var(--rounded);font-size:13px;color:var(--ink);opacity:.95;
  border:1px solid var(--line);background:var(--surface);border-radius:9px;
  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)}

/* 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(--rounded);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 */

/* #73: settings fence for the operator wing */
.menu-sect{border:1px solid var(--line);border-radius:10px;margin:6px 4px;padding:2px 2px 4px}
.menu-sect-cap{font-family:var(--rounded);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:26px;transform:translateY(-50%);
  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 */
/* #79: the chain row wears PulseChain's own fade — same stops as the #pls-grad logo gradient */
.plsfade{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) */
.wxscreen{position:fixed;left:0;right:0;bottom:0;top:56px;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(--rounded);font-size:17px;font-weight:700;color:var(--ink)}
.wxsub{font-size:12px;color:var(--muted);flex:1}
.wxsect{font-family:var(--rounded);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(--rounded);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 (John): the phone has no chart button — rotating the phone IS the
   chart toggle there. Desktop (hover + fine pointer) keeps the button. */
@media (hover: none) and (pointer: coarse){
  .charttoggle{display:none}
}
/* #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}
.lc-head{display:flex;align-items:center;gap:10px}
.lc-title{font-family:var(--rounded);font-size:16px;color:var(--title)}
.lc-line{font-family:var(--rounded);font-size:17px;color:var(--ink);text-align:center}
.lc-line.sky{color:var(--card-blue)}

/* #124 (John): 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:9px}
.pxseg button{border:0;background:transparent;color:var(--muted);font-size:10px;font-weight:700;
  font-family:var(--rounded);letter-spacing:.02em;padding:3px 8px;border-radius:7px;cursor:pointer;white-space:nowrap}
.pxseg button.on{background:rgba(55,138,221,.22);color:#cfe4fa}

/* #128/#130 (John): 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 (John): flex-centered so the label doesn't drift in the pill at Cmd+/- zoom */
.bbclose .seg + .seg{margin-top:3px}
/* #131 (John): 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 (John): 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 (John, 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){
  #cardAddrs{max-width:660px}
  #cardAddrs .ca-row{gap:18px}
  #cardAddrs .ca-name{display:flex;align-items:baseline;gap:12px;flex:1;overflow:visible}
  #cardAddrs .ca-nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  #cardAddrs .ca-nick.ca-fb{display:none}   /* unnicked: the abbreviation is the TOUCH name only — the whole address speaks here */
  #cardAddrs .ca-addr{margin:0 0 0 auto;white-space:nowrap;flex:0 0 auto}
  #cardAddrs .ca-usd{min-width:116px;text-align:right}
}
body.bb-closed .card, body.bb-closed .rankwrap{display:none}
.modal-code{display:block;width:100%;margin:10px 0;background:var(--btn);border:1px solid var(--btnline);
  border-radius:9px;color:var(--ink);font-size:15px;padding:10px 11px;font-family:var(--mono)}

/* #141 (John): 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 */
.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:46px 20px 20px}
.entry ul.sub{margin-left:16px}   /* the "which method locks it" sub-bullets */
#setVault{color:var(--gold)}   /* John's ruling: the Vault label wears amber — the row must catch the eye */
.chain-ico{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px}   /* chain-row logos (2026-07-22): real marks at row size */
.chain-ico-eth{width:9px}   /* the diamond is tall — narrow box keeps it visually level with the pulse hex */
.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 */
.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 (John): 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}   /* John: the main action wears amber, 1px up from the ink pass */

/* Dormant open (John'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 */
/* John'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 .rankdots,body.bb-dormant .rank-chartwrap,
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 .cbtn{visibility:hidden}
.work ul{margin:0;padding-left:16px;list-style:disc}   /* #151 (John): Show Work reads as bullets */
.work li{margin:3px 0}
/* #186 (John): 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 (John): 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. ---------- */
.lpxcard{display:none}
@media (min-width:960px){
  #app .work.haslpx > ul{display:none}          /* on the desk the card IS the fold */
  #app .work.haslpx .lpxcard{display:block}
  .lpxcard{font-family:var(--sys);font-size:12.5px;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 (John): `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. */
  .lpxcard .lx-body{display:grid;grid-template-columns:max-content max-content max-content;
    column-gap:22px;width:max-content;max-width:100%}
  .lpxcard .lx-sec,.lpxcard .lx-row{display:contents}
  /* 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 */
  .lpxcard .lx-head{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;
    padding-bottom:6px;margin-bottom:2px;border-bottom:1px solid var(--line)}
  .lpxcard .lx-pool{font-family:var(--rounded);font-size:15px}
  .lpxcard .lx-pair{font-family:var(--rounded);font-size:15px;color:var(--muted)}
  .lpxcard .lx-share{margin-left:auto;font-variant-numeric:tabular-nums}
  .lpxcard .lx-h{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;font-weight:700;margin:8px 0 3px}
  .lpxcard .lx-sub{font-weight:400;color:var(--muted);font-size:11.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 */
  /* #191: ONE zone — the position as it stands.  The right-hand history zone was
     parked (it read the chain wrong: withdrawals arrived, deposits did not), so
     this is a flex row with a single child.  It stays because the left block is
     width:max-content and must not stretch — and because it is the seam the
     history zone slots back into if that project is ever picked up. */
  .lpxcard .lx-cols{display:flex;align-items:flex-start;gap:18px}
  /* #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 would drag the figures
     off the card's own right edge. */
  .lpxcard .lx-held .lx-k{grid-column:1/3}
  .lpxcard .lx-held .lx-q{display:none}
  .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 (John): each HSI's field lines indent one level under their 'HSI #x' head */
.wl-sub{margin-left:22px}
/* #188h (John): "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 (John): 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 (John): 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. */
.tx-legend{display:grid;grid-template-columns:repeat(15,1fr);gap:4px;padding:2px 5px 9px;margin:0 auto 4px;max-width:377px;border-bottom:1.5px solid var(--line)}   /* #169g (John): 13 month cards — 7 over 6 — over a 14-col track; capped + centered so cards stay tight instead of stretching the full desktop width */
/* #169h (John): the legend RIDES the pane-stick header — the same sticky, z-18 layer as the Timer Lock — so it sits in-line with the lock AND paints in FRONT of the opaque box-head (z-17), instead of hiding behind it. Centered, clear of the title (left) and lock (right). width must be EXPLICIT: an absolute grid shrink-fits to content and would collapse the ruled 49px cards to ~25px. */
.pane-stick .tx-legend{position:absolute;top:0;left:50%;transform:translateX(-50%);margin:0;border-bottom:none;width:377px}
/* #169n (John): two legend homes, one shown per width. Desktop (≥960): the header copy — the band has free middle space. Phone/tablet: the body copy — the band is full (title left, lock right), so the cards flow above the column heading instead. */
@media (max-width:959px){ .pane-stick .tx-legend{display:none} }
@media (min-width:960px){ .tx-legend--body{display:none} }
.txleg{grid-column:span 2;border-radius:5px;padding:3px 1px;text-align:center;font-size:9px;font-weight:600;cursor:pointer;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:hsla(210,72%,52%,calc(0.30 - var(--n) * 0.020));border:1px solid hsla(210,55%,50%,.22)}   /* single-hue tint, current month → 12-back fades (theme-safe: tint over surface, ink text) */
.txleg:nth-child(-n+7){grid-row:1}
.txleg:nth-child(n+8){grid-row:2}
.txleg:nth-child(8){grid-column:2 / span 2}
/* #180 (John): 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}   /* the brick offset — bottom 6 shift half a card; must restate span 2 (bare grid-column-start would drop the span and half-width Dec) */
.txleg.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);font-weight:700}   /* #169j (John): the month being filtered — an ink ring on the lit card */
/* #169k (John): 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)}
.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 (John, 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 (John 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 (John): 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; }
  #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, .pricerail, .lensdots, .rankdots, .dots,
  .bbclose, .valtoggle, .charttoggle, #chartToggle, .workaff, .workaff-row,
  .pane-print, .pane-stick, .timerlock, .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; }
  /* 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 (John): 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, John) — 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 (John): 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) */
  #cardWork, #rankWork { 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; }
  #rankWork, #rankWork li { 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, John) */
  body.print-tx #card, body.print-tx .rankwrap, body.print-tx #yield { display: none !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: 18px 24px 6px; }
#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(--rounded); font-size: 44px; line-height: 1.12; color: #e6edf5; margin: 0 0 16px; }
#start h2 { font-family: var(--rounded); font-size: 24px; color: #e6edf5; text-align: center; margin: 0 0 22px; }
#start h3 { font-family: var(--rounded); 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;
}
.st-open:hover { background: #2E7FB8; }
.st-open.st-mini { font-size: 13.5px; padding: 8px 16px; border-radius: 10px; }
.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 (John): 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(--rounded); font-size: 18.5px; color: #e6edf5; }   /* John 07-25: stacked; the 63px centers "Free" under the Open BluBox button (measured) */
#start .st-claims .st-in1 { margin-left: 3ch; }    /* John 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; }
.st-frames { flex: 1 1 54%; min-width: 0; margin: 0; position: relative; text-align: center; }
.st-shot { border-radius: 14px; 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; }
.st-steps { max-width: 1140px; margin: 0 auto; padding: 34px 24px 10px; border-top: 1px solid #243044; }
.st-step-row { display: flex; gap: 28px; align-items: flex-start; }
.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(--rounded);
  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 { background: #fff; border-radius: 10px; padding: 8px; width: 148px; margin: 14px auto 8px; }
.st-qr svg { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.st-qr-cap { font-size: 12px; color: #8ba2bd; text-align: center; }
.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; }
.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-shot-d { width: 92%; max-width: 430px; }
  .st-shot-p { width: 30%; max-width: 132px; right: -2%; }
}