/* ==========================================================================
   Event console — dense, dark, thumb-friendly for use beside the stage.
   --------------------------------------------------------------------------
   Same brand system as the guest page, but tuned for a different job: this is
   read at arm's length, in a dim hall, under time pressure. So the type is
   larger, the hit targets are bigger, and exactly one thing is lime — the
   button the operator presses all night. Everything else stays quiet.
   ========================================================================== */

.admin { background: var(--bg); }

/* ---------------------------------------------------------------- gate */

.gate {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: var(--pad); background: var(--teal-950);
}
.gate[hidden] { display: none; }
.gate__box {
  width: min(100%, 380px); display: grid; gap: 13px; justify-items: center; text-align: center;
  padding: 34px 28px; border-radius: var(--r-md);
  background: var(--teal-900); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-lg);
  color: #EDF3F1;
}
.gate__logo { height: 34px; width: auto; margin-bottom: 4px; }
.gate__box h1 {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: #fff;
}
.gate__box p { font-size: 12.5px; color: rgba(237, 243, 241, .6); line-height: 1.6; margin-bottom: 4px; }

.gate__box input, .announce input {
  width: 100%; padding: 13px 15px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; font: inherit; font-size: 15px;
}
.gate__box input::placeholder { color: rgba(237, 243, 241, .38); }
.gate__box input:focus, .announce input:focus {
  outline: none; border-color: var(--lime-500);
  box-shadow: 0 0 0 3px rgba(141, 196, 65, .18);
}
.gate__box .btn { width: 100%; }
.gate__err { font-size: 12.5px; color: #EE9A85; font-weight: 500; }
.gate__err[hidden] { display: none; }

/* ---------------------------------------------------------------- shell */

.console { width: min(100%, 780px); margin-inline: auto; padding: 0 var(--pad) 40px; }
.console[hidden] { display: none; }

.ahead {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 0 12px; margin-bottom: 14px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: linear-gradient(var(--bg) 74%, transparent);
}
.ahead__left { display: flex; align-items: center; gap: 12px; }
.ahead__logo { height: 24px; width: auto; }
html[data-theme="dark"] .ahead__logo,
html[data-theme="dark"] .gate__logo { filter: brightness(0) invert(1); opacity: .92; }
.ahead__left strong {
  display: block; font-family: var(--font-display);
  font-size: 15px; font-weight: 600; letter-spacing: -.005em;
}
.ahead__left small { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.ahead__right { display: flex; align-items: center; gap: 8px; }

.stat-chip, .conn-chip, .clock {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: var(--r-xs);
  font-size: 11.5px; font-weight: 500; letter-spacing: .03em;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}
.stat-chip .ic { font-size: 14px; opacity: .7; }
.stat-chip b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.clock {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.conn-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.conn-chip.is-on i { background: var(--lime-500); box-shadow: 0 0 0 3px rgba(141, 196, 65, .2); }
.conn-chip.is-off i { background: var(--live); }

/* ---------------------------------------------------------------- now */

/* The "what is on stage right now" slab — the one thing visible at a glance. */
.now {
  padding: 22px; border-radius: var(--r-md); margin-bottom: 14px;
  background: var(--teal-900);
  border: 1px solid rgba(255, 255, 255, .1); color: #EDF3F1;
  box-shadow: var(--shadow-md);
  transition: background .4s var(--ease), border-color .4s;
}
.now.is-live {
  background: linear-gradient(155deg, #4A1A12, #2A0D0A 65%, #1A0704);
  border-color: rgba(226, 102, 76, .42);
}
.now__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(237, 243, 241, .55);
}
.now__label i { width: 6px; height: 6px; border-radius: 50%; background: rgba(237, 243, 241, .35); flex: none; }
.now.is-live .now__label { color: #F0A492; }
.now.is-live .now__label i { background: var(--live); animation: ring 2s var(--ease) infinite; }
.now__title {
  margin-top: 11px; font-family: var(--font-display);
  font-size: clamp(20px, 5vw, 26px); font-weight: 600;
  letter-spacing: -.012em; line-height: 1.26; text-wrap: balance; color: #fff;
}
.now__meta {
  margin-top: 10px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12px; color: rgba(237, 243, 241, .58); font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.now__meta .dot { opacity: .35; }
.now__actions { margin-top: 20px; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .now__actions { grid-template-columns: 1fr 1fr; } }

.abtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 18px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  background: rgba(255, 255, 255, .09); color: #EDF3F1;
  border: 1px solid rgba(255, 255, 255, .16);
  transition: transform .18s var(--spring), background .2s, border-color .2s;
}
.abtn:active { transform: scale(.96); }
@media (hover: hover) { .abtn:hover { background: rgba(255, 255, 255, .15); } }
.abtn--home { background: rgba(255, 255, 255, .11); }

/* The single loudest control on the page — pressed on every programme item. */
.abtn--next {
  background: var(--lime-500); color: var(--teal-950);
  border-color: transparent; font-weight: 700;
  box-shadow: 0 2px 0 var(--lime-700);
}
@media (hover: hover) { .abtn--next:hover { background: var(--lime-400); } }
.abtn--sm {
  padding: 13px 18px; font-size: 13px; flex: none;
  background: var(--lime-500); color: var(--teal-950);
  border-color: transparent; font-weight: 600;
}
@media (hover: hover) { .abtn--sm:hover { background: var(--lime-400); } }
.abtn[disabled] { opacity: .35; pointer-events: none; }

/* ---------------------------------------------------------------- panels */

.panel {
  padding: 18px; border-radius: var(--r-sm); margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.panel__title {
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-2);
}

.plan { display: grid; gap: 10px; }
.planbtn {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 13px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  transition: transform .18s var(--spring), border-color .2s, background .2s;
}
.planbtn:active { transform: scale(.985); }
.planbtn__icon { font-size: 22px; line-height: 1; flex: none; }
.planbtn__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.planbtn__body b { font-size: 14px; font-weight: 600; color: var(--ink); }
.planbtn__body small { font-size: 11px; color: var(--muted); line-height: 1.45; }
.planbtn__state {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.planbtn.is-on { background: var(--lime-100); border-color: var(--lime-500); }
.planbtn.is-on .planbtn__state { color: var(--lime-700); }
/* Armed: one more tap replaces the running order on every guest device. */
.planbtn.is-armed { background: var(--live-soft); border-color: var(--live); }
.planbtn.is-armed .planbtn__state { color: var(--live); }

.plan__hint { margin-top: 10px; font-size: 11px; color: var(--muted); line-height: 1.5; }

.fx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fxbtn {
  padding: 15px 8px; border-radius: var(--r-sm); display: grid; gap: 5px; justify-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: transform .18s var(--spring), border-color .2s, background .2s;
}
.fxbtn:active { transform: scale(.94); }
@media (hover: hover) { .fxbtn:hover { border-color: var(--lime-500); background: var(--lime-100); } }
.fxbtn span {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; letter-spacing: .04em; color: var(--ink);
}
.fxbtn small { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.4; }

.announce { display: flex; gap: 10px; }
.announce input {
  flex: 1;
  background: var(--surface-2); border-color: var(--line); color: var(--ink);
}
.announce input::placeholder { color: var(--muted); }
.announce input:focus { border-color: var(--lime-600); box-shadow: 0 0 0 3px rgba(141, 196, 65, .16); }

/* Shows what guests currently see, so the only way back to a clean screen is
   visible while a notice is up — sending a new one is not always what is meant. */
.announce__live {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; font-size: 12.5px; color: var(--muted);
}
.announce__live[hidden] { display: none; }
.announce__live strong { color: var(--ink); font-weight: 600; }
.announce__live .abtn--quiet { margin-left: auto; }
/* Doubled class so it outranks .abtn--sm regardless of source order. */
.abtn.abtn--quiet {
  background: rgba(255, 255, 255, .09); color: #EDF3F1;
  border-color: rgba(255, 255, 255, .16); font-weight: 600;
}
@media (hover: hover) { .abtn.abtn--quiet:hover { background: rgba(255, 255, 255, .15); } }

.toggle {
  display: flex; align-items: center; gap: 11px; margin-top: 14px;
  font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.toggle input { width: 17px; height: 17px; accent-color: var(--lime-600); flex: none; }

/* ---------------------------------------------------------------- list */

.alist { display: grid; gap: 4px; }

.arow {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 12px 13px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent;
  transition: transform .16s var(--ease), background .2s, border-color .2s;
}
.arow:active { transform: scale(.985); }
@media (hover: hover) { .arow:hover { background: var(--surface-2); border-color: var(--line); } }
.arow.is-sel { border-color: var(--lime-500); background: var(--lime-100); }
.arow.is-live { background: var(--live-soft); border-color: rgba(192, 68, 44, .45); }
.arow.is-done { opacity: .42; }

.arow__time {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink); flex: none; width: 46px; line-height: 1.3;
}
.arow.is-live .arow__time { color: var(--live); }
.arow__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.arow__title {
  font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.arow__sub { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow__go {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--teal-600); font-size: 14px;
}
html[data-theme="dark"] .arow__go { color: var(--teal-300); }
.arow.is-live .arow__go { background: var(--live); border-color: var(--live); color: #fff; }

/* A 3px spine tells the operator the kind of item without reading it. */
.arow__kind {
  flex: none; width: 3px; align-self: stretch; border-radius: 2px;
  background: var(--line); min-height: 34px;
}
.arow[data-kind="ceremony"] .arow__kind { background: var(--lime-500); }
.arow[data-kind="speech"]   .arow__kind { background: var(--teal-600); }
.arow[data-kind="visit"]    .arow__kind { background: var(--teal-300); }
.arow[data-kind="media"]    .arow__kind { background: var(--teal-100); }
.arow[data-kind="prelude"]  .arow__kind { background: var(--line); }
.arow[data-kind="move"]     .arow__kind { background: transparent; }

/* ---------------------------------------------------------------- foot */

.afoot { margin-top: 26px; display: grid; gap: 11px; justify-items: center; text-align: center; }
.afoot p { font-size: 11px; color: var(--muted); line-height: 1.7; }
kbd {
  display: inline-block; padding: 2px 7px; margin: 0 2px; border-radius: var(--r-xs);
  background: var(--surface); border: 1px solid var(--line);
  font: inherit; font-size: 10.5px; font-weight: 600; color: var(--ink-2);
}
.linkbtn {
  font-size: 11.5px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
@media (hover: hover) { .linkbtn:hover { color: var(--ink); } }

.toast--undo { cursor: pointer; }
.toast--undo .toast__dot { background: var(--lime-500); }
.toast--undo .toast__k { color: var(--lime-400); }

/* The console has a sticky header carrying viewers / connection / clock —
   the operator watches those all night, so toasts drop below it instead of
   covering them (the guest page has no such header, hence the override here). */
.admin .toasts { top: calc(74px + env(safe-area-inset-top)); }