/* Rollwick — a drafting sheet. Navy blueprint ground with a faint grid, one pale-blue ink for every line, white only
   for the name that is called. The page is the dial: the seat's collect figure first, the roll of names around the
   front-row seat under it. The CA hangs in a rail on the side like a dimension label running up the sheet's edge. */
:root{
  --ground:#081629; --ground2:#0C1F38; --line:#9FD9FF; --line-dim:rgba(159,217,255,.34); --line-faint:rgba(159,217,255,.1);
  --ink:#E4F1FB; --ink-dim:#8FA9C2; --hot:#F7FCFF;
  --mono:"Chivo Mono", ui-monospace, Menlo, monospace; --sans:"Public Sans", system-ui, sans-serif;
  --railw:52px;
}
*{box-sizing:border-box}
html{background:var(--ground)}
body{
  margin:0; color:var(--ink); background-color:var(--ground); font:15px/1.55 var(--sans);
  background-image:linear-gradient(var(--line-faint) 1px, transparent 1px), linear-gradient(90deg, var(--line-faint) 1px, transparent 1px);
  background-size:28px 28px; background-attachment:fixed;
  padding:0 calc(var(--railw) + 14px) 40px 16px;
  display:grid; grid-template-columns:minmax(0,1fr); overflow-x:hidden;
}
a{color:var(--line)}
code{font-family:var(--mono)}
button{font:inherit; cursor:pointer}

/* ---------- title block ---------- */
.tb{display:flex; align-items:center; gap:10px; padding:12px 0 10px; border-bottom:1px solid var(--line-dim); font-family:var(--mono); font-size:12px}
.tbMark{display:flex; align-items:center; gap:7px; color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.tbMark img{border-radius:4px}
.tbSheet{color:var(--ink-dim); display:none}
.tbNav{margin-left:auto; display:flex; gap:12px; align-items:center}
.tbNav a{color:var(--ink-dim); text-decoration:none}
.tbNav a:hover{color:var(--line)}
.penBtn{background:none; border:1px solid var(--line); color:var(--line); padding:4px 10px; border-radius:2px; font-family:var(--mono); font-size:12px}
.penBtn.on{background:var(--line); color:var(--ground)}

/* ---------- the figure ---------- */
.figBlock{padding:18px 0 4px; position:relative}
.figCap{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim)}
.seatFig{display:block; font-family:var(--mono); font-weight:800; font-size:clamp(54px, 15vw, 132px); line-height:1; letter-spacing:-.04em; color:var(--hot);
  padding:6px 0 4px; font-variant-numeric:tabular-nums; min-height:62px; transition:color .4s}
.seatFig.bump{color:var(--line)}
.figUnit{font-size:13.5px; color:var(--ink-dim); max-width:44ch}
.figUnit b{color:var(--ink); font-weight:600}

