:root {
  --ink: #14171c;
  --ink-soft: #1e2228;
  --paper: #f6f4ef;
  --paper-dim: #eae7de;
  --text: #20242b;
  --dim: #5b6270;
  --signal: #ff5a1f;
  --wrist: #9a4cff;
  --sos: #e11d2e;
  --line: rgba(20, 23, 28, 0.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--text); font-family: Archivo, sans-serif; }
h1, h2 { font-family: Anton, sans-serif; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 8px; }
h1 { font-size: 1.6rem; color: var(--paper); }
h2 { font-size: 1.15rem; }
a { color: var(--signal); }
.pitch {
  position: fixed; inset: 0; z-index: 40; background: var(--ink); color: var(--paper);
  padding: 36px 24px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  width: 100%;
}
.pitch > * { max-width: 26rem; }
.pitch[hidden] { display: none !important; }
.pitch h1 { font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.05; color: var(--paper); }
.pitch-copy, .pitch-step { color: rgba(246,244,239,0.72); max-width: 26rem; line-height: 1.45; }
.pitch-step { color: var(--signal); font-weight: 700; }
.pitch #start-demo {
  margin-top: 18px; background: var(--signal); color: var(--ink); border: 0; font-weight: 800;
  padding: 16px 20px; border-radius: 4px; text-transform: uppercase; cursor: pointer; width: fit-content;
}
.text-btn, .ghost-top {
  background: transparent; border: 0; color: rgba(246,244,239,0.7); font: inherit; font-weight: 700;
  margin-top: 12px; cursor: pointer; text-align: left;
}
.ghost-top { margin: 0; border: 1px solid rgba(246,244,239,0.25); padding: 8px 10px; border-radius: 4px; font-size: 12px; display: inline-flex; align-items: center; text-decoration: none; line-height: 1; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 16px 12px; background: var(--ink); color: var(--paper);
}
.eyebrow { margin: 0 0 4px; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--signal); text-transform: uppercase; }
.sos {
  background: var(--sos); color: #fff; border: 0; font-weight: 800; padding: 12px 18px;
  border-radius: 4px; letter-spacing: 0.08em; cursor: pointer;
}
.tabs {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: var(--ink-soft);
  position: sticky; top: 0; z-index: 5;
}
.tabs button {
  flex: 1 1 28%; border: 0; background: transparent; color: rgba(246,244,239,0.65);
  font-weight: 700; padding: 10px 12px; border-radius: 4px; cursor: pointer;
}
.tabs button.on { background: var(--signal); color: var(--ink); }
.panel { display: none; padding: 16px; max-width: 980px; margin: 0 auto; }
.panel.on { display: block; }
.lede { color: var(--dim); font-size: 0.95rem; line-height: 1.45; }
.desk-title, .desk-only { display: none; }
/* Role split: staff-only elements are hidden regardless of screen size until
   the "Staff view" toggle is on — independent of the desk-only (screen-size)
   convenience above, since Paul demos both roles from the same desktop. */
