/* Dealbook — a street dealer's book on asphalt. The deal slip comes first (the action), the open page sits under it as an
   isometric slab of ten ruled lines with the page stack showing at its edge, and the tape prints beside it. The CA rides
   a strip pinned to the top edge at every width. */
:root {
  --asphalt: #585D63; --asphalt-lo: #4A4F55; --kerb: #2A2D31; --kerb-hi: #34383D;
  --paper: #ECE9DE; --paper-2: #DCD8CA; --paper-3: #C3BEAD; --ruled: rgba(42, 45, 49, .16);
  --pen: #1E2124; --pen-dim: rgba(30, 33, 36, .58); --chalk: #F3F1E8; --chalk-dim: rgba(243, 241, 232, .72); --chalk-faint: rgba(243, 241, 232, .5);
  --lime: #C4F23A; --lime-ink: #1A2205; --lime-deep: #8DB31B;
  --stripH: 48px;
  --show: 'Hanken Grotesk', system-ui, sans-serif; --text: 'IBM Plex Sans', system-ui, sans-serif; --figs: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--asphalt); }
body { margin: 0; color: var(--chalk); font: 400 15px/1.5 var(--text); background-color: var(--asphalt);
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.2px), radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.4px);
  background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; min-height: 100vh; overflow-x: hidden; }
a { color: inherit; }
code { font-family: var(--figs); }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- the CA strip: a dock pinned to the bottom edge, above the thumb ---------- */
.castrip { position: fixed; z-index: 60; bottom: 0; left: 0; right: 0; min-height: var(--stripH); padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 8px;
  background: var(--kerb); border-top: 2px solid var(--lime); box-shadow: 0 -6px 22px rgba(10, 12, 14, .35); }
.castrip-tag { flex: none; display: none; font: 800 11px/1 var(--show); letter-spacing: .1em; color: var(--lime-ink); background: var(--lime); padding: 5px 6px; border-radius: 2px; }
.castrip-addr { flex: 1; min-width: 0; font: 500 11px/1.25 var(--figs); color: var(--chalk); word-break: break-all; user-select: all; -webkit-user-select: all; letter-spacing: -.02em; }
.castrip-addr.is-pending { user-select: none; -webkit-user-select: none; color: var(--chalk-faint); font-style: italic; letter-spacing: 0; }
.castrip-copy { flex: none; border: 0; background: var(--lime); color: var(--lime-ink); border-radius: 999px; padding: 8px 13px; font: 800 12px/1 var(--show); letter-spacing: .03em; }
.castrip-copy[data-done="1"] { background: var(--chalk); }
.castrip-gm { flex: none; display: none; font: 500 11px/1 var(--figs); color: var(--chalk-faint); text-decoration: none; }
.castrip-gm:hover { color: var(--lime); }

/* ---------- the hall ---------- */
.ledgerhall { max-width: 1180px; margin: 0 auto; padding: 12px 12px calc(var(--stripH) + 30px); display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "mark" "live" "slab" "slip" "side" "rules" "past" "colo"; }
.dealslip-mark { grid-area: mark; } .dealslip-live { grid-area: live; } .dealslip { grid-area: slip; } .bookslab { grid-area: slab; } .sidecol { grid-area: side; } .rulebook { grid-area: rules; } .pastpages { grid-area: past; } .colophon { grid-area: colo; }

