:root {
  --bg: #060a11;
  --bg-deep: #0a1018;
  --bg-alt: #121a26;
  --panel: rgba(15, 22, 34, 0.86);
  --panel-strong: rgba(13, 20, 31, 0.96);
  --panel-soft: rgba(123, 177, 255, 0.07);
  --panel-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  --line: rgba(173, 196, 228, 0.11);
  --line-strong: rgba(173, 196, 228, 0.2);
  --text: #edf2fa;
  --muted: #8f9fb7;
  --muted-strong: #c5d0df;
  --accent: #8db6ff;
  --accent-strong: #dbe7ff;
  --good: #53adff;
  --good-glow: rgba(83, 173, 255, 0.34);
  --fair: #e2ab45;
  --fair-glow: rgba(226, 171, 69, 0.3);
  --poor: #d87adf;
  --poor-glow: rgba(216, 122, 223, 0.3);
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.34);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --font-sans: "Geist", "Avenir Next", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "SF Mono", ui-monospace, monospace;
  --ring-color: var(--accent-strong);
  color: var(--text);
  font-family: var(--font-sans);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(141, 182, 255, 0.14), transparent 26%),
    radial-gradient(circle at 100% 12%, rgba(255, 190, 92, 0.08), transparent 20%),
    linear-gradient(180deg, #070b12 0%, #0a0f17 52%, #070b12 100%);
  color: var(--text);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 100%);
}

body::after {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 24%),
    radial-gradient(circle at 80% 35%, rgba(255, 255, 255, 0.05), transparent 18%),
    radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.06), transparent 20%);
  opacity: 0.3;
  filter: blur(90px);
}

a {
  color: inherit;
}

a,
button,
input,
label,
.dock-nav__item,
.panel-lens,
:root {
  --step-ink: #4ade80;
  --step-fill: rgba(45, 212, 191, 0.14);
  --step-ring: rgba(74, 222, 128, 0.42);
}

.ghost-button,
.primary-button {
  min-height: 44px;
}

:focus-visible {
  outline: 2px solid rgba(194, 245, 255, 0.88);
  outline-offset: 2px;
}

code {
  padding: 0.2rem 0.38rem;
  border: 1px solid rgba(194, 245, 255, 0.12);
  border-radius: 0.55rem;
  background: rgba(194, 245, 255, 0.06);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.hidden {
  display: none !important;
}

.screen-glow {
  position: fixed;
  inset: auto 6% 8% auto;
  width: min(34vw, 480px);
  height: min(34vw, 480px);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(141, 182, 255, 0.18), transparent 72%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  animation: drift 18s ease-in-out infinite;
}

.noc-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  /* was min(1480px, ...), which left a wide monitor showing the whole app in a
     centred column roughly half the screen wide */
  width: min(1860px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 24px 0 52px;
}

.command-dock,
.toolbar,
.hero-panel,
.glance-card,
.panel,
.detail-drawer {
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
}

.command-dock::before,
.toolbar::before,
.hero-panel::before,
.glance-card::before,
.panel::before,
.detail-drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.045);
  background: var(--panel-overlay);
  pointer-events: none;
}

.command-dock {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1.3fr) minmax(240px, 0.9fr);
  gap: 18px 22px;
  align-items: start;
  padding: 24px 24px 20px;
  border-radius: var(--radius-xl);
  position: relative;
  top: auto;
  min-height: auto;
}

.hero-band {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.92fr) minmax(180px, 0.4fr);
  gap: 16px;
  align-items: stretch;
}

.hero-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
  min-height: 100%;
  padding: 26px 26px 22px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.intro-panel {
  align-content: space-between;
  background:
    radial-gradient(circle at top left, rgba(141, 182, 255, 0.18), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(103, 244, 161, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(18, 28, 42, 0.96), rgba(9, 14, 22, 0.96));
}

.intro-panel::after {
  content: "";
  position: absolute;
  inset: auto -14% -32% 26%;
  height: 220px;
  background: radial-gradient(circle, rgba(103, 244, 161, 0.12), transparent 72%);
  filter: blur(22px);
  pointer-events: none;
}

.summary-panel {
  grid-template-rows: auto auto 1fr;
  background:
    radial-gradient(circle at top right, rgba(255, 190, 92, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(18, 24, 36, 0.96), rgba(9, 14, 22, 0.98));
}

.dock-brand,
.toolbar,
.panel-header,
.receipt-head,
.history-item,
.observer-pill,
.drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.dock-brand {
  align-items: flex-start;
  gap: 14px;
  padding-right: 8px;
  /* the utility controls must be able to drop to their own line rather than
     crushing the title to one word per row on a phone */
  flex-wrap: wrap;
}

.brand-orb {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(194, 245, 255, 0.16);
  background:
    linear-gradient(145deg, rgba(141, 182, 255, 0.2), rgba(255, 190, 92, 0.08)),
    rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 30px rgba(141, 182, 255, 0.12);
  overflow: hidden;
}

.brand-orb img {
  position: relative;
  z-index: 1;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
  border-radius: 12px;
}

.brand-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(194, 245, 255, 0.18), transparent 72%);
  animation: pulse 2.8s ease-in-out infinite;
  pointer-events: none;
}

.brand-copy,
.dock-note,
.dock-meta__item,
.panel-header > div,
.observer-main,
.receipt-head > div,
.drawer-head > div {
  min-width: 0;
}

.eyebrow,
.panel-label,
.meta-label,
.small-note,
.landing-eyebrow,
.landing-status,
.landing-module__label {
  margin: 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--muted);
}

.brand-copy h1,
.panel h2,
.panel h3,
.detail-drawer h2 {
  margin: 0;
  line-height: 1;
  letter-spacing: -0.03em;
}

.brand-copy h1 {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  text-wrap: balance;
}

.dock-lede,
.session-share-invite {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.session-share-invite__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.session-share-invite__copy .session-share-note {
  margin-top: 6px;
}

.session-share-invite__text {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.6;
}

.session-share-invite .control-button {
  flex: 0 0 auto;
}

.session-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

.session-steps__list {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.session-steps__list {
  counter-reset: session-step;
}

/* The numbers used to live in the sentence as "Step 1." text. A counter draws
   them instead, so the copy carries no numbering to keep in sync and the marker
   can be a real disc the eye can land on. */
.session-step {
  position: relative;
  padding-left: 2.35rem;
  counter-increment: session-step;
  color: var(--muted-strong);
  line-height: 1.6;
}

.session-step::before {
  content: counter(session-step);
  position: absolute;
  top: 0.1rem;
  left: 0;
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--step-ring);
  border-radius: 999px;
  background: var(--step-fill);
  color: var(--step-ink);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
}

.session-step strong {
  color: var(--text);
  font-weight: 600;
}

/* The QR keeps a white plate in both themes because a scanner needs the quiet
   zone and module contrast the spec asks for - inverting it for dark mode is a
   good way to make a code that will not read. */
.channel-qr {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  text-decoration: none;
}

.channel-qr img {
  display: block;
  width: 84px;
  height: 84px;
}

.channel-qr[hidden] {
  display: none;
}

.session-instructions,
.receipt-meta,
.history-item p,
.drawer-body p,
.landing-copy,
.landing-module p {
  color: var(--muted-strong);
  line-height: 1.6;
}

.dock-lede {
  margin: 0;
  max-width: 54ch;
  font-size: 0.95rem;
}

.dock-lede strong {
  display: inline;
  color: var(--accent-strong);
  font-family: var(--font-mono);
}

/* The hidden attribute alone loses to the display declaration above, the same
   way it does on #install-app-button, so spell the hidden case out. */
.dock-lede strong[hidden] {
  display: none;
}

.dock-meta,
.glance-grid,
.command-grid,
.dashboard-grid,
.score-grid,
.session-meta,
.observer-badges,
.history-list,
.receipts,
.session-code-actions,
.control-utility-actions,
.drawer-body,
.drawer-stat-grid {
  display: grid;
  gap: 14px;
}

.dock-note strong,
.dock-meta__item strong {
  color: var(--text);
  font-size: 0.92rem;
}

.pill,
.ghost-button,
.primary-button,
.panel-lens {
  appearance: none;
  border-radius: 999px;
  font: inherit;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  padding: 0.72rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted-strong);
  font-size: 0.82rem;
}

