/* Balemark — the scale. Stencil / cut-out family: a dark ground, one amber accent, letters with bridges in them,
   cards cut at the corners like a card stencil, hatch on the bales like pressed hay. Written for this drop. */
:root{
  --ground:#15140F; --board:#1E1C16; --board2:#262319; --cut:#3A3527; --faint:#9A9282; --ink:#E7E1D3;
  --amber:#FFAB1F; --amberdim:#B87A12; --amberglow:rgba(255,171,31,.28);
  --disp:"Saira Stencil One",Impact,sans-serif; --body:"Barlow",system-ui,sans-serif; --fig:"Chivo Mono",ui-monospace,monospace;
  --strip:100px; --cap:1180px;
}
*{box-sizing:border-box}
html{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;padding-top:var(--strip);min-height:100vh;background:
  radial-gradient(1200px 500px at 50% -200px,rgba(255,171,31,.06),transparent 70%),var(--ground)}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
em{font-style:normal}
.fig{font-family:var(--fig);font-variant-numeric:tabular-nums}

/* ---- the tag (fixed chrome) ---- */
#tagstrip{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(21,20,15,.94);backdrop-filter:blur(8px);
  border-bottom:2px dashed var(--cut);display:grid;grid-template-columns:1fr auto;grid-template-areas:"mark holder" "ca ca";
  gap:8px 10px;align-items:center;padding:10px 12px 10px}
.tsmark{grid-area:mark;display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.tsmark img{width:30px;height:30px;border-radius:6px;clip-path:polygon(0 15%,15% 0,100% 0,100% 85%,85% 100%,0 100%)}
.tsmark b{font-family:var(--disp);font-weight:400;font-size:22px;letter-spacing:.06em;color:var(--amber);text-transform:uppercase;line-height:1}
.tsholder{grid-area:holder;justify-self:end;font-family:var(--disp);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 12px;border:1.5px solid var(--amber);color:var(--amber);clip-path:polygon(0 25%,10% 0,100% 0,100% 75%,90% 100%,0 100%)}
.tsholder[data-on]{border-color:var(--cut);color:var(--ink);font-family:var(--fig);text-transform:none;letter-spacing:0}
.tsca{grid-area:ca;display:flex;align-items:center;gap:6px;min-width:0;background:var(--board);padding:6px 8px;
  border:1px solid var(--cut);clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px))}
.tslbl{font-family:var(--disp);font-size:12px;color:var(--amber);letter-spacing:.1em}
.tsaddr{flex:1;min-width:0;font-family:var(--fig);font-size:11px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.tsaddr[data-dark]{color:var(--faint);font-family:var(--body);font-size:13px;user-select:none}
.tscopy{font-family:var(--disp);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;background:var(--amber);color:var(--ground);
  clip-path:polygon(0 0,100% 0,100% 70%,85% 100%,0 100%)}
.tscopy[data-done]{background:var(--ink)}
.tsgmgn{font-family:var(--fig);font-size:11px;color:var(--faint);text-decoration:none;padding:4px 6px;border:1px solid var(--cut);display:none}
.tsgmgn[hidden]{display:none}

/* ---- floor ---- */
#floor{max-width:var(--cap);margin:0 auto;padding:14px 12px 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;
  grid-template-areas:"tabs" "rack" "bench" "tape" "stub"}
.tabs{grid-area:tabs;display:flex;gap:4px;flex-wrap:wrap}
.tabs a{font-family:var(--disp);font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--faint);
  padding:7px 11px;border:1px dashed var(--cut)}
.tabs a[data-on]{color:var(--ground);background:var(--amber);border-color:var(--amber)}
.tabhide{display:none}
.tabs a.tabhide[data-show]{display:inline-block}

