/* plus60.football — 2026-08-15 build. Hand-written, no bundler.
   Edit these files directly; there is no compile step. */
:root{
  /* ── Chalk and Turf ──────────────────────────────────────────────
     Paper stays light, but the greys are warmed toward green so the
     mown-turf band under the board belongs rather than sits on top.
     Neon is reserved for one meaning: this is on, this is bookable.
     Amber carries "watching it", ink carries "called off". */
  --paper:#F2F0E7; --card:#FFFFFF; --card2:#F6F4EC;
  --ink:#0E1A12; --ink2:#33453A; --mu:#63745F; --mu2:#7C8C78;
  --rule:#D6DCD0; --rule2:#BFC9B8;
  --acid:#D9F035; --acid-dk:#3C6B1F; --acid-soft:#EAF6C8;
  --hot:#B4560C; --hot-soft:#FAECDC; --gone:#97A394;
  /* Status green. Reserved for one meaning — this is settled, the money is in —
     and deliberately not the acid accent, which means a game is live. Validated
     at 5.46:1 on its own ground and 5.62:1 on paper. */
  --ok:#2F6B33; --ok-soft:#E4F0E2;
  /* deep pitch green: the header band, section rules, structure */
  --pitch:#1E4D2B; --pitch-2:#173D22; --pitch-ink:#F2F0E7;
  /* the mown stripes, two shades a hair apart */
  --turf-a:#EAEEE3; --turf-b:#F2F0E7;
  /* Display is Inter Tight 800 under a single-weight alias, Inter does the rest.
     --osw kept as the variable name so every label rule still points at one place. */
  /* ── the colour rule, console ────────────────────────────────────
     Acid green means one thing: the state of a game right now. The
     kick-off countdown, the slot meter, the published status, the live
     dot, and the one button you press. Nothing else is green.
       ink fill  = what you have selected
       amber     = something needs you
       everything else is paper, ink and warm grey
     A console a host reads every day should be quiet. The board can shout. */
  --sel:#0E1A12; --sel-ink:#F2F0E7;
  --blk:'display','Inter Tight',Inter,-apple-system,sans-serif;
  --osw:Inter,-apple-system,'Helvetica Neue',sans-serif;
  --sans:Inter,-apple-system,'Helvetica Neue',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
body:before{content:'';position:fixed;inset:0;z-index:999;pointer-events:none;
  background-image:radial-gradient(#101010 1px,transparent 1px);background-size:5px 5px;opacity:.045}
img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.w{max-width:1200px;margin:0 auto;padding:0 18px}
.blkf{font-family:var(--blk);letter-spacing:-.03em}
.mono{font-family:var(--osw);letter-spacing:.06em;text-transform:uppercase}

/* ── login ── */
#login{min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(20px,6vh,64px) 16px 48px}
.lg{width:100%;max-width:460px}
.lg .mk{display:flex;align-items:center;gap:11px;font-family:var(--blk);font-size:26px;letter-spacing:-1.2px}
.lg .mk img{height:40px;width:auto;display:block}
.lg .mk i{font-style:normal}
.lg .sub{font-family:var(--osw);font-size:10.9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mu);margin-top:10px}
.lg .box{border:3px solid var(--ink);background:var(--card);padding:20px;margin-top:14px;box-shadow:7px 7px 0 var(--ink)}
.lg h2{font-family:var(--blk);font-size:19px;letter-spacing:-.5px;text-transform:uppercase;margin-bottom:16px}
.lg .or{display:flex;align-items:center;gap:10px;margin:16px 0 14px;font-family:var(--osw);font-size:9.8px;
  letter-spacing:.09em;color:var(--mu2);text-transform:uppercase}
.lg .or:before,.lg .or:after{content:'';flex:1;height:1.5px;background:var(--rule)}
.lg .note{font-family:var(--osw);font-size:9.8px;font-weight:300;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mu2);margin-top:16px;line-height:1.8;text-align:center}

/* ── shell ── */
#app{display:none}
#app.on{display:block}
.tbar{position:sticky;top:0;z-index:60;background:var(--pitch);color:var(--pitch-ink);
  border-bottom:3px solid var(--ink)}
.tbar .in{display:flex;align-items:center;gap:12px;padding:11px 0}
.tbar .mk{display:flex;align-items:center;gap:9px;font-family:var(--blk);font-size:19px;letter-spacing:-.9px}
.tbar .mk img{height:30px;width:auto;display:block}
.tbar .mk i{font-style:normal;font-size:11px;font-family:var(--osw);font-weight:600;letter-spacing:.07em;
  color:rgba(242,240,231,.65)}
.orgc{display:flex;align-items:center;gap:8px;border:1.5px solid var(--card);padding:5px 9px;
  background:var(--card);color:var(--ink);
  font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.orgc b{width:7px;height:7px;background:var(--acid);border:1px solid var(--ink);flex:none}
.orgc{border-color:var(--rule2);background:var(--card2)}
.orgc.adm{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.orgc.adm b{background:var(--paper);border-color:var(--paper)}
.tbar .r{margin-left:auto;display:flex;align-items:center;gap:8px}
.tbtn{font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  border:1.5px solid rgba(242,240,231,.5);background:rgba(0,0,0,.14);padding:7px 10px;color:var(--pitch-ink)}
.tbtn:hover{border-color:var(--ink);background:var(--card2)}
.nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:9px}
.nav::-webkit-scrollbar{display:none}
.nav button{flex:none;font-family:var(--osw);font-size:11.4px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;border:1.5px solid transparent;background:var(--card);padding:8px 13px;color:var(--ink2)}
.nav button:hover{border-color:var(--ink)}
.nav button.on{background:var(--pitch-2);border-color:var(--acid);color:var(--acid);font-weight:700}
.asbar{background:var(--ink);color:var(--acid);font-family:var(--osw);font-size:10.4px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;padding:8px 0}
.asbar .in{display:flex;align-items:center;gap:12px}
.asbar button{margin-left:auto;border:1.5px solid var(--acid);padding:4px 9px;font-size:9px;font-weight:600}
main{padding:22px 0 90px}

/* ── page furniture ── */
.ph{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.ph h1{font-family:var(--blk);font-size:clamp(21px,4.4vw,29px);letter-spacing:-1px;line-height:1.05;text-transform:uppercase}
.ph .sub{font-family:var(--osw);font-size:10.9px;font-weight:300;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mu);margin-top:7px}
.ph .r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.sec{font-family:var(--osw);font-size:10.9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);padding-bottom:9px;border-bottom:1.5px solid var(--ink);margin:26px 0 14px}
.card{border:1.5px solid var(--rule2);background:var(--card);padding:16px;margin-bottom:12px}
.card.k{border:1.5px solid var(--ink)}
.card h3{font-family:var(--blk);font-size:16px;letter-spacing:-.4px;text-transform:uppercase;line-height:1.15}
.card .cs{font-family:var(--osw);font-size:10.4px;font-weight:300;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mu);margin-top:6px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{border:1.5px solid var(--ink);background:var(--card);padding:14px}
.kpi .k{font-family:var(--osw);font-size:9.8px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.kpi .v{font-family:var(--blk);font-size:27px;letter-spacing:-1.2px;margin-top:7px;line-height:1}
.kpi .d{font-family:var(--osw);font-size:9.8px;font-weight:300;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mu2);margin-top:7px}
.kpi.acc{background:var(--card);border-width:2px;box-shadow:3px 3px 0 var(--ink)}
.kpi.acc .k,.kpi.acc .d{color:var(--mu)}
@media(max-width:820px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── tables ── */
.tw{border:1.5px solid var(--ink);background:var(--card);overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:600px}
th{font-family:var(--osw);font-size:9.8px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mu);text-align:left;padding:11px 12px;border-bottom:1.5px solid var(--ink);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--rule);font-size:13.5px;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--card2)}
td b{font-weight:700}
td .s2{display:block;font-family:var(--osw);font-size:9.8px;font-weight:300;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mu);margin-top:3px}
.num{font-family:var(--osw);font-size:13px;font-weight:500;letter-spacing:.02em}
.rt{text-align:right}

/* ── badges ── */
.bg{display:inline-flex;align-items:center;gap:5px;font-family:var(--osw);font-size:9.3px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;padding:4px 7px;border:1.5px solid var(--ink);background:var(--card);
  white-space:nowrap}
/* .bg.live is the only badge that carries the accent: the game itself */
.bg.live{background:var(--acid)}
.bg.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.bg.mut{background:var(--card);border-color:var(--rule2);color:var(--mu)}
.bg.hot{background:var(--card);border-color:var(--hot);color:var(--hot)}
.bg.dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bg.soft{background:var(--card2);border-color:var(--rule2);color:var(--ink2)}

/* ── controls ── */
.f{margin-bottom:13px}
.f label{display:block;font-family:var(--osw);font-size:10.4px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mu);margin-bottom:6px}
.f .hint{font-family:var(--osw);font-size:9.8px;font-weight:300;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mu2);margin-top:6px;line-height:1.7}
.inp,select.inp,textarea.inp{width:100%;background:var(--card);border:1.5px solid var(--rule2);padding:11px;
  font-size:15px;border-radius:0;transition:.12s}
textarea.inp{resize:vertical;min-height:92px;line-height:1.55;font-size:14.5px}
.inp:focus{outline:none;border-color:var(--ink);box-shadow:3px 3px 0 var(--rule2)}
.inp::placeholder{color:var(--mu2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 15px;
  font-family:var(--osw);font-size:11.4px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid var(--ink);transition:.12s;white-space:nowrap}
.btn-a{background:var(--acid);color:var(--ink)}
.btn-o{background:var(--card);color:var(--ink)}
.btn-k{background:var(--ink);color:var(--acid)}
.btn-x{background:var(--card);color:var(--hot);border-color:var(--hot)}
.btn:hover{box-shadow:3px 3px 0 var(--ink)}
.btn-k:hover{box-shadow:3px 3px 0 var(--mu)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.sm{padding:7px 10px;font-size:9px;letter-spacing:.14em}
.btn svg{width:14px;height:14px}
.stp{display:flex;align-items:center;border:1.5px solid var(--ink);background:var(--card);width:fit-content}
.stp button{width:38px;height:40px;font-family:var(--blk);font-size:18px;line-height:1;display:flex;
  align-items:center;justify-content:center}
.stp button:hover{background:var(--card2)}
.stp .v{min-width:52px;text-align:center;font-family:var(--blk);font-size:19px;letter-spacing:-.6px;
  border-left:1.5px solid var(--ink);border-right:1.5px solid var(--ink);padding:8px 4px}
.stp.lock .v{background:var(--card2);color:var(--mu)}
.shint{font-family:var(--osw);font-size:9.8px;font-weight:300;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mu2);margin-top:7px;line-height:1.6}
.segs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.segs button{border:1.5px solid var(--rule2);background:var(--card);padding:11px 6px;font-family:var(--osw);
  font-size:10.4px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);line-height:1.35}