/* ---------- the deal slip: the action leads ---------- */
.dealslip { margin: 0; padding: 12px 14px 14px; border-radius: 10px; background: var(--asphalt-lo); border: 1px solid rgba(243,241,232,.14); }
.dealslip-mark { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mark-tick { display: none; flex: 1; font: 500 12px/1 var(--figs); color: var(--chalk-faint); }
.mark-home { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 800 16px/1 var(--show); letter-spacing: -.01em; }
.mark-home img { border-radius: 6px; }
.mark-wallet { border: 1px solid rgba(243,241,232,.3); background: transparent; color: var(--chalk-dim); border-radius: 999px; padding: 6px 12px; font: 500 12px/1 var(--figs); }
.mark-wallet[data-on="1"] { color: var(--lime); border-color: var(--lime); }
.dealslip-say { margin: 2px 0 0; font: 900 25px/1.06 var(--show); letter-spacing: -.025em; color: var(--chalk); }
.dealslip-say em { font-style: normal; color: var(--lime); }
.dealslip-live { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--chalk-dim); min-height: 2.9em; }
.dealslip-live b { color: var(--chalk); font-weight: 600; }
.dealslip-act { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 10px; }
.lotfield { display: flex; align-items: center; gap: 2px; background: var(--kerb); border-radius: 8px; padding: 4px; }
.lotfield-k { font: 600 10px/1 var(--figs); text-transform: uppercase; letter-spacing: .08em; color: var(--chalk-faint); padding: 0 4px 0 6px; }
.lotfield-step { width: 32px; height: 40px; border: 0; border-radius: 6px; background: var(--kerb-hi); color: var(--chalk); font: 600 18px/1 var(--figs); }
.lotfield-n { width: 38px; height: 40px; border: 0; background: transparent; color: var(--chalk); text-align: center; font: 600 18px/1 var(--figs); -moz-appearance: textfield; appearance: textfield; }
.lotfield-n::-webkit-outer-spin-button, .lotfield-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inkbutton { border: 0; border-radius: 8px; background: var(--lime); color: var(--lime-ink); font: 900 17px/1 var(--show); letter-spacing: -.01em; padding: 0 12px; min-height: 48px;
  box-shadow: 0 4px 0 var(--lime-deep); }
.inkbutton:disabled { opacity: .55; cursor: default; box-shadow: none; }
.inkbutton:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--lime-deep); }
.dealslip-cost { margin: 9px 0 0; font: 400 12px/1.4 var(--figs); color: var(--chalk-faint); }
.scoopbutton { margin-top: 10px; width: 100%; border: 1.5px solid var(--lime); background: transparent; color: var(--lime); border-radius: 8px; padding: 12px; font: 800 15px/1 var(--show); }

/* ---------- the open page: an isometric slab of ten lines ---------- */
.bookslab { position: relative; margin: 0 12px 12px 0; color: var(--pen); background: var(--paper); border-radius: 4px 10px 10px 4px;
  box-shadow: 4px 4px 0 var(--paper-2), 8px 8px 0 var(--paper-3), 12px 12px 0 var(--kerb), 12px 16px 26px rgba(10,12,14,.35); }
.bookslab::before { content: ''; position: absolute; left: 34px; top: 0; bottom: 0; width: 2px; background: var(--lime-deep); opacity: .55; }
.bookslab-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px 8px 46px; border-bottom: 2px solid var(--pen); }
.bookslab-no { font: 900 22px/1 var(--show); letter-spacing: -.02em; white-space: nowrap; }
.bookslab-sum { font: 500 11.5px/1.2 var(--figs); color: var(--pen-dim); text-align: right; }
.pagelines { list-style: none; margin: 0; padding: 0; }
.pageline { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; min-height: 31px; padding: 0 14px 0 0;
  border-bottom: 1px solid var(--ruled); font: 500 13px/1.2 var(--figs); position: relative; }
