/* Knollcall — the dial. Neon sign on a blue-black ground: white tube for a lone voice, amber tube for a pair,
   figures in the mono so the digit 1 never turns into a bare stroke. Phone first, a wider measure at 640,
   and the knoll recomposes into dial + echo column at 1000. */
:root{
  --ground:#06080D; --panel:#0C1018; --panel2:#111724;
  --ink:#EDF3FF; --dim:rgba(237,243,255,.58); --faint:rgba(237,243,255,.34);
  --line:rgba(237,243,255,.12); --line2:rgba(237,243,255,.22);
  --amber:#FFB454; --amberdim:rgba(255,180,84,.14); --amberline:rgba(255,180,84,.5); --amberglow:rgba(255,180,84,.45);
  --tube:#DDEBFF; --tubeglow:rgba(221,235,255,.55);
  --dead:#5C6B85;
  --beacon:104px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font:400 15px/1.5 "Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding:var(--beacon) 0 0 0;
}
h1,h2,h3,.neon{font-family:"Tilt Neon","Space Grotesk",sans-serif;font-weight:400;letter-spacing:.01em}
.num{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:default;opacity:.5}

/* ---------- the beacon: fixed across the top at every width ---------- */
#beacon{
  position:fixed; top:0; left:0; right:0; z-index:40;
  background:rgba(6,8,13,.94); border-bottom:1px solid var(--line2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.marq{display:flex;align-items:center;gap:10px;padding:9px 12px 6px}
.marqname{display:flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto}
.marqname img{width:26px;height:26px;border-radius:50%;display:block;box-shadow:0 0 12px var(--tubeglow)}
.marqname b{font-family:"Tilt Neon",sans-serif;font-weight:400;font-size:17px;letter-spacing:.03em;color:var(--tube);text-shadow:0 0 8px var(--tubeglow)}
.wire{flex:1;display:flex;gap:13px;justify-content:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.wire a{color:var(--faint);text-decoration:none;padding:2px 0;border-bottom:1px solid transparent;white-space:nowrap}
.wire a[aria-current]{color:var(--amber);border-bottom-color:var(--amber);text-shadow:0 0 8px var(--amberglow)}
.plug{flex:0 0 auto;min-height:34px;padding:0 12px;border:1px solid var(--line2);border-radius:999px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.plug[data-on="1"]{color:var(--ink);border-color:var(--tube);box-shadow:0 0 10px var(--tubeglow)}
.cabar{display:flex;align-items:center;gap:8px;padding:0 12px 9px;min-height:38px}
.catag{display:none;color:var(--amber);font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;text-shadow:0 0 8px var(--amberglow)}
.caaddr{
  flex:1; min-width:0; font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; letter-spacing:0;
  font-variant-ligatures:none; color:var(--ink); white-space:nowrap; user-select:all; -webkit-user-select:all;
  padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:rgba(12,16,24,.9);
}
.caaddr[data-live="0"]{color:var(--faint);font-family:"Space Grotesk",sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.cacopy{flex:0 0 auto;min-height:30px;padding:0 10px;border:1px solid var(--amberline);border-radius:6px;background:var(--amberdim);color:var(--amber);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.cacopy[data-done="1"]{background:var(--amber);color:#1A1000;box-shadow:0 0 14px var(--amberglow)}
.cagm{display:none;flex:0 0 auto;color:var(--faint);font-size:11px;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.cagm:hover{color:var(--ink)}
@media (max-width:359px){ .caaddr{font-size:10px} }

/* ---------- the knoll ---------- */
#knoll{width:100%;max-width:600px;margin:0 auto;padding:16px 16px 28px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}

.dialpane{min-width:0}
.kicker{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 8px}
.dialpane h1{font-size:34px;line-height:1.08;margin:0 0 8px;color:var(--tube);text-shadow:0 0 12px var(--tubeglow)}
.lede{color:var(--dim);font-size:13.5px;line-height:1.62;margin:0 0 14px}

/* the one object: the dial */
.dial{position:relative;width:100%;max-width:430px;margin:0 auto}
.dialface{width:100%;height:auto;display:block}
.dialface .tick{transition:stroke .3s}
.dialface .tick[data-s="quiet"]{stroke:rgba(237,243,255,.16);stroke-width:2}
.dialface .tick[data-s="alone"]{stroke:var(--tube);stroke-width:3;filter:url(#glowTube)}
.dialface .tick[data-s="pair"]{stroke:var(--amber);stroke-width:3.4;filter:url(#glowAmber)}
.dialface .tick[data-s="standing"],.dialface .tick[data-s="echo"]{stroke:var(--amber);stroke-width:5;filter:url(#glowAmber)}
.dialface .tick[data-s="crowd"]{stroke:var(--dead);stroke-width:3;opacity:.8}
.dialface .tick[data-pick="1"]{stroke-width:6}
.dialface .tap{fill:transparent;cursor:pointer}
.dialface .tap:hover + .tick{stroke:var(--ink)}
.dialface .lbl{fill:var(--faint);font-family:"JetBrains Mono",monospace;font-size:11px}
.dialface .lbl[data-pick="1"]{fill:var(--amber)}
.needle{transform-origin:200px 200px;transition:transform .7s cubic-bezier(.2,.9,.3,1.1)}
.needle line{stroke:var(--amber);stroke-width:3;stroke-linecap:round;filter:url(#glowAmber)}
.needle[data-off="1"] line{stroke:var(--dead);filter:none;opacity:.55}
.needle polygon{fill:var(--amber);filter:url(#glowAmber)}
.needle[data-off="1"] polygon{fill:var(--dead);filter:none;opacity:.55}
.pickring{fill:none;stroke:var(--amber);stroke-width:2;stroke-dasharray:3 3;opacity:.9}
.readnum{fill:var(--amber);font-family:"JetBrains Mono",monospace;font-weight:600;font-size:66px;filter:url(#glowAmber)}
.readnum[data-off="1"]{fill:var(--dead);filter:none}
.readlbl{fill:var(--faint);font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.readpot{fill:var(--ink);font-family:"JetBrains Mono",monospace;font-size:14px}
.readpot tspan{fill:var(--dim);font-family:"Space Grotesk",sans-serif;font-size:11px}
.readclock{fill:var(--dim);font-family:"JetBrains Mono",monospace;font-size:12px}
.readfoot{fill:var(--faint);font-family:"Space Grotesk",sans-serif;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}

/* the action: pick a number, make the call */
.callbox{margin:14px auto 0;max-width:430px;display:grid;gap:10px}
.numpick{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;gap:8px;align-items:stretch}
.numpick button{height:60px;border:1px solid var(--line2);border-radius:10px;font-size:24px;color:var(--ink);background:var(--panel)}
.numpick button:active{background:var(--panel2)}
.numval{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--amberline);border-radius:10px;background:var(--amberdim);height:60px}
.numval b{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:30px;line-height:1;color:var(--amber);text-shadow:0 0 12px var(--amberglow)}
.numval s{text-decoration:none;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.callbtn{min-height:56px;width:100%;border-radius:12px;background:var(--amber);color:#1A1000;font-weight:600;font-size:16px;letter-spacing:.03em;box-shadow:0 0 22px var(--amberglow)}
.callbtn:disabled{background:var(--panel2);color:var(--faint);box-shadow:none;opacity:1;border:1px solid var(--line)}
.callnote{margin:0;font-size:12.5px;line-height:1.5;color:var(--dim);text-align:center;min-height:38px}
.callnote b{color:var(--ink)}

/* the tally: fifty cells */
.tallywrap{margin-top:18px}
.tallyhead{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px}
.tallyhead h2{font-size:18px;margin:0;color:var(--tube)}
.tallyhead em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tally{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.tallycell{aspect-ratio:1;border:1px solid var(--line);border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:var(--faint);background:var(--panel);cursor:pointer;padding:0;position:relative}
.tallycell b{font-family:"JetBrains Mono",monospace;font-weight:500;font-size:12px;line-height:1}
.tallycell i{display:flex;gap:2px;height:4px}
.tallycell i::before,.tallycell i::after{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0}
.tallycell[data-v="alone"]{color:var(--tube);border-color:rgba(221,235,255,.4);box-shadow:inset 0 0 8px rgba(221,235,255,.12)}
.tallycell[data-v="alone"] i::before{opacity:1}
.tallycell[data-v="pair"]{color:var(--amber);border-color:var(--amberline);background:var(--amberdim)}
.tallycell[data-v="pair"] i::before,.tallycell[data-v="pair"] i::after{opacity:1}
.tallycell[data-v="standing"],.tallycell[data-v="echo"]{color:#1A1000;background:var(--amber);border-color:var(--amber);box-shadow:0 0 12px var(--amberglow)}
.tallycell[data-v="standing"] i::before,.tallycell[data-v="standing"] i::after,.tallycell[data-v="echo"] i::before,.tallycell[data-v="echo"] i::after{opacity:1}
.tallycell[data-v="crowd"]{color:var(--dead);border-color:rgba(92,107,133,.5)}
.tallycell[data-v="crowd"] b{text-decoration:line-through}
.tallycell[data-pick="1"]{outline:2px solid var(--amber);outline-offset:1px}
.tallynote{margin:8px 0 0;font-size:12px;color:var(--faint);line-height:1.5}

/* ---------- the echo column ---------- */
.echopane{min-width:0}
.pane{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px 13px;margin:0 0 12px}
.panehead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 8px}
.panehead h3{margin:0;font-size:15px;color:var(--tube)}
.panehead span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.dim{color:var(--faint);font-size:12.5px;margin:0;line-height:1.55}
.standrow{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.standrow > b{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:40px;line-height:1;color:var(--amber);text-shadow:0 0 12px var(--amberglow)}
.standrow > b[data-off="1"]{color:var(--dead);text-shadow:none}
.standrow p{margin:0;font-size:12.5px;color:var(--dim);line-height:1.5}
.standrow p b{color:var(--ink)}
.taperow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:12.5px}
.taperow:first-of-type{border-top:0}
.taperow i{font-style:normal;font-family:"JetBrains Mono",monospace;font-weight:600;color:var(--amber);font-size:15px}
.taperow[data-k="alone"] i{color:var(--tube)}
.taperow[data-k="crowd"] i{color:var(--dead)}
.taperow[data-k="quiet"] i{color:var(--dead)}
.taperow em{font-style:normal;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.taperow u{text-decoration:none;color:var(--faint);font-size:11px;white-space:nowrap}
.ledrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:12.5px}
.ledrow:first-of-type{border-top:0}
.ledrow b{font-family:"JetBrains Mono",monospace;font-weight:500;color:var(--faint)}
.ledrow em{font-style:normal;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledrow u{text-decoration:none;font-family:"JetBrains Mono",monospace;color:var(--amber)}
.ledrow[data-quiet="1"] u{color:var(--dead)}
.primer ul{margin:0;padding-left:17px;color:var(--dim);font-size:12.5px;line-height:1.55}
.primer li{margin:4px 0}
.primer b{color:var(--ink)}
.statgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.statgrid div{border:1px solid var(--line);border-radius:8px;padding:8px 6px;text-align:center}
.statgrid dt{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.statgrid dd{margin:3px 0 0;font-family:"JetBrains Mono",monospace;font-size:16px;color:var(--ink)}

/* ---------- pages ---------- */
.page h2{font-size:26px;margin:0 0 10px;color:var(--tube);text-shadow:0 0 12px var(--tubeglow)}
.page p{color:var(--dim);font-size:14px;line-height:1.62;margin:0 0 12px}
.page p b{color:var(--ink)}
.wide{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ledger{width:100%;border-collapse:collapse;font-size:12.5px}
.ledger th,.ledger td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.ledger th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500}
.ledger td.num{color:var(--ink)}
.take{min-height:32px;padding:0 12px;border-radius:8px;background:var(--amber);color:#1A1000;font-weight:600;font-size:12px}

/* ---------- the footer ---------- */
.hush{border-top:1px solid var(--line);padding:16px 0 8px;font-size:12px;color:var(--faint)}
.hushrow{margin:4px 0;line-height:1.5}
.hushrow a{color:var(--dim)}
.hushrow code{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--dim);word-break:break-all}

/* ---------- the gate (a sheet on a phone, a card on a desk) ---------- */
#gate{position:fixed;inset:0;z-index:60;background:rgba(3,5,9,.82);display:flex;align-items:flex-end;justify-content:center}
.gatebox{width:100%;max-width:520px;background:var(--panel2);border:1px solid var(--line2);border-radius:16px 16px 0 0;padding:14px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.gatehead{display:flex;justify-content:space-between;align-items:center;font-family:"Tilt Neon",sans-serif;font-size:19px;color:var(--tube);margin:0 0 6px}
.gateshut{font-size:26px;width:36px;height:36px;color:var(--dim)}
.gatebody p{margin:8px 0;font-size:14px;line-height:1.55;color:var(--dim)}
.gatebody p b{color:var(--ink)}
.gatebody .dim{font-size:12px}
.strike{margin-top:12px;min-height:52px;width:100%;border-radius:12px;background:var(--amber);color:#1A1000;font-weight:600;font-size:15px;box-shadow:0 0 18px var(--amberglow)}
.wellpick button{display:flex;gap:10px;align-items:center;width:100%;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;margin:6px 0;font-size:14px}
.wellpick img{width:22px;height:22px;border-radius:5px}

/* ---------- the flare (toast) ---------- */
.flare{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--beacon) + 12px);z-index:70;background:var(--amber);color:#1A1000;padding:10px 14px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:0 0 24px var(--amberglow);max-width:min(92vw,520px);text-align:center}

/* ---------- wider phones and tablets: one column, a wider measure ---------- */
@media (min-width:640px){
  #knoll{max-width:760px;padding:24px 24px 32px;gap:24px}
  .dialpane h1{font-size:40px}
  .lede{font-size:15px}
  .dial{max-width:540px}
  .callbox{max-width:540px}
  .catag{display:inline}
  .cagm{display:inline}
  .caaddr{font-size:12.5px}
  .cacopy{font-size:12px;min-height:32px}
  .marqname b{font-size:19px}
  .wire{gap:18px;font-size:12px}
  #gate{align-items:center}
  .gatebox{border-radius:16px;padding-bottom:20px}
  .statgrid dd{font-size:18px}
}

/* ---------- the desk: the beacon becomes one row, the knoll recomposes into dial + echo column ---------- */
@media (min-width:1000px){
  :root{--beacon:64px}
  #beacon{display:flex;align-items:center;gap:22px;padding:0 22px;height:var(--beacon)}
  .marq{display:contents}
  .marqname{order:1}
  .cabar{order:2;flex:1;padding:0;justify-content:center;min-height:0;max-width:720px;margin:0 auto}
  .caaddr{flex:0 1 auto;font-size:13px;padding:7px 12px}
  .wire{order:3;flex:0 0 auto;justify-content:flex-end}
  .plug{order:4}
  #knoll{max-width:1180px;padding:30px 28px 44px;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"dial echo" "hush hush";gap:28px 36px;align-items:start}
  .dialpane{grid-area:dial}
  .echopane{grid-area:echo;position:sticky;top:calc(var(--beacon) + 22px);max-height:calc(100vh - var(--beacon) - 44px);overflow:auto;padding-right:2px}
  .hush{grid-area:hush}
  .dialpane h1{font-size:46px}
  .kicker{font-size:12px}
  .dial{max-width:620px}
  .callbox{max-width:620px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .callbox .callnote{grid-column:1 / -1}
  .numpick button{height:64px}
  .numval{height:64px}
  .callbtn{min-height:64px;font-size:17px}
  .tallywrap{margin-top:24px}
  .flare{top:calc(var(--beacon) + 16px)}
}
@media (min-width:1240px){
  #knoll{grid-template-columns:minmax(0,1fr) 430px}
}