/* Midnight Padel event app (tbc.collegelife.club). MOBILE FIRST (Kristian 27 Oct): the base rules are the phone;
   @media (min-width: 768px) adds the laptop layout. The Brunch Club house look: Old Lace paper, Kenyan Copper band
   with film grain, Trinidad for the one main action, Playfair Display headings, Averia Serif Libre text, DM Mono
   figures. Every tap target is at least 44px. Dark = the night palette (follows the device). */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,800;1,600&family=Averia+Serif+Libre:wght@400;700&family=DM+Mono:wght@500&family=Orbitron:wght@500;700;900&family=Exo+2:wght@400;600;700&display=swap");
:root{
  --lace:#FDF6EE; --paper:#FFFDF9; --ink:#2A1510; --muted:#7A5E52; --line:#EADBCB; --band:#7F1604; --band-ink:#FDF6EE;
  --trinidad:#E34703; --trinidad-ink:#fff; --corvette:#F9D4A4; --copper:#7F1604;
  --ok:#2F7A46; --okbg:#E3F1E6; --warn:#B25E07; --warnbg:#FCEBD3; --bad:#B3261E; --badbg:#F9DEDB; --grey:#8C7F78; --greybg:#EFE7DF; --hand:#5B3FA0; --handbg:#ECE6F8; --moved:#1F5FD1; --movedbg:#E3ECFB;
  --head:"Playfair Display",Georgia,serif; --body:"Averia Serif Libre",Georgia,serif; --num:"DM Mono",ui-monospace,Menlo,monospace;
  --nav-h:64px; --gut-l:max(16px,env(safe-area-inset-left,0px)); --gut-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--lace);color:var(--ink);font:16px/1.55 var(--body);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
a{color:var(--trinidad)}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:2px solid var(--trinidad);outline-offset:2px}