.status-pill::before {
  content: "";
  width: 0.66rem;
  height: 0.66rem;
  border-radius: 50%;
  background: var(--poor);
  box-shadow: 0 0 18px var(--poor-glow);
  animation: pulse 2.4s ease-in-out infinite;
}

.status-pill.online::before {
  background: var(--good);
  box-shadow: 0 0 22px var(--good-glow);
}

body[data-page-mode="share"] .status-pill::before {
  background: var(--accent);
  box-shadow: 0 0 22px rgba(123, 214, 255, 0.24);
}

.dock-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  justify-self: stretch;
  align-self: end;
}

.dock-meta__item {
  min-width: 154px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.025);
}

.workspace {
  display: grid;
  gap: 16px;
  align-content: start;
  position: relative;
  isolation: isolate;
}

.workspace > * {
  position: relative;
  z-index: 1;
}

.splash-scene {
  position: absolute;
  inset: -72px -56px auto;
  height: 920px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.splash-scene__mesh,
.splash-scene__beam,
.splash-scene__grid,
.splash-scene__ring,
.splash-scene__badge {
  position: absolute;
}

.splash-scene__mesh {
  inset: 44px 6% auto 4%;
  height: 510px;
  border-radius: 44px;
  background:
    radial-gradient(circle at 14% 24%, rgba(111, 140, 255, 0.34), transparent 24%),
    radial-gradient(circle at 78% 18%, rgba(94, 217, 255, 0.18), transparent 22%),
    radial-gradient(circle at 64% 72%, rgba(103, 244, 161, 0.18), transparent 18%),
    linear-gradient(135deg, rgba(11, 17, 28, 0.14), rgba(11, 17, 28, 0));
  filter: blur(12px);
  opacity: 0.95;
  animation: drift 22s ease-in-out infinite;
}

.splash-scene__beam {
  top: 92px;
  right: -88px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 140, 255, 0.18), transparent 68%);
  filter: blur(14px);
}

.splash-scene__grid {
  inset: 82px 8% auto;
  height: 460px;
  border: 1px solid rgba(173, 196, 228, 0.08);
  border-radius: 36px;
  background:
    linear-gradient(rgba(173, 196, 228, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173, 196, 228, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(141, 182, 255, 0.12), transparent 56%);
  background-size: 88px 88px, 88px 88px, 100% 100%;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94), transparent 100%);
  opacity: 0.56;
}

.splash-scene__ring {
  border-radius: 50%;
  border: 1px solid rgba(173, 196, 228, 0.12);
  background: radial-gradient(circle, rgba(141, 182, 255, 0.05), transparent 70%);
}

.splash-scene__ring--left {
  top: 152px;
  left: -54px;
  width: 244px;
  height: 244px;
}

.splash-scene__ring--right {
  top: 36px;
  right: 8%;
  width: 188px;
  height: 188px;
}

.splash-scene__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 0.96rem;
  border: 1px solid rgba(173, 196, 228, 0.12);
  border-radius: 999px;
  background: rgba(9, 14, 22, 0.58);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
  color: var(--muted-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.splash-scene__badge::before {
  content: "";
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(141, 182, 255, 0.38);
}

.splash-scene__badge--one {
  top: 118px;
  right: 11%;
}

.splash-scene__badge--two {
  top: 412px;
  left: 9%;
}

.toolbar {
  align-items: center;
  padding: 20px 24px;
  border-radius: var(--radius-xl);
  background: rgba(15, 22, 34, 0.7);
}

.toolbar-actions,
.panel-actions,
.hero-actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.control-button,
.ghost-button,
.primary-button,
.panel-lens {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.panel-lens {
  padding: 0.74rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted-strong);
  text-decoration: none;
}

/* Every control wears the same coat. The quieter ghost treatment read as
   decoration next to New Code, so the visible one won. */
.primary-button,
.ghost-button {
  padding: 0.82rem 1.08rem;
  border: 1px solid rgba(141, 182, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(141, 182, 255, 0.2), rgba(141, 182, 255, 0.08)),
    rgba(255, 255, 255, 0.05);
  color: var(--accent-strong);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(4, 10, 18, 0.24);
}

.panel-lens {
  padding: 0.5rem 0.85rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.ghost-button:hover,
.primary-button:hover,
.panel-lens:hover,
.ghost-button:focus-visible,
.primary-button:focus-visible,
.panel-lens:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.panel-lens:hover,
.panel-lens:focus-visible {
  border-color: rgba(141, 182, 255, 0.14);
  background: rgba(141, 182, 255, 0.06);
  color: var(--text);
}

.primary-button:hover,
.primary-button:focus-visible,
.ghost-button:hover,
.ghost-button:focus-visible {
  border-color: rgba(141, 182, 255, 0.24);
  box-shadow: 0 14px 30px rgba(4, 10, 18, 0.3);
}

.ghost-button:disabled,
.primary-button:disabled,
.panel-lens:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.glance-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.glance-card {
  min-width: 0;
  padding: 18px 18px 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(16, 24, 36, 0.78);
}

.glance-card:hover,
.panel:hover {
  border-color: rgba(123, 214, 255, 0.18);
}

.glance-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.glance-card__value {
  display: block;
  margin-top: 18px;
  font-size: clamp(1.75rem, 2.7vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text);
}

.sparkline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: 6px;
  min-height: 42px;
  padding: 10px 0 0;
}

.sparkline-bar {
  min-height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(141, 182, 255, 0.7), rgba(141, 182, 255, 0.12));
  box-shadow: none;
  opacity: 0.7;
  transform-origin: bottom;
  animation: rise 420ms ease both;
}

.sparkline[data-tone="good"] .sparkline-bar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--good) 92%, white 8%), color-mix(in srgb, var(--good) 18%, transparent));
}

.sparkline[data-tone="warning"] .sparkline-bar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--fair) 92%, white 8%), color-mix(in srgb, var(--fair) 18%, transparent));
}

.sparkline[data-tone="critical"] .sparkline-bar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--poor) 92%, white 8%), color-mix(in srgb, var(--poor) 18%, transparent));
}

.sparkline[data-tone="neutral"] .sparkline-bar {
  background: linear-gradient(180deg, rgba(197, 208, 223, 0.42), rgba(197, 208, 223, 0.08));
}

.command-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.dashboard-grid {
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
  grid-template-areas:
    "score map"
    "observers map"
    "reports history";
  gap: 16px;
  align-items: start;
}

.panel {
  min-width: 0;
  padding: 20px;
  border-radius: var(--radius-xl);
  background: rgba(15, 22, 34, 0.84);
}

.command-panel {
  background:
    radial-gradient(circle at top right, rgba(141, 182, 255, 0.12), transparent 22%),
    linear-gradient(135deg, rgba(141, 182, 255, 0.08), rgba(255, 190, 92, 0.04)),
    rgba(12, 19, 29, 0.94);
}

