/* deadinternet.money / CHECKS CLEAR: components.
   Every control is a checkbox in some form. Hairlines and square cells, 2 px radius only on controls, no shadows,
   no gradients, no blur. Hover lives only where a pointer hovers. Every state is designed.
   Views prefix their own classes with v-<view> (v-live, v-cash...) so they never collide with these. */

/* =====================================================================
   THE CHECK-BUTTON: the one control
   <button class="cb cb--lg"><span class="cb-box">[trace svg]</span><span class="cb-lbl">Copy</span></button>
   Build it with cbHTML() from kit/checkbox.js; drive states with cbState(btn, 'loading'|'ok'|'err', label).
   ===================================================================== */
.cb{position:relative;display:inline-flex;align-items:center;gap:12px;height:var(--tap);padding:0 20px 0 16px;border-radius:var(--r-ctl);
  background:var(--accent);color:var(--accent-ink);font:600 16px/1 var(--f-ui);letter-spacing:-.005em;user-select:none;-webkit-user-select:none;
  text-decoration:none;white-space:nowrap;transition:transform var(--d-press) var(--e-in),background-color 140ms var(--e-in)}
.cb:active{transform:translateY(1px)}
.cb-box{position:relative;flex:none;width:22px;height:22px;background:var(--cb-box);box-shadow:inset 0 0 0 2px var(--accent-ink);
  transition:transform 50ms var(--e-in),box-shadow var(--d-micro) var(--e-in),background-color var(--d-micro) var(--e-in)}
.cb:not(.cb--line) .cb-box .tk:not(.tk-strike) path{fill:var(--cb-tick)}
.cb.err .cb-box{background:var(--box)}
.cb:active .cb-box{transform:translate(var(--mx,0),var(--my,0)) scale(.94)!important}
.cb-box .tk{left:-12%;top:-26%;width:132%;height:132%}
.cb-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cb-lbl.swap{animation:cc-swap 220ms var(--e-in)}
.cb--xl{height:var(--tap-xl);font-size:16px;padding:0 24px 0 16px;min-width:200px}
.cb--xl .cb-box{width:26px;height:26px}
.cb--lg{height:var(--tap-xl)}
.cb--wide{width:100%}
.cb--line{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);height:44px;font-size:14px;font-weight:600;padding:0 16px 0 12px;gap:12px}
.cb--line .cb-box{width:18px;height:18px;background:var(--box);box-shadow:inset 0 0 0 1.5px var(--ink)}
.cb .trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0}
.cb .trace rect{fill:none;stroke:var(--accent-ink);stroke-width:2.6;stroke-dasharray:.28 .72;stroke-dashoffset:0}
.cb--line .trace rect{stroke:var(--ink)}
.cb.loading{cursor:progress}
.cb.loading .trace{opacity:1}
.cb.loading .trace rect{animation:cc-trace .9s linear infinite}
.cb.loading .cb-box{box-shadow:inset 0 0 0 1px var(--on-accent-line)}
.cb--line.loading .cb-box{box-shadow:inset 0 0 0 1px var(--ink-35)}
.cb.err{animation:cc-shake .32s var(--e-in)}
.cb.done{cursor:default}
.cb[disabled],.cb.dis,.cb[aria-disabled="true"]:not(.done){background:var(--surface);color:var(--muted);cursor:not-allowed;box-shadow:none}
.cb[disabled] .cb-box,.cb.dis .cb-box,.cb[aria-disabled="true"]:not(.done) .cb-box{background:transparent;box-shadow:none;outline:1.5px dashed var(--ink-35);outline-offset:-1.5px}
.cb--line.done{box-shadow:inset 0 0 0 1px var(--line)}
.cb--line.done .cb-box{background:var(--accent);box-shadow:none}
/* the link button: the url lives in the button, the action on its right */
.cb--link{max-width:100%;padding-right:8px;gap:0}
.cb--link .cb-box{margin-right:12px}
.cb-url{font:400 16px/1 var(--f-mono);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding-right:16px}
.cb--link .cb-lbl{align-self:stretch;display:flex;align-items:center;padding:0 14px;margin-left:auto;box-shadow:inset 1px 0 0 var(--on-accent-line);min-width:84px;justify-content:center}
.cb--link.nolink .cb-url{display:none}
.cb--link.nolink .cb-lbl{box-shadow:none;padding:0 14px 0 0;min-width:0;margin-left:0}

/* ---------- text buttons and links ---------- */
.lnk{position:relative;display:inline-block;font:500 16px/1 var(--f-ui);text-decoration:none;color:var(--ink);padding:14px 4px;cursor:pointer}
.lnk::after{content:'';position:absolute;left:4px;right:4px;bottom:9px;height:1.5px;background:currentColor;transform:scaleX(.0001);transform-origin:left;transition:transform var(--d-std) var(--e-in)}
.lnk:focus-visible::after,.lnk.on::after{transform:scaleX(1)}
.lnk:active{transform:translateY(1px)}
.lnk--sm{font-size:14px;padding:12px 2px}
.lnk--sm::after{bottom:8px}
.lnk--muted{color:var(--muted)}

/* square icon button (always labelled with aria-label) */
.ib{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-ctl);color:var(--ink);box-shadow:inset 0 0 0 1px transparent;transition:box-shadow var(--d-micro) var(--e-in),transform var(--d-press) var(--e-in)}
.ib:active{transform:scale(.94)}
.ib svg{width:20px;height:20px}

