/* Tollwend — the gatehouse sheet. A drafting sheet: title-block rail, a surveyed road, a toll budget bar. */
:root{
  --ground:#081426; --paper:#0C1D34; --panel:#102743; --line:#1E3A5C;
  --ink:#DCE9F7; --dim:#7C9AC0; --faint:#4E7098;
  --accent:#FFD531; --accentDim:#8A7420; --shut:#E4574F;
  --rail:112px; --strip:82px;
  --disp:'Rajdhani',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  background:var(--ground); color:var(--ink); font-family:var(--mono); font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(rgba(124,154,192,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(124,154,192,.045) 1px,transparent 1px);
  background-size:28px 28px;
}
h1,h2,h3,.dispn{font-family:var(--disp); font-weight:700; letter-spacing:.02em; margin:0}
a{color:inherit}
button,input{font:inherit;color:inherit}
code{font-family:var(--mono)}

/* ---------- the title-block rail (fixed at every width: this is where the buy control lives) ---------- */
#tollbar{
  position:fixed; z-index:40; top:0; left:0; right:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:7px 10px;
  background:rgba(8,20,38,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
#tollbar::before{content:"";flex:0 0 100%;height:0;order:2}
#tollbar .stamp{display:flex;align-items:center;gap:7px;text-decoration:none;flex:0 0 auto;order:1;min-width:0}
#tollbar .stamp img{width:26px;height:26px;border-radius:3px;display:block}
#tollbar .stamp b{font-family:var(--disp);font-size:19px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
#buyTile{
  margin-left:auto; display:flex; align-items:center; gap:7px; text-decoration:none;
  border:1px solid var(--accent); background:rgba(255,213,49,.09); color:var(--accent);
  padding:5px 10px; border-radius:3px; flex:0 1 auto; order:1; min-width:0;
}
#buyTile .arm{width:16px;height:2px;background:var(--accent);display:block;transform:rotate(-38deg);transform-origin:left center;flex:0 0 16px}
#buyTile .tick{font-size:11px;font-weight:600;letter-spacing:.06em}
#buyTile .note{font-size:9.5px;color:var(--accentDim);letter-spacing:.05em;text-transform:uppercase}
#buyTile.hot{background:var(--accent);color:#08101F;box-shadow:0 0 18px rgba(255,213,49,.3)}
#buyTile.hot .arm{background:#08101F}
#buyTile.hot .note{color:rgba(8,16,31,.7)}
#linkBtn{
  flex:0 0 auto; background:transparent; border:1px solid var(--line); color:var(--dim);
  padding:5px 9px; border-radius:3px; font-size:11px; cursor:pointer; letter-spacing:.04em;
  order:4; margin-left:auto;
}
#linkBtn.on{border-color:var(--faint);color:var(--ink)}
#tollbar .ways{flex:0 1 auto; order:3; display:flex; gap:14px; align-items:center}
#tollbar .ways a{
  font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
#tollbar .ways a.here{color:var(--accent);border-bottom-color:var(--accent)}

#sheet{padding:calc(var(--strip) + 16px) 12px 28px; max-width:760px; margin:0 auto}

