/* Claimsplit — a duotone ledger: near-black ground, one acid yellow. The ledger table is the page; the contract address
   hangs in a slim vertical rail on the phone and becomes a left spine on desktop. */
:root{
  --g:#0C0E0A; --field:#50573A; --g2:#13160F; --g3:#1A1E15; --ln:#272C20; --ink:#EDEFE2; --dim:#8D927E; --mute:#5A5F4E;
  --y:#E3F03A; --ys:rgba(227,240,58,.13); --yl:rgba(227,240,58,.38);
  --disp:'Gloock',Georgia,serif; --body:'Schibsted Grotesk',system-ui,sans-serif; --mono:'Spline Sans Mono',ui-monospace,monospace;
  --rail:46px;
}
*{box-sizing:border-box}
html{background:var(--field)}
body{margin:0;background:var(--field);color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased;
  padding-right:calc(var(--rail) + 6px);overflow-x:hidden}
a{color:inherit}
code{font-family:var(--mono)}
button{font:inherit;cursor:pointer}

/* ---------- the spine (CA): slim vertical rail on the phone ---------- */
.spine{position:fixed;z-index:30;right:0;top:50%;transform:translateY(-50%);width:var(--rail);
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;
  background:var(--y);color:var(--g);border-radius:10px 0 0 10px;box-shadow:-6px 0 28px rgba(0,0,0,.45)}
