/* BluBox v0 — styles.
   Measurements come from the signed-off mockup v1
   (actuator-website/knowledge-base/blubox-front-page-mockup.html, 2026-07-13).
   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; --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{
  --page:#eef2f7; --surface:#ffffff; --line:#d5dee9; --ink:#17222f;
  --muted:#5a6f86; --faint:#8195a9; --btn:#ffffff; --btnline:#c9d4e2;
  --chipbg:#eaf0f7; --chipline:#c9d6e6; --workbg:#f2f6fb; --rowline:#e3eaf2;
  --dot:#b9c6d6; --doton:#31435a; --err:#c02929; --shadow:rgba(23,34,47,.18);
  --title:#9a6b1f;   /* #101 light: readable bronze-amber */
  --daywait:#9a7b00; --dayok:#2E7FB8;   /* #68 light: readable gold-wait; steel Blu */
}

*{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}

/* ---------- corner buttons: page-header furniture, not card elements (#31) ---------- */
.apphead{position:relative;display:flex;justify-content:space-between;align-items:center;padding:6px 2px 14px}
.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)}
.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:sticky;top:8px;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}   /* persistent on scroll (#49) */
.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}
.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:4px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  border-radius:14px;padding:4px}
.card .lensrail .cbtn{width:22px;height:22px;background:none;border:0;color:#fff}
  /* #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:3px;background:none;border:0;padding:1px 5px;cursor:pointer}
.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}
.box .workaff{color:var(--faint);opacity:1}
.workaff-row{text-align:center}

/* ---------- 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:14px;background:var(--hero-fade);margin-bottom:14px}   /* scrolls away under the Card (#49) */
.rankdots{position:absolute;right:0;top:0;bottom:0;display:flex;flex-direction:column;gap:4px;
  align-items:center;justify-content:center;appearance:none;-webkit-appearance:none;
  background:none;border:0;margin:0;padding:0 4px;cursor:pointer}
.rankdots b{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.35)}
.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}   /* first-level tracking (#51) */
/* 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)}
.head-right{display:flex;align-items:center;gap:8px}
.chip{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) */
.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}
.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:14.5px;color:var(--ink);min-width:0}
.row-amt{font-size:12px;color:var(--muted);margin-left:7px;font-family:var(--sys);font-variant-numeric:tabular-nums}
.row-right{flex:none;display:flex;align-items:baseline}
.row-usd{font-family:var(--rounded);font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.chev{font-size:11px;color:var(--faint);margin-left:9px}
.tx-date{font-family:var(--mono);font-size:11px;color:var(--faint);margin-right:8px}
.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) */
.work{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted);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}
.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:block;border-radius:9px;padding:8px 2px;text-align:center;font-size:9px;letter-spacing:.03em;
  font-weight:700;color:rgba(255,255,255,.9);transition:all .2s;line-height:1.2;font-family:var(--rounded)}
.valtoggle .seg.on{background:#fff;color:var(--card-blue);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.valtoggle .seg + .seg{margin-top:3px}
.yield-line.sky,.chart-total.sky{color:var(--card-blue)}
#yield{padding-left:72px;padding-right:72px}   /* #86: symmetric room for the toggle (#39 law) */

/* ---------- arrow clusters (#36): desktop only; idle 50% -> hover 100%,
     transition lifted from the Hexbonds 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:2px;padding:0 4px;height:26px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:13px}
.pricerail .cbtn{background:none;border:0;width:22px;height:22px;color:var(--ink)}
/* #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}
#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 */
.note-toggle{background:none;border:none;color:var(--ink);opacity:.75;font:inherit;font-size:15px;cursor:pointer;padding:0 4px;margin-left:6px}
/* #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) */
.box-title.toggles{cursor:pointer}
.box-title.toggles:hover .note-toggle{color:var(--ink)}
@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 */
.entry h2{font-family:var(--rounded);font-weight:normal;font-size:18px;margin-bottom:8px}
.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 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}
.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:6px}
.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 8px;cursor:pointer}
.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)}

.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}

/* 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 (John): the privacy curtain — Close BluBox folds the BluBox and the
   Hex Fade away (more room for the lists; the Rank hides from anyone near
   the phone). The two-row button FLOWS in the pane title's chip row — the
   absolute rail overlapped the title at phone width. Blu while drawn. */
.bbclose{display:inline-flex;vertical-align:middle;margin-left:8px;
  border-color:rgba(55,138,221,.55);color:#8fc1ee}   /* Blu at rest — the one colored control in the header, so it reads as the action it is (John couldn't FIND the gray version) */
.bbclose.closed{background:var(--card-blue);border-color:var(--card-blue);color:#fff}
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)}