[data-staff-only] { display: none !important; }
body.view-staff [data-staff-only] { display: block !important; }
body.view-staff .assign-row[data-staff-only] { display: flex !important; }
body.view-staff button[data-staff-only] { display: inline-block !important; }
.view-toggle { display: flex; gap: 0; border: 1px solid rgba(246,244,239,0.25); border-radius: 4px; overflow: hidden; }
.view-toggle button { border: 0; border-radius: 0; margin: 0; }
.view-toggle button.on { background: var(--signal); color: var(--ink); }
.map-toolbar { display: flex; gap: 8px; margin: 10px 0 8px; flex-wrap: wrap; align-items: center; }
.map-stage { position: relative; }
.map-wrap {
  position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); margin: 0 0 14px; height: min(62vh, 560px);
}
.ops-badge {
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ink); color: var(--signal); padding: 8px 12px; border-radius: 99px;
}
#glasto-map, #ride-map { position: absolute; inset: 0; }
.ride-map-wrap { height: min(48vh, 420px); }
.pickup-pin {
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--signal); color: var(--ink); border-radius: 99px;
  font: 700 11px Archivo, sans-serif; display: grid; place-items: center;
  border: 2px solid #fff;
}
.pickup-pin.gate { background: var(--ink); color: var(--paper); }
.pickup-pin.need { background: var(--wrist); color: #fff; }
.hover-card {
  position: absolute; z-index: 6; pointer-events: auto;
  background: #111; color: #e8e6e1; width: 196px;
  padding: 10px 10px 12px; box-shadow: 0 16px 50px rgba(0,0,0,.55);
  text-align: center;
}
.hover-card .pass-event {
  font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase;
  color: #9a9a9a; margin-bottom: 8px; line-height: 1.25;
}
.hover-card .pass-photo img {
  width: 176px; height: 200px; object-fit: cover; object-position: center top;
  display: block; margin: 0 auto;
}
.hover-card .forename {
  font-family: Anton, sans-serif; text-transform: uppercase;
  font-size: 22px; letter-spacing: 0.04em; margin-top: 8px; line-height: 1;
}
.hover-card .surname { font-size: 13px; color: #b8b8b8; margin-top: 2px; }
.hover-card .pass-meta { font-size: 10px; color: #888; margin-top: 6px; }
.hover-card .call-mini { display: inline-block; margin-top: 8px; }
.staff-pin {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid #fff; object-fit: cover; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.staff-pin.hq {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(255,90,31,.6), 0 2px 8px rgba(0,0,0,.45);
}
.staff-pin-wrap { position: relative; width: 36px; height: 36px; }
.staff-pin-wrap .staff-pin { display: block; }
.staff-pin-wrap.ask::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 3px solid var(--signal); animation: pulse 1.2s ease infinite; pointer-events: none;
}
.staff-pin-wrap.ask.drink::after { border-color: #2f6f4e; }
.staff-pin-wrap.ask.toilet::after { border-color: #1e6f8c; }
.staff-pin-wrap.ask.hold::after { border-style: dashed; border-color: var(--wrist); }
.staff-pin-wrap.ask.assistant::after { border-color: var(--sos); animation: pulse .7s ease infinite; }
.staff-pin-wrap.away::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 3px solid var(--sos); animation: pulse 1.2s ease infinite; pointer-events: none;
}
/* Whoever reported an open incident — bigger, fire red, until resolved.
   Wins over .ask/.away's ::after when combined (same specificity, comes
   last in source order) since "there's an open incident" is the most
   urgent thing to see on the map. */
.staff-pin-wrap.incident { width: 54px; height: 54px; }
.staff-pin-wrap.incident .staff-pin {
  width: 54px; height: 54px; border-color: var(--sos);
  box-shadow: 0 0 0 4px rgba(225,29,46,.55), 0 2px 10px rgba(0,0,0,.5);
}
.staff-pin-wrap.incident::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 3px solid var(--sos); animation: pulse .9s ease infinite; pointer-events: none;
}
.staff-row.flagged { border-left: 3px solid var(--sos); }
.away-badge { color: var(--sos); font-weight: 700; }
.away-badge .buy { margin-left: 6px; background: var(--sos); color: #fff; }
.away-badge.just-asked { animation: pulse .6s ease 2; border-radius: 4px; }
.hover-card.post-panel { text-align: left; width: 220px; }
.hover-card.post-panel .post-title {
  font-family: Anton, sans-serif; text-transform: uppercase; font-size: 16px; letter-spacing: .03em;
}
.hover-card.post-panel ul {
  list-style: none; padding: 0; margin: 6px 0; font-size: 11px; color: #ccc; max-height: 110px; overflow: auto;
}
.hover-card.post-panel li { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.hover-card.post-panel li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hover-card.post-panel .post-call {
  color: var(--signal); text-decoration: none; font-size: 13px; flex: none;
}
.hover-card.post-panel .post-remove {
  background: transparent; border: 1px solid #555; color: #ccc; border-radius: 4px;
  width: 18px; height: 18px; line-height: 1; font-size: 10px; cursor: pointer; flex: none; padding: 0;
}
.hover-card.post-panel .post-remove:hover { border-color: var(--sos); color: var(--sos); }
.hover-card.post-panel select {
  width: 100%; margin-top: 6px; padding: 6px; font: inherit; font-size: 11px;
}
.hover-card.post-panel .buy { width: 100%; margin-top: 6px; }
.assign-row .remove-post { background: transparent; border: 1px solid var(--sos); color: var(--sos); }
/* Post pins: a small icon badge with a count, not a text pill — a map
   with a dozen-plus posts turned into unreadable overlapping orange bars
   before this (seen live). The popover on click still carries the full
   name/category/roster, so the pin itself only needs the icon. */
.post-pin {
  width: 28px; height: 28px; border-radius: 50%; background: #fff;
  border: 2px solid var(--signal); display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.4); position: relative;
}
.post-pin-count {
  position: absolute; top: -6px; right: -7px; background: var(--signal); color: var(--ink);
  font: 700 9px "IBM Plex Mono", monospace; border-radius: 99px; padding: 1px 4px;
  min-width: 13px; text-align: center; border: 1px solid #fff; line-height: 1.3;
}
.ops-settings-link {
  display: flex; align-items: center; gap: 6px; justify-content: flex-start;
  text-decoration: none; margin: 14px 12px 4px; width: fit-content;
}
.staff-row {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center;
}
.staff-row img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.call-mini {
  background: var(--sos); color: #fff; border: 0; text-decoration: none;
  font-weight: 800; padding: 10px 12px; border-radius: 6px; font-size: 12px;
  text-transform: uppercase; white-space: nowrap;
}
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cards li, .sandy-card, .cart {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px;
}
.meta { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--dim); }
.composer { display: flex; gap: 8px; margin: 12px 0; }
.composer input, .composer select {
  flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 12px; font: inherit;
}
/* Lives in the narrow .ops-side control-room sidebar, not the wide main
   column other .composer forms sit in — needs to wrap or its select +
   two buttons run off the edge of the panel. */
#add-post-form { flex-wrap: wrap; }
#add-post-form input, #add-post-form select { min-width: 140px; }
/* .composer's own `display: flex` above beats the browser's default
   [hidden] style (an equal-specificity author-vs-UA tie that the author
   sheet always wins) — found live, the form was showing permanently
   regardless of its hidden attribute/property. */
#add-post-form[hidden] { display: none; }
.composer button, .cart button, .buy {
  background: var(--signal); color: var(--ink); border: 0; font-weight: 800; padding: 12px 16px;
  border-radius: 4px; cursor: pointer; text-transform: uppercase; font-size: 12px;
}
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.assign-row.assign-row { display: flex; gap: 6px; align-items: center; margin: 8px 0; }
.assign-row select { flex: 1; border: 1px solid var(--line); border-radius: 4px; padding: 8px; font: inherit; font-size: 12px; }
.assign-row .buy { white-space: nowrap; }
.chip {
  border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 8px 12px;
  font-weight: 700; cursor: pointer;
}
.chip.on { background: var(--ink); color: var(--paper); }
.messages {
  min-height: 180px; max-height: 280px; overflow: auto; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px;
}
.msg { margin: 0 0 10px; font-size: 0.92rem; }
.msg b { display: block; font-size: 11px; text-transform: uppercase; color: var(--dim); }
.shop-grid { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.shop-grid li { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.swatch {
  height: 120px; border-radius: 8px; margin-bottom: 8px;
  display: grid; place-items: center;
  font-family: Anton, sans-serif; letter-spacing: 0.06em;
  color: #f6f4ef; font-size: 22px; text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.swatch.pic {
  height: auto; padding: 0; overflow: hidden; background: #14171c;
}
.swatch.pic img { width: 100%; height: auto; display: block; }
.sheet {
  position: fixed; inset: 0; background: rgba(20,23,28,0.72); display: grid; place-items: end center;
  z-index: 20;
}
.sheet[hidden] { display: none !important; }
.consent-sheet { z-index: 45; place-items: center; }
.consent-sheet .sheet-card { max-width: 420px; border-radius: 16px; }
.sheet-card { width: 100%; max-width: 480px; background: var(--paper); padding: 20px 16px 28px; border-radius: 16px 16px 0 0; }
#login-sheet .sheet-card { max-width: 420px; border-radius: 16px; max-height: 85vh; overflow: auto; }
#login-search, #login-code, #login-admin-search {
  width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 12px; font: inherit; font-weight: 500; color: var(--text); margin: 8px 0;
}
#login-results li[data-pick-login] { cursor: pointer; }
#login-results li[data-pick-login]:hover { background: var(--paper-dim); }
.btn { display: block; text-align: center; text-decoration: none; padding: 14px; border-radius: 6px; font-weight: 800; margin: 8px 0; border: 0; width: 100%; cursor: pointer; }
.btn.call { background: var(--sos); color: #fff; }
.btn.wifi { background: var(--wrist); color: #fff; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: 8px; z-index: 30;
}
/* Distinct from .toast — a new incident is meant to interrupt whatever tab
   someone's on, not just quietly note itself at the bottom of the screen. */
.incident-popup {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 40; background: var(--ink); color: var(--paper); border: 2px solid var(--sos);
  border-radius: 10px; padding: 14px 16px; max-width: 360px; width: calc(100% - 32px);
  max-height: 80vh; overflow: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); animation: pulse 1.2s ease 3;
}
.incident-popup h3 { margin: 0 0 4px; font-size: 1rem; color: #fff; }
.incident-popup .meta { color: rgba(246,244,239,.75); }
.incident-popup-steps { margin: 10px 0 0; padding-left: 18px; font-size: 13px; }
.incident-popup-steps li { margin-bottom: 6px; }
.incident-popup-steps a.btn, #incident-workflow a.btn {
  display: inline-flex; width: auto; padding: 8px 14px; margin: 2px 0 4px; font-size: 13px;
}
.incident-popup .actions { display: flex; gap: 8px; margin-top: 10px; }
.incident-checklist { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.incident-checklist li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.incident-checklist label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.incident-checklist input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.incident-checklist a.btn { display: inline-flex; width: auto; padding: 6px 12px; margin: 0; font-size: 12px; }
.incident-duration { font-weight: 700; }
/* Shared across the checklist, the incident pop-up and the SOS-sheet
   preview — anywhere a workflow step renders. */
li.step-done span { text-decoration: line-through; opacity: .6; }
.step-ongoing { opacity: .9; }
.step-ongoing .step-ongoing-icon { font-weight: 800; }
.step-ongoing small { display: block; opacity: .7; font-size: 11px; margin-left: 22px; }
.incident-escalated-badge {
  background: var(--sos); color: #fff; font-weight: 800; font-size: 12px;
  padding: 6px 10px; border-radius: 6px; margin: 6px 0; display: inline-block;
}
.flash { animation: pulse 1.2s ease infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(225,29,46,0.25); } }
@media (max-width: 520px) { .shop-grid { grid-template-columns: 1fr; } }
.stack-form {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; margin: 12px 0; display: grid; gap: 10px;
}
.stack-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--dim); }
.stack-form input {
  border: 1px solid var(--line); border-radius: 6px; padding: 12px; font: inherit; font-weight: 500; color: var(--text);
}
.stack-form button[type="submit"] {
  background: var(--signal); color: var(--ink); border: 0; font-weight: 800; padding: 12px 16px;
  border-radius: 4px; cursor: pointer; text-transform: uppercase; font-size: 12px;
}
.seat-full { opacity: 0.55; }
.built-by {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px 16px 36px; background: var(--ink);
}
.built-by p {
  margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246,244,239,0.55);
}
.built-by a { display: block; line-height: 0; }
.built-by img { width: 56px; height: 56px; display: block; }

