/* THEMES
   Three looks, set by data-theme on <html> (see setTheme/initTheme in js/common.js):
     night    — the original dark screen, easiest on the eyes indoors and after dark
     day      — a light screen for offices, printouts and bright rooms
     daylight — very high contrast for reading a phone outdoors in direct sun
   "night" is the default, and also what a viewer with no stored choice gets unless their
   device asks for light. Everything below is a token; no component hardcodes a colour. */
:root, :root[data-theme="night"]{
  --bg:#0b1220; --bg-glow:#16223c; --panel:#131c2e; --panel2:#1b2740; --line:#26324c;
  --ink:#e8eef8; --muted:#94a3b8; --brand:#3b82f6; --brand2:#1d4ed8;
  --good:#22c55e; --warn:#f59e0b; --bad:#ef4444; --chip:#22304d;
  --sunken:#0e1830;              /* inputs, progress troughs, order badges */
  --map-bg:#0e1626;
  --b-reg-bg:#233047; --b-reg-fg:#9fb3d1;
  --b-stage-bg:#3a2e12; --b-stage-fg:#f4c460;
  --b-live-bg:#123524; --b-live-fg:#5fe39a;
  --b-done-bg:#2a2140; --b-done-fg:#c4b5fd;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}
:root[data-theme="day"]{
  --bg:#f4f6fa; --bg-glow:#e6ecf7; --panel:#ffffff; --panel2:#f1f4f9; --line:#d7dee9;
  --ink:#16202b; --muted:#5a6b7d; --brand:#1d4ed8; --brand2:#1e40af;
  --good:#15803d; --warn:#a16207; --bad:#b91c1c; --chip:#e4eaf4;
  --sunken:#eef2f8;
  --map-bg:#e8edf4;
  --b-reg-bg:#e2e8f2; --b-reg-fg:#4a5b6e;
  --b-stage-bg:#fdf0d5; --b-stage-fg:#8a5a12;
  --b-live-bg:#dcf3e6; --b-live-fg:#12623f;
  --b-done-bg:#ebe6fb; --b-done-fg:#5b3fae;
  --radius:14px; --shadow:0 6px 20px rgba(20,35,60,.10);
  color-scheme: light;
}
/* Outdoors in sun: maximum contrast, heavier borders, no soft greys. */
:root[data-theme="daylight"]{
  --bg:#ffffff; --bg-glow:#ffffff; --panel:#ffffff; --panel2:#ffffff; --line:#1a1a1a;
  --ink:#000000; --muted:#333333; --brand:#0033cc; --brand2:#001f7a;
  --good:#006622; --warn:#7a4500; --bad:#a50000; --chip:#ffffff;
  --sunken:#ffffff;
  --map-bg:#ffffff;
  --b-reg-bg:#ffffff; --b-reg-fg:#000000;
  --b-stage-bg:#ffe9b8; --b-stage-fg:#5c3a00;
  --b-live-bg:#c9f2d6; --b-live-fg:#00441c;
  --b-done-bg:#e4ddff; --b-done-fg:#2d1a6b;
  --radius:10px; --shadow:none;
  color-scheme: light;
}
:root[data-theme="daylight"] .card,
:root[data-theme="daylight"] .row,
:root[data-theme="daylight"] .kpi,
:root[data-theme="daylight"] .btn{border-width:2px}
:root[data-theme="daylight"] body{font-weight:500}

/* Seasonal / holiday skins. Same token contract as the three core screens — each one defines
   the full set, so nothing falls back to another theme's colour. An organizer's per-event
   brand colour (see --brand override in common.js) sits on top of whichever of these is chosen. */
:root[data-theme="holiday"]{
  --bg:#0a1a12; --bg-glow:#12301f; --panel:#10241a; --panel2:#163022; --line:#24482f;
  --ink:#eef7f0; --muted:#9ec4ab; --brand:#d8453c; --brand2:#a32b25;
  --good:#3fbf6a; --warn:#e8b33c; --bad:#e0453c; --chip:#1b3a26;
  --sunken:#0c1f16; --map-bg:#0c1f16;
  --b-reg-bg:#1b3a26; --b-reg-fg:#9ec4ab;
  --b-stage-bg:#3d3312; --b-stage-fg:#f0d070;
  --b-live-bg:#123b24; --b-live-fg:#6fe39a;
  --b-done-bg:#3a1b1b; --b-done-fg:#f0a39c;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.4);
  color-scheme: dark;
}
:root[data-theme="autumn"]{
  --bg:#1a1209; --bg-glow:#2b1d0e; --panel:#231809; --panel2:#2e2010; --line:#46311a;
  --ink:#f6ecdd; --muted:#c3a383; --brand:#e07a28; --brand2:#a8541a;
  --good:#8aa63a; --warn:#e3a51f; --bad:#c7462c; --chip:#3a2814;
  --sunken:#18110a; --map-bg:#18110a;
  --b-reg-bg:#3a2814; --b-reg-fg:#c3a383;
  --b-stage-bg:#45320f; --b-stage-fg:#f0c25e;
  --b-live-bg:#2d3a14; --b-live-fg:#b9d45e;
  --b-done-bg:#3c2418; --b-done-fg:#e0a27e;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.4);
  color-scheme: dark;
}
:root[data-theme="spring"]{
  --bg:#f3f9f4; --bg-glow:#e4f2e7; --panel:#ffffff; --panel2:#eef6f0; --line:#cfe2d4;
  --ink:#16261c; --muted:#5a7265; --brand:#2f8f4e; --brand2:#1f6b39;
  --good:#1f7a3f; --warn:#a9700d; --bad:#b4342a; --chip:#dcede1;
  --sunken:#e9f3eb; --map-bg:#e9f3eb;
  --b-reg-bg:#e1ebe4; --b-reg-fg:#50675a;
  --b-stage-bg:#fbf0d4; --b-stage-fg:#845713;
  --b-live-bg:#d9f0de; --b-live-fg:#15663a;
  --b-done-bg:#e7e3f7; --b-done-fg:#54409e;
  --radius:14px; --shadow:0 6px 20px rgba(25,60,35,.10);
  color-scheme: light;
}
:root[data-theme="patriotic"]{
  --bg:#081128; --bg-glow:#0f1d44; --panel:#0e1935; --panel2:#152246; --line:#26376a;
  --ink:#eef2fb; --muted:#9bacd0; --brand:#c8313c; --brand2:#8f1f29;
  --good:#3fa96a; --warn:#e3b53c; --bad:#c8313c; --chip:#1b2a55;
  --sunken:#0a1430; --map-bg:#0a1430;
  --b-reg-bg:#1b2a55; --b-reg-fg:#9bacd0;
  --b-stage-bg:#3b3014; --b-stage-fg:#f0cc63;
  --b-live-bg:#123a26; --b-live-fg:#6ad79a;
  --b-done-bg:#35203f; --b-done-fg:#cbaef0;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.4);
  color-scheme: dark;
}

*{box-sizing:border-box}
/* Switched-off feature modules are hidden with the `hidden` attribute (see applyModules in
   common.js). The UA's [hidden] rule loses to any class selector that sets display, and some of
   these regions are .card or .btn, so make it unambiguous. */
[hidden]{display:none !important}
/* Scrolling belongs to the window, not to <body>. `height:100%` plus `overflow-x:hidden` on body
   turned body itself into a viewport-height scroll container: window.scrollY stayed 0, anchor
   links and scrollIntoView stopped working, and on iOS that combination is what leaves the last
   rows of a long page stuck under the browser toolbar. overflow-x stays on <html> alone, which
   is the normal viewport scroller, and min-height keeps the background covering a short page. */
html{overflow-x:hidden}
html,body{margin:0;min-height:100%;max-width:100%}
img,.leaflet-container{max-width:100%}
body{
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 20% -10%,var(--bg-glow) 0%,var(--bg) 55%);
  color:var(--ink); -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
h1,h2,h3{margin:0 0 .4em;line-height:1.2}
.muted{color:var(--muted)}
.wrap{max-width:1180px;margin:0 auto;padding:18px}

/* header */
.top{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:500}
.top .brand{font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:9px}
.top .brand .dot{width:12px;height:12px;border-radius:50%;background:var(--brand);box-shadow:0 0 12px var(--brand)}
.top .spacer{flex:1}
.pill{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--chip);color:var(--muted);border:1px solid var(--line)}
.pill.live{background:var(--b-live-bg);color:var(--b-live-fg);border-color:var(--b-live-fg)}
.pill.live .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--b-live-fg);margin-right:6px;animation:pulse 1.4s infinite}
@keyframes pulse{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}