.segs button i{display:block;font-style:normal;font-size:8px;font-weight:300;color:var(--mu2);margin-top:4px}
.segs button.on{background:var(--acid);border-color:var(--ink);color:var(--ink);font-weight:700}
.segs button.on i{color:var(--acid-dk)}
.segs button.on.watch{background:var(--hot-soft);border-color:var(--hot);color:var(--hot)}
.segs button.on.off{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.segs button.on.off i{color:var(--mu2)}
@media(max-width:520px){.segs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
@media(max-width:560px){.chks{grid-template-columns:minmax(0,1fr)}}
.chk{display:flex;align-items:center;gap:10px;border:1.5px solid var(--rule2);background:var(--card);
  padding:10px;font-size:13.5px;cursor:pointer;transition:.12s;text-align:left;width:100%}
.chk:hover{border-color:var(--ink)}
.chk .bx{width:17px;height:17px;border:1.5px solid var(--ink);flex:none;position:relative;background:var(--card)}
.chk.on{border-color:var(--ink);background:var(--card2)}
.chk.on .bx{background:var(--sel)}
.chk.on .bx:after{content:'';position:absolute;left:4px;top:1px;width:5px;height:10px;border:solid var(--sel-ink);
  border-width:0 2px 2px 0;transform:rotate(45deg)}
.chk .pz{margin-left:auto;font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.05em;color:var(--ink2)}
.sw{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.sw:last-child{border-bottom:0}
.sw .opts{margin-left:auto;display:flex;gap:0;border:1.5px solid var(--ink)}
.sw .opts button{font-family:var(--osw);font-size:9.3px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 9px;border-right:1.5px solid var(--ink);color:var(--mu)}
.sw .opts button:last-child{border-right:0}
.sw .opts button.on{background:var(--sel);color:var(--sel-ink);font-weight:700}
.radl{display:flex;flex-direction:column;gap:7px}
.rad{display:flex;align-items:flex-start;gap:11px;border:1.5px solid var(--rule2);background:var(--card);
  padding:12px;cursor:pointer;transition:.12s;text-align:left;width:100%}
.rad:hover{border-color:var(--ink)}
.rad.on{border-color:var(--ink);background:var(--card2);box-shadow:3px 3px 0 var(--rule2)}
.rad .rd{width:16px;height:16px;border:1.5px solid var(--ink);flex:none;margin-top:2px;position:relative;background:#fff}
.rad.on .rd:after{content:'';position:absolute;inset:3px;background:var(--ink)}
.rad b{display:block;font-size:14px;font-weight:700}
.rad span{display:block;font-size:12.5px;color:var(--mu);margin-top:4px;line-height:1.5}

/* ── status + notices ── */
.pub{border:1.5px solid var(--ink);background:var(--card);padding:13px;margin-bottom:14px}
.pub .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pub .lb{font-family:var(--blk);font-size:14px;letter-spacing:-.3px;text-transform:uppercase;
  background:var(--acid);border:1.5px solid var(--ink);padding:5px 8px}
.pub .ts{font-family:var(--osw);font-size:9.8px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.pub p{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.pub.watch{border-color:var(--hot);background:var(--hot-soft)}
.pub.watch .lb{background:var(--card);border-color:var(--hot);color:var(--hot)}
.pub.off{border-color:var(--ink);background:var(--ink)}
.pub.off .lb{background:var(--paper)}
.pub.off p{color:#E4E0D4}.pub.off .ts{color:var(--mu2)}
.pub.none{border-style:dashed;border-color:var(--rule2);background:var(--card2)}
.pub.none .lb{background:var(--card);border-color:var(--rule2);color:var(--mu)}
.note{border:1.5px solid var(--rule2);border-left:4px solid var(--ink2);background:var(--card);
  padding:11px 13px;font-size:13px;color:var(--ink2);line-height:1.6}
.note.warn{border-left-color:var(--hot)}
.log{list-style:none;margin-top:12px}
.log li{position:relative;padding-left:20px;padding-bottom:12px;border-left:1.5px solid var(--rule);margin-left:4px}
.log li:last-child{padding-bottom:0}
.log li:before{content:'';position:absolute;left:-6px;top:4px;width:9px;height:9px;background:var(--ink2);
  border:1.5px solid var(--ink)}
.log li.watch:before{background:var(--hot)}
.log li.off:before{background:var(--ink)}
.log .t{font-family:var(--osw);font-size:9.8px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.log .m{font-size:13px;color:var(--ink2);margin-top:4px;line-height:1.5}
.empty{border:1.5px dashed var(--rule2);background:var(--card2);padding:36px 18px;text-align:center;
  font-family:var(--osw);font-size:11.4px;letter-spacing:.07em;text-transform:uppercase;color:var(--mu)}
.empty b{display:block;font-family:var(--blk);font-size:18px;letter-spacing:-.4px;color:var(--ink);
  margin-bottom:9px;text-transform:uppercase}

/* ── photos ── */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
@media(max-width:820px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pslot{border:1.5px dashed var(--rule2);background:var(--card2);aspect-ratio:4/3;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:.12s;
  font-family:var(--osw);font-size:9.3px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.pslot:hover{border-color:var(--ink);border-style:solid;background:var(--card)}
.pslot svg{width:22px;height:22px;color:var(--mu2)}

/* ── modal ── */
.scrim{position:fixed;inset:0;z-index:200;background:rgba(16,16,16,.6);opacity:0;transition:.2s;pointer-events:none}
.scrim.on{opacity:1;pointer-events:auto}
.modal{position:fixed;left:0;right:0;bottom:0;z-index:210;background:var(--paper);border-top:3px solid var(--ink);
  max-height:94dvh;display:flex;flex-direction:column;transform:translateY(102%);pointer-events:none;
  transition:transform .26s cubic-bezier(.2,.85,.3,1)}
.modal.on{transform:translateY(0);pointer-events:auto}
@media(min-width:760px){
  .modal{left:50%;right:auto;bottom:auto;top:50%;width:720px;max-height:90vh;border:3px solid var(--ink);
    transform:translate(-50%,-42%);opacity:0;transition:.22s cubic-bezier(.2,.85,.3,1);box-shadow:9px 9px 0 rgba(16,16,16,.25)}
  .modal.on{transform:translate(-50%,-50%);opacity:1}
}
.mhd{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border-bottom:3px solid var(--ink);flex:0 0 auto}
.mhd h2{font-family:var(--blk);font-size:19px;letter-spacing:-.6px;line-height:1.08;text-transform:uppercase}
.mhd .sub{font-family:var(--osw);font-size:10.4px;font-weight:300;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mu);margin-top:7px}
.mhd .x{margin-left:auto;width:32px;height:32px;border:1.5px solid var(--ink);display:flex;align-items:center;
  justify-content:center;flex:none;background:var(--card)}
.mtabs{display:flex;gap:4px;padding:11px 16px 0;flex:0 0 auto;overflow-x:auto;scrollbar-width:none}
.mtabs::-webkit-scrollbar{display:none}
.mtabs button{flex:none;font-family:var(--osw);font-size:10.4px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;border:1.5px solid var(--rule2);border-bottom:0;background:var(--card2);padding:8px 12px;color:var(--mu)}
.mtabs button.on{background:var(--card);border-color:var(--ink);color:var(--ink);font-weight:700}
.mbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px}
.mfoot{flex:0 0 auto;position:relative;z-index:2;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:3px solid var(--ink);background:var(--paper);display:flex;align-items:center;gap:10px}
.mfoot:empty{display:none}
.wcount{font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mu);background:var(--card2);border:1px solid var(--rule2);padding:3px 6px}
.wcount.over{color:var(--hot);background:var(--hot-soft);border-color:var(--hot)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:300;background:var(--ink);
  color:var(--acid);padding:12px 17px;font-family:var(--osw);font-size:11.4px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;max-width:calc(100% - 32px);text-align:center;opacity:0;transition:.2s;pointer-events:none}
.toast.on{opacity:1}
.prev{border:1.5px solid var(--ink);background:var(--paper);padding:14px}
.prow{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1.5px solid var(--rule)}
.prow .t{font-family:var(--blk);font-size:19px;letter-spacing:-.9px;line-height:1}
.prow .t i{display:block;font-style:normal;font-family:var(--osw);font-size:9.8px;font-weight:300;
  letter-spacing:.05em;color:var(--mu);margin-top:5px}
.prow h4{font-family:var(--blk);font-size:14.5px;letter-spacing:-.3px;text-transform:uppercase}
.prow .mt{font-family:var(--osw);font-size:9.8px;font-weight:300;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mu);margin-top:5px}


/* ══════════════════════════════════════════════════════════════════
   MOBILE — a host publishing a status at the gate is on a phone,
   in the dark, one-handed. Everything below is for that person.
   ══════════════════════════════════════════════════════════════════ */

@media(hover:none){
  .btn:active{box-shadow:2px 2px 0 var(--ink);transform:translate(1px,1px)}
  .nav button:active,.tbtn:active,.chk:active,.rad:active{border-color:var(--ink);background:var(--card2)}
  .stp button:active{background:var(--card2)}
  tbody tr:hover{background:transparent}
}

@media(max-width:820px){
  .w{padding:0 14px}
  .btn{padding:14px 16px;min-height:48px}
  .btn.sm{padding:10px 12px;min-height:40px}
  .nav button{padding:11px 14px;min-height:42px}
  .tbtn{padding:9px 11px;min-height:38px}
  .sw .opts button{padding:10px 11px;min-height:40px}
  .segs button{padding:14px 8px;min-height:62px}
  .chk{padding:13px;min-height:52px}
  .stp button{width:46px;height:48px;font-size:21px}
  .stp .v{min-width:62px;font-size:21px}
  .inp{padding:13px;font-size:16px}   /* 16px stops iOS zooming the page on focus */
  textarea.inp{min-height:110px}
  .ph h1{font-size:24px}
  .card{padding:14px}
  .kpi .v{font-size:23px}

  /* Tables become cards. A horizontal scrollbar on a phone hides the columns
     that matter, so every row restacks and each cell carries its own label. */
  .tw{border:0;background:transparent;overflow:visible}
  table{min-width:0;display:block}
  thead{display:none}
  tbody,tr,td{display:block;width:100%}
  tbody tr{border:1.5px solid var(--ink);background:var(--card);margin-bottom:10px;padding:4px 0}
  td{border-bottom:1px solid var(--rule);padding:10px 13px;display:flex;align-items:center;gap:12px;
     min-height:46px;text-align:left!important}
  tr td:last-child{border-bottom:0}
  td:before{content:attr(data-l);font-family:var(--osw);font-size:9.8px;font-weight:500;letter-spacing:.07em;
    text-transform:uppercase;color:var(--mu);flex:none;min-width:96px}
  td:empty{display:none}
  td.rt{justify-content:flex-start}
  td .s2{margin-top:0;margin-left:6px;display:inline}
  td:first-child{background:var(--card2);border-bottom:1.5px solid var(--ink)}
  td:first-child:before{content:none}
  td:first-child b{font-family:var(--blk);font-size:15px;letter-spacing:-.3px}
  td:last-child{justify-content:stretch;gap:8px}
  td:last-child .btn{flex:1}

  /* the status card is the whole job — give it room */
  .card.k{padding:15px}
  .pub{padding:14px}
  .pub .lb{font-size:15px}
  .mhd{padding:14px}
  .mbody{padding:14px}
  .mfoot{padding:12px 14px calc(14px + env(safe-area-inset-bottom))}
  .mtabs{padding:10px 14px 0}
  .mtabs button{padding:10px 13px;min-height:40px}
  .modal{max-height:93dvh}
  main{padding:18px 0 40px}
}

@media(max-width:430px){
  .ph h1{font-size:22px}
  .kpis{gap:8px}
  .kpi{padding:12px}
  .segs{gap:5px}
  td:before{min-width:80px;font-size:8.5px}
}


/* ── admin inbox ── */
.nav button .nb{font-style:normal;display:inline-block;margin-left:7px;background:var(--hot);
  color:var(--ink);border:1px solid var(--ink);font-size:9.6px;font-weight:700;padding:1px 5px;
  letter-spacing:.02em;vertical-align:1px}
.nav button.on .nb{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.inbst{flex:none;font-family:var(--osw);font-size:9.6px;font-weight:700;letter-spacing:.08em;
  border:1.5px solid var(--rule2);color:var(--mu);padding:4px 8px}
.inbst.new{background:var(--hot);border-color:var(--hot);color:#fff}
.inbkv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px;margin-top:12px}
.inbkv span{display:block;font-family:var(--osw);font-size:9.4px;font-weight:400;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mu2)}
.inbkv b{display:block;font-size:14px;font-weight:600;word-break:break-word;margin-top:2px}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media(max-width:560px){.inbkv{grid-template-columns:1fr}}


/* ══════════════════════════════════════════════════════════════════
   THE HOST PORTAL — 2026-08-23 rebuild
   Phone first. Below 900px navigation is a bottom bar within thumb
   reach; above it the green rail comes back and the bar disappears.
   ══════════════════════════════════════════════════════════════════ */
/* One measure for the whole console, so the top bar, the page and every
   section share an edge. --dbh is the demo bar's real height, measured in JS
   and written here, because it wraps to two lines on a narrow phone and a
   hardcoded 44px left the rail footer below the fold. */
:root{--measure:1280px; --dbh:0px}
.hostwrap{display:flex;align-items:flex-start;min-height:100dvh}
.mainc{flex:1 1 auto;min-width:0}
.rail{display:none}
.hidesm{display:none}
.showsm{display:inline}

.topm{position:sticky;top:0;z-index:60;background:var(--card);color:var(--ink);
  border-bottom:1.5px solid var(--ink)}
.topm .in{display:flex;align-items:center;gap:10px;padding:10px 14px}
.topm .r{margin-left:auto;display:flex;gap:7px}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--card);border-top:1.5px solid var(--ink);padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 9px;
  color:var(--mu);font-family:var(--osw);font-size:9.4px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;position:relative;min-height:56px;justify-content:center}
.tabbar button svg{width:21px;height:21px}
.tabbar button.on{color:var(--ink);font-weight:700}
.tabbar button.on:before{content:'';position:absolute;top:0;left:16%;right:16%;height:3px;background:var(--ink)}
.tabbar .nb{position:absolute;top:6px;right:22%;font-style:normal;background:var(--hot);color:#fff;
  border:1px solid var(--hot);font-size:9px;font-weight:700;padding:0 4px;letter-spacing:0}
main{padding:18px 0 96px}

@media(min-width:900px){
  .hidesm{display:inline}
  .showsm{display:none}
  .rail{display:flex;flex-direction:column;width:216px;flex:0 0 216px;background:var(--card2);
    color:var(--ink);position:sticky;top:0;height:100dvh;border-right:1.5px solid var(--rule2)}
  .railtop{display:flex;align-items:center;gap:9px;padding:16px 14px 14px;border-bottom:1px solid var(--rule)}
  .railtop img{height:28px;width:auto}
  .railtop i{font-style:normal;font-family:var(--osw);font-size:10px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--mu2)}
  .rail nav{display:flex;flex-direction:column;padding:10px 8px;gap:2px;overflow-y:auto;flex:1 1 auto}
  .rail nav button{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 11px;
    font-family:var(--osw);font-size:12.4px;font-weight:600;letter-spacing:.03em;
    color:var(--ink2);border-left:3px solid transparent}
  .rail nav button svg{width:17px;height:17px;flex:none;opacity:.8}
  .rail nav button:hover{background:var(--card);border-left-color:var(--rule2)}
  .rail nav button.on{background:var(--sel);border-left-color:var(--sel);color:var(--sel-ink);font-weight:700}
  .rail nav button.on svg{opacity:1}
  .rail nav .nb{margin-left:auto;font-style:normal;background:var(--hot);color:#fff;
    border:1px solid var(--hot);font-size:9.4px;font-weight:700;padding:1px 5px}
  .railfoot{padding:13px 14px;border-top:1px solid var(--rule);
    font-family:var(--osw);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
  .railfoot i{display:inline-block;width:7px;height:7px;background:var(--acid);
    border:1px solid var(--ink);margin-bottom:7px}
  .railfoot i.adm{background:var(--ink)}
  .railfoot b{display:block;font-family:var(--blk);font-size:15px;letter-spacing:-.4px;
    text-transform:none;color:var(--ink);margin-bottom:4px}
  .railfoot span{color:var(--mu)}
  .topm{border-bottom-color:var(--rule2)}
  .topm .tbtn{border-color:var(--rule2);background:var(--card2);color:var(--ink)}
  .topm .tbtn:hover{border-color:var(--ink)}
  .tabbar{display:none}
  main{padding:24px 0 70px}
  /* margin:0 pinned the column to the left edge of .mainc, so a 1900px screen
     got 564px of nothing on the right. The measure is centred in whatever
     space the rail leaves, and the top bar uses the SAME measure so its
     buttons line up with the content instead of floating off at the edge. */
  .w{padding:0 26px;max-width:var(--measure);margin:0 auto}
  .topm{padding:0}
  .topm .in{width:100%;max-width:var(--measure);margin:0 auto;padding:11px 26px;
    display:flex;align-items:center;gap:10px}
}

/* ── today: the deck ── */
.deck{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
/* 1180, not 1000. The feed is a fixed 330 and the rail takes 216, so splitting
   at 1000 left the main column 386px wide — narrower than the phone layout it
   had just stopped using, and the Next-up rows collapsed to one word a line.
   Below this the deck stays stacked and full width, which is simply better. */
@media(min-width:1180px){
  /* Two columns, three blocks: the hero and everything coming up share the
     left column, the payments feed holds the right one and hugs its own
     content rather than stretching to the row. */
  .deck{grid-template-columns:minmax(0,1fr) 330px;
    grid-template-areas:"hero side" "rest side";
    align-content:start;column-gap:16px}
  .deck > .hero{grid-area:hero}
  .deck > .feed{grid-area:side;align-self:start;position:sticky;top:76px}
  .deck > .drest{grid-area:rest;min-width:0}
  .deck.multi{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
  .deck.multi > .hero,.deck.multi > .drest{grid-area:auto}
}
.drest .sec{margin-top:6px}
.hero{border:2px solid var(--ink);background:var(--card);padding:17px;box-shadow:5px 5px 0 var(--ink)}
.hero .htop{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.hero .tm{margin-left:auto;font-family:var(--blk);font-size:25px;letter-spacing:-1.2px;line-height:1}
.hero h2{font-family:var(--blk);font-size:clamp(21px,5vw,28px);letter-spacing:-1px;line-height:1.05}
.hero .hsub{font-family:var(--osw);font-size:10.6px;font-weight:400;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mu);margin:7px 0 14px}
.badge{font-family:var(--osw);font-size:9.6px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  background:var(--acid);border:1.5px solid var(--ink);padding:5px 8px}
.badge.off{background:var(--ink);color:var(--paper)}
.mtr{height:13px;background:var(--rule);border:1.5px solid var(--ink);overflow:hidden}
.mtr i{display:block;height:100%;background:var(--acid)}
.sline{display:flex;align-items:baseline;gap:10px;margin-top:9px;flex-wrap:wrap}
.sline b{font-family:var(--blk);font-size:23px;letter-spacing:-1px;line-height:1}
.sline span{font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink2)}
.sline.hot span{color:var(--hot)}
.sline.crit b{color:var(--hot)}
.sline.crit span{color:var(--hot);animation:sp 2.4s ease-in-out infinite}
.sline.full b,.sline.full span,.sline.off b,.sline.off span{color:var(--mu)}
@keyframes sp{0%,100%{opacity:1}50%{opacity:.5}}

/* ── release in batches ──
   Sits under the slot line wherever a host can see a game filling. Only
   drawn when places are genuinely held back, so an empty gap never leaves a
   dead strip behind. */
.relq{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:11px;padding:10px 12px;border:1.5px dashed var(--rule2);background:var(--card2)}
.relq span{font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink2);flex:1 1 150px}
.relq .btn{flex:0 0 auto;min-height:40px;padding:0 14px}
.relq.full{border-style:solid;border-color:var(--ink)}
.relq.full span{color:var(--ink)}
@media(max-width:420px){ .relq .btn{flex:1 1 100%} }
.hact{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.hact .btn{flex:1 1 auto}
@media(min-width:640px){.hact .btn{flex:0 0 auto}}

/* ── the payment feed ── */
.feed{border:1.5px solid var(--ink);background:var(--card);align-self:start}
.feedhd{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1.5px solid var(--ink);
  font-family:var(--osw);font-size:10.4px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.feedhd span{font-weight:400;color:var(--mu)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--acid);display:inline-block;
  box-shadow:0 0 0 3px rgba(217,240,53,.34)}
.pay{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 13px;
  border-bottom:1px solid var(--rule)}
.pay b{font-size:13.5px;font-weight:700}
.pay em{grid-column:1;font-style:normal;font-family:var(--osw);font-size:9.8px;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.pay span{grid-row:1;grid-column:2;font-family:var(--osw);font-size:9.8px;color:var(--mu2);letter-spacing:.05em}
.pay.hold{background:var(--hot-soft)}
.pay.hold em{color:var(--hot)}
.feednone{padding:16px 13px;font-size:13px;color:var(--mu);line-height:1.55}
.feedft{padding:11px 13px;background:var(--card2);color:var(--mu);border-top:1.5px solid var(--ink);
  font-family:var(--osw);font-size:10.4px;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.feedft b{font-family:var(--blk);font-size:15px;letter-spacing:-.4px;color:var(--ink)}
.lnk{text-decoration:underline;color:var(--ink);font:inherit}

/* ── a session row ── */
.srow{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:4px 12px;width:100%;text-align:left;
  border:1.5px solid var(--ink);background:var(--card);padding:11px 12px;margin-bottom:8px;align-items:center}
.srow:hover{box-shadow:4px 4px 0 var(--rule2)}
.srow .d b{display:block;font-family:var(--blk);font-size:15px;letter-spacing:-.4px}
.srow .d i{display:block;font-style:normal;font-family:var(--osw);font-size:9.6px;color:var(--mu);margin-top:3px}
.srow .n b{display:block;font-size:14.5px;font-weight:700;line-height:1.2}
.srow .n i{display:block;font-style:normal;font-family:var(--osw);font-size:9.6px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mu);margin-top:3px}
.srow .f,.srow .m{font-family:var(--blk);font-size:15px;letter-spacing:-.4px;text-align:right}
.srow .f i,.srow .m i{display:block;font-style:normal;font-family:var(--osw);font-size:9px;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin-top:3px;white-space:nowrap}
.srow .f.crit{color:var(--hot)}
.srow .f.full,.srow .f.off{color:var(--mu)}
.srow .go{display:none}
.srow .go svg{width:16px;height:16px;transform:rotate(180deg);color:var(--mu2)}
@media(min-width:760px){
  .srow{grid-template-columns:82px minmax(0,1fr) 92px 108px 20px;gap:12px}
  .srow .go{display:block}
}
.dayhd{display:flex;align-items:center;gap:11px;margin:20px 0 10px}
.dayhd:before,.dayhd:after{content:'';flex:1;height:1.5px;background:var(--rule2)}
.dayhd span{font-family:var(--osw);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1.5px solid var(--ink);background:var(--card);padding:5px 10px}

/* The date column carries "16 OCT \00b7 18:30" now, not just a time, so it is
   wider than it was and never wraps mid-date. */
.srow .d i{white-space:nowrap}

/* ── the editable session page ── */
.edbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;margin:-18px -14px 16px;
  padding:10px 14px;background:var(--ink);color:var(--paper);border-bottom:1.5px solid var(--ink)}
@media(min-width:900px){.edbar{margin:-24px -22px 18px;padding:11px 22px}}
.edbar .bk{width:34px;height:34px;border:1.5px solid rgba(242,240,231,.5);display:flex;align-items:center;
  justify-content:center;flex:none}
.edbar .bk svg{width:17px;height:17px}
.edbar .et{min-width:0;display:flex;flex-direction:column;gap:2px}
.edbar .et b{font-family:var(--osw);font-size:9.4px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acid)}
.edbar .et i{font-style:normal;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.edbar .er{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.edbar .saved{display:none;font-family:var(--osw);font-size:9.4px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acid)}
@media(min-width:760px){.edbar .saved{display:inline}}
.edbar .btn{border-color:rgba(242,240,231,.55);background:transparent;color:var(--paper)}
.edbar .btn.btn-a{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.edbar{border-bottom-color:var(--ink)}

.eb{border:1.5px solid var(--rule2);background:var(--card);margin-bottom:9px}
.eb.open{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--rule2)}
.ebhd{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--rule);
  background:var(--card2)}
.eb.open .ebhd{background:var(--card2);border-bottom-color:var(--ink)}
.ek{font-family:var(--osw);font-size:9.8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--pitch)}
.pen{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--osw);font-size:9.4px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;border:1.5px solid var(--rule2);
  background:var(--card);padding:6px 9px;color:var(--mu);min-height:34px}
.pen svg{width:13px;height:13px}
.pen:hover{border-color:var(--ink);background:var(--sel);color:var(--sel-ink)}
.pen.on{border-color:var(--ink);color:var(--ink);background:var(--card)}
.ebrd,.ebed{padding:14px 13px}
.ebsave{margin-top:14px;padding-top:13px;border-top:1.5px solid var(--rule)}
.ebsave .btn{width:100%}
@media(min-width:560px){.ebsave .btn{width:auto;min-width:190px}}
.stitle{font-family:var(--blk);font-size:clamp(23px,5.4vw,31px);letter-spacing:-1.3px;line-height:1.03}
.svenue{font-family:var(--osw);font-size:10.6px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink2);margin-top:8px}
.svenue i{display:block;font-style:normal;font-weight:400;color:var(--mu);margin-top:4px;text-transform:none;
  letter-spacing:0;font-size:12.5px}
.fcts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:640px){.fcts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fct{border:1.5px solid var(--rule2);background:var(--card2);padding:10px}
.fct span{display:block;font-family:var(--osw);font-size:9.2px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mu2)}
.fct b{display:block;font-family:var(--blk);font-size:18px;letter-spacing:-.6px;margin-top:5px;line-height:1.1}
.fct i{display:block;font-style:normal;font-size:11.5px;color:var(--mu);margin-top:4px}
.sdesc{font-size:14.5px;line-height:1.62;color:var(--ink2)}
.snotes{margin:12px 0 0 17px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.snotes li{margin-bottom:5px}
.kitrow{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding:10px 0;border-bottom:1px solid var(--rule)}
.kitrow:last-child{border-bottom:0}
@media(min-width:560px){.kitrow{grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:baseline}}
.kk{font-family:var(--osw);font-size:9.4px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--mu2)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips span{border:1.5px solid var(--rule2);background:var(--card2);padding:6px 9px;font-family:var(--osw);
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.chips span b{color:var(--mu);margin-left:6px}
.chips em{font-style:normal;font-size:12.5px;color:var(--mu2)}
.stps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:520px){.stps{grid-template-columns:minmax(0,1fr)}}
.stps .lbl{display:block;font-family:var(--osw);font-size:9.4px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mu);margin-bottom:7px}
.stps i{display:block;font-style:normal;font-size:11.5px;color:var(--mu2);margin-top:7px;line-height:1.5}
.scope{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:15px;padding-top:14px;
  border-top:1.5px solid var(--rule)}
