/* The Vote tab (owner, 7 Oct 2026: "Pick A the one the reviewers picked", design A "Two steps"; the approved mockup is
   vote-diet/concept-a.html). Labels of 1 to 4 words on one line, big numbers, one obvious press; the rules in ⓘ tips and
   the Docs. Sizes: from 1100px the whole site is drawn at html{zoom:.66825}, so a 17px label shows at about 11px there;
   below 1100px nothing is zoomed and the phone sizes at the end apply. Metal follows fable.css (cream ink on metal, the wide
   sheen for the one big press, the small sheen for every other filled control). The mesh picture is unchanged.

   1. the top: the round ring with "Closes in" and the pot, then Tonight's split (the ranked pools, Last round)
   2. the console under the mesh: step 1 deposit FABLE, step 2 pick pools (tiles, picker, the bar)
   3. ⓘ tips, chips, buttons
   4. narrower windows and phones */

/* ---- 1. the top */
.vote-top { display:flex; flex-direction:column; gap:12px; }
.rclock { padding:16px 22px; border:1px solid var(--line); border-radius:18px; background:var(--panel-2); }
.rc-row { display:flex; align-items:center; gap:16px; }
.rc-clock { display:flex; align-items:center; gap:16px; min-width:0; }
.rc-clock[hidden] { display:none; }
.rc-ring { flex:none; width:58px; height:58px; }
.rc-ring svg { display:block; width:100%; height:100%; }
.rc-ring-bg { fill:none; stroke:var(--line); stroke-width:5; }
.rc-ring-fill { fill:none; stroke:rgb(74,222,128); stroke-width:5; stroke-linecap:round; transition:stroke-dasharray .6s linear; }
.rclock .k { display:block; margin-bottom:9px; font:600 17px/1 var(--sans); color:var(--muted); white-space:nowrap; }
.rc-t .v { display:block; font:800 44px/1 var(--mono); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rc-t .v i { font-style:normal; }
.rc-t .rt-short { display:none; }
.rc-pot { margin-left:auto; padding:0; border:0; background:none; text-align:right; cursor:pointer; color:inherit; font:inherit; }
.rc-pot .v { display:block; font:900 46px/1 var(--sans); font-stretch:110%; letter-spacing:-.02em; white-space:nowrap; color:var(--brand); background:var(--brand-sheen-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rc-pot .v.wait { font-size:24px; color:var(--muted); background:none; -webkit-text-fill-color:currentColor; }
.rc-pot:hover .k, .rc-pot[aria-expanded="true"] .k { color:var(--ink-2); }
.rc-pot:focus-visible { outline:2px solid var(--brand); outline-offset:4px; border-radius:6px; }

/* what the pot holds, opened by its number */
.pot-halves { display:flex; flex-direction:column; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.pot-halves[hidden] { display:none; }
.pot-halves .ph-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg); }
.pot-halves .ph-row img { width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--logo-tile,#1b1815); box-shadow:0 0 0 1px var(--line-2); }
.pot-halves .ph-amt { font:800 20px/1.1 var(--sans); font-stretch:106%; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pot-halves .ph-amt i { font:700 16px/1 var(--sans); font-style:normal; color:var(--ink-2); margin-left:2px; }
.pot-halves .ph-usd { font:800 19px/1 var(--sans); color:var(--ink); font-variant-numeric:tabular-nums; }
.pot-halves .ph-transit { grid-template-columns:32px minmax(0,1fr) auto auto; opacity:.85; }
.pot-halves .ph-note { font:700 14px/1 var(--sans); color:var(--muted); }
.pot-halves .ph-kpis { display:flex; gap:28px; padding:6px 2px 0; }
.pot-halves .ph-kpi { display:flex; align-items:baseline; gap:8px; }
.pot-halves .ph-kpi .k { margin:0; font:600 16px/1 var(--sans); color:var(--muted); }
.pot-halves .ph-kpi .v { font:800 20px/1 var(--sans); color:var(--ink); }

/* Tonight's split */
.vsplit { padding:20px 22px 18px; border:1px solid var(--line-2); border-radius:18px; background:var(--panel-2); }
.vs-top { position:relative; display:flex; align-items:center; gap:14px; min-height:44px; }
.vs-head { display:flex; align-items:center; gap:14px; min-width:0; }
.vs-head-title { margin:0; font:800 23px/1 var(--sans); font-stretch:106%; color:var(--ink); white-space:nowrap; }
.vs-stale { font:700 15px/1 var(--sans); color:var(--amber); white-space:nowrap; }
.vs-stale::before { content:''; display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:currentColor; vertical-align:1px; }
.vs-last-wrap { margin-left:auto; flex:none; }
.vs-lastbtn { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border:1px solid var(--line-2); border-radius:10px; font:700 16px/1 var(--sans); color:var(--ink-2); white-space:nowrap; cursor:pointer; list-style:none; }
.vs-lastbtn::-webkit-details-marker { display:none; }
.vs-lastbtn:hover { color:var(--ink); border-color:var(--ink-2); }
.vs-last-empty { padding:0; border:0; cursor:default; color:var(--muted); font-weight:600; }
.vs-last-empty:hover { color:var(--muted); }
.vs-chev { display:inline-block; color:var(--brand-text-solid); transition:transform .15s; }
.vs-last[open] .vs-chev { transform:rotate(90deg); }
.vs-last summary:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.vs-last-body { position:absolute; z-index:6; right:0; top:calc(100% + 10px); width:380px; max-width:100%; display:flex; flex-direction:column; gap:10px; padding:16px 18px; border-radius:14px; border:1px solid transparent;
  background:linear-gradient(#1f1712,#1f1712) padding-box,var(--brand-outline) border-box; box-shadow:0 22px 50px -10px rgba(0,0,0,.85); }
.vs-last-head { font:800 19px/1.2 var(--sans); color:var(--ink); }
.vs-last-sub { margin-top:4px; font:800 16px/1 var(--sans); color:var(--ink-2); }
.vs-last-rows { display:flex; flex-direction:column; gap:8px; }
.vs-last-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font:600 16px/1.2 var(--sans); color:var(--ink-2); }
.vs-last-pool { display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--ink); white-space:nowrap; }
.vs-last-pool a { color:inherit; text-decoration:none; }
.vs-last-pool a:hover { text-decoration:underline; text-underline-offset:3px; }
.vs-last-amt { text-align:right; font-variant-numeric:tabular-nums; }
.vs-last-votes { font:600 15px/1 var(--sans); color:var(--muted); }
.vs-list { margin-top:14px; }
.vs-status { margin:0 0 10px; font:700 18px/1.2 var(--sans); color:var(--ink-2); }
.vs-rank { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.vs-row { display:grid; grid-template-columns:32px minmax(120px,240px) minmax(0,1fr) 72px; align-items:center; column-gap:14px; height:52px; }
.vs-row .pair-ic { width:32px; height:32px; margin:0; border-radius:50%; object-fit:cover; background:var(--logo-tile,#1b1815); box-shadow:0 0 0 1px var(--line-2); }
.vs-name { display:flex; align-items:center; gap:8px; min-width:0; }
.vs-name .vote-pool-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 19px/1 var(--sans); color:var(--ink-2); }
.vs-row.mine .vote-pool-name { color:var(--ink); }
.vs-me { flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--brand-sheen-sm); box-shadow:var(--brand-bevel); color:var(--brand-ink); }
.vs-me svg { width:11px; height:11px; stroke-width:4; }
.vs-lane { display:flex; align-items:center; gap:10px; min-width:0; }
.vs-track { flex:1; display:block; height:10px; border-radius:999px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.vs-track i { display:block; height:100%; border-radius:inherit; background:#6a5444; }
.vs-row.mine .vs-track i { background:var(--brand-outline); }
.vs-tag { flex:none; padding:4px 8px; border-radius:999px; border:1px solid var(--line-2); font:700 13px/1 var(--mono); color:var(--muted); white-space:nowrap; }
.vs-pct { text-align:right; font:900 24px/1 var(--sans); font-stretch:108%; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* under the floor: nothing tonight, its share still shown */
.vs-row.under { opacity:.5; }
.vs-row.under .vs-track { flex:0 0 40%; }
.vs-more { display:block; width:100%; margin-top:10px; padding:12px 0 0; border:0; border-top:1px solid var(--line); background:none; text-align:left; font:750 17px/1 var(--sans); color:var(--brand-text-solid); cursor:pointer; }
.vs-more:hover { text-decoration:underline; text-underline-offset:3px; }
.vs-more:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.vs-note { display:flex; align-items:center; gap:10px; margin:12px 0 0; }
.vs-note[hidden] { display:none; }
.vs-swap-t { display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:999px; border:1px solid color-mix(in srgb,var(--amber) 42%,transparent); background:color-mix(in srgb,var(--amber) 8%,transparent); font:750 16px/1 var(--sans); color:var(--amber); white-space:nowrap; }

/* ---- 2. the console under the mesh (the drawing above it is charts.js, unchanged) */
.mesh-banner > .card-head { margin-bottom:12px; }
.mesh-banner .mesh-big { max-width:none; margin:0; }
.mesh-console { margin-top:16px; }
.mesh-console #round { display:flex; flex-direction:column; gap:12px; }
.mesh-console .vote-col { min-width:0; }
.mesh-console .vote-col:empty { display:none; }
.vstep { position:relative; min-width:0; border:1px solid var(--line); border-radius:18px; }
.vstep.open { padding:20px 22px 22px; border-color:var(--line-2); background:var(--panel-2); }
.vstep.fold, .vstep.wait { padding:13px 22px; }
.vstep.dim { opacity:.42; }
.vstep-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; min-height:44px; }
.vstep-title { margin:0; font:800 23px/1 var(--sans); font-stretch:106%; color:var(--ink); white-space:nowrap; }
.vstep.wait .vstep-title { color:var(--muted); }
.vstep-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.vstep-right:empty { display:none; }
.vstep-body { margin-top:18px; }
.vbadge { flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; font:900 20px/1 var(--sans); font-stretch:110%; }
.vbadge.now { background:var(--brand-sheen-sm); color:var(--brand-ink); text-shadow:var(--brand-ink-shadow); box-shadow:var(--brand-bevel),0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent); }
.vbadge.done { background:var(--brand-sheen-sm); color:var(--brand-ink); box-shadow:var(--brand-bevel); }
.vbadge.done svg { width:22px; height:22px; filter:drop-shadow(0 1px 1px rgba(30,14,5,.8)); }
.vbadge.wait { border:2px solid var(--line-2); color:var(--muted); }
.vlock { color:var(--muted); }
.vlock svg { display:block; width:24px; height:24px; }
.vfold-k { font:600 19px/1 var(--sans); color:var(--muted); white-space:nowrap; }
.vfold-v { font:900 27px/1 var(--sans); font-stretch:110%; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
.vfold-t { font:800 17px/1 var(--sans); color:var(--ink-2); }
.vbal { display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.vbal .k { font:600 17px/1 var(--sans); color:var(--muted); }
.vbal .v { font:900 24px/1 var(--sans); font-stretch:108%; color:var(--ink); }
.vstep-body > .vbal { margin-bottom:12px; }
/* step 1: the amount box, its pills, the big press */
.vamt { display:flex; align-items:center; gap:12px; height:86px; padding:0 14px 0 22px; border:1px solid var(--line-2); border-radius:16px; background:var(--bg); }
.vamt:focus-within { border-color:var(--ink-2); }
.vamt.bad { border-color:color-mix(in srgb,var(--down) 70%,transparent); }
.vamt-in { flex:1; min-width:0; width:100%; padding:0; border:0; outline:0; background:transparent; color:var(--ink); font:600 46px/1 var(--sans); font-stretch:106%; letter-spacing:-.01em; }
.vamt-in::placeholder { color:var(--dim); }
.vamt-in:disabled { opacity:.6; }
.vamt-tk { display:flex; align-items:center; gap:8px; margin-right:4px; font:800 18px/1 var(--sans); color:var(--ink-2); white-space:nowrap; }
.vamt-tk .vdisc { width:28px; height:28px; }
.vpill { flex:none; display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 17px; border-radius:999px; border:1px solid var(--line-2); background:var(--panel-2); font:750 17px/1 var(--sans); color:var(--ink); white-space:nowrap; cursor:pointer; }
.vpill:hover:not(:disabled) { border-color:var(--ink-2); }
.vpill:disabled { opacity:.45; cursor:not-allowed; }
.vbtn.vgo { width:100%; min-height:66px; margin-top:14px; border-radius:14px; font-size:22px; }
.vprog-k { display:block; margin-bottom:10px; font:600 17px/1 var(--sans); color:var(--muted); }
.vprog-nums { display:flex; align-items:baseline; gap:10px; }
.vprog-big { font:900 56px/1 var(--sans); font-stretch:110%; letter-spacing:-.02em; color:var(--ink); }
.vprog-of { font:800 26px/1 var(--sans); font-stretch:106%; color:var(--muted); }
.vmeter { height:9px; border-radius:999px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.vmeter > i { display:block; height:100%; max-width:100%; border-radius:inherit; background:var(--brand-outline); }
.vmeter.fat { height:10px; margin-top:16px; }
.vwarn { display:flex; align-items:center; gap:10px; height:50px; margin-top:14px; padding:0 16px; border-radius:12px; border:1px solid color-mix(in srgb,var(--down) 55%,transparent); background:color-mix(in srgb,var(--down) 11%,transparent); color:#ffb4b4; font:800 18px/1 var(--sans); }
.vwarn[hidden] { display:none; }
.vwarn svg { display:block; width:22px; height:22px; }
.vseg { display:inline-flex; padding:4px; border-radius:13px; background:var(--bg); border:1px solid var(--line-2); }
.vseg button { display:inline-flex; align-items:center; height:36px; padding:0 16px; border:0; border-radius:9px; background:none; font:750 16px/1 var(--sans); color:var(--muted); cursor:pointer; }
.vseg button.on { background:var(--brand-sheen-sm); color:var(--brand-ink); box-shadow:var(--brand-bevel); }
.vx { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--line-2); border-radius:10px; background:none; font:500 22px/1 var(--sans); color:var(--ink-2); cursor:pointer; }
.vx:hover:not(:disabled) { color:var(--ink); border-color:var(--ink-2); }
/* step 2: the folded split, the tiles */
.vmini { flex:1 1 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; min-width:0; }
.vmini-i { display:inline-flex; align-items:center; gap:6px; font:800 18px/1 var(--sans); color:var(--ink); }
.vmini-i b { font-weight:800; }
.vrestore { margin:0 0 14px; }
.vtiles { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.vtiles.editing { margin-top:22px; }
.vtiles.full { grid-template-columns:repeat(5,minmax(0,1fr)) 52px; }
.vtile { position:relative; min-width:0; height:134px; padding:13px; border:1px solid var(--line-2); border-radius:16px; background:var(--bg); display:flex; flex-direction:column; justify-content:space-between; align-items:stretch; text-align:left; color:var(--ink); font:inherit; }
button.vtile { cursor:pointer; }
button.vtile:hover:not(:disabled) { border-color:var(--ink-2); }
.vtile.ed { height:164px; }
.vtile.off .vtile-pc, .vtile.off .vtile-sym { color:var(--muted); }
.vtile.off { border-color:color-mix(in srgb,var(--down) 40%,transparent); }
.vtile-tt { display:flex; align-items:center; gap:8px; min-width:0; font:800 17px/1 var(--sans); color:var(--ink); }
.vtile-tt .vdisc { width:28px; height:28px; }
.vtile-sym { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vtile-tt.long { flex-wrap:wrap; row-gap:7px; }
.vtile-tt.long .vtile-sym { flex:0 0 100%; font-size:14px; font-stretch:88%; }
.vtile-dot { display:none; flex:none; width:8px; height:8px; border-radius:50%; background:var(--amber); }
.vtile.chg .vtile-dot { display:block; }
.vtile-tt.long .vtile-dot { order:-1; margin-left:auto; }
.vtile-pc { display:flex; align-items:baseline; min-width:0; font:900 42px/1 var(--sans); font-stretch:110%; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; cursor:text; }
button.vtile .vtile-pc { cursor:pointer; }
.vtile-pc small { margin-left:1px; font-size:22px; font-weight:800; color:var(--ink-2); }
.vtile.chg .vtile-pc, .vtile.chg .vtile-in { color:var(--amber); }
.vtile-num { position:relative; display:inline-block; }
.vtile-mirror { visibility:hidden; white-space:pre; font-variant-numeric:tabular-nums; }
.vtile-in { position:absolute; left:-9px; top:-4px; width:calc(100% + 11px); height:calc(100% + 8px); box-sizing:border-box; margin:0; padding:4px 2px 4px 9px; border:0; border-radius:10px; outline:0; background:transparent; color:var(--ink); font:inherit; letter-spacing:inherit; font-variant-numeric:tabular-nums; }
.vtile-in:focus { background:var(--bg); box-shadow:0 0 0 2px var(--brand-hi); }
.vtile-in:disabled { color:var(--muted); }
.vtile-x { position:absolute; top:-10px; right:-10px; display:grid; place-items:center; width:26px; height:26px; padding:0; border-radius:50%; background:var(--panel-2); border:1px solid var(--line-2); font:600 17px/1 var(--sans); color:var(--ink-2); cursor:pointer; z-index:1; }
.vtile-x:hover:not(:disabled) { color:var(--ink); border-color:var(--ink-2); }
.vtile-stp { display:flex; gap:6px; }
.vtile-stp button { flex:1; display:grid; place-items:center; height:32px; padding:0; border-radius:9px; border:1px solid var(--line-2); background:var(--panel-2); font:600 20px/1 var(--sans); color:var(--ink); cursor:pointer; }
.vtile-stp button:hover:not(:disabled) { border-color:var(--ink-2); }
.vtile-stp button:disabled { opacity:.35; cursor:not-allowed; }
.vtile-move { height:32px; padding:0 8px; border:0; border-radius:9px; background:var(--brand-sheen-sm); box-shadow:var(--brand-bevel); color:var(--brand-ink); font:800 14px/1 var(--sans); white-space:nowrap; cursor:pointer; }
.vtile-tag { position:absolute; top:-11px; left:12px; padding:4px 9px; border-radius:999px; background:#2a1414; border:1px solid color-mix(in srgb,var(--down) 60%,transparent); font:800 13px/1 var(--sans); color:#ffb4b4; white-space:nowrap; }
.vtile.empty { align-items:center; justify-content:center; border-style:dashed; color:var(--muted); font:300 46px/1 var(--sans); cursor:pointer; }
.vtile.empty:hover:not(:disabled) { color:var(--ink-2); border-color:var(--ink-2); }
.vtile.empty:disabled { cursor:not-allowed; opacity:.5; }
.vtile.empty.sel { border:1.5px solid transparent; background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--brand-outline) border-box; color:var(--brand-hi); }
.vtile.slim { padding:0; font-size:32px; }
.vtile:focus-visible, .vtile-x:focus-visible, .vtile-stp button:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
/* the picker, in place */
.vpick { margin-top:12px; padding:14px; border-radius:16px; border:1.5px solid transparent; background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--brand-outline) border-box; }
.vpick-sbox { display:flex; align-items:center; gap:10px; height:48px; padding:0 15px; border-radius:12px; border:1px solid var(--line-2); background:var(--panel); color:var(--muted); cursor:text; }
.vpick-sbox:focus-within { border-color:var(--ink-2); }
.vpick-sbox .vico svg { display:block; width:21px; height:21px; }
.vpick-search { flex:1; min-width:0; padding:0; border:0; outline:0; background:transparent; color:var(--ink); font:600 18px/1 var(--sans); }
.vpick-search::placeholder { color:var(--muted); }
.vpick-note, .vpick-empty { margin:10px 2px 0; font:700 16px/1.2 var(--sans); color:var(--muted); }
.vpick-note[hidden], .vpick-empty[hidden] { display:none; }
.vpick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:10px; max-height:min(420px,60vh); overflow-y:auto; overscroll-behavior:contain; }
.vpick-chip { display:flex; align-items:center; gap:10px; min-width:0; height:52px; padding:0 12px; border-radius:12px; border:1px solid var(--line-2); background:var(--panel-2); font:800 17px/1 var(--sans); color:var(--ink); white-space:nowrap; cursor:pointer; }
.vpick-chip[hidden] { display:none; }
.vpick-chip:hover:not(:disabled) { border-color:var(--ink-2); }
.vpick-chip:disabled { cursor:not-allowed; color:var(--muted); }
.vpick-chip:disabled .vdisc { opacity:.55; }
.vpick-chip .vdisc { width:30px; height:30px; }
.vpick-t { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.vpick-off { margin-left:auto; font:700 12px/1 var(--mono); color:var(--muted); }
.vpick-more { justify-content:center; color:var(--muted); font-weight:700; }
.vpick-chip:focus-visible, .vpick-search:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
/* the swap prompt (a 6th pool) */
.vswap { margin-top:12px; padding:14px; border-radius:16px; border:1px solid var(--line-2); background:var(--bg); }
.vswap-head { display:flex; align-items:center; gap:12px; }
.vswap-head .vdisc { width:32px; height:32px; }
.vswap-t { font:800 21px/1 var(--sans); color:var(--ink); white-space:nowrap; }
.vswap-head .vbtn { margin-left:auto; }
.vswap-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:14px; }
.vswap-o { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 0; border-radius:12px; border:1px solid var(--line-2); background:var(--panel-2); font:800 16px/1 var(--sans); color:var(--ink); cursor:pointer; }
.vswap-o .vdisc { width:28px; height:28px; }
.vswap-o:hover:not(:disabled), .vswap-o:focus-visible { border:1px solid var(--brand); outline:0; }
/* the bar: the big total and the presses */
.vtot { display:flex; align-items:center; gap:16px; margin-top:18px; }
.vtot-big { font:900 44px/1 var(--sans); font-stretch:110%; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.vtot .vmeter { flex:0 1 120px; width:120px; }
.vtot-acts { margin-left:auto; display:flex; gap:10px; }
.vtot-acts .vbtn { min-height:52px; padding:0 18px; font-size:17px; }
.vtot-acts .vbtn.sheen, .vtot-acts .vbtn.need, .vtot-acts .vbtn.saved { padding:0 24px; font-size:18px; }

/* ---- 3. ⓘ tips, chips, logo discs, buttons */
.vinfo { position:relative; display:inline-flex; flex:none; }
.vi { display:grid; place-items:center; width:24px; height:24px; padding:0; border-radius:50%; border:1.5px solid var(--line-2); background:none; color:var(--muted); font:italic 700 14px/1 Georgia,serif; cursor:pointer; }
.vinfo.open .vi, .vi:hover { border-color:var(--brand); color:var(--brand-hi); background:color-mix(in srgb,var(--brand) 12%,transparent); }
.vi:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.vtip { display:none; position:absolute; z-index:7; top:36px; left:-26px; width:340px; padding:13px 18px 12px; border-radius:14px; border:1px solid transparent; background:linear-gradient(#1f1712,#1f1712) padding-box,var(--brand-outline) border-box; box-shadow:0 22px 50px -10px rgba(0,0,0,.85); font:600 16px/1.25 var(--sans); color:var(--ink-2); text-align:left; white-space:normal; }
.vtip::before { content:''; position:absolute; top:-7px; left:31px; width:12px; height:12px; transform:rotate(45deg); background:#1f1712; border-left:1px solid #c9935c; border-top:1px solid #c9935c; }
.vinfo.open .vtip, .vinfo:hover .vtip, .vinfo:focus-within .vtip { display:block; }
.vtip-line { display:flex; gap:10px; padding:5px 0; }
.vtip-line::before { content:''; flex:none; width:6px; height:6px; margin-top:6px; border-radius:50%; background:var(--brand); }
.vtip-link { display:block; margin-top:8px; padding-top:10px; border-top:1px solid var(--line-2); color:var(--brand-text-solid); font-weight:800; text-decoration:none; }
.vtip-link:hover { text-decoration:underline; text-underline-offset:3px; }
.vchip { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 15px; border-radius:999px; border:1px solid var(--line-2); font:750 16px/1 var(--sans); color:var(--ink-2); white-space:nowrap; }
.vchip[hidden] { display:none; }
.vchip.ok { color:var(--mint); border-color:color-mix(in srgb,var(--mint) 45%,transparent); background:color-mix(in srgb,var(--mint) 9%,transparent); }
.vchip.warn { color:var(--amber); border-color:color-mix(in srgb,var(--amber) 42%,transparent); background:color-mix(in srgb,var(--amber) 8%,transparent); }
.vchip.warn::before { content:''; width:9px; height:9px; border-radius:50%; background:currentColor; }
.vdisc { position:relative; display:inline-grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; background:var(--logo-tile,#1b1815); box-shadow:0 0 0 1px var(--line-2); overflow:hidden; font:800 13px/1 var(--sans); color:var(--ink-2); }
.vdisc.sm { width:24px; height:24px; font-size:11px; }
.vdisc img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vdisc img[hidden] { display:none; }
.vico { display:inline-flex; flex:none; }
.vico svg { display:block; width:1.1em; height:1.1em; }
.vbtn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:40px; padding:0 16px; border:1px solid transparent; border-radius:12px; font:800 16px/1 var(--sans); font-stretch:112%; letter-spacing:.01em; white-space:nowrap; cursor:pointer; }
.vbtn:disabled { cursor:not-allowed; }
.vbtn.sheen { border-color:var(--brand-deep); background:var(--brand-sheen-btn); color:var(--brand-ink); text-shadow:var(--brand-ink-shadow); box-shadow:var(--brand-bevel); }
.vbtn.sheen:hover:not(:disabled) { background:var(--brand-sheen-btn-hover); }
.vbtn.sheen:disabled { opacity:.45; }
.vbtn.sheen.busy:disabled { opacity:.72; }
.vbtn.metal { background:var(--brand-sheen-sm); color:var(--brand-ink); box-shadow:var(--brand-bevel); font-weight:750; font-stretch:100%; }
.vbtn.metal:hover:not(:disabled) { background:var(--brand-sheen-sm-hover); }
.vbtn.metal:disabled { opacity:.45; }
.vbtn.ghost { border-color:var(--line-2); background:transparent; color:var(--ink-2); font-weight:700; font-stretch:100%; }
.vbtn.ghost:hover:not(:disabled) { color:var(--ink); border-color:var(--ink-2); }
.vbtn.ghost:disabled { opacity:.45; }
/* what is left to do before a press can go ("Make it 100%", "Not enough FABLE"): dashed, never a pressable look */
.vbtn.need { border:1.5px dashed color-mix(in srgb,var(--amber) 55%,transparent); background:color-mix(in srgb,var(--amber) 7%,var(--panel)); color:#ffd98a; font-stretch:110%; }
.vbtn.need.bad { border-color:color-mix(in srgb,#f2777d 60%,transparent); background:color-mix(in srgb,#f2777d 8%,var(--panel)); color:#ffb4b4; }
.vbtn.saved { border-color:color-mix(in srgb,var(--mint) 45%,transparent); background:color-mix(in srgb,var(--mint) 9%,transparent); color:var(--mint); font-stretch:100%; }
/* "Withdraw all": the trade box's Sell red */
.vbtn.sell { border-color:#7a2a2f; background:#f2777d; color:#371115; box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -10px 18px -12px rgba(55,17,21,.6); }
.vbtn.sell:hover:not(:disabled) { background:color-mix(in srgb,#f2777d 90%,white); }
.vbtn.sell:disabled { opacity:.6; }
.vbtn .vico svg { width:22px; height:22px; }
.vbtn.busy .vico svg { animation:vspin .9s linear infinite; }
.vbtn:focus-visible, .vpill:focus-visible, .vseg button:focus-visible, .vx:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.vbtn.vedit { height:38px; min-height:38px; border-radius:10px; }
.vbtn.vsmall { height:36px; min-height:36px; padding:0 13px; border-radius:10px; font-size:15px; }
@keyframes vspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .vs-chev, .rc-ring-fill { transition:none; } .vbtn.busy .vico svg { animation:none; } }

/* ---- 4. narrower windows (nothing is zoomed below 1100px): the phone sizes */
@media (max-width:1099.98px) {
  .rclock { padding:12px 14px; }
  .rc-row, .rc-clock { gap:12px; }
  .rc-ring { width:44px; height:44px; }
  .rclock .k { font-size:15px; margin-bottom:7px; }
  .rc-t .v { font-size:30px; }
  .rc-pot .v { font-size:32px; }
  .rc-pot .v.wait { font-size:18px; }
  .pot-halves .ph-amt { font-size:17px; } .pot-halves .ph-usd { font-size:16px; } .pot-halves .ph-amt i { font-size:14px; }
  .pot-halves .ph-kpi .k { font-size:14px; } .pot-halves .ph-kpi .v { font-size:17px; }
  .vsplit { padding:16px 16px 14px; }
  .vs-head-title { font-size:20px; }
  .vs-head { gap:10px; }
  .vs-lastbtn { height:34px; padding:0 12px; font-size:15px; }
  .vs-last-body { width:340px; }
  .vs-row { grid-template-columns:30px minmax(0,1fr) 64px 50px; column-gap:10px; height:48px; }
  .vs-row .pair-ic { width:30px; height:30px; }
  .vs-name .vote-pool-name { font-size:17px; }
  .vs-pct { font-size:21px; }
  .vs-row.under .vs-track { flex:1; }
  .vs-tag { display:none; }
  .vs-more { font-size:16px; }
  .vstep.open { padding:16px 16px 18px; }
  .vstep.fold, .vstep.wait { padding:12px 16px; }
  .vstep-head { gap:8px 11px; min-height:40px; }
  .vbadge { width:36px; height:36px; font-size:17px; }
  .vbadge.done svg { width:19px; height:19px; }
  .vstep-title { font-size:20px; }
  .vfold-v { font-size:24px; } .vfold-k { font-size:17px; } .vfold-t { font-size:15px; }
  .vbal .k { font-size:15px; } .vbal .v { font-size:20px; }
  .vamt { height:76px; padding:0 12px 0 16px; }
  .vamt-in { font-size:38px; }
  .vamt-tk { font-size:16px; }
  .vpill { height:38px; padding:0 14px; font-size:16px; }
  .vbtn.vgo { min-height:60px; font-size:20px; }
  .vprog-big { font-size:44px; } .vprog-of { font-size:21px; } .vprog-k { font-size:15px; }
  .vwarn { height:46px; font-size:16px; }
  .vseg button { height:34px; padding:0 13px; font-size:15px; }
  .vchip { height:32px; padding:0 12px; font-size:15px; }
  .vbtn.vedit { height:36px; min-height:36px; padding:0 13px; font-size:15px; }
  .vtile { height:112px; padding:11px 10px; }
  .vtile.ed { height:146px; }
  .vtile-tt { font-size:15px; gap:6px; }
  .vtile-tt .vdisc { width:24px; height:24px; }
  .vtile-pc { font-size:34px; } .vtile-pc small { font-size:18px; }
  .vtile.empty { font-size:40px; }
  .vtot-big { font-size:36px; }
  .vtot-acts .vbtn { min-height:48px; padding:0 14px; font-size:16px; }
  .vtot-acts .vbtn.sheen, .vtot-acts .vbtn.need, .vtot-acts .vbtn.saved { padding:0 16px; font-size:16px; }
  .vpick-chip { height:48px; font-size:16px; }
  .vtip { width:300px; font-size:15px; }
  .vswap-t { font-size:18px; }
}
@media (max-width:640px) {
  .rc-t .rt-full { display:none; } .rc-t .rt-short { display:inline; }
  .vtiles, .vtiles.full { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .vtile.slim { padding:13px; font-size:40px; }
  .vpick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vswap-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .vtot { flex-wrap:wrap; gap:12px; }
  .vtot .vmeter { flex:1 1 auto; }
  .vtot-acts { flex:1 1 100%; margin-left:0; }
  .vtot-acts .vbtn.ghost { flex:0 0 auto; }
  .vtot-acts .vbtn:last-child { flex:1 1 auto; }
  .vstep-deposit.open .vstep-right { flex:1 1 100%; margin-left:0; justify-content:flex-start; }
  .vstep-right:has(.vseg), .vstep-deposit.open .vstep-right:has(.vseg) { flex:1 1 100%; justify-content:space-between; }
  /* the Last round card and the ⓘ tips span their card's width under its head */
  .vs-last-body { left:0; right:0; width:auto; }
  .vinfo { position:static; }
  .vtip { left:12px; right:12px; top:58px; width:auto; }
  /* the narrow console: a little less padding, the amount box without its token tag, a tile's ticker on its own line */
  .vstep.open { padding:14px 14px 16px; }
  .vstep.fold, .vstep.wait { padding:12px 14px; }
  .vstep-head { gap:8px; }
  .vchip { gap:6px; padding:0 9px; }
  .vchip.warn::before { width:7px; height:7px; }
  .vfold-t { display:none; }
  .vamt-tk { display:none; }
  .vamt-in { font-size:32px; }
  .vtile-tt { flex-wrap:wrap; row-gap:6px; }
  .vtile-tt .vtile-sym { order:2; flex:0 0 100%; }
  .vtile-tt .vtile-dot { order:1; margin-left:auto; }
  .vtile-tt.long .vtile-sym { font-size:13px; }
  .vs-top, .vs-head { gap:8px; }
  .vs-lastbtn { height:32px; padding:0 10px; font-size:14px; }
  .vs-top .vtip { left:0; right:0; top:calc(100% + 10px); }
  .vs-note .vtip { top:auto; bottom:calc(100% + 10px); }
  .vs-note { position:relative; }
  .vtip::before { display:none; }
}