/* ---------- the dial ---------- */
.dialBay{padding:8px 0 0; display:flex; flex-direction:column; align-items:center}
.dialSvg{width:100%; max-width:420px; height:auto; display:block; overflow:visible}
.dialKey{display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; font:11px var(--mono); color:var(--ink-dim); margin-top:4px}
.dialKey span{display:flex; align-items:center; gap:5px}
.dialKey i{width:10px; height:10px; border-radius:50%; display:inline-block}
.kOpen{border:1.5px solid var(--line-dim)} .kName{background:var(--line)} .kMe{background:var(--hot); box-shadow:0 0 0 2px var(--line)} .kCall{background:var(--hot); box-shadow:0 0 8px var(--hot)}
.sc-frame{fill:none; stroke:var(--line-dim); stroke-width:1}
.sc-tick{stroke:var(--line-dim); stroke-width:1}
.sc-tick.maj{stroke:var(--line); stroke-width:1.4}
.sc-num{fill:var(--ink-dim); font:9px var(--mono); text-anchor:middle}
.sl-open{fill:var(--ground); stroke:var(--line-dim); stroke-width:2}
.sl-name{fill:var(--line); stroke:none}
.sl-me{fill:var(--hot); stroke:var(--line); stroke-width:2}
.sl-called{fill:var(--hot); filter:drop-shadow(0 0 6px #F7FCFF)}
.sl-first{fill:none; stroke:var(--hot); stroke-width:2.2; animation:beckon 1.6s ease-in-out infinite}
.sl-new{animation:landing .9s ease-out}
@keyframes beckon{0%,100%{stroke-opacity:1; r:13}50%{stroke-opacity:.35; r:17}}
@keyframes landing{0%{transform-box:fill-box; transform-origin:center; transform:scale(2.4); opacity:.2}100%{transform:scale(1); opacity:1}}
.sl-lbl{fill:var(--hot); font:700 10px var(--mono); text-anchor:middle}
.seat-ring{fill:var(--ground2); stroke:var(--line); stroke-width:2.5}
.seat-in{fill:none; stroke:var(--line-dim); stroke-width:1; stroke-dasharray:3 4}
.seat-cap{fill:var(--ink-dim); font:9px var(--mono); letter-spacing:.14em; text-anchor:middle}
.seat-who{fill:var(--hot); font:700 14px var(--mono); text-anchor:middle}
.seat-clock{fill:var(--line); font:600 12px var(--mono); text-anchor:middle}
.needle{stroke:var(--hot); stroke-width:2; stroke-linecap:round}
.needle-hub{fill:var(--hot)}
.needleG{transform-origin:200px 200px; transition:transform 1.4s cubic-bezier(.2,.9,.25,1.05)}
.needleG.sweep{animation:sweep 9s linear infinite; transition:none}
@keyframes sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.dim-line{stroke:var(--line-dim); stroke-width:1}
.dim-txt{fill:var(--ink-dim); font:9px var(--mono); text-anchor:middle}

.liveNote{margin:10px 0 0; padding:12px 14px; border-left:2px solid var(--line); background:rgba(12,31,56,.8); font-size:14.5px}
.liveNote b{color:var(--hot)}

/* ---------- the action ---------- */
.enrollDock{margin-top:16px; padding:16px; border:1px solid var(--line-dim); background:rgba(8,22,41,.9); position:relative}
.enrollDock::before{content:"ENTER"; position:absolute; top:-8px; left:12px; background:var(--ground); padding:0 6px; font:10px var(--mono); letter-spacing:.2em; color:var(--line)}
.enrollHead{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-family:var(--mono)}
.enrollHead h3{margin:0; font-size:15px; font-weight:700}
.enrollHead span{font-size:11.5px; color:var(--ink-dim)}
.tally{display:grid; grid-template-columns:52px 1fr 52px; margin:14px 0 10px; border:1px solid var(--line)}
.tally button{background:none; border:none; color:var(--line); font:500 26px var(--mono); height:56px}
.tally button:active{background:var(--line); color:var(--ground)}
.tally output{display:flex; align-items:baseline; justify-content:center; gap:6px; border-left:1px solid var(--line-dim); border-right:1px solid var(--line-dim);
  font:800 30px/56px var(--mono); color:var(--hot)}
.tally output small{font:12px var(--mono); color:var(--ink-dim)}
.oddsNote{margin:0 0 12px; font-size:13.5px; color:var(--ink-dim)}
.oddsNote b{color:var(--ink)}
.enrollBtn{width:100%; padding:15px; border:none; background:var(--line); color:var(--ground); font:700 15px var(--mono); border-radius:2px}
.enrollBtn.first{box-shadow:0 0 0 3px rgba(247,252,255,.25)}
.enrollBtn:disabled{background:transparent; border:1px dashed var(--line-dim); color:var(--ink-dim); cursor:default}
.dockFine{margin:8px 0 0; font-size:12.5px; color:var(--ink-dim)}
.liftRow{margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px dashed var(--line-dim); font-size:13.5px}
.liftRow button{background:var(--hot); color:var(--ground); border:none; padding:8px 14px; font:700 13px var(--mono)}

/* ---------- the tape ---------- */
.printTape{margin-top:22px}
.printTape h3, .sheetView h3{font:700 12px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--line); margin:0 0 8px}
.printTape ol{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-dim)}
.printTape li{display:grid; grid-template-columns:44px 1fr; gap:8px; padding:8px 0; border-bottom:1px solid var(--line-faint); font-size:13.5px}
.printTape li time{font:11px var(--mono); color:var(--ink-dim); padding-top:2px}
.printTape li.hot span{color:var(--hot); font-weight:600}
.printTape li.fresh{animation:printIn .8s ease-out}
.printTape li.cue span{color:var(--line)}
.printTape li.quiet span{color:var(--ink-dim)}
@keyframes printIn{from{background:rgba(159,217,255,.25); clip-path:inset(0 100% 0 0)}to{background:transparent; clip-path:inset(0 0 0 0)}}

/* ---------- sheet (rules / example / views) ---------- */
.sheetView{margin-top:24px; padding-top:16px; border-top:1px solid var(--line-dim)}
.workEx{font-size:14px; padding:14px; border:1px dashed var(--line-dim); background:rgba(12,31,56,.7)}
.workEx b{color:var(--hot)}
.workEx table{width:100%; border-collapse:collapse; margin-top:10px; font:12.5px var(--mono)}
.workEx td{padding:5px 0; border-bottom:1px solid var(--line-faint)}
.workEx td:last-child{text-align:right; color:var(--ink)}
.ruleList{padding-left:20px; margin:0 0 18px}
.ruleList li{margin:6px 0}
.rollRow{display:grid; grid-template-columns:40px 1fr auto; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-faint); font-size:13.5px}
.rollRow .n{font:700 13px var(--mono); color:var(--line)}
.rollRow code{font-size:11.5px; word-break:break-all}