.pageline-n { text-align: center; font: 600 11px/1 var(--figs); color: var(--pen-dim); }
.pageline-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(30,33,36,.38); font-style: italic; }
.pageline-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.pageline--inked .pageline-who { color: var(--pen); font-style: normal; }
.pageline--mine .pageline-who::after { content: ' · you'; color: var(--lime-deep); font-weight: 600; }
.pageline--next { background: var(--lime); }
.pageline--next .pageline-n, .pageline--next .pageline-who { color: var(--lime-ink); font-style: normal; font-weight: 600; }
.pageline--fresh { animation: inkline .9s ease-out; }
@keyframes inkline { from { background: var(--lime); clip-path: inset(0 100% 0 0); } 60% { clip-path: inset(0 0 0 0); } to { background: transparent; } }
.pageline--won { background: var(--lime); }
.pageline--won .pageline-who, .pageline--won .pageline-n { color: var(--lime-ink); font-style: normal; font-weight: 600; }
.pageline--paid .pageline-amt { color: rgba(30,33,36,.45); text-decoration: line-through; text-decoration-color: rgba(30,33,36,.3); }
.bookslab-edge { display: block; width: 100%; height: 12px; color: var(--paper-2); border-radius: 0 0 10px 4px; }
.bookslab-foot { padding: 9px 14px 11px 46px; font: 500 12px/1.4 var(--figs); color: var(--pen-dim); }
.bookslab-foot b { color: var(--pen); }
.bookslab[data-closing="1"] .bookslab-head { border-bottom-color: var(--lime-deep); }

/* ---------- side column: the last drawn page + the tape ---------- */
.sidecol { display: grid; gap: 16px; align-content: start; min-width: 0; }
.drawncard { padding: 12px 14px 14px; border-radius: 10px; background: var(--kerb); border: 1px solid rgba(243,241,232,.1); }
.drawncard-k { font: 800 12px/1 var(--show); letter-spacing: .06em; text-transform: uppercase; color: var(--lime); }
.drawnlines { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.drawnlines li { height: 34px; border-radius: 3px; background: rgba(243,241,232,.1); display: grid; place-items: center; font: 600 10.5px/1 var(--figs); color: var(--chalk-faint); }
.drawnlines li.is-drawn { background: var(--lime); color: var(--lime-ink); box-shadow: 0 0 0 2px rgba(196,242,58,.35); }
.drawncard-say { margin: 0; font-size: 14px; line-height: 1.45; color: var(--chalk-dim); }
.drawncard-say b { color: var(--chalk); font-weight: 600; }
.drawncard[data-state="none"] .drawnlines { opacity: .5; }
.drawncard[data-state="waiting"] { border-color: var(--lime-deep); }

.tapefeed, .walletcard, .pastpages { border-radius: 10px; background: rgba(30,33,36,.42); border: 1px solid rgba(243,241,232,.1); padding: 10px 12px 12px; min-width: 0; }
.tapefeed-head { display: flex; justify-content: space-between; gap: 10px; font: 800 12px/1 var(--show); text-transform: uppercase; letter-spacing: .06em; color: var(--chalk-dim); padding-bottom: 8px; border-bottom: 1px dashed rgba(243,241,232,.22); }
.tapefeed-head span:last-child { font: 500 11px/1 var(--figs); text-transform: none; letter-spacing: 0; color: var(--chalk-faint); }
.tapefeed-roll, .pastpages-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.tapefeed-roll li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed rgba(243,241,232,.12); font: 400 12.5px/1.35 var(--figs); }
.tapefeed-roll li .tp-k { font: 600 10px/1 var(--figs); text-transform: uppercase; color: var(--chalk-faint); }
.tapefeed-roll li .tp-t { min-width: 0; overflow-wrap: anywhere; }
.tapefeed-roll li .tp-w { color: var(--chalk-faint); font-size: 11px; }
.tapefeed-roll li[data-k="drawn"] .tp-k, .tapefeed-roll li[data-k="drawn"] b { color: var(--lime); }
.tapefeed-roll li[data-k="closed"] .tp-k { color: var(--chalk); }
.tapefeed-roll li.is-printing { animation: printrow .7s steps(6, end); }
@keyframes printrow { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.tapefeed-quiet { display: block !important; color: var(--chalk-faint); font: 400 13px/1.45 var(--text) !important; padding: 10px 0 2px !important; border: 0 !important; }

.pastpages-list li { padding: 9px 0; border-bottom: 1px dashed rgba(243,241,232,.12); font: 400 12px/1.4 var(--figs); color: var(--chalk-dim); overflow-wrap: anywhere; }
.pastpages-list li .pp-top { display: flex; justify-content: space-between; gap: 8px; color: var(--chalk); font: 600 13px/1.3 var(--figs); }
.pastpages-list li .pp-top b { color: var(--lime); }

.walletcard code { display: block; font-size: 11.5px; overflow-wrap: anywhere; margin: 8px 0; }
.walletcard div div { font: 400 12.5px/1.5 var(--figs); color: var(--chalk-dim); }

/* ---------- rules ---------- */
.rulebook { padding: 14px; border-radius: 10px; background: var(--asphalt-lo); border: 1px solid rgba(243,241,232,.12); }
.rulebook-k { font: 900 20px/1.1 var(--show); letter-spacing: -.02em; }
.rulebook-list { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--chalk-dim); font-size: 14.5px; }
.rulebook-list b { color: var(--chalk); }
.workedpage { margin-top: 14px; padding: 12px 14px; border-radius: 6px; background: var(--paper); color: var(--pen); font-size: 14px; }
.workedpage-k { font: 800 11px/1 var(--show); text-transform: uppercase; letter-spacing: .08em; color: var(--lime-ink); background: var(--lime); padding: 4px 6px; border-radius: 2px; }
.workedpage p { margin: 9px 0 0; }