.hero-score-panel {
  grid-area: score;
  background:
    radial-gradient(circle at top left, rgba(103, 244, 161, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(17, 24, 35, 0.95), rgba(10, 15, 24, 0.98));
}

.spotlight-panel {
  grid-area: map;
  background:
    radial-gradient(circle at top left, rgba(141, 182, 255, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(14, 21, 33, 0.96), rgba(9, 14, 22, 0.98));
}

.observer-panel {
  grid-area: observers;
  display: grid;
  align-content: start;
  gap: 16px;
}

.observer-panel .panel-header.slim {
  align-items: flex-start;
  row-gap: 10px;
}

.observer-panel .panel-actions {
  justify-content: flex-start;
}

.observer-panel .panel-header > div {
  display: grid;
  gap: 6px;
}

.observer-panel .allowlist-note,
.observer-panel #expected-source {
  margin: -2px 0 0;
}

.observer-panel .observer-badges {
  margin-top: 2px;
}

.reports-panel {
  grid-area: reports;
}

.history-panel {
  grid-area: history;
}

.workspace > * {
  min-width: 0;
}

.panel-header {
  align-items: flex-start;
  flex-wrap: wrap;
}

.panel-header.slim {
  align-items: center;
}

.panel-divider {
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(90deg, transparent, rgba(194, 245, 255, 0.22), transparent);
}

.observer-panel .panel-divider {
  margin: 6px 0 2px;
}

.session-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  margin-top: 18px;
}

.session-code-block {
  min-width: 0;
}

.session-code {
  margin-top: 10px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(141, 182, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(141, 182, 255, 0.14), rgba(141, 182, 255, 0.04)),
    rgba(255, 255, 255, 0.03);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Stacked and pinned right so they read as the same kind of control pair as the
   utility stack in the header, rather than a three-across button row. */
.session-code-actions {
  grid-template-columns: auto;
  justify-content: end;
  align-content: start;
  gap: 10px;
}

.session-code-actions .control-button {
  width: 100%;
  white-space: nowrap;
}

.control-utility-actions {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* In the brand row these are controls, not a metric block: they sit hard right
   and size to their own text instead of stretching to a 160px column grid. */
/* The brand row is a grid, not a flex row, for one reason: the lede has to
   start at the orb's left edge (spanning columns 1-2) while the utility stack
   stays in the top row on the right. A flex row can only put the lede either
   inside the copy column - indented past the orb - or on a line below the
   buttons. Explicit placement gives both. */
.hero-stage__lead .dock-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 14px;
  row-gap: 0;
}

.hero-stage__lead .dock-brand > .brand-orb {
  grid-area: 1 / 1;
}

.hero-stage__lead .dock-brand > .brand-copy {
  grid-area: 1 / 2;
}

.hero-stage__lead .dock-brand > .dock-lede {
  grid-column: 1 / 3;
  grid-row: 2;
}

.hero-stage__lead .dock-brand > .control-utility-actions {
  grid-area: 1 / 3 / span 2 / auto;
}

.dock-brand .control-utility-actions {
  /* A compact stack pinned to the right edge and centred against the copy.
     Stacking rather than sitting in a row is what keeps them narrow enough for
     the headline to hold one line, and being a side column rather than a row of
     its own is what stops them pushing the header down. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  order: 0;
  flex: 0 0 auto;
  width: auto;
  max-width: 172px;
  margin-left: auto;
  align-self: flex-start;
}

/* deliberately hidden: the PWA install prompt is not worth a slot in the
   header, and the install plumbing in app.js still expects the node to exist */
#install-app-button {
  display: none;
}

.dock-brand .control-utility-actions .control-button,
.dock-brand .control-utility-actions a.control-button {
  width: 100%;
  white-space: nowrap;
  /* smaller than a primary action: these are utilities beside the headline */
  padding: 5px 12px;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  border-radius: 999px;
}

.copy-button {
  min-width: 96px;
}

.session-share-note {
  margin: 0;
}

.session-instructions,
#message-preview,
#sender-name,
#channel-name,
#broker-name,
#session-status,
#session-hash {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.session-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2px;
}

.score-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 16px;
}

.score-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04), transparent 68%);
  font-family: var(--font-mono);
}

.score-ring__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.score-ring__track,
.score-ring__fill {
  fill: none;
  stroke-width: 8;
}

.score-ring__track {
  stroke: rgba(255, 255, 255, 0.08);
}

.score-ring__fill {
  stroke: var(--ring-color);
  stroke-linecap: round;
  stroke-dasharray: 314.16;
  stroke-dashoffset: 314.16;
  filter: drop-shadow(0 0 10px rgba(194, 245, 255, 0.2));
  transition: stroke-dashoffset 0.45s ease, stroke 0.35s ease;
}

.score-num {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ring-color);
  transition: color 0.35s ease;
}

.score-num--pending {
  /* No score yet: neutral text colour and tighter tracking so the two hyphens
     read as one "--" placeholder rather than two stray dashes. */
  color: var(--text);
  letter-spacing: -0.12em;
}

.score-unit {
  vertical-align: super;
  font-size: 0.74rem;
  opacity: 0.76;
}

.score-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-card,
.history-item,
.receipt-card,
.observer-pill,
.empty-state,
.drawer-card {
  min-width: 0;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.02);
}

.metric-card {
  padding: 14px;
}

.metric-card.compact {
  padding: 15px 16px;
}

.metric-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.metric-card strong,
.history-item strong,
.observer-label,
.receipt-title {
  display: block;
  font-size: 1.02rem;
  line-height: 1.28;
}

.message-card p {
  margin: 6px 0 0;
  color: var(--muted-strong);
  line-height: 1.6;
}

#message-preview {
  margin: 10px 0 0;
  max-height: 6.1em;
  overflow: auto;
  padding-right: 6px;
  font-size: 0.94rem;
  white-space: pre-wrap;
}

.region-filter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 12px;
}

.region-filter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.region-filter__row--subregions {
  padding: 8px 0 0 10px;
  border-left: 2px solid rgba(230, 182, 74, 0.28);
}

.region-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 5px 12px;
  transition: background 150ms, border-color 150ms, color 150ms;
}

.region-btn--group {
  font-size: 0.82rem;
}

.region-btn--child {
  font-size: 0.75rem;
  padding: 4px 10px;
}

.region-btn__count {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  min-width: 1.45em;
  opacity: 0.8;
  padding: 3px 5px;
  text-align: center;
}

.region-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.region-btn.active {
  background: color-mix(in srgb, var(--good) 12%, transparent);
  border-color: color-mix(in srgb, var(--good) 38%, var(--line));
  color: var(--good);
}

.region-btn.active .region-btn__count {
  background: color-mix(in srgb, var(--good) 18%, transparent);
  color: var(--good);
}

/* Uplink-inferred members of a group: dashed to read as "not mapped". */
.region-btn__count--inferred {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--text) 32%, transparent);
  font-weight: 600;
  opacity: 0.72;
  padding: 2px 4px;
}

.region-btn.active .region-btn__count--inferred {
  background: transparent;
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
  color: var(--good);
}

.observer-panel {
  display: grid;
  align-content: start;
  min-width: 0;
}

.observer-badges {
  min-width: 0;
}

.observer-badges {
  display: grid;
  gap: 12px;
  align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.observer-pill {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 92px;
  padding: 16px;
}

.observer-main {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
}

.observer-label {
  line-height: 1.34;
  overflow-wrap: anywhere;
}

.observer-pill .status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: start;
  justify-self: start;
  margin-top: 0;
  white-space: nowrap;
}

.observer-pill .status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  flex: 0 0 auto;
}

.observer-pill.seen {
  border-color: color-mix(in srgb, var(--good) 24%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--good) 12%, transparent), color-mix(in srgb, var(--good) 3%, transparent)),
    rgba(255, 255, 255, 0.03);
}

.observer-pill.seen .status {
  color: var(--good);
}

.observer-pill.waiting {
  border-color: color-mix(in srgb, var(--poor) 22%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--poor) 9%, transparent), color-mix(in srgb, var(--poor) 2%, transparent)),
    rgba(255, 255, 255, 0.03);
  border-style: dashed;
}

.observer-pill.waiting .status {
  color: var(--poor);
  border-style: dashed;
}

