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

*{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}
.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-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:46px;line-height:1.08;margin-top:6px;text-align:center}
.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 ---------- */
.rankwrap{position:relative;z-index:1;border-radius:24px;padding:14px;background:var(--hero-fade);margin-bottom:14px}   /* scrolls away under the Card (#49) */
.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}
.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}
.rank.frozen{animation:freezeFlash 2.4s ease-in-out infinite}   /* light flash while frozen (#34) */
@keyframes freezeFlash{0%,100%{box-shadow:0 0 0 0 rgba(255,219,1,0)}50%{box-shadow:0 0 0 4px rgba(255,219,1,.30)}}

/* ---------- 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)}
.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:28px;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)}

/* ---------- 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}
.dpad{display:grid;grid-template-columns:repeat(3,22px);grid-auto-rows:22px;gap:3px}
.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}

/* #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}
.box-title.toggles{cursor:pointer}
.box-title.toggles:hover .note-toggle{color:var(--ink)}
@media (hover:hover){
  #card{padding-left:46px;padding-right:46px}
  #yield{padding-left:84px;padding-right:84px}   /* symmetric — centered stays box-centered (#39) */
  #pane{padding-right:68px}
  .pane-stick .cluster{right:-58px}   /* the rail spans the content box; step back out into the
                                         68px arrow margin — net 10px in from the pane edge (#55) */
}

/* 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}
.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 .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}
.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)}
.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}

@media (prefers-reduced-motion:reduce){
  .rank.frozen{animation:none;box-shadow:0 0 0 3px rgba(255,219,1,.25)}
}