.ask-bar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 10px; background: var(--paper-dim); border-bottom: 1px solid var(--line);
}
.ask-label {
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  text-transform: uppercase; color: var(--dim); margin-right: 4px;
}
.ask-bar button {
  border: 1px solid var(--line); background: #fff; border-radius: 99px;
  padding: 8px 12px; font-weight: 800; font-size: 12px; cursor: pointer;
  text-transform: uppercase;
}
.ask-tag {
  display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase;
  padding: 3px 7px; border-radius: 99px; margin-top: 4px; background: var(--ink); color: #fff;
}
.ask-tag.drink { background: #2f6f4e; }
.ask-tag.toilet { background: #1e6f8c; }
.ask-tag.snack { background: #c9450f; }
.ask-tag.assistant { background: #9a4cff; }
.ask-tag.offduty { background: #5b6270; }
.ask-tag.smoke { background: #6b4f2a; }
.ask-overdue { border-color: var(--sos) !important; }
.ask-hold { border-color: var(--wrist) !important; }
.ask-back { opacity: 0.55; }
.hours-ok { color: #2f6f4e; font-weight: 800; }
.hours-short { color: var(--sos); font-weight: 800; }
.slot-pick.on { background: var(--signal); color: var(--ink); }
.ops-side-title { padding: 12px 12px 0; font-size: 1rem; }
.festaff-ticket {
  position: relative; background: var(--ink); border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); margin: 8px 0 14px;
}
.festaff-ticket img { width: 100%; display: block; }
.ticket-caption {
  padding: 12px 16px 16px; background: var(--ink); color: var(--paper);
}
.ticket-issued {
  margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal);
}
.ticket-name {
  margin: 2px 0 0; font-family: Anton, sans-serif; font-size: clamp(1.4rem, 4vw, 2.2rem);
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--paper);
}
#ticket-form .chip-row { margin-top: 4px; }
#ticket-form select {
  border: 1px solid var(--line); border-radius: 6px; padding: 12px; font: inherit;
}

@media print {
  body * { visibility: hidden; }
  .ask-bar, .tabs, .top, .built-by, #sos-sheet, #toast, #incident-popup { display: none !important; }
  #ticket.panel, #ticket.panel * { visibility: visible; }
  #ticket.panel {
    display: block !important; position: absolute; inset: 0; max-width: none;
    padding: 0; background: #fff;
  }
  #ticket-form { display: none !important; }
  .festaff-ticket { border: 0; border-radius: 0; }
}

@media (min-width: 900px) {
  html, body { height: 100%; }
  body {
    display: flex; flex-direction: column; min-height: 100vh;
  }
  .phone-title, .phone-only { display: none; }
  .desk-title, .desk-only { display: block; }
  .desk-title { margin: 0; }
  .top { padding: 10px 16px; flex-shrink: 0; }
  .top h1 { font-size: 1.35rem; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; flex-shrink: 0; }
  .tabs button { flex: 0 0 auto; }
  main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  body:has(#map.panel.on) .built-by { display: none; }
  #map.panel.on {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: 1fr;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  #map .map-stage {
    grid-column: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  #map .map-toolbar {
    position: absolute; top: 12px; left: 12px; z-index: 8; margin: 0;
    background: rgba(246,244,239,0.92); padding: 8px; border-radius: 12px;
  }
  #map .map-wrap {
    flex: 1; height: 100%; margin: 0; border: 0; border-radius: 0;
  }
  #staff-list, .ops-side {
    grid-column: 2;
    overflow: auto;
    padding: 0;
    margin: 0;
    background: var(--paper-dim);
    border-left: 1px solid var(--line);
  }
  #staff-list { padding: 12px; border: 0; }
  body.is-fs .tabs { display: none; }
  body.is-fs .top { padding: 8px 16px; }
  body.is-fs #map.panel.on { grid-template-columns: 1fr 280px; }
}