/* ---- the rack of nine bales ---- */
.rack{grid-area:rack;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rackhead{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.rackhead h1{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(24px,6vw,40px);letter-spacing:.02em;line-height:1;text-transform:uppercase}
.rackhead h1 em{color:var(--amber)}
.bell{font-family:var(--fig);font-size:13px;color:var(--faint)}
.bell b{color:var(--amber);font-weight:500}
.bale{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px;aspect-ratio:1/1.05;padding:9px 9px 8px;text-align:left;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,transparent 2px 9px),
    linear-gradient(var(--board2),var(--board));
  border:1.5px solid var(--cut);clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:transform .15s ease,border-color .15s ease}
.bale::after{content:"";position:absolute;left:0;right:0;top:56%;height:5px;background:var(--cut);opacity:.7}
.bale[aria-pressed="true"]{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber),0 0 24px var(--amberglow)}
.bale[data-won]{border-color:var(--amber)}
.bale[data-mine]::before{content:"";position:absolute;right:8px;top:8px;width:8px;height:8px;background:var(--amber);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.bnum{font-family:var(--disp);font-size:12px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;display:flex;justify-content:space-between}
.bnum em{color:var(--ink)}
.bwt{font-family:var(--fig);font-weight:500;font-size:clamp(22px,7vw,40px);line-height:1;color:var(--ink);letter-spacing:-.02em}
.bwt small{font-size:.4em;color:var(--faint);margin-left:3px;font-family:var(--body)}
.bwt[data-sealed]{color:var(--faint);font-family:var(--disp);font-weight:400;font-size:clamp(13px,3.6vw,20px);letter-spacing:.08em;text-transform:uppercase}
.bmeta{display:flex;justify-content:space-between;gap:6px;font-family:var(--fig);font-size:11px;color:var(--faint)}
.bmeta i{font-style:normal}
.bmeta i b{color:var(--amber);font-weight:500}
.btag{display:inline-flex;align-items:center;gap:5px;height:16px;padding:0 6px 0 9px;background:var(--amber);color:var(--ground);font-family:var(--disp);font-size:9px;letter-spacing:.1em;
  clip-path:polygon(0 50%,6px 0,100% 0,100% 100%,6px 100%);box-shadow:0 0 14px var(--amberglow)}
.btag::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ground);margin-right:1px}