/* ---------- the datum strip: purse, bell, gates kept ---------- */
.datum{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:14px}
.fig{background:var(--paper);padding:11px 12px;min-width:0}
.fig .key{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.fig .val{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fig .val.lit{color:var(--accent)}
.fig .sub{font-size:10px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- the budget bar: the one number the whole game is about ---------- */
.budget{border:1px solid var(--line);background:var(--paper);padding:13px 13px 15px;margin-bottom:14px}
.budgetHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.budgetHead .lab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.budgetHead .sum{font-family:var(--mono);font-size:30px;font-weight:600;line-height:1;color:var(--accent)}
.budgetHead .sum.over{color:var(--shut)}
.budgetHead .sum em{font-style:normal;font-size:14px;color:var(--faint)}
.bar{position:relative;height:30px;background:#071021;border:1px solid var(--line);display:flex;overflow:hidden}
.seg{height:100%;border-right:2px solid var(--ground);background:var(--accent);transition:width .45s cubic-bezier(.2,.7,.3,1);min-width:2px;
  box-shadow:0 0 14px rgba(255,213,49,.35) inset}
.seg:nth-child(even){background:#E3BC22}
.seg.over,.seg.over:nth-child(even){background:var(--shut);box-shadow:none}
.bar .rest{flex:1 1 auto;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(124,154,192,.09) 6px 12px)}
.bar .limit{position:absolute;top:-3px;bottom:-3px;right:0;width:2px;background:var(--ink)}
.verdict{margin-top:9px;font-size:12px;color:var(--dim)}
.verdict b{color:var(--accent);font-weight:600}
.verdict.bad b{color:var(--shut)}

/* ---------- the road: six stations ---------- */
.stations{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px;position:relative}
.station{
  position:relative;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:0;
  padding:10px 11px 11px;cursor:pointer;display:block;width:100%;transition:border-color .15s,background .15s;
}
.station:hover{border-color:var(--faint)}
.station.picked{border-color:var(--accent);background:var(--panel);box-shadow:inset 0 0 0 1px var(--accent)}
.station.mine{border-left:3px solid var(--accent)}
.station .no{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--faint)}
.station .tollfig{font-family:var(--mono);font-size:28px;font-weight:600;line-height:1.05;letter-spacing:-.02em}
.station .tollfig .pc{font-size:13px;color:var(--faint);font-weight:400}
.station.free .tollfig{color:var(--faint)}
.station{overflow:hidden}
.station .who{font-size:10.5px;color:var(--dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.station .held{font-size:10px;color:var(--faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.station .flag{position:absolute;top:9px;right:10px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* ---------- the dial: the one action ---------- */
.dial{border:1px solid var(--line);background:var(--paper);padding:13px;margin-bottom:14px}
.dialHead{font-family:var(--disp);font-size:20px;letter-spacing:.03em;margin-bottom:3px}
.dialNote{font-size:11.5px;color:var(--dim);margin-bottom:12px}
.tollRow{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.tollRow .big{font-family:var(--mono);font-size:44px;font-weight:600;line-height:1;color:var(--accent);letter-spacing:-.03em}
.tollRow .unit{font-family:var(--mono);font-size:15px;color:var(--faint)}
.tollRow .cap{margin-left:auto;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;margin:0 0 4px;cursor:pointer;display:block;
}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:#071021;border:1px solid var(--line)}
input[type=range]::-moz-range-track{height:6px;background:#071021;border:1px solid var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:24px;background:var(--accent);border:0;margin-top:-10px;box-shadow:0 0 12px rgba(255,213,49,.4)}
input[type=range]::-moz-range-thumb{width:16px;height:24px;background:var(--accent);border:0;border-radius:0}
.ticks{display:flex;justify-content:space-between;font-size:9.5px;color:var(--faint);margin-bottom:11px}
.amtRow{display:flex;gap:8px;margin-bottom:10px}
.amtRow input[type=text]{
  flex:1 1 auto;min-width:0;background:#071021;border:1px solid var(--line);padding:9px 10px;border-radius:0;font-size:14px;
}
.amtRow input[type=text]:focus{outline:none;border-color:var(--accent)}
.amtRow .max{flex:0 0 auto;background:transparent;border:1px solid var(--line);color:var(--dim);padding:0 11px;cursor:pointer;font-size:11px}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.go{
  flex:1 1 200px;background:var(--accent);color:#08101F;border:0;padding:12px 14px;font-family:var(--disp);
  font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
.go:disabled{background:var(--line);color:var(--faint);cursor:not-allowed}
.alt{flex:1 1 140px;background:transparent;border:1px solid var(--line);color:var(--ink);padding:12px 14px;font-size:12px;cursor:pointer;letter-spacing:.04em}
.alt:hover{border-color:var(--faint)}
.preview{margin-top:10px;font-size:11.5px;color:var(--dim);border-top:1px dashed var(--line);padding-top:9px}
.preview b{color:var(--ink);font-weight:600}

/* ---------- the margin column ---------- */
.margin{display:flex;flex-direction:column;gap:14px;min-width:0}
.card{border:1px solid var(--line);background:var(--paper);padding:12px 13px}
.card h3{font-family:var(--disp);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.callout{border-left:3px solid var(--accent)}
.callout p{margin:0 0 7px;font-size:12px;color:var(--dim)}
.callout p:last-child{margin-bottom:0}
.callout b{color:var(--ink)}
.wire{list-style:none;margin:0;padding:0;font-size:11.5px}
.wire li{display:flex;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px dashed var(--line)}
.wire li:last-child{border-bottom:0}
.wire .w{color:var(--dim);white-space:nowrap}
.wire .m{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wire .t{color:var(--faint);white-space:nowrap;font-size:10px}
.wire .lit{color:var(--accent)}
.empty{font-size:12px;color:var(--faint);font-style:normal}
.legend{list-style:none;margin:0;padding:0;font-size:11.5px;color:var(--dim)}
.legend li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed var(--line)}
.legend li:last-child{border-bottom:0}
.legend b{color:var(--ink);font-weight:600;font-family:var(--mono)}

/* ---------- ledger / rules / mine ---------- */
.pageHead{margin-bottom:14px}
.pageHead h1{font-size:34px;letter-spacing:.02em;text-transform:uppercase}
.pageHead p{color:var(--dim);font-size:12.5px;margin:5px 0 0}
.rows{display:flex;flex-direction:column;gap:8px}
.row{border:1px solid var(--line);background:var(--paper);padding:11px 12px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.row .ttl{font-family:var(--disp);font-size:18px;letter-spacing:.04em}
.row .meta{font-size:11px;color:var(--dim);margin-top:2px}
.tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.tag.open{border-color:var(--accent);color:var(--accent)}
.tag.shut{border-color:var(--shut);color:var(--shut)}
.rule{border:1px solid var(--line);background:var(--paper);padding:13px;margin-bottom:9px}
.rule h3{font-family:var(--disp);font-size:20px;letter-spacing:.04em;margin-bottom:5px}
.rule p{margin:0;color:var(--dim);font-size:12.5px}
.rule ol{margin:6px 0 0;padding-left:18px;color:var(--dim);font-size:12.5px}
.rule li{margin:3px 0}

/* ---------- plate (modal) ---------- */
#plate{position:fixed;inset:0;z-index:60;background:rgba(4,10,20,.8);display:flex;align-items:flex-end;justify-content:center;padding:0}
#plate[hidden]{display:none!important}
.plateBox{background:var(--paper);border:1px solid var(--line);width:100%;max-width:520px;max-height:86vh;overflow:auto}
.plateHead{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid var(--line);font-family:var(--disp);font-size:18px;letter-spacing:.05em;text-transform:uppercase}
#plateShut{background:transparent;border:0;font-size:22px;color:var(--dim);cursor:pointer;line-height:1}
#plateBody{padding:13px}
.wl{display:flex;flex-direction:column;gap:7px}
.wl button{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);padding:10px;cursor:pointer;text-align:left}
.wl img{width:22px;height:22px;border-radius:4px}
.fine{font-size:12px;color:var(--dim);margin-bottom:10px}

/* ---------- colophon ---------- */
.colophon{border-top:1px solid var(--line);padding:14px 12px 26px;max-width:760px;margin:0 auto;color:var(--faint);font-size:11px}
.colRow{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:3px 0}
.colRow .key{letter-spacing:.12em;text-transform:uppercase;font-size:9.5px;flex:0 0 auto}
.colRow code{word-break:break-all;color:var(--dim);font-size:11px}
.colRow.small{color:var(--faint);padding-top:8px}
#copyCa{background:transparent;border:1px solid var(--line);color:var(--faint);padding:2px 7px;cursor:pointer;font-size:10px}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--accent);color:var(--ink);padding:9px 14px;font-size:12px;z-index:90;max-width:88vw}

/* ---------- ~720px: still one column, but a wider measure and a bigger instrument ---------- */
@media (min-width:720px){
  body{font-size:14px}
  #sheet{max-width:860px;padding-left:20px;padding-right:20px}
  .colophon{max-width:860px}
  .stations{grid-template-columns:repeat(3,1fr);gap:10px}
  .station .tollfig{font-size:34px}
  .budgetHead .sum{font-size:42px}
  .tollRow .big{font-size:58px}
  .fig .val{font-size:23px}
  .pageHead h1{font-size:44px}
}

/* ---------- ≥1000px: the rail turns vertical and the sheet recomposes into two columns ---------- */
@media (min-width:1000px){
  :root{--strip:0px}
  #tollbar{
    top:0;bottom:0;right:auto;width:var(--rail);
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px;padding:14px 10px;
    border-bottom:0;border-right:1px solid var(--line);
  }
  #tollbar::before{display:none}
  #linkBtn{margin-left:0}
  #tollbar .stamp{flex-direction:column;align-items:flex-start;gap:6px}
  #tollbar .stamp img{width:34px;height:34px}
  #tollbar .stamp b{font-size:16px;letter-spacing:.05em;line-height:1}
  #tollbar .ways{flex:0 0 auto;order:2;flex-direction:column;gap:7px;padding-top:0}
  #buyTile{order:3;margin-left:0;margin-top:auto;flex-direction:column;align-items:flex-start;gap:4px;padding:9px 9px 10px;line-height:1.25}
  #buyTile .note{line-height:1.2}
  #buyTile .arm{transform:rotate(-38deg);width:22px;flex:0 0 auto}
  #buyTile .tick{font-size:10.5px;letter-spacing:.02em}
  #linkBtn{width:100%;text-align:left}
  /* the rail is fixed and out of flow, so the page has to be inset by it or the sheet centres on the
     whole viewport and sits visibly off to one side */
  body{padding-left:var(--rail)}
  #sheet{
    max-width:1180px;margin:0 auto;padding:26px 26px 40px;
    display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-auto-rows:min-content;
    column-gap:20px;row-gap:16px;align-items:start;
  }
  #sheet > .datum,#sheet > .budget,#sheet > .stations,#sheet > .dial,#sheet > .pageHead,#sheet > .rows,#sheet > .rulebook{grid-column:1}
  #sheet > .margin{grid-column:2;grid-row:1 / span 20;position:sticky;top:26px}
  #sheet > .full{grid-column:1 / -1}
  .colophon{max-width:1180px;margin:0 auto;padding-left:26px;padding-right:26px}
  .stations{grid-template-columns:repeat(3,1fr)}
  .station{padding:13px 14px 14px}
  .station .tollfig{font-size:40px}
  .budgetHead .sum{font-size:52px}
  .bar{height:38px}
  .tollRow .big{font-size:68px}
  .fig .val{font-size:26px}
  .pageHead h1{font-size:52px}
  #plate{align-items:center}
  .plateBox{border-radius:0}
}
@media (min-width:1280px){
  #sheet{grid-template-columns:minmax(0,1fr) 400px}
}

/* roads behind you — collect what an earlier bell left */
.behind{list-style:none;margin:0;padding:0;font-size:11.5px}
.behind li{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px dashed var(--line)}
.behind li:last-child{border-bottom:0}
.behind .lab{font-weight:600;color:var(--ink);white-space:nowrap}
.behind .res{flex:1 1 auto;min-width:0;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.behind .res.ok{color:var(--accent)}
.behind .res.no{color:var(--shut)}
.pull{flex:0 0 auto;background:transparent;border:1px solid var(--accent);color:var(--accent);padding:4px 11px;cursor:pointer;font-size:11px;letter-spacing:.06em}
.pull:hover{background:rgba(255,213,49,.12)}
.row .pull{margin-left:8px}