:root{--bg:#0e0e0d;--panel:#171715;--line:#2b2b28;--line2:#3a3a36;--ink:#f2f1ed;
 --dim:#9b9a93;--dimmer:#6d6c66;--f:'Archivo','Helvetica Neue',Arial,sans-serif;
 --m:'IBM Plex Mono',ui-monospace,Menlo,monospace;}
*{margin:0;padding:0;box-sizing:border-box;}
/* label{display:block} below beats the browser's own [hidden] rule, which is how an
   Event code box nobody needs ends up on screen. This puts [hidden] back on top. */
[hidden]{display:none!important;}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.5;
 padding:0 18px;padding-block:0 60px;-webkit-font-smoothing:antialiased;}
.wrap{max-width:560px;margin:0 auto;}
.mono{font-family:var(--m);font-variant-numeric:tabular-nums;}
.lab{font-family:var(--m);font-size:10px;font-weight:600;text-transform:uppercase;
 letter-spacing:.26em;color:var(--dimmer);display:block;margin-bottom:8px;}
header{padding-block:34px 0;display:flex;flex-direction:column;gap:10px;}
h1{font-size:26px;font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:1.05;}
.sub{font-size:14px;color:var(--dim);}
hr{border:0;border-top:2px solid var(--ink);margin:18px 0 0;}
.card{background:var(--panel);border:1px solid var(--line);padding:20px;margin-top:22px;}
label{display:block;margin-bottom:16px;}
select,input{width:100%;background:#0e0e0d;border:1px solid var(--line2);color:var(--ink);
 font-family:var(--m);font-size:17px;padding:13px 12px;border-radius:0;-webkit-appearance:none;appearance:none;}
select:focus,input:focus{outline:2px solid var(--ink);outline-offset:1px;}
.row2{display:flex;gap:12px;}
.row2>*{flex:1;}
button{width:100%;background:var(--ink);color:#141413;border:0;font-family:var(--m);
 font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:16px;cursor:pointer;}
button:disabled{opacity:.45;cursor:default;}
button.ghost{background:transparent;color:var(--dim);border:1px solid var(--line2);}
.seg{display:flex;gap:0;margin-bottom:16px;border:1px solid var(--line2);}
.seg button{background:transparent;color:var(--dim);border:0;padding:12px 8px;letter-spacing:.14em;}
.seg button[aria-pressed="true"]{background:var(--ink);color:#141413;}
.msg{margin-top:16px;padding:13px 14px;font-size:14px;border-left:3px solid var(--line2);background:#141412;color:var(--dim);}
.msg.ok{border-color:var(--ink);color:var(--ink);}
.msg.bad{border-color:#8a8983;color:#e6e5e0;}
.note{font-size:13px;color:var(--dimmer);line-height:1.5;margin-top:14px;}
.list{margin-top:26px;border-top:1px solid var(--line);}
.item{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;}
.item b{color:var(--ink);font-weight:600;}
.item .r{font-family:var(--m);color:var(--dim);white-space:nowrap;}
.back{display:inline-block;margin-top:26px;color:var(--dim);font-size:13px;text-decoration:none;border-bottom:1px solid var(--line2);}
.back:hover{color:var(--ink);}
.big{font-family:var(--m);font-size:30px;font-weight:600;letter-spacing:-.02em;}

/* current-total readout + the confirm step on the meters page */
.now{background:#0e0e0d;border:1px solid var(--line2);padding:16px 16px 14px;margin-bottom:18px;}
.now .lab{margin-bottom:6px;}
.now .n{font-family:var(--m);font-size:38px;font-weight:600;letter-spacing:-.02em;
 line-height:1;font-variant-numeric:tabular-nums;display:block;}
.now .n small{font-size:13px;letter-spacing:.18em;color:var(--dimmer);margin-left:8px;
 text-transform:uppercase;font-weight:600;}
.now .when{font-size:12px;color:var(--dimmer);margin-top:8px;}
.check{border:1px solid var(--ink);background:#141412;padding:18px;margin-top:18px;}
.check .lab{color:var(--dim);}
.check .arrow{font-family:var(--m);font-size:22px;font-weight:600;line-height:1.35;
 font-variant-numeric:tabular-nums;}
.check .arrow s{text-decoration:none;color:var(--dimmer);}
.check p{font-size:14px;color:var(--dim);margin-top:10px;}
.check .warn{color:var(--ink);font-weight:600;}
.check .row2{margin-top:16px;}