/* ---------- the highlighter swipe (text on it is always dark) ---------- */
.hl{position:absolute;left:-4px;right:-6px;top:18%;bottom:8%;background:var(--hot);z-index:-1;transform:skew(-6deg) rotate(-1.2deg) scaleX(.0001);transform-origin:left;border-radius:2px 6px 3px 7px;transition:transform 260ms var(--e-in)}
.on > .hl,.hl.on{transform:skew(-6deg) rotate(-1.2deg) scaleX(1)}
.hi{position:relative;z-index:0;display:inline-block;color:var(--hot-ink);padding:0 3px}
.hi::before{content:'';position:absolute;inset:8% -2px 4%;background:var(--hot);z-index:-1;transform:skew(-8deg)}

/* ---------- type ---------- */
.title{font:400 var(--t-28)/1.1 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.title--xl{font-size:clamp(28px,4vw,40px)}
.eyebrow{font:700 12px/1 var(--f-ui);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--muted)}
.lede{font:500 16px/1.4 var(--f-ui);color:var(--muted);max-width:44ch}
.big-num{font:400 var(--t-40)/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--accent)}
.big-num.zero{color:var(--money-zero)}
kbd{font:400 12px/1 var(--f-mono);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);padding:3px 5px;border-radius:var(--r-ctl)}
.tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 7px;font:700 11px/1 var(--f-ui);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-35);border-radius:var(--r-ctl);white-space:nowrap}
.tag--acc{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.tag--hot{background:var(--hot);color:var(--hot-ink);box-shadow:none}
.tag--bad{color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}

/* =====================================================================
   THE SHELL (app/views/app.php): bar, view outlet, dock, layer root
   ===================================================================== */
.shell{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.bar{position:relative;z-index:var(--z-bar);flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--bar-h);padding:12px var(--pad) 0}
.who{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);min-height:44px}
.mark{width:30px;height:30px;flex:none;display:block}
.memno{font:400 12px/1 var(--f-mono);color:var(--muted);letter-spacing:.02em}
.bar-slot{display:flex;align-items:center;gap:8px;min-width:0}
.outlet{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.view{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-width:0;padding-bottom:var(--dock-clear)}
.view.v-full{padding-bottom:0}
.view.enter{animation:cc-in 240ms var(--e-in) both}
.view.leave{opacity:0;transition:opacity 120ms var(--e-out)}
.page{width:100%;max-width:calc(1040px + 2 * var(--pad));padding:16px var(--pad) 0}
.page--narrow{max-width:calc(640px + 2 * var(--pad))}
@media (max-width:819px){
  .mark{width:26px;height:26px}
  .memno{display:none}
}

/* =====================================================================
   THE DOCK: five places + Sound + Dark. Phones: a bar at the bottom. Desktop: the same dock floating.
   ===================================================================== */
.dock{position:fixed;left:50%;bottom:20px;transform:translate(-50%,0);z-index:var(--z-dock);display:flex;align-items:stretch;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-ctl);padding:0 4px;
  transition:transform 420ms var(--spring),opacity 260ms var(--e-in)}
.dock.pre{transform:translate(-50%,140%);opacity:0}
.dk{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:76px;height:var(--dock-h);color:var(--ink);font:500 12px/1 var(--f-ui);text-decoration:none}
.dk-l{color:var(--muted);white-space:nowrap;transition:color 140ms var(--e-in)}
.dk.on .dk-l{color:var(--ink);font-weight:700}
.dk-ic{position:relative;width:20px;height:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;transition:transform var(--d-press) var(--e-in)}
.dk:active .dk-ic,.dk:active .dk-ck{transform:scale(.84,.78)}
.dk-ic i{display:block;box-shadow:inset 0 0 0 .75px var(--ink-16);transition:background-color 160ms var(--e-in),box-shadow 160ms var(--e-in),transform 160ms var(--e-in)}
.dk-ic i.p{background:var(--ink-35);box-shadow:none}
.dk.on .dk-ic i.p{background:var(--accent)}
.dk-ic i.beat{transform:scale(var(--hb,1));transition:background-color 160ms var(--e-in)}
.dk.locked .dk-ic i{box-shadow:none;outline:1px dashed var(--ink-35);outline-offset:-1px;background:transparent}
.dk.locked .dk-ic i.fl{background:var(--accent);outline:none}
.dk.locked.on .dk-ic i{outline-color:var(--ink-50)}
.dk.deny{animation:cc-shake .32s var(--e-in)}
/* the pulse lost the server: Live's heartbeat cell goes to a dashed red pen until it's back */
html.is-offline .dk[data-go="live"] .dk-ic i.beat{background:transparent;outline:1px dashed var(--danger);outline-offset:-1px}
.dk-sep{width:1px;background:var(--line);margin:14px 4px}
.dk-ck{width:18px;height:18px;position:relative;box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--box);transition:transform var(--d-press) var(--e-in),background-color var(--d-micro) var(--e-in),box-shadow var(--d-micro) var(--e-in)}
.dk-sw[aria-checked="true"] .dk-ck{background:var(--accent);box-shadow:none}
.dk-ck .tk{left:-8%;top:-24%;width:124%;height:124%}
.dk-sw .dk-l{color:var(--ink)}
.dk-why{position:absolute;bottom:calc(100% + 10px);left:0;background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);padding:8px 12px 8px 32px;font:600 14px/1 var(--f-ui);white-space:nowrap;opacity:0;transform:translate(-50%,6px);transition:opacity 160ms var(--e-in),transform var(--d-std) var(--e-in);pointer-events:none}
.dk-why::before{content:'';position:absolute;left:10px;top:50%;width:11px;height:11px;margin-top:-6px;outline:1.5px dashed var(--ink-35);outline-offset:-1.5px}
.dk-why.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:819px){
  .dock{left:0;right:0;bottom:0;transform:none;border-radius:0;box-shadow:inset 0 1px 0 var(--line);padding:0 2px var(--safe-b);justify-content:space-around}
  .dock.pre{transform:translateY(100%)}
  .dk{width:auto;flex:1;height:var(--dock-h);gap:8px;font-size:12px;min-width:0}
  .dk-why,.dk-why.on{left:0!important;right:0;bottom:calc(100% + 1px);height:30px;padding:0 0 0 20px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 var(--line);transform:none;font-size:12px}
  .dk-why::before{position:relative;left:auto;top:auto;margin:0 8px 0 0}
  .dk-sep{margin:16px 0}
}