@media(max-width:520px){.scope{grid-template-columns:minmax(0,1fr)}}
.scope button{border:1.5px solid var(--rule2);background:var(--card);padding:11px;text-align:left;
  font-family:var(--osw);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink2);min-height:46px}
.scope button.on{border-color:var(--ink);background:var(--sel);color:var(--sel-ink);font-weight:700;
  box-shadow:3px 3px 0 var(--rule2)}
.scope button i{display:block;font-style:normal;font-size:9.4px;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mu);margin-top:4px}
.scope button.on i{color:var(--mu2)}
.stnow{margin-left:auto;font-family:var(--osw);font-size:9.4px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border:1.5px solid var(--ink);background:var(--acid);padding:5px 8px}
.stnow.watch{background:var(--hot-soft);border-color:var(--hot);color:var(--hot)}
.stnow.off{background:var(--ink);color:var(--paper)}
.stnow.none{background:var(--card);border-color:var(--rule2);color:var(--mu)}
.eb.act .ebhd{background:var(--card2)}
.kpis.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.danger{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border:1.5px dashed var(--rule2);
  background:var(--card2);padding:13px;margin-top:14px}
.danger span{flex:1 1 200px;font-size:12px;color:var(--mu);line-height:1.5}

/* ── recurring game cards ── */
.sercards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.sercard{border:1.5px solid var(--ink);background:var(--card);padding:14px}
.sctop{display:flex;align-items:flex-start;gap:9px;margin-bottom:11px}
.sctop h3{flex:1;font-family:var(--blk);font-size:17px;letter-spacing:-.5px;line-height:1.12;text-transform:uppercase}
.scdays{display:flex;gap:4px;margin-bottom:11px}
.scdays i{flex:1;font-style:normal;text-align:center;border:1.5px solid var(--rule2);background:var(--card2);
  padding:5px 0;font-family:var(--osw);font-size:10px;font-weight:600;color:var(--mu2)}