/* ---------- band (phone base) ---------- */
.band{position:relative;background:var(--band);color:var(--band-ink);padding:calc(12px + env(safe-area-inset-top,0px)) var(--gut-r) 12px var(--gut-l);overflow:hidden}
.band::after{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}
.band-in{position:relative;z-index:1;max-width:1180px;margin:0 auto}
.band-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ev{font:500 11px var(--num);letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.title{font:800 24px/1.05 var(--head);margin:2px 0 0}
.title i{font-weight:600;color:#F9D4A4}     /* Corvette on the band in both palettes */
.me{font-size:13px;text-align:right;opacity:.9;line-height:1.3}
.me a{color:var(--band-ink);opacity:.85;display:inline-block;padding:10px 0 4px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.kpis::-webkit-scrollbar{display:none}
.kpi{flex:0 0 auto;min-width:96px;background:rgba(253,246,238,.12);border-radius:12px;padding:7px 10px}
.kpi b{display:block;font:500 18px var(--num);color:#fff;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;opacity:.85;white-space:nowrap}
.kpi small{display:block;font-size:11px;color:#F9D4A4;white-space:nowrap}
.kpi.done{background:rgba(253,246,238,.24)}
.kpi-arrow{display:none}                 /* phone: 2x2 grid, the step numbers carry the order */
.kpi-stack{grid-column:1/-1}             /* step 3: the three boards stacked (Kristian 3 Nov) */
.kpi-stack>span{display:block;margin-bottom:2px}
.kpi-line{display:flex;align-items:baseline;gap:8px}
.kpi-line b{display:inline;font-size:16px;min-width:56px}
.kpi-line em{font-style:normal;font-size:12px;opacity:.85}

/* ---------- nav: bottom bar on the phone (thumb reach) ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--paper);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs-in{display:grid;grid-template-columns:repeat(7,1fr);max-width:1180px;margin:0 auto;padding:0 var(--gut-r) 0 var(--gut-l)}
.tab{border:0;background:none;min-height:var(--nav-h);padding:6px 1px;color:var(--muted);font-size:11.5px;white-space:nowrap;letter-spacing:-.01em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.tab::before{content:"";width:28px;height:4px;border-radius:2px;background:transparent}
.tab[aria-selected="true"]{color:var(--trinidad);font-weight:700}
.tab[aria-selected="true"]::before{background:var(--trinidad)}
.tab small{font:500 10px var(--num);opacity:.7}

main{max-width:1180px;margin:0 auto;padding:16px var(--gut-r) calc(var(--nav-h) + 32px + env(safe-area-inset-bottom,0px)) var(--gut-l)}
h2{font:700 22px/1.2 var(--head);color:var(--copper);margin:0 0 10px}
.lede{color:var(--muted);font-size:14px;margin:-4px 0 14px;max-width:70ch}
.viewonly{background:var(--greybg);color:var(--grey);font-size:13px;padding:8px 12px;border-radius:10px;margin-bottom:14px}

/* ---------- Today ---------- */
.today-grid{display:grid;gap:22px}
.seg{display:inline-flex;background:var(--greybg);border-radius:999px;padding:3px;margin-bottom:14px}
.seg button{border:0;background:none;min-height:44px;padding:0 16px;border-radius:999px;font-size:14px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.block-h{font:700 18px var(--head);margin:0 0 8px;display:flex;justify-content:space-between;align-items:baseline}
.block-h small{font:500 11px var(--num);color:var(--muted)}
.day{margin-bottom:16px}
.day-h{display:flex;justify-content:space-between;align-items:baseline;font:700 16px var(--head);margin:0 0 8px}
.day-h small{font:500 11px var(--num);color:var(--muted)}
details.later{border-top:1px solid var(--line);padding-top:6px}
details.later > summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;font:700 18px var(--head)}
details.later > summary::-webkit-details-marker{display:none}
details.later > summary::after{content:"Show";font:500 12px var(--num);color:var(--trinidad)}
details.later[open] > summary::after{content:"Hide"}
.act{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 12px 12px 6px;margin-bottom:8px;display:flex;gap:6px;align-items:flex-start}
.act.is-today{border-color:var(--trinidad);box-shadow:0 0 0 3px rgba(227,71,3,.12)}
.act.overdue{border-color:var(--warn)}
.tick{flex:none;width:44px;height:44px;border:0;background:none;padding:0;display:grid;place-items:center;margin-top:-6px}
.tick::before{content:"";width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:var(--paper);box-sizing:border-box}
.tick[aria-pressed="true"]::before{background:var(--ok);border-color:var(--ok)}
.tick[aria-pressed="true"]::after{content:"";position:absolute;width:6px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.tick{position:relative}
.tick:disabled{cursor:default}
.act h3{margin:0;font:700 15px/1.35 var(--body)}
.act.done h3{text-decoration:line-through;text-decoration-color:var(--muted)}
.meta{font-size:12px;color:var(--muted);margin-top:2px}
.pill{font:500 10px var(--num);text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;background:var(--corvette);color:var(--copper);margin-left:6px;vertical-align:2px;white-space:nowrap}
.pill.board{background:var(--greybg);color:var(--grey)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 15px var(--body);min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--trinidad);color:var(--trinidad-ink);margin-top:10px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.small{font-size:14px;margin-top:0}
.btn:disabled{opacity:.6}
.feed{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.feed ol{list-style:none;margin:0;padding:0}
.feed li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;padding:7px 0;border-top:1px dashed var(--line);font-size:14px}
.feed li:first-child{border-top:0}
.feed .tm{font:500 11px var(--num);color:var(--muted);padding-top:3px}
.feed b{font-weight:700}
.empty{color:var(--muted);font-size:14px}
.allclear{background:var(--okbg);color:var(--ok);border-radius:14px;padding:14px;font-size:15px;margin:0 0 18px}

/* ---------- chips ---------- */
.lv{display:inline-flex;align-items:baseline;gap:4px;font:500 13px var(--num);padding:3px 10px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.lv.real{background:var(--ink);color:var(--lace)}
.lv.real small{font:400 10px var(--num);opacity:.75}
.lv.est{border:1.5px dashed var(--muted)}
.lv.est::after{content:"est.";font:400 10px var(--body);color:var(--muted)}
.lv.link{border:1.5px solid var(--ink)}
.lv.none{background:var(--greybg);color:var(--grey)}
.st{font-size:12px;padding:3px 9px;border-radius:999px;white-space:nowrap;display:inline-block}
.st.ok{background:var(--okbg);color:var(--ok)} .st.warn{background:var(--warnbg);color:var(--warn)} .st.bad{background:var(--badbg);color:var(--bad);white-space:normal} .st.grey{background:var(--greybg);color:var(--grey)}

/* ---------- Players: cards on the phone ---------- */
.tools{display:flex;gap:8px;margin-bottom:10px}
.search{flex:1;min-width:0;font:16px var(--body);min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gut-r)) 12px calc(-1 * var(--gut-l));padding:0 var(--gut-r) 2px var(--gut-l)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:14px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper)}
.chip[aria-pressed="true"]{background:var(--trinidad);border-color:var(--trinidad);color:#fff}
.chip small{font:500 11px var(--num);opacity:.8;margin-left:3px}
.tw{overflow:visible}
table,tbody{display:block;width:100%}
thead{display:none}
tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px;cursor:pointer;min-height:44px}
tbody tr.friend{margin-left:14px}
td{display:block;padding:0}
td.c-level{grid-row:1;grid-column:2;justify-self:end}
td.c-tickets{grid-column:1 / -1;font-size:13px;color:var(--muted)}
td.c-pp:empty,td.c-flag:empty,td.c-acc:empty{display:none}
td.c-acc{grid-column:1 / -1;font-size:13px}
td.c-acc::before{content:"Accuracy ";font-size:12px;color:var(--muted)}
.acc{font:500 13px var(--num);font-variant-numeric:tabular-nums}
.acc small{font:400 11px var(--body);color:var(--muted)}
.acc.low{color:var(--trinidad)}
td.c-form,td.c-pp,td.c-flag{grid-column:1 / -1}
td.c-pp::before{content:"PadelPlay ";font-size:12px;color:var(--muted)}
td.c-pp.na{display:none}
.sub{display:block;font-size:12px;color:var(--muted)}
.nm{font-weight:700}
.nm.empty-slot{font-weight:400;font-style:italic;color:var(--muted)}

/* ---------- sheet: full screen on the phone ---------- */
.scrim{position:fixed;inset:0;background:rgba(30,10,5,.45);z-index:20}
.sheet{position:fixed;z-index:21;background:var(--lace);inset:0;overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--gut-r) calc(32px + env(safe-area-inset-bottom,0px)) var(--gut-l)}
.sheet-h{position:sticky;top:0;z-index:2;background:var(--lace);display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 0 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.sheet-h h2{margin:0;font-size:20px}
.x{flex:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;width:44px;height:44px;font-size:22px;line-height:1}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.card.sent{opacity:.7}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.phone{font:500 15px var(--num);user-select:all}
pre.msg{white-space:pre-wrap;word-wrap:break-word;font:15px/1.5 var(--body);background:var(--lace);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0 8px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-height:44px}
.row input[type=checkbox]{width:22px;height:22px}
.field{display:grid;gap:4px;margin:12px 0}
.field label{font:500 11px var(--num);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{font:16px var(--body);min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);width:100%}
.dl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 12px;font-size:15px;margin:10px 0}
.dl dt{color:var(--muted)} .dl dd{margin:0;overflow-wrap:anywhere}
.save-bar{position:sticky;bottom:0;background:var(--lace);padding:10px 0 4px}
.save-bar .btn{width:100%}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--lace);padding:10px 18px;border-radius:999px;font-size:14px;z-index:30;max-width:calc(100% - 32px)}
.soon{background:var(--paper);border:1px dashed var(--line);border-radius:14px;padding:24px 18px;text-align:center;color:var(--muted)}
.soon h3{font:700 20px var(--head);color:var(--copper);margin:0 0 6px}

/* ---------- login ---------- */
.login{min-height:100vh;min-height:100dvh;display:grid;align-items:start;padding:calc(24px + env(safe-area-inset-top,0px)) var(--gut-r) 24px var(--gut-l)}
.login-card{width:100%;max-width:420px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.login-card .band{padding:20px 22px}
.login-card form{padding:20px 22px 24px;display:grid;gap:12px}
.login-card input{font:18px var(--body);min-height:52px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--lace);color:var(--ink);width:100%}
.login-card input.code{font:600 28px var(--num);letter-spacing:10px;text-align:center}
.login-card .btn{margin:0;min-height:52px}
.msg-ok{font-size:14px;color:var(--muted);margin:0} .msg-err{font-size:14px;color:var(--bad);margin:0}

/* ---------- laptop and up ---------- */
@media (min-width:768px){
  .band{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:16px}
  .title{font-size:34px}
  .kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr) auto) minmax(0,1fr);align-items:center;overflow:visible;margin-right:0;padding-right:0;margin-top:14px}
  .kpi{min-width:0}
  .kpi-stack{grid-column:auto}
  .kpi-arrow{display:block;font-size:16px;opacity:.7}
  .tabs{position:sticky;top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--line);padding-bottom:0}
  .tabs-in{display:flex;gap:4px;padding:10px var(--gut-r) 10px var(--gut-l)}
  .tab{flex:none;flex-direction:row;min-height:40px;padding:0 16px;border-radius:999px;font-size:15px}
  .tab::before{display:none}
  .tab[aria-selected="true"]{background:var(--ink);color:var(--lace);font-weight:400}
  main{padding:20px var(--gut-r) 64px var(--gut-l)}
  h2{font-size:24px}
  .today-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .today-grid > aside{position:sticky;top:76px}
  .act{padding:10px 14px 12px 8px}
  .chips{flex-wrap:wrap;overflow:visible;margin:0 0 12px;padding:0}
  .tw{border:1px solid var(--line);border-radius:14px;background:var(--paper);overflow-x:auto}
  table{display:table;border-collapse:collapse;font-size:14px}
  thead{display:table-header-group} tbody{display:table-row-group}
  tbody tr{display:table-row;background:none;border:0;border-radius:0;padding:0;margin:0}
  tbody tr:hover td{background:var(--lace)}
  th{text-align:left;font:500 11px var(--num);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
  td{display:table-cell;padding:10px 12px;border-top:1px solid var(--line);vertical-align:middle}
  td.c-tickets{font-size:14px;color:var(--ink)}
  td.c-pp:empty,td.c-flag:empty,td.c-pp.na,td.c-acc:empty{display:table-cell}
  td.c-acc::before{content:none}
  td.c-pp::before{content:none}
  tbody tr:first-child td{border-top:0}
  tr.friend td:first-child{padding-left:28px}
  .scrim{display:block}
  .sheet{inset:0 0 0 auto;width:min(560px,100%);box-shadow:-20px 0 40px -20px rgba(0,0,0,.4)}
  .save-bar .btn{width:auto}
  .toast{bottom:24px}
  .login{align-items:center}
}
@media (prefers-reduced-motion:no-preference){.sheet{animation:rise .2s ease-out}@keyframes rise{from{transform:translateY(16px)}}}
@media (prefers-reduced-motion:no-preference) and (min-width:768px){.sheet{animation:slide .18s ease-out}@keyframes slide{from{transform:translateX(24px)}}}

