/* Gu-Zhan UI — one stylesheet, no framework. Theming via [data-theme].
   Concept: 顧站 — "I keep watch over your site." A dark operations console left
   lit through the night watch: graph-paper grid, crisp hairlines, an
   oscilloscope sweep. The brand accent is a cool phosphor "signal" (kept under
   the --glow-* names it inherited); semantic status colours stay green/amber/red.
   Type is fully monospaced: Martian Mono for display, IBM Plex Mono for data. */

:root {
  /* night watch (default) — cool graphite console */
  --bg: #0a0e15;
  --bg-elev: #111823;
  --bg-elev-2: #18212e;
  --bg-inset: #0b0f18;
  --border: #20293a;
  --border-strong: #2c384c;
  --text: #e6edf5;
  --text-dim: #a4b6ca;
  --text-faint: #7c90a5;

  /* graph-paper grid — the console faceplate */
  --grid: rgba(125, 148, 178, 0.055);
  --grid-strong: rgba(125, 148, 178, 0.1);

  /* brand signal — the phosphor scan line that means "still watching".
     Kept under the --glow-* names so the ~200 existing usages don't churn. */
  --glow: #2bd4e6;
  --glow-bright: #7ff0f8;
  --glow-soft: rgba(43, 212, 230, 0.12);
  --glow-line: rgba(43, 212, 230, 0.44);
  --on-glow: #04171b;

  /* semantic status — up is yellow-green so it never reads as the signal cyan */
  --up: #3ecf6e;
  --up-soft: rgba(62, 207, 110, 0.15);
  --degraded: #f5b12e;
  --degraded-soft: rgba(245, 177, 46, 0.16);
  --down: #ff5b5b;
  --down-soft: rgba(255, 91, 91, 0.16);

  /* mechanical geometry — tight radii, hard hairlines, minimal bloom */
  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 12px;
  --shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.72);
  --shadow-glow: 0 0 26px -14px var(--glow-soft);

  --font: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, monospace;
  --display: "Martian Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular,
    Menlo, monospace;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, monospace;

  --nav-w: 244px;
  --nav-w-collapsed: 72px;
}

:root[data-theme="light"] {
  /* daylight console — cool paper, ink-blue text */
  --bg: #eef1f5;
  --bg-elev: #ffffff;
  --bg-elev-2: #e6ebf1;
  --bg-inset: #e3e8ef;
  --border: #d5dce5;
  --border-strong: #bcc6d2;
  --text: #121821;
  --text-dim: #414e5c;
  --text-faint: #5f7082;

  --grid: rgba(60, 82, 112, 0.055);
  --grid-strong: rgba(60, 82, 112, 0.1);

  /* darker teal so the signal keeps contrast on paper */
  --glow: #0891a6;
  --glow-bright: #0aa7bf;
  --glow-soft: rgba(8, 145, 166, 0.12);
  --glow-line: rgba(8, 145, 166, 0.4);
  --on-glow: #f0feff;

  --up: #12a05e;
  --up-soft: rgba(18, 160, 94, 0.13);
  --degraded: #b0790a;
  --degraded-soft: rgba(176, 121, 10, 0.14);
  --down: #d83a3a;
  --down-soft: rgba(216, 58, 58, 0.13);

  --shadow: 0 14px 30px -18px rgba(30, 45, 66, 0.3);
  --shadow-glow: 0 0 26px -16px var(--glow-soft);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background-color: var(--bg);
  /* graph-paper faceplate — a fixed grid the whole console sits on. Kept faint
     so it reads as instrument texture, never as decoration. */
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: -1px -1px;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* never scroll the page sideways (clip keeps sticky working) */
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  color: inherit;
}

code,
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

code {
  font-size: 0.9em;
  background: var(--bg-inset);
  padding: 1px 6px;
  border-radius: 5px;
}

::selection {
  background: var(--glow-line);
  color: var(--on-glow);
}

:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================= primitives == */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 0.12s ease,
    filter 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}
.btn:active {
  transform: translateY(1px);
}
/* Disabled buttons (e.g. the Contact CTA with no SUPPORT_EMAIL): visibly
   greyed-out and non-interactive. Higher specificity than the variant :hover
   rules, so it wins for both btn-ghost and btn-primary. */
.btn:disabled,
.btn[disabled],
.btn:disabled:hover,
.btn[disabled]:hover {
  opacity: 0.5;
  filter: grayscale(0.6);
  cursor: default;
  box-shadow: none;
  transform: none;
  background: var(--bg-elev-2);
  border-color: var(--border);
  color: var(--text-dim);
}
.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.btn-primary {
  background: var(--glow);
  color: var(--on-glow);
  box-shadow: 0 6px 22px -8px var(--glow-line);
}
.btn-primary:hover {
  filter: brightness(1.06);
}
.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover {
  background: var(--bg-elev-2);
  border-color: var(--text-faint);
}
/* thin square icon-only button: the full meaning rides on data-help (hover)
   and aria-label, so the icon can stay quiet */
.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition:
    color 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}
.btn-icon:hover {
  background: var(--bg-elev-2);
  border-color: var(--text-faint);
  color: var(--text);
}
/* primary variant: a create/confirm action, tinted with the accent glow. */
.btn-icon.primary {
  border-color: var(--glow-line);
  color: var(--glow);
}
.btn-icon.primary:hover {
  background: var(--glow-soft);
  border-color: var(--glow);
  color: var(--glow-bright);
}
.btn-icon svg {
  width: 15px;
  height: 15px;
}
.btn-sm {
  padding: 8px 13px;
  font-size: 13px;
}
.btn-block {
  width: 100%;
}
/* auto-refresh cadence toggle: a subtle accent highlight while active */
.btn.auto-refresh.on {
  color: var(--glow);
  border-color: var(--glow-line);
}
/* Consistent breathing room: button rows (.actions, .modal-foot, .cta-row,
   .foot-row, .tabs, .chip-set, .ws-name-row) space their members with `gap`.
   This guard only reaches a lone button that trails other content in normal
   (non-flex) flow — a card or form action — so a button never sits flush.
   Rows that already manage spacing with `gap` are untouched. */
:is(.card, form) > .btn:not(:first-child),
:is(.card, form) > .btn-block:not(:first-child) {
  margin-top: 14px;
}

/* heartbeat status chip: a tiny EKG trace where all three states carry motion —
   sweeping beat when up, marching dashes (stutter) when degraded, pulsing alarm
   flatline when down — and the trace shape alone still distinguishes them when
   motion is off. Shape + motion, not colour alone, keep states legible for
   colour-blind users; the label rides on data-help. */