.scdays i.on{background:var(--sel);border-color:var(--ink);color:var(--sel-ink);font-weight:700}
.sckv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px;margin-bottom:12px}
.sckv span{font-family:var(--osw);font-size:10.2px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mu)}
.sercard .btn{width:100%}
.daypick{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.daypick button{border:1.5px solid var(--rule2);background:var(--card);padding:11px 0;font-family:var(--osw);
  font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mu);min-height:46px}
.daypick button.on{background:var(--sel);border-color:var(--ink);color:var(--sel-ink);font-weight:700}

/* ── money ── */
.mses{border:1.5px solid var(--rule2);background:var(--card);margin-bottom:8px}
.mses.open{border:2px solid var(--ink)}
.mhdr{display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:4px 12px;width:100%;text-align:left;
  padding:11px 12px;align-items:center}
.mhdr .d b{display:block;font-family:var(--blk);font-size:14px;letter-spacing:-.3px}
.mhdr .d i{display:block;font-style:normal;font-family:var(--osw);font-size:9.2px;color:var(--mu);margin-top:3px}
.mhdr .n b{display:block;font-size:14px;font-weight:700}
.mhdr .n i{display:block;font-style:normal;font-family:var(--osw);font-size:9.4px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mu);margin-top:3px}
.mhdr .c{display:none}
.mhdr .v{text-align:right}
.mhdr .v b{font-family:var(--blk);font-size:16px;letter-spacing:-.5px}
.mhdr .v i{display:block;font-style:normal;font-family:var(--osw);font-size:9px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mu);margin-top:3px}
.mhdr .go{display:none}
.mhdr .go svg{width:15px;height:15px;transform:rotate(180deg);color:var(--mu2)}
@media(min-width:760px){
  .mhdr{grid-template-columns:70px minmax(0,1fr) 70px 120px 20px}
  .mhdr .c{display:block;text-align:right;font-family:var(--blk);font-size:16px}
  .mhdr .c i{display:block;font-style:normal;font-family:var(--osw);font-size:9px;letter-spacing:.05em;
    text-transform:uppercase;color:var(--mu);margin-top:3px}
  .mhdr .go{display:block}
}
.mbodyx{border-top:1.5px solid var(--ink)}
.prow2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:10px 12px;
  border-bottom:1px solid var(--rule);align-items:center}
.prow2.hold{background:var(--hot-soft)}
.prow2 .pn b{display:block;font-size:13.5px;font-weight:700}
.prow2 .pn i{display:block;font-style:normal;font-family:var(--osw);font-size:9.2px;letter-spacing:.06em;
  color:var(--mu2);margin-top:2px}
.prow2 .pm,.prow2 .pt{display:none}
.prow2 .pa{text-align:right;font-family:var(--blk);font-size:15px;letter-spacing:-.4px}
.prow2 .pa i{display:block;font-style:normal;font-family:var(--osw);font-size:9px;font-weight:400;
  letter-spacing:.04em;color:var(--mu);margin-top:2px}
.prow2 .pa em{font-style:normal;font-family:var(--osw);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hot)}
.prow2 .pb{grid-column:1/-1;justify-self:start;margin-top:4px}
@media(min-width:760px){
  .prow2{grid-template-columns:minmax(0,1fr) 110px 92px 110px 92px;gap:12px}
  .prow2 .pm,.prow2 .pt{display:block;font-family:var(--osw);font-size:10.4px;letter-spacing:.05em;color:var(--mu)}
  .prow2 .pt i{display:block;font-style:normal;font-size:9px;color:var(--mu2);margin-top:2px}
  .prow2 .pb{grid-column:auto;justify-self:end;margin-top:0}
}
.mfootx{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 12px;background:var(--card2);
  border-top:1.5px solid var(--rule);font-family:var(--osw);font-size:10.4px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mu)}
.mfootx b{font-family:var(--blk);font-size:15px;letter-spacing:-.4px;color:var(--ink)}
.mfootx .btn{margin-left:auto}

/* ── players ── */
.plr,.team,.rrow{display:flex;align-items:center;gap:11px;border:1.5px solid var(--rule2);background:var(--card);
  padding:11px 12px;margin-bottom:7px}
.plr .av,.team .av,.rrow .av{width:36px;height:36px;flex:none;display:grid;place-items:center;background:var(--card2);
  border:1.5px solid var(--ink);font-family:var(--osw);font-size:11px;font-weight:700;letter-spacing:.02em}
.team .av.alt{background:var(--card2);color:var(--mu)}
.plr .pn,.team span:nth-child(2),.rrow .n{flex:1;min-width:0}
.plr .pn b,.team b,.rrow .n b{display:block;font-size:14px;font-weight:700}
.plr .pn i,.team i,.rrow .n i{display:block;font-style:normal;font-family:var(--osw);font-size:9.6px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin-top:3px}
.plr .pc,.plr .ps{text-align:right;flex:none}
.plr .pc b,.plr .ps b{font-family:var(--blk);font-size:16px;letter-spacing:-.5px}
.plr .pc i,.plr .ps i{display:block;font-style:normal;font-family:var(--osw);font-size:9px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mu);margin-top:2px}
.plr .ps{min-width:88px}
.team svg{width:20px;height:20px;color:var(--mu)}
.rrow.hold{background:var(--hot-soft);border-color:var(--hot)}
.rrow.hold .av{background:var(--card)}
.rost{border:1.5px solid var(--ink);background:var(--card2);padding:12px}
.rhd{font-family:var(--osw);font-size:9.6px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink2);padding-bottom:8px;border-bottom:1.5px solid var(--ink);margin:12px 0 10px}
.rhd:first-child{margin-top:0}
.rnote{font-size:12.5px;color:var(--mu);line-height:1.55;margin-bottom:6px}

/* ── settings ── */
.chip{display:flex;align-items:center;gap:12px;border:1.5px solid var(--rule2);background:var(--card2);
  padding:13px;margin-bottom:9px;flex-wrap:wrap}
.chip.on{border-color:var(--ink);background:var(--card2)}
.chip .cl{font-family:var(--blk);font-size:19px;letter-spacing:-.6px;background:var(--ink);color:var(--paper);
  padding:7px 10px;flex:none}
.chip .cm{flex:1;min-width:140px}
.chip .cm b{display:block;font-size:14.5px;font-weight:700}
.chip .cm i{display:block;font-style:normal;font-family:var(--osw);font-size:9.8px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mu);margin-top:3px}
.bank{display:flex;align-items:center;gap:12px;border:1.5px solid var(--ink);background:var(--card);
  padding:13px;flex-wrap:wrap}
.bank svg{width:24px;height:24px;flex:none;color:var(--ink2)}
.bank span{flex:1;min-width:170px}
.bank b{display:block;font-family:var(--blk);font-size:17px;letter-spacing:-.5px}
.bank i{display:block;font-style:normal;font-size:12.3px;color:var(--mu);margin-top:4px;line-height:1.5}
.plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.plan .k{display:block;font-family:var(--osw);font-size:9.2px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mu2)}
.plan b{display:block;font-family:var(--blk);font-size:21px;letter-spacing:-.8px;margin-top:5px}
.plan i{display:block;font-style:normal;font-size:12px;color:var(--mu);margin-top:4px;line-height:1.5}

/* ── the More sheet ── */
.mlist{display:flex;flex-direction:column;gap:6px}
.mlist button{display:flex;align-items:center;gap:12px;border:1.5px solid var(--rule2);background:var(--card);
  padding:13px;text-align:left;min-height:54px}
.mlist button:hover{border-color:var(--ink);background:var(--card2)}
.mlist button b{flex:1;font-size:14.5px;font-weight:700}
.mlist button svg{width:19px;height:19px;color:var(--mu);flex:none}
.mlist button svg:last-child{width:15px;transform:rotate(180deg)}
.mlist button.x{border-color:var(--hot);color:var(--hot)}
.mlist button.x svg{color:var(--hot)}
.asbar .in{padding:0 14px}
@media(max-width:899px){.toast{bottom:88px}}
@media(min-width:900px){.asbar .in{padding:0 22px}}
.deck{align-items:start}
.srow .d{grid-column:1;grid-row:1/3}
.srow .n{grid-column:2;grid-row:1/3}
.srow .f{grid-column:3;grid-row:1}
.srow .m{grid-column:3;grid-row:2}
@media(min-width:760px){
  .srow .d,.srow .n,.srow .f,.srow .m{grid-column:auto;grid-row:auto}
}
/* the edit bar parks under the club bar rather than sliding beneath it */
.edbar{top:61px}
@media(min-width:900px){.edbar{top:55px}}
/* the payments ledger keeps the method and the time on a phone too */
.prow2 .pn{grid-column:1;grid-row:1}
.prow2 .pa{grid-column:2;grid-row:1}
.prow2 .pm{grid-column:1;grid-row:2;display:block;font-family:var(--osw);font-size:9.8px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.prow2 .pt{grid-column:2;grid-row:2;display:block;text-align:right;font-family:var(--osw);
  font-size:9.8px;letter-spacing:.05em;color:var(--mu2)}
.prow2 .pt i{display:none}
.prow2 .pb{grid-column:1/-1;grid-row:3}
@media(min-width:760px){
  .prow2 .pn,.prow2 .pa,.prow2 .pm,.prow2 .pt,.prow2 .pb{grid-column:auto;grid-row:auto}
  .prow2 .pm,.prow2 .pt{text-align:left;text-transform:none;font-size:10.4px;color:var(--mu)}
  .prow2 .pt i{display:block;font-style:normal;font-size:9px;color:var(--mu2);margin-top:2px}
  .prow2 .pa{text-align:right}
}


/* ══════════════════════════════════════════════════════════════════
   ORDERS & the multi-game day
   ══════════════════════════════════════════════════════════════════ */

/* ── two or more games today: a card each, money folded in ── */
.deck.multi{grid-template-columns:minmax(0,1fr)}
@media(min-width:1100px){.deck.multi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hero.compact{box-shadow:4px 4px 0 var(--ink)}
.hero.compact h2{font-size:clamp(19px,4.4vw,23px)}
.tbar2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
@media(min-width:760px){.tbar2{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tbar2 div{border:1.5px solid var(--ink);background:var(--card);padding:12px}
.tbar2 div.hi{background:var(--card);border-width:2px;box-shadow:3px 3px 0 var(--ink)}
.tbar2 div.wn{background:var(--hot-soft);border-color:var(--hot)}
.tbar2 span{display:block;font-family:var(--osw);font-size:9.2px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mu2)}
.tbar2 div.hi span,.tbar2 div.hi i{color:var(--mu)}
.tbar2 div.wn span,.tbar2 div.wn i{color:var(--hot)}
.tbar2 b{display:block;font-family:var(--blk);font-size:24px;letter-spacing:-1.1px;margin-top:6px;line-height:1}
.tbar2 i{display:block;font-style:normal;font-family:var(--osw);font-size:9.4px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mu);margin-top:6px;line-height:1.5}

/* the money strip on a hero card */
.hmoney{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:14px;padding:11px 12px;
  background:var(--card2);border:1.5px solid var(--ink);color:var(--ink)}
.hmoney b{font-family:var(--blk);font-size:20px;letter-spacing:-.7px;color:var(--ink)}
.hmoney span{font-family:var(--osw);font-size:9.8px;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mu)}
.lnk3{margin-left:auto;font-family:var(--osw);font-size:9.6px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);text-decoration:underline;white-space:nowrap}
.hpays{border:1.5px solid var(--rule);border-top:0}
.hpays .pay:last-of-type{border-bottom:0}
.hmore{padding:8px 13px;border-top:1px solid var(--rule);background:var(--card2);
  font-family:var(--osw);font-size:9.4px;letter-spacing:.07em;text-transform:uppercase;color:var(--mu2)}
