/* Splitfold — a stencilled storm-warning slip on a slate ground. One accent: hazard yellow. */
:root{
  --slate:#5E6B78; --slate-2:#526070; --deep:#2B333C; --deeper:#20272E; --ink:#F4F2EA; --dim:#CBD2D9; --mute:#9AA6B2;
  --haz:#F7D046; --haz-ink:#1D1A10; --line:rgba(244,242,234,.16);
  --disp:'Saira Stencil One', 'Barlow', sans-serif; --body:'Barlow', system-ui, sans-serif; --mono:'Red Hat Mono', ui-monospace, monospace;
  --stripe:repeating-linear-gradient(-45deg, var(--haz) 0 10px, var(--haz-ink) 10px 20px);
}
*{box-sizing:border-box}
html{background:var(--slate)}
body{margin:0;background:var(--slate);color:var(--ink);font:400 16px/1.45 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;cursor:pointer}
code{font-family:var(--mono)}

/* the hazard strip: name, round, clock — no nav, no connect */
.wx-strip{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;background:var(--stripe);position:relative}
.wx-strip::before{content:"";position:absolute;inset:6px 8px;background:var(--deeper);border-radius:3px}
.wx-strip>*{position:relative}
.wx-strip img{border-radius:4px;margin-left:4px}
.wx-name{font:400 17px/1 var(--disp);letter-spacing:.08em;color:var(--haz)}
.wx-sep{width:1px;height:16px;background:var(--line)}
.wx-round{font:700 12px/1 var(--mono);letter-spacing:.06em;white-space:nowrap}
.wx-clock{font:500 12px/1 var(--mono);color:var(--dim);margin-left:auto;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

.wx-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"slip" "ca" "stack" "tape" "primer" "look";gap:14px;padding:14px;max-width:1180px;margin:0 auto}

