/* Mission Escape Games - waiver system stylesheet.
   Base: the approved prototype (v43), unchanged. Additions for the live
   site are at the end. Fonts are served from this site, not from Google,
   so no visitor's address is sent to a third party. */
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}

:root{
  color-scheme:dark;
  /* Mission Escape Games brand: red #ED2024, grey #AFAFAF, black, white */
  --brand:#ED2024; --brand-grey:#AFAFAF;
  --ground:#000000; --surface:#17181B; --surface-2:#212327; --ink:#F2F2F3; --ink-2:#AFAFAF; --line:#33353A;
  --accent:#D41017; --accent-ink:#FFFFFF; --accent-soft:#2A1416; --accent-text:#FF5F5F;
  --good:#6FCF97; --good-soft:#10251A; --warn:#F2C14E; --warn-soft:#2A2212; --bad:#FF6B6B; --bad-soft:#2E1416;
  --focus:#FFFFFF; --shadow:0 1px 2px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.55);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:1.6rem}
h2{font-size:1.25rem}
h3{font-size:1.05rem}
p{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.small{font-size:.875rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* top bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.bar-in{max-width:1180px;margin-inline:auto;padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto}
.brand b{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.chip-proto{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:var(--warn-soft);color:var(--warn)}
.tabs{display:flex;gap:4px;overflow-x:auto;max-width:100%}
.tab{border:1px solid transparent;background:none;padding:7px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;color:var(--ink-2);font-weight:700;font-size:.92rem}
.tab[aria-current="true"]{background:var(--accent-soft);color:var(--accent-text);border-color:color-mix(in srgb,var(--accent-text) 40%,transparent)}
.linkbtn{background:none;border:none;color:var(--ink-2);text-decoration:underline;cursor:pointer;font-size:.85rem;padding:4px}

main{max-width:1180px;margin-inline:auto;padding:20px 16px 64px}
.note{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:10px 14px;margin-bottom:18px;font-size:.9rem;color:var(--ink-2)}
.note b{color:var(--ink)}
.note .linkbtn{margin-left:auto;flex:none}

/* buttons & fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;border:1px solid var(--line);background:var(--surface);padding:10px 16px;font-weight:700;cursor:pointer;min-height:44px}
.btn:hover{border-color:var(--ink-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}

.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.btn.sm{min-height:34px;padding:5px 10px;font-size:.85rem;border-radius:8px}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.btn.block{width:100%}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-weight:700;font-size:.9rem}
.field .req{font-weight:400;color:var(--ink-2);font-size:.8rem;margin-left:6px}
.inp{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;min-height:44px}
.inp:focus{border-color:var(--accent)}
.inp.err{border-color:var(--bad);background:var(--bad-soft)}
.errtxt{color:var(--bad);font-size:.82rem}
textarea.inp{min-height:180px;resize:vertical;line-height:1.5}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 0;cursor:pointer}
.check input[type="checkbox"],.switch input[type="checkbox"],.setctl input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:none;margin-top:1px;
  border:2px solid var(--ink-2);border-radius:6px;background:#000;position:relative;cursor:pointer;transition:border-color .12s}
.check input[type="checkbox"]:checked,.switch input[type="checkbox"]:checked,.setctl input[type="checkbox"]:checked{background:#000;border-color:#FFFFFF}
.check input[type="checkbox"]:checked::after,.switch input[type="checkbox"]:checked::after,.setctl input[type="checkbox"]:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:11px;
  border:solid #FFFFFF;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.check input[type="checkbox"]:focus-visible,.switch input[type="checkbox"]:focus-visible,.setctl input[type="checkbox"]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.check input[type="checkbox"]:hover,.setctl input[type="checkbox"]:hover{border-color:#FFFFFF}
/* consent lines sit quieter than the waiver text */
.check.fine span{font-size:.82rem;color:var(--ink-2);line-height:1.45}
.choices{margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.neutral{background:var(--surface-2);color:var(--ink-2)}
.pill.accent{background:var(--accent-soft);color:var(--accent-text)}
.alert{border-radius:10px;padding:12px 14px;font-size:.92rem}
.alert.warn{background:var(--warn-soft);color:var(--warn)}
.alert.bad{background:var(--bad-soft);color:var(--bad)}
.alert.good{background:var(--good-soft);color:var(--good)}
.alert.info{background:var(--accent-soft);color:var(--accent-text)}

/* phone frame */
.phone{max-width:440px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}
.phone-head{padding:18px 20px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.phone-head .wm{font-family:var(--display);font-weight:800;line-height:1;font-size:1rem;letter-spacing:.02em}
.phone-head .wm small{display:block;font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.2em;color:var(--ink-2);margin-top:3px}
.phone-body{padding:18px 20px 24px}
@media (max-width:480px){.phone{border-radius:0;border-inline:none;box-shadow:none;margin-inline:-16px}}
.progress{display:flex;gap:4px;margin:2px 0 16px}
.progress i{flex:1;height:4px;border-radius:2px;background:var(--surface-2)}
.progress i.on{background:var(--accent)}
.datechips{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.datechip{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 10px;text-align:center;cursor:pointer;min-width:58px}
.datechip b{display:block;font-family:var(--display);font-size:1.15rem}
.datechip span{font-size:.72rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.datechip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.datechip[aria-pressed="true"] span{color:inherit}
.gamelist{display:flex;flex-direction:column;gap:8px}
.game{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);cursor:pointer;text-align:left;width:100%}
.game .t{font-family:var(--mono);font-size:1rem;min-width:78px}
.game .r{font-weight:700}
.game[aria-pressed="true"]{border-color:var(--brand);background:var(--accent-soft)}
.choice{display:flex;flex-direction:column;gap:8px}
.choice .game{padding:14px}
.waivertext{border:1px solid var(--line);border-radius:10px;padding:14px;max-height:480px;min-height:300px;overflow:auto;background:var(--ground);font-size:.92rem}
.waivertext h4{margin:10px 0 4px;font-family:var(--display);font-size:.95rem}
.waivertext h4:first-child{margin-top:0}

.sigwrap{border:1.5px dashed var(--line);border-radius:12px;background:#FFFFFF;position:relative}
.sigwrap canvas{display:block;width:100%;height:160px;touch-action:none;cursor:crosshair}
.sigwrap .base{position:absolute;left:16px;right:16px;bottom:34px;border-bottom:1px solid rgba(0,0,0,.35);pointer-events:none}
.sigwrap .x{position:absolute;left:18px;bottom:38px;font-family:var(--display);color:rgba(0,0,0,.45);pointer-events:none}
.minor{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px}
.minor-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lang{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-weight:700;font-size:.82rem;cursor:pointer;margin-left:auto}
.draft{background:var(--warn-soft);color:var(--warn);font-weight:700;font-size:.82rem;padding:8px 20px;letter-spacing:.01em}
.done{text-align:center;padding:24px 0 8px;display:flex;flex-direction:column;gap:12px;align-items:center}
.tick{width:64px;height:64px;border-radius:50%;background:var(--good-soft);color:var(--good);display:grid;place-items:center}

/* front desk */
.fd{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
@media (max-width:900px){.fd{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.panel-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-b{padding:14px 16px}
.kpis{display:flex;flex-wrap:wrap;gap:22px;padding:14px 16px;border-bottom:1px solid var(--line)}
.kpi b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums}
.kpi span{font-size:.78rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.gm-row{border-bottom:1px solid var(--line)}
.gm-row:last-child{border-bottom:none}
.gm-sum{display:grid;grid-template-columns:78px minmax(0,1.2fr) minmax(120px,1fr) auto;gap:12px;align-items:center;padding:12px 16px;width:100%;background:none;border:none;text-align:left;cursor:pointer}
.gm-sum:hover{background:var(--ground)}
@media (max-width:620px){.gm-sum{grid-template-columns:64px minmax(0,1fr);}.gm-sum .meter-cell,.gm-sum .flag-cell{grid-column:2}}
.meter{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent)}
.meter.full i{background:var(--good)}
.flag-cell{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.detail{padding:4px 16px 16px;background:var(--ground)}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
.side{display:flex;flex-direction:column;gap:16px}
.uq{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
.uq:last-child{border-bottom:none}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.84rem;max-height:320px;overflow:auto}
.log li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.log li>.mono{white-space:nowrap}

/* game master */
.gm-list{display:flex;flex-direction:column;gap:8px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button{min-height:52px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-weight:800;font-family:var(--display);font-size:1.05rem;cursor:pointer}
.seg button[aria-pressed="true"].yes{background:var(--good);border-color:var(--good);color:var(--surface)}
.seg button[aria-pressed="true"].no{background:var(--warn);border-color:var(--warn);color:var(--surface)}
.timein{display:flex;align-items:center;gap:6px}
.timein .inp{width:80px;text-align:center;font-family:var(--mono);font-size:1.2rem}
.preview{width:100%;aspect-ratio:4/5;max-width:100%;border-radius:12px;background:var(--surface-2);display:block}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr));gap:10px}
.gallery figure{margin:0;position:relative}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;display:block}
.gallery figcaption{font-size:.76rem;color:var(--ink-2);margin-top:4px}
.gallery .pill{position:absolute;top:6px;left:6px}
.subtabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.subtabs button{background:none;border:none;padding:12px;font-weight:700;color:var(--ink-2);cursor:pointer;border-bottom:3px solid transparent}
.subtabs button[aria-current="true"]{color:var(--accent-text);border-bottom-color:var(--brand)}

/* owner */
.owner{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:820px){.owner{grid-template-columns:minmax(0,1fr)}}
.ownnav{position:sticky;top:80px;display:flex;flex-direction:column;gap:2px}
@media (max-width:820px){.ownnav{position:static;flex-direction:row;overflow-x:auto}}
.ownnav a{padding:8px 12px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-weight:700;font-size:.9rem;white-space:nowrap}
.ownnav a:hover{background:var(--surface)}
.osec{scroll-margin-top:80px}
.seg-sm{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg-sm button{border:none;background:var(--surface);padding:7px 14px;font-weight:700;cursor:pointer;color:var(--ink-2)}
.seg-sm button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.switch:last-child{border-bottom:none}
.switch input[type="checkbox"]{width:22px;height:22px}

/* modal & toast */
.scrim{position:fixed;inset:0;background:rgba(10,15,18,.5);display:grid;place-items:center;padding:16px;z-index:50}
.modal{background:var(--surface);border-radius:16px;max-width:440px;width:100%;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:10px;font-weight:700;z-index:60;max-width:calc(100% - 32px);box-shadow:var(--shadow)}
.pw{font-family:var(--mono);font-size:1.3rem;background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;letter-spacing:.06em}


.bar select.inp{min-height:36px;padding:5px 10px;width:auto;font-weight:700}
.locpick{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--ink-2)}
.posters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.poster{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);cursor:pointer;padding:0;text-align:left;display:flex;flex-direction:column}
.poster img{width:100%;aspect-ratio:5/7;object-fit:cover;display:block;background:var(--surface-2)}
.poster span{padding:8px 10px;display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.poster[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.chosen{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--ground)}
.chosen img{width:52px;aspect-ratio:5/7;object-fit:cover;border-radius:6px}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(96px,100%),1fr));gap:8px}
.timebtn{border:1px solid var(--line);background:var(--surface);border-radius:10px;min-height:46px;font-family:var(--mono);cursor:pointer}
.timebtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.langsel{margin-left:auto;min-height:34px;width:auto;padding:4px 10px;border-radius:999px;font-weight:700;font-size:.85rem}
.protolang{background:var(--surface-2);color:var(--ink-2);font-size:.78rem;padding:6px 20px}
.sess{display:grid;grid-template-columns:78px 40px minmax(0,1fr) 92px auto;gap:12px;align-items:center;padding:10px 16px;width:100%;background:none;border:none;text-align:left;cursor:pointer}
.sess:hover{background:var(--ground)}
.sess img{width:40px;aspect-ratio:5/7;object-fit:cover;border-radius:5px}
.sess .count b{font-family:var(--display);font-size:1.35rem;font-variant-numeric:tabular-nums}
.sess.empty{opacity:.62}
@media (max-width:620px){.sess{grid-template-columns:62px 36px minmax(0,1fr) auto}.sess .flag-cell{grid-column:3 / -1;justify-content:flex-start}}
.addtime{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--line);background:var(--ground);border-radius:0 0 14px 14px}
.addtime .field{min-width:130px;flex:1}
.desk-gm{max-width:760px;margin-inline:auto}
.desk-gm .gmgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:20px;align-items:start}
@media (max-width:700px){.desk-gm .gmgrid{grid-template-columns:1fr}}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:14px}
.gcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:var(--surface)}
.gcard img{width:100%;aspect-ratio:5/7;object-fit:cover;display:block}
.gcard .gb{padding:12px;display:flex;flex-direction:column;gap:10px}
.gcard.off img{filter:grayscale(1);opacity:.5}
.days{display:flex;gap:4px;flex-wrap:wrap}
.days button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 10px;font-weight:700;cursor:pointer;color:var(--ink-2)}
.days button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tchip{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);background:var(--accent-soft);color:var(--accent-text);border-radius:8px;padding:4px 4px 4px 10px}
.tchip button{border:none;background:none;color:inherit;cursor:pointer;padding:2px 6px;font-size:.9rem}
.channels{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:12px;padding:4px 12px}
.channels .check{padding:8px 0}
.channels .check + .check{border-top:1px solid var(--line)}
.otabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line)}
.otabs button{background:none;border:none;border-bottom:3px solid transparent;padding:10px 14px;font-weight:700;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.otabs button[aria-selected="true"]{color:var(--accent-text);border-bottom-color:var(--brand)}
.modal.wide{max-width:780px}
pre.csv{overflow:auto;max-height:260px;font-family:var(--mono);font-size:.72rem;background:var(--ground);border:1px solid var(--line);padding:10px;border-radius:8px;white-space:pre;margin:0}
.fdgrid{display:grid;grid-template-columns:92px minmax(130px,1.3fr) 78px minmax(190px,1.5fr) 116px 18px;gap:14px;align-items:center;padding:12px 18px}
.fdhead{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);font-weight:700;border-bottom:1px solid var(--line);padding-block:10px}
.fdrow{width:100%;background:none;border:none;text-align:left;cursor:pointer;min-height:64px}
.fdrow:hover{background:var(--surface-2)}
.fdrow[aria-expanded="true"]{background:var(--surface-2)}
.fdgrid .ctr{text-align:center;justify-self:center}
.fdrow .count b{font-family:var(--display);font-size:1.4rem;font-variant-numeric:tabular-nums;line-height:1}
.fdrow .chev{color:var(--ink-2);font-size:1rem;justify-self:end}
.fdrow .flag-cell{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start}
.gcell{display:flex;align-items:center;gap:10px;min-width:0}
.gcell img{width:34px;aspect-ratio:5/7;object-fit:cover;border-radius:5px;flex:none}
.gcell b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail{padding:6px 18px 18px;background:var(--surface-2)}
.detail table{background:var(--surface);border-radius:10px;overflow:hidden}
.detail th,.detail td{padding:8px 10px;vertical-align:middle}
.detail table{font-size:.86rem}
.detail td b{white-space:nowrap}
.detail .pill{white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr));gap:0;padding:16px 0;align-items:start}
.kpi{padding:0 18px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.kpi:first-child{border-left:0}
.kpi b{line-height:1}
.kpi span{font-size:.72rem;letter-spacing:.05em;line-height:1.25}
.kpi b{line-height:1.1}
.ok{color:var(--good);font-weight:700}
.locpick select[disabled]{opacity:.6}
/* phone layout for a front desk row: time, game and count on the first line,
   sharing limits and status underneath, nothing scrolling sideways */
@media (max-width:760px){
  .fdhead{display:none}
  /* fixed outer columns so the times, counts and arrows line up down the list
     instead of each row sizing itself to its own content */
  .fdgrid{grid-template-columns:74px minmax(0,1fr) 34px 14px;gap:6px 10px;padding:12px 14px;
    grid-template-areas:"time game count chev" "flags flags flags status"}
  .fdgrid > :nth-child(1){grid-area:time}
  .fdgrid > :nth-child(2){grid-area:game}
  .fdgrid > :nth-child(3){grid-area:count;justify-self:end}
  .fdgrid > :nth-child(4){grid-area:flags;justify-content:flex-start}
  .fdgrid > :nth-child(5){grid-area:status;justify-self:end;text-align:right}
  .fdgrid > :nth-child(6){grid-area:chev;justify-self:end}
  .fdrow{min-height:0}
}
[data-mv]{min-width:104px;max-width:120px}
.dobrow{display:flex;align-items:flex-end;gap:8px}
.dobpart{display:flex;flex-direction:column;gap:3px}
.dobpart .inp{text-align:center;font-family:var(--mono);font-size:1.05rem;letter-spacing:.04em}
.dobsep{color:var(--ink-2);padding-bottom:12px}
.ownnav-btn{text-align:left;background:none;border:none;border-radius:8px;padding:9px 12px;color:var(--ink-2);font-weight:700;font-size:.92rem;cursor:pointer;width:100%;white-space:nowrap}
.ownnav-btn:hover{background:var(--surface)}
.ownnav-btn[aria-current="true"]{background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 3px 0 0 var(--brand)}
@media (max-width:820px){.ownnav-btn{width:auto}}
img.brandlogo{height:26px;width:auto;display:block}
.brand{gap:12px}
.phone-head img.logo{height:30px;width:auto}
.phone-head .loc{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--ink-2);margin-top:4px;display:block}
.headwrap{display:flex;flex-direction:column;min-width:0}
.mailprev{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2);max-height:56vh;overflow-y:auto}
.mailmeta{padding:10px 14px;border-bottom:1px solid var(--line);font-size:.85rem;color:var(--ink-2)}
.mailbody{background:#111;padding:18px;display:flex;flex-direction:column;gap:12px}
.maillogo{height:30px;width:auto;align-self:flex-start}
.mailphoto{width:100%;max-width:220px;border-radius:10px;align-self:center}
.mailphoto.ph{aspect-ratio:4/5;background:var(--surface);display:grid;place-items:center;color:var(--ink-2);font-size:.85rem}
.mailbtns{display:flex;flex-wrap:wrap;gap:8px}
.mailbtn{display:inline-block;padding:9px 14px;border-radius:8px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700;font-size:.9rem}
.mailbtn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.board{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.boardhead{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line)}
.boardhead img{height:34px}
.boardhead h2{font-size:1.4rem}
.lbrows{list-style:none;margin:0;padding:0}
.lbrow{display:grid;grid-template-columns:56px minmax(0,1fr) 96px 110px;gap:14px;align-items:center;padding:12px 22px;border-bottom:1px solid var(--line)}
.lbrow .hint{display:flex;justify-content:flex-end}
.lbrow .time{text-align:right;font-variant-numeric:tabular-nums}
.lbrow:hover{background:var(--surface-2)}
.lbhead{display:grid;grid-template-columns:56px minmax(0,1fr) 96px 110px;gap:14px;padding:8px 22px;border-bottom:1px solid var(--line);
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.lbhead span:first-child{text-align:center}
.lbhead span:last-child{text-align:right}
.boardhead>span:last-child{margin-left:auto}
.lbrow:last-child{border-bottom:none}
.lbrow .rank{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--ink-2);text-align:center}
.lbrow.first{background:linear-gradient(90deg,var(--accent-soft),transparent)}
.lbrow.first .rank{color:var(--brand)}
.lbrow .team{display:flex;flex-direction:column;min-width:0}
.lbrow .team b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbrow .time{font-size:1.25rem;font-weight:700}
.lbfoot{padding:12px 22px}
.board.big{border:none;border-radius:0;background:transparent}
.board.big .boardhead{padding:24px 40px}
.board.big .boardhead img{height:56px}
.board.big .boardhead h2{font-size:2.6rem}
.board.big .lbrow{grid-template-columns:90px minmax(0,1fr) auto auto;padding:18px 40px;font-size:1.5rem}
.board.big .lbrow .rank{font-size:2.6rem}
.board.big .lbrow .team .small{font-size:1rem}
.board.big .lbrow .time{font-size:2.2rem}
.lbdisplay{position:fixed;inset:0;background:var(--ground);overflow:auto;padding-top:env(safe-area-inset-top,0px)}
.lbdots{position:fixed;left:0;right:0;bottom:calc(clamp(6px,1.2vh,18px) + env(safe-area-inset-bottom,0px));display:flex;gap:8px;justify-content:center;padding:0;z-index:4;pointer-events:none}
.lbdots i{width:8px;height:8px;border-radius:50%;background:var(--surface-2);opacity:.8}
.lbdots i.on{background:var(--brand);opacity:1}
/* exit sits on the header baseline, right edge, same in landscape and portrait */
.lbexit{margin-left:auto;align-self:center;flex:none;white-space:nowrap;opacity:.55;background:var(--surface-2);border-color:var(--line);z-index:5}
.lbexit:hover,.lbexit:focus-visible{opacity:1}
.lbexit.floating{position:fixed;right:16px;top:16px;margin:0;opacity:.6}
/* keep the footer line clear of the rotation dots */
.lbdisplay .slidemain{padding-bottom:clamp(26px,3.6vh,48px)}
.slidetitle{min-width:0}
/* logos keep their own aspect ratio everywhere */
img.brandlogo,.phone-head img.logo,.maillogo,.boardhead img{width:auto;max-width:none;flex:none;object-fit:contain}
.slide{display:grid;grid-template-columns:auto minmax(0,1fr);height:100vh;background:var(--ground)}
.slideposter{position:relative;overflow:hidden;background:#0A0A0B;display:flex;align-items:stretch;max-width:42vw}
.slideposter img{position:static;height:100vh;width:auto;max-width:42vw;object-fit:cover;display:block}
.slideposter .pWide{display:none}
.slideposter .pshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.9))}
.slideposter .ptitle{position:absolute;left:0;right:0;bottom:clamp(10px,2.4vh,34px);text-align:center;font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.6vw,56px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;text-shadow:0 4px 24px rgba(0,0,0,.9)}
.slidemain{display:flex;flex-direction:column;padding:clamp(12px,1.6vw,30px) clamp(16px,2.2vw,40px);gap:clamp(8px,1.2vh,18px);min-height:0;overflow:hidden}
.slidehead{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);border-bottom:2px solid var(--brand);padding-bottom:clamp(8px,1.4vh,18px)}
.slidehead img{height:clamp(30px,3.6vw,68px)}
.slidehead h2{font-size:clamp(22px,2.6vw,50px);line-height:1}
.slidehead p{color:var(--ink-2);font-size:clamp(12px,1.05vw,21px)}
.slrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;flex:1;gap:clamp(3px,.6vh,9px);min-height:0;overflow:hidden}
.slrow{display:grid;grid-template-columns:clamp(38px,3vw,72px) auto minmax(0,1fr) clamp(86px,7vw,150px) auto;gap:clamp(10px,1.3vw,24px);align-items:center;
  background:var(--surface);border-radius:12px;padding:clamp(3px,.5vh,8px) clamp(10px,1.3vw,22px)}