/* ---------- footer ---------- */
.footSpec{margin-top:30px; padding-top:14px; border-top:1px solid var(--line-dim); font-size:12px; color:var(--ink-dim)}
.specRow{display:flex; gap:10px; padding:4px 0; flex-wrap:wrap}
.specRow span{min-width:92px; font-family:var(--mono)}
.specRow code{word-break:break-all; color:var(--ink)}
.specSoc a{margin-right:14px}
.specTag{margin:10px 0 0; font-family:var(--mono)}

/* ---------- the CA rail: a dimension label up the sheet's edge ---------- */
.caSlate{position:fixed; z-index:30; right:6px; top:150px; width:var(--railw);
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 0;
  background:var(--ground2); border:1px solid var(--line); border-radius:3px; box-shadow:0 6px 24px rgba(0,0,0,.45)}
.slateLbl{writing-mode:vertical-rl; font:700 10px var(--mono); letter-spacing:.16em; color:var(--line); text-transform:uppercase}
.slateAddr{writing-mode:vertical-rl; font:500 11px/1.2 var(--mono); color:var(--hot); user-select:all; -webkit-user-select:all; word-break:break-all; padding:4px 0; border-top:1px solid var(--line-dim); border-bottom:1px solid var(--line-dim)}
.slateAddr.wait{color:var(--ink-dim); user-select:none; -webkit-user-select:none}
.slateCopy{writing-mode:vertical-rl; background:var(--line); color:var(--ground); border:none; padding:10px 6px; font:700 11px var(--mono); letter-spacing:.1em; border-radius:2px}
.slateCopy:disabled{background:transparent; color:var(--ink-dim); border:1px dashed var(--line-dim); cursor:default}
.slateCopy.done{background:var(--hot)}
.slateGmgn{writing-mode:vertical-rl; font:10px var(--mono); color:var(--ink-dim); text-decoration:none}
.slateGmgn:hover{color:var(--line)}

/* ---------- modal + flash ---------- */
.modal{position:fixed; inset:0; z-index:50; background:rgba(4,10,20,.7); display:flex; align-items:flex-end; justify-content:center}
.modal[hidden]{display:none}
.modalBox{width:min(440px,100%); background:var(--ground2); border:1px solid var(--line); padding:16px}
.modalHead{display:flex; justify-content:space-between; font:700 13px var(--mono); margin-bottom:10px}
.modalHead button{background:none; border:none; color:var(--ink); font-size:20px}
.purseList button{display:flex; gap:10px; align-items:center; width:100%; padding:10px; margin:4px 0; background:none; border:1px solid var(--line-dim); color:var(--ink)}
.purseList img{width:22px; height:22px}
.flash{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60; background:var(--hot); color:var(--ground); padding:10px 16px; font:600 13px var(--mono); max-width:88vw}

/* ---------- ~720–1000: one column, wider measure, bigger dial ---------- */
@media (min-width:640px){
  :root{--railw:58px}
  body{padding-left:32px; padding-right:calc(var(--railw) + 28px); font-size:16px}
  .tbSheet{display:inline}
  .dialSvg{max-width:520px}
  .slateAddr{font-size:12.5px}
  .caSlate{top:170px; right:12px}
  .enrollDock, .liveNote{max-width:620px}
}

/* ---------- ≥1000: the sheet recomposes — dial column + a tape column; the rail becomes a proper side card ---------- */
@media (min-width:1000px){
  body{max-width:1120px; margin:0 auto 0 max(250px, calc((100vw - 1120px) / 2 + 110px)); padding:0 28px 48px 0;
    grid-template-columns:minmax(0,1fr) 360px; column-gap:44px;
    grid-template-areas:"tb tb" "fig tape" "dial tape" "note tape" "dock tape" "sheet sheet" "foot foot"; align-content:start}
  .tb{grid-area:tb} .figBlock{grid-area:fig} .dialBay{grid-area:dial} .liveNote{grid-area:note; max-width:none}
  .enrollDock{grid-area:dock; max-width:none} .printTape{grid-area:tape; margin-top:18px; align-self:start; position:sticky; top:16px}
  .sheetView{grid-area:sheet} .footSpec{grid-area:foot}
  .dialSvg{max-width:560px}
  .seatFig{font-size:128px}
  .caSlate{left:24px; right:auto; top:50%; transform:translateY(-50%); width:200px; align-items:stretch; padding:16px; gap:12px}
  .slateLbl, .slateAddr, .slateCopy, .slateGmgn{writing-mode:horizontal-tb}
  .slateAddr{font-size:13px; line-height:1.45; padding:10px 0}
  .slateCopy{padding:10px; font-size:12px}
  .slateGmgn{font-size:11px}
}