/* Pencil "Product Data Grid" · Terminal Green + RevRadar brand. Only #000 #FFF #333 #00FF00. Radius 0. No shadows. No opacity. 1px lines; focus = own border 2px. 8px grid. */
/* Webfonts get private family names so a locally installed Geist can never mask a failed load. */
@font-face{font-family:"RR Geist";src:url(fonts/Geist.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"RR Geist Mono";src:url(fonts/GeistMono.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
:root{--surface-primary:#FFFFFF;--surface-inverse:#000000;--foreground-primary:#000000;--foreground-secondary:#333333;--foreground-inverse:#FFFFFF;--border-primary:#000000;--accent-primary:#00FF00;--rounded-none:0px;
--font-sans:"RR Geist",sans-serif;--font-mono:"RR Geist Mono",monospace;--font-headings:var(--font-sans);--font-body:var(--font-sans);--font-captions:var(--font-sans);--font-data:var(--font-mono);
--line:1px;--line-focus:2px;--border-hairline:var(--line) solid var(--border-primary)}
*{box-sizing:border-box;margin:0;padding:0;border-radius:var(--rounded-none);box-shadow:none}
html,body{background:var(--surface-primary);color:var(--foreground-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button,input,a{font-family:inherit;-webkit-tap-highlight-color:transparent}
:focus{outline:0}
.wrap{max-width:560px;margin:0 auto;min-height:100vh;border-left:var(--border-hairline);border-right:var(--border-hairline)}
.zone{padding:32px 24px}
.pb1{padding-bottom:8px}.pt3{padding-top:24px}.px{padding:0 24px}.mt3{margin-top:24px}
.inv{background:var(--surface-inverse);color:var(--foreground-inverse)}
.acc{background:var(--accent-primary);color:var(--foreground-primary)}
.cap{font:500 12px/16px var(--font-captions);letter-spacing:.06em;text-transform:uppercase}
.mono{font-family:var(--font-data)}
h1{font:700 44px/48px var(--font-headings);letter-spacing:-.03em;margin-top:16px}
h2{font:700 28px/32px var(--font-headings);letter-spacing:-.02em;margin-top:8px}
p{font:400 16px/24px var(--font-body)}
.lead{margin-top:16px;color:var(--foreground-inverse)}
.note{font:400 13px/16px var(--font-body);color:var(--foreground-secondary);margin-top:8px}
.ctr{text-align:center;margin-top:16px}
/* header */
.hd{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 24px;border-bottom:var(--border-hairline);background:var(--surface-primary)}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:48px;color:var(--foreground-primary);text-decoration:none;font:700 20px/24px var(--font-mono);letter-spacing:-.02em;border-bottom:var(--line-focus) solid transparent;border-top:var(--line-focus) solid transparent}
.brand:focus-visible{border-bottom-color:var(--border-primary)}
.mk{display:block;flex:none;width:24px;height:24px}
.hd-r{font:500 12px/16px var(--font-captions);letter-spacing:.06em;text-transform:uppercase;color:var(--foreground-secondary)}
/* stats */
.grid{display:grid;border-top:var(--border-hairline)}
.grid>div{padding:16px;border-left:var(--border-hairline)}
.grid>div:first-child{border-left:0}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g3>div{overflow-wrap:anywhere}
.big{font:700 26px/32px var(--font-data);letter-spacing:-.03em;margin-top:8px}
.small{font-size:12px;line-height:16px;margin-top:8px}
.huge{font:700 56px/64px var(--font-data);letter-spacing:-.02em;word-break:break-all;margin-top:8px}
.meta{font-size:14px;line-height:16px;margin-top:8px}
/* buttons: border + padding is constant, so focus (2px border) never shifts anything */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:15px 15px;border:var(--line) solid var(--border-primary);background:var(--surface-inverse);color:var(--foreground-inverse);font:600 17px/24px var(--font-body);text-align:center;cursor:pointer;text-decoration:none;-webkit-appearance:none;appearance:none}
.btn:focus-visible{border-width:var(--line-focus);padding:14px;border-color:var(--accent-primary)}
.btn.alt{background:var(--surface-primary);color:var(--foreground-primary)}
.btn.grn{background:var(--accent-primary);color:var(--foreground-primary)}
.btn.alt:focus-visible,.btn.grn:focus-visible{border-color:var(--border-primary)}
.btn+.btn{margin-top:8px}
/* fields */
label{display:block}
label .cap{display:block}
.field{display:flex;align-items:center;min-height:56px;margin-top:8px;border:var(--line) solid var(--border-primary);padding:1px;background:var(--surface-primary)}
.field:focus-within,.field.bad{border-width:var(--line-focus);padding:0}
.field span{font:600 22px/24px var(--font-data);padding:0 0 0 16px}
.field input{flex:1;min-width:0;height:52px;border:0;outline:0;background:transparent;font:600 28px/32px var(--font-data);padding:0 16px 0 8px;color:var(--foreground-primary);-webkit-appearance:none;appearance:none}
.field input::placeholder{font:400 16px/24px var(--font-body);color:var(--foreground-secondary);opacity:1}
.field input::-webkit-input-placeholder{font:400 16px/24px var(--font-body);color:var(--foreground-secondary);opacity:1}
/* messages: error = solid black block attached under the field; read-back = plain #333 mono */
.msg:empty{display:none}
.msg{font:500 14px/16px var(--font-body);padding:8px 16px;background:var(--surface-inverse);color:var(--foreground-inverse)}
.msg.read{background:var(--surface-primary);color:var(--foreground-secondary);font:400 13px/16px var(--font-data);padding:8px 0 0}
#err{margin-top:24px}#err3{margin-bottom:16px}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{min-height:48px;min-width:48px;text-align:center;border:var(--line) solid var(--border-primary);padding:7px 11px;background:var(--surface-primary);font:500 13px/16px var(--font-data);color:var(--foreground-primary);cursor:pointer;-webkit-appearance:none;appearance:none}
.chip:focus-visible{border-width:var(--line-focus);padding:6px 10px}
.chip.on{background:var(--surface-inverse);color:var(--foreground-inverse)}
.chip.on:focus-visible{border-color:var(--accent-primary)}
/* bills */
.quip{font:500 15px/24px var(--font-body);min-height:48px}
.meter{position:sticky;top:0;z-index:2}
.bill{border-top:var(--border-hairline);padding:16px 0}
.bill:last-child{border-bottom:var(--border-hairline)}
.bill .nm{font:600 16px/24px var(--font-body)}
.bill .hint{font:400 13px/16px var(--font-body);color:var(--foreground-secondary);margin-top:0}
.bill .field input{font-size:24px}
.bill .chips{margin-top:8px}
/* compare table */
.row2{display:grid;grid-template-columns:minmax(0,1fr) 112px;border-top:var(--border-hairline)}
.row2:last-child{border-bottom:var(--border-hairline)}
.row2>div{padding:8px}
.row2>div:first-child{padding-left:8px}
.row2>div+div{border-left:var(--border-hairline);text-align:right;font:700 18px/24px var(--font-data);display:flex;align-items:center;justify-content:flex-end}
.row2 .nm{font:600 15px/24px var(--font-body)}
.row2 .nm small{display:block;font:400 12px/16px var(--font-body)}
.row2.you{background:var(--surface-inverse);color:var(--foreground-inverse)}
.row2.you>div+div{border-left-color:var(--foreground-inverse)}
canvas#card{width:100%;height:auto;display:block;border:0}
.hidden{display:none!important}
/* brand line + footer */
.rr{display:flex;align-items:center;gap:8px;min-height:56px;padding:15px 23px;border-top:var(--border-hairline);color:var(--foreground-primary);text-decoration:none;font:400 14px/24px var(--font-body);border-left:var(--line) solid transparent;border-right:var(--line) solid transparent;border-bottom:var(--line) solid transparent}
.rr .mk{width:16px;height:16px}
.rr b{font:700 14px/24px var(--font-mono)}
.rr-t{display:flex;flex-direction:column}.rr-s{font:700 14px/24px var(--font-mono);color:var(--foreground-primary)}
.rr:focus-visible{border:var(--line-focus) solid var(--border-primary);padding:14px 22px}
.foot{border-top:var(--border-hairline);padding:16px 24px 32px;color:var(--foreground-secondary)}
.foot p{font:400 13px/24px var(--font-body);color:var(--foreground-secondary)}
.links{display:flex;flex-direction:column;margin-top:16px}
.links .cap{color:var(--foreground-primary);padding:16px 0 8px}
.links a{display:flex;align-items:center;min-height:48px;border-top:var(--border-hairline);color:var(--foreground-primary);font:500 15px/24px var(--font-body);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.links a:last-child{border-bottom:var(--border-hairline)}
.links a:focus-visible{text-decoration-thickness:2px}

/* VAT slider. Square thumb, 1px lines, focus = the track's own border goes 2px. Fill is a hard-stop #00FF00, no opacity. */
.vatbox{display:block}
.vatbox .cap{display:block}
.vatread{font:700 26px/32px var(--font-data);letter-spacing:-.03em;margin-top:8px}
.vr{--p:0%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:40px;margin:8px 0 0;padding:0;background:var(--surface-primary);border:0;border-radius:0;cursor:pointer}
.vr:focus{outline:0}
.vr::-webkit-slider-runnable-track{box-sizing:border-box;height:16px;border:var(--line) solid var(--border-primary);border-radius:0;background:linear-gradient(to right,var(--accent-primary) 0,var(--accent-primary) var(--p),var(--surface-primary) var(--p),var(--surface-primary) 100%)}
.vr::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:24px;height:32px;margin-top:-9px;border:var(--line) solid var(--border-primary);border-radius:0;background:var(--surface-inverse);box-shadow:none}
.vr:focus-visible::-webkit-slider-runnable-track{border-width:var(--line-focus)}
.vr:focus-visible::-webkit-slider-thumb{margin-top:-10px}
.vr::-moz-range-track{box-sizing:border-box;height:16px;border:var(--line) solid var(--border-primary);border-radius:0;background:var(--surface-primary)}
.vr::-moz-range-progress{height:14px;background:var(--accent-primary);border-radius:0}
.vr::-moz-range-thumb{box-sizing:border-box;width:24px;height:32px;border:var(--line) solid var(--border-primary);border-radius:0;background:var(--surface-inverse);box-shadow:none}
.vr:focus-visible::-moz-range-track{border-width:var(--line-focus)}
.vr::-moz-focus-outer{border:0}
.vatscale{display:flex;justify-content:space-between;font-size:12px;line-height:16px;margin-top:8px}

/* RevRadar mark, same as revradar.fyi (tokenmargin app/globals.css): green square, 24° black beam, pivot at centre, 24 hard steps / 4 s.
   Always spinning (.spin.live); paused off-screen or in a hidden tab (mark-anim.js); static at 30° with prefers-reduced-motion. */
.mark{position:relative;display:inline-block;flex:none;background:#00FF00;overflow:hidden;vertical-align:middle}
.mark>i{position:absolute;left:-100%;top:-100%;width:300%;height:300%;background:#000;clip-path:polygon(50% 50%,39.6% 1.09%,60.4% 1.09%);transform:rotate(30deg);will-change:transform}
.mark.spin>i,.brand:hover .mark>i{animation:mark-spin 4s steps(24,end) infinite}
.mark.live.off>i,.tab-hidden .mark.live>i{animation-play-state:paused}
@keyframes mark-spin{from{transform:rotate(30deg)}to{transform:rotate(390deg)}}
@media (prefers-reduced-motion:reduce){.mark>i,.mark.spin>i,.brand:hover .mark>i{animation:none}}