/* =====================================================================
   LAYERS: challenge cards over the instrument (kit/layer.js)
   ===================================================================== */
.veil{position:fixed;inset:0;z-index:var(--z-veil);background:var(--veil);opacity:0;transition:opacity var(--d-std) var(--e-in)}
.veil.on{opacity:1}
.sheet{position:fixed;z-index:var(--z-sheet);top:16px;right:16px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);width:min(560px,calc(100vw - 32px));background:var(--sheet);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(calc(100% + 24px));transition:transform var(--d-layer) var(--e-in)}
.sheet.on{transform:none}
.sheet.closing{transition:transform 200ms var(--e-out)}
.sheet.wide{width:min(980px,calc(100vw - 32px))}
.sh-hdr{flex:none;display:flex;align-items:flex-start;gap:12px;background:var(--accent);color:var(--accent-ink);margin:1px 1px 0;padding:16px 16px 16px 20px;min-height:84px}
.sh-prompt{flex:1;min-width:0;font:400 16px/1.25 var(--f-ui);letter-spacing:-.005em}
.sh-prompt b{display:block;font:800 28px/1.1 var(--f-ui);letter-spacing:-.015em;margin-top:2px}
.sh-steps{display:flex;gap:8px;padding-top:14px}
.sh-steps i{width:16px;height:16px;background:var(--cb-box);box-shadow:inset 0 0 0 1.5px var(--accent-ink);position:relative}
.sh-steps i .tk path{fill:var(--cb-tick)}
.sh-steps i.done .tk{left:-6%;top:-22%;width:120%;height:120%}
.sh-steps i[data-back]{cursor:pointer}
.sh-steps i[data-back]::after{content:'';position:absolute;inset:-14px -4px}
.sh-x{flex:none;height:44px;padding:0 12px;font:400 12px/1 var(--f-mono);box-shadow:inset 0 0 0 1px var(--on-accent-line);border-radius:var(--r-ctl);transition:box-shadow var(--d-micro) var(--e-in),transform var(--d-press) var(--e-in);color:var(--accent-ink)}
.sh-x:active{transform:scale(.94)}
.sh-x .m{display:none}
.sh-body{flex:1 1 auto;min-height:0;overflow:auto;padding:20px 20px 8px;overscroll-behavior:contain}
.sh-body.swap{animation:cc-bodyin 240ms var(--e-in)}
@keyframes cc-bodyin{from{opacity:0;transform:translateX(14px)}}
.sh-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 16px 20px;box-shadow:inset 0 1px 0 var(--line);margin:0 1px 1px;min-height:84px}
.sh-foot:empty{display:none}
.sh-foot>.cb:only-child{margin-left:auto}
.sh-note{font:500 14px/1.4 var(--f-ui);color:var(--muted);min-width:0}
.sh-note b{color:var(--ink);font-weight:600}
.sh-note .n{font:400 14px/1 var(--f-mono);font-variant-numeric:tabular-nums}
@media (max-width:819px){
  .sheet{top:auto;left:0;right:0;bottom:0;width:100%;max-height:92dvh;height:auto;transform:translateY(102%);box-shadow:inset 0 1px 0 var(--ink)}
  .sheet.wide{width:100%}
  .sheet.on{transform:none}
  .sh-x .m{display:inline}
  .sh-x .d{display:none}
  .sh-hdr{min-height:72px;padding:14px 10px 14px 16px}
  .sh-prompt b{font-size:20px}
  .sh-body{padding:16px}
  .sh-foot{padding:12px 12px calc(12px + var(--safe-b)) 16px;min-height:80px}
  .sh-foot .cb{height:var(--tap-xl)}
}

/* =====================================================================
   COMMAND PALETTE (kit/palette.js)
   ===================================================================== */