/* ---------- colophon ---------- */
.colophon { padding: 14px 4px 4px; border-top: 1px solid rgba(243,241,232,.2); font-size: 12.5px; color: var(--chalk-dim); }
.colophon-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 3px 0; }
.colophon-row code { overflow-wrap: anywhere; font-size: 11.5px; color: var(--chalk); }
.colophon-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.colophon-links a.is-dim { opacity: .45; pointer-events: none; }
.colophon-note { margin: 10px 0 0; color: var(--chalk-faint); }

.flashes { position: fixed; z-index: 70; top: 14px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; width: min(92vw, 420px); pointer-events: none; }
.flash { background: var(--chalk); color: var(--pen); border-radius: 8px; padding: 10px 14px; font: 500 13.5px/1.4 var(--text); box-shadow: 0 8px 22px rgba(10,12,14,.35); }

/* ---------- mid widths: one column, wider measure ---------- */
@media (min-width: 560px) {
  .castrip { padding: 8px 16px; }
  .castrip-tag, .castrip-gm, .mark-tick { display: inline-block; }
  .castrip-addr { font-size: 13px; word-break: normal; white-space: nowrap; }
  .ledgerhall { padding-left: 22px; padding-right: 22px; gap: 20px; }
  .dealslip { padding: 16px 20px 18px; }
  .dealslip-say { font-size: 36px; }
  .pageline { min-height: 36px; font-size: 14px; }
  .bookslab-no { font-size: 26px; }
}
@media (min-width: 720px) and (max-width: 999px) {
  .ledgerhall { max-width: 820px; }
  .sidecol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* ---------- desktop: recompose — slip + page left, the drawn page and tape as a column right ---------- */
@media (min-width: 1000px) {
  .ledgerhall { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-areas: "mark mark" "live slip" "slab slip" "slab side" "rules past" "colo colo"; gap: 20px 32px; padding-top: 22px; }
  .dealslip, .bookslab { align-self: start; }
  .dealslip-say { font-size: 40px; }
  .dealslip-live { font-size: 17px; }
  .inkbutton { font-size: 20px; min-height: 54px; }
  .bookslab { transform: perspective(1800px) rotateX(6deg) rotateZ(-1deg); transform-origin: 50% 0; margin-right: 16px; }
  .pageline { min-height: 40px; font-size: 15px; }
  .bookslab-no { font-size: 30px; }
  .sidecol { align-self: start; }
  .tapefeed-roll { max-height: 440px; }
}
@media (min-width: 1300px) {
  .dealslip-say { font-size: 44px; }
}
.pastpages, .rulebook { align-self: start; }