.ekg {
  width: 34px;
  height: 18px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  cursor: help;
}
.ekg svg {
  width: 28px;
  height: 12px;
  display: block;
  overflow: visible;
}
.ekg path {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ekg.up {
  background: var(--up-soft);
}
.ekg.up path {
  stroke: var(--up);
  stroke-dasharray: 39;
  animation: trace 2.6s linear infinite;
}
.ekg.degraded {
  background: var(--degraded-soft);
}
.ekg.degraded path {
  stroke: var(--degraded);
  stroke-dasharray: 3 3;
  animation: stutter 1.6s linear infinite;
}
.ekg.down {
  background: var(--down-soft);
}
.ekg.down path {
  stroke: var(--down);
  animation: alarm 1.6s ease-in-out infinite;
}
.ekg.neutral {
  background: var(--bg-inset);
}
/* neutral stays static: unknown means "no signal to report", so it reads as
   calm rather than alive or alarming */
.ekg.neutral path {
  stroke: var(--text-faint);
  stroke-dasharray: 2 4;
}
/* pending = enrolled but never probed yet. The brand "signal" cyan scanning
   across as dots reads as "watching, waiting for the first heartbeat" — a
   distinct fourth state, never mistaken for up/degraded/down. */
.ekg.pending {
  background: var(--glow-soft);
}
.ekg.pending path {
  stroke: var(--glow);
  stroke-dasharray: 2 4;
  animation: scan 1.8s linear infinite;
}
@keyframes scan {
  to {
    stroke-dashoffset: -18;
  }
}
/* draw-in-then-hold: the trace sweeps in over ~1.2s, then rests fully drawn
   for the remainder — idle means resting drawn, never a blank chip. */
@keyframes trace {
  0% {
    stroke-dashoffset: 39;
  }
  45%,
  100% {
    stroke-dashoffset: 0;
  }
}
/* marching dashes: offset −12 is exactly two 3+3 dash periods, so the loop is
   seamless and the dashes stay visible the whole time — never a blank chip. */
@keyframes stutter {
  to {
    stroke-dashoffset: -12;
  }
}
/* alarm pulse: the flatline dims and returns but never disappears — it stays
   flat and visible at its lowest ebb. */
@keyframes alarm {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.mark {
  width: 24px;
  height: 24px;
  flex: none;
  filter: drop-shadow(0 0 10px var(--glow-soft));
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.muted {
  color: var(--text-dim);
}

/* ---- help hint: an inline "i" that explains a term in plain language --------
   The marker is CSS; the bubble is a body-appended .hovertip driven by app.js
   (data-help), so it escapes every overflow:hidden ancestor (tiles, cards) that
   would otherwise clip a pure-CSS tooltip. Reveals on hover AND focus. */
.hint {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  padding: 0;
  margin-left: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  cursor: help;
  position: relative;
  transition:
    color 0.12s ease,
    border-color 0.12s ease;
}
.hint:hover,
.hint:focus-visible,
.hint:focus {
  color: var(--glow);
  border-color: var(--glow-line);
  outline: none;
}

/* floating hover panel for status bars + heatmap cells + help hints (app.js) */
.hovertip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  max-width: 260px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  box-shadow: var(--shadow);
  font-size: 12px;
  line-height: 1.5;
}
.hovertip[hidden] {
  display: none;
}
.hovertip .ht-when {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.hovertip .ht-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}

.loading {
  min-height: 60vh;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  font-family: var(--mono);
  letter-spacing: 0.1em;
}

/* signal-loader — the on-brand "reading the signal" loading animation: a phosphor
   dot pinging concentric rings (the prober acquiring a target) above the status
   text with a blinking console cursor. It renders inside .loading so it inherits
   the centering; error .loading states keep bare text. Uses the --glow signal
   colour, so it is theme-aware, and freezes under prefers-reduced-motion. */
.signal-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.sig-ping {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
}
/* compact variant for tighter contexts (e.g. a picker modal) */
.signal-loader.compact {
  flex-direction: row;
  gap: 12px;
}
.signal-loader.compact .sig-ping {
  width: 34px;
  height: 34px;
}
.signal-loader.compact .sig-ping b {
  width: 7px;
  height: 7px;
}
/* the phosphor signal dot at the centre */
.sig-ping b {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow:
    0 0 12px 1px var(--glow-soft),
    0 0 5px var(--glow);
  animation: sig-dot 2.2s ease-in-out infinite;
}
/* three hairline rings radiating outward and fading — the "ping" */
.sig-ping i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--glow-line);
  border-radius: 50%;
  opacity: 0;
  animation: sig-ring 2.2s cubic-bezier(0.16, 0.62, 0.3, 1) infinite;
}
.sig-ping i:nth-child(2) {
  animation-delay: 0.73s;
}
.sig-ping i:nth-child(3) {
  animation-delay: 1.46s;
}
@keyframes sig-ring {
  0% {
    transform: scale(0.24);
    opacity: 0;
  }
  20% {
    opacity: 0.85;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes sig-dot {
  0%,
  100% {
    transform: scale(0.82);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}
/* status text + blinking console cursor */
.sig-text {
  display: inline-flex;
  align-items: center;
}
.sig-cursor {
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 0.4em;
  background: var(--glow-line);
  animation: sig-blink 1.1s step-end infinite;
}
@keyframes sig-blink {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sig-ping b,
  .sig-ping i,
  .sig-cursor {
    animation: none;
  }
  .sig-ping i:first-child {
    opacity: 0.35;
    transform: scale(1);
  }
  .sig-ping b {
    opacity: 1;
  }
}

.theme-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-dim);
}
.theme-btn:hover {
  color: var(--glow);
  border-color: var(--glow-line);
}

/* language switcher — a flat, bordered <select> matching the theme toggle */
.lang-select {
  height: 38px;
  max-width: 168px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.lang-select:hover {
  color: var(--glow);
  border-color: var(--glow-line);
}
.lang-select option {
  color: var(--text);
  background: var(--bg-inset);
}
.auth-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-lang-select {
  min-width: 150px;
}
.theme-btn svg {
  width: 18px;
  height: 18px;
}

/* ==================================================== heartbeat ribbon ===== */
/* The hero signature: a breathing row of status ticks with a glow that sweeps
   across like a firefly pulse. Decorative only. */
.signal {
  margin: 56px auto 0;
  max-width: 900px;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-inset));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), var(--shadow-glow);
  overflow: hidden;
}
.signal-body {
  padding: 30px 26px 22px;
}
.ribbon {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  position: relative;
  overflow: hidden;
  min-width: 0;
  /* oscilloscope faceplate: a fine baseline grid under the trace */
  background-image: linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:
    100% 30px,
    24px 100%;
  border-radius: var(--radius-sm);
}
.ribbon .tick {
  flex: 1 1 0;
  min-width: 1px;
  border-radius: 1px;
  background: var(--up);
  opacity: 0.62;
  transform-origin: bottom;
  animation: breathe 3.2s ease-in-out infinite;
}
.ribbon .tick.down {
  background: var(--down);
  opacity: 0.95;
}
.ribbon .tick.degraded {
  background: var(--degraded);
  opacity: 0.9;
}
/* the scan cursor: a single crisp phosphor line that sweeps the trace */
.ribbon .sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 96px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glow-soft) 78%,
    var(--glow-line) 98%,
    var(--glow-bright) 100%
  );
  border-right: 1px solid var(--glow-bright);
  animation: sweep 4.5s linear infinite;
}
@keyframes breathe {
  0%,
  100% {
    transform: scaleY(0.86);
    opacity: 0.5;
  }
  50% {
    transform: scaleY(1);
    opacity: 0.95;
  }
}
@keyframes sweep {
  0% {
    left: -96px;
  }
  100% {
    left: 100%;
  }
}

/* per-check uptime bars on the dashboard monitor rows: cells stretch to fill the
   row's width (the daily status-page strip overrides this below). */
.uptime-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 16px;
  min-width: 0;
  overflow: hidden;
}
.uptime-bars .bar {
  flex: 1 1 0;
  min-width: 1px;
  height: 100%;
  border-radius: 2px;
  background: var(--up);
  opacity: 0.82;
}
/* the dedicated day strip (public status page + monitor detail) is a FIXED frame
   of 90 daily cells: each bar is a 6×16 token that flex-scales to fill the width
   (grows on wide layouts, shrinks toward its 2px floor when cramped), separated by
   a small gap. Missing days render as neutral placeholders (.bar.none). */
.uptime-bars.daily {
  height: 16px;
  gap: 2px;
  border-radius: 3px;
}
.uptime-bars.daily .bar {
  flex: 1 1 6px;
  min-width: 2px;
  border-radius: 2px;
  box-shadow: none;
}
/* the uptime widget's header row holds the ◀ ▶ pager (paid plans only). */
.uptime-head {
  display: flex;
  justify-content: flex-end;
  min-height: 4px;
  margin-bottom: 8px;
}
.uptime-pager {
  display: flex;
  gap: 6px;
  align-items: center;
}
.up-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  color: var(--text-dim);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.up-nav:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--text-faint);
}
.up-nav:disabled {
  opacity: 0.4;
  cursor: default;
}
/* dim the widget while a page is being fetched, and swallow clicks meanwhile. */
#uptime-widget.busy {
  opacity: 0.6;
  pointer-events: none;
}
/* the strip's caption: "N days ago" · uptime% · "today" */
.uptime-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--mono);
}
.uptime-axis .mid {
  color: var(--text-dim);
}
.uptime-bars .bar.up {
  background: var(--up);
}
/* per-day strip (public status page) carries a partial-outage level the
   per-check strip never emits */
.uptime-bars .bar.degraded {
  background: var(--degraded);
  opacity: 1;
}
.uptime-bars .bar.down {
  background: var(--down);
  opacity: 1;
}
/* not-yet-probed slot: a neutral placeholder so every strip is the same width */
.uptime-bars .bar.none {
  background: var(--border);
  opacity: 0.5;
}

/* ============================================================= marketing === */

.mk {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* nav */
.mk-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(1.4) blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border);
}
.mk-nav-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.mk-nav .links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
}
.mk-nav .links a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-weight: 500;
  transition: color 0.12s;
}
.mk-nav .links a:hover {
  color: var(--text);
}
.mk-nav .spacer {
  flex: 1;
}
.mk-nav .actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* hero */
.hero {
  position: relative;
  text-align: center;
  padding: 92px 0 40px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -140px;
  left: 50%;
  width: 720px;
  height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    var(--glow-soft),
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}
.hero > * {
  position: relative;
  z-index: 1;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  /* Martian Mono runs wide — smaller max + wider measure keeps this to ~3 lines */
  font-size: clamp(1.9rem, 4.3vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin: 22px auto 0;
  max-width: 19ch;
}
.hero h1 .lit {
  color: var(--glow);
  text-shadow: 0 0 34px var(--glow-line);
}
.hero .sub {
  max-width: 60ch;
  margin: 20px auto 0;
  color: var(--text-dim);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}
.hero .cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* trust strip */
.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 48px;
  padding: 46px 24px;
  text-align: center;
}
.trust .stat {
  min-width: 130px;
}
.trust .n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
}
.trust .n small {
  color: var(--glow);
  font-size: 1.1rem;
}
.trust .l {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 2px;
}

/* generic marketing section */
.section {
  padding: 74px 0;
  scroll-margin-top: 72px; /* land below the sticky nav on anchor jumps */
}
.section-head {
  max-width: 60ch;
  margin: 0 auto 44px;
  text-align: center;
}
.section-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 12px 0 0;
}
.section-head p {
  color: var(--text-dim);
  margin: 14px 0 0;
  font-size: 1.05rem;
}

/* features */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.feature {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.feature:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.feature .ico {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--glow-soft);
  color: var(--glow);
  margin-bottom: 16px;
}
.feature .ico svg {
  width: 22px;
  height: 22px;
}
.feature h3 {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  margin: 0 0 7px;
}
.feature p {
  color: var(--text-dim);
  margin: 0;
  font-size: 0.95rem;
}