.observer-pill.waiting .status::before {
  background: transparent;
  border: 2px solid currentColor;
  box-shadow: none;
}

/* Known to the directory but not heard inside the active window, so this code is
   not scored against it. Neutral, not red: it is not a failure, it is not in the
   measurement at all. Muted so the scored block reads first. */
.observer-pill.untargeted {
  border-style: dashed;
  opacity: 0.72;
}

.observer-pill.untargeted .status {
  color: var(--muted-strong);
  border-style: dashed;
}

.observer-pill.untargeted .status::before {
  background: transparent;
  border: 2px solid currentColor;
  box-shadow: none;
}

/* Publishes no position, so its region group came from the uplink code. Marked,
   never dimmed - it is a full scoring target. */
.observer-pill.unlocated {
  border-style: dashed;
}

.observer-hash,
.receipt-hash,
.history-code,
.drawer-mono,
.console-line code,
.receipt-path,
.dock-nav__item span {
  font-family: var(--font-mono);
}

.observer-hash,
.observer-detail,
.receipt-hash {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Exempt from the break-anywhere above, which split "2-BYTE PATH" at the hyphen.
   Short and fixed length, so it cannot overflow even at 390px. */
.observer-detail__mode {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.map-panel,
.reports-panel {
  min-height: 0;
}

.map-panel {
  display: grid;
  align-content: start;
}

.observer-map {
  min-height: 450px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) + 2px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.spotlight-panel .observer-map {
  min-height: 560px;
}

.observer-map.hidden {
  display: none;
}

.leaflet-container {
  background: radial-gradient(circle, rgba(7, 17, 29, 0.98), rgba(5, 11, 18, 0.98));
  color: var(--text);
  font-family: var(--font-sans);
}

.leaflet-control-zoom a,
.leaflet-control-attribution {
  border: 1px solid rgba(194, 245, 255, 0.12) !important;
  background: rgba(7, 17, 29, 0.82) !important;
  color: var(--text) !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: rgba(8, 19, 34, 0.92);
  color: var(--text);
  border: 1px solid rgba(194, 245, 255, 0.12);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
}

.observer-map-icon-shell {
  background: transparent !important;
  border: 0 !important;
}

.observer-map-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(8, 16, 28, 0.92);
  box-shadow: 0 0 10px rgba(4, 9, 18, 0.4);
}

.observer-map-icon::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.observer-map-icon::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0.6;
  animation: pulseRing 2.6s ease-out infinite;
}

.observer-map-icon.seen {
  background: color-mix(in srgb, var(--good) 90%, white 10%);
  box-shadow: 0 0 16px var(--good-glow);
}

.observer-map-icon.seen::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(7, 17, 29, 0.92);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
}

.observer-map-icon.missed {
  border-color: color-mix(in srgb, var(--poor) 62%, white 38%);
  background: rgba(8, 16, 28, 0.98);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--poor) 18%, transparent),
    0 0 12px color-mix(in srgb, var(--poor) 26%, transparent);
}

.observer-map-icon.missed::before {
  width: 2px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--poor) 82%, white 18%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--poor) 36%, transparent);
  transform: translate(-50%, -50%) rotate(42deg);
}

.observer-map-icon.missed::after {
  opacity: 0.35;
  animation: none;
}

.receipt-arrival {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0.6rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
}

.receipt-arrival__copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.receipt-arrival__copy strong,
.receipt-arrival__copy span {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.receipt-arrival__copy strong {
  font-size: 0.84rem;
}

.receipt-arrival__copy span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.receipt-arrival__track {
  position: relative;
  width: 100%;
  height: 0.82rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.receipt-arrival__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(123, 214, 255, 0.34), rgba(123, 214, 255, 0.12));
}

.receipt-arrival__dot {
  position: absolute;
  top: 50%;
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.88);
  background: var(--accent);
  box-shadow: 0 0 20px rgba(123, 214, 255, 0.28);
  transform: translate(-50%, -50%);
}

.receipts {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 16px;
}

.receipt-card,
.history-item {
  padding: 16px;
}

.receipt-card {
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.receipt-card:hover,
.history-item:hover {
  transform: translateY(-2px);
  border-color: rgba(141, 182, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(141, 182, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
}

.receipt-head {
  align-items: flex-start;
  flex-wrap: wrap;
}

.receipt-title {
  margin: 0;
}

.receipt-meta {
  margin: 12px 0 0;
}

.receipt-meter-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.receipt-meter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--muted-strong);
}

.meter-track {
  position: relative;
  height: 0.52rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.meter-track span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 92%, white 8%), color-mix(in srgb, var(--good) 82%, transparent));
}

.meter-track.warning span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--fair) 92%, white 8%), color-mix(in srgb, var(--fair) 72%, var(--poor) 28%));
}

.meter-track.critical span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--poor) 95%, white 5%), color-mix(in srgb, var(--poor) 78%, var(--accent) 22%));
}

.receipt-path {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.receipt-path span {
  display: inline-flex;
  align-items: center;
  padding: 0.46rem 0.66rem;
  border-radius: 999px;
  border: 1px solid rgba(194, 245, 255, 0.12);
  background: rgba(194, 245, 255, 0.05);
  color: var(--accent-strong);
  font-size: 0.74rem;
}

.receipt-distance {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 0.72rem 0.82rem;
  border: 1px solid rgba(141, 182, 255, 0.14);
  border-radius: 16px;
  background: rgba(141, 182, 255, 0.055);
  color: var(--text);
}

.receipt-distance span {
  color: var(--muted-strong);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* One leg per line. The route wraps if the labels are long; the distance is
   held together on the right so the numbers read as a column. */
.receipt-distance__leg {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.receipt-distance__leg-route {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.receipt-distance__leg-value {
  flex: 0 0 auto;
  color: var(--text);
  font-family: var(--font-mono);
  text-align: right;
}

.history-list {
  margin-top: 4px;
}

.history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.history-code {
  font-size: 0.86rem;
  color: var(--accent-strong);
}

.empty-state {
  padding: 20px;
  color: var(--muted-strong);
}

.empty-state.compact {
  padding: 16px;
}

.hash-link {
  color: var(--accent-strong);
  text-decoration: none;
  text-underline-offset: 0.2em;
}

.hash-link:hover,
.hash-link:focus-visible {
  color: #fff;
  text-decoration: underline;
  outline: none;
}

.hash-link.pending {
  color: var(--muted-strong);
  pointer-events: none;
  text-decoration: none;
}

.status-good {
  color: var(--good);
  text-shadow: 0 0 18px var(--good-glow);
}

.status-fair {
  color: var(--fair);
  text-shadow: 0 0 18px var(--fair-glow);
}

.status-poor {
  color: var(--poor);
  text-shadow: 0 0 18px var(--poor-glow);
}

.site-footer {
  padding: 4px 4px 0;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--accent-strong);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
  outline: none;
}

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 14, 0.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 39;
}

.detail-drawer {
  position: fixed;
  top: 20px;
  right: 20px;
  bottom: 20px;
  width: min(460px, calc(100vw - 24px));
  padding: 22px;
  border-radius: 26px;
  overflow: auto;
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  transition:
    transform 240ms ease,
    opacity 240ms ease;
  z-index: 40;
}

.drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  align-items: flex-start;
  padding-bottom: 16px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, rgba(8, 19, 34, 0.96), rgba(8, 19, 34, 0.78), transparent);
}

.drawer-body {
  align-content: start;
}

.drawer-card {
  padding: 16px;
}