.pal{position:fixed;inset:0;z-index:var(--z-pal);background:var(--veil);display:flex;justify-content:center;align-items:flex-start;padding-top:14vh}
.pal-box{width:min(560px,calc(100vw - 32px));background:var(--sheet);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);animation:cc-palin 200ms var(--e-in)}
@keyframes cc-palin{from{transform:translateY(-8px);opacity:0}}
.pal-hdr{background:var(--accent);color:var(--accent-ink);margin:1px 1px 0;padding:16px;font:800 20px/1 var(--f-ui)}
.pal-in{display:block;width:calc(100% - 2px);margin:0 1px;height:56px;border:0;outline:0;padding:0 16px;font:400 16px/1 var(--f-mono);color:var(--ink);background:transparent;box-shadow:inset 0 -1px 0 var(--line)}
.pal-in::placeholder{color:var(--ink-35)}
.pal-list{list-style:none;padding:6px 1px 8px;max-height:50vh;overflow:auto}
.pal-list li{display:flex;align-items:center;gap:12px;height:44px;padding:0 16px;font:500 16px/1 var(--f-ui);cursor:pointer}
.pal-list li i{position:relative;width:16px;height:16px;box-shadow:inset 0 0 0 1.5px var(--ink-35);flex:none}
.pal-list li.act{background:var(--surface)}
.pal-list li.act i{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pal-list li.done i{background:var(--accent);box-shadow:none}
.pal-list li i .tk{left:-8%;top:-24%;width:124%;height:124%}
.pal-list li kbd{margin-left:auto}
.pal-list li.none{color:var(--muted);cursor:default}

/* =====================================================================
   THE ODOMETER: money that rolls digit by digit (kit/odometer.js)
   Every digit column has one width (the display face's tabular advance + air), so nothing reflows or clips.
   ===================================================================== */
.odo{position:relative;display:inline-flex;align-items:flex-start;font:400 var(--odo-size,64px)/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--accent);white-space:nowrap;
  transition:color 400ms var(--e-in),font-size 320ms var(--e-in)}
.odo.zero{color:var(--money-zero)}
.odo.ink{color:var(--ink)}
.odo .oc{display:inline-block;height:1.14em;overflow:hidden;width:var(--dw,.74em);text-align:center;position:relative;
  -webkit-mask-image:linear-gradient(transparent 13.5%,#000 16.8%,#000 83%,transparent 86.5%);mask-image:linear-gradient(transparent 13.5%,#000 16.8%,#000 83%,transparent 86.5%)}
.odo .os{display:flex;flex-direction:column;transition:transform var(--d-roll) var(--e-in);will-change:transform}
.odo .os span{height:1.14em;line-height:1.14em;display:block}
.odo .ox{display:inline-block;height:1.14em;line-height:1.14em}
.odo .ox.cur{margin-right:.02em}
.odo .ox.dot{width:var(--pw,.3em);text-align:center}
.odo.land{animation:cc-land 420ms var(--e-in)}
@keyframes cc-land{0%{transform:translateY(0)}30%{transform:translateY(2px)}100%{transform:translateY(0)}}
/* "New best": a highlighter swipe beside the number */
.best{position:relative;z-index:0;display:inline-block;white-space:nowrap;flex:none;font:700 14px/1 var(--f-ui);color:var(--hot-ink);padding:5px 4px;opacity:0;transition:opacity 200ms var(--e-in)}
.best.on{opacity:1}
/* the hand slash under the money on a big moment */
.slash{position:absolute;pointer-events:none;transition:opacity 400ms var(--e-in)}
.slash .tk{inset:0;width:100%;height:100%}
.slash.fade{opacity:0}

/* =====================================================================
   THE HOUR METER: the captcha you solve all hour (kit/meter.js)
   The goal header is an outline ("Warm at $2") until the tier is reached; it turns green only on the hit.
   ===================================================================== */
.meter{position:relative;--t:40px;--g:3px;width:calc(var(--t)*3 + var(--g)*2)}
.m-hdr{position:relative;z-index:0;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);height:24px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 8px;margin-bottom:3px;overflow:hidden;
  transition:background-color 160ms var(--e-in),color 160ms var(--e-in),box-shadow 160ms var(--e-in)}
.meter.hit .m-hdr{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.m-goal{font:400 12px/1 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;transition:opacity 160ms var(--e-in)}
.m-at{font:500 12px/1 var(--f-ui);margin-right:4px}
.meter.tight .m-at{display:none}
.m-goal.off{opacity:0}
.m-name{position:relative;z-index:1;font:700 12px/1 var(--f-ui);white-space:nowrap;transition:transform var(--d-std) var(--e-in),opacity var(--d-std) var(--e-in)}
.m-name .hl2{position:absolute;inset:-3px -5px -2px -4px;background:var(--hot);z-index:-1;transform:skew(-8deg) scaleX(.0001);transform-origin:left;transition:transform 240ms var(--e-in)}
.m-name.cert,.m-name.max{font-weight:800;letter-spacing:.06em}
.m-name.cert{color:var(--hot-ink)}
.m-name.cert .hl2{transform:skew(-8deg) scaleX(1)}
.m-grid{display:grid;grid-template-columns:repeat(3,var(--t));grid-template-rows:repeat(3,var(--t));gap:var(--g)}
.m-t{position:relative;box-shadow:inset 0 0 0 1px var(--ink);background:var(--bg);overflow:visible;transform-origin:0 0;transition:box-shadow 160ms var(--e-in),transform var(--d-std) var(--e-in)}
.m-t .m-f{position:absolute;inset:0;background:var(--accent);transform:scaleY(var(--f,0));transform-origin:50% 100%;transition:transform var(--d-roll) var(--e-in)}
.m-t.full{box-shadow:none}
.m-t.full .m-f{transform:none}
.m-t .tk{left:12%;top:8%;width:80%;height:80%}
/* the tile being filled draws its own outline in green as the hour's money grows, starting as a corner bracket */
.m-tr{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;pointer-events:none}
.m-tr rect{--fv:max(var(--f,0),.12);fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:square;stroke-dasharray:var(--fv) calc(1 - var(--fv));stroke-dashoffset:calc(var(--fv) / 2);transition:stroke-dasharray var(--d-roll) var(--e-in),stroke-dashoffset var(--d-roll) var(--e-in)}
.m-t.cur{box-shadow:inset 0 0 0 1px var(--accent)}
.m-t.cur .m-tr{opacity:1}
.m-t.cur .m-f{opacity:0}
.m-seal{position:absolute;left:0;top:27px;width:calc(var(--t)*3 + var(--g)*2);height:calc(var(--t)*3 + var(--g)*2);background:var(--accent);opacity:0;pointer-events:none;transition:opacity 140ms var(--e-in)}
.m-seal.on{opacity:1}
.sk{position:absolute;transform:translate(-50%,-50%)}
.sk .tk{left:0;top:0;width:100%;height:100%}
.meter.merge .m-t{box-shadow:none;background:var(--accent);transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--ms,1))}
.meter.cel .m-f{transition-duration:140ms}
.m-read{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;margin-top:8px;font:400 12px/1 var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.m-left{color:var(--muted)}
.meter--sm{--t:30px}
.meter--sm .m-hdr{padding:0 4px 0 5px;gap:4px}
.meter--sm .m-read{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:4px}
@media (max-width:819px){ .meter{--t:36px} .meter--sm{--t:30px} }

/* =====================================================================
   THE EVENT LINE: one line; the new one replaces the old (kit/eventline.js)
   ===================================================================== */
.evt{position:relative;height:40px;overflow:hidden}
.evt-in{position:absolute;inset:0 0 auto auto;height:40px;display:flex;align-items:center;justify-content:flex-end;gap:8px;font:400 14px/1 var(--f-mono);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.evt--left .evt-in{inset:0 auto auto 0;justify-content:flex-start}
.evt-in.out{animation:cc-evtout 200ms var(--e-out) forwards;pointer-events:none}
.evt-in.in{animation:cc-evtin 260ms var(--e-in) both}
@keyframes cc-evtout{to{transform:translateY(-100%);opacity:0}}
@keyframes cc-evtin{0%,30%{transform:translateY(70%);opacity:0}}
.evt .tkw,.tkw{position:relative;display:inline-block;width:16px;height:16px;flex:none}
.tkw .tk{inset:-10% -5%;width:115%;height:115%}
.evt .mu,.mu{color:var(--muted)}
.evt .amt{color:var(--ink)}
.evt .stk,.stk{font:700 12px/1 var(--f-ui);color:var(--hot-ink);padding:4px 5px;position:relative;z-index:0;white-space:nowrap}
.stk::before{content:'';position:absolute;inset:0;background:var(--hot);z-index:-1;transform:skew(-8deg)}
.evt .sel-b,.sel-b{width:14px;height:14px;border-radius:50%;background:var(--accent);position:relative;flex:none}
.sel-b .tk{left:12%;top:6%;width:78%;height:78%}
.evt .club{font-family:var(--f-ui);font-weight:500;color:var(--muted)}
@media (max-width:819px){ .evt{height:36px} .evt-in{font-size:12px;height:36px} }

/* =====================================================================
   THE STREAM: the last 60 minutes (kit/stream.js draws the canvas)
   ===================================================================== */
.stream{position:relative;min-height:160px;height:100%}
.stream canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.stream canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nowtxt{position:absolute;right:calc(var(--st-pad,48px) + 2px);top:calc(var(--hz,50%) + 32px);font:500 16px/1.2 var(--f-ui);color:var(--ink);white-space:nowrap;opacity:0;transition:opacity 300ms var(--e-in);pointer-events:none;background:var(--bg);padding:4px 0 4px 8px}
.nowtxt.on{opacity:1}
.mtag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--ink);
  font:400 12px/1 var(--f-mono);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;opacity:0;transition:opacity var(--d-micro) var(--e-in)}