/* how it works — a genuine ordered sequence, so numbering is meaningful */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 26px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.step .num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--glow);
  letter-spacing: 0.1em;
}
.step h3 {
  font-family: var(--display);
  font-size: 1.15rem;
  margin: 12px 0 6px;
}
.step p {
  color: var(--text-dim);
  margin: 0;
  font-size: 0.95rem;
}

/* pricing */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
/* Shown when /api/plans can't be reached, in place of an empty plan grid. */
.price-unavailable {
  color: var(--text-dim);
  text-align: center;
  padding: 32px 0;
}
.plan {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.plan.featured {
  border-color: var(--glow-line);
  box-shadow: var(--shadow-glow);
  position: relative;
}
.plan.featured::after {
  content: attr(data-badge);
  position: absolute;
  top: -11px;
  left: 24px;
  background: var(--glow);
  color: var(--on-glow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
}
.plan .tier {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
}
.plan .price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.6rem;
  letter-spacing: -0.03em;
  margin: 10px 0 2px;
}
.plan .price span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0;
}
.plan .blurb {
  color: var(--text-dim);
  font-size: 0.92rem;
  min-height: 40px;
}
.plan ul {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--text);
}
.plan li svg {
  width: 17px;
  height: 17px;
  color: var(--up);
  flex: none;
  margin-top: 2px;
}
/* Hover-focus: the card under the pointer lifts and glows while its siblings
   recede, so attention lands on one plan at a time. The CTA recolours to the
   glow accent to reinforce which plan is in focus. */
.plan {
  transition:
    transform 0.16s ease,
    opacity 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}
.price-grid:hover .plan {
  opacity: 0.55;
}
.price-grid .plan:hover {
  opacity: 1;
  transform: translateY(-6px);
  border-color: var(--glow-line);
  box-shadow:
    var(--shadow-glow),
    0 18px 40px -24px var(--glow-line);
}
/* Recolour the focused card's CTA to the glow accent. Disabled CTAs (the Team
   "Contact us" with no SUPPORT_EMAIL) are excluded so they stay greyed-out. */
.plan:hover .btn-ghost:not(:disabled) {
  background: var(--glow-soft);
  border-color: var(--glow);
  color: var(--glow-bright);
}
.plan:hover .btn-primary:not(:disabled) {
  filter: brightness(1.12);
}

/* footer */
.mk-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-inset);
  margin-top: 40px;
}
.mk-footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 52px 24px 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
}
.mk-footer .about {
  max-width: 34ch;
}
.mk-footer .about p {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 14px 0 0;
}
.mk-footer .col h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin: 0 0 14px;
}
.mk-footer .col a {
  display: block;
  color: var(--text-dim);
  padding: 5px 0;
  font-size: 0.93rem;
}
.mk-footer .col a:hover {
  color: var(--text);
}
.mk-footer-base {
  max-width: 1140px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  color: var(--text-faint);
  font-size: 12.5px;
}
.mk-footer-base a {
  margin-left: auto;
  color: var(--text-faint);
}
.mk-footer-base a:hover {
  color: var(--text);
}

/* legal / prose pages (privacy) — a single readable column in the marketing chrome */
.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}
.prose h1 {
  font-family: var(--display);
  font-size: 2rem;
  letter-spacing: -0.02em;
  margin: 10px 0 6px;
}
.prose .prose-updated {
  color: var(--text-faint);
  font-size: 0.85rem;
  margin-bottom: 24px;
}
.prose .prose-lead {
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.7;
}
.prose-sec {
  margin-top: 26px;
}
.prose-sec h2 {
  font-family: var(--display);
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.prose-sec p {
  color: var(--text-dim);
  line-height: 1.75;
}
.prose-sec a {
  color: var(--glow);
}

/* ================================================================== auth === */

.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.auth-top {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.auth-main {
  display: grid;
  place-items: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.auth-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 620px;
  height: 380px;
  transform: translate(-50%, -30%);
  background: radial-gradient(
    ellipse at center,
    var(--glow-soft),
    transparent 66%
  );
  pointer-events: none;
}
.auth-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  box-shadow: var(--shadow);
}
.auth-card h1 {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.auth-card .lede {
  color: var(--text-dim);
  font-size: 0.95rem;
  margin-bottom: 22px;
}
.field {
  display: block;
  margin-top: 14px;
}
.field > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.input {
  width: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.12s;
}
.input:focus {
  outline: none;
  border-color: var(--glow-line);
}
.auth-card .btn-primary {
  margin-top: 18px;
}
.auth-note {
  margin-top: 16px;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  border: 1px solid var(--border);
  background: var(--bg-inset);
  color: var(--text-dim);
}
.auth-note.sent {
  border-color: var(--glow-line);
  background: var(--glow-soft);
  color: var(--text);
}
.auth-note b {
  color: var(--text);
}
.auth-note .wip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--glow);
}
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--text-faint);
  font-size: 12px;
}
.or::before,
.or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.oauth {
  display: grid;
  gap: 9px;
}
.oauth button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}
.oauth button:hover {
  background: var(--bg-elev-2);
  border-color: var(--text-faint);
}
.oauth svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.auth-foot {
  text-align: center;
  color: var(--text-faint);
  font-size: 12.5px;
  padding: 22px;
}
.auth-foot a {
  color: var(--text-dim);
}
.auth-foot a:hover {
  color: var(--text);
}

/* ========================================================= dashboard shell = */

.shell {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.2s ease;
}
.shell.collapsed {
  grid-template-columns: var(--nav-w-collapsed) 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 14px;
  overflow: hidden;
}
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
}
.sidebar .brand .label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
}
/* collapse control lives in the header, pinned to the right of the wordmark */
.nav-toggle {
  margin-left: auto;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition:
    color 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}
.nav-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-elev-2);
}
.nav-toggle svg {
  width: 16px;
  height: 16px;
}

.tenant-label {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 6px 2px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.tenant-switch {
  position: relative;
}
.tenant-switch select {
  appearance: none;
  width: 100%;
  background: var(--bg-inset);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 30px 10px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}
.tenant-switch::after {
  content: "▾";
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-weight: 500;
  white-space: nowrap;
  transition:
    background 0.12s,
    color 0.12s;
}
.nav a:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}
.nav a.active {
  background: var(--glow-soft);
  color: var(--glow);
}
.nav a.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--glow);
}
.nav .ico {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
}
.nav .ico svg {
  width: 18px;
  height: 18px;
}
.nav .ext {
  margin-left: auto;
  color: var(--text-faint);
  font-size: 12px;
}

.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* plan button: a compact row above the user chip that deep-links to the
   Settings Usage tab; shows the current plan as a .plan-badge. */
.plan-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-inset);
  min-width: 0;
}
.plan-nav:hover {
  border-color: var(--border-strong);
}
.plan-nav-cap {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  min-width: 0;
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: transparent;
  color: var(--glow);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  flex: none;
  overflow: hidden;
}
/* When the avatar value is a URL, fill and crop the fixed-size box. */
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.user-chip .meta {
  overflow: hidden;
  min-width: 0;
}
.user-chip .meta b {
  display: block;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-chip .meta span {
  color: var(--text-faint);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.foot-row {
  display: flex;
  gap: 8px;
}
.foot-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
}
.foot-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
/* auto-refresh cadence toggle in the sidebar foot: accent when active */
.foot-btn.auto-refresh.on {
  color: var(--glow);
  border-color: var(--glow-line);
}
/* sidebar create-actions (add monitor / new incident): stacked, left-aligned,
   natural height (foot-btn's flex:1 would stretch them in this column). */
.nav-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.nav-actions .foot-btn {
  flex: none;
  justify-content: flex-start;
}
/* disabled create-action (e.g. Add monitor before any group exists) */
.foot-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.foot-btn:disabled:hover {
  color: var(--text-dim);
  border-color: var(--border);
}
.foot-btn svg {
  width: 16px;
  height: 16px;
}

/* collapsed state: icon-only with hover tooltips */
.shell.collapsed .sidebar {
  padding: 16px 10px;
  align-items: stretch;
}
.shell.collapsed .brand .label,
.shell.collapsed .tenant-label,
.shell.collapsed .tenant-switch,
.shell.collapsed .nav a span.txt,
.shell.collapsed .nav .ext,
.shell.collapsed .user-chip .meta,
.shell.collapsed .plan-nav-cap,
.shell.collapsed .foot-btn .txt {
  display: none;
}
/* collapsed: keep only the plan badge, centered */
.shell.collapsed .plan-nav {
  justify-content: center;
  padding: 8px 0;
}
/* collapsed: drop the wordmark, keep the toggle centered and reachable */
.shell.collapsed .sidebar .brand {
  justify-content: center;
  padding: 6px 0;
}
.shell.collapsed .brand .wordmark {
  display: none;
}
.shell.collapsed .brand .nav-toggle {
  margin-left: 0;
}
.shell.collapsed .nav a {
  justify-content: center;
  padding: 10px 0;
}
.shell.collapsed .user-chip {
  justify-content: center;
}
.shell.collapsed .foot-row {
  flex-direction: column;
}
/* tooltip driven by data-tip, only when collapsed — shared by the tenant
   sidebar and the admin operator rail (icon-only when collapsed) */
.shell.collapsed [data-tip],
.ac-shell.collapsed [data-tip] {
  position: relative;
}
.shell.collapsed [data-tip]:hover::after,
.ac-shell.collapsed .ac-nav-item[data-tip]:hover::after,
.ac-shell.collapsed .ac-foot-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow);
  z-index: 50;
  pointer-events: none;
}