/* mobile: keep everything within the screen width, no panning/zooming */
@media(max-width:640px){
  .wrap{padding:12px}
  .top{gap:8px;padding:8px 12px}
  .top .brand{width:100%;font-size:15px}
  .top .spacer{display:none}
  /* Keep the controls on one line: the name chip gives up its width first. */
  .top .pill{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #map{height:360px}
  .hero{padding:26px 4px 6px}
  .hero h1{font-size:26px}
  .card{padding:14px}
  .row{gap:9px;padding:9px 10px}
  .kpi .n{font-size:20px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;cursor:pointer;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  padding:9px 14px;border-radius:10px;font-weight:600;font-size:14px;transition:.15s}
.btn:hover{border-color:var(--brand)}
.btn.brand{background:linear-gradient(180deg,var(--brand),var(--brand2));border-color:transparent}
.btn.brand:hover{filter:brightness(1.07)}
.btn.good{background:linear-gradient(180deg,#22c55e,#16a34a);border-color:transparent;color:#04210f}
.btn.warn{background:linear-gradient(180deg,#f59e0b,#d97706);border-color:transparent;color:#2a1802}
.btn.bad{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 10px;font-size:13px}
.btn.big{padding:16px 18px;font-size:17px;width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* cards / grid */
.grid{display:grid;gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px}
.card h2{font-size:16px}
/* minmax(0,…) on the track + min-width:0 on the items lets them shrink below their content,
   so a long name or a Leaflet map never forces the page wider than the screen */
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:16px}
.split>*{min-width:0}
@media(max-width:940px){.split{grid-template-columns:minmax(0,1fr)}}
.card{max-width:100%}
#map{width:100%}

/* map */
#map{height:460px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.leaflet-container{background:var(--map-bg)}
.floatpin{border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.35);
  width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:10px}

/* lineup list */
.list{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow:auto}
.row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel2)}
.row .ord{width:26px;height:26px;flex:none;border-radius:8px;background:var(--sunken);display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--muted)}
.row .swatch{width:10px;height:10px;border-radius:50%;flex:none}
.row .grow{flex:1;min-width:0}
.row .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .eta{text-align:right;font-variant-numeric:tabular-nums}
.row .eta b{font-size:15px}
.row.next{border-color:rgba(59,130,246,.6);box-shadow:0 0 0 1px rgba(59,130,246,.3) inset}

.badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.2px;text-transform:uppercase}
.b-registered{background:var(--b-reg-bg);color:var(--b-reg-fg)}
.b-staging{background:var(--b-stage-bg);color:var(--b-stage-fg)}
.b-arrived,.b-on_route{background:var(--b-live-bg);color:var(--b-live-fg)}
.b-finished{background:var(--b-done-bg);color:var(--b-done-fg)}

/* progress bar */
.track{height:8px;border-radius:999px;background:var(--sunken);overflow:hidden;margin-top:6px}
.track > i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#22c55e)}

/* forms */
label{display:block;font-size:12.5px;color:var(--muted);margin:10px 0 4px}
input,select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--sunken);color:var(--ink);font-size:14px}
input:focus,select:focus{outline:none;border-color:var(--brand)}
.rowflex{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-width:0}
/* A <select> takes its width from its longest option and a flex item refuses to shrink below its
   content, so one long event name ("Canton First Monday Trade Days — Canton, TX") used to push a
   whole row off a phone screen. These two lines are what keep every page inside the viewport. */