.drawer-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.drawer-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.drawer-stat {
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.drawer-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.drawer-list,
.console-lines {
  display: grid;
  gap: 10px;
}

.drawer-list__item,
.console-line {
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.drawer-list__item strong,
.console-line strong {
  display: block;
  margin-bottom: 6px;
}

.console-line {
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  min-width: 0;
}

.console-line span,
.console-line code {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.console-line code {
  display: block;
  width: 100%;
  white-space: pre-wrap;
}

.drawer-codeblock {
  margin: 0;
  padding: 14px;
  overflow: auto;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(5, 11, 18, 0.76);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

body.drawer-open {
  overflow: hidden;
}

body.drawer-open .drawer-scrim {
  opacity: 1;
  pointer-events: auto;
}

body.drawer-open .detail-drawer {
  transform: translateX(0);
  opacity: 1;
}

body[data-page-mode="share"] .share-hidden {
  display: none !important;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(0.86);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-18px, -12px, 0);
  }
}

@keyframes rise {
  from {
    transform: scaleY(0.25);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 0.95;
  }
}

@media (max-width: 1320px) {
  .noc-shell {
    width: min(1280px, calc(100vw - 28px));
  }

  .glance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .noc-shell {
    width: min(1100px, calc(100vw - 24px));
    padding-top: 16px;
  }

  .hero-band {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hero-actions-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dock-meta {
    justify-self: stretch;
  }

  .command-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid {
    grid-template-areas:
      "score"
      "map"
      "observers"
      "reports"
      "history";
  }

  .spotlight-panel .observer-map {
    min-height: 420px;
  }
}

@media (max-width: 720px) {
  .noc-shell {
    width: min(100vw - 16px, 100%);
    gap: 16px;
    padding-bottom: 28px;
  }

  .hero-panel,
  .panel {
    border-radius: 22px;
  }

  .hero-band {
    gap: 14px;
  }

  .hero-panel {
    gap: 14px;
    padding: 16px;
  }

  .dock-brand {
    gap: 12px;
    align-items: start;
  }

  .brand-orb {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .brand-orb span {
    inset: 8px;
    border-radius: 9px;
  }

  .brand-copy h1 {
    font-size: clamp(1.4rem, 8vw, 1.9rem);
  }

  .dock-lede {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .dock-meta {
    display: none;
  }

  .glance-grid::-webkit-scrollbar {
    display: none;
  }

  .hero-actions-stack {
    grid-template-columns: 1fr;
  }

  .hero-actions-stack > * {
    width: 100%;
  }

  .workspace {
    gap: 14px;
  }

  .hero-band {
    order: 0;
  }

  .command-grid {
    order: 1;
  }

  .glance-grid {
    order: 2;
    grid-template-columns: 1fr;
    overflow-x: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .glance-card {
    scroll-snap-align: none;
    padding: 16px;
  }

  /* The dashboard grid now sits inside <details class="additional-info">, so the
     order below applies to the <details> element - the grid itself is no longer
     a .workspace child. Without this the collapsed section inherits order: 0
     and jumps above Session Control on narrow screens. The .dashboard-grid
     order is kept for share.html, where the grid is still a direct child. */
  .additional-info {
    order: 3;
  }

  .dashboard-grid {
    order: 3;
    grid-template-areas:
      "score"
      "map"
      "observers"
      "reports"
      "history";
  }

  .site-footer {
    order: 4;
  }

  .glance-card__value {
    margin-top: 16px;
    font-size: 1.7rem;
  }

  .panel {
    padding: 16px;
  }

  .session-code-row,
  .score-layout,
  .history-item {
    grid-template-columns: 1fr;
    display: grid;
  }

  .score-layout {
    justify-items: start;
  }

  .session-code {
    font-size: clamp(1.45rem, 9vw, 2rem);
    padding: 18px 16px;
  }

  .session-code-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .session-code-actions > * {
    width: 100%;
  }

  .session-meta,
  .drawer-stat-grid,
  .score-grid {
    grid-template-columns: 1fr;
  }

  .observer-badges,
  .receipts {
    grid-template-columns: 1fr;
  }

  .observer-map {
    min-height: 320px;
  }

  .receipt-arrival__track {
    min-width: 0;
  }

  .detail-drawer {
    top: 8px;
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    border-radius: 22px;
    max-height: calc(100dvh - 16px);
  }
}

/* Dynamic editorial overrides */

.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(173, 196, 228, 0.14);
  border-radius: 30px;
  background:
    radial-gradient(circle at 0% 0%, rgba(103, 244, 161, 0.12), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(141, 182, 255, 0.2), transparent 22%),
    linear-gradient(135deg, rgba(11, 17, 28, 0.98), rgba(14, 19, 30, 0.94) 48%, rgba(8, 13, 21, 0.98));
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.34);
}

.hero-stage::before,
.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-stage::before {
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.02), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 96px);
  opacity: 0.5;
}

.hero-stage::after {
  inset: auto -10% -40% 38%;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 190, 92, 0.16), transparent 72%);
  filter: blur(28px);
}

.hero-stage > * {
  position: relative;
  z-index: 1;
}

.hero-stage .hero-panel,
.hero-stage__action-rail {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero-stage .hero-panel {
  border: 0;
}

.hero-stage .hero-panel::before {
  display: none;
}

.hero-stage__lead {
  min-width: 0;
  min-height: 100%;
  padding: 30px 28px 24px;
}

.hero-stage__lead {
  display: grid;
  gap: 18px;
  align-content: start;
}

.hero-stage__lead .brand-copy {
  flex: 1 1 0%;
  min-width: 0;
}

.hero-stage__lead .brand-copy h1 {
  font-size: clamp(2.25rem, 3.5vw, 4.2rem);
  line-height: 0.98;
  text-wrap: pretty;
}

.hero-stage__lead .dock-lede {
  max-width: 96ch;
  font-size: 0.98rem;
  margin: 0.6rem 0 0;
}

.hero-stage__meta-strip {
  grid-template-columns: 1fr;
  gap: 12px;
}

.hero-stage__meta-strip .dock-meta__item {
  min-width: 0;
  padding: 0;
  border: 0;
  border-left: 2px solid rgba(141, 182, 255, 0.18);
  border-radius: 0;
  background: transparent;
  padding-left: 14px;
}

.hero-stage__action-rail {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 20px 18px;
}

.marquee-panel {
  overflow: hidden;
  padding: 24px 26px;
  background:
    radial-gradient(circle at top right, rgba(141, 182, 255, 0.18), transparent 22%),
    radial-gradient(circle at 12% 88%, rgba(103, 244, 161, 0.08), transparent 18%),
    linear-gradient(135deg, rgba(19, 27, 40, 0.98), rgba(11, 16, 26, 0.96));
}

.marquee-panel::after {
  content: "";
  position: absolute;
  inset: auto -8% -36% 44%;
  height: 240px;
  background: radial-gradient(circle, rgba(141, 182, 255, 0.14), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}

.marquee-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.86fr);
  gap: 24px;
  align-items: start;
  margin-top: 18px;
}

.session-sequence {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.health-pocket {
  min-width: 0;
  padding-left: 24px;
  border-left: 1px solid rgba(173, 196, 228, 0.12);
}

.health-pocket__head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.health-pocket__head h2 {
  margin: 2px 0 0;
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
  line-height: 0.95;
}

.health-pocket__content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 16px;
}

.health-pocket__stats {
  gap: 12px;
}

.health-pocket .metric-card {
  padding: 12px 0;
  border-radius: 0;
  border-width: 0 0 1px;
  border-color: rgba(173, 196, 228, 0.12);
  background: transparent;
}

.marquee-panel .session-meta .metric-card:last-child,
.health-pocket .metric-card:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.26fr) minmax(300px, 0.74fr);
  grid-template-areas:
    "map observers"
    "ledger observers";
  align-items: stretch;
}

.spotlight-panel {
  grid-area: map;
  padding: 18px 18px 20px;
  background:
    radial-gradient(circle at top left, rgba(141, 182, 255, 0.18), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(103, 244, 161, 0.08), transparent 16%),
    linear-gradient(180deg, rgba(15, 23, 36, 0.98), rgba(8, 13, 21, 0.98));
}