.slrow.first{background:linear-gradient(90deg,rgba(237,32,36,.22),var(--surface));box-shadow:inset 4px 0 0 var(--brand);
  grid-template-columns:clamp(46px,3.8vw,92px) auto minmax(0,1fr) clamp(96px,8vw,170px) auto}
.slrow .rank{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.8vw,58px);color:var(--ink-2);text-align:center;line-height:1}
.slrow.first .rank{color:var(--brand);font-size:clamp(34px,4.2vw,88px)}
/* photo box is a fixed frame sized for the widest shape, so every row's text
   starts at the same place; the photo keeps its own shape and is centred in it */
.slrow{--ph:clamp(30px,5.6vh,104px)}
.slrow.first{--ph:clamp(46px,8.6vh,160px)}
.photobox{display:flex;align-items:center;justify-content:center;flex:none;height:var(--ph);width:calc(var(--ph)*16/9)}
/* the #1 row is the only one of its kind, so it takes just the width its own
   photo needs (capped) and gives the rest of the room to the team name */
.slrow.first .photobox{max-width:calc(var(--ph)*16/9)}
.slrow .tphoto{height:100%;width:auto;max-width:100%;object-fit:cover;border-radius:12px;background:var(--surface-2)}
.slrow.first .tphoto{border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.55)}
.slrow .tphoto.none{display:grid;place-items:center;color:var(--ink-2);aspect-ratio:4/5}
.slrow .meta{display:flex;flex-direction:column;min-width:0;gap:2px}
.slrow .meta b{font-size:clamp(14px,1.15vw,24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slrow.first .meta b{font-size:clamp(17px,1.5vw,32px);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.1}
.slrow .meta span{color:var(--ink-2);font-size:clamp(11px,.85vw,17px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slrow .nhcell{display:flex;justify-content:flex-end;align-items:center}
.slrow .nh{font-family:var(--mono);font-size:clamp(10px,.85vw,17px);letter-spacing:.08em;color:var(--brand);border:1px solid var(--brand);border-radius:999px;padding:3px 10px;white-space:nowrap}
.slrow .nh.blank{border-color:transparent;padding:0}
.slrow .time{font-family:var(--mono);font-weight:700;font-size:clamp(20px,2.1vw,44px);line-height:1;white-space:nowrap}
.slrow.first .time{font-size:clamp(26px,3vw,62px)}
.slidefoot{color:var(--ink-2);font-size:clamp(11px,.9vw,18px);text-align:center}
/* portrait screens: poster on top, board below */
.slide.portrait{grid-template-columns:1fr;grid-template-rows:minmax(0,25vh) minmax(0,1fr)}
.slide.portrait .slideposter{max-width:none;justify-content:center}
.slide.portrait .slideposter{max-width:none}
.slide.portrait .slideposter .pTall{display:none}
.slide.portrait .slideposter .pWide{display:block;height:25vh;width:100vw;max-width:100vw;object-fit:cover}
.slide.portrait .ptitle{font-size:clamp(26px,5vw,64px)}
.slide.portrait .slidehead h2{font-size:clamp(26px,4.6vw,60px)}
.slide.portrait .slidehead img{height:clamp(32px,6vw,80px)}

.slide.portrait .slrow .meta b{font-size:clamp(15px,2.1vw,32px)}
.slide.portrait .slrow .meta span{font-size:clamp(12px,1.5vw,22px)}
.slide.portrait .slrow .time{font-size:clamp(22px,3.6vw,48px)}
.slide.portrait .slrow.first .time{font-size:clamp(28px,4.6vw,62px)}
.slide.portrait .slrow{--ph:clamp(28px,3.5vh,88px)}
.slide.portrait .slrow.first{--ph:clamp(44px,5.6vh,140px)}
@media (orientation:portrait){
  .slide.autoOrient{grid-template-columns:1fr;grid-template-rows:minmax(0,25vh) minmax(0,1fr)}
  .slide.autoOrient .slideposter{max-width:none;justify-content:center}
  .slide.autoOrient .slideposter{max-width:none}
  .slide.autoOrient .slideposter .pTall{display:none}
  .slide.autoOrient .slideposter .pWide{display:block;height:25vh;width:100vw;max-width:100vw;object-fit:cover}
  .slide.autoOrient .ptitle{font-size:clamp(26px,5vw,64px)}
  .slide.autoOrient .slidehead h2{font-size:clamp(26px,4.6vw,60px)}
  .slide.autoOrient .slidehead img{height:clamp(32px,6vw,80px)}

  .slide.autoOrient .slrow .meta b{font-size:clamp(15px,2.1vw,32px)}
  .slide.autoOrient .slrow .meta span{font-size:clamp(12px,1.5vw,22px)}
  .slide.autoOrient .slrow .time{font-size:clamp(22px,3.6vw,48px)}
  .slide.autoOrient .slrow.first .time{font-size:clamp(28px,4.6vw,62px)}
  .slide.autoOrient .slrow{--ph:clamp(28px,3.5vh,88px)}
  .slide.autoOrient .slrow.first{--ph:clamp(44px,5.6vh,140px)}
}
.privnote{border:1px solid var(--line);border-left:3px solid var(--good);background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:.84rem;color:var(--ink-2);margin-top:8px}
.privnote b{color:var(--ink)}
.croptools{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:8px;display:flex;flex-direction:column;gap:8px}
.croptools .btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#gm_zoom{accent-color:var(--brand)}
#gm_canvas{touch-action:none}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:18px}
.chartcard{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px 12px;display:flex;flex-direction:column;gap:8px}
.chartcard header h3{font-size:1rem}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .gridline{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--ink-2);font-family:var(--body);font-size:11px}
.chart .vlabel{fill:var(--ink);font-family:var(--mono);font-size:11px;font-weight:700;text-anchor:middle}
.chart .end{text-anchor:end}.chart .mid{text-anchor:middle}.chart .start{text-anchor:start}
.chart .mark{cursor:default}
.chart .mark:hover rect[rx]{filter:brightness(1.15)}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.charttable summary{cursor:pointer;font-size:.8rem;color:var(--ink-2);padding:4px 0}
.charttable table{font-size:.8rem}
.charttip{position:fixed;z-index:80;background:var(--ink);color:var(--ground);font-size:.8rem;font-weight:700;padding:6px 10px;border-radius:8px;pointer-events:none;box-shadow:var(--shadow);max-width:260px}
.charttip[hidden]{display:none}
/* every chart card ends with the same line: numbers on the left, export on the
   right, pinned to the bottom so the buttons line up across a row of cards */
.chartbody{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.cardfoot{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.cardfoot .charttable{flex:1;min-width:0}
.cardfoot .charttable summary{padding:7px 0}
.cardfoot .btn.sm{flex:none;align-self:flex-start}
/* panel headers: title left, controls right, all on one line */
.hctl{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:nowrap}
.hctl .inp{width:auto;min-height:38px;padding:6px 10px}
.check.inline{padding:0;gap:8px;align-items:center;white-space:nowrap}
.check.inline span{font-size:.85rem;color:var(--ink-2)}
/* one scale for every button */
.btn.sm{min-height:36px}
.row{gap:10px}
.legitem{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--ink-2);font:inherit;font-size:.8rem;cursor:pointer;padding:2px 4px;border-radius:6px}
.legitem:hover{background:var(--surface)}
.legitem.off{opacity:.55;text-decoration:line-through}
.legitem i{width:10px;height:10px;border-radius:3px;display:inline-block}
.chart .mark.clickable{cursor:pointer}
.chart .mark.dim rect[rx]{opacity:.28}
.chart .mark.dim text{opacity:.55}
.sources{display:flex;flex-wrap:wrap;gap:8px}
.srcbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:9px 16px;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;min-height:44px}
.srcbtn:hover{border-color:var(--ink-2)}
.srcbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* landscape poster thumbnail in the owner poster cards */
.pshot{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0A0A0B}
.pshot img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.mailcode{font-family:var(--mono);font-size:.78rem;line-height:1.5;min-height:320px;resize:vertical;white-space:pre;overflow:auto}
.mailframe{width:100%;border:0;display:block;background:#000}

/* ---- one control scale across the whole app ----
   44px for anything a customer or a busy person behind the desk taps,
   36px for secondary actions inside a card, 40px for navigation. */
.btn{padding:9px 16px;min-height:44px}
.btn.sm{min-height:36px;padding:6px 12px}
.srcbtn{min-height:44px;padding:9px 16px}
.days button,.tchip{height:40px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;line-height:1}
.tchip{padding:0 6px 0 14px}
.tchip button{min-height:28px;padding:2px 8px}
.tab{min-height:40px;display:inline-flex;align-items:center;padding:7px 14px}
.ownnav-btn{min-height:40px;display:flex;align-items:center;padding:9px 12px}
.timebtn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:9px 12px}
.linkbtn{min-height:28px;display:inline-flex;align-items:center;padding:4px 6px}
.legitem{min-height:28px;padding:4px 6px}
/* a button sitting beside a labelled field lines up with the field, not its label */
.row .btn.endrow,.row .endrow{align-self:flex-end}
/* filter rows: even columns, buttons on the field baseline */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:12px;align-items:end}
.filters .field.wide{grid-column:span 2;min-width:0}
.filters .filterbtns{align-items:end;flex-wrap:nowrap}
.barrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.barrow>.row.nowrap{margin-left:auto}
.row.nowrap{flex-wrap:nowrap}
.ink{color:var(--ink)}
@media (max-width:700px){.filters .field.wide{grid-column:span 1}}
.pill.wrap{white-space:normal;align-self:flex-start;max-width:100%;line-height:1.35}
.gcard .barrow{gap:8px}
/* grouped owner nav */
.navgroup{display:flex;flex-direction:column}
.navkids{display:flex;flex-direction:column;gap:2px;margin:2px 0 8px}
.ownnav-btn.top{font-size:.95rem}
.ownnav-btn.kid{padding-left:26px;font-weight:600;font-size:.88rem;color:var(--ink-2)}
.ownnav-btn.kid[aria-current="true"]{font-weight:700}
@media (max-width:820px){.navgroup{flex:1 1 100%}.navkids{flex-direction:row;flex-wrap:wrap}.ownnav-btn.kid{padding-left:12px}}

/* ---- one box for every form control ----
   native controls size themselves differently (a select, a date input and a
   text input all disagree), which is what made fields in the same row sit at
   different heights. Everything is pinned to the same box here. */
.inp{box-sizing:border-box;height:44px;min-height:44px;padding:0 12px;font:inherit;font-size:1rem;line-height:1.2;
  appearance:none;-webkit-appearance:none;color:var(--ink)}
select.inp{padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input[type="date"].inp,input[type="time"].inp{padding-right:8px}
input[type="date"].inp::-webkit-calendar-picker-indicator,input[type="time"].inp::-webkit-calendar-picker-indicator{filter:invert(.7)}
textarea.inp{height:auto;min-height:180px;padding:10px 12px;line-height:1.5;appearance:auto;-webkit-appearance:auto}
#ov_reason{min-height:90px}
.locpick .inp{height:38px;min-height:38px}
.inp.sm,select.inp.sm{height:36px;min-height:36px;padding:0 10px;font-size:.85rem}
select.inp.sm{padding-right:28px;background-position:calc(100% - 15px) 16px,calc(100% - 10px) 16px}
.bar select.inp{height:38px;min-height:38px;padding:0 30px 0 10px;background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px}
.hctl .inp{width:auto;height:38px;min-height:38px;padding:0 30px 0 10px;background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px}
.dobpart .inp,.timein .inp{padding-left:4px;padding-right:4px}
.mailcode{height:auto}
/* labels sit the same distance above every field */
.field{gap:6px}
.field>label{line-height:1.25}
.alert.note{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.alert.note b{color:var(--ink)}
/* settings rows: text left, control pinned to one right-hand column, so every
   checkbox on a settings page lines up whatever the description length */
.setgroup{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface-2)}
.setgroup h3{font-size:1rem;margin-bottom:2px}
.setgroup>p{margin-bottom:6px}
.setrow{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:18px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.setrow.sub{padding-left:22px;box-shadow:inset 3px 0 0 var(--line)}
.settext{display:flex;flex-direction:column;gap:3px;min-width:0}
.settext b{font-weight:700;line-height:1.35}
.setctl{display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap;min-height:24px}
.setctl input[type="checkbox"]{flex:none}
@media (max-width:700px){
  .setrow{grid-template-columns:minmax(0,1fr);gap:8px}
  /* stacked layout: the checkbox leads the caption, so every checkbox on the
     page starts at the same x whatever its caption says */
  .setctl{flex-direction:row-reverse;justify-content:flex-end}
  /* a sub-setting's text stays indented under its parent, but its checkbox
     lines up with every other checkbox on the page */
  .setrow.sub .setctl{margin-left:-22px}
}
/* option chips */
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 6px 0 14px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-text);font-weight:700;font-size:.9rem}
.chip .linkbtn{color:inherit;text-decoration:none;min-height:24px;padding:0 4px;font-size:1rem}
.setgroup .row{margin-top:4px}
.mailmeta{display:flex;flex-wrap:wrap;gap:6px 18px}
.mailmeta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- player waiver: one page, two shapes ----------
   Phone keeps the layout it has always had. From 800px up the same page
   widens into a sheet so a desktop browser is not mostly empty margin.
   Only .phone.sheet (the customer waiver) grows; the game master phone
   screen keeps its 440px frame on purpose. */
.pair2{display:flex;flex-direction:column;gap:14px}
.signgrid{display:flex;flex-direction:column;gap:14px}
.signside{display:flex;flex-direction:column;gap:14px}
.btn.grow{flex:1}

@media (min-width:800px){
  .phone.sheet{max-width:760px;border-radius:22px}
  .phone.sheet .phone-head{padding:22px 32px 18px}
  .phone.sheet .phone-body{padding:24px 32px 34px}
  .phone.sheet h1{font-size:1.9rem}
  .phone.sheet .progress{margin:4px 0 20px}
  .phone.sheet .stack{gap:18px}
  /* posters: a set number per row (see posterCols) laid out as a centred
     flex row, so the block sits in the middle of the sheet and a short last
     row centres under the one above instead of hugging the left edge */
  .phone.sheet .posters{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
    max-width:calc(var(--pcols,3) * 260px + (var(--pcols,3) - 1) * 16px);margin-inline:auto}
  .phone.sheet .poster{flex:0 1 calc((100% - (var(--pcols,3) - 1) * 16px) / var(--pcols,3));min-width:0}
  /* step 1 is a gallery, so its headings sit over the middle of it */
  .phone.sheet .gamestep>h1,.phone.sheet .gamestep>h2{text-align:center}
  .phone.sheet .chosen{padding:10px 12px}
  .phone.sheet .chosen img{width:64px}
  .phone.sheet .datechips{flex-wrap:wrap;overflow:visible;gap:8px}
  .phone.sheet .datechip{min-width:70px}
  .phone.sheet .times{grid-template-columns:repeat(auto-fill,minmax(min(112px,100%),1fr));gap:10px}
  .phone.sheet .choice{flex-direction:row;gap:12px}
  .phone.sheet .choice .game{flex:1 1 0;min-width:0}
  .phone.sheet .pair2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  .phone.sheet .minor{padding:18px}
  .phone.sheet .sigwrap canvas{height:190px}
  /* legal text stays a readable measure even when the sheet is wide */
  .phone.sheet .waivertext{max-height:560px;min-height:420px;padding:18px 22px;font-size:.95rem;max-width:660px;margin-inline:auto}
  .phone.sheet .done{max-width:520px;margin-inline:auto}
  .phone.sheet .done .btn.block{width:auto;min-width:280px;align-self:center}
  .phone.sheet .btn.grow{flex:0 0 auto;min-width:240px}
  .phone.sheet .row:has(>[data-act="back"]){justify-content:flex-end}
}

@media (min-width:1100px){
  .phone.sheet{max-width:980px}
  .phone.sheet .phone-head{padding:24px 40px 20px}
  .phone.sheet .phone-body{padding:28px 40px 38px}
  /* the waiver itself is the tall thing on this step, so it takes the left
     column and everything the customer has to touch sits beside it */
  .phone.sheet .signgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,360px);gap:24px;align-items:stretch}
  .phone.sheet .signdoc{display:flex;flex-direction:column;min-width:0}
  .phone.sheet .signdoc .waivertext{flex:1;max-height:none;min-height:480px;max-width:none;margin-inline:0}
  .phone.sheet .signside{min-width:0}
  .phone.sheet .signside .btn.grow{flex:1 1 0;min-width:0}
  .phone.sheet .signside .row:has(>[data-act="back"]){justify-content:stretch}
}