.mtag.on{opacity:1}
.mtag .mu{color:var(--muted)}
.stream.compact .nowtxt{font-size:14px;top:calc(var(--hz,50%) + 28px)}

/* =====================================================================
   FIELDS: a box you type into. Label above, one line of message below.
   <label class="fld"><span class="fld-l">Email</span><span class="fld-box"><input></span><span class="fld-msg"></span></label>
   ===================================================================== */
.fld{display:block;min-width:0}
.fld-l{display:block;font:600 14px/1.2 var(--f-ui);color:var(--ink);margin-bottom:8px}
.fld-box{position:relative;display:flex;align-items:center;min-height:56px;box-shadow:inset 0 0 0 1px var(--ink);padding:0 14px;background:var(--bg);border-radius:0;transition:box-shadow var(--d-micro) var(--e-in)}
.fld-box:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.fld-box input,.fld-box textarea,.fld-box select{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 16px/1.3 var(--f-ui);color:var(--ink);height:54px;padding:0 2px;-webkit-appearance:none;appearance:none}
.fld-box textarea{height:auto;min-height:112px;padding:14px 2px;resize:vertical;line-height:1.45}
.fld-box select{cursor:pointer;padding-right:24px}
.fld-box.sel::after{content:'';position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.fld-box input::placeholder,.fld-box textarea::placeholder{color:var(--ink-35)}
.fld--mono .fld-box input{font-family:var(--f-mono)}
.fld-box .pre{font:400 16px/1 var(--f-mono);color:var(--muted);white-space:nowrap}
.fld-box .suf{font:400 14px/1 var(--f-mono);color:var(--muted);white-space:nowrap;margin-left:8px}
/* the status box at the end of a field: hollow, tracing while it checks, ticked when it's good, red pen when it isn't */
.fld-box .st{position:relative;width:24px;height:24px;flex:none;margin-left:10px}
.fld-box .st .box{position:absolute;inset:0;box-shadow:inset 0 0 0 1.5px var(--ink-35)}
.fld-box .st svg.trace{position:absolute;inset:0;width:100%;height:100%;opacity:0;overflow:visible}
.fld-box .st svg.trace rect{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-dasharray:.28 .72;animation:cc-trace .9s linear infinite}
.fld-box .st.loading svg.trace{opacity:1}
.fld-box .st.ok .box{background:var(--accent);box-shadow:none}
.fld-box .st .tk{left:-10%;top:-26%;width:130%;height:130%}
.fld-msg{display:block;min-height:22px;margin-top:8px;font:500 14px/22px var(--f-ui);color:var(--muted)}
.fld-msg:empty{min-height:0;margin-top:0}
.fld.err .fld-box{box-shadow:inset 0 0 0 1px var(--danger);animation:cc-shake .32s var(--e-in)}
.fld.err .fld-msg{color:var(--danger)}
.fld.good .fld-msg{color:var(--ink)}
.fld.dis .fld-box,.fld-box:has(input:disabled){box-shadow:inset 0 0 0 1px var(--line);background:var(--surface)}
.fld.dis .fld-box input,.fld-box input:disabled{color:var(--muted);cursor:not-allowed}
.fld-hint{font:500 14px/1.4 var(--f-ui);color:var(--muted);margin-top:8px}
.form{display:grid;gap:20px}

/* ---------- chips: small choices ---------- */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;font:400 14px/1 var(--f-mono);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-ctl);background:var(--bg);white-space:nowrap;transition:box-shadow var(--d-micro) var(--e-in),transform var(--d-press) var(--e-in),background-color var(--d-micro) var(--e-in)}
.chip:active{transform:scale(.96)}
.chip.on,.chip[aria-pressed="true"],.chip[aria-checked="true"]{box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:400}
.chip.on::before,.chip[aria-pressed="true"]::before,.chip[aria-checked="true"]::before{content:'';width:8px;height:8px;background:var(--accent)}
.chip--ui{font-family:var(--f-ui);font-weight:600}