/* content region */
.content {
  min-width: 0;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar .titles h1 {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar .titles .sub {
  color: var(--text-dim);
  font-size: 13px;
}
.topbar .actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}
.page {
  padding: 26px 30px 70px;
  max-width: 1120px;
}

.plan-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--glow-soft);
  color: var(--glow);
  font-weight: 700;
}

/* usage tiles */
.usage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.utile {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.utile .k {
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.utile .k svg {
  width: 15px;
  height: 15px;
  color: var(--text-faint);
}
.utile .v {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 12px;
}
.utile .v small {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-faint);
}
.utile .v.up {
  color: var(--up);
}
.utile .meter {
  height: 5px;
  border-radius: 3px;
  background: var(--bg-inset);
  margin-top: 14px;
  overflow: hidden;
}
.utile .meter i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--glow);
}
.utile .meter i.up {
  background: var(--up);
}
.utile .foot {
  color: var(--text-faint);
  font-size: 11.5px;
  margin-top: 8px;
}

/* cards */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.card + .card {
  margin-top: 16px;
}
.card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-head svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--text-dim);
}
.card-head .sub {
  color: var(--text-faint);
  font-weight: 400;
  font-size: 12px;
}
.card-body {
  padding: 18px;
}

/* group block on overview/status */
.group-block + .group-block {
  margin-top: 16px;
}
.group-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
}
/* owner drag handle: the ONLY drag source on the summary, so grabbing it never
   toggles the fold or follows the group-name link. Tall enough (≥40px) for a
   comfortable touch/pointer target even though the row is compact. */
.drag-handle {
  flex: none;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  min-height: 40px;
  margin: -8px 2px -8px 0;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: grab;
  user-select: none;
  border-radius: var(--radius-sm);
  transition:
    color 0.12s ease,
    background 0.12s ease;
}
.drag-handle:hover,
.drag-handle:focus-visible {
  color: var(--glow);
  background: var(--bg-elev-2);
  outline: none;
}
.drag-handle:active {
  cursor: grabbing;
}
/* the block being dragged dims and glows so its live position is legible; this
   doubles as the drop-target affordance since the block moves under the cursor */
.group-block.dragging {
  opacity: 0.55;
  outline: 1px solid var(--glow);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.group-title .count {
  color: var(--text-faint);
  font-weight: 500;
  font-size: 12px;
  font-family: var(--font);
}
/* Right-align the metadata cluster (SLA rollup, monitor count, status mark) so
   it lands in the same place on every row — the group description, when present,
   fills the gap; when absent (e.g. Data), this auto margin holds the column. */
.group-title .group-roll {
  margin-left: auto;
}
/* the overview group header is a <details> summary: the line toggles the fold
   (the group name is its only link and navigates instead). Native marker
   hidden; our own leading chevron rotates on [open], like the incident cards. */
summary.group-title {
  cursor: pointer;
  list-style: none;
}
summary.group-title::-webkit-details-marker {
  display: none;
}
summary.group-title::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
details[open] > summary.group-title::before {
  transform: rotate(45deg);
}
summary.group-title:hover::before {
  border-color: var(--glow);
}
/* dim one-line group description, shared by every group surface */
.group-desc {
  color: var(--text-dim);
  font-family: var(--font);
  font-weight: 400;
  font-size: 12.5px;
}
/* inside the summary it stays one line and truncates (visible when folded) */
summary.group-title .group-desc {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the name link stays subtle so the summary reads as one toggle line */
.group-title .group-name {
  color: inherit;
  text-decoration: none;
}
.group-title .group-name:hover {
  color: var(--glow);
  text-decoration: underline;
}
/* dim member-state rollup in the summary — the folded at-a-glance story */
.group-roll {
  color: var(--text-dim);
  font-family: var(--font);
  font-weight: 400;
  font-size: 12px;
  white-space: nowrap;
}
.group-roll .gi-alert {
  color: var(--down);
}
/* group SLA figure, coloured against the workspace target */
.group-sla {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.group-sla.ok {
  color: var(--up);
}
.group-sla.bad {
  color: var(--down);
}
/* compact ongoing-incident strip under a group's monitor rows — dim and thin,
   clearly subordinate to the rows above */
.gi-strip {
  padding: 6px 0 2px;
}
.gi-head {
  padding: 4px 18px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.gi-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 18px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text-dim);
  text-decoration: none;
}
.gi-row:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}
.gi-row .gi-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text);
}
.gi-row .gi-mon {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
}
.gi-row .gi-when {
  margin-left: auto;
  flex: none;
  font-size: 11.5px;
  color: var(--text-faint);
}
/* direct child only: the row's trailing arrow, not the EKG chip's inner svg */
.gi-row > svg {
  width: 13px;
  height: 13px;
  flex: none;
}
/* merged monitors page: group status-page controls, pushed right by a spacer */
.group-spacer {
  flex: 1 1 8px;
}
.grp-ctrls {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* The active default status page: a labelled, accent-outlined badge so it
   clearly stands out from the icon-only "set as default" globes on other groups. */
.grp-default {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--glow-soft);
  color: var(--glow);
  border: 1px solid var(--glow-line);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
}
.grp-default svg {
  width: 13px;
  height: 13px;
}
.grp-default-txt {
  white-space: nowrap;
}

/* page-level status filter (monitors) */
.page-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

/* monitor row */
.monitor-row {
  display: grid;
  grid-template-columns: 34px 1.5fr 1.5fr 84px 92px;
  align-items: center;
  gap: 14px;
  /* compacted ~25% vertically into a tighter instrument readout — the 34px EKG
     chip still centres against the shorter row */
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.monitor-row:last-child {
  border-bottom: none;
}
.monitor-row:hover {
  background: var(--bg-elev-2);
}
.monitor-row .name {
  font-weight: 600;
}
.monitor-row .meta {
  color: var(--text-faint);
  font-size: 12px;
}
.monitor-row .url {
  color: var(--text-faint);
  font-size: 12px;
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.monitor-row .num {
  text-align: right;
  font-family: var(--mono);
  /* align the digit columns row-to-row for a clean readout */
  font-variant-numeric: tabular-nums;
}
.monitor-row .num b {
  font-weight: 600;
}
.monitor-row .num .k {
  color: var(--text-faint);
  font-size: 11px;
  font-family: var(--font);
}

/* monitor detail */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 14px;
}
.back-link:hover {
  color: var(--text);
}
.back-link svg {
  width: 16px;
  height: 16px;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.kv {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
}
.kv:last-child {
  border-bottom: none;
}
.kv .k {
  color: var(--text-dim);
}
.kv .v {
  font-weight: 600;
  font-family: var(--mono);
}
.spark {
  width: 100%;
  height: 64px;
  display: block;
}
.spark path.line {
  fill: none;
  stroke: var(--glow);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.spark path.area {
  fill: var(--glow-soft);
  stroke: none;
}

/* incidents */
.incident {
  border-bottom: 1px solid var(--border);
}
.incident:last-child {
  border-bottom: none;
}
.incident > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 14px 40px 14px 18px;
}
.incident > summary::-webkit-details-marker {
  display: none;
}
/* fold chevron — rotates down when the incident is open */
.incident > summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 19px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.incident[open] > summary::after {
  transform: rotate(45deg);
}
.incident > summary:hover::after {
  border-color: var(--glow);
}
.incident .top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.incident .top .ekg {
  margin-left: auto;
}
.incident .title {
  font-weight: 600;
}
.incident .when {
  color: var(--text-faint);
  font-size: 12px;
}
.incident-body {
  padding: 2px 18px 16px;
}

/* ---- incident update timeline -------------------------------------------- */
.timeline {
  position: relative;
  margin: 4px 0 2px;
}
.tl-item {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 14px 0;
}
.tl-item:last-child {
  padding-bottom: 0;
}
/* connecting line down the dots */
.tl-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 3px;
  flex: none;
  z-index: 1;
}
.tl-dot.up {
  background: var(--up);
}
.tl-dot.degraded {
  background: var(--degraded);
}
.tl-dot.down {
  background: var(--down);
}
.tl-main {
  min-width: 0;
}
.tl-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 2px;
}
.tl-stage {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tl-stage.up {
  color: var(--up);
}
.tl-stage.degraded {
  color: var(--degraded);
}
.tl-stage.down {
  color: var(--down);
}
.tl-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}
.tl-body {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
}
.tl-empty {
  color: var(--text-faint);
  font-size: 13px;
  font-style: italic;
}

/* ---- owner incident controls (post update / resolve, new incident) ------- */
.incident-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.upd-form,
.ni-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ni-form {
  margin: 4px 0 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
}
.ni-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.ni-title {
  flex: 1 1 220px;
}
.upd-status,
.ni-monitor,
.ni-sev {
  font-family: var(--font);
}
.upd-body,
.ni-summary {
  width: 100%;
  display: block;
  resize: vertical;
  min-height: 66px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.6;
}
.upd-actions,
.ni-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.upd-msg,
.ni-msg {
  font-size: 12px;
}