.rowflex>*{min-width:0;max-width:100%}
select,input,textarea{max-width:100%}

/* landing */
.hero{text-align:center;padding:46px 18px 8px}
.hero h1{font-size:34px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
@media(max-width:820px){.cards3{grid-template-columns:1fr}}
.rolecard{display:block;padding:22px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel),var(--panel2));transition:.15s}
.rolecard:hover{transform:translateY(-3px);border-color:var(--brand)}
.rolecard .ic{font-size:30px}
.rolecard h3{margin-top:10px;color:var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:720px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px}
.kpi .n{font-size:24px;font-weight:800}
.kpi .l{font-size:12px;color:var(--muted)}
/* role switcher */
.switcher{display:inline-flex;gap:4px;background:var(--sunken);border:1px solid var(--line);border-radius:10px;padding:3px}
.switcher a{font-size:12.5px;font-weight:600;color:var(--muted);padding:5px 9px;border-radius:7px;white-space:nowrap}
.switcher a:hover{color:var(--ink)}
.switcher a.on{background:var(--brand);color:#fff}
/* The platform console is a different scope, not another view of this event. */
.switcher a.level{margin-left:7px;padding-left:11px;border-left:1px solid var(--line)}
@media(max-width:640px){.switcher a.level{margin-left:0;padding-left:8px;border-left:0}}
/* Five tabs (a hunt event adds one) did not fit a 375px screen and pushed the page sideways.
   The tabs wrap instead of overflowing, and the row still cannot exceed the screen. */
@media(max-width:640px){
  .switcher{display:flex;flex-wrap:wrap;max-width:100%;justify-content:flex-start}
  .switcher a{padding:6px 8px;font-size:11.5px}
}

/* social icons */
.social{display:inline-flex;gap:6px;font-size:14px;margin-left:2px}
.social a{text-decoration:none}
.vpill{font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--b-done-bg);color:var(--b-done-fg);white-space:nowrap}