/* ---------- the real checkbox (forms: consent, opt-ins) ---------- */
.ck{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;cursor:pointer;font:500 16px/1.35 var(--f-ui);color:var(--ink)}
.ck input{position:absolute;opacity:0;width:1px;height:1px}
.ck-box{position:relative;flex:none;width:22px;height:22px;margin-top:-1px;box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--box);transition:background-color var(--d-micro) var(--e-in),box-shadow var(--d-micro) var(--e-in),transform var(--d-press) var(--e-in)}
.ck:active .ck-box{transform:scale(.9)}
.ck input:checked + .ck-box{background:var(--accent);box-shadow:none}
.ck-box .tk{left:-8%;top:-24%;width:124%;height:124%}
.ck input:focus-visible + .ck-box{outline:2px solid var(--accent);outline-offset:3px}
.ck input:disabled + .ck-box{box-shadow:none;outline:1.5px dashed var(--ink-35);outline-offset:-1.5px}
.ck.err .ck-box{box-shadow:inset 0 0 0 1.5px var(--danger);animation:cc-shake .32s var(--e-in)}
.ck small{display:block;font:500 14px/1.4 var(--f-ui);color:var(--muted);margin-top:2px}

/* a switch is a checkbox too: <button class="swi" role="switch" aria-checked="false"><span class="swi-ck"></span>Room tone</button> */
.swi{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 14px/1 var(--f-ui);color:var(--ink)}
.swi-ck{position:relative;width:18px;height:18px;flex:none;box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--box);transition:transform var(--d-press) var(--e-in),background-color var(--d-micro) var(--e-in)}
.swi:active .swi-ck{transform:scale(.84)}
.swi[aria-checked="true"] .swi-ck{background:var(--accent);box-shadow:none}
.swi-ck .tk{left:-8%;top:-24%;width:124%;height:124%}

/* =====================================================================
   TILES: captcha choices (drops, domains, crew)
   ===================================================================== */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tile{position:relative;display:block;width:100%;padding:0;border:0;aspect-ratio:1;background:var(--surface);overflow:visible;cursor:pointer;border-radius:0;color:var(--ink);text-align:left}