/* incident log All / Active / Resolved filter */
.log-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 18px 14px;
  border-bottom: 1px solid var(--border);
}

/* ---- chips: the shared filter/switcher pill recipe -----------------------
   .lf-chip (log + monitor filters), .uhm-chip (heatmap service switcher), and
   .uhm-range (heatmap range) share one idle/hover/transition; each adds only
   its own shape/active delta. */
.lf-chip,
.uhm-chip,
.uhm-range {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}
.lf-chip:hover,
.uhm-chip:hover,
.uhm-range:hover {
  color: var(--text);
  border-color: var(--text-faint);
}
/* pill chips (filter + service switcher) share a rounded shape + glow-soft active */
.lf-chip,
.uhm-chip {
  border-radius: 999px;
  font-weight: 500;
}
.lf-chip.active,
.uhm-chip.active {
  border-color: var(--glow-line);
  background: var(--glow-soft);
  color: var(--text);
}
.lf-chip {
  padding: 5px 12px;
}
.uhm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
}
.uhm-range {
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  font-family: var(--mono);
}
.uhm-range.active {
  background: var(--glow);
  color: var(--on-glow);
  border-color: var(--glow);
}
.sev {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}
.sev.minor {
  background: var(--degraded-soft);
  color: var(--degraded);
}
.sev.major,
.sev.critical {
  background: var(--down-soft);
  color: var(--down);
}
.incident .when .mono {
  color: var(--text-dim);
}
.incident .when .mono:hover {
  color: var(--glow);
}

/* ---- Reliability: uptime heatmap ------------------------------------------ */

.heatmap {
  padding-bottom: 4px;
}
.hm-grid {
  display: grid;
  gap: 5px;
}
.hm-row {
  display: grid;
  grid-template-columns: minmax(0, 175px) 1fr;
  align-items: center;
  gap: 12px;
}
/* block, not flex: the monitor name is a bare text node, and text-overflow
   only ellipsizes inline content in a block container — a flex label clips
   the anonymous text item mid-word instead. */
.hm-label {
  display: block;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.hm-label .ekg {
  margin-right: 8px;
}
.hm-label:hover {
  color: var(--glow);
}
.hm-cells {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 4px;
}
.hm-cell {
  height: 15px;
  border-radius: 3px;
  background: var(--bg-inset);
}
.hm-cell.up {
  background: var(--up);
}
.hm-cell.degraded {
  background: var(--degraded);
}
.hm-cell.down {
  background: var(--down);
}
.hm-axis {
  display: flex;
  justify-content: space-between;
  width: 566px;
  margin: 10px 0 0 162px;
  color: var(--text-faint);
  font-size: 11px;
  font-family: var(--mono);
}

/* ---- Reliability: interactive single-service heatmap ---------------------- */
/* One service in focus with a switcher + a plan-gated range switcher. The day
   grid wraps (auto-fit) so it never needs a horizontal scrollbar. */

.uhm-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.uhm-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.uhm-ranges {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* .uhm-chip / .uhm-range styling lives with the shared chip recipe above. */
.uhm-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  font-size: 11.5px;
  color: var(--text-faint);
}
.uhm-lock svg {
  width: 13px;
  height: 13px;
}
.uhm-focus-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  margin-bottom: 12px;
}
.uhm-focus-head .muted {
  margin-left: auto;
  font-size: 12.5px;
  font-family: var(--mono);
}
.uhm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15px, 1fr));
  gap: 5px;
}
.uhm-day {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--bg-elev-2);
  transition: transform 0.1s ease;
}
.uhm-day:hover {
  transform: scale(1.18);
}
.uhm-day.up {
  background: var(--up);
}
.uhm-day.degraded {
  background: var(--degraded);
}
.uhm-day.down {
  background: var(--down);
}
.uhm-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: var(--text-faint);
  font-size: 11px;
  font-family: var(--mono);
}
.uhm-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-dim);
}
/* heatmap legend swatch for the dashboard heatmap; heatLegend() emits "sw". */
.uhm-legend .sw {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.uhm-legend .sw:not(:first-child) {
  margin-left: 10px;
}
.uhm-legend .sw.up {
  background: var(--up);
}
.uhm-legend .sw.degraded {
  background: var(--degraded);
}
.uhm-legend .sw.down {
  background: var(--down);
}

/* settings */
.section-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 26px 0 12px;
  font-weight: 700;
}
.form-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.form-row:last-child {
  border-bottom: none;
}
.form-row .desc {
  color: var(--text-faint);
  font-size: 12px;
  margin-top: 2px;
}
/* workspace-name field: input plus its inline auto-save indicator, stacked */
.ws-name-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* subtle "Saving…/Saved" text shown after an auto-save on blur */
.autosave-msg {
  min-height: 15px;
  font-size: 12px;
  color: var(--text-faint);
  transition: color 0.12s ease;
}
.autosave-msg.err {
  color: var(--down);
}
/* members roster: one row per member (avatar · name/email · role · remove) plus
   the invite form. Reuses .ac-avatar and .row-btn from the admin roster. */
.mbr-list {
  padding: 4px 0;
}
.mbr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.mbr-row:last-child {
  border-bottom: 0;
}
.mbr-main {
  flex: 1;
  min-width: 0;
}
.mbr-name {
  font-weight: 600;
}
.mbr-you {
  font-weight: 400;
  color: var(--text-faint);
  font-size: 12px;
}
.mbr-email {
  font-size: 12px;
  color: var(--text-faint);
}
.mbr-role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.mbr-role-sel,
.mbr-invite-role {
  width: auto;
}
.mbr-msg {
  min-width: 60px;
  text-align: right;
}
.mbr-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
}
.mbr-invite-email {
  flex: 1;
  min-width: 200px;
}
/* notification channels: a list of editable channel cards. Each card is a small
   panel — a kind badge + per-channel Test/remove actions on top, its field(s)
   below — so the whole tenant channel list stacks in one card container. */
.nf-card-list {
  display: flex;
  flex-direction: column;
}
/* one channel per block: an aligned control row plus the auto-save/test line
   below it (kept out of the row so it can't push the row off centre) */
.nf-card {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.nf-card:last-child {
  border-bottom: none;
}
/* the aligned row: [kind badge] [ input(s) ] … [Test] [remove], all one height */
.nf-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* the kind badge — the row's label; a full-height block so it lines up with the
   input and the action buttons (same height + corner radius) */
.nf-kind {
  flex: 0 0 84px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.nf-field-inputs {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
}
.nf-field-inputs .input {
  flex: 1;
  min-width: 0;
}
.nf-card-actions {
  flex: none;
  display: inline-flex;
  gap: 6px;
}
/* badge, input and the action buttons share one control height so the row lines up */
.nf-card .input {
  height: 42px;
  padding-block: 0;
}
.nf-card .nf-card-actions .btn-icon {
  width: 42px;
  height: 42px;
}
/* the test/auto-save line sits under the row, indented to start under the inputs */
.nf-card .nf-test-msg {
  display: block;
  margin: 4px 0 0 98px;
}
@media (max-width: 620px) {
  .nf-card-row {
    flex-wrap: wrap;
  }
  .nf-field-inputs {
    flex-basis: 100%;
    order: 3;
  }
  .nf-card .nf-test-msg {
    margin-left: 0;
  }
}
/* empty state — no channels yet (settings list) or none configured (group pick) */
.nf-empty {
  padding: 16px 18px;
  color: var(--text-dim);
  font-size: 13px;
}
/* the Add-channel row: the button, the kind picker it reveals (wrapping onto its
   own line), an upgrade hint, and the shared auto-save indicator */
.nf-add-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 2px;
}
.nf-kind-picker {
  flex-basis: 100%;
  order: 3;
}
/* .chip-set's display:flex would otherwise win over the hidden attribute */
.nf-kind-picker[hidden] {
  display: none;
}
.nf-msg {
  margin-left: auto;
}
/* a link-styled button (no chrome), used for the inline channel-limit upgrade hint */
.btn-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--glow);
}
.btn-link:hover {
  text-decoration: underline;
}
.nf-add-hint {
  font-size: 12px;
}
.im-sub {
  display: block;
}
.im-sub-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.im-tg {
  display: grid;
  gap: 12px;
}
/* usage tab: one row per plan-limited resource, each a label + figure and,
   when the resource is capped, a thin fill bar reading "how full" it is */
.usage-row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.usage-row:last-child {
  border-bottom: none;
}
.usage-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.usage-label {
  font-weight: 500;
}
.usage-fig {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  font-size: 13px;
}
.usage-note {
  color: var(--text-faint);
  font-size: 12px;
}
.usage-meter {
  height: 5px;
  border-radius: 3px;
  background: var(--bg-inset);
  margin-top: 10px;
  overflow: hidden;
}
.usage-meter i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--glow);
}
.usage-meter i.full {
  background: var(--down);
}
.usage-empty {
  padding: 16px 18px;
  color: var(--text-faint);
  font-size: 13px;
}
.chip-set {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 13px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  transition:
    color 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}
button.chip {
  cursor: pointer;
}
button.chip:hover {
  color: var(--text);
  border-color: var(--text-faint);
}
.chip svg {
  width: 14px;
  height: 14px;
}
.chip.on {
  background: var(--glow-soft);
  color: var(--glow);
  border-color: transparent;
}
button.chip.on:hover {
  color: var(--glow);
}