/* profile modal */
.pm-back{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 78%,transparent);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}
.pm{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  max-width:520px;width:100%;max-height:86vh;overflow:auto;padding:20px;position:relative}
.pm-x{position:absolute;top:12px;right:12px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:14px}
.pm-head{display:flex;gap:12px;align-items:center}
.pm-head h2{font-size:19px}
.pm .social{font-size:20px;gap:10px}
.pm-bio{white-space:pre-wrap;line-height:1.6;color:var(--ink);margin:12px 0}
.pm-details{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.pm-details .drow{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--line)}
.pm-details .drow span{color:var(--muted)}
.pm-details .drow b{text-align:right}
/* item cards (for-sale) — used in live + market profiles */
.items-wrap{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.items-h{margin-bottom:8px;font-size:12.5px}
.items{display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:11px;padding:8px;border:1px solid var(--line);border-radius:11px;background:var(--panel2)}
.item-img{width:46px;height:46px;flex:none;border-radius:9px;object-fit:cover;background:var(--sunken);border:1px solid var(--line)}
.item-img.ph{display:flex;align-items:center;justify-content:center;font-size:20px}
.item-body{flex:1;min-width:0}
.item-name{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-desc{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-price{flex:none;font-weight:800;color:var(--b-live-fg);background:var(--b-live-bg);border:1px solid rgba(34,197,94,.3);padding:3px 10px;border-radius:999px;font-size:13px;white-space:nowrap}
/* item preview chips in a directory row */
.item-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.item-chip{font-size:11px;color:var(--muted);background:var(--sunken);border:1px solid var(--line);border-radius:6px;padding:1px 7px;white-space:nowrap}
.nm.clickable{cursor:pointer}
.nm.clickable:hover{text-decoration:underline}
.detail-editor{margin-top:8px}
.detail-editor .drow{display:flex;gap:8px;margin-bottom:6px}
.detail-editor .drow input{flex:1}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel);
  border:1px solid var(--line);padding:10px 16px;border-radius:10px;box-shadow:var(--shadow);
  opacity:0;transition:.2s;z-index:900}
.toast.show{opacity:1}

/* --- sponsors / ad spots --------------------------------------------------- */
#sponsors{margin-bottom:16px}
.sponsor-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:14px;
  border:1px solid rgba(245,158,11,.35);background:linear-gradient(90deg,rgba(245,158,11,.14),rgba(245,158,11,.03));
  color:var(--ink);margin-bottom:12px}
.sponsor-banner:hover{border-color:rgba(245,158,11,.65)}
.sb-label{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--warn)}
.sb-logo{height:30px;width:auto;max-width:130px;object-fit:contain;border-radius:6px}
.sb-name{font-weight:800;font-size:16px}
.sb-blurb{color:var(--muted);font-size:13px}
.sponsor-strip .ss-h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}
.ss-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.sponsor-card{flex:0 0 auto;max-width:290px;display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink)}
.sponsor-card:hover{border-color:var(--brand)}
.sponsor-card.t-presenting{border-color:rgba(245,158,11,.5)}
.sponsor-card.t-gold{border-color:rgba(212,175,55,.32)}
.sc-logo{width:36px;height:36px;flex:none;border-radius:8px;object-fit:contain;background:var(--sunken);border:1px solid var(--line)}
.sc-logo.ph{display:flex;align-items:center;justify-content:center;font-size:17px}
.sc-body{min-width:0}
.sc-name{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-blurb{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brand);
  background:var(--chip);border:1px solid var(--line);border-radius:5px;padding:1px 5px;vertical-align:middle}