/* task progress + queue (27 Oct) */
.prog{display:flex;align-items:center;gap:10px;margin-top:8px;font:500 12px var(--num);color:var(--muted)}
.prog-bar{flex:1;max-width:180px;height:6px;border-radius:99px;background:var(--greybg);overflow:hidden}.prog-bar i{display:block;height:100%;width:0;background:var(--ok)}
.btn.soon{font-weight:500;font-size:14px}
a.btn{text-decoration:none}
.synced{font:500 11px var(--num);color:var(--band-ink);opacity:.7;margin-top:6px}
.q-head{margin:4px 0 2px}.q-head .prog{margin-top:0}.q-head .prog-bar{max-width:none}
.q-pos{font:500 12px var(--num);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:12px 0 4px}
.q-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:10px}.q-who h3{margin:0;font-size:24px;width:100%}
.q-count{font:700 12px var(--num);padding:3px 10px;border-radius:999px;background:var(--greybg);color:var(--grey)}
.q-count.two{background:var(--warnbg);color:var(--warn)}
.q-hint{color:var(--muted);margin:0 0 12px;font-size:15px}
.q-msg{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.q-msg-h{display:flex;align-items:center;gap:10px}
.q-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--trinidad);color:var(--trinidad-ink);font:700 14px var(--num)}
.q-msg pre.msg{max-height:260px;overflow:auto}
.q-msg-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.q-msg-btns .btn{margin-top:0}
.btn.wa{background:#1f8f4e;color:#fff}.btn.wa.opened{background:var(--okbg);color:var(--ok)}.btn.wa.opened::before{content:"✓ "}
.q-nav{position:sticky;bottom:0;background:var(--lace);display:grid;grid-template-columns:auto auto 1fr;gap:8px;padding:12px 0 calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);margin-top:8px}
.q-nav .btn{margin-top:0}
.q-end{text-align:center;padding:24px 0;display:grid;gap:10px;justify-items:center}.q-end h3{font-size:24px;margin:0}.q-end p{margin:0;color:var(--muted)}
.q-end .btn{margin-top:0;min-width:240px}
details.mail summary{cursor:pointer;list-style:none;line-height:1.5}details.mail summary .st{margin-left:8px}.mail .subj{font-size:14px}
/* Courts (27 Oct): two boards, tap to move */
.ct-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.ct-count{font:500 14px var(--num);color:var(--muted);flex:1 1 100%}
.st.block{display:block;border-radius:10px;padding:8px 12px;margin:0 0 8px;font-size:14px}
.ct-grid{display:grid;gap:12px}
.court{margin:0;padding:12px}
.court-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}.court-h b{font:600 18px var(--head)}.court-h .avg{margin-left:auto;font:500 13px var(--num);color:var(--muted)}
.pair{display:grid;grid-template-columns:44px 1fr;gap:4px 8px;padding:8px 0;border-top:1px solid var(--line)}
.slot{grid-row:span 2;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--lace);font:700 18px var(--head);color:var(--ink)}
.slot.sel,.pchip.sel{outline:3px solid var(--trinidad);outline-offset:1px}
.seats{display:grid;grid-template-columns:1fr 1fr;gap:6px}.seats.wrap{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pchip{display:flex;align-items:center;gap:6px;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:14px var(--body);text-align:left;min-width:0}
.pchip .pn{flex:1;min-width:0;overflow-wrap:break-word;hyphens:auto;line-height:1.2}  /* full name, wraps at spaces (Kristian 6 Nov: never cut a name off) */
.pchip{flex-wrap:wrap;row-gap:2px}.pchip .pn{flex-basis:calc(100% - 20px)}  /* name gets the whole first line; level + icons sit under it */
.pchip .pl{font:500 12px var(--num);color:var(--muted)}.pchip.unk .pl{color:var(--warn)}
.pchip.empty{border-style:dashed;color:var(--muted);justify-content:center}
.pchip:disabled{opacity:1;cursor:default}.pchip.empty:disabled{opacity:.6}
.pmeta{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted)}
.flag{color:var(--bad)}.flag.soft{color:var(--warn)}
#ct-unplaced h3{font:600 18px var(--head);margin:18px 0 8px}
.ct-move{position:sticky;bottom:calc(var(--nav-h) + 8px);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border-radius:14px;padding:10px 12px;margin-top:12px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.ct-move span{flex:1 1 100%;font-weight:700}.ct-move .btn.ghost{color:var(--paper);border-color:rgba(255,255,255,.4)}
.ties{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}.ties b{flex:1 1 100%;font-size:14px}
.tie{display:inline-flex;align-items:center;gap:4px;background:var(--greybg);border-radius:999px;padding:4px 10px;font-size:14px}.tie small{color:var(--muted)}
.tie .x{border:0;background:none;font-size:18px;min-width:32px;min-height:32px;color:var(--bad)}
@media (min-width:768px){.ct-grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}.ct-count{flex:1 1 auto}}
/* Who plays when + the printed court sheets (27 Oct) */
details.when{margin:0 0 6px}details.when summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;color:var(--muted)}
.sched{width:100%;border-collapse:collapse;font-size:14px;margin:4px 0 8px}
.sched th{text-align:left;font-size:12px;color:var(--muted);font-weight:400;padding:4px 6px;border-bottom:1px solid var(--line)}
.sched td{padding:6px;border-bottom:1px solid var(--line)}.sched .t{font:500 13px var(--num);white-space:nowrap}
.sched .vs{color:var(--muted)}.sched .rest{color:var(--muted)}
.print-only{display:none}
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff;color:#000}
  body > *:not(#print){display:none!important}
  #print{display:block}
  .psheet{break-after:page;page-break-after:always;font-family:var(--body);color:#000}
  .psheet:last-child{break-after:auto;page-break-after:auto}
  .psheet .pk{font:500 12pt var(--num);margin:0 0 2mm}
  .psheet h1{font:800 64pt/1 var(--head);margin:0 0 8mm}
  .ppairs{display:grid;gap:3mm;margin-bottom:8mm}
  .ppair{display:flex;gap:5mm;align-items:center;font-size:18pt;border:1.5pt solid #000;border-radius:3mm;padding:3mm 5mm}
  .ppair .pl{font:800 26pt var(--head);min-width:12mm}
  .sched.big{font-size:15pt}.sched.big th{font-size:11pt;color:#000;border-bottom:1.5pt solid #000}
  .sched.big td{padding:3.5mm 2mm;border-bottom:1pt solid #999;color:#000}.sched.big .t{font-size:16pt}
  .sched.big .rest,.sched.big .vs{color:#555}
  .psheet .pf{font-size:11pt;margin-top:6mm}
}

/* Answers tab (28 Oct): reply tool + knowledge base */
.ans-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:22px}
.ans-lab{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
#ans-msg{width:100%;box-sizing:border-box;font:16px var(--body);padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--lace);color:var(--ink);resize:vertical;min-height:96px}
.ans-draft{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.ans-draft pre{white-space:pre-wrap;word-break:break-word;font:16px/1.5 var(--body);background:var(--okbg);color:var(--ink);border-radius:12px;padding:12px;margin:6px 0 0}
.ans-h{font-weight:700;font-size:14px;margin:12px 0 4px}
.ans-src{list-style:none;padding:0;margin:0;font-size:14px;color:var(--muted)}
.ans-src li{padding:6px 0;border-bottom:1px dashed var(--line)}
.ans-src b{color:var(--ink);font-family:var(--num);font-size:12px;margin-right:6px}
.ans-miss{margin-top:14px;background:var(--warnbg);color:var(--ink);border-radius:12px;padding:12px}
.ans-miss strong{color:var(--warn)}
.ans-miss ul{margin:6px 0 0;padding-left:18px}
.kb-group{margin:18px 0 6px;font:700 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kb-row{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.kb-q{font-weight:700;margin:0 0 4px}
.kb-a{margin:0;white-space:pre-wrap;word-break:break-word}
.kb-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.kb-id{font:12px var(--num);color:var(--muted)}
.kb-row .btn{margin-top:0}
.ans-draft.card{border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0 0;background:none;margin:14px 0 0}

/* ---------- Check-in (spec-checkin-live-2026-10-30) ---------- */
.pchip.ci-here{border-color:var(--ok);background:var(--okbg)}
.pchip.ci-missing{border-color:var(--bad);background:var(--badbg)}
.pchip.ci-missing .pn{text-decoration:line-through;text-decoration-color:var(--bad)}
.pchip .cid{width:10px;height:10px;border-radius:50%;flex:0 0 10px;border:2px solid var(--grey);box-sizing:border-box}
.pchip.ci-here .cid{background:var(--ok);border-color:var(--ok)} .pchip.ci-missing .cid{background:var(--bad);border-color:var(--bad)}
.court-h .herec{font:500 12px var(--num);padding:2px 8px;border-radius:999px;background:var(--greybg);color:var(--grey)}
.court-h .herec.full{background:var(--okbg);color:var(--ok)}
.ci-banner{border-radius:12px;padding:10px 14px;margin-bottom:12px;font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ci-banner.test{background:var(--badbg);color:var(--bad);border:2px dashed var(--bad);font-weight:700}
.ci-banner.stale{background:var(--warnbg);color:var(--warn)}
.ci-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.ci-kpi{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ci-kpi b{display:block;font:500 22px var(--num);font-variant-numeric:tabular-nums}
.ci-kpi span{font-size:13px;color:var(--muted)}
.ci-kpi.ok b{color:var(--ok)} .ci-kpi.bad b{color:var(--bad)} .ci-kpi.warn b{color:var(--warn)}
.ci-h{font:700 18px var(--head);margin:18px 0 8px}
.seat{border-left:4px solid var(--bad)}
.seat .seat-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.seat .seat-h b{font:600 17px var(--head)}
.seat p{margin:6px 0 0;font-size:14px}
.seat .sugg{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.seat select{font:15px var(--body);min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);padding:0 10px;max-width:100%}
.ci-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);min-height:52px}
.ci-row .who{flex:1;min-width:0}.ci-row .who b{display:block;overflow-wrap:break-word}
.ci-row .who small{color:var(--muted);font-size:12px}
.ci-row .btn{margin-top:0;flex:0 0 auto}
@media (min-width:768px){.ci-kpis{grid-template-columns:repeat(4,1fr)}}

/* Not on WhatsApp (Kristian 30 Oct): dashed amber = "this number can't take WhatsApp", grey chip once marked */
.btn.nowa{background:transparent;color:var(--warn);border:2px dashed var(--warn)}
.q-nowa{margin:4px 0 0;font:500 12px var(--num);color:var(--warn)}
.nowa-box{border:1px solid var(--warn);background:var(--warnbg);border-radius:14px;padding:12px 14px;margin:0 0 12px}
.nowa-box b{color:var(--warn)} .nowa-box p{margin:6px 0 0;font-size:14px}
.nowa-card{border:1px solid var(--warn);background:var(--paper);border-radius:14px;padding:14px;margin:0 0 12px}
.nowa-card>b{font-size:16px} .nowa-card .meta{margin:4px 0 8px}
.nowa-row{display:flex;width:100%;align-items:center;gap:10px;min-height:52px;padding:8px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left}
.nowa-row>span:first-child{flex:1;display:flex;flex-direction:column} .nowa-row small{color:var(--muted)}
.c-flag .st+.st{margin-left:4px}
.toast.has-undo{display:flex;align-items:center;gap:12px;width:calc(100% - 32px);max-width:420px;border-radius:14px;padding:8px 8px 8px 14px;text-align:left}
.nowa-box .btn.ghost{border-color:var(--warn);color:var(--warn)}
.toast-undo{flex:0 0 auto;color:inherit;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid currentColor;background:transparent;font-weight:700}

/* Hand-set level (spec 30 Oct): purple only ever means "a person typed this level" */
.lv.hand{background:var(--handbg);color:var(--hand)}
.lv.hand::after{content:"by hand";font:400 10px var(--body);margin-left:4px}
.hand-box{border:1px solid var(--hand);border-radius:14px;padding:12px 14px;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.hand-box.set{background:var(--handbg)}
.hand-box>b{color:var(--hand)} .hand-box p{margin:0;font-size:14px} .hand-box .hint{font-size:13px;color:var(--muted)}
.hand-box .field{margin:0}
.hand-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn.hand{border-color:var(--hand);color:var(--hand)}

/* Changed by hand on the courts (Kristian 30 Oct): blue only ever means "a person changed this". It never fills the chip,
   so the check-in green/red still reads underneath: a thick left edge + a small tag. */
.pchip.mv{box-shadow:inset 5px 0 0 var(--moved);padding-left:14px}
.pchip.mv{position:relative;overflow:visible}
.pchip .mvtag{position:absolute;top:-8px;left:12px;font:500 10px/14px var(--num);color:var(--moved);background:var(--paper);border:1px solid var(--moved);border-radius:999px;padding:0 6px;white-space:nowrap;pointer-events:none}
.pchip .pl{white-space:nowrap}
.court.has-moves{border-color:var(--moved);box-shadow:0 0 0 1px var(--moved)}
.tag-moved{font:500 12px var(--num);padding:2px 8px;border-radius:999px;background:var(--movedbg);color:var(--moved)}
.ct-bar .tag-moved{flex:none;padding:4px 10px}
.btn.undo{border-color:var(--moved);color:var(--moved)}
.bench-hint{margin:18px 0 0;color:var(--muted);font-size:14px}
.bench .pchip{border-style:dashed}
.ct-move .mv-who{flex:1 1 100%;color:var(--movedbg)}

/* ---------- Academy board (2 Nov) ---------- */
.ac-agenda{grid-column:1/-1}
.sched.ac th{vertical-align:top}.sched.ac .st-name{display:block;font:600 15px var(--head);color:var(--ink)}
.sched.ac .st-tr{display:block;font-size:12px}.sched.ac td{vertical-align:top}.sched.ac small{color:var(--muted);font-size:12px}
.ac-who{font-size:14px;margin-top:4px}
.gbadge{display:inline-block;font:700 12px var(--body);padding:2px 9px;border-radius:999px}
.gbadge.g1{background:#E3ECFB;color:#123E73}.gbadge.g2{background:var(--warnbg);color:#7A2704}.gbadge.g3{background:var(--okbg);color:#1D5631}
.ac-court{border-top:1px solid var(--line);padding:8px 0;display:grid;gap:6px}
.ac-ch{font:500 12px var(--num);color:var(--muted)}
.ac-plan{list-style:none;margin:6px 0 0;padding:10px 12px;background:var(--greybg);border-radius:10px;display:grid;gap:4px;font-size:13px}
.ac-plan li{display:flex;gap:10px}.ac-plan .t{font:500 13px var(--num);color:var(--muted)}
.linkish{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--trinidad);text-decoration:underline;cursor:pointer;min-height:24px}

/* ---------- LIVE screen (2 Nov): dark, made for the beamer; sizes follow the screen ---------- */
.band-r{display:flex;align-items:flex-start;gap:14px}
.live-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--trinidad);color:#fff;font:500 14px var(--num);letter-spacing:.16em;cursor:pointer}
.live-btn .dot,.lv-pill .dot{width:9px;height:9px;border-radius:50%;background:#fff}
@media (prefers-reduced-motion:no-preference){.live-btn .dot,.lv-pill .dot{animation:lvblink 1.6s ease-in-out infinite}@keyframes lvblink{50%{opacity:.25}}}
body.lv-on{overflow:hidden}
.live{position:fixed;inset:0;z-index:60;background:#160C09;color:#F7E9DC;font-family:var(--body);display:flex;flex-direction:column;gap:2.2vh;padding:3vh 3.2vw 2.4vh;overflow:auto;color-scheme:dark}
.live[hidden]{display:none}
.live-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.live-ctl .btn.ghost{color:#F7E9DC;border-color:#3E2820;background:transparent}.live-ctl .btn.on{background:#F9D4A4;color:#2A1510}
.live-ctl .lv-pv{font:500 13px var(--num);color:#C2A493;margin-left:8px}.live-ctl .lv-x{margin-left:auto}
.live-ctl{transition:opacity .3s}.live.lv-idle .live-ctl{opacity:0;pointer-events:none}.live.lv-idle{cursor:none}
.lv-k{display:block;font:500 clamp(11px,1.05vw,20px) var(--num);letter-spacing:.14em;color:#C2A493}
.lv-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 2vw}
.lv-ev{display:block;font:800 clamp(26px,2.8vw,54px)/1 var(--head)}.lv-ev i{font-weight:700;color:#F9D4A4}
.lv-pill{display:inline-flex;align-items:center;gap:10px;padding:.5em 1.1em;border-radius:999px;background:var(--trinidad);color:#fff;font:500 clamp(13px,1.1vw,22px) var(--num);letter-spacing:.2em}
.lv-clock{margin-left:auto;font:500 clamp(40px,5vw,100px)/1 var(--num);font-variant-numeric:tabular-nums;color:#fff}
.lv-hero{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2vw;padding:2.6vh 2vw;border-radius:clamp(16px,1.5vw,28px);background:#7F1604}
.lv-hero .lv-k{color:#F9D4A4}
.lv-title{display:block;font:800 clamp(34px,3.8vw,76px)/1.05 var(--head);color:#fff}
.lv-hsub{display:block;font-size:clamp(15px,1.45vw,28px);color:#FDF6EE;margin-top:.3em}
.lv-cd{margin-left:auto;text-align:right}.lv-left{display:block;font:500 clamp(48px,6.2vw,124px)/.95 var(--num);font-variant-numeric:tabular-nums;color:#fff}
.lv-tiles{flex:1 1 auto;display:grid;gap:1.1vw;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-content:start}
.lv-tiles.k-loop,.lv-tiles.k-power{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media (min-width:1100px){.lv-tiles.k-loop,.lv-tiles.k-power{grid-template-columns:repeat(5,minmax(0,1fr))}.lv-tiles.k-academy{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lv-tl{grid-column:1/-1;margin:0}
.lv-tile{background:#21130E;border:2px solid #3E2820;border-radius:clamp(14px,1.4vw,26px);padding:clamp(14px,1.4vw,26px);display:flex;flex-direction:column;gap:1.6vh;min-width:0}
.lv-th{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lv-tile h3{margin:0;font:800 clamp(22px,2.2vw,44px)/1.05 var(--head);color:#fff}
.lv-sub{font:500 clamp(12px,1vw,20px) var(--num);color:#C2A493}
.lv-now{display:flex;flex-direction:column;gap:.5vh;padding:clamp(12px,1vw,18px);border-radius:clamp(10px,1vw,18px);background:#F9D4A4;color:#2A1510}
.lv-now .lv-k{color:inherit}.lv-now.g1{background:#DCE7FA;color:#123E73}.lv-now.g2{background:#F9D4A4;color:#5A1C02}.lv-now.g3{background:#D5ECDB;color:#1D5631}
.lv-who{font:700 clamp(17px,1.6vw,32px)/1.2 var(--body);overflow-wrap:anywhere}
.lv-vs{font:500 clamp(12px,.95vw,18px) var(--num);color:#7F1604}
.lv-rest span:last-child,.lv-next span:last-child{font-size:clamp(14px,1.25vw,24px);overflow-wrap:anywhere}
.lv-next{margin-top:auto;padding-top:1.2vh;border-top:1px solid #3E2820}.lv-next .lv-k{color:#E9864F}
.lv-big{grid-column:1/-1;align-self:center;text-align:center;font:700 clamp(22px,2.6vw,52px)/1.2 var(--head);color:#F7E9DC;margin:4vh 0;display:flex;flex-direction:column;gap:1vh}
.lv-num{font:500 clamp(64px,10vw,200px)/1 var(--num);color:#fff}
.lv-line{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.lv-bar{height:10px;border-radius:999px;background:#3E2820;overflow:hidden}.lv-bar div{height:10px;border-radius:999px;background:#7A5E52}
.lv-ph.now .lv-bar div{background:var(--trinidad)}
.lv-pl{display:flex;justify-content:space-between;gap:6px;margin-top:6px;font:500 clamp(11px,1vw,20px) var(--num);color:#C2A493}
.lv-ph.done .lv-pl{color:#7A5E52}.lv-ph.now .lv-pl{color:#fff}
@media (max-width:767px){.band-r{flex-direction:column-reverse;align-items:flex-end;gap:6px}.lv-line{grid-template-columns:repeat(5,minmax(60px,1fr));overflow-x:auto}}

/* ---------- Look A, like thebrunchclub.es (Kristian 2 Nov): off-white ground, near-black text, TBC orange as the one
   accent, a floating white menu with the logo, Playfair numbers. No red band, no typewriter figures. ---------- */
:root{--lace:#f6f2ea; --paper:#fffdf9; --ink:#141110; --muted:#6e665e; --line:#e4ddd1; --band:#f6f2ea; --band-ink:#141110;
  --copper:#141110; --corvette:#F9D4A4; --num:var(--body); --greybg:#efe7dc}
.band{background:var(--lace);color:var(--ink)}
.band::after{display:none}
.ev{color:var(--trinidad);opacity:1;font:700 11px var(--body);letter-spacing:.18em}
.title{letter-spacing:-.02em}
.title i{color:var(--trinidad)}
.me a{color:var(--ink)}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:14px}
.kpi b{font:800 22px/1.1 var(--head);color:var(--ink)}
.kpi span{color:var(--muted);opacity:1}
.kpi small{color:var(--trinidad)}
.kpi.done{background:var(--paper);border-color:var(--ok)}
.kpi-arrow{color:var(--muted)}
.btn{border-radius:12px}
.logo{display:none}
@media (min-width:768px){
  .tabs{background:transparent;border:0;top:10px;padding:0 var(--gut-r) 0 var(--gut-l)}
  .tabs-in{max-width:1180px;align-items:center;background:rgba(255,253,249,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 24px rgba(20,17,16,.06);padding:8px 8px 8px 14px;margin:10px auto 0}
  .tab{border-radius:10px;font-weight:700;color:var(--ink)}
  .tab[aria-selected="true"]{background:var(--ink);color:var(--paper);font-weight:700}
  .logo{display:block;height:32px;width:auto;margin-right:14px}
  .title{font-size:44px}
}

/* ---------- Dark mode, same style as the website (Kristian 2 Nov): the warm near-black of thebrunchclub.es's dark
   block, the same fonts, TBC orange. Switched on and off by hand in the header, remembered per device. ---------- */
:root[data-mode="dark"]{
  --lace:#141110; --paper:#1d1410; --ink:#f6f2ea; --muted:#bcae9f; --line:#3a2a20; --band:#141110; --band-ink:#f6f2ea;
  --copper:#f6f2ea; --corvette:#5A2E19; --greybg:#2a1f18; --grey:#bcae9f;
  --okbg:#1F3A27; --ok:#8FD4A2; --warnbg:#3F2A10; --warn:#F5B867; --badbg:#41191A; --bad:#F2928B; --hand:#C9B5F5; --handbg:#2E2442; --moved:#8DB4FF; --movedbg:#1B2A47;
  color-scheme:dark}
:root[data-mode="dark"] body{background:radial-gradient(80% 50% at 85% 0%,#3a1a0d 0%,#141110 60%) fixed var(--lace)}
:root[data-mode="dark"] .logo{filter:invert(1)}
:root[data-mode="dark"] .tabs-in{background:rgba(29,20,16,.92)}
:root[data-mode="dark"] .gbadge.g1{background:#1B2A47;color:#8DB4FF}
:root[data-mode="dark"] .gbadge.g2{color:var(--warn)}
:root[data-mode="dark"] .gbadge.g3{color:var(--ok)}
.mode-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:700 13px var(--body)}
/* the court agenda stays a real table on the phone too (the phone base turns tables into cards) */
table.sched{display:table;width:100%}
.sched thead{display:table-header-group}.sched tbody{display:table-row-group}
.sched tr,.sched tbody tr{display:table-row;background:none;border:0;border-radius:0;padding:0;margin:0}
.sched th,.sched td{display:table-cell}

/* Players: two dropdown filters (Format, Status) instead of ten chips */
#chips{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:0 0 14px}
.fsel{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.fsel select{min-height:44px;min-width:200px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:700 14px var(--body)}

/* Check-in (Kristian 2 Nov: "a bit awkward"): rows in one card, a round tick instead of a big orange button per row */
.ci-head{display:flex;align-items:baseline;gap:10px;margin:22px 0 8px}.ci-head .ci-h{margin:0}
.ci-meta{font-size:13px;color:var(--muted)}
.ci-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.ci-tools .search{flex:1 1 260px;min-width:0;margin:0}
.ci-tools .seg{margin:0}
.ci-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:2px 14px}
.ci-card .ci-row{border-bottom:1px solid var(--line);padding:10px 0;gap:12px}
.ci-card .ci-row:last-child{border-bottom:0}
.ci-tick{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:2px solid var(--muted);background:var(--lace);color:#fff;font:700 20px/1 var(--body);display:inline-flex;align-items:center;justify-content:center;padding:0}
.ci-tick:hover:not(:disabled){border-color:var(--trinidad)}
.ci-tick.on{background:var(--ok);border-color:var(--ok)}
.ci-tick:disabled{opacity:.5;cursor:default}
.ci-row .st{background:none;padding:0;font-size:13px}
.ci-row[data-ci="missing"] .who b{color:var(--bad)}

/* ---------- LIVE screen in the lineup poster's look (Kristian 2 Nov): deep blue, light beams, film grain, squared white
   type (Orbitron: the closest Google font to the poster's lettering). The app itself keeps look A. ---------- */
.live{background:
  radial-gradient(60% 45% at 50% 62%,rgba(90,180,255,.55) 0%,rgba(30,110,200,.25) 40%,rgba(3,20,40,0) 72%),
  linear-gradient(180deg,#041a33 0%,#0b3a6b 55%,#06213f 100%);
  color:#f2f8ff;font-family:"Exo 2",system-ui,sans-serif}
.live::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}
.live::after{content:"";position:fixed;left:0;right:0;top:61%;height:3px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(140,205,255,.7),transparent);filter:blur(2px)}
.live>*{position:relative;z-index:1}
.live .lv-k,.live .lv-sub,.live .lv-pl,.live .lv-pv{font-family:"Orbitron","Exo 2",sans-serif;color:#bfe0ff}
.lv-ev,.lv-title,.live .lv-tile h3,.lv-big,.lv-clock,.lv-left,.lv-num,.lv-pill,.lv-set,.lv-dj b{font-family:"Orbitron","Exo 2",sans-serif}
.lv-ev{text-transform:uppercase;letter-spacing:.04em;font-weight:900}.lv-ev i{font-style:normal;color:#bfe0ff}
.lv-title{text-transform:uppercase;letter-spacing:.03em;font-weight:900}
.lv-pill{background:#f2f8ff;color:#06213f}.lv-pill .dot{background:#2f8ff0}
.lv-hero{background:rgba(4,26,51,.55);border:1px solid rgba(140,205,255,.35);backdrop-filter:blur(2px)}
.lv-hero .lv-k{color:#bfe0ff}.lv-hsub{color:#d8ebff}
.live .lv-tile{background:rgba(4,26,51,.6);border:1px solid rgba(140,205,255,.28)}
.live .lv-tile h3{font-size:clamp(18px,1.7vw,34px);white-space:nowrap;text-transform:uppercase;font-weight:900}
.live .lv-th{flex-wrap:wrap}
.live .lv-now{background:#f2f8ff;color:#06213f}.live .lv-now .lv-k{color:#2a5f96}
.live .lv-now.g1{background:#e3f0ff;color:#0b2f57}.live .lv-now.g2{background:#fff1dd;color:#5a2a00}.live .lv-now.g3{background:#e3f7ec;color:#0f3f25}
.live .lv-who,.live .lv-hsub,.live .lv-rest span,.live .lv-next span{font-family:"Exo 2",system-ui,sans-serif}
.live .lv-vs{color:#2f8ff0;font-family:"Orbitron",sans-serif}
.live .lv-next{border-top-color:rgba(140,205,255,.25)}.live .lv-next .lv-k{color:#7fc4ff}
.live .lv-bar{background:rgba(140,205,255,.18)}.live .lv-bar div{background:rgba(191,224,255,.45)}.live .lv-ph.now .lv-bar div{background:#f2f8ff}
.live .lv-ph.done .lv-pl{color:rgba(191,224,255,.45)}.live .lv-ph.now .lv-pl{color:#ffffff}
.live .live-ctl .btn{background:#f2f8ff;color:#06213f}.live .live-ctl .btn.ghost{background:transparent;color:#f2f8ff;border-color:rgba(140,205,255,.35)}.live .live-ctl .btn.on{background:#f2f8ff;color:#06213f}
.lv-dj{display:flex;flex-wrap:wrap;gap:12px 3vw;align-items:baseline;padding:0 .4vw}
.lv-dj>span{display:flex;align-items:baseline;gap:14px}
.lv-dj b{font-size:clamp(20px,2.2vw,44px);font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:#ffffff}
.lv-lineup{grid-column:1/-1;justify-self:center;width:min(980px,100%);display:flex;flex-direction:column;gap:.6vh;margin:1vh 0}
.lv-lineup>.lv-k{text-align:center;font-size:clamp(14px,1.4vw,26px);letter-spacing:.18em;margin-bottom:1vh}
.lv-set{display:flex;align-items:baseline;justify-content:space-between;gap:24px;text-transform:uppercase}
.lv-set-t{font-size:clamp(16px,min(1.8vw,3.4vh),36px);font-weight:700;color:#d8ebff}
.lv-set-n{font-size:clamp(22px,min(3vw,5.2vh),58px);font-weight:900;letter-spacing:.02em;color:#ffffff;text-align:right}
.lv-set.done{opacity:.35}
.lv-set.now .lv-set-n{color:#ffffff;text-shadow:0 0 24px rgba(127,196,255,.9)}

/* LIVE: the poster's grain (Kristian 2 Nov "a noisy background similar to the poster"): heavy fine grain on a deep blue,
   light rays from a glowing horizon, dark edges. Panels are see-through so the grain runs under everything. */
.live{background:
  radial-gradient(110% 85% at 50% 60%,rgba(0,0,0,0) 30%,rgba(0,5,14,.92) 100%),
  radial-gradient(50% 34% at 50% 62%,rgba(110,190,255,.85) 0%,rgba(30,120,215,.45) 40%,rgba(4,30,60,0) 75%),
  linear-gradient(180deg,#020c1a 0%,#072a52 58%,#020f22 100%)}
.live::before{opacity:.8;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .75  0 0 0 0 .88  0 0 0 0 1  0 0 0 1.4 -.35'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 .05  0 0 0 0 .12  0 0 0 1.2 -.45'/></filter><rect width='400' height='400' filter='url(%23m)'/></svg>");background-size:220px 220px,400px 400px}
.live::after{top:62%;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(170,220,255,.85) 50%,transparent 100%);box-shadow:0 0 30px 6px rgba(110,190,255,.45)}
.lv-hero,.live .lv-tile{background:rgba(2,14,30,.5);backdrop-filter:none;border-color:rgba(160,215,255,.30)}
.live .lv-now{background:rgba(242,248,255,.92)}
.lv-title,.lv-clock,.lv-left,.lv-set-n,.lv-dj b{text-shadow:0 0 18px rgba(120,195,255,.45)}

/* LIVE: every box the same size (Kristian 2 Nov). Each court/station tile shares its rows with its neighbours (subgrid),
   so the white "now" boxes, the break lines and the "next" lines line up across the screen; names stay on one line. */
.live .lv-tile{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:1.6vh;align-content:start}
.lv-tiles.k-power .lv-tile{grid-row:span 2}
.live .lv-next{margin-top:0;align-self:start}
.lv-tiles.k-loop .lv-who,.lv-tiles.k-power .lv-who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(15px,1.4vw,28px)}
.lv-tiles.k-loop .lv-rest span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.live{gap:1.8vh}
.live .lv-tile{min-width:0;overflow:hidden;row-gap:1.1vh;padding:clamp(12px,1.1vw,22px)}
.live .lv-tile>*{min-width:0}
.live .lv-tile h3{white-space:normal;font-size:clamp(16px,1.45vw,30px);line-height:1.1}
.live .lv-now{padding:clamp(10px,.8vw,16px)}
.live .lv-next{padding-top:.8vh}
.live .lv-next span:last-child,.live .lv-rest span:last-child{font-size:clamp(13px,1.1vw,22px)}


.ci-replace{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ci-pick{min-height:44px;max-width:280px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:14px var(--body)}
@media (max-width:767px){.ci-card .ci-row{flex-wrap:wrap}.ci-replace{width:100%;padding-left:56px}.ci-pick{flex:1}}

.ci-sw{margin:18px 0 6px}.ci-sw small{font-size:12px;opacity:.75}
.ci-card .lv{flex:0 0 auto}

/* walk-in form */
.ci-head .ci-add{margin-left:auto}
.wi-form{display:grid;gap:12px;margin:0 0 12px}
.wi-form label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.wi-form input{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--lace);color:var(--ink);font:16px var(--body)}
.wi-lv{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.wi-lv label{flex:0 1 220px}
.wi-or{font-size:13px;color:var(--muted);padding-bottom:12px}
.wi-bands{margin:0;flex-wrap:wrap}
.wi-form .btn{justify-self:start;margin:0}

/* "Something happened" sheet */
.inc-list{display:grid;gap:8px}
.inc-item{display:grid;gap:2px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);padding:12px 14px;min-height:56px}
.inc-item b{font:700 16px var(--body)}.inc-item span{font-size:13px;color:var(--muted)}
.inc-item:hover{border-color:var(--trinidad)}
.inc-rule{font-size:16px;margin:0 0 14px}
.inc-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.inc-acts .btn{margin:0}
.inc-back{margin-top:16px}
.inc-left{background:var(--greybg);border-radius:12px;padding:10px 12px;margin-bottom:12px}.inc-left p{margin:0 0 6px}
.pchip[data-ci="left"] .pn{text-decoration:line-through}
.ci-row .ci-what{white-space:nowrap}

/* tap a name on the desk list = "Something happened" (Kristian 3 Nov) */
.who-name{all:unset;display:block;cursor:pointer;font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.who-name:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}
.inc-ctx{margin:0 0 8px;font-size:14px;color:var(--muted)}

/* Guide (Kristian 3 Nov): one card per walkthrough, desktop product-demo video on top, written steps underneath */
.guide{display:grid;gap:18px;max-width:980px}
.guide-card h3{margin:0 0 10px;font:700 18px/1.25 var(--head)}
.guide-card video{display:block;width:100%;aspect-ratio:1440/900;margin:0 0 14px;border-radius:14px;background:#141110}
.guide-card ol{margin:0;padding-left:20px;font-size:15px;line-height:1.5}.guide-card li+li{margin-top:6px}

/* Group check-in (Kristian 4 Nov, design A): "Who is here?" notice on top of the desk */
.ci-banner.grp { background: #FDEBD9; border: 2px solid #E34703; color: #5A1B05; display: grid; gap: 10px; }
.grp-t { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.grp-big { font-family: "Playfair Display", Georgia, serif; font-size: 19px; color: #1E1410; }
.grp-g small { opacity: .85; }
.grp-who { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.grp-name { font: inherit; font-weight: 700; border: 2px solid #E34703; background: #fff; color: #C23B00; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.grp-name:disabled { opacity: .55; cursor: default; }
.grp-name.on { background: #3E7A4A; border-color: #3E7A4A; color: #fff; cursor: default; }
.grp-hint { margin: 0; font-size: 12.5px; opacity: .85; }
.tab { position: relative; }
.tab-badge { position: absolute; top: -6px; right: -6px; background: #E34703; color: #fff; font-size: 11px; line-height: 18px; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px; text-align: center; }

/* Demo mode bar (back 4 Nov): impossible to miss, so nobody mistakes the demo for the real night */
.demo-bar{position:sticky;top:0;z-index:40;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center;
  padding:8px var(--gut-r) 8px var(--gut-l);background:repeating-linear-gradient(135deg,#ffd84d 0 14px,#ffcc1a 14px 28px);color:#141110;font-size:14px}
.demo-bar .btn{margin:0}.demo-bar .btn.ghost{background:#fffdf9;color:#141110;border-color:#141110}.demo-bar .btn:not(.ghost){background:#141110;color:#fff}
.demo-bar .demo-now{display:flex;align-items:center;gap:6px;font-weight:700}
.demo-bar select,.demo-bar input{font:inherit;border:1px solid #141110;border-radius:8px;padding:3px 6px;background:#fffdf9;color:#141110}
[data-demo="1"] .title::after{content:" · DEMO";font:700 14px var(--body);color:#b45309;letter-spacing:.1em}

.guide-try { background: #FDEBD9; border-radius: 10px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.guide-try p { margin: 0; }
.guide-copy { border: 1px dashed #E34703; border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; }
.guide-msg { margin: 0; white-space: pre-wrap; user-select: all; }
a.ci-text { text-decoration: none; }
.passon{width:100%}.pass-ci{display:flex!important;align-items:center;gap:8px;font-size:14px!important;color:var(--ink)!important}
.pass-ci input{min-height:auto!important;width:20px;height:20px}.passon label.bad input{border-color:var(--trinidad);box-shadow:0 0 0 1px var(--trinidad)}
.wi-err:empty{display:none}.wi-err{color:var(--trinidad);margin:0;font-size:14px}
.pchip .pn + .mvtag + .pl,.pchip .pn + .pl{margin-left:16px}
/* Kristian 6 Nov: every seat box the same, larger size, however short the name. Room for a 3-line name + the level line;
   the name starts at the top next to the dot, the level sits at the bottom. */
.pchip{min-height:100px;align-items:flex-start;align-content:space-between;padding:10px 12px}
.pchip .cid{margin-top:5px}
.pchip.empty{align-items:center;align-content:center}
/* "Show schedules" switch on the court boards (Kristian 6 Nov) */
.btn.sw{display:inline-flex;align-items:center;gap:8px}
.btn.sw .knob{width:30px;height:18px;border-radius:999px;background:var(--line);position:relative;flex:0 0 30px;transition:background .15s}
.btn.sw .knob::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--paper);transition:left .15s}
.btn.sw[aria-pressed="true"]{border-color:var(--ok);color:var(--ok);background:var(--okbg)}
.btn.sw[aria-pressed="true"] .knob{background:var(--ok)}.btn.sw[aria-pressed="true"] .knob::after{left:15px}
div.when{margin:0 0 6px}
/* the reason under a no-show's name (Kristian 6 Nov) */
.pchip .pwhy{flex-basis:100%;margin-left:16px;font:500 12px var(--num);color:var(--muted)}
.pchip .pwhy[data-ci="missing"]{color:var(--bad)}
.pchip .pwhy + .pl,.pchip .pwhy + .mvtag + .pl{margin-left:16px}
/* Academy agenda: who is where at a glance (Kristian 6 Nov) */
.sched.ac{border-collapse:separate;border-spacing:6px}.sched.ac td{border:0}
.sched.ac td.ac-cell{border-radius:10px;padding:8px;min-width:120px}
.ac-cell.g1{background:#E3ECFB}.ac-cell.g2{background:var(--warnbg)}.ac-cell.g3{background:var(--okbg)}
:root[data-mode="dark"] .ac-cell.g1{background:#1B2A47}
.ac-cell .gbadge{background:none;padding:0}
.ac-who{display:grid;gap:4px;margin-top:6px}
.ac-name{display:block;background:var(--paper);color:var(--ink);border-radius:6px;padding:4px 8px;font-size:14px;line-height:1.2}
/* phone: no sideways scroll. Each time is a row of 2 boxes, each box names its court + trainer */
@media (max-width:767px){
  .sched.ac,.sched.ac tbody,.sched.ac tr{display:block}.sched.ac thead{display:none}
  .sched.ac tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:12px}
  .sched.ac td{display:block}.sched.ac td.t{grid-column:1/-1;padding:0}
  .sched.ac td.ac-cell{min-width:0}
  .ac-cell::before{content:attr(data-st);display:block;font:500 12px/1.3 var(--num);color:var(--ink);margin-bottom:4px}
}

/* /live: name search + sections under the screen (Kristian 6 Nov: "the same exact style as the live screen") */
.lv-more{display:grid;gap:1.6vh}.lv-more[hidden]{display:none}
.lv-q{display:grid;gap:6px}
.lv-q input{width:100%;min-height:48px;border-radius:16px;border:1px solid rgba(160,215,255,.3);background:rgba(2,14,30,.5);color:#fff;padding:0 14px;font:16px "Exo 2",system-ui,sans-serif}
.lv-q input::placeholder{color:#BFE0FF}.lv-q input:focus-visible,.lv-sh:focus-visible{outline:3px solid #BFE0FF;outline-offset:2px}
.lv-res{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}.lv-res[hidden]{display:none}
.lv-res .lv-now{background:rgba(2,14,30,.5);border:1px solid rgba(160,215,255,.3);border-radius:16px;color:#F2F8FF}
.lv-res .lv-who{font:700 18px Orbitron,"Exo 2",sans-serif;color:#fff}.lv-res .lv-k{margin-top:6px;color:#BFE0FF}
#lv-secs{display:grid;gap:10px}
.lv-sec{border:1px solid rgba(160,215,255,.3);border-radius:16px;background:rgba(2,14,30,.5);overflow:hidden}
.lv-sh{all:unset;box-sizing:border-box;display:flex;width:100%;min-height:56px;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;cursor:pointer;color:#fff}
.lv-sh b{display:block;font:700 clamp(17px,1.8vw,30px)/1.15 Orbitron,"Exo 2",sans-serif;text-transform:uppercase;text-shadow:0 0 18px rgba(120,195,255,.45)}
.lv-chev{font-size:20px;color:#BFE0FF}
.lv-mt{display:block;font-size:14px;color:#BFE0FF}
.lv-mp{border-top:1px solid rgba(160,215,255,.3);padding-top:8px;margin-top:8px;overflow-wrap:anywhere;color:#F2F8FF}.lv-mp b{font-weight:700;color:#fff}
.lv-tiles.lv-sb{padding:0 12px 12px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.live .lv-sb .lv-tile{display:block;grid-row:auto;background:rgba(2,14,30,.5)}
.lv-sb .lv-tile h3{color:#BFE0FF}
@media (max-width:767px){.live{gap:14px;padding:14px max(16px,env(safe-area-inset-left,0px)) 28px}.lv-clock{font-size:34px}}

/* every tab: the Refresh row and the group notice (Kristian 6 Nov) */
.gbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.grp-global{position:sticky;top:8px;z-index:14}
@media (min-width:768px){.grp-global{top:84px}}
.tabs-in{grid-template-columns:repeat(5,1fr)}

/* Demo mode off for the event (Kristian 6 Nov): it needs the old server */
#demo-btn{display:none}

/* play times per pair: one block per round (Kristian 6 Nov) */
.pmeta{display:block}
.pstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:6px}
.pb{display:flex;align-items:center;justify-content:center;min-height:30px;border-radius:7px;font:700 12.5px var(--body);font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
.pb.on{background:var(--trinidad);color:#fff}
.pb.off{background:var(--greybg);color:var(--muted);font-size:11px;letter-spacing:.1em}
.lv-strip .pb{font-family:"Exo 2",system-ui,sans-serif}
.lv-strip .pb.on{background:rgba(160,215,255,.9);color:#02122A}
.lv-strip .pb.off{background:rgba(160,215,255,.12);color:#BFE0FF}

/* /live has two views (Kristian 6 Nov): Find my court, Live now. Same look as the LIVE screen. */
.lv-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:rgba(2,14,30,.5);border:1px solid rgba(160,215,255,.3)}
.lv-tab{all:unset;box-sizing:border-box;min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:10px;cursor:pointer;color:#BFE0FF;font:700 clamp(12px,1.2vw,18px) Orbitron,"Exo 2",sans-serif;letter-spacing:.04em;text-transform:uppercase}
.lv-tab[aria-selected="true"]{background:rgba(160,215,255,.9);color:#02122A}
.lv-tab:focus-visible{outline:3px solid #BFE0FF;outline-offset:2px}
.lv-view-find .lv-hero,.lv-view-find .lv-dj,.lv-view-find .lv-tiles:not(.lv-sb),.lv-view-find .lv-line,.lv-view-find .lv-all{display:none!important}
.live:not(.lv-view-find) .lv-find{display:none}
.lv-find{display:grid;gap:14px}
.lv-ask{font-size:clamp(20px,3vw,40px)!important}
.lv-q input{min-height:54px;font-size:17px}
.lv-res{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.live .lv-res .lv-card{display:block;grid-row:auto;grid-template-rows:none;overflow:visible}
.lv-card .lv-rc{margin-top:12px}
.live .lv-card h3{font-size:clamp(18px,1.8vw,30px)}
.lv-rc{display:grid;gap:6px;border-top:1px solid rgba(160,215,255,.3);padding-top:10px}
.lv-where{color:#fff;font-weight:700;font-size:17px;overflow-wrap:anywhere}
.lv-stop{display:grid;grid-template-columns:96px 1fr;gap:8px;color:#F2F8FF;font-size:14.5px}.lv-stop b{color:#fff;font-variant-numeric:tabular-nums}
.lv-phone #live-ctl{display:none}
.pstrip[hidden]{display:none}
.ptimes-btn{margin-top:6px}
@media (min-width:768px){.lv-find{width:min(760px,100%);margin:3vh auto 0}.lv-res{grid-template-columns:minmax(0,1fr)}.lv-tabs{width:min(760px,100%);margin:0 auto}}
.sb-btn{background:var(--ink);letter-spacing:.08em;font-size:13px}
@media (max-width:767px){.sb-btn{font-size:12px}}