.spine-mark,.spine-nav,.spine-stats,.spine-warn{display:none}
.spine-k,.spine-addr,.spine-gm,.spine-copy{writing-mode:vertical-rl;margin:0}
.spine-k{font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.spine-addr{font:600 10.5px/1.15 var(--mono);user-select:all;-webkit-user-select:all;letter-spacing:.01em}
.spine-addr.is-pending{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.04em}
.spine-copy{background:var(--g);color:var(--y);border:0;border-radius:6px;padding:9px 5px;font:700 11px/1 var(--mono);letter-spacing:.06em}
.spine-copy[data-done="1"]{background:var(--g3)}
.spine-gm{font:600 10px/1 var(--mono);text-decoration:none;opacity:.7}
.spine-gm:hover{opacity:1;text-decoration:underline}

/* ---------- the desk ---------- */
.desk{max-width:760px;margin:0 auto;padding:10px 12px 40px}
.mast{display:flex;align-items:center;gap:8px;height:42px;font:600 13px/1 var(--body)}
.mast img{border-radius:6px}
.mast b{font:400 19px/1 var(--disp);letter-spacing:.01em}
.mast-no{font:500 11px/1 var(--mono);color:var(--ink);border:1px solid rgba(237,239,226,.35);border-radius:20px;padding:4px 8px}
.mast-wallet{margin-left:auto;background:var(--g);border:1px solid var(--yl);color:var(--y);border-radius:20px;padding:6px 12px;font:600 12px/1 var(--mono)}
.mast-wallet[data-on="1"]{border-color:var(--ln);color:var(--ink)}

/* the ledger, first and biggest */
.book{margin:6px 0 0;background:var(--g2);border:1px solid var(--ln);border-radius:14px;overflow:hidden}
.cutline{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--ln)}
.cutline>div{padding:11px 13px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.cutline-next{background:var(--y);color:var(--g)}
.cutline-clock{border-left:1px solid var(--ln);text-align:right;min-width:104px}
.cutline-k{font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.cutline-v{font:400 27px/1.05 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cutline-s{font:500 11.5px/1.3 var(--mono);opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cutline-clock[data-due="1"] .cutline-v{color:var(--y)}
.cutline-next[data-flash="1"]{animation:stampIn .7s ease-out}
@keyframes stampIn{0%{filter:brightness(1.6);transform:scale(.98)}100%{filter:none;transform:none}}

.book-say{margin:0;padding:12px 13px;font:400 15px/1.45 var(--body);color:var(--ink);border-bottom:1px solid var(--ln)}
.book-say mark{background:var(--ys);color:var(--y);padding:0 3px;border-radius:3px}
.book-say .is-cutw{color:var(--y);font-weight:700}

.book-t{width:100%;border-collapse:collapse;font:500 12.5px/1.2 var(--mono);table-layout:fixed}
.book-t th{font:700 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:right;padding:9px 8px 7px;border-bottom:1px solid var(--ln)}
.book-t td{padding:0 8px;height:38px;text-align:right;border-bottom:1px solid var(--ln);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-t tr:last-child td{border-bottom:0}
.book-t .c-fl{width:22px;padding:0;position:relative}
.book-t .c-n{width:24px;text-align:left;color:var(--mute)}
.book-t .c-w{text-align:left;width:auto}
.book-t .c-a{width:76px}
.book-t .c-b{width:78px;color:var(--dim)}
.book-t .c-d{width:78px}
.book-t td.c-d{color:var(--y)}
/* the flow line: from the cut row down into every smaller row, branch weight = share of the cut */
.flow-v{position:absolute;left:10px;width:2px;background:var(--y);top:0;bottom:0}
.is-first .flow-v{top:50%}
.is-last .flow-v{bottom:50%}
.flow-b{position:absolute;left:10px;top:50%;height:2px;background:var(--y);transform:translateY(-50%)}
.flow-src{position:absolute;left:5px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--g);border:2px solid var(--g);border-radius:50%}
tr.is-cut{background:var(--y);color:var(--g)}
tr.is-cut td{border-bottom-color:var(--y)}
tr.is-cut .c-n,tr.is-cut .c-b{color:var(--g)}
tr.is-cut td.c-d{color:var(--g);font-weight:700}
tr.is-cut .c-a s{text-decoration-thickness:2px}
.cut-tag{display:inline-block;font:700 9px/1 var(--mono);letter-spacing:.1em;background:var(--g);color:var(--y);padding:3px 4px;border-radius:3px;margin-right:5px;vertical-align:1px}
tr.is-me td.c-w{color:var(--y)}
tr.is-cut.is-me td.c-w{color:var(--g);text-decoration:underline}
tr.is-new{animation:rowIn .9s ease-out}
@keyframes rowIn{0%{background:var(--yl)}100%{background:transparent}}
tr.is-cut.is-new{animation:none}
tr.is-ghost td{color:var(--mute);border-bottom-style:dashed}
tr.is-ghost.is-move td{color:var(--y);background:var(--ys)}
tr.is-ghost.is-move .c-w{animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.45}}
.book-cap{font:500 11px/1.3 var(--mono);color:var(--mute);padding:9px 13px;border-top:1px solid var(--ln)}

/* the claim form */
.stake{margin-top:12px;background:var(--g2);border:1px solid var(--ln);border-radius:14px;padding:13px}
.stake-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.stake-h{margin:0;font:400 21px/1.1 var(--disp)}
.stake-o{font:600 13px/1 var(--mono);color:var(--dim)}
.stake-o b{font:400 25px/1 var(--disp);color:var(--y)}
.stake-r{width:100%;margin:12px 0 2px;accent-color:var(--y);height:28px}
.stake-ticks{display:flex;justify-content:space-between;font:500 10px/1 var(--mono);color:var(--mute)}
.stake-pre{margin:11px 0;padding:10px 11px;border-left:3px solid var(--y);background:var(--g3);font:500 13px/1.45 var(--body);border-radius:0 8px 8px 0}
.stake-pre b{color:var(--y)}
.stake-go{width:100%;background:var(--y);color:var(--g);border:0;border-radius:10px;padding:15px 12px;font:700 15px/1 var(--body);letter-spacing:.01em}
.stake-go[data-wait="1"]{background:var(--g3);color:var(--dim);border:1px dashed var(--ln)}
.stake-go:disabled{opacity:.6}
.stake-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.stake-note{font:500 11.5px/1.35 var(--mono);color:var(--dim);flex:1 1 220px}
.stake-lnk{background:none;border:0;color:var(--dim);text-decoration:underline;padding:0;font-size:12px}
.stake-draw{background:none;border:1px solid var(--y);color:var(--y);border-radius:8px;padding:8px 11px;font:700 12px/1 var(--mono)}

/* tape + closed splits */
.sec-h{margin:0 0 8px;font:400 19px/1.1 var(--disp);display:flex;align-items:baseline;gap:8px}
.sec-h span{font:500 11px/1 var(--mono);color:var(--mute)}
.tick,.closed,.rulebook,.wallet-box{margin-top:14px}
.tick,.closed{background:var(--g2);border:1px solid var(--ln);border-radius:14px;padding:13px}
.tick-l,.closed-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--ln)}
.tick-l li{display:grid;grid-template-columns:44px 1fr;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--ln);font:500 12.5px/1.35 var(--mono)}
.tick-l time{color:var(--mute);grid-row:span 2}
.tick-l .tk-sub{color:var(--mute);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tick-l .k-cut span:first-of-type{color:var(--y)}
.tick-l li.is-fresh{animation:print .8s steps(6) both}
@keyframes print{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
.tick-l .is-empty,.closed-l .is-empty{display:block;color:var(--dim);font:500 12.5px/1.45 var(--body);padding:10px 0;border-bottom:1px solid var(--ln)}
.closed-l li{padding:9px 0;border-bottom:1px solid var(--ln);display:grid;grid-template-columns:1fr auto;gap:2px 10px;font:500 12.5px/1.35 var(--mono)}
.closed-l li b{color:var(--y);font-weight:600}
.closed-l li small{grid-column:1 / -1;color:var(--mute);font-size:11px}

/* rulebook */
.rulebook{background:var(--g2);border:1px solid var(--ln);border-radius:14px;padding:15px}
.rulebook-h{margin:0 0 10px;font:400 26px/1.1 var(--disp)}
.rulebook-l{list-style:none;margin:0;padding:0;display:grid;gap:8px;font:400 14px/1.5 var(--body);color:#C9CCBC}
.rulebook-l b{color:var(--ink)}
.worked{margin-top:14px;border-top:1px dashed var(--ln);padding-top:12px}
.worked-h{margin:0 0 8px;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--y)}
.worked-t{width:100%;border-collapse:collapse;font:500 12.5px/1.2 var(--mono)}
.worked-t th{text-align:left;font:700 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:6px 6px;border-bottom:1px solid var(--ln)}
.worked-t td{padding:7px 6px;border-bottom:1px solid var(--ln)}
.worked-t td:last-child{color:var(--y)}
.worked-t tr.is-cut td{background:var(--y);color:var(--g)}
.worked-n{margin:10px 0 0;font:400 13px/1.5 var(--body);color:var(--dim)}

.wallet-box{background:var(--g2);border:1px solid var(--ln);border-radius:14px;padding:13px;font:500 12.5px/1.6 var(--mono);overflow-wrap:anywhere}

.colophon{margin-top:14px;padding:14px;background:var(--g);border-radius:14px;display:grid;gap:6px;font:500 11.5px/1.45 var(--mono);color:var(--dim)}
.colophon code{color:var(--ink);overflow-wrap:anywhere}
.colophon-l{display:flex;flex-wrap:wrap;gap:12px}
.colophon-l a{color:var(--y)}

.pings{position:fixed;left:12px;bottom:12px;z-index:40;display:grid;gap:6px;max-width:min(360px,calc(100vw - 80px))}
.ping{background:var(--ink);color:var(--g);border-radius:8px;padding:10px 12px;font:600 13px/1.35 var(--body);box-shadow:0 8px 24px rgba(0,0,0,.5)}

/* phones: the "at close" column folds into ± */
@media (max-width:520px){
  .book-t .c-b{display:none}
  .book-t .c-a,.book-t .c-d{width:70px}
  .cutline-v{font-size:24px}
}

/* tablets: one column, wider measure, bigger type */
@media (min-width:640px){
  body{font-size:16px}
  .desk{padding:18px 22px 50px}
  .cutline-v{font-size:34px}
  .book-say{font-size:17px;padding:14px 16px}
  .book-t{font-size:13.5px}
  .book-t td{height:42px}
  .stake{padding:16px}
}

/* desktop: the spine becomes a left rail; ledger + claim left, tape + closed splits right */
@media (min-width:1000px){
  body{padding-right:0;padding-left:250px}
  .spine{left:0;right:auto;top:0;bottom:0;transform:none;width:250px;border-radius:0;align-items:stretch;gap:12px;
    padding:22px 20px;background:var(--g2);color:var(--ink);border-right:1px solid var(--ln);box-shadow:none}
  .spine-k,.spine-addr,.spine-gm,.spine-copy{writing-mode:horizontal-tb}
  .spine-mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 24px/1 var(--disp);margin-bottom:14px}
  .spine-mark img{border-radius:8px}
  .spine-k{color:var(--dim);margin-top:6px}
  .spine-addr{display:block;background:var(--g);border:1px solid var(--yl);border-radius:8px;padding:10px;font-size:12.5px;line-height:1.45;word-break:break-all;color:var(--y)}
  .spine-addr.is-pending{color:var(--dim);border-style:dashed;font-size:13px}
  .spine-copy{background:var(--y);color:var(--g);padding:11px;font-size:13px}
  .spine-copy[data-done="1"]{background:var(--ink)}
  .spine-gm{color:var(--dim);font-size:11.5px}
  .spine-nav{display:grid;gap:2px;margin-top:18px;border-top:1px solid var(--ln);padding-top:14px}
  .spine-nav a{text-decoration:none;font:500 14px/1 var(--body);padding:8px 0;color:var(--dim)}
  .spine-nav a:hover{color:var(--y)}
  .spine-stats{display:grid;gap:8px;margin:auto 0 0;border-top:1px solid var(--ln);padding-top:14px}
  .spine-stats div{display:flex;justify-content:space-between;font:500 12px/1 var(--mono)}
  .spine-stats dt{color:var(--mute)}
  .spine-stats dd{margin:0;color:var(--ink)}
  .spine-warn{display:block;margin:0;font:400 15px/1.3 var(--disp);color:var(--y)}
  .desk{max-width:1120px;padding:20px 32px 60px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 28px;align-items:start}
  .mast{grid-column:1 / -1}
  .mast img,.mast b{display:none}
  .mast-no{font-size:12px}
  .book{grid-column:1;grid-row:2 / span 2}
  .stake{grid-column:1;grid-row:4}
  .tick{grid-column:2;grid-row:2;margin-top:6px}
  .closed{margin-top:14px}
  .closed{grid-column:2;grid-row:3 / span 2}
  .rulebook,.wallet-box,.colophon{grid-column:1 / -1}
  .tick-l{max-height:430px;overflow:auto}
  .cutline-v{font-size:42px}
  .book-say{font-size:19px;padding:16px 18px}
  .book-t{font-size:14px}
  .book-t td{height:46px}
  .book-t .c-fl{width:30px}
  .book-t .c-n{width:36px}
  .flow-v,.flow-b{left:14px}.flow-src{left:9px}
  .rulebook{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;padding:22px}
  .rulebook-h{grid-column:1 / -1;font-size:32px}
  .worked{margin-top:0;border-top:0;padding-top:0}
  .colophon{grid-template-columns:1fr 1fr}
}
@media (min-width:1400px){
  .desk{grid-template-columns:minmax(0,1fr) 380px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}