/* ---- the bench (the tool) ---- */
.bench{grid-area:bench;background:var(--board);border:1.5px solid var(--cut);padding:14px 14px 16px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.bhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.bhead h2{margin:0;font-family:var(--disp);font-weight:400;font-size:26px;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.bhead h2 em{color:var(--amber)}
.bphase{font-family:var(--fig);font-size:12px;color:var(--faint)}
.bphase b{color:var(--amber);font-weight:500}
.ruler{position:relative;height:64px;margin:6px 0 4px;border-bottom:2px solid var(--cut);
  background:repeating-linear-gradient(90deg,var(--cut) 0 1px,transparent 1px calc(100% / 9))}
.rgap{position:absolute;top:8px;bottom:0;background:var(--amberglow);opacity:.55;border-left:1px dashed var(--amber);border-right:1px dashed var(--amber)}
.rtick{position:absolute;bottom:0;width:2px;height:26px;background:var(--faint);transform:translateX(-1px)}
.rtick[data-mine]{background:var(--ink);height:38px}
.rtick[data-won]{background:var(--amber);height:44px;box-shadow:0 0 10px var(--amberglow)}
.rtick[data-lost]{opacity:.45}
.rtick[data-you]{background:var(--amber);height:50px;width:3px;transform:translateX(-1.5px);opacity:.9}
.rtick[data-you]::after{content:"you";position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:var(--disp);font-size:9px;letter-spacing:.1em;color:var(--amber)}
.rneedle{position:absolute;top:0;bottom:-2px;width:2px;background:var(--amber);transform:translateX(-1px);box-shadow:0 0 12px var(--amber)}
.rneedle::before{content:attr(data-w);position:absolute;top:-2px;left:6px;font-family:var(--fig);font-weight:500;font-size:12px;color:var(--amber);white-space:nowrap}
.rneedle[data-flip]::before{left:auto;right:6px}
.rscale{display:flex;justify-content:space-between;font-family:var(--fig);font-size:11px;color:var(--faint);margin-top:4px}
.rgapnote{font-size:13px;color:var(--faint);margin:6px 0 12px}
.rgapnote b{color:var(--ink);font-family:var(--fig);font-weight:500}
.readout{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 12px;margin-bottom:10px;background:var(--ground);border:1px dashed var(--cut)}
.rdlbl{font-family:var(--disp);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.rddigits{font-family:var(--fig);font-weight:500;font-size:40px;line-height:1;letter-spacing:.14em;color:var(--amber)}
.rddigits[data-empty]{color:var(--cut)}
.rdunit{font-family:var(--disp);font-size:13px;color:var(--faint);letter-spacing:.1em}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.keypad button{font-family:var(--fig);font-weight:500;font-size:22px;padding:12px 0;background:var(--board2);border:1px solid var(--cut);color:var(--ink);
  clip-path:polygon(0 6px,6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)}
.keypad button:active{background:var(--amber);color:var(--ground)}
.keypad button[data-k="del"],.keypad button[data-k="clr"]{font-family:var(--disp);font-size:12px;letter-spacing:.1em;color:var(--faint)}
.stakebox{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center;margin-bottom:12px}
.stakebox label{font-family:var(--disp);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.stakebox input{width:100%;min-width:0;font-family:var(--fig);font-size:18px;padding:9px 10px;background:var(--ground);color:var(--ink);border:1px solid var(--cut);outline:none}
.stakebox input:focus{border-color:var(--amber)}
.chips{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.chips button{font-family:var(--fig);font-size:12px;padding:5px 9px;border:1px dashed var(--cut);color:var(--faint)}
.chips button[data-on]{color:var(--amber);border-color:var(--amber)}
.stamp{width:100%;font-family:var(--disp);font-size:20px;letter-spacing:.12em;text-transform:uppercase;padding:15px 12px;background:var(--amber);color:var(--ground);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);box-shadow:0 0 28px var(--amberglow)}
.stamp:disabled{background:var(--cut);color:var(--faint);box-shadow:none}
.bnote{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--faint)}
.bnote b{color:var(--ink);font-weight:500}
.marklist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px}
.marklist li{display:grid;grid-template-columns:1fr auto auto;gap:8px;font-family:var(--fig);font-size:12px;padding:6px 8px;background:var(--ground);border-left:2px solid var(--cut)}
.marklist li[data-won]{border-left-color:var(--amber)}
.marklist li[data-won] .mlg{color:var(--amber)}
.marklist li .mlw{color:var(--faint)}
.marklist li .mlg{font-weight:500}
.mlhead{font-family:var(--disp);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:14px 0 0}

/* ---- the tape column ---- */
.tape{grid-area:tape;display:grid;gap:12px;align-content:start}
.primer{background:var(--board);border:1px dashed var(--cut);padding:12px 14px}
.primer h3{margin:0 0 6px;font-family:var(--disp);font-weight:400;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.primer p{margin:0;font-size:14px;line-height:1.5}
.primer p+p{margin-top:6px}
.rules li{margin:0 0 6px;font-size:14px;line-height:1.5}
.tally{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.tally div{background:var(--board);padding:9px 10px;border:1px solid var(--cut)}
.tally span{display:block;font-family:var(--disp);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tally b{font-family:var(--fig);font-weight:500;font-size:20px;color:var(--ink)}
.reel{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.reelhead{font-family:var(--disp);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.reel li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;font-size:13px;padding:6px 8px;background:var(--board);border-left:2px solid var(--cut)}
.reel li[data-k="tipped"]{border-left-color:var(--amber)}
.reel li[data-k="squared"],.reel li[data-k="weighed"]{border-left-color:var(--faint)}
.reel .rk{font-family:var(--disp);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.reel .rt{font-family:var(--fig);font-size:11px;color:var(--faint)}
.reel .rw{min-width:0;overflow-wrap:anywhere}
.reel .rw b{font-family:var(--fig);font-weight:500}
.reel .rw a{color:var(--faint);text-decoration:none}
.quiet{color:var(--faint);font-size:13px;margin:0}

/* ---- ledger + marks views ---- */
.book{grid-column:1/-1;display:grid;gap:6px}
.book h1{margin:0 0 6px;font-family:var(--disp);font-weight:400;font-size:clamp(24px,6vw,40px);letter-spacing:.02em;text-transform:uppercase;line-height:1}
.book h1 em{color:var(--amber)}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;background:var(--board);border:1px solid var(--cut);text-decoration:none}
.row .rn{font-family:var(--disp);font-size:16px;color:var(--amber);letter-spacing:.06em}
.row .rd{font-size:13px;color:var(--faint);min-width:0}
.row .rd b{color:var(--ink);font-family:var(--fig);font-weight:500}
.row .rv{font-family:var(--fig);font-weight:500;font-size:16px}
.weights{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;grid-column:1/-1}
.weights span{font-family:var(--fig);font-size:11px;text-align:center;padding:4px 0;background:var(--ground);border:1px solid var(--cut);color:var(--faint)}
.weights span[data-hot]{color:var(--amber);border-color:var(--amber)}
.take{font-family:var(--disp);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;background:var(--amber);color:var(--ground)}
.prose{grid-column:1/-1;background:var(--board);border:1.5px solid var(--cut);padding:16px 16px 18px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.prose h1{margin:0 0 12px;font-family:var(--disp);font-weight:400;font-size:clamp(24px,6vw,40px);letter-spacing:.02em;text-transform:uppercase;line-height:1}
.prose h1 em{color:var(--amber)}
.prose h2{margin:16px 0 4px;font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.prose p{margin:0;font-size:15px;line-height:1.55}
.prose b{font-family:var(--fig);font-weight:500}
.prose.err{text-align:left}

/* ---- footer ---- */
.stub{grid-area:stub;border-top:2px dashed var(--cut);padding-top:14px;display:grid;gap:8px;font-size:13px;color:var(--faint)}
.stub .sline{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.stub .sline span{font-family:var(--disp);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);min-width:64px}
.stub code{font-family:var(--fig);font-size:12px;color:var(--ink);overflow-wrap:anywhere;user-select:all}
.stub a{color:var(--faint)}
.stub .sfoot{font-family:var(--disp);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:6px}

/* ---- the sheet (modal) ---- */
#sheetwrap{display:none;position:fixed;inset:0;z-index:60;background:rgba(21,20,15,.78);align-items:flex-end;justify-content:center;padding:0}
#sheetwrap[data-open]{display:flex}
.sheet{width:100%;max-width:520px;background:var(--board);border:1.5px solid var(--amber);border-bottom:0;padding:14px 16px 24px;
  clip-path:polygon(0 18px,18px 0,100% 0,100% 100%,0 100%)}
.sheethead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sheethead span{font-family:var(--disp);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.sheetshut{font-size:22px;color:var(--faint);padding:0 6px;line-height:1}
.sheetbody p{margin:0 0 8px;font-size:15px;line-height:1.5}
.sheetbody b{font-family:var(--fig);font-weight:500}
.sheetbody .fire{width:100%;margin-top:8px;font-family:var(--disp);font-size:18px;letter-spacing:.12em;text-transform:uppercase;padding:14px;background:var(--amber);color:var(--ground)}
.pick{display:grid;gap:6px}
.pick button{display:flex;align-items:center;gap:10px;padding:10px;background:var(--ground);border:1px solid var(--cut);font-size:15px}
.pick img{width:26px;height:26px}
.note{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--ground);font-size:14px;font-weight:500;
  padding:10px 16px;max-width:calc(100vw - 32px);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}

/* ---- wider: a bigger measure, larger type ---- */
@media (min-width:561px){
  :root{--strip:64px}
  #tagstrip{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"mark ca holder";padding:12px 18px;gap:14px}
  .tsmark b{font-size:24px}
  .tsgmgn{display:inline-block}
  .tsaddr{font-size:11.5px}
  #floor{padding:20px 18px 48px;gap:20px}
  .rack{gap:12px}
  .bale{padding:12px 12px 10px}
  .bwt{font-size:clamp(28px,4.6vw,44px)}
  .bench{padding:18px 18px 20px}
  .rddigits{font-size:48px}
  .keypad button{font-size:24px;padding:14px 0}
  .tally{grid-template-columns:repeat(4,1fr)}
}
/* ---- desktop: the page recomposes — rack + bench side by side, the tape as a third column ---- */
@media (min-width:1000px){
  #floor{grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);grid-template-areas:"tabs tabs" "rack bench" "tape tape" "stub stub";align-items:start;gap:22px}
  .bench{position:sticky;top:calc(var(--strip) + 16px)}
  .bwt{font-size:clamp(30px,3.2vw,48px)}
  .rackhead h1{font-size:44px}
  .tape{grid-template-columns:1fr 1fr 1fr;align-items:start}
  .tape .primer{grid-column:1}
  .tape .tally{grid-column:2/4;grid-template-columns:repeat(4,1fr);align-self:start}
  .tape .reelwrap{grid-column:1/-1}
}
@media (min-width:1280px){
  #floor{grid-template-columns:minmax(0,1.1fr) minmax(340px,.8fr) minmax(280px,.6fr);grid-template-areas:"tabs tabs tabs" "rack bench tape" "stub stub stub"}
  .tape{grid-template-columns:1fr;position:sticky;top:calc(var(--strip) + 16px)}
  .tape .primer,.tape .tally,.tape .reelwrap{grid-column:1}
  .tape .tally{grid-template-columns:repeat(2,1fr)}
  .rackhead h1{font-size:48px}
}