/* ==========================================================================
   Goose Challenge — Command Center
   Vanilla CSS. No framework, no build step, no external CSS besides the
   Google Fonts stylesheet (which degrades to system fonts when offline).

   The UI is deliberately dark-only ("command center"), so the palette below
   is the single source of truth. Every colour used anywhere in this file is
   a token — no ad-hoc hex values in component rules.
   ========================================================================== */

:root {
  /* ---- Palette (authoritative design system) --------------------------- */
  --bg: #0f172a;
  --surface: #1b2336;
  --surface-2: #111a2e;
  --primary: #1e293b;
  --secondary: #334155;
  --fg: #f8fafc;
  --muted: #94a3b8;
  --border: #475569;
  --border-strong: #64748b; /* 3.64:1 on --surface-2 — form-field boundaries (WCAG 1.4.11) */
  --border-soft: #273049;
  --online: #22c55e;
  --danger: #ef4444;
  --info: #60a5fa;
  --goose: #f5a524;   /* warm amber: the primary "Activate Goose" action */
  --on-goose: #1a1206;
  --on-danger: #1a0606; /* near-black text on --danger fill: 5.20:1 (6.12:1 on hover) */
  --ring: #93c5fd;

  /* ---- Derived tokens --------------------------------------------------
     --danger is a great FILL colour but only reaches ~4.2:1 as text on
     --surface, so text-on-surface uses the lighter --danger-fg (8.2:1).
     Same idea for the green: --online-fg is used where green needs to read
     as text. Tint tokens are translucent so they compose over any surface. */
  --danger-fg: #fca5a5;
  --online-fg: #4ade80;
  --goose-tint: rgba(245, 165, 36, 0.13);
  --goose-tint-strong: rgba(245, 165, 36, 0.22);
  --online-tint: rgba(34, 197, 94, 0.14);
  --danger-tint: rgba(239, 68, 68, 0.14);
  --info-tint: rgba(96, 165, 250, 0.14);
  --muted-tint: rgba(148, 163, 184, 0.12);

  /* ---- Type ------------------------------------------------------------ */
  --font-sans: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Rhythm: 8px base, dense dashboard ------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --radius-card: 14px;
  --radius-btn: 10px;
  --radius-chip: 999px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45);

  --topbar-h: 60px;

  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* `hidden` is toggled from JS on components that set their own `display`
   (pills, menus, banners), so it has to win over those rules. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  /* Subtle amber/blue wash — purely decorative, fixed so it never scrolls. */
  background-image:
    radial-gradient(1100px 460px at 82% -12%, rgba(245, 165, 36, 0.07), transparent 62%),
    radial-gradient(900px 420px at 4% 0%, rgba(96, 165, 250, 0.07), transparent 60%);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  /* Never allow a sideways scrollbar, even at 320px. */
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
}

p {
  margin: 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 1px 5px;
}

/* All numbers, timers and UUIDs line up in columns. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.icon {
  flex: none;
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard users get a clearly visible ring everywhere. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -60px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--goose);
  color: var(--on-goose);
  font-weight: 600;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: top 120ms ease;
}

.skip-link:focus {
  top: var(--sp-3);
}

#main:focus {
  outline: none;
}

/* ==========================================================================
   Top bar
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.topbar__inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--topbar-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-right: auto;
  min-width: 0;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 11px;
}

.brand__text {
  min-width: 0;
}

.brand__title {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand__subtitle {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.topbar__status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* --- live connection indicator: colour + shape + text ------------------- */
.conn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-3);
  border-radius: var(--radius-chip);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
}

.conn__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--muted);
}

.conn[data-state='live'] .conn__dot {
  background: var(--online);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: pulse 2.4s ease-out infinite;
}

.conn[data-state='live'] .conn__label {
  color: var(--fg);
}

/* Hollow dot for stale, so state is legible without colour vision. */
.conn[data-state='stale'] .conn__dot {
  background: transparent;
  border: 2px solid var(--goose);
}

.conn[data-state='stale'] .conn__label {
  color: var(--goose);
}

.conn[data-state='error'] .conn__dot {
  background: transparent;
  border: 2px solid var(--danger-fg);
}

.conn[data-state='error'] .conn__label {
  color: var(--danger-fg);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.topbar__count {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.8125rem;
  color: var(--muted);
  padding: 5px var(--sp-3);
  border-radius: var(--radius-chip);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  white-space: nowrap;
}

.topbar__count .mono {
  color: var(--fg);
  font-weight: 600;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 9px var(--sp-4);
  min-height: 38px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  cursor: pointer;
  background: var(--primary);
  color: var(--fg);
  transition: background-color 120ms ease, border-color 120ms ease, transform 90ms ease;
}

.btn:hover:not(:disabled) {
  background: var(--secondary);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--sm {
  min-height: 32px;
  padding: 5px var(--sp-3);
  font-size: 0.8125rem;
  font-weight: 500;
}

.btn--block {
  width: 100%;
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--fg);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--secondary);
}