.tile .ti{position:absolute;inset:0;transition:transform var(--d-std) var(--spring),box-shadow 160ms var(--e-in);background-size:cover;background-position:center}
.tile:active .ti{transform:scale(.93)}
.tile.sel .ti,.tile[aria-selected="true"] .ti{transform:scale(.9)}
.tile .ti::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--accent);opacity:0;z-index:1;transition:opacity 160ms var(--e-in)}
.tile.sel .ti::after,.tile[aria-selected="true"] .ti::after{opacity:1}
.tile .cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--sheet);text-align:left;pointer-events:none;overflow:hidden}
.tile .cap b{font:600 12px/1.15 var(--f-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .cap span{font:400 12px/1.15 var(--f-mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .bdg{position:absolute;left:-6px;top:-6px;width:26px;height:26px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform 240ms var(--spring);z-index:2}
.tile .bdg .tk{left:12%;top:8%;width:76%;height:76%}
.tile.sel .bdg,.tile[aria-selected="true"] .bdg{transform:scale(1)}
.tile.txt .ti{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;justify-content:center;font:400 14px/1.2 var(--f-mono);color:var(--ink);text-align:center;padding:8px;overflow:hidden;overflow-wrap:anywhere}
.tile.dis{cursor:not-allowed}
.tile.dis .ti{opacity:.45}
.tiles.wide .tile{aspect-ratio:1.6}

/* =====================================================================
   ROWS: tables that aren't tables. A ledger of checkbox lines.
   <ul class="rows"><li class="row ok"><i class="row-box"></i><span class="row-main"><b class="row-t">PayPal</b><span class="row-s">Mon 27 Oct</span></span><span class="row-n">$41.20</span></li></ul>
   ===================================================================== */
.rows{display:flex;flex-direction:column}
.row{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 0;box-shadow:inset 0 -1px 0 var(--line);color:var(--ink);text-decoration:none}
.rows>.row:first-child{box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
a.row,button.row{width:100%;cursor:pointer;transition:background-color var(--d-micro) var(--e-in)}
a.row:active,button.row:active{transform:translateY(1px)}
.row-box{position:relative;flex:none;width:16px;height:16px;box-shadow:inset 0 0 0 1.5px var(--ink-35)}
.row.ok .row-box{background:var(--accent);box-shadow:none}
.row.pend .row-box{box-shadow:inset 0 0 0 1.5px var(--ink)}
.row.bad .row-box{box-shadow:inset 0 0 0 1.5px var(--danger)}
.row.off .row-box{box-shadow:none;outline:1.5px dashed var(--ink-35);outline-offset:-1.5px}
.row-box .tk{left:-8%;top:-24%;width:124%;height:124%}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.row-t{font:600 16px/1.2 var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-s{font:400 12px/1.2 var(--f-mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-n{flex:none;font:400 16px/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.row-n.acc{color:var(--accent)}
.row-n small{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.row.land{animation:cc-stamp 340ms var(--e-in)}
/* key / value lines */
.kv{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:44px;padding:10px 0;box-shadow:inset 0 -1px 0 var(--line)}
.kv dt,.kv .k{font:500 14px/1.3 var(--f-ui);color:var(--muted)}
.kv dd,.kv .v{font:400 16px/1.2 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}

/* a checklist: steps that tick as they happen (Requested / Approved / Sent) */
.checklist{display:flex;flex-direction:column;gap:12px}
.checklist li{display:flex;align-items:center;gap:12px;font:600 16px/1.2 var(--f-ui);color:var(--muted);transition:color 200ms var(--e-in)}
.checklist i{position:relative;flex:none;width:20px;height:20px;box-shadow:inset 0 0 0 1.5px var(--ink-35);transition:background-color 160ms var(--e-in)}
.checklist li.ok{color:var(--ink)}
.checklist li.ok i{background:var(--accent);box-shadow:none}
.checklist li.now i{box-shadow:inset 0 0 0 1.5px var(--ink)}
.checklist li.now{color:var(--ink)}
.checklist i .tk{left:-8%;top:-24%;width:124%;height:124%}

/* =====================================================================
   SKELETONS in the checkbox language: hollow boxes and hairline bars that breathe, never a spinner
   ===================================================================== */
.skel{display:flex;flex-direction:column;gap:12px}
.sk-box,.sk-line,.sk-num i{--b0:.35;--b1:.9;animation:cc-breath 1.6s var(--e-breath) infinite}
.sk-box{display:inline-block;flex:none;width:16px;height:16px;box-shadow:inset 0 0 0 1.5px var(--ink-16)}
.sk-line{display:block;height:12px;background:var(--ink-08);width:var(--w,60%)}
.sk-line.t{height:16px}
.sk-row{display:flex;align-items:center;gap:14px;min-height:56px;box-shadow:inset 0 -1px 0 var(--line)}
.sk-row .sk-col{flex:1;display:flex;flex-direction:column;gap:8px}
.sk-row .sk-n{width:64px;height:14px;background:var(--ink-08)}
.sk-num{display:inline-flex;gap:6px;height:var(--h,48px);align-items:stretch}
.sk-num i{display:block;width:calc(var(--h,48px) * .62);box-shadow:inset 0 0 0 1.5px var(--ink-16)}
.sk-num i:nth-child(2){animation-delay:.12s}.sk-num i:nth-child(3){animation-delay:.24s}.sk-num i:nth-child(4){animation-delay:.36s}.sk-num i:nth-child(5){animation-delay:.48s}
.sk-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.sk-tiles i{aspect-ratio:1;box-shadow:inset 0 0 0 1px var(--ink-12);--b0:.4;--b1:1;animation:cc-breath 1.6s var(--e-breath) infinite}
.sk-tiles i:nth-child(3n+2){animation-delay:.1s}.sk-tiles i:nth-child(3n){animation-delay:.2s}

/* =====================================================================
   EMPTY: an invitation with the one action that fills it
   ===================================================================== */
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:32px 0}
.empty-box{position:relative;width:48px;height:48px;outline:1.5px dashed var(--ink-35);outline-offset:-1.5px}
.empty-box.breath{animation:cc-breath var(--d-breath) var(--e-breath) infinite;--b0:.5;--b1:1}
.empty-t{font:400 var(--t-20)/1.2 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.empty-s{font:500 14px/1.4 var(--f-ui);color:var(--muted);max-width:40ch}
.empty--center{align-items:center;text-align:center;margin:auto}
/* error: the same shape, with the red pen through the box */
.empty.err .empty-box{outline-color:var(--danger)}
.empty-box .tk{left:-8%;top:-24%;width:124%;height:124%}

/* =====================================================================
   TOAST: one line at a time, above the dock (kit/toast.js). Only for answers with no place of their own.
   ===================================================================== */
.toast{position:fixed;left:50%;bottom:calc(20px + var(--dock-h) + 16px);z-index:var(--z-toast);display:flex;align-items:center;gap:12px;max-width:min(520px,calc(100vw - 32px));min-height:48px;padding:12px 16px 12px 14px;
  background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font:600 14px/1.3 var(--f-ui);transform:translate(-50%,12px);opacity:0;transition:opacity 180ms var(--e-in),transform var(--d-std) var(--e-in);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-box{position:relative;flex:none;width:18px;height:18px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.toast.ok .toast-box{background:var(--accent);box-shadow:none}
.toast.err{box-shadow:inset 0 0 0 1px var(--danger)}
.toast.err .toast-box{box-shadow:inset 0 0 0 1.5px var(--danger)}
.toast-box .tk{left:-8%;top:-24%;width:124%;height:124%}
.toast .lnk{padding:6px 2px;font-size:14px;margin-left:4px}
@media (max-width:819px){ .toast{bottom:calc(var(--dock-h) + var(--safe-b) + 12px)} }

/* =====================================================================
   SEAL: N hand ticks on green, one per proof (tiers, verified receipts)
   ===================================================================== */
.seal{position:relative;display:inline-block;width:36px;height:36px;background:var(--accent);flex:none}

/* =====================================================================
   FX: flying cells, rank-up (kit/celebrate.js, kit/motion.js)
   ===================================================================== */
.fx{position:fixed;inset:0;z-index:var(--z-fx);pointer-events:none}
.fly{position:fixed;left:0;top:0;background:var(--accent);will-change:transform;box-shadow:0 0 12px var(--cv-glow)}
.fly.hollow{background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 10px var(--cv-glow)}
.rk{position:fixed;inset:0;pointer-events:auto}
.rk-g{position:absolute;background:var(--bg);transition:all 260ms var(--e-in)}
.rk-t{position:absolute;box-shadow:inset 0 0 0 0 var(--bg);transition:box-shadow 240ms var(--e-in)}
.rk-t.on{box-shadow:inset 0 0 0 clamp(10px,2.4vw,26px) var(--bg),inset 0 0 0 calc(clamp(10px,2.4vw,26px) + 3px) var(--accent)}
.rk-t .bdg{position:absolute;left:clamp(4px,1.6vw,18px);top:clamp(4px,1.6vw,18px);width:30px;height:30px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform 240ms var(--spring)}
.rk-t.on .bdg{transform:scale(1)}
.rk-t .bdg .tk{left:12%;top:8%;width:76%;height:76%}
.rk-stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.4);opacity:0;z-index:2;text-align:center;transition:transform 260ms var(--e-in),opacity 160ms var(--e-in)}
.rk-stamp.on{transform:translate(-50%,-50%) scale(1);opacity:1}
.rk-stamp .big{position:relative;z-index:0;display:inline-block;white-space:nowrap;font:400 clamp(40px,10vw,128px)/1 var(--f-display);letter-spacing:-.04em;color:var(--hot-ink);padding:.06em .12em 0}
.rk-stamp .big .hl{top:4%;bottom:-2%}
.rk-stamp .sub{display:inline-block;margin-top:14px;font:600 16px/1 var(--f-ui);color:var(--ink);background:var(--bg);padding:8px 10px;box-shadow:inset 0 0 0 1px var(--ink)}
.rk.out{opacity:0;transition:opacity 260ms var(--e-out)}

/* =====================================================================
   HOVER: only where a pointer hovers, so a tap never leaves a control looking selected
   ===================================================================== */
@media (hover:hover){
  .cb:hover{background:var(--accent-hover)}
  .cb:hover .cb-box{box-shadow:inset 0 0 0 3px var(--accent-ink)}
  .cb.done:hover{background:var(--accent)}
  .cb--line:hover{background:var(--bg);box-shadow:inset 0 0 0 1px var(--ink)}
  .cb--line:hover .cb-box{box-shadow:inset 0 0 0 2.5px var(--ink)}
  .cb--line.done:hover .cb-box{box-shadow:none}
  .cb[disabled]:hover,.cb.dis:hover,.cb[aria-disabled="true"]:not(.done):hover{background:var(--surface)}
  .cb[disabled]:hover .cb-box,.cb.dis:hover .cb-box{box-shadow:none}
  .lnk:hover::after{transform:scaleX(1)}
  .ib:hover{box-shadow:inset 0 0 0 1px var(--ink)}
  .dk:hover .dk-l{color:var(--ink)}
  .dk:hover:not(.on) .dk-ic i.p{background:var(--ink)}
  .dk-sw:hover .dk-ck{box-shadow:inset 0 0 0 2.5px var(--ink)}
  .dk-sw[aria-checked="true"]:hover .dk-ck{box-shadow:none}
  .sh-steps i[data-back]:hover{box-shadow:inset 0 0 0 2.5px var(--accent-ink)}
  .sh-x:hover{box-shadow:inset 0 0 0 1.5px var(--accent-ink)}
  .tile:hover .ti{transform:scale(.97)}
  .tile.txt:hover .ti{box-shadow:inset 0 0 0 1px var(--ink)}
  .tile.dis:hover .ti{transform:none}
  .chip:hover{box-shadow:inset 0 0 0 1px var(--ink)}
  .ck:hover .ck-box{box-shadow:inset 0 0 0 2.5px var(--ink)}
  .ck:hover input:checked + .ck-box{box-shadow:none}
  .swi:hover .swi-ck{box-shadow:inset 0 0 0 2.5px var(--ink)}
  .swi[aria-checked="true"]:hover .swi-ck{box-shadow:none}
  a.row:hover,button.row:hover{background:var(--surface)}
  .fld-box:hover:not(:focus-within){box-shadow:inset 0 0 0 1.5px var(--ink)}
  .fld.err .fld-box:hover:not(:focus-within){box-shadow:inset 0 0 0 1.5px var(--danger)}
}