/* --- market: live booth status + richer directory rows --------------------- */
.vs{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.vs-open{background:var(--b-live-bg);color:var(--b-live-fg);border-color:var(--b-live-fg)}
.vs-busy{background:var(--b-stage-bg);color:var(--b-stage-fg);border-color:var(--b-stage-fg)}
.vs-sold_out{background:color-mix(in srgb,var(--bad) 14%,var(--panel));color:var(--bad);border-color:var(--bad)}
.vs-closed{background:var(--b-reg-bg);color:var(--b-reg-fg)}
.vs-crowd{background:var(--chip);color:var(--brand);border-color:var(--line)}
.row .thumb{width:42px;height:42px;flex:none;border-radius:9px;object-fit:cover;background:var(--sunken);border:1px solid var(--line)}
.row .thumb.ph{display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--muted)}
.row.featured{border-color:rgba(245,158,11,.55);background:linear-gradient(90deg,rgba(245,158,11,.10),var(--panel2))}
.feat{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--b-stage-fg);
  background:var(--b-stage-bg);border:1px solid var(--b-stage-fg);border-radius:5px;padding:1px 5px}
.pm-photo{width:100%;border-radius:12px;margin:12px 0 0;border:1px solid var(--line)}
.pm-live{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.group-h{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:12px 0 6px;padding-top:8px;border-top:1px solid var(--line)}
.group-h:first-child{border-top:0;padding-top:0;margin-top:0}
.seg{display:inline-flex;background:var(--sunken);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px}
.seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;
  padding:4px 9px;border-radius:6px;cursor:pointer}
.seg button.on{background:var(--brand);color:#fff}
.img-btn{display:inline-flex;align-items:center;gap:6px}
.thumb-sm{width:30px;height:30px;border-radius:7px;object-fit:cover;border:1px solid var(--line);background:var(--sunken)}


/* --- theme picker ---------------------------------------------------------- */
.themebtn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);padding:6px 10px;border-radius:10px;font-size:13px;font-weight:600}
.themebtn:hover{border-color:var(--brand)}
.thememenu{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:190px;z-index:900;
  max-width:calc(100vw - 24px)}
.thememenu .mtitle{display:none}
.thememenu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;
  color:var(--ink);font:inherit;font-size:13.5px;padding:8px 10px;border-radius:8px;cursor:pointer}
.thememenu button:hover{background:var(--panel2)}
.thememenu button.on{background:var(--brand);color:#fff}
.thememenu .sub{display:block;font-size:11.5px;opacity:.72;font-weight:400}
.themewrap{position:relative;display:inline-block}

/* The screen-style menu as a bottom sheet on phones. Anchoring it to the button meant it opened
   off the left edge wherever the header wrapped and pushed the button to the start of a row —
   the options were rendered but unreachable. Pinned to the viewport it always fits. */
@media(max-width:640px){
  .thememenu{position:fixed;left:12px;right:12px;top:auto;bottom:12px;
    width:auto;min-width:0;max-width:none;max-height:72vh;overflow:auto;padding:10px;z-index:1200}
  .thememenu .mtitle{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
    color:var(--muted);padding:2px 10px 8px}
  .thememenu button{padding:13px 12px;font-size:15px}
  .themescrim{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:1100}
}
.themescrim{display:none}


/* --- system messages ------------------------------------------------------- */
.msgs{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.msg{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel)}
.msg .ic{font-size:16px;line-height:1.3;flex:none}
.msg .body{flex:1;min-width:0;white-space:pre-wrap;line-height:1.55}
.msg .when{font-size:11.5px;color:var(--muted);margin-top:3px}
.msg.important{border-color:var(--warn);background:var(--b-stage-bg);color:var(--b-stage-fg)}
.msg.important .when{color:var(--b-stage-fg);opacity:.75}
.msg.urgent{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 13%,var(--panel));color:var(--bad)}
.msg.urgent .when{color:var(--bad);opacity:.75}
.msg .aud{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:1px 6px;border-radius:5px;background:var(--chip);color:var(--muted);white-space:nowrap}

/* --- lineup sheet ---------------------------------------------------------- */
.lineup-row{display:flex;gap:13px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel2)}
.lineup-row .pos{width:38px;flex:none;font-weight:800;font-size:19px;text-align:center;
  font-variant-numeric:tabular-nums;color:var(--brand)}
.lineup-row .who{flex:1;min-width:0}
.lineup-row .nm2{font-weight:700;font-size:15.5px}
.lineup-row .org2{font-size:13px;color:var(--muted)}
.note{margin-top:7px;padding:8px 10px;border-radius:9px;background:var(--b-stage-bg);color:var(--b-stage-fg);
  font-size:13px;line-height:1.5;white-space:pre-wrap;border:1px solid var(--b-stage-fg)}