.pay.void b,.pay.void em{color:var(--gone);text-decoration:line-through}
.pay.void em{text-decoration:none}
.rrow.void{opacity:.55}

/* ── the orders block ── */
/* Slots and Orders are the two blocks a host reviews every game. They are set
   apart by weight, not by colour: a heavier border and a heavier rule. */
.eb.orders,.eb#eb-slots{border:2px solid var(--ink)}
.eb.orders .ebhd,.eb#eb-slots .ebhd{background:var(--card2);border-bottom:1.5px solid var(--ink)}
.eb.orders .ek,.eb#eb-slots .ek{color:var(--ink)}
.ocount{margin-left:auto;font-family:var(--osw);font-size:9.8px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mu)}
.otot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
@media(min-width:760px){.otot{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.otot div{border:1.5px solid var(--rule2);background:var(--card2);padding:11px}
.otot div.hi{background:var(--card);border-color:var(--ink);border-width:2px;box-shadow:3px 3px 0 var(--ink)}
.otot div.wn{background:var(--hot-soft);border-color:var(--hot)}
.otot span{display:block;font-family:var(--osw);font-size:9.2px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mu2)}
.otot div.hi span,.otot div.hi i{color:var(--mu)}
.otot div.wn span,.otot div.wn i{color:var(--hot)}
.otot b{display:block;font-family:var(--blk);font-size:21px;letter-spacing:-.9px;margin-top:5px;line-height:1}
.otot i{display:block;font-style:normal;font-size:11px;color:var(--mu);margin-top:5px;line-height:1.4}

.obar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ofilt{display:flex;gap:5px;flex-wrap:wrap}
.ofilt button{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--rule2);
  background:var(--card);padding:8px 10px;font-family:var(--osw);font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mu);min-height:38px}
.ofilt button.on{border-color:var(--ink);background:var(--sel);color:var(--sel-ink);font-weight:700}
.ofilt button.on i{color:var(--sel-ink)}
.ofilt button i{font-style:normal;font-family:var(--blk);font-size:12px;letter-spacing:-.2px;color:var(--ink)}
.ofilt button:not(.on) i{color:var(--mu2)}
.oact{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:620px){.oact{margin-left:0;width:100%}.oact .btn{flex:1}}

.lnk2{text-align:left;font:inherit}
.lnk2 b{font-weight:700;border-bottom:1.5px solid var(--rule2)}
.lnk2:hover b{border-bottom-color:var(--ink)}
tr.unpaid td{background:var(--hot-soft)}
tr.void td b{color:var(--gone)}
tr.void .lnk2 b{border-bottom-color:var(--rule2)}
@media(max-width:820px){
  tr.unpaid{border-color:var(--hot)}
  tr.unpaid td:first-child{background:var(--hot-soft)}
}

/* ── one person's record ── */
.pdet{border:1.5px solid var(--ink);background:var(--card)}
.pdet div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:10px 12px;
  border-bottom:1px solid var(--rule)}
@media(min-width:520px){.pdet div{grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:baseline}}
.pdet div:last-child{border-bottom:0}
.pdet span{font-family:var(--osw);font-size:9.4px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mu2)}
.pdet b{font-size:13.5px;font-weight:600;word-break:break-word}
/* four actions on a compact card sit as a tidy 2x2 rather than 3 + 1 */
.hero.compact .hact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hero.compact .hact .btn{width:100%}
@media(min-width:1560px){.deck.multi{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* the orders table: the player and the money get the room, the rest is fixed */
@media(min-width:821px){
  .otab table{table-layout:fixed;min-width:900px}
  .otab th:nth-child(1),.otab td:nth-child(1){width:16%}
  .otab th:nth-child(2),.otab td:nth-child(2){width:19%}
  .otab th:nth-child(3),.otab td:nth-child(3){width:13%}
  .otab th:nth-child(4),.otab td:nth-child(4){width:15%}
  .otab th:nth-child(5),.otab td:nth-child(5){width:14%}
  .otab th:nth-child(6),.otab td:nth-child(6){width:10%}
  .otab th:nth-child(7),.otab td:nth-child(7){width:13%}
  .otab td{word-break:break-word}
}


/* ══════════════════════════════════════════════════════════════════
   THE DETAILS STRIP
   Set once, then almost never touched. Three lines instead of three
   blocks, so slots and orders keep the screen.
   ══════════════════════════════════════════════════════════════════ */
.eb .stitle{font-size:clamp(20px,4.6vw,26px);letter-spacing:-1.1px;line-height:1.05}
.smeta{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:9px}
.smeta b{font-family:var(--osw);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--sel);color:var(--sel-ink);border:1.5px solid var(--ink);padding:4px 7px}
.smeta span{font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink2);border:1.5px solid var(--rule2);background:var(--card2);
  padding:4px 7px}
.smeta span.pr{border-color:var(--ink);background:var(--card);color:var(--ink)}
.ssub{margin-top:9px;font-family:var(--osw);font-size:10.6px;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mu);line-height:1.6}
.ssub i{display:block;font-style:normal;font-size:11.8px;letter-spacing:0;text-transform:none;
  color:var(--mu2);margin-top:4px}
.eb.open .smeta span,.eb.open .smeta b{background:var(--card)}

/* ── the listing, folded away ── */
.lgroup{margin-bottom:9px}
.lghd{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:1.5px solid var(--rule2);background:var(--card2);padding:11px 13px;min-height:46px}
.lghd:hover{border-color:var(--ink);background:var(--card)}
.lgroup.open .lghd{border-color:var(--ink);background:var(--card);margin-bottom:9px}
.gsum{flex:1;min-width:0;font-family:var(--osw);font-size:9.8px;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mu2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lghd i{flex:none;color:var(--mu)}
.lghd i svg{width:15px;height:15px;transform:rotate(180deg)}
.lgroup.open .lghd i svg{transform:none;width:14px;height:14px}
.lgroup .eb{margin-left:14px}
@media(max-width:560px){.lgroup .eb{margin-left:0}.gsum{display:none}}

/* slots and orders are the pair a host reviews before every game */
.eb.orders .pen,.eb#eb-slots .pen{border-color:var(--rule2)}
/* an unpaid row carries two actions; they stack rather than run off the table */
.oact2{white-space:normal}
.oact2 .btn{width:100%}
.oact2 .btn+.btn{margin-top:5px}
@media(max-width:820px){.oact2 .btn{width:auto;flex:1}}

/* ── small phones (320px) ── */
@media(max-width:820px){
  /* an order restacks into a card; contact and reference each get their own line */
  .otab td{flex-wrap:wrap;align-items:flex-start}
  .otab td .s2{display:block;width:100%;margin-left:0;margin-top:3px}
  .otab td>b,.otab td .lnk2,.otab td .lnk2 b{min-width:0;overflow-wrap:anywhere}
  td{overflow-wrap:anywhere}
}
@media(max-width:400px){
  td:before{min-width:72px;font-size:8.2px}
  .w{padding:0 11px}
  .edbar{margin-left:-11px;margin-right:-11px;padding-left:11px;padding-right:11px}
  .ph h1{font-size:20px}
  .hero{padding:14px}
  .smeta span,.smeta b{font-size:9.4px;padding:4px 6px}
  .tbar2 b{font-size:20px}
  .otot b{font-size:18px}
}

/* On a phone an order is a five-line card, not nine labelled rows. Contact,
   reference and timing fold into one line under the name; the full record is
   one tap away on the name itself. */
.s3{display:none}
@media(max-width:820px){
  .otab td:nth-child(2),.otab td:nth-child(3),.otab td:nth-child(4){display:none}
  .otab td .s3{display:block;width:100%;margin-top:5px;font-family:var(--osw);font-size:9.4px;
    font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--mu2);line-height:1.6}
  .otab tbody tr{margin-bottom:9px}
  .otab td:first-child{padding-top:12px;padding-bottom:12px}
  .otab td:first-child .lnk2 b{font-family:var(--blk);font-size:16px;letter-spacing:-.4px}
}
/* tighter still: the money and the status share a line, the actions take the foot */
@media(max-width:820px){
  .otab tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:0}
  .otab td:first-child{grid-column:1/-1}
  .otab td:nth-child(5){grid-column:1;border-bottom:0;padding-bottom:6px}
  .otab td:nth-child(6){grid-column:2;border-bottom:0;justify-content:flex-end;padding-bottom:6px}
  .otab td:nth-child(5):before,.otab td:nth-child(6):before{content:none}
  .otab td:nth-child(5) b{font-family:var(--blk);font-size:17px;letter-spacing:-.5px}
  .otab td:nth-child(7){grid-column:1/-1;border-top:1px solid var(--rule);display:flex;gap:7px}
}

/* ── touch targets ──
   A host publishing a status at the gate is one-handed, in the dark, on grass.
   Nothing they have to hit is under 44px on a phone. */
@media(max-width:899px){
  .tbtn{min-height:44px;padding:11px 12px}
  .edbar .bk{width:44px;height:44px}
  .pen{min-height:44px;padding:10px 12px}
  .ofilt button{min-height:44px;padding:11px 12px}
  .lnk2{display:inline-block;min-height:44px;padding:10px 0;display:flex;align-items:center}
  .lnk3{padding:11px 0;min-height:44px;display:inline-flex;align-items:center}
  .lnk{padding:13px 6px;min-height:44px;display:inline-flex;align-items:center}
  .lghd{min-height:52px}
  .mlist button{min-height:58px}
  .daypick button{min-height:52px}
  .scope button{min-height:56px}
  .sw .opts button{min-height:44px}
  .srow,.mhdr{min-height:64px}
  .plr,.team,.rrow{min-height:56px}
}
/* The phone top bar carries the club and nothing else — the board and sign out
   both live in More, one tap away, and this buys back a line on every screen. */
@media(max-width:620px){
  .topm .in{padding:9px 12px}
  .topm .r{display:none}
  .orgc{font-size:11px;padding:7px 10px}
}
/* scrolling to a block parks it under the two sticky bars, not behind them */
.eb,.lgroup{scroll-margin-top:126px}
@media(min-width:900px){.eb,.lgroup{scroll-margin-top:120px}}


/* ══════════════════════════════════════════════════════════════════
   THE STAFF BAR
   Numbers that look like the real thing have to say so on every
   screen, or somebody reads invented payments as takings. The bar
   carries up to two switches: which clubs this console counts, and
   whether the figures are live or a walkthrough.
   ══════════════════════════════════════════════════════════════════ */
#demobar{position:sticky;top:0;z-index:90;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--hot-soft);border-bottom:1.5px solid var(--hot);color:var(--hot);
  padding:9px 14px;font-family:var(--osw);font-size:10.4px;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.5}
#demobar .db-l{flex:1;min-width:160px}
#demobar b{display:inline-block;font-weight:700;letter-spacing:.11em;margin-right:9px;
  border:1.5px solid var(--hot);padding:3px 7px}
#demobar button{flex:none;font-family:var(--osw);font-size:9.6px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;border:1.5px solid var(--hot);background:var(--card);color:var(--hot);
  padding:9px 11px;min-height:40px}
#demobar button:hover{background:var(--hot);color:#fff}
/* the sticky bars below it move down by its height */
body.demo .topm{top:0}
@media(min-width:900px){
  body.demo .rail{height:calc(100dvh - var(--dbh));top:var(--dbh)}
}
.team .av{font-family:var(--osw);font-size:13px;font-weight:700}