.spotlight-panel .observer-map {
  min-height: 560px;
  margin-top: 14px;
  border-radius: 24px;
}

.observer-panel {
  grid-area: observers;
  align-self: stretch;
  min-height: 100%;
  background:
    radial-gradient(circle at 84% 12%, rgba(94, 217, 255, 0.08), transparent 20%),
    linear-gradient(180deg, rgba(18, 24, 36, 0.96), rgba(10, 15, 24, 0.98));
}

.ledger-panel {
  grid-area: ledger;
  background:
    radial-gradient(circle at top right, rgba(255, 190, 92, 0.12), transparent 24%),
    radial-gradient(circle at 12% 88%, rgba(141, 182, 255, 0.08), transparent 18%),
    linear-gradient(180deg, rgba(18, 25, 37, 0.98), rgba(10, 15, 24, 0.98));
}

.ledger-divider {
  height: 1px;
  margin: 24px 0 20px;
  background: linear-gradient(90deg, transparent, rgba(173, 196, 228, 0.24), transparent);
}

.ledger-panel .receipts,
.ledger-panel .history-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ledger-panel .history-list {
  margin-top: 0;
}

.ledger-history-head {
  margin-bottom: 12px;
}

body[data-page-mode="share"] .ledger-panel .history-list {
  display: none;
}

@media (max-width: 1240px) {
  .splash-scene {
    inset: -56px -26px auto;
    height: 780px;
  }

  .splash-scene__badge--one {
    right: 7%;
  }

  .splash-scene__badge--two {
    left: 6%;
  }

  .hero-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .marquee-layout,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .health-pocket {
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid rgba(173, 196, 228, 0.12);
  }

  .dashboard-grid {
    grid-template-areas:
      "map"
      "observers"
      "ledger";
  }

  .spotlight-panel .observer-map {
    min-height: 440px;
  }
}

@media (max-width: 720px) {
  /* no room for a side column on a phone: wrap into a row under the title */
  .hero-stage__lead .dock-brand {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .hero-stage__lead .dock-brand > .control-utility-actions {
    grid-area: 3 / 1 / auto / -1;
    margin-top: 12px;
  }

  .session-share-invite {
    flex-direction: column;
    align-items: flex-start;
  }

  .session-steps {
    flex-direction: column;
    align-items: flex-start;
  }

  .dock-brand .control-utility-actions {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 0 100%;
    width: 100%;
    max-width: none;
    margin-left: 0;
    align-self: stretch;
    justify-content: flex-start;
  }

  .dock-brand .control-utility-actions .control-button,
  .dock-brand .control-utility-actions a.control-button {
    width: auto;
  }

  .splash-scene {
    inset: -36px -18px auto;
    height: 430px;
  }

  .splash-scene__mesh {
    inset: 26px 0 auto;
    height: 250px;
    border-radius: 28px;
    filter: blur(10px);
  }

  .splash-scene__beam {
    top: 26px;
    right: -94px;
    width: 260px;
    height: 260px;
  }

  .splash-scene__grid {
    inset: 40px 8px auto;
    height: 220px;
    background-size: 48px 48px, 48px 48px, 100% 100%;
    opacity: 0.42;
  }

  .splash-scene__ring,
  .splash-scene__badge {
    display: none;
  }

  .hero-stage {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }

  .hero-stage__lead {
    padding: 18px 16px;
  }

  .hero-stage__lead .brand-copy h1 {
    font-size: clamp(1.6rem, 8vw, 2.35rem);
  }

  .action-menu__panel {
    top: auto;
    bottom: calc(100% + 10px);
    width: 100%;
  }

  .marquee-panel {
    padding: 16px;
  }

  .health-pocket__content {
    grid-template-columns: 1fr;
  }

  .health-pocket .score-ring {
    justify-self: start;
  }

  .ledger-panel .receipts,
  .ledger-panel .history-list {
    grid-template-columns: 1fr;
  }

  .spotlight-panel .observer-map {
    min-height: 320px;
  }
}

body[data-ui-theme="light"] {
  --bg: #f3f7fc;
  --bg-deep: #fbfdff;
  --bg-alt: #e9f0fb;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --panel-soft: rgba(39, 98, 210, 0.08);
  --panel-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.18));
  --line: rgba(32, 52, 84, 0.1);
  --line-strong: rgba(32, 52, 84, 0.18);
  --text: #182235;
  /* Both greys were a step too pale on #f3f7fc - body copy sat near 4.4:1.
     Darkened to clear 7:1 so the muted text reads as text, not as a hint. */
  --muted: #4a5769;
  --muted-strong: #28344a;
  --accent: #2762d2;
  --accent-strong: #163a87;
  --good: #216dcf;
  --good-glow: rgba(33, 109, 207, 0.18);
  --fair: #9b6c0d;
  --fair-glow: rgba(155, 108, 13, 0.16);
  --poor: #a14bac;
  --poor-glow: rgba(161, 75, 172, 0.16);
  --shadow: 0 20px 54px rgba(52, 80, 121, 0.12);
  --ring-color: #2762d2;
  --hero-violet: #cad8ef;
  --hero-coral: #d9b1b6;
  --hero-lime: #d7e4c0;
  --hero-blue: #2762d2;
  --step-ink: #0b6b4f;
  --step-fill: rgba(11, 107, 79, 0.1);
  --step-ring: rgba(11, 107, 79, 0.34);
  background:
    radial-gradient(circle at 10% 0%, rgba(113, 153, 220, 0.18), transparent 30%),
    radial-gradient(circle at 100% 12%, rgba(189, 210, 239, 0.22), transparent 24%),
    linear-gradient(180deg, #fbfdff 0%, #f5f8fc 52%, #eef3fa 100%);
  color: var(--text);
}

body[data-ui-theme="light"] .splash-scene {
  opacity: 0.76;
}

body[data-ui-theme="light"] .splash-scene__mesh {
  background:
    radial-gradient(circle at 16% 24%, rgba(121, 154, 214, 0.3), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(39, 98, 210, 0.16), transparent 24%),
    radial-gradient(circle at 62% 74%, rgba(166, 190, 224, 0.14), transparent 18%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
}

body[data-ui-theme="light"] .splash-scene__beam {
  background: radial-gradient(circle, rgba(39, 98, 210, 0.14), transparent 68%);
}

body[data-ui-theme="light"] .splash-scene__grid {
  border-color: rgba(39, 98, 210, 0.08);
  background:
    linear-gradient(rgba(39, 98, 210, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 98, 210, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(166, 190, 224, 0.1), transparent 56%);
}

body[data-ui-theme="light"] .splash-scene__ring {
  border-color: rgba(39, 98, 210, 0.1);
  background: radial-gradient(circle, rgba(121, 154, 214, 0.12), transparent 70%);
}

body[data-ui-theme="light"] .splash-scene__badge {
  border-color: rgba(39, 98, 210, 0.1);
  background: rgba(255, 255, 255, 0.82);
  color: #33425b;
  box-shadow: 0 18px 40px rgba(52, 80, 121, 0.08);
}

body[data-ui-theme="light"] .splash-scene__badge::before {
  box-shadow: 0 0 18px rgba(39, 98, 210, 0.14);
}

body[data-ui-theme="light"]::before {
  background:
    linear-gradient(rgba(39, 98, 210, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 98, 210, 0.028) 1px, transparent 1px);
  opacity: 0.55;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 100%);
}

body[data-ui-theme="light"]::after {
  background:
    radial-gradient(circle at 20% 20%, rgba(39, 98, 210, 0.12), transparent 22%),
    radial-gradient(circle at 80% 35%, rgba(155, 183, 220, 0.1), transparent 18%),
    radial-gradient(circle at 50% 70%, rgba(211, 224, 243, 0.16), transparent 18%);
  opacity: 0.78;
  filter: blur(80px);
}

body[data-ui-theme="light"] .screen-glow {
  background: radial-gradient(circle, rgba(121, 154, 214, 0.16), transparent 72%);
}

body[data-ui-theme="light"] :focus-visible {
  outline-color: rgba(49, 94, 208, 0.78);
}

body[data-ui-theme="light"] code {
  border-color: rgba(39, 98, 210, 0.1);
  background: rgba(39, 98, 210, 0.08);
  color: #1f4ca6;
}

body[data-ui-theme="light"] .hero-stage {
  border-color: rgba(32, 52, 84, 0.12);
  background:
    radial-gradient(circle at 12% 4%, rgba(190, 212, 242, 0.72), transparent 34%),
    radial-gradient(circle at 86% 100%, rgba(223, 232, 245, 0.76), transparent 30%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.94), rgba(247, 251, 255, 0.94) 56%, rgba(241, 246, 252, 0.98));
  box-shadow: 0 24px 64px rgba(52, 80, 121, 0.14);
}