/* front desk on a narrow screen: the row keeps its columns and the list
   scrolls sideways instead of spilling out of the panel */
/* The narrow layout below re-flows the row instead, so the list never needs to
   scroll sideways on a phone. */
.fdwrap{min-width:0;max-width:100%}

/* leaderboard header on a phone: the result count drops to its own line
   instead of being pushed out of the panel */
@media (max-width:560px){
  .boardhead{flex-wrap:wrap;gap:10px 14px;padding:14px 16px}
  .boardhead>span:last-child{margin-left:0}
}

/* age group buttons on the minors step */
.bandpick{display:flex;flex-wrap:wrap;gap:8px}

/* the photo strip on the result screen: up to five, the first is primary */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(96px,100%),1fr));gap:10px;margin-top:10px}
.shot{margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.shotpick{padding:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2);cursor:pointer;display:block}
.shotpick img{display:block;width:100%;object-fit:cover}
.shotpick[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.shot{position:relative}
.shot figcaption{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.78rem;min-height:26px;text-align:center}
.shotx{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.72);color:#fff;font-size:1rem;line-height:1;display:grid;place-items:center;padding:0}
.shotx:hover{background:var(--bad);color:#fff}
.shot figcaption .pill{font-size:.68rem;padding:2px 7px}
.shot figcaption .linkbtn{padding:2px 4px;font-size:.78rem}
.btn.disabled{opacity:.45;cursor:not-allowed}

/* The front desk is a data table on a desk monitor, not a page of prose. At the
   1180px reading width its player table was 828px inside a 770px panel, so the
   Move column sat off the edge and had to be scrolled to. It gets its own
   wider ceiling; every other screen keeps 1180. */
main:has(> .fd){max-width:1440px}

/* --- narrow screens: nothing drags the page sideways --- */
/* the owner nav turns into rows of chips on a phone rather than one long
   sideways scroll that widened the whole page */
@media (max-width:820px){
  .ownnav{min-width:0;max-width:100%;flex-wrap:wrap;overflow-x:visible}
  .navgroup{flex:1 1 100%;min-width:0}
  .navkids{flex-direction:row;flex-wrap:wrap;min-width:0}
  .ownnav-btn{width:auto}
}
/* headline numbers: the labels keep two lines' worth of room once they start
   wrapping, so the cells in a row stay the same height */
@media (max-width:760px){
  .kpi span{min-height:2.4em}
}
/* the photo buttons stack instead of one wrapping to two lines beside a
   single-line one */
@media (max-width:560px){
  .field > .row > .btn,.field > .row > label.btn{flex:1 1 100%}
}

/* the top bar's tab strip scrolls inside itself; without this it is a flex item
   with a min-content floor and it pushes the whole page sideways */
.tabs{min-width:0}
.bar-in>*{min-width:0}

/* long unbreakable strings - an address, a domain, a review URL - wrap instead
   of pushing their panel, and the page, past the edge of a phone screen */
.alert,.note,.privnote,.settext,.small,.muted,figcaption,.mailmeta span,td,th{overflow-wrap:anywhere}

/* front desk: the team name input and its Save button sit on one line, with the
   note under both rather than pushing the button down beside it */
.teamrow{margin-top:12px;max-width:420px}
.teamrow .row.nowrap{gap:8px;align-items:center}
.teamrow .inp{flex:1 1 auto;min-width:0}
.teamrow .btn{flex:none}

/* in-app leaderboard on a phone: rank and team on the first line with the time
   on the right, the game, location and date underneath. The four-column desk
   layout squeezed the team column to nothing and broke the text one letter to
   a line. */
@media (max-width:620px){
  .lbhead{display:none}
  .lbrow{grid-template-columns:34px minmax(0,1fr) auto;gap:4px 10px;padding:12px 16px;
    grid-template-areas:"rank team time" ". hint time"}
  .lbrow .rank{grid-area:rank;font-size:1.15rem;align-self:start}
  .lbrow .team{grid-area:team;min-width:0}
  .lbrow .team b{white-space:normal;overflow-wrap:anywhere}
  .lbrow .hint{grid-area:hint;justify-content:flex-start}
  .lbrow .hint:empty{display:none}
  .lbrow .time{grid-area:time;align-self:center;font-size:1.1rem}
}

/* ---------- owner sections on a phone ----------
   The six groups and their pages were a block of chips taking a third of the
   screen before any content started. On a phone they go behind a menu button
   instead, and only the open section's own pages sit on top. */
.ownbar{display:none}
@media (max-width:820px){
  .ownnav{display:none}
  .ownbar{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
  .menubtn{align-self:flex-start;gap:10px;font-weight:700}
  .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:18px}
  .burger i{display:block;height:2px;background:currentColor;border-radius:2px}
  /* the section's pages are a stacked list, not a sideways strip: every page is
     on screen at once and nothing has to be scrolled to be found */
  .ownsubs{display:flex;flex-direction:column;gap:6px}
  .subchip{display:flex;align-items:center;width:100%;min-height:44px;padding:0 14px;border-radius:8px;
    border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-weight:700;
    font-size:.92rem;cursor:pointer;text-align:left}
  .subchip:hover{border-color:var(--ink-2)}
  .subchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
}
/* the menu itself: a sheet over the page, one row per section */
.ownmenu{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  width:min(380px,100%);max-height:80vh;overflow:auto;padding:8px}
.ownmenu-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 8px}
.ownmenu-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;
  padding:10px 14px;border:none;border-radius:12px;background:none;color:var(--ink);font:inherit;font-weight:700;
  text-align:left;cursor:pointer}