/* ══════════════════════════════════════════════════════════════════
   ADMIN: FILL THE GAP + TRAFFIC
   ══════════════════════════════════════════════════════════════════ */
.fcard{border:1.5px solid var(--rule2);background:var(--card);padding:15px;margin-bottom:10px}
.fcard.isnew{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--rule2)}
.ftop{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px}
.fwho{flex:1;min-width:0}
.fwho b{display:block;font-family:var(--blk);font-size:19px;letter-spacing:-.6px;line-height:1.1}
.fwho i{display:block;font-style:normal;font-family:var(--osw);font-size:9.8px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mu);margin-top:5px}
.fst{flex:none;font-family:var(--osw);font-size:9.4px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border:1.5px solid var(--rule2);background:var(--card2);color:var(--mu);padding:5px 8px}
.fst.s-new{border-color:var(--hot);background:var(--hot-soft);color:var(--hot)}
.fst.s-filling,.fst.s-listed{border-color:var(--ink);color:var(--ink);background:var(--card)}
.fst.s-filled{border-color:var(--hot);background:var(--hot-soft);color:var(--hot)}
.fst.s-settled{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.fmeta{display:flex;gap:6px 14px;flex-wrap:wrap;margin-bottom:11px;font-family:var(--osw);font-size:10.4px;
  font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--mu)}
.fmeta b{color:var(--ink);font-weight:700}
.fnote{margin-top:11px;padding:10px 12px;background:var(--card2);border:1.5px solid var(--rule);
  font-size:13px;color:var(--ink2);line-height:1.55}
.fsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:5px}
.fsteps button{border:1.5px solid var(--rule2);background:var(--card);padding:10px 8px;text-align:left;
  min-height:56px}
.fsteps button b{display:block;font-family:var(--osw);font-size:10.4px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mu)}
.fsteps button i{display:block;font-style:normal;font-size:10.4px;color:var(--mu2);margin-top:4px;line-height:1.4}
.fsteps button.done{background:var(--card2);border-color:var(--rule2)}
.fsteps button.done b{color:var(--ink2)}
.fsteps button.at{border-color:var(--ink);background:var(--sel)}
.fsteps button.at b{color:var(--acid)}
.fsteps button.at i{color:#B9C9B4}

/* ── the visits chart ──
   One series, so no legend: the heading names it. Height carries the
   magnitude; the accent marks today only, and it sits inside an ink border
   because acid on paper is 1.12:1 and would vanish on its own. Only the peak
   and today are labelled — a number on every bar is noise. */
.bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:2px;align-items:end;height:180px}
.bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px;
  position:relative}
.bar i{display:block;width:100%;background:var(--ink);border-radius:4px 4px 0 0;order:2;
  transition:opacity .12s}
.bar b{order:1;font-family:var(--osw);font-size:9.6px;font-weight:700;letter-spacing:.02em;color:var(--ink);
  min-height:13px}
.bar span{order:3;font-family:var(--osw);font-size:9px;font-weight:500;letter-spacing:.06em;color:var(--mu2)}
.bar.peak i{background:var(--ink2)}
.bar.now i{background:var(--acid);border:1.5px solid var(--ink);border-bottom:0}
.bar.now span{color:var(--ink);font-weight:700}
.bars:hover .bar i{opacity:.42}
.bar:hover i{opacity:1}
.bar:hover:after{content:'';position:absolute;inset:0 -2px;border:1.5px solid var(--rule2);pointer-events:none}
.barnote{display:flex;gap:16px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--osw);font-size:9.8px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.two2{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media(min-width:1000px){.two2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.srcrow{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(74px,auto);gap:11px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--rule)}
.srcrow:last-of-type{border-bottom:0}
.srcrow .n{font-size:13.5px;font-weight:600}
.srcrow .b{height:9px;background:var(--rule);border:1px solid var(--rule2);overflow:hidden}
.srcrow .b i{display:block;height:100%;background:var(--ink2)}
.srcrow .p{text-align:right;font-family:var(--osw);font-size:11px;font-weight:700;color:var(--ink)}
@media(max-width:520px){
  .bars{height:140px}
  .bar b{font-size:8.6px}
  .srcrow{grid-template-columns:minmax(0,1fr) 48px minmax(70px,auto);gap:8px}
}
/* the demo notice is permanent chrome — on a phone it earns one line, not three */
@media(max-width:620px){
  #demobar{padding:7px 12px;gap:8px;font-size:9.6px;flex-wrap:nowrap}
  #demobar .db-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #demobar b{margin-right:6px;padding:2px 5px;font-size:9px}
  #demobar button{padding:8px 9px;min-height:36px;font-size:9px}
}


/* ══════════════════════════════════════════════════════════════════
   SIGNING IN
   ══════════════════════════════════════════════════════════════════ */
.lg h2{margin-bottom:14px}
.lgp{font-size:13.5px;color:var(--mu);line-height:1.6;margin:-6px 0 16px}

/* six boxes, because six boxes say "six digits" without a word of copy */
.pin{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.pin input{width:100%;height:56px;text-align:center;border:1.5px solid var(--rule2);background:var(--card);
  font-family:var(--blk);font-size:24px;letter-spacing:0;color:var(--ink);border-radius:0;padding:0;
  -webkit-text-security:disc;text-security:disc}
.pin input:focus{outline:none;border-color:var(--ink);box-shadow:3px 3px 0 var(--rule2)}
.pin.bad input{border-color:var(--hot);background:var(--hot-soft)}
.pin.bad{animation:shake .32s}
@keyframes shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)}
}
@media(max-width:400px){.pin{gap:5px}.pin input{height:50px;font-size:21px}}

.lgmsg{display:none;font-size:13px;line-height:1.5;color:var(--ink2);margin-bottom:12px}
.lgmsg.on{display:block}
.lgmsg.bad{color:var(--hot);border-left:3px solid var(--hot);padding-left:10px}
.lgalt{display:block;width:100%;margin-top:14px;padding:11px 0;font-family:var(--osw);font-size:10.6px;
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--mu);min-height:44px}
.lgalt:hover{color:var(--ink);text-decoration:underline}

/* the switch on the door */
.tgl{display:flex;align-items:center;gap:12px;margin:22px 0 0;padding:13px 15px;cursor:pointer;
  border:1.5px solid var(--rule2);background:var(--card2)}
.tgl:hover{border-color:var(--ink)}
.tgl input{position:absolute;opacity:0;width:0;height:0}
.tgl .tk{position:relative;flex:none;width:48px;height:28px;border:1.5px solid var(--ink);
  background:var(--card);transition:background .16s}
.tgl .tk:after{content:'';position:absolute;left:2px;top:2px;width:20px;height:20px;background:var(--ink);
  transition:transform .16s}
.tgl input:checked + .tk{background:var(--acid)}
.tgl input:checked + .tk:after{transform:translateX(20px)}
.tgl input:focus-visible + .tk{box-shadow:0 0 0 3px var(--rule2)}
.tgl .tl{min-width:0}
.tgl .tl b{display:block;font-family:var(--osw);font-size:10.6px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase}
.tgl .tl i{display:block;font-style:normal;font-size:12.3px;color:var(--mu);margin-top:4px;line-height:1.5}


/* ══════════════════════════════════════════════════════════════════
   CONNECTING PAYOUTS · EMAIL ALLOWANCE · THE CREW
   ══════════════════════════════════════════════════════════════════ */
.steps4{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;margin-top:14px}
@media(min-width:760px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.s4{display:flex;align-items:flex-start;gap:11px;border:1.5px solid var(--rule2);background:var(--card2);
  padding:11px 12px}
.s4 b{flex:none;width:26px;height:26px;display:grid;place-items:center;border:1.5px solid var(--rule2);
  background:var(--card);font-family:var(--osw);font-size:11px;font-weight:700;color:var(--mu)}
.s4 span{min-width:0}
.s4 i{display:block;font-style:normal;font-size:13.5px;font-weight:700}
.s4 em{display:block;font-style:normal;font-size:11.8px;color:var(--mu);margin-top:3px;line-height:1.45}
.s4.at{border-color:var(--ink);background:var(--card)}
.s4.at b{border-color:var(--ink);background:var(--acid);color:var(--ink)}
.s4.done b{border-color:var(--ink);background:var(--ink);color:var(--acid)}
.s4.done i{color:var(--mu)}
/* the little four-dot progress row inside the wizard */
.steps4.wide{display:flex;gap:7px}
.steps4.wide .s4{flex:1;justify-content:center;padding:9px 0;border-radius:0}
.steps4.wide .s4 b{width:24px;height:24px}

.mquota{border:1.5px solid var(--ink);background:var(--card2);padding:14px;margin-bottom:14px}
.mq-l .k{display:block;font-family:var(--osw);font-size:9.2px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mu2)}
.mq-l b{display:block;font-family:var(--blk);font-size:27px;letter-spacing:-1.2px;line-height:1;margin-top:6px}
.mq-l b i{font-style:normal;font-size:15px;color:var(--mu);letter-spacing:-.4px}
.mq-l em{display:block;font-style:normal;font-size:12px;color:var(--mu);margin:6px 0 11px}
.mq-n{margin-top:9px;font-family:var(--osw);font-size:9.6px;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mu2)}
.isme{font-style:normal;font-family:var(--osw);font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);padding:2px 5px;vertical-align:2px;
  margin-left:5px}
.team .bg{flex:none}


/* ══════════════════════════════════════════════════════════════════
   THE CARD IS THE DOOR · THE NUMBERED LIST
   ══════════════════════════════════════════════════════════════════ */
.hero[data-card]{cursor:pointer}
.hero[data-card]:hover{box-shadow:7px 7px 0 var(--ink)}
.hero.compact[data-card]:hover{box-shadow:6px 6px 0 var(--ink)}
.hero[data-card]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* nothing inside the card inherits the pointer — the buttons say what they do */
.hero[data-card] .hact,.hero[data-card] .hmoney,.hero[data-card] .hpays{cursor:auto}

/* Numbers are the slots. Two columns on anything wider than a phone, because
   an 18-a-side list is a lot of scrolling in one. */
.rlist{border:1.5px solid var(--ink);background:var(--card);
  display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:560px){.rlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rl{display:flex;align-items:center;gap:11px;padding:9px 12px;border-bottom:1px solid var(--rule);
  font-size:13.5px;min-height:40px}
@media(min-width:560px){.rl:nth-child(odd){border-right:1px solid var(--rule)}}
.rl b{flex:none;min-width:22px;font-family:var(--osw);font-size:11px;font-weight:700;color:var(--mu2);
  text-align:right}
.rl span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.rl.reg span{font-weight:400;color:var(--mu)}
.rl.open{background:var(--card2)}
.rl.open span{color:var(--rule2);font-weight:400}
.rl.hold{background:var(--hot-soft)}
.rl.hold span{color:var(--hot);font-weight:600}
.rlnote{margin-top:9px;font-size:12.3px;color:var(--mu);line-height:1.55}
.remail{display:flex;gap:8px}
.remail .inp{flex:1;min-width:0}
.remail .btn{flex:none}
@media(max-width:480px){
  .remail{flex-direction:column}
  .remail .btn{width:100%}
}
/* three actions in a modal footer stop fitting somewhere around 360px;
   the primary one takes its own line rather than running off the screen */
@media(max-width:430px){
  .mfoot{flex-wrap:wrap}
  .mfoot .btn[style*="flex:1"],.mfoot a.btn[style*="flex:1"]{flex:1 0 100%}
}


/* ══════════════════════════════════════════════════════════════════
   MONEY
   ══════════════════════════════════════════════════════════════════ */
.segbar{display:inline-flex;border:1.5px solid var(--ink);background:var(--card)}
.segbar button{font-family:var(--osw);font-size:10.6px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:10px 15px;color:var(--mu);border-right:1.5px solid var(--ink);min-height:44px}
.segbar button:last-child{border-right:0}
.segbar button.on{background:var(--sel);color:var(--sel-ink);font-weight:700}

.rings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:1000px){.rings{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{border:1.5px solid var(--ink);background:var(--card);padding:14px 14px 20px;display:flex;flex-direction:column}
.tile .k{display:block;font-family:var(--osw);font-size:9.2px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mu2)}
.tile>b{font-family:var(--blk);font-size:clamp(24px,5vw,31px);letter-spacing:-1.3px;line-height:1;margin-top:8px}
.tile .dl{font-family:var(--osw);font-size:9.8px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mu);margin-top:8px;line-height:1.5}
.tile .dl.up{color:var(--ok)}
.tile .dl.down{color:var(--hot)}
/* the shape behind the number, so "up 14%" can be read rather than trusted */
.tile .spark{display:flex;align-items:flex-end;gap:2px;height:38px;margin-top:auto;
  padding-top:0;margin-bottom:0;position:relative;top:14px}