.note b{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;opacity:.8;margin-bottom:2px}
@media print{
  .top,.switcher,.themewrap,.noprint{display:none!important}
  body{background:#fff!important;color:#000!important}
  .lineup-row{break-inside:avoid;border-color:#bbb}
  .wrap{padding:0}
}

/* --- lineup reordering (organizers only) ----------------------------------- */
.drag{width:30px;min-height:40px;flex:none;display:flex;align-items:center;justify-content:center;cursor:grab;
  color:var(--muted);font-size:18px;line-height:1;user-select:none;touch-action:none}
.drag:hover{color:var(--brand)}
.drag:active{cursor:grabbing}
.lineup-row.dragging{opacity:.6;border-color:var(--brand);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.posin{width:48px;flex:none;text-align:center;font-weight:800;font-size:16px;padding:6px 2px;
  font-variant-numeric:tabular-nums;border-radius:8px;background:var(--sunken);
  border:1px solid var(--line);color:var(--brand)}
.posin:focus{border-color:var(--brand);outline:none}
.editbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 13px;margin-bottom:12px;
  border:1px solid var(--brand);border-radius:11px;background:var(--panel2);font-size:13.5px}
.editbar .k{font-weight:700}
@media print{ .drag,.editbar{display:none!important} .posin{border:0;background:transparent} }

/* On a phone a list row cannot carry a name, an ETA and a row of buttons side by side —
   the name ends up squeezed to nothing and the buttons run off the edge. Below ~700px the
   row wraps instead: name on its own full-width line, then the ETA and controls beneath it. */
@media(max-width:700px){
  .row{flex-wrap:wrap;row-gap:8px}
  .row .ord,.row .swatch,.row .thumb{order:1}
  .row .grow{order:2;flex:1 1 100%}
  .row .eta{order:3;text-align:left;font-size:12.5px;min-width:0}
  .row .eta b{font-size:13.5px}
  .row .acts,.row>.rowflex{order:4;margin-left:auto}
  .row>.rowflex{flex-direction:row!important}
  .acts{grid-template-columns:repeat(6,auto)}
}

/* Touch devices get bigger hit targets. `pointer: coarse` matches phones and tablets
   (including iPads) without making the laptop/desktop UI clumsy, so one layout serves both. */
@media (pointer: coarse){
  .drag{width:40px;min-height:48px;font-size:22px}
  .posin{width:56px;min-height:44px;font-size:17px}
  .btn{padding:11px 16px}
  .btn.sm{padding:9px 13px;font-size:13.5px}
  .acts .btn{min-width:38px;min-height:38px;padding:7px 9px;font-size:14px}
  .switcher a{padding:9px 12px;font-size:13px}
  .chip{padding:8px 13px;font-size:13.5px}
  .seg button{padding:9px 13px}
  .thememenu button{padding:12px 12px}
  input,select,textarea{font-size:16px}   /* 16px stops iOS zooming the page on focus */
  .row .btn.sm.ghost{min-width:38px;min-height:38px}
  .themebtn{min-width:38px;min-height:38px;justify-content:center}
  select{min-height:38px}
  /* Website/Facebook/Instagram links render as bare emoji ~14px wide — too small to hit. */
  .social{gap:4px}
  .social a{display:inline-flex;align-items:center;justify-content:center;
    min-width:34px;min-height:34px;border-radius:9px;font-size:17px}
  .social a:active{background:var(--panel2)}
  .toc a{display:inline-block;padding:6px 2px}
  a.pill{min-height:32px;display:inline-flex;align-items:center}
}

/* --- countdown (front page) ------------------------------------------------ */
.count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0 6px}
.count .u{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center}
.count .v{font-size:clamp(26px,7vw,40px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.count .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-top:5px}

/* Feature-module toggles in the organizer console. */
.modlist{display:flex;flex-direction:column;gap:7px}
.modrow{display:flex;gap:10px;align-items:center;padding:9px 11px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel2)}
.modrow.on{border-color:var(--brand)}
.modrow .mi{font-size:18px;line-height:1;flex:none;width:24px;text-align:center}
.modrow .nm{font-weight:650;font-size:13.5px}
.modrow .sub{font-size:12px;color:var(--muted);line-height:1.45}
.modrow .grow{min-width:0}
.modrow button{flex:none;min-width:58px}
@media(max-width:700px){ .modrow{flex-wrap:wrap} .modrow .grow{flex-basis:100%;order:2} }