body[data-ui-theme="light"] .pill,
body[data-ui-theme="light"] .dock-meta__item,
body[data-ui-theme="light"] .observer-pill .status,
body[data-ui-theme="light"] .receipt-arrival__track,
body[data-ui-theme="light"] .meter-track,
body[data-ui-theme="light"] .score-ring,
body[data-ui-theme="light"] .action-menu__panel,
body[data-ui-theme="light"] .drawer-head,
body[data-ui-theme="light"] .drawer-scrim {
  border-color: rgba(43, 76, 124, 0.12);
}

body[data-ui-theme="light"] .pill,
body[data-ui-theme="light"] .dock-meta__item,
body[data-ui-theme="light"] .observer-pill .status,
body[data-ui-theme="light"] .action-menu__panel,
body[data-ui-theme="light"] .drawer-head {
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
}

body[data-ui-theme="light"] .drawer-scrim {
  background: rgba(157, 177, 214, 0.28);
}

body[data-ui-theme="light"] .brand-orb {
  border-color: rgba(39, 98, 210, 0.14);
  background:
    linear-gradient(145deg, rgba(39, 98, 210, 0.14), rgba(190, 212, 242, 0.2)),
    rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 0 24px rgba(39, 98, 210, 0.08);
}

body[data-ui-theme="light"] .brand-orb::after {
  background: radial-gradient(circle, rgba(39, 98, 210, 0.2), transparent 72%);
}

body[data-ui-theme="light"] .score-ring {
  background: radial-gradient(circle, rgba(39, 98, 210, 0.06), transparent 68%);
}

body[data-ui-theme="light"] .score-ring__track {
  stroke: rgba(43, 76, 124, 0.12);
}

body[data-ui-theme="light"] .status-pill::before {
  box-shadow: 0 0 14px var(--poor-glow);
}

body[data-ui-theme="light"] .status-pill.online::before {
  box-shadow: 0 0 16px var(--good-glow);
}

body[data-ui-theme="light"] .sparkline[data-tone="neutral"] .sparkline-bar {
  background: linear-gradient(180deg, rgba(96, 114, 138, 0.32), rgba(96, 114, 138, 0.08));
}

body[data-ui-theme="light"] .receipt-arrival__track,
body[data-ui-theme="light"] .meter-track {
  background: rgba(39, 98, 210, 0.08);
}

body[data-ui-theme="light"] .receipt-arrival__fill {
  background: linear-gradient(90deg, rgba(39, 98, 210, 0.24), rgba(39, 98, 210, 0.08));
}

body[data-ui-theme="light"] .receipt-arrival__dot {
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 16px rgba(39, 98, 210, 0.14);
}

body[data-ui-theme="light"] .action-menu__button,
body[data-ui-theme="light"] .action-menu__item {
  color: #33425b;
}

body[data-ui-theme="light"] .site-footer a,
body[data-ui-theme="light"] .hash-link {
  color: #2762d2;
}

/* The pending rule above it is one specificity point short of this one, so an
   unfilled hash rendered in link blue while every other placeholder was ink. */
body[data-ui-theme="light"] .hash-link.pending {
  color: var(--muted-strong);
}

body[data-ui-theme="light"] .hero-stage::before {
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.4), transparent 28%),
    repeating-linear-gradient(90deg, rgba(39, 98, 210, 0.03) 0 1px, transparent 1px 96px);
}

body[data-ui-theme="light"] .hero-stage::after {
  background: radial-gradient(circle, rgba(140, 171, 214, 0.14), transparent 72%);
}

body[data-ui-theme="light"] .hero-stage__action-rail,
body[data-ui-theme="light"] .marquee-panel,
body[data-ui-theme="light"] .spotlight-panel,
body[data-ui-theme="light"] .observer-panel,
body[data-ui-theme="light"] .ledger-panel,
body[data-ui-theme="light"] .panel,
body[data-ui-theme="light"] .hero-panel,
body[data-ui-theme="light"] .glance-card,
body[data-ui-theme="light"] .detail-drawer {
  border-color: rgba(43, 76, 124, 0.1);
  color: var(--text);
}

/* .glance-card's dark base fill (rgba(16,24,36,0.78)) used to be masked in light
   mode by the hero strip's own override. That strip is gone, so the cards need
   their own light fill or they render as dark navy blocks on a white page. */
body[data-ui-theme="light"] .glance-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(245, 249, 255, 0.62));
}

body[data-ui-theme="light"] .receipt-spread-card {
  border-color: rgba(43, 76, 124, 0.16);
}

/* Light mode only ever repainted the four named panel variants, so a bare
   .panel kept its dark fill (rgba(15,22,34,0.84)) and rendered as grey-on-grey.
   The named variants all carry .panel too and override this later in the file,
   so filling .panel here is safe and stops the next bare panel hitting it. */
body[data-ui-theme="light"] .panel {
  background:
    linear-gradient(180deg, rgba(252, 253, 255, 0.92), rgba(245, 248, 253, 0.84));
  box-shadow: 0 18px 46px rgba(52, 80, 121, 0.1);
}

body[data-ui-theme="light"] .marquee-panel,
body[data-ui-theme="light"] .spotlight-panel,
body[data-ui-theme="light"] .observer-panel,
body[data-ui-theme="light"] .ledger-panel {
  box-shadow: 0 18px 46px rgba(52, 80, 121, 0.1);
}

body[data-ui-theme="light"] .marquee-panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 255, 0.84) 52%, rgba(227, 235, 247, 0.3));
  box-shadow:
    0 18px 46px rgba(52, 80, 121, 0.1),
    inset 0 4px 0 rgba(39, 98, 210, 0.38);
}

body[data-ui-theme="light"] .spotlight-panel {
  background:
    linear-gradient(180deg, rgba(249, 251, 255, 0.92), rgba(237, 244, 253, 0.84));
  box-shadow:
    0 18px 46px rgba(52, 80, 121, 0.1),
    inset 0 4px 0 rgba(39, 98, 210, 0.42);
}

body[data-ui-theme="light"] .observer-panel {
  background:
    linear-gradient(180deg, rgba(252, 253, 255, 0.92), rgba(243, 248, 253, 0.84));
  box-shadow:
    0 18px 46px rgba(52, 80, 121, 0.1),
    inset 0 4px 0 rgba(114, 149, 198, 0.38);
}

body[data-ui-theme="light"] .ledger-panel {
  background:
    linear-gradient(180deg, rgba(252, 253, 255, 0.92), rgba(245, 248, 253, 0.84));
  box-shadow:
    0 18px 46px rgba(52, 80, 121, 0.1),
    inset 0 4px 0 rgba(152, 177, 216, 0.42);
}