.tile .spark i{flex:1;background:var(--rule2);display:block;border-radius:2px 2px 0 0}
.tile .spark i.now{background:var(--ink)}

.ringt{align-items:flex-start}
.ringwrap{position:relative;width:84px;height:84px;margin:10px 0 2px}
.ring{width:84px;height:84px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9}
.ring .rbg{stroke:var(--rule)}
.ring .rfg{stroke:var(--ink);stroke-linecap:butt}
/* align-items:baseline on an 84px flex box parks the line at the TOP of the
   cross axis, which is why the number rode the arc. A line box the height of
   the ring centres it exactly, and the % stays on the numeral's baseline
   because it is still ordinary inline text. */
.ringwrap b{position:absolute;inset:0;text-align:center;line-height:84px;
  font-family:var(--blk);font-size:23px;letter-spacing:-.7px;white-space:nowrap}
.ringwrap b em{font-style:normal;font-size:12px;color:var(--mu);margin-left:1.5px}

.bars.m8{grid-template-columns:repeat(8,minmax(0,1fr))}
.bars.m6{grid-template-columns:repeat(6,minmax(0,1fr))}
.bars.m8 .bar span,.bars.m6 .bar span{font-size:8.6px;letter-spacing:.04em}
@media(max-width:520px){.bars.m8 .bar span,.bars.m6 .bar span{font-size:7.6px}}

/* two categories, direct-labelled, so identity is never colour alone */
.split{margin-top:2px}
.sp-b{display:flex;height:26px;border:1.5px solid var(--ink);background:var(--rule);overflow:hidden}
.sp-b i{display:block;height:100%}
.sp-b i.new{background:var(--acid)}
.sp-b i.ret{background:var(--ink)}
.sp-k{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-family:var(--osw);font-size:10.4px;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.sp-k span{display:flex;align-items:center;gap:7px}
.sp-k b{width:11px;height:11px;border:1.5px solid var(--ink);flex:none}
.sp-k b.kn{background:var(--acid)}
.sp-k b.kr{background:var(--ink)}

.srcrow .n b{display:block;font-size:13.5px;font-weight:700}
.srcrow .n i{display:block;font-style:normal;font-family:var(--osw);font-size:9.4px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mu);margin-top:3px}
.srcrow .p{white-space:nowrap;font-family:var(--blk);font-size:14px;letter-spacing:-.4px}

/* ── back to the board, from the sign-in screen ── */
.lgback{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;font-family:var(--osw);
  font-size:10.4px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);
  border:1.5px solid var(--rule2);background:var(--card);padding:9px 12px;min-height:42px}
.lgback:hover{border-color:var(--ink);color:var(--ink)}
.lgback svg{width:14px;height:14px}


/* ══════════════════════════════════════════════════════════════════
   AN EDITORIAL PASS

   The console was hard to read for one reason: almost every label was
   9px uppercase tracked out to .11em. That reads as instrumentation.
   A page somebody looks at every day should read like a page.

   So: body copy up, leading up, and the micro-caps kept only where a
   word is genuinely a label rather than a sentence. Headings are
   sentence case in the display face, sized to do the work that the
   tracking used to do badly.
   ══════════════════════════════════════════════════════════════════ */
body{font-size:15.5px;line-height:1.6}
.card{padding:18px}
@media(max-width:820px){.card{padding:15px}}

/* a page head that reads like a masthead */
.mhead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px;
  padding-bottom:16px;border-bottom:2px solid var(--ink)}
.mh-l{flex:1;min-width:220px}
.mhead h1{font-family:var(--blk);font-size:clamp(28px,5.2vw,40px);letter-spacing:-1.6px;line-height:1;
  text-transform:none}
.mhead p{margin-top:8px;font-size:14.5px;color:var(--mu);line-height:1.5}

/* section heads: sentence case, sized rather than tracked */
.sec2{font-family:var(--blk);font-size:19px;letter-spacing:-.5px;line-height:1.2;text-transform:none;
  color:var(--ink);margin:30px 0 13px;padding-bottom:9px;border-bottom:1.5px solid var(--rule2)}
.rsec{font-family:var(--blk);font-size:17px;letter-spacing:-.4px;margin:22px 0 11px;text-transform:none}
.rlead{font-size:16px;line-height:1.65;color:var(--ink2)}
.rlead b{font-weight:700;color:var(--ink)}

/* the descriptive line under a switch is a sentence, not a label */
.swn{font-size:13.5px;color:var(--mu);line-height:1.55;text-transform:none;letter-spacing:0}
.sw{padding:14px 0}
.sw span b{font-size:15px}
.note{font-size:14px;line-height:1.65;padding:13px 15px}
.tile .k,.kpi .k,.otot span,.plan .k,.mcount .k{font-size:10.4px;letter-spacing:.07em}
.tile .dl{font-size:11.4px;letter-spacing:.02em;text-transform:none}
.hint,.fct i,.otot i,.plan i{font-size:12.5px;line-height:1.5}

/* ── the period navigator ── */
.pnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;
  border:1.5px solid var(--ink);background:var(--card);padding:10px 12px}
.pnav.flat{border-color:var(--rule2);background:var(--card2);margin-bottom:16px}
.pn-b{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--ink);
  background:var(--card)}
.pn-b:hover{background:var(--sel);color:var(--sel-ink)}
.pn-b[disabled]{opacity:.28;pointer-events:none}
.pn-b svg{width:17px;height:17px}
.pn-t{flex:1;min-width:0;text-align:center}
.pn-t b{display:block;font-family:var(--blk);font-size:clamp(17px,3.4vw,22px);letter-spacing:-.7px;line-height:1.15}
.pn-t i{display:block;font-style:normal;font-size:12.5px;color:var(--mu);margin-top:4px}
.pn-now{flex:none;font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.05em;
  border:1.5px solid var(--rule2);background:var(--card2);padding:11px 12px;min-height:44px;color:var(--mu)}
.pn-now:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:520px){.pn-now{width:100%;order:4}}

/* the bars are buttons now: tap one to jump to that period */
.bar{cursor:pointer;background:none;border:0;padding:0}
.bar:hover i{opacity:1}
.bar:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── the host's email count ── */
.mcount{border:1.5px solid var(--rule2);background:var(--card2);padding:15px;margin-bottom:14px}
.mcount .k{display:block;font-family:var(--osw);font-weight:600;text-transform:uppercase;color:var(--mu2)}
.mcount b{display:block;font-family:var(--blk);font-size:38px;letter-spacing:-1.8px;line-height:1;margin-top:6px}
.mcount i{display:block;font-style:normal;font-size:13.5px;color:var(--mu);margin-top:8px;line-height:1.5}

/* ── the plan meter, admin side ── */
.quota .qt{display:flex;height:26px;border:1.5px solid var(--ink);background:var(--card);overflow:hidden}
.quota .qt i{display:block;height:100%}
.quota .qt i.used{background:var(--ink)}
.quota .qt i.proj{background:repeating-linear-gradient(45deg,var(--rule2),var(--rule2) 5px,
  var(--card) 5px,var(--card) 10px)}
/* Named .qk once. So was the sign-in account list, 260 lines up, and this
   block won on source order — turning every club name into an 11px square.
   Third collision of this kind, so the rule now: a legend is .*leg, and
   nothing else may claim it. */
.qleg{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;font-size:13px;color:var(--ink2)}
.qleg span{display:flex;align-items:center;gap:7px}
.qleg b{width:11px;height:11px;border:1.5px solid var(--ink);flex:none}
.qleg b.ku{background:var(--ink)}
.qleg b.kp{background:repeating-linear-gradient(45deg,var(--rule2),var(--rule2) 3px,var(--card) 3px,var(--card) 6px)}
.qleg .qcap{margin-left:auto;color:var(--mu)}