/* THE primary action. Amber fill, near-black text (9:1 contrast). */
.btn--goose {
  background: var(--goose);
  color: var(--on-goose);
  border-color: var(--goose);
}

.btn--goose:hover:not(:disabled) {
  background: #ffb63f;
  border-color: #ffb63f;
}

/* "Activate loud": same amber family, distinct from the plain Activate so the two
   launch buttons are tellable at a glance — speaker glyph sits next to the label. */
.btn--loud {
  background: var(--goose-tint, rgba(245, 165, 36, 0.14));
  color: var(--goose);
  border-color: var(--goose);
}

.btn--loud:hover:not(:disabled) {
  background: rgba(245, 165, 36, 0.28);
}

/* "Disarm": amber outline, amber text (7.7:1 on surface). */
.btn--goose-outline {
  background: transparent;
  color: var(--goose);
  border-color: var(--goose);
}

.btn--goose-outline:hover:not(:disabled) {
  background: var(--goose-tint);
}

.btn--danger {
  background: var(--danger);
  color: var(--on-danger);
  border-color: var(--danger);
}

.btn--danger:hover:not(:disabled) {
  background: #f56565;
  border-color: #f56565;
}

.btn--danger-text {
  color: var(--danger-fg);
  border-color: transparent;
}

.btn--danger-text:hover:not(:disabled) {
  background: var(--danger-tint);
  border-color: transparent;
}

/* Icon-only buttons — always carry an .sr-only accessible name. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.icon-btn:hover {
  background: var(--primary);
  color: var(--fg);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.main {
  max-width: 1560px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.section-title {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   KPI stat tiles
   ========================================================================== */

.kpis {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(148px, 100%), 1fr));
  gap: var(--sp-2);
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: var(--sp-3) var(--sp-4);
  min-width: 0;
}

.stat--goose {
  border-color: var(--goose-tint-strong);
  background: linear-gradient(180deg, var(--goose-tint), transparent 70%), var(--surface);
}

.stat__label {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat__value {
  margin: 2px 0 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.stat__value--online { color: var(--online-fg); }
.stat__value--goose  { color: var(--goose); }
.stat__value--danger { color: var(--danger-fg); }

/* ==========================================================================
   Devices section
   ========================================================================== */

.devices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.devices__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
}

.devices__hint {
  font-size: 0.8125rem;
  color: var(--muted);
}

.banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-card);
  font-size: 0.875rem;
}

.banner--error {
  background: var(--danger-tint);
  border: 1px solid var(--danger);
  color: var(--danger-fg);
}

/* Responsive grid: 1 col < 640px, 2 < 1024px, 3 above, 4 on very wide. */
.device-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}

@media (min-width: 640px) {
  .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .device-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1600px) {
  .device-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   Device card
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: border-color 150ms ease;
}

/* A loose goose gets an amber edge — plus the GOOSE LOOSE pill, so the
   state is never signalled by colour alone. */
.card[data-goose='1'] {
  border-color: var(--goose-tint-strong);
  background: linear-gradient(180deg, var(--goose-tint), transparent 45%), var(--surface);
}

.card[data-busy='1'] {
  opacity: 0.75;
}

.card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.card__title-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
  flex: 1 1 auto;
}

.card__name {
  font-size: 1rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Keep the pencil discoverable on touch, subtle on desktop until hover. */
.card__title-wrap .icon-btn {
  opacity: 0.65;
}

.card:hover .icon-btn,
.card .icon-btn:focus-visible {
  opacity: 1;
}

.rename {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.rename__hint {
  font-size: 0.6875rem;
  color: var(--muted);
}

.input {
  width: 100%;
  min-width: 0;
  padding: 7px var(--sp-3);
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
}

.input--inline {
  padding: 4px var(--sp-2);
  font-weight: 600;
}

.input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
  border-color: var(--ring);
}

/* --- kebab menu --------------------------------------------------------- */
.menu-wrap {
  position: relative;
  flex: none;
}

.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 180px;
  padding: var(--sp-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.menu__item:hover {
  background: var(--primary);
}

.menu__item--danger {
  color: var(--danger-fg);
}

.menu__item--danger:hover {
  background: var(--danger-tint);
}

/* --- meta line ---------------------------------------------------------- */
.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 0;
}

.card__host {
  overflow-wrap: anywhere;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-chip);
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
}

.copy-btn:hover {
  color: var(--fg);
  border-color: var(--border);
}

/* --- status pills ------------------------------------------------------- */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--border-soft);
  background: var(--muted-tint);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  /* Offline = hollow ring, online = solid fill: a shape difference, not
     just a colour difference. */
  border: 2px solid currentColor;
  background: transparent;
}

.pill--online {
  color: var(--online-fg);
  background: var(--online-tint);
  border-color: rgba(34, 197, 94, 0.35);
}

.pill--online .pill__dot {
  background: currentColor;
}