/* Content pages grow naturally so the footer follows the entire section. */
@media (min-width: 900px) {
  body:not(:has(#map.panel.on)) { height: auto; }
  body:not(:has(#map.panel.on)) main { flex: 1 0 auto; min-height: auto; }
  body:not(:has(#map.panel.on)) .built-by { flex-shrink: 0; }
}
/* Sandy's translucent theatre entrance. */
#sandy-curtain { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:transparent; color:#fff; overflow:hidden; }
#sandy-curtain::backdrop { background:rgba(9,12,18,.35); backdrop-filter:blur(3px); }
.theatre-curtain { position:absolute; top:0; bottom:0; width:51%; background:repeating-linear-gradient(90deg,rgba(33,6,19,.9) 0%,rgba(125,27,49,.78) 7%,rgba(61,8,30,.88) 14%,rgba(166,43,61,.72) 19%,rgba(37,5,24,.9) 25%); box-shadow:inset 0 0 80px #0008,0 0 35px #0009; border-bottom:5px solid #c79a59; transition:transform 1.4s cubic-bezier(.65,0,.2,1); }
.curtain-left { left:0; border-right:2px solid #d5af7066; }
.curtain-right { right:0; border-left:2px solid #d5af7066; }
.theatre-valance { position:absolute; top:0; left:-5%; width:110%; height:65px; border-radius:0 0 50% 50%; border-bottom:3px solid #c79a59; background:linear-gradient(#390c20ee,#741b32ee); box-shadow:0 10px 25px #0007; }
.theatre-invitation { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 24px; text-align:center; text-shadow:0 2px 18px #000; transition:opacity .35s,transform .6s; }
.theatre-kicker { color:#f0ce98; text-transform:uppercase; letter-spacing:.18em; font-size:11px; }
#sandy-curtain h1 { font-size:clamp(42px,9vw,94px); line-height:1.05; color:#fff8ec; margin:20px 0 12px; }
.theatre-invitation > p:not(.theatre-kicker):not(.theatre-footnote) { font-size:clamp(18px,3vw,25px); max-width:440px; line-height:1.5; }
.theatre-enter { margin:24px 0; border:1px solid #efd0a0; border-radius:999px; padding:17px 45px; font:inherit; font-size:18px; font-weight:800; color:#341222; background:#f3d7a9; cursor:pointer; box-shadow:0 8px 40px #0005; }
.theatre-enter:focus-visible { outline:3px solid white; outline-offset:6px; }
.theatre-footnote { max-width:340px; color:#ecd6cd; font-size:12px; line-height:1.6; }
.curtains-opening .curtain-left { transform:translateX(-102%); }
.curtains-opening .curtain-right { transform:translateX(102%); }
.curtains-opening .theatre-invitation { opacity:0; transform:translateY(-15px); pointer-events:none; }
@media(prefers-reduced-motion:reduce) { .theatre-curtain,.theatre-invitation { transition:none; } }

/* Pitch polish: keep header buttons on one line, and keep the narrow
   control-room sidebar's cards inside its 300px column (they were being
   clipped on the right). Volunteer view has no sidebar, so the map takes
   the full width instead of leaving an empty grey column. */
.ghost-top, .view-toggle button { white-space: nowrap; }
.top-actions { flex-wrap: wrap; justify-content: flex-end; }
.ops-side { overflow-x: hidden; }
.ops-side .cards { grid-template-columns: minmax(0, 1fr); padding: 0 12px 12px; }
.ops-side .cards li { min-width: 0; overflow-wrap: anywhere; }
.ops-side .assign-row.assign-row { flex-wrap: wrap; }
.ops-side .assign-row select { min-width: 0; flex: 1 1 100%; }
.ops-side .cards li button { max-width: 100%; white-space: normal; }
@media (min-width: 900px) {
  body.view-applicant #map.panel.on { grid-template-columns: 1fr; }
}