/* empty state */
.empty {
  padding: 40px 18px;
  text-align: center;
  color: var(--text-dim);
}
.empty .big {
  font-size: 1.6rem;
  margin-bottom: 6px;
}
.empty-cta {
  margin-top: 14px;
}

/* ---- tabs (Incidents: log vs heatmap; Monitor: probes vs 90 days) --------- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--border);
}
/* settings: the tab strip sits above free-standing section cards, so it needs
   its own breathing room (panels have no card wrapper here) */
#settingsTabs > .tabs {
  margin-bottom: 16px;
}
/* tab strip with right-aligned actions (e.g. New group): the divider moves to
   the row so it also runs under the action button; the inner tab list keeps
   its own padding and wrapping. */
.tabs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 8px;
  border-bottom: 1px solid var(--border);
}
.tabs-row .tabs {
  flex: 1;
  min-width: 0;
  border-bottom: none;
}
.tabs-row > .btn {
  flex: none;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition:
    color 0.12s ease,
    background 0.12s ease;
}
/* direct child only: the tab's own glyph — must not resize the EKG chip's
   nested svg, which sizes itself via .ekg svg */
.tab > svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.tab:hover {
  color: var(--text);
  background: var(--bg-elev-2);
}
/* active tab reads as the front panel: tinted, joined to the content below */
.tab.active {
  color: var(--glow);
  background: var(--bg-elev-2);
  border-color: var(--border);
  margin-bottom: -1px;
}
.tab-count {
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-inset);
  color: var(--text-dim);
}
.tab.active .tab-count {
  background: var(--glow-line);
  color: var(--on-glow);
}

/* ---- modal dialog (new monitor / new incident / incident update) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: start center;
  padding: 8vh 18px 40px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(4px);
  animation: modal-fade 0.14s ease;
}
.modal {
  width: 100%;
  max-width: 600px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  animation: modal-rise 0.16s ease;
}
@keyframes modal-fade {
  from {
    opacity: 0;
  }
}
@keyframes modal-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.modal-x {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
}
.modal-x svg {
  width: 15px;
  height: 15px;
}
.modal-x:hover {
  color: var(--text);
  border-color: var(--text-faint);
}
.modal-body {
  padding: 18px;
}
.modal-loading {
  padding: 20px 4px;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 13px;
}
/* two-column labelled form shared by every dialog */
.modal-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.modal-form .field {
  margin-top: 0;
}
.modal-form .wide {
  grid-column: 1 / -1;
}
/* early "this group is at the plan's monitor limit" warning under the group field */
.nm-group-limit {
  color: var(--down);
  font-size: 12px;
  margin-top: -4px;
}
.modal-form textarea.input {
  resize: vertical;
  min-height: 70px;
  line-height: 1.6;
}
.modal-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.modal-foot .muted {
  margin-right: auto;
  font-size: 12px;
}
@media (max-width: 560px) {
  .modal-form {
    grid-template-columns: 1fr;
  }
}

/* checkbox list (manage groups / add existing dialogs) */
.check-list {
  display: grid;
  gap: 2px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
}
.check-row:hover {
  background: var(--bg-elev-2);
}
.check-row input {
  width: 15px;
  height: 15px;
  accent-color: var(--glow);
  flex: none;
}
/* a control the rest of the form has made inapplicable (e.g. the DNS expected
   value while "expect the record to be gone" is on). Dimmed rather than hidden,
   so it stays legible and its value survives switching back. */
.input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.check-row:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---- Monitors: per-group workspace ---------------------------------------- */
/* group tabs wrap when there are many; each shows a status chip + count */
#groupTabs .tabs {
  flex-wrap: wrap;
  gap: 4px 4px;
}
[data-new-group] svg {
  width: 15px;
  height: 15px;
}

.group-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 18px 4px;
}
.gh-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
}
.gh-title .muted {
  font-family: var(--font);
  font-weight: 400;
  font-size: 12.5px;
}
/* struck-bell marker on a group whose alerts are muted */
.gh-muted {
  display: inline-grid;
  place-items: center;
  color: var(--text-faint);
  cursor: help;
}
.gh-muted svg {
  width: 15px;
  height: 15px;
}
/* group-notifications dialog: the channel pick list dims while the group is muted */
.gs-dim {
  opacity: 0.45;
  transition: opacity 0.15s ease;
}
/* a channel row in the group pick list: a smaller kind badge + a masked endpoint */
.nf-kind-sm {
  padding: 2px 8px;
  font-size: 10px;
}
.gs-ch-endpoint {
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* group description line under the panel header (same inset as group-head) */
.gh-desc {
  padding: 2px 18px 0;
}
.gh-ctrls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.gh-actions {
  margin: 0;
  padding: 8px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.gh-note {
  font-size: 12.5px;
  font-style: italic;
}
/* the settings pill on a group can get long (delivery + prober) — let it clip */
[data-group-settings] {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* management monitor row: not a link, so it carries inline group controls */
.monitor-row.manage {
  grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 1.4fr) 78px auto;
}
.monitor-row.manage .name {
  font-weight: 600;
  color: var(--text);
}
.monitor-row.manage .name:hover {
  color: var(--glow);
}
.mrow-main {
  min-width: 0;
}
.mrow-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.row-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
  transition:
    color 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}
.row-btn svg {
  width: 14px;
  height: 14px;
}
.row-btn:hover {
  color: var(--text);
  border-color: var(--text-faint);
}
.row-btn.danger:hover:not([disabled]) {
  color: var(--down);
  border-color: var(--down);
}
.row-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 720px) {
  .monitor-row.manage {
    grid-template-columns: 34px 1fr auto;
  }
  .monitor-row.manage .mid,
  .monitor-row.manage .num {
    display: none;
  }
}

/* ======================================================= public status ===== */

.status-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.status-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.status-top .theme-btn {
  margin-left: auto;
}
/* preview / visibility affordances on the public status page */
.status-preview-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  background: var(--glow-soft);
  color: var(--glow-bright);
  border: 1px dashed var(--glow-line);
  font-size: 0.9rem;
  font-weight: 600;
}
.status-preview-note svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.status-hidden-badge {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  color: var(--text-faint);
  vertical-align: middle;
}
.status-group.hidden {
  opacity: 0.7;
}
.status-unavailable {
  margin-top: 40px;
  padding: 44px 32px;
  text-align: center;
}
.status-unavailable h2 {
  margin: 0 0 10px;
}
.status-unavailable p {
  margin: 0 auto;
  max-width: 460px;
}

/* ---- global 404 (no-signal) ---------------------------------------------- */
.nf-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  min-height: 100vh;
}
.nf-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 9vh 0 4vh;
}
.nf-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 800;
  font-size: clamp(72px, 19vw, 156px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}