.pill--goose {
  color: var(--goose);
  /* Neutral fill (not amber-on-amber): the pill only ever renders over the
     amber card gradient, so a translucent amber tint drops below 4.5:1.
     --surface-2 gives the amber text 8.5:1 regardless of the card wash. */
  background: var(--surface-2);
  border-color: rgba(245, 165, 36, 0.45);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pill--armed {
  color: var(--goose);
  background: transparent;
  border: 1px dashed var(--goose);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* --- stat chips --------------------------------------------------------- */
.chips {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 84px;
  min-width: 0;
  padding: 6px var(--sp-3);
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}

.chip__label {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip__value {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.chip--danger .chip__value {
  color: var(--danger-fg);
}

/* --- actions ------------------------------------------------------------ */
.card__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

/* Two side-by-side actions: Activate (launch) and Deactivate (close). */
.card__actions-row {
  display: flex;
  gap: 8px;
}

.card__actions-row .btn {
  flex: 1 1 0;
  min-width: 0;
}

/* "Deactivate Goose": a restrained danger-outline (closes the running goose). */
.btn--close {
  background: transparent;
  color: var(--danger-fg);
  border-color: var(--border-strong, #64748b);
}

.btn--close:hover:not(:disabled) {
  background: var(--danger-tint);
  border-color: var(--danger-fg);
}

/* The action armed for the next check-in stands out. Activate keeps its amber fill
   plus an inner ring; Deactivate flips from outline to a solid red. */
.btn--goose.is-armed {
  box-shadow: inset 0 0 0 2px var(--on-goose);
}

.btn--loud.is-armed {
  background: var(--goose);
  color: var(--on-goose);
  box-shadow: inset 0 0 0 2px var(--on-goose);
}

.btn--close.is-armed {
  background: var(--danger);
  color: var(--on-danger);
  border-color: var(--danger);
}

.btn--close.is-armed:hover:not(:disabled) {
  background: #f56565;
}

.card__hint {
  font-size: 0.75rem;
  color: var(--goose);
  text-align: center;
}

/* --- events disclosure -------------------------------------------------- */
.events {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--sp-2);
}

.events__summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--muted);
  padding: 2px 0;
  border-radius: 6px;
}

.events__summary::-webkit-details-marker {
  display: none;
}

.events__summary:hover {
  color: var(--fg);
}

.events__chevron {
  transition: transform 140ms ease;
}

.events[open] .events__chevron {
  transform: rotate(90deg);
}

.events__body {
  margin-top: var(--sp-2);
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.events__status {
  font-size: 0.8125rem;
  color: var(--muted);
  padding: var(--sp-2) 0;
}

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.event {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: baseline;
  padding: 4px var(--sp-2);
  border-radius: 7px;
  font-size: 0.75rem;
}

.event:nth-child(odd) {
  background: var(--surface-2);
}

.event__time {
  color: var(--muted);
  white-space: nowrap;
}

.event__type {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.event__detail {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.event--good  .event__type { color: var(--online-fg); }
.event--goose .event__type { color: var(--goose); }
.event--bad   .event__type { color: var(--danger-fg); }
.event--info  .event__type { color: var(--info); }
.event--quiet .event__type { color: var(--muted); font-weight: 500; }

/* ==========================================================================
   Empty / loading state
   ========================================================================== */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
}

.empty__mark {
  color: var(--secondary);
}

.empty__title {
  font-size: 1.0625rem;
}

.empty__body {
  max-width: 52ch;
  color: var(--muted);
  font-size: 0.875rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer__meta {
  white-space: nowrap;
  opacity: 0.85;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
  font-size: 0.75rem;
  color: var(--muted);
}

/* ==========================================================================
   Toasts
   ========================================================================== */

.toasts {
  position: fixed;
  left: 50%;
  bottom: var(--sp-4);
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(420px, calc(100vw - 2 * var(--sp-4)));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-btn);
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  font-size: 0.875rem;
  pointer-events: auto;
  animation: toast-in 160ms ease-out;
}

.toast__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.toast__close {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
}

.toast__close:hover {
  color: var(--fg);
}

.toast--success { border-color: rgba(34, 197, 94, 0.55); }
.toast--success .toast__mark { color: var(--online-fg); }
.toast--error   { border-color: rgba(239, 68, 68, 0.6); }
.toast--error .toast__mark { color: var(--danger-fg); }
.toast--goose   { border-color: rgba(245, 165, 36, 0.6); }
.toast--goose .toast__mark { color: var(--goose); }
.toast--info .toast__mark { color: var(--info); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Dialogs (native <dialog>: focus trap + Esc for free)
   ========================================================================== */

.dialog {
  width: min(460px, calc(100vw - 2 * var(--sp-4)));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-pop);
}

.dialog::backdrop {
  background: rgba(2, 6, 18, 0.66);
}

.dialog__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  margin: 0;
}

.dialog__title {
  font-size: 1.0625rem;
}

.dialog__body {
  font-size: 0.875rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.dialog__spacer {
  flex: 1 1 auto;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.field__label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ==========================================================================
   Motion & narrow-screen tuning
   ========================================================================== */

@media (max-width: 480px) {
  .topbar__count-label { display: none; }
  .main { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .stat__value { font-size: 1.3125rem; }
  .event { grid-template-columns: 74px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}