/* ── the report ── */
.rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:560px){.rgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rgrid div{border:1.5px solid var(--rule2);background:var(--card2);padding:11px 12px}
.rgrid span{display:block;font-size:12px;color:var(--mu);line-height:1.4}
.rgrid b{display:block;font-family:var(--blk);font-size:20px;letter-spacing:-.8px;margin-top:5px;line-height:1}
/* the trend chart: shorter, with the average drawn across it */
.barwrap{position:relative}
.barwrap .bars{height:150px}
@media(max-width:520px){.barwrap .bars{height:120px}}
.avgline{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed var(--mu2);
  pointer-events:none;z-index:2}
.avgline span{position:absolute;right:0;top:-9px;background:var(--card);padding:0 5px;
  font-family:var(--osw);font-size:9.6px;font-weight:600;letter-spacing:.05em;color:var(--mu)}
.bars .bar b{color:var(--ink);text-shadow:0 0 3px var(--card),0 0 3px var(--card)}
/* ── the trend line ── */
.line{position:relative}
.lplot{position:relative;height:170px;border-bottom:1.5px solid var(--rule2);
  border-left:1.5px solid var(--rule2);margin-right:6px}
@media(max-width:520px){.lplot{height:130px}}
.lplot svg{position:absolute;inset:0;width:100%;height:100%}
.lplot .lar{fill:var(--card2)}
.lplot .lln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lavg{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed var(--mu2);z-index:5;pointer-events:none}
.lavg span{position:absolute;left:0;top:-8px;background:var(--card);padding:0 5px;z-index:4;
  font-family:var(--osw);font-size:9.6px;font-weight:600;letter-spacing:.04em;color:var(--mu)}
.ldot{position:absolute;width:26px;height:26px;margin:0 0 -13px -13px;z-index:3;
  display:grid;place-items:center;pointer-events:none}
.ldot:before{content:'';width:9px;height:9px;border-radius:50%;background:var(--card);
  border:2px solid var(--ink);display:block}

.ldot.peak:before{background:var(--ink2)}
.ldot.now:before{width:15px;height:15px;background:var(--acid);border-color:var(--ink)}
.lhit:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.ldot em{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-style:normal;
  font-family:var(--osw);font-size:10px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  background:var(--card);padding:1px 5px;border:1px solid var(--rule2)}
.lx{display:flex;margin-top:9px;padding:0 1.5%}
.lx span{flex:1;text-align:center;font-family:var(--osw);font-size:9.6px;font-weight:500;
  letter-spacing:.05em;color:var(--mu2)}
.lx span:first-child{text-align:left}
.lx span:last-child{text-align:right}
.lx span.on{color:var(--ink);font-weight:700}
.lscale{margin-top:11px;padding-top:11px;border-top:1px solid var(--rule);
  font-size:12.3px;color:var(--mu2);line-height:1.5}

/* A period still running is drawn as a dashed tail and a hollow dot, so the
   dip at the right edge reads as "not finished" rather than "collapsed". */
.lln.part{stroke-dasharray:5 4}
.ldot.part:before{background:var(--card)}
.ldot.part em{font-weight:600}
/* The last point sits on the right edge, so its label has to hang inward or it
   pushes the page wider than the phone. Same for the first point, mirrored. */
.ldot.now em{left:auto;right:2px;transform:none;text-align:right}
.lplot .ldot:first-of-type em{left:2px;right:auto;transform:none;text-align:left}
/* Column-wide tap zone behind each point on the trend, so a thumb can land
   anywhere in the week rather than on a 26px dot. */
.lhit{position:absolute;top:0;bottom:0;background:none;border:0;padding:0;margin:0;
  z-index:1;cursor:pointer}
.lhit:active{background:rgba(0,0,0,.04)}

/* ══════════════════════════════════════════════════════════════════
   GREEN CHROME
   The navigation is pitch green and the page sits on mown stripes, so
   the console reads as the same place as the board rather than a
   separate admin tool. Contrast checked against the pitch:
   paper 8.55, acid 7.65, muted #B9C9B4 5.61 — all clear of AA.
   Selection inverts here: on a dark rail the filled tile is PAPER, not
   ink, because two dark greens next to each other say nothing.
   ══════════════════════════════════════════════════════════════════ */

/* the ground — same two shades a hair apart the board uses */
.mainc{position:relative}
.mainc > main{position:relative}
.mainc > main:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,#E4EADB 0 56px,var(--paper) 56px 112px)}
.mainc > main > *{position:relative;z-index:1}
@media(max-width:560px){
  .mainc > main:before{background:repeating-linear-gradient(90deg,#E4EADB 0 34px,var(--paper) 34px 68px)}
}

/* the top bar */
.topm{background:var(--pitch);color:var(--pitch-ink);border-bottom:3px solid var(--ink);
  position:relative;overflow:hidden}
.topm:before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 56px,transparent 56px 112px)}
.topm .in{position:relative;z-index:1}
.topm .orgc{background:rgba(0,0,0,.20);border-color:rgba(242,240,231,.42);color:var(--pitch-ink)}
.topm .orgc b{background:var(--acid);border-color:var(--acid)}
.topm .orgc.adm{background:var(--ink);border-color:var(--ink);color:var(--pitch-ink)}
.topm .orgc.adm b{background:var(--pitch-ink);border-color:var(--pitch-ink)}
.topm .tbtn{border-color:rgba(242,240,231,.45);background:rgba(0,0,0,.18);color:var(--pitch-ink)}
.topm .tbtn:hover{background:var(--pitch-ink);border-color:var(--pitch-ink);color:var(--ink)}
@media(min-width:900px){ .topm{border-bottom-color:var(--ink)} }

/* the phone tab bar */
.tabbar{background:var(--pitch);border-top:3px solid var(--ink)}
.tabbar button{color:#B9C9B4}
.tabbar button.on{color:var(--pitch-ink)}
.tabbar button.on:before{background:var(--acid)}

/* the desktop rail */
@media(min-width:900px){
  .rail{background:var(--pitch);color:var(--pitch-ink);border-right:3px solid var(--ink);
    position:sticky;overflow:hidden}
  .rail:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 56px,transparent 56px 112px)}
  .rail > *{position:relative;z-index:1}
  .railtop{border-bottom:1px solid rgba(242,240,231,.20)}
  .railtop i{color:#B9C9B4}
  .rail nav button{color:#C6D4C2;border-left-color:transparent}
  .rail nav button:hover{background:rgba(255,255,255,.07);border-left-color:rgba(242,240,231,.42)}
  /* selected is the paper tile: on this ground an ink fill would disappear */
  .rail nav button.on{background:var(--pitch-ink);border-left-color:var(--acid);color:var(--ink);font-weight:700}
  .rail nav button.on svg{opacity:1}
  .railfoot{border-top:1px solid rgba(242,240,231,.20)}
  .railfoot b{color:var(--pitch-ink)}
  .railfoot span{color:#B9C9B4}
  .railfoot i{background:var(--acid);border-color:var(--acid)}
  .railfoot i.adm{background:var(--pitch-ink);border-color:var(--pitch-ink)}
}

/* the plus60 stamp on a history entry written by support */
.log .byp{color:var(--acid-dk);font-weight:700}
/* The support banner carries a sentence now, not four words, so it needs to
   wrap on a phone instead of shoving the exit button off the edge. */
.asbar .in{flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
.asbar #astxt{flex:1 1 260px;line-height:1.5;text-transform:none;letter-spacing:.02em}
.asbar #astxt b{font-weight:700}
.asbar button{flex:none;min-height:32px}
@media(max-width:560px){ .asbar button{margin-left:0;min-height:38px} }

/* ── admin venue sheet ── */
.vf{margin-bottom:4px}
.vf .sw{align-items:center}
/* .sw sizes its label to the text, which left seven inputs at seven different
   widths. One column for the labels, one for the fields. */
.vf .sw > span:first-child{flex:0 0 116px}
.vf .sw .inp{flex:1 1 auto;min-width:0;max-width:360px;padding:9px 11px;font-size:14px}
/* A stacked label over a field. Used by the club sheet and by the ads sheet;
   it was being written in the markup already with nothing styling it, so a
   label sat inline against its input. */
.vf .lab{display:block;font-family:var(--osw);font-size:9.6px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mu);margin-bottom:5px}
.vf input:not(.inp), .vf select:not(.inp), .vf textarea:not(.inp){
  width:100%;background:var(--card);border:1.5px solid var(--rule2);padding:10px 11px;
  font-size:15px;border-radius:0;transition:.12s}
.vf input:not(.inp):focus{outline:none;border-color:var(--ink);box-shadow:3px 3px 0 var(--rule2)}
.vf input::placeholder{color:var(--mu2)}
@media(max-width:560px){ .vf input:not(.inp){padding:12px 11px;font-size:16px;min-height:46px} }
/* two fields side by side: the start and end of a run */
.vf .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){ .vf .two{grid-template-columns:1fr} }

.vh{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vh li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1.5px solid var(--rule2);
  background:var(--card);padding:11px 13px}
.vh b{font-size:14.5px}
.vh span{font-family:var(--osw);font-size:9.8px;font-weight:300;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mu)}
.vh button{margin-left:auto}
@media(max-width:560px){
  /* .sw is nowrap, so the label cannot drop to its own line without this */
  .vf .sw{flex-wrap:wrap;gap:6px}
  .vf .sw > span:first-child{flex:1 1 100%}
  .vf .sw .inp{flex:1 1 100%;max-width:none;font-size:16px;min-height:46px}
  .vh li{gap:8px}
  .vh button{margin-left:0;width:100%}
}

/* ── feedback ── */
.fbtop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:6px}
.fbavg b{display:block;font-family:var(--blk);font-size:40px;letter-spacing:-1.8px;line-height:1;
  margin:6px 0 8px}
.fbavg i{display:block;font-style:normal;font-family:var(--osw);font-size:9.8px;font-weight:300;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin-top:8px}
.stars{display:inline-flex;gap:3px}
.stars i{width:13px;height:13px;display:block;background:var(--rule2);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars i.f{background:var(--acid)}
.fbtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.fbtag{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--rule2);
  background:var(--card2);padding:5px 9px;font-family:var(--osw);font-size:9.4px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.fbtag b{font-weight:700;color:var(--acid-dk)}
.fbrow{margin-bottom:10px}
.fbhd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fbhd b{font-family:var(--blk);font-size:15px;letter-spacing:-.3px}
.fbhd span{font-family:var(--osw);font-size:9.8px;font-weight:300;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mu)}
.fbhd i{margin-left:auto;font-style:normal;font-family:var(--osw);font-size:9.4px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--mu2)}
.fbnote{margin-top:10px;font-size:14px;line-height:1.6;color:var(--ink2);
  border-left:3px solid var(--acid);padding-left:11px}
@media(max-width:700px){
  .fbtop{grid-template-columns:minmax(0,1fr)}
  .fbhd i{margin-left:0;width:100%}
}

/* the line on the login screen that replaced the demo toggle */
.lgmode{display:flex;flex-direction:column;gap:4px;border:1.5px solid var(--rule2);
  border-left:4px solid var(--acid);background:var(--card);padding:11px 14px;margin-bottom:16px}
.lgmode b{font-size:13.5px}
.lgmode span{font-size:13px;line-height:1.55;color:var(--mu)}


/* ═════════════════════════════════════════════════════════════════════
   PRESSED
   Every control said the same thing whether you were about to press it,
   pressing it, or had already chosen it. On a phone, with no cursor and no
   hover, that leaves nothing at all: you tap, something happens somewhere
   else on the page, and you are not sure you were the cause.

   So three states, each a real step in contrast rather than a tint:
     hover    the edge darkens, desktop only
     active   inverted while the finger is down, and it moves 1px
     .on      chosen, and it stays chosen

   Pointer-coarse devices get the active state on :active alone, since there
   is no hover to lean on.
   ═════════════════════════════════════════════════════════════════════ */
.btn, .opts button, .rad, .pinpad button, #demobar button, .tabbar button, .rail a, .rail button{
  transition: background-color .09s ease, color .09s ease, border-color .09s ease,
              transform .06s ease, box-shadow .09s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:active, .opts button:active, .rad:active, .pinpad button:active,
#demobar button:active, .tabbar button:active{
  transform: translateY(1px);
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: none;
}
.btn-a:active{ background: var(--ink); color: var(--acid); }
.btn-x:active{ background: var(--hot); color: var(--paper); border-color: var(--hot); }

/* Chosen, as opposed to being pressed. Filled, not outlined, so a glance at a
   row of options tells you which one is live without reading the labels. */
.opts button.on, .rad.on{
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.opts button:not(.on){ background: transparent; color: var(--ink2); }
@media (hover:hover){
  .opts button:not(.on):hover, .rad:not(.on):hover{ background: var(--rule2); color: var(--ink); }
  .btn:hover{ border-color: var(--ink); }
}

/* Keyboard users get the same information a finger gets. */
.btn:focus-visible, .opts button:focus-visible, .rad:focus-visible,
.pinpad button:focus-visible, .tabbar button:focus-visible{
  outline: 2px solid var(--ink); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .btn, .opts button, .rad, .pinpad button, #demobar button, .tabbar button{
    transition: none;
  }
  .btn:active, .opts button:active, .rad:active{ transform: none; }
}

/* the switches sit on the right of the bar and never wrap mid-pair */
#demobar .db-sw{ display:inline-flex; flex:0 0 auto; border:1.5px solid var(--ink) }
#demobar .db-sw button{ font-family:var(--osw); font-size:9px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; padding:7px 11px }
#demobar .db-sw button + button{ border-left:1.5px solid var(--ink) }
#demobar .db-sw + .db-sw{ margin-left:-4px }
/* Two pairs plus a sentence does not fit a phone. The label gives way first,
   because the switches are the only part you can act on. */
@media(max-width:560px){
  #demobar{ flex-wrap:wrap; row-gap:7px }
  #demobar .db-l{ flex:1 1 100%; min-width:0 }
  #demobar .db-sw{ flex:1 1 0; justify-content:center }
  #demobar .db-sw button{ flex:1 1 0; padding:8px 6px }
  #demobar .db-sw + .db-sw{ margin-left:0 }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHOTOS
   The upload card and the gallery cells. The dashed .pslot squares above are
   gone from the photo views: they were a demo, and a dashed square that does
   nothing when you press it is worse than an empty state that explains itself.
   ══════════════════════════════════════════════════════════════════════════ */

/* an uploaded photo, in the console's own grids */
.pcell{position:relative;border:1.5px solid var(--rule2);background:var(--card2);
  aspect-ratio:4/3;overflow:hidden}
.pcell img{width:100%;height:100%;display:block;object-fit:cover}
.pcell .pcap{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 6px;
  font-family:var(--osw);font-size:9px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;
  background:linear-gradient(to top,rgba(14,26,18,.8),rgba(14,26,18,0))}
.pcell.off img{filter:grayscale(1);opacity:.45}
.pcell .poff{position:absolute;top:7px;left:7px;background:var(--ink);color:var(--paper);
  font-family:var(--osw);font-size:8.5px;font-weight:700;letter-spacing:.1em;padding:4px 6px}

/* ── the upload card ──
   The picture is the control. A host at a pitch on a phone is not going to
   type a percentage into a pair of number fields, so the crop is set by
   clicking the subject and the frame shows exactly what the public listing
   will show. */
.upc{position:relative;display:flex;flex-wrap:wrap;gap:18px;padding:18px 0;
  border-top:1.5px solid var(--rule)}
.upc:first-of-type{border-top:0;padding-top:4px}
.upc-im{position:relative;flex:0 0 300px;aspect-ratio:16/9;overflow:hidden;
  border:1.5px solid var(--ink);background:var(--card2);cursor:crosshair}
.upc-im img{width:100%;height:100%;display:block;object-fit:cover;
  pointer-events:none;user-select:none}
.upc-hint{position:absolute;left:0;right:0;bottom:0;padding:16px 9px 7px;
  font-family:var(--osw);font-size:9px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;pointer-events:none;
  background:linear-gradient(to top,rgba(14,26,18,.82),rgba(14,26,18,0))}
.upc-im:hover .upc-hint{opacity:.35}
.upc-x{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:2px solid var(--acid);border-radius:50%;box-shadow:0 0 0 2px rgba(14,26,18,.5);
  pointer-events:none;opacity:0;transition:.12s}
.upc-x.on{opacity:1}
.upc-bd{flex:999 1 320px;min-width:0}
.upc-bd .sw{margin-bottom:6px}
.upc-rm{position:absolute;top:8px;right:0;width:32px;height:32px;padding:0;
  border:1.5px solid var(--rule2);background:var(--card);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.upc-rm svg{width:15px;height:15px}
.upc-rm:hover{border-color:var(--ink);background:var(--hot-soft)}
@media(max-width:620px){
  .upc{gap:12px}
  .upc-im{flex:1 1 100%}
  .upc-rm{top:auto;bottom:18px}
}

/* A row of buttons. The console had no class for this: every place that
   needed two buttons side by side wrote the flex rules inline, which is why
   they were all slightly different widths. */
.rowbtn{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.rowbtn .btn{flex:0 0 auto}

/* Two fields side by side, same as the public side's .two. The photo
   uploader needs it for the session and ground pickers. */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:560px){.two{grid-template-columns:minmax(0,1fr)}}