.nf-zero {
  display: inline-flex;
  align-items: center;
  width: clamp(120px, 32vw, 250px);
}
.nf-ekg {
  width: 100%;
  height: clamp(64px, 16vw, 120px);
}
.nf-ekg-base {
  stroke: var(--border-strong);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nf-ekg-scan {
  stroke: var(--down);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--down) 65%, transparent));
  stroke-dasharray: 13 87;
  animation: nf-scan 2.8s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes nf-scan {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.nf-title {
  margin: 0;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.nf-body {
  margin: 0;
  max-width: 440px;
  color: var(--text-dim);
  line-height: 1.6;
}
.nf-cta {
  margin-top: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .nf-ekg-scan {
    animation: none;
    stroke-dasharray: none;
  }
}

/* Settings → status page: the master toggle + preview-link row */
.sp-toggle-row,
.sp-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chip.sp-toggle.on {
  color: var(--up);
  border-color: color-mix(in srgb, var(--up) 45%, transparent);
}
.sp-toggle svg {
  width: 15px;
  height: 15px;
}
.sp-preview-url {
  min-width: 240px;
  flex: 1 1 240px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.82rem;
}
/* the group publish toggle echoes the "live" accent when a group is public */
.btn-icon.on {
  color: var(--up);
}
.status-banner {
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.05rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.status-banner.operational {
  background: var(--up-soft);
  color: var(--up);
  border-color: color-mix(in srgb, var(--up) 30%, transparent);
}
.status-banner.degraded {
  background: var(--degraded-soft);
  color: var(--degraded);
  border-color: color-mix(in srgb, var(--degraded) 30%, transparent);
}
.status-banner.major_outage {
  background: var(--down-soft);
  color: var(--down);
  border-color: color-mix(in srgb, var(--down) 30%, transparent);
}
.status-banner .big {
  font-size: 1.5rem;
}
.status-banner .upd {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  font-family: var(--mono);
}
.status-group {
  margin-top: 14px;
}
/* group description tucked between the heading and its card */
.sg-desc {
  margin: -2px 0 8px;
}
.status-group > h3 {
  font-family: var(--display);
  font-size: 1rem;
  margin: 0 0 7px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* group heading links to that group's standalone status page */
.status-group-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
}
.status-group-link:hover {
  color: var(--glow);
}
.status-group-link svg {
  width: 15px;
  height: 15px;
  color: var(--text-faint);
}
.status-group-link:hover svg {
  color: var(--glow);
}
/* two columns: the monitor's name + a muted desc on the left, the uptime strip
   filling the right so the bars align down the list and leave no whitespace */
/* A public/fleet status row: the name+meta label sits BESIDE the uptime strip. The
   label column is capped narrow (170px, wide enough for the "NN% uptime · region"
   line) so the strip takes the rest of the row — widening the fixed 90-bar frame
   from ~2px slivers to ~5px bars — and the row is align-stretch so the strip fills
   the label's height, reading as a substantial band rather than a thin line. */
.status-mon {
  display: grid;
  grid-template-columns: minmax(0, 170px) 1fr;
  align-items: stretch;
  gap: 14px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--border);
}
.status-mon:last-child {
  border-bottom: none;
}
.status-mon .l {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.status-mon .l .nm {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  min-width: 0;
}
.status-mon .l .nm span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-mon .l .desc {
  margin-top: 3px;
  color: var(--text-faint);
  font-size: 12px;
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* In a status row the strip fills the row height (bars stretch via the base
   .uptime-bars .bar { height: 100% }) and sits tighter than the detail widget. */
.status-mon .uptime-bars.daily {
  height: auto;
  gap: 1px;
}
.si-item {
  border-bottom: 1px solid var(--border);
}
.si-item:last-child {
  border-bottom: none;
}
.si-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 40px 14px 18px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.si-head::-webkit-details-marker {
  display: none;
}
.si-head::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  margin-top: -5px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.si-item[open] .si-head::after {
  transform: rotate(45deg);
}
.si-head:hover::after {
  border-color: var(--glow);
}
.si-bar {
  width: 4px;
  align-self: stretch;
  border-radius: 3px;
  flex: none;
}
.si-bar.degraded {
  background: var(--degraded);
}
.si-bar.down {
  background: var(--down);
}
.si-body {
  min-width: 0;
  flex: 1;
}
.si-title {
  font-weight: 600;
}
.si-meta {
  color: var(--text-faint);
  font-size: 12px;
  font-family: var(--mono);
  margin-top: 2px;
}
.si-updates {
  padding: 0 18px 16px 34px;
}

/* link from the status page to the split-out history page */
.status-history-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
  transition:
    border-color 0.12s,
    background 0.12s;
}
.status-history-link:hover {
  border-color: var(--glow-line);
  background: var(--bg-elev-2);
}
.status-history-link .arrow {
  display: inline-flex;
  color: var(--glow);
}
.status-history-link .arrow svg {
  width: 18px;
  height: 18px;
}

.status-foot {
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
  margin-top: 34px;
  line-height: 1.9;
}
.status-foot a {
  color: var(--glow);
}

/* ============================================================ responsive === */

@media (max-width: 900px) {
  .feature-grid,
  .steps,
  .price-grid {
    grid-template-columns: 1fr;
  }
  .usage {
    grid-template-columns: repeat(2, 1fr);
  }
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .mk-footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .mk-nav .links {
    display: none;
  }
}

@media (max-width: 720px) {
  .shell,
  .shell.collapsed {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .sidebar .tenant-switch {
    flex: 1;
  }
  .nav {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .sidebar-foot {
    margin: 0;
    flex-direction: row;
    width: 100%;
  }
  .nav a.active::before {
    display: none;
  }
  .topbar {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .topbar .actions {
    margin-left: auto;
  }
  .topbar,
  .page {
    padding-left: 18px;
    padding-right: 18px;
  }
  .monitor-row {
    grid-template-columns: 34px 1fr 76px;
  }
  .monitor-row .url,
  .monitor-row .mid,
  .monitor-row .latency {
    display: none;
  }
  .mk-footer-inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* ===========================================================================
   Admin console — the cross-tenant operator surface. A left icon rail (mirroring
   the tenant sidebar) switches sections; the active section renders into the
   main pane. Instrument-panel readout, hairline tables, icon-only row actions —
   the same night-watch vocabulary as the rest of the console.

   "Operator Amber": on the admin route the router stamps body.in-admin, and the
   console remaps the phosphor-cyan signal to a warm amber so an operator can
   feel they've crossed into a privileged, cross-tenant surface. It's a
   token-level swap (only the --glow* / --on-glow accent tokens) scoped to the
   body, so it also reaches the modals appended outside .ac-shell; semantic
   status colours (up/degraded/down) are untouched. The two tiers match the
   app's own token system exactly — a dark :root default plus an explicit
   [data-theme="light"] override (the app has no prefers-color-scheme tier; it
   is dark until the user toggles).
   =========================================================================== */
body.in-admin {
  --glow: #f5b12e;
  --glow-bright: #ffcb5e;
  --glow-soft: rgba(245, 177, 46, 0.14);
  --glow-line: rgba(245, 177, 46, 0.5);
  --on-glow: #1c1403;
}
:root[data-theme="light"] body.in-admin {
  --glow: #a06f08;
  --glow-bright: #b5800f;
  --glow-soft: rgba(160, 111, 8, 0.13);
  --glow-line: rgba(160, 111, 8, 0.42);
  --on-glow: #fff8ec;
}
.ac-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}
.ac-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  gap: 16px;
  overflow: hidden;
}
.ac-rail-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 4px;
}
.ac-rail-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--glow);
  border: 1px solid var(--glow-line);
  background: var(--glow-soft);
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
}
.ac-rail-badge svg {
  width: 12px;
  height: 12px;
}
.ac-rail-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ac-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  transition:
    background 0.12s,
    color 0.12s;
}
.ac-nav-item:hover {
  color: var(--text);
  background: var(--bg-elev-2);
}
.ac-nav-item.active {
  background: var(--glow-soft);
  color: var(--glow);
}
.ac-nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--glow);
}
.ac-nav-item .ico {
  display: inline-flex;
  flex: none;
}
.ac-nav-item .ico svg {
  width: 18px;
  height: 18px;
}
.ac-rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ac-foot-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13px;
  transition:
    background 0.12s,
    color 0.12s;
}
.ac-foot-btn:hover {
  color: var(--text);
  background: var(--bg-elev-2);
}
.ac-foot-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}
/* collapse toggle rides the rail's right border, vertically centered */
.ac-collapse {
  position: absolute;
  top: 50%;
  right: -13px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border-radius: 50%;
  z-index: 2;
  transition:
    color 0.12s,
    border-color 0.12s;
}
.ac-collapse:hover {
  color: var(--glow);
  border-color: var(--glow-line);
}
.ac-collapse svg {
  width: 15px;
  height: 15px;
}
.ac-main {
  padding: 34px 34px 70px;
  max-width: 1080px;
}

/* collapsed rail: icon-only, labels + badge + brand text hidden */
.ac-shell.collapsed {
  grid-template-columns: 66px 1fr;
}
.ac-shell.collapsed .ac-rail-badge,
.ac-shell.collapsed .ac-rail-brand .label,
.ac-shell.collapsed .ac-nav-item .txt,
.ac-shell.collapsed .ac-foot-btn .txt {
  display: none;
}
.ac-shell.collapsed .ac-nav-item,
.ac-shell.collapsed .ac-foot-btn {
  justify-content: center;
}
.ac-shell.collapsed .ac-nav-item.active::before {
  left: -12px;
}
/* the collapsed icon-only tooltip is shared with the tenant sidebar — see the
   .shell.collapsed / .ac-shell.collapsed [data-tip] rule near the sidebar CSS */
.ac-head {
  margin-bottom: 22px;
}
.ac-head h1 {
  font-size: 22px;
  font-weight: 600;
}
.ac-sub {
  color: var(--text-faint);
  font-size: 13px;
  margin-top: 4px;
}

/* denied + load states keep a simple centered wrap (no rail) */
.admin-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.admin-denied {
  text-align: center;
  padding: 70px 24px;
}
.admin-denied .ad-lock svg {
  width: 40px;
  height: 40px;
  color: var(--text-faint);
}
.admin-denied h2 {
  margin: 14px 0 6px;
}
.admin-denied .btn {
  margin-top: 18px;
}