/* the slip: the action and the fold line, first */
.slip{grid-area:slip;background:var(--ink);color:var(--deeper);border-radius:6px;padding:14px 14px 12px;position:relative;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.slip-warn{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#4A525B}
.slip-k{background:var(--deeper);color:var(--haz);padding:4px 7px;border-radius:3px;letter-spacing:.12em}
.slip-read{display:grid;grid-template-columns:1.25fr 1fr;gap:10px;margin:12px 0 8px}
.slip-cell{display:flex;flex-direction:column;gap:3px;min-width:0;padding:10px 10px 9px;border-radius:4px;background:#E7E3D6}
.slip-cell:first-child{background:var(--deeper);color:var(--ink);border-left:6px solid var(--haz)}
.slip-lbl{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;opacity:.75}
.slip-big{font:400 34px/1 var(--disp);color:var(--haz);letter-spacing:.02em}
.slip-mid{font:400 26px/1.15 var(--disp);letter-spacing:.02em}
.slip-who{font:500 12px/1.2 var(--mono);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slip-line{margin:0 0 10px;font-size:15px;line-height:1.4;color:#2C333A}
.slip-line b{background:var(--haz);padding:0 3px;border-radius:2px}
.slip-entry{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.amt{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--deeper);border-radius:4px;padding:6px 10px;flex:1 1 150px;min-width:0}
.amt span{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#5A626B}
.amt input{border:0;outline:0;font:700 20px/1 var(--mono);width:100%;min-width:0;color:var(--deeper);background:transparent}
.amt em{font:600 12px/1 var(--mono);font-style:normal;color:#5A626B}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid #A9AFA9;background:transparent;border-radius:999px;padding:6px 10px;font:600 13px/1 var(--mono);color:var(--deeper)}
.chip[data-on="1"]{background:var(--deeper);color:var(--haz);border-color:var(--deeper)}
.slip-if{margin:9px 0 10px;font:500 13px/1.35 var(--mono);color:#3B434B}
.slip-if b{color:var(--deeper);background:rgba(247,208,70,.55);padding:0 3px}
.slip-act{display:flex;gap:8px}
.go{flex:1;border:0;border-radius:4px;background:var(--deeper);color:var(--haz);font:400 20px/1 var(--disp);letter-spacing:.06em;padding:14px 12px}
.go:disabled{opacity:.55}
.wire{border:2px solid var(--deeper);background:transparent;border-radius:4px;padding:0 14px;font:700 13px/1 var(--mono);color:var(--deeper)}
.wire[data-on="1"]{background:var(--haz);border-color:var(--haz)}
.slip-mine{margin-top:9px;font:500 12px/1.4 var(--mono);color:#4A525B;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.slip-mine b{color:var(--deeper)}
.cash{border:0;background:var(--haz);color:var(--haz-ink);border-radius:3px;padding:5px 9px;font:700 12px/1 var(--mono)}

/* the CA pill: floats mid-page and sticks when scrolled */
#sfCa{grid-area:ca;position:sticky;top:8px;z-index:20;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;background:var(--deeper);border:2px solid var(--haz);border-radius:999px;box-shadow:0 6px 18px rgba(20,24,28,.35);min-width:0}
.ca-tag{font:700 10px/1.1 var(--mono);letter-spacing:.08em;color:var(--haz);white-space:nowrap}
.ca-addr{flex:1;min-width:0;font:500 11px/1.25 var(--mono);color:var(--ink);word-break:break-all;user-select:all}
#caAddr[data-wait]{color:var(--mute);user-select:none;word-break:normal}
.ca-copy{border:0;background:var(--haz);color:var(--haz-ink);border-radius:999px;padding:8px 12px;font:700 12px/1 var(--mono)}
.ca-copy[data-done="1"]{background:var(--ink)}
.ca-gm{font:500 11px/1 var(--mono);color:var(--mute);text-decoration:none;padding:0 4px}
.ca-gm:hover{color:var(--ink)}

/* the stack: every stake as a stencil bar, the biggest striped */
.stack{grid-area:stack;background:var(--slate-2);border-radius:6px;padding:12px}
.stack-h,.tape-h{display:flex;justify-content:space-between;gap:10px;font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:10px}
.bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:40px;padding:6px 10px;border-radius:4px;background:var(--deep);overflow:hidden}
.bar-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(244,242,234,.13);border-right:2px solid rgba(244,242,234,.4);transition:width .6s ease}
.bar>*:not(.bar-fill){position:relative}
.bar-amt{font:400 19px/1 var(--disp);letter-spacing:.03em}
.bar-who{font:500 11px/1.2 var(--mono);color:var(--dim);margin-left:8px}
.bar-take{font:600 12px/1.2 var(--mono);text-align:right;white-space:nowrap}
.bar-take small{display:block;font-weight:500;color:var(--mute);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.bar[data-top="1"]{background:var(--deeper);outline:2px solid var(--haz)}
.bar[data-top="1"] .bar-fill{background:var(--stripe);opacity:.22;border-right-color:var(--haz)}
.bar[data-top="1"] .bar-amt{color:var(--haz)}
.bar[data-top="1"] .bar-take{color:var(--haz)}
.bar[data-me="1"] .bar-who{color:var(--haz)}
.bar[data-ghost="1"]{background:transparent;border:1px dashed rgba(244,242,234,.22);min-height:34px}
.bar[data-ghost="1"] .bar-amt{font:500 12px/1 var(--mono);color:var(--mute)}
.bar[data-slot="1"]{background:transparent;border:2px dashed var(--haz);animation:slot 1.4s ease-in-out infinite}
.bar[data-slot="1"] .bar-amt{font:600 13px/1 var(--mono);color:var(--haz)}
.bar[data-new="1"]{animation:land .7s ease-out}
@keyframes slot{50%{border-color:rgba(247,208,70,.35)}}
@keyframes land{from{transform:translateX(-14px);opacity:0}}
.lastfold{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.lastfold-b{font-size:14px;color:var(--dim)}
.lastfold-b p{margin:8px 0 0}
.lastfold-b b{color:var(--haz)}
.payrow{display:flex;justify-content:space-between;gap:8px;font:500 12px/1.7 var(--mono);border-bottom:1px dotted var(--line)}
.payrow[data-top="1"]{color:var(--haz)}

/* the tape: the spine — every stake and fold prints here */
.tapewell{grid-area:tape;background:var(--deeper);border-radius:6px;padding:12px 0 6px;position:relative;
  background-image:repeating-linear-gradient(0deg, transparent 0 27px, rgba(244,242,234,.05) 27px 28px)}
.tapewell .tape-h{padding:0 12px}
.tape{list-style:none;margin:0;padding:0 12px;max-height:520px;overflow-y:auto}
.tl{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(244,242,234,.07);font:500 12.5px/1.35 var(--mono)}
.tl-t{color:var(--mute)}
.tl-w{min-width:0;overflow-wrap:anywhere}
.tl-g{display:block;height:5px;margin-top:4px;background:var(--dim);border-radius:1px;max-width:100%}
.tl-v{font:400 15px/1 var(--disp);white-space:nowrap}
.tl[data-k="fold"]{background:var(--stripe);margin:4px -12px;padding:2px 12px}
.tl[data-k="fold"]>*{background:var(--deeper);padding:6px 6px;border-radius:2px}
.tl[data-k="fold"] .tl-w,.tl[data-k="fold"] .tl-v{color:var(--haz)}
.tl[data-top="1"] .tl-g{background:var(--haz)}
.tl[data-top="1"] .tl-v{color:var(--haz)}
.tl[data-new="1"]{animation:print .55s steps(6)}
@keyframes print{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.tl-q{color:var(--mute)}

.primer{grid-area:primer;background:var(--slate-2);border-radius:6px;padding:12px}
.primer-l{margin:0;padding-left:20px;color:var(--dim);font-size:14.5px}
.primer-l li{margin:0 0 6px}
.primer-l b{color:var(--ink)}
.worked{margin-top:10px;background:var(--ink);color:var(--deeper);border-radius:4px;padding:10px 12px;border-left:6px solid var(--haz)}
.worked-h{font:400 15px/1 var(--disp);letter-spacing:.05em;margin-bottom:6px}
.worked pre{margin:0;font:500 12.5px/1.55 var(--mono);white-space:pre-wrap}

.lookup{grid-area:look;background:var(--slate-2);border-radius:6px;padding:12px}
.lk{display:flex;justify-content:space-between;gap:8px;font:500 13px/1.8 var(--mono);border-bottom:1px dotted var(--line)}

.fine{max-width:1180px;margin:10px auto 0;padding:18px 14px 28px;border-top:1px solid var(--line);font:500 12px/1.6 var(--mono);color:var(--dim)}
.fine-row{display:flex;flex-wrap:wrap;gap:8px}
.fine-row code{word-break:break-all;color:var(--ink)}
.fine-links{display:flex;gap:14px;margin:10px 0}
.fine-note{color:var(--mute)}

.flashes{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:40;width:min(92vw,420px)}
.flash{background:var(--deeper);color:var(--ink);border-left:4px solid var(--haz);padding:10px 12px;border-radius:4px;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.3)}

@media (min-width:640px){
  .wx-grid{padding:20px;gap:16px}
  .slip{padding:18px}
  .slip-big{font-size:44px}
  .slip-mid{font-size:32px}
  .slip-line{font-size:16px}
  .ca-addr{font-size:13px}
  .bar{min-height:46px}
  .bar-amt{font-size:22px}
}
@media (min-width:1000px){
  .wx-grid{grid-template-columns:minmax(0,560px) minmax(0,1fr);grid-template-areas:"slip tape" "ca tape" "stack tape" "primer tape" "look tape";align-items:start;gap:18px 22px;padding:24px}
  .tapewell{position:sticky;top:20px;grid-row:1 / span 5}
  .tape{max-height:calc(100vh - 110px)}
  .slip-big{font-size:52px}
  .tl{font-size:13.5px;grid-template-columns:52px minmax(0,1fr) auto}
  .tl-v{font-size:18px}
  .wx-strip{padding:0 24px}
}