.ownmenu-btn:hover{background:var(--surface-2)}
.ownmenu-btn[aria-current="true"]{background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 3px 0 0 var(--brand)}

/* a filter row whose buttons need the full width rather than a narrow column */
.filters .filterbtns.wide{grid-column:1 / -1}
.filters .filterbtns .btn{white-space:nowrap}
/* on a phone the two range buttons take a line each rather than one of them
   hanging 5px past the panel */
/* .filters .filterbtns is nowrap by design for the search row; the range
   buttons need to wrap instead, or one of them hangs past the panel */
@media (max-width:560px){
  .filters .filterbtns.wide{flex-wrap:wrap}
  .filters .filterbtns.wide .btn{flex:1 1 100%}
}
/* table cells that should never break mid-word: addresses, phone numbers,
   type and game labels. They live in a scrolling wrap, so nothing is lost. */
td.nowrapcell{white-space:nowrap;overflow-wrap:normal}


/* ===================================================================
   Live site additions (Milestone 1)
   The pages are served with a strict content security policy that forbids
   inline style attributes, so anything the prototype set inline is a class.
   =================================================================== */
.hidden{display:none !important}
.grow{flex:1 1 auto;min-width:0}
.mla{margin-left:auto}
.mt8{margin-top:8px}
.mb6{margin-bottom:6px}
.spread{justify-content:space-between}
.inp.dob2{width:3.6rem}
.inp.dob4{width:5.4rem}
.posters.pc1{--pcols:1}.posters.pc2{--pcols:2}.posters.pc3{--pcols:3}.posters.pc4{--pcols:4}