/* ---- global settings ---- */
.ac-setting {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-top: 1px solid var(--border);
}
.ac-setting:first-of-type {
  border-top: 0;
}
.ac-setting-info {
  flex: 1;
  min-width: 0;
}
.ac-setting-label {
  font-weight: 500;
  font-size: 13.5px;
}
.ac-setting-desc {
  color: var(--text-faint);
  font-size: 12.5px;
  margin-top: 3px;
}
.ac-setting-ctl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* ---- instrument readout ---- */
.ac-readout {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.ac-tile {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px 13px;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ac-tile-v {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ac-tile-k {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 10px;
}
.ac-tile.warn {
  border-color: var(--degraded);
  background: var(--degraded-soft);
}
.ac-tile.warn .ac-tile-v {
  color: var(--degraded);
}
.ac-fleet-dots {
  display: flex;
  gap: 14px;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ac-fd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ac-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--text-faint);
}
.ac-dot.online {
  background: var(--up);
  box-shadow: 0 0 8px -1px var(--up);
}
.ac-dot.degraded {
  background: var(--degraded);
}
.ac-dot.offline {
  background: var(--down);
}
.ac-dot.pending {
  background: var(--text-faint);
}

/* ---- panels ---- */
.ac-panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.ac-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.ac-panel-head h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.ac-panel-ico svg {
  width: 17px;
  height: 17px;
  color: var(--text-dim);
  display: block;
}
.ac-count {
  font-size: 11px;
  color: var(--text-faint);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.ac-panel-sp {
  flex: 1;
}

/* ---- tables (fleet + roster share the row idiom, differ only in columns) ---- */
.ac-table {
  font-size: 13px;
}
.ac-tr {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
}
.ac-table .ac-tr:last-child {
  border-bottom: 0;
}
.ac-th {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-inset);
}
/* fleet: name · region · status · assigned · seen · version · key · actions */
.ac-table:not(.ac-roster) .ac-tr {
  grid-template-columns: 1.5fr 1fr 0.9fr 0.6fr 0.8fr 0.7fr 0.9fr auto;
}
.ac-cell-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  min-width: 0;
}
.ac-cell-name .ekg {
  flex: none;
}
.ac-dim {
  color: var(--text-faint);
}
.ac-cell-status.online {
  color: var(--up);
}
.ac-cell-status.degraded {
  color: var(--degraded);
}
.ac-cell-status.offline {
  color: var(--down);
}
.ac-cell-status.pending {
  color: var(--text-faint);
}
.ac-tr.off .ac-cell-name,
.ac-tr.off .mono {
  opacity: 0.5;
}
.ac-off-tag {
  font-style: normal;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0 5px;
}
.ac-row-actions {
  display: inline-flex;
  gap: 4px;
  justify-content: flex-end;
}
.btn-icon.danger:hover {
  color: var(--down);
  border-color: var(--down);
}

/* ---- fleet-wide dedup readout ---- */
.dedup-ratio {
  color: var(--glow);
  border-color: var(--glow-line);
}
.dedup-lead {
  padding: 12px 18px 4px;
  color: var(--text-dim);
  font-size: 12.5px;
}
.dedup-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 10px 18px 16px;
}
.dedup-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.dedup-stat b {
  font-size: 20px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.dedup-stat span {
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}
.dedup-top-head {
  padding: 0 18px;
  margin: 4px 0 6px;
}
.dedup-top {
  padding: 0 18px 14px;
}
.dedup-empty {
  padding: 20px 18px 24px;
  color: var(--text-faint);
  font-size: 13px;
}
@media (max-width: 720px) {
  .dedup-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- per-prober assigned-task detail ----
   The "Tasks" cell opens a drawer listing what the node actually fetches — one
   row per physical probe. The one accent moment is the SHARED marker: a probe
   that several tenants collapse onto is flagged with an accent left-rule and a
   glow-soft ×N pill, so the dedup is scannable at a glance. Everything else stays
   quiet, matching the console's mono data rows. */
.ac-assigned-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 2px 5px;
  margin: -2px -5px;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.ac-assigned-btn:hover,
.ac-assigned-btn.open {
  background: var(--bg-elev-2);
}
.ac-assigned-btn.open {
  color: var(--glow);
}
.ac-assigned-btn .ac-chev {
  display: inline-flex;
  width: 12px;
  height: 12px;
  color: var(--text-faint);
  transition: transform 0.14s ease;
}
.ac-assigned-btn:hover .ac-chev,
.ac-assigned-btn.open .ac-chev {
  color: inherit;
}
.ac-assigned-btn.open .ac-chev {
  transform: rotate(90deg);
}

.ac-detail {
  padding: 9px 18px 13px 38px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.ac-detail-head {
  display: flex;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 2px 2px 8px;
}
.ac-detail-head .ac-detail-shared {
  color: var(--glow);
}

.ac-asg {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 8px;
  margin: 0 -8px;
  min-width: 0;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ac-asg:hover {
  background: var(--bg-elev-2);
}
/* protocol: a quiet uppercase micro-label, fixed width so every URL left-aligns */
.ac-asg-type {
  flex: none;
  width: 30px;
  align-self: center;
  color: var(--text-faint);
  text-transform: uppercase;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
/* endpoint: the primary datum — mono, may be very long, so it ellipsises here
   rather than pushing the tenants or the badge off the row */
.ac-asg-url {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
/* tenants: secondary — dim, right-aligned, truncates before it can ever wrap */
.ac-asg-who {
  flex: 0 1 auto;
  max-width: 34%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--text-faint);
}
/* the dedup badge: one fetch, N monitors — the console's count-pill, in accent */
.ac-asg-task {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--glow);
  background: var(--glow-soft);
  border-radius: 999px;
  padding: 1px 8px;
}
.ac-asg-task svg {
  width: 11px;
  height: 11px;
}
/* a shared probe is marked, not decorated: one accent left-rule down the row */
.ac-asg.shared {
  border-left-color: var(--glow-line);
}

/* ---- global fallback key hint (shown in Global settings) ---- */
.ac-key-hint {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
}

/* ---- roster ---- */
.ac-tabs {
  display: flex;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
/* roster tables: users = user · email · workspaces; monitors adds a type col */
.ac-roster:not(.ac-mons) .ac-tr {
  grid-template-columns: 1.2fr 1.4fr 1.7fr;
}
.ac-mons .ac-tr {
  /* workspace · monitor · type · groups */
  grid-template-columns: 0.7fr 1.5fr 0.7fr 1.6fr;
}
.ac-mons .ac-mon-rows .ac-tr:last-child {
  border-bottom: 0;
}
.ac-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex: none;
  overflow: hidden;
}
.ac-mchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ac-mchip {
  font-size: 11.5px;
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 1px 9px;
}
.ac-mchip b {
  color: var(--text);
  font-weight: 500;
}
.ac-gchip {
  font-size: 11.5px;
  color: var(--text-dim);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
}
.ac-gchip i {
  font-style: normal;
  color: var(--text-faint);
  margin-left: 3px;
}
.ac-mfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}

/* ---- tenants roster ---- */
.ac-tenants {
  padding: 6px 0;
}
.ac-tenant {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.ac-tenant:last-child {
  border-bottom: 0;
}
.ac-tenant-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.ac-slug {
  font-size: 12px;
  color: var(--text-faint);
}
.ac-plan {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  padding: 1px 7px;
  margin-left: auto;
}
.ac-plan.paid {
  color: var(--glow);
  background: var(--glow-soft);
  border: 1px solid var(--glow-line);
}
.ac-plan.free {
  color: var(--text-faint);
  border: 1px solid var(--border-strong);
}
/* The roster plan badge doubles as a free↔paid toggle: reset the button chrome
   so it reads as the badge, and hint interactivity on hover. */
.ac-plan-btn {
  font: inherit;
  font-size: 10px;
  line-height: inherit;
  background: none;
  cursor: pointer;
  transition:
    opacity 0.12s ease,
    filter 0.12s ease;
}
.ac-plan-btn:hover {
  opacity: 0.85;
  filter: brightness(1.1);
}
.ac-tenant-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
/* per-tenant custom plan editor: a foldable grid of override fields (empty =
   inherit) with a Save action. */
.ac-cl {
  margin-top: 10px;
}
.ac-cl > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-faint);
}
.ac-cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.ac-cl-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-faint);
}
.ac-cl-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- one-time secret + delete conflict ---- */
.ac-secret {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 4px;
}
.ac-secret code {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--glow-bright);
  word-break: break-all;
  flex: 1;
}
.ac-conflict {
  border: 1px solid var(--down-soft);
  background: var(--down-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
}
.ac-conflict ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.ac-conflict li {
  margin: 2px 0;
}
.btn-danger {
  background: var(--down);
  color: #fff;
  border: 1px solid var(--down);
}
.btn-danger:hover {
  filter: brightness(1.08);
}
.foot-admin.active {
  color: var(--glow);
}

@media (max-width: 760px) {
  /* rail folds to a horizontal icon strip above the pane */
  .ac-shell {
    grid-template-columns: 1fr;
  }
  .ac-rail {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .ac-rail-top,
  .ac-rail-badge,
  .ac-nav-item .txt,
  .ac-foot-btn .txt {
    display: none;
  }
  .ac-rail-nav {
    flex-direction: row;
  }
  .ac-nav-item.active::before {
    display: none;
  }
  .ac-rail-foot {
    margin: 0 0 0 auto;
    flex-direction: row;
    align-items: center;
  }
  .ac-main {
    padding: 22px 18px 60px;
  }
  .ac-readout {
    grid-template-columns: repeat(3, 1fr);
  }
  .ac-setting {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .ac-table:not(.ac-roster) .ac-tr {
    grid-template-columns: 1.4fr 0.9fr auto;
  }
  .ac-table:not(.ac-roster) .ac-tr > :nth-child(4),
  .ac-table:not(.ac-roster) .ac-tr > :nth-child(5),
  .ac-table:not(.ac-roster) .ac-tr > :nth-child(6) {
    display: none;
  }
  .ac-roster:not(.ac-mons) .ac-tr {
    grid-template-columns: 1fr 1.4fr;
  }
  .ac-roster:not(.ac-mons) .ac-tr > :nth-child(3) {
    display: none;
  }
  .ac-mons .ac-tr {
    grid-template-columns: 0.8fr 1.4fr;
  }
  .ac-mons .ac-tr > :nth-child(3),
  .ac-mons .ac-tr > :nth-child(4) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html {
    scroll-behavior: auto;
  }
  .ribbon .sweep {
    display: none;
  }
  .ekg.up path,
  .ekg.degraded path,
  .ekg.down path,
  .ekg.pending path {
    animation: none;
  }
}