body[data-ui-theme="light"] .marquee-panel::after {
  background: radial-gradient(circle, rgba(39, 98, 210, 0.12), transparent 70%);
}

body[data-ui-theme="light"] .health-pocket,
body[data-ui-theme="light"] .ledger-divider,
body[data-ui-theme="light"] .panel-divider {
  border-color: rgba(43, 76, 124, 0.12);
}

body[data-ui-theme="light"] .panel-lens {
  border-color: rgba(39, 98, 210, 0.12);
  background: rgba(255, 255, 255, 0.82);
  color: #2b3950;
}

body[data-ui-theme="light"] .primary-button,
body[data-ui-theme="light"] .ghost-button {
  border-color: rgba(39, 98, 210, 0.2);
  background: linear-gradient(135deg, #2e6fe0, #2458bd);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(39, 98, 210, 0.22);
}

body[data-ui-theme="light"] .panel-lens:hover,
body[data-ui-theme="light"] .panel-lens:focus-visible {
  border-color: rgba(39, 98, 210, 0.2);
  background: rgba(39, 98, 210, 0.08);
  color: #163a87;
}

body[data-ui-theme="light"] .primary-button:hover,
body[data-ui-theme="light"] .primary-button:focus-visible,
body[data-ui-theme="light"] .ghost-button:hover,
body[data-ui-theme="light"] .ghost-button:focus-visible {
  border-color: rgba(39, 98, 210, 0.28);
  box-shadow: 0 16px 34px rgba(39, 98, 210, 0.26);
}

body[data-ui-theme="light"] .metric-card,
body[data-ui-theme="light"] .history-item,
body[data-ui-theme="light"] .receipt-card,
body[data-ui-theme="light"] .observer-pill,
body[data-ui-theme="light"] .empty-state,
body[data-ui-theme="light"] .drawer-card,
body[data-ui-theme="light"] .drawer-stat,
body[data-ui-theme="light"] .drawer-list__item,
body[data-ui-theme="light"] .console-line,
body[data-ui-theme="light"] .receipt-arrival {
  border-color: rgba(32, 52, 84, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 249, 253, 0.52)),
    rgba(255, 255, 255, 0.42);
}

/* The rule above repaints every .observer-pill white, and the dark-theme state
   tints it overrides mix their colour into transparent before layering it on
   rgba(255, 255, 255, 0.03) - a no-op over a white card. Same trap the .targeted
   row hit. Now that this panel is the only place observer state is shown, all
   three states have to read here, so mix into #ffffff explicitly. */
body[data-ui-theme="light"] .observer-pill.seen {
  border-color: color-mix(in srgb, var(--good) 38%, var(--line));
  background: color-mix(in srgb, var(--good) 8%, #ffffff);
}

body[data-ui-theme="light"] .observer-pill.waiting {
  border-color: color-mix(in srgb, var(--poor) 32%, var(--line));
  background: color-mix(in srgb, var(--poor) 6%, #ffffff);
}

body[data-ui-theme="light"] .observer-pill.untargeted {
  border-color: rgba(32, 52, 84, 0.14);
  background: color-mix(in srgb, #60728a 7%, #ffffff);
}

/* Light mode flattens .status to var(--text) for every pill, which erases the
   seen/not-seen/not-scored distinction the merged panel now carries alone. */
body[data-ui-theme="light"] .observer-pill.seen .status {
  color: var(--good);
}

body[data-ui-theme="light"] .observer-pill.waiting .status {
  color: var(--poor);
}

body[data-ui-theme="light"] .observer-pill.untargeted .status {
  color: var(--muted-strong);
}

body[data-ui-theme="light"] .session-code {
  border-color: rgba(39, 98, 210, 0.14);
  background:
    linear-gradient(135deg, rgba(39, 98, 210, 0.14), rgba(190, 212, 242, 0.08)),
    rgba(255, 255, 255, 0.86);
  color: #163a87;
}

body[data-ui-theme="light"] .observer-map {
  border-color: rgba(43, 76, 124, 0.12);
}

body[data-ui-theme="light"] .leaflet-container {
  background: linear-gradient(180deg, rgba(238, 244, 252, 0.96), rgba(247, 250, 255, 0.98));
}

body[data-ui-theme="light"] .leaflet-control-zoom a,
body[data-ui-theme="light"] .leaflet-control-attribution {
  border-color: rgba(43, 76, 124, 0.12) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #1f4ca6 !important;
}

body[data-ui-theme="light"] .leaflet-popup-content-wrapper,
body[data-ui-theme="light"] .leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  border-color: rgba(43, 76, 124, 0.12);
  box-shadow: 0 18px 36px rgba(53, 84, 133, 0.14);
}

body[data-ui-theme="light"] .drawer-codeblock {
  border-color: rgba(43, 76, 124, 0.08);
  background: rgba(245, 249, 255, 0.92);
  color: #1f4ca6;
}

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

/* ---------- Collapsible "Additional Information" section ---------- */
.additional-info {
  margin-top: 18px;
}

.additional-info__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--muted-strong);
  cursor: pointer;
  list-style: none;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.additional-info__summary::-webkit-details-marker,
.additional-info__summary::marker {
  display: none;
  content: '';
}

.additional-info__summary:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.additional-info__label {
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.additional-info__chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.additional-info[open] > .additional-info__summary {
  border-color: var(--line-strong);
  color: var(--text);
}

.additional-info[open] > .additional-info__summary .additional-info__chevron {
  transform: rotate(-135deg) translateY(-2px);
}

.additional-info[open] > .dashboard-grid {
  margin-top: 18px;
}

body[data-ui-theme="light"] .additional-info__summary {
  border-color: rgba(43, 76, 124, 0.14);
  color: #2b3950;
}

body[data-ui-theme="light"] .additional-info__summary:hover,
body[data-ui-theme="light"] .additional-info[open] > .additional-info__summary {
  border-color: rgba(39, 98, 210, 0.22);
  color: #16233a;
}

/* Coverage map placement.
   The map lives outside <details class="additional-info"> so it is always
   visible, in its own full-width grid directly above the toggle. These rules sit
   at the end of the file deliberately: .dashboard-grid is redefined inside
   several media queries, and matching that specificity by source order means one
   pair of rules covers every breakpoint.

   The grid still inside the <details> therefore drops the "map" area - leaving it
   in place would reserve an empty 1.26fr column beside the observer panel. */
.map-section {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "map";
}

.additional-info__grid {
  grid-template-areas: "ledger observers";
}

/* System telemetry sits last, full width, on its own row - it describes
   the deployment rather than any one session. Same single-area trick as
   .map-section so the surrounding grid areas did not need rewriting. */
.metrics-section {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "metrics";
}

.metrics-panel {
  grid-area: metrics;
  display: grid;
  gap: 16px;
  align-content: start;
}

.metrics-panel__status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}

.metrics-panel__grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Receipt Spread now sits inside the Observer Reports panel, above the cards it
   summarises, so it is scaled to a panel row rather than a hero strip segment. */
.receipt-spread-card {
  border: 1px solid rgba(173, 196, 228, 0.14);
}

.receipt-spread-card .glance-card__value {
  margin-top: 10px;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
}

.receipt-spread-card .sparkline {
  max-width: 100%;
}

@media (max-width: 1240px) {
  .additional-info__grid {
    grid-template-areas:
      "observers"
      "ledger";
  }
}

/* The score grid is two columns, so an odd number of metric cards leaves a
   half-width orphan on the last row. Let the final card span instead. This is
   self-correcting: adding or removing a metric never needs a CSS change. */
.score-grid > .metric-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Explains a withheld grade (target set below OBSERVER_MIN_SCORING_SET). Muted,
   not an error: the run succeeded, it just cannot be turned into a percentage. */
.health-note {
  margin: 0.35rem 0 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 88%, var(--line));
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: left;
}