/* a game with no poster yet: a lettered tile at the poster's shape */
.poster span.noposter,.chosen span.noposter,.noposter{aspect-ratio:5/7;width:100%;display:grid;place-items:center;justify-content:center;align-items:center;padding:12px;text-align:center;
  background:linear-gradient(160deg,var(--surface-2),var(--ground));border-radius:10px;border:1px solid var(--line);
  font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.1;letter-spacing:-.01em;color:var(--ink);
  overflow-wrap:anywhere}
.chosen span.noposter{width:52px;font-size:.55rem;padding:4px;border-radius:6px;flex:none}
.poster span.noposter{border:none;border-radius:0;border-bottom:1px solid var(--line)}
@media (min-width:800px){.phone.sheet .chosen span.noposter{width:64px;font-size:.62rem}}

/* the bot check sits outside the page body so re-drawing never resets it */
.tsslot{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70}
.tsslot:empty{display:none}

/* waiting states */
.busy{opacity:.6;pointer-events:none}
.spin{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.centerbox{max-width:440px;margin:12vh auto 0;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.centerbox img.logo{height:44px;width:auto}

/* the signed-in side of the site */
.bar .brand img{height:26px;width:auto}
.bar .who{font-size:.85rem;color:var(--ink-2);text-align:right;line-height:1.25}
.bar .who b{color:var(--ink);display:block}
.daychips{display:flex;gap:6px;flex-wrap:wrap}
.daychips .chip-btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-weight:700;cursor:pointer;min-height:36px}
.daychips .chip-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sesslist{display:flex;flex-direction:column}
.srow{display:grid;grid-template-columns:84px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 16px;border:none;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;width:100%;color:inherit}
.srow:hover,.srow[aria-expanded="true"]{background:var(--surface-2)}
.srow .t{font-family:var(--mono);font-weight:500}
.srow .n b{font-family:var(--display);font-size:1.3rem;font-variant-numeric:tabular-nums}
.sdetail{padding:6px 16px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.sdetail table td,.sdetail table th{padding:7px 8px}
.empty-state{padding:28px 16px;text-align:center;color:var(--ink-2)}
.linkbox{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.linkbox code{font-family:var(--mono);font-size:.85rem;background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:8px 10px;overflow-wrap:anywhere}
.subnav{display:flex;flex-direction:column;gap:6px}
.subnav button{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:10px 12px;font-weight:700;cursor:pointer;color:var(--ink-2)}
.subnav button[aria-current="true"]{background:var(--accent-soft);color:var(--accent-text);border-color:color-mix(in srgb,var(--accent-text) 40%,transparent)}
.setup{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:820px){.setup{grid-template-columns:minmax(0,1fr)}.subnav{flex-direction:row;flex-wrap:wrap}.subnav button{flex:1 1 140px}}
.weekgrid{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 12px;align-items:center}
.weekgrid .d{font-weight:700;color:var(--ink-2);font-size:.85rem}
.tchips{display:flex;flex-wrap:wrap;gap:6px}
.tchip2{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 10px;font-family:var(--mono);font-size:.82rem;background:var(--surface)}
.tchip2 button{border:none;background:none;color:var(--ink-2);cursor:pointer;font-size:1rem;line-height:1;padding:2px 6px;border-radius:999px}
.tchip2 button:hover{color:var(--bad)}
.daypick{display:flex;flex-wrap:wrap;gap:6px}
.daypick label{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:.85rem;cursor:pointer}
.gamehead{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.gamehead h3{margin-right:auto}
textarea.inp{min-height:320px;font-family:var(--body);line-height:1.5;resize:vertical}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;font-size:.9rem}
.kv dt{color:var(--ink-2)}
.kv dd{margin:0}
.off-row td{opacity:.55}

/* on a phone the people under a game time stack as cards, not a table */
@media (max-width:620px){
  .sdetail table,.sdetail tbody,.sdetail tr,.sdetail td{display:block;width:auto}
  .sdetail thead{display:none}
  .sdetail tr{padding:10px 0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
  .sdetail td{border:none;padding:0}
  .sdetail td.pname{flex:1 0 100%}
  .sdetail td[data-l]:not(:empty)::before{content:attr(data-l) " ";color:var(--ink-2);font-size:.78rem;margin-right:4px}
  .sdetail td:empty{display:none}
  .srow{grid-template-columns:70px minmax(0,1fr) auto;gap:10px}
  .srow > :last-child{display:none}
}

/* security log */
.wrapany{overflow-wrap:anywhere}
.seclog td{vertical-align:top}
@media (max-width:620px){
  .seclog thead{display:none}
  .seclog,.seclog tbody,.seclog tr,.seclog td{display:block;width:auto}
  .seclog tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .seclog td{border:none;padding:2px 0}
}

.ipcell{white-space:nowrap}
.daychips .small{align-self:center;margin-right:4px}
@media (max-width:620px){
  .seclog td[data-l]::before{content:attr(data-l) " ";color:var(--ink-2);font-size:.78rem;margin-right:4px}
  .seclog td.ipcell{font-size:.9rem}
}