/* Edusav DevPanel design system, adapted for the Operations Control Center.
   The dark, neutral shell and component geometry follow edusav_devpanel.
   Environment and finding severity remain the only semantic colour channels. */

:root {
  --bg: oklch(0.145 0 0);
  --panel: oklch(0.205 0 0);
  --ink: oklch(0.985 0 0);
  --muted: oklch(0.708 0 0);
  --faint: oklch(0.64 0 0);
  --line: oklch(1 0 0 / 10%);
  --line-strong: oklch(1 0 0 / 16%);
  --accent: oklch(0.922 0 0);
  --accent-ink: oklch(0.205 0 0);
  --accent-soft: oklch(1 0 0 / 7%);
  --ok: oklch(0.74 0.15 162);
  --warn: oklch(0.78 0.14 76);
  --warn-bg: oklch(0.78 0.14 76 / 10%);
  --err: oklch(0.704 0.191 22.216);
  --err-bg: oklch(0.704 0.191 22.216 / 10%);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --r: .625rem;
  --radius: var(--r);
  --shadow: 0 1px 3px rgb(0 0 0 / 22%), 0 1px 2px -1px rgb(0 0 0 / 18%);
  --bar-shadow: 0 -3px 14px rgb(0 0 0 / 45%);
  --overlay: rgb(0 0 0 / 62%);
  --focus: var(--accent);
  --header-h: 84px;
  --r-sm: 5px;
  --r-md: 7px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: oklch(0.985 0 0);
  --panel: oklch(1 0 0);
  --ink: oklch(0.205 0 0);
  --muted: oklch(0.48 0 0);
  --faint: oklch(0.44 0 0);
  --line: oklch(0.205 0 0 / 11%);
  --line-strong: oklch(0.205 0 0 / 18%);
  --accent: oklch(0.269 0 0);
  --accent-ink: oklch(0.985 0 0);
  --accent-soft: oklch(0.205 0 0 / 5%);
  --ok: oklch(0.52 0.14 162);
  --warn: oklch(0.52 0.13 76);
  --warn-bg: oklch(0.78 0.14 76 / 12%);
  --err: oklch(0.58 0.19 22.216);
  --err-bg: oklch(0.704 0.191 22.216 / 9%);
  --shadow: 0 1px 3px rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 8%);
  --bar-shadow: 0 -3px 14px rgb(16 24 40 / 12%);
  --overlay: rgb(0 0 0 / 55%);
  color-scheme: light;
}

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  /* Room for the save bar so it never covers the last row. */
  padding-bottom: 4.5rem;
}

.boot { padding: 4rem 2rem; color: var(--muted); text-align: center; }

/* ── environment band ──────────────────────────────────────────────────────
   The one piece of pure decoration that is load-bearing. */
.band { height: 3px; background: var(--accent); }
.band.dev  { background: #3f8f52; }
.band.stag { background: #d1901f; }
.band.prod { background: #b3261e; }

/* ── header ─────────────────────────────────────────────────────────────── */
header {
  background: color-mix(in oklch, var(--bg) 80%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 30;
}

.hrow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding: .5rem 0;
}
@media (max-width: 980px) {
  :root { --header-h: 128px; }
  .hrow { grid-template-columns: auto auto; row-gap: .5rem; }
  .hrow nav.tabs { grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; }
}
/* Phone: every header section stacks full-width instead of squeezing two
   control clusters onto the same row (envpick + search together no longer
   fit at this width). */
@media (max-width: 640px) {
  header { padding: 0 .75rem; }
  .hrow { grid-template-columns: 1fr; min-height: 0; padding: .6rem 0; }
  .hrow-left, .hrow-right { grid-column: 1; }
  .hrow nav.tabs { grid-column: 1; }
  .hrow-right { justify-content: flex-start; }
  .searchbox { min-width: 0; flex: 1 1 auto; }
}

.hrow-left {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}

.brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.brand-logo { height: 26px; width: auto; display: block; }
.brand-product { color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.hrow-right {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end;
}

.spacer { flex: 1; }

/* Target selector — the most important control on the page. */
.envpick {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .3rem .25rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--panel);
}
.envpick select {
  border: none; background: none; color: var(--ink);
  font: inherit; font-weight: 560; padding: .1rem 1.2rem .1rem .1rem;
  cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.envpick select:focus { outline: 2px solid var(--accent); border-radius: 4px; }

.envtag {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: .12rem .45rem; border-radius: 4px;
  color: #fff; background: var(--faint);
}
.envtag.dev  { background: #2f6b3d; }
.envtag.stag { background: #8a5a09; }
.envtag.prod { background: #b3261e; }

/* Tabs keep status, editing, and service reference separate. Centered in
   the header's middle grid column so it reads as the page's primary
   navigation rather than something wedged between the brand and controls. */
nav.tabs { display: flex; gap: .2rem; justify-content: center; }
nav.tabs button {
  border: none; background: none; color: var(--muted);
  padding: .5rem .85rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
  font: inherit; font-size: 13.5px; cursor: pointer;
  transition: color .12s ease, background-color .12s ease;
}
nav.tabs button:hover { color: var(--ink); background: var(--panel); }
nav.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 560; }
nav.tabs button.on:hover { background: none; }

/* Search: ONE field, not a box around a box. The wrapper draws the only
   border and the only focus ring; the input and the submit button are flush
   segments inside it. The generic input:focus-visible rule is opted out of
   below, or the input would ring itself inside the wrapper's ring. */
.searchbox {
  display: flex; align-items: stretch; height: 30px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg); min-width: 240px; overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.searchbox .ico-slot {
  display: flex; align-items: center; padding-left: .5rem;
  color: var(--faint); flex: none; pointer-events: none;
}
.searchbox .ico-slot .ico { width: 14px; height: 14px; }
.searchbox input {
  border: none; background: none; outline: none; font: inherit; font-size: 12.5px;
  color: var(--ink); width: 100%; min-width: 0; padding: 0 .5rem;
}
.searchbox input::placeholder { color: var(--faint); }
.searchbox input::-webkit-search-cancel-button { cursor: pointer; }
.searchbox .btn {
  flex: none; border: none; border-left: 1px solid var(--line);
  border-radius: 0; background: var(--panel); color: var(--muted);
  font-size: 12px; padding: 0 .7rem; display: flex; align-items: center;
}
.searchbox .btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--ink); }
.searchbox .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Focus lives on the wrapper so the whole control reads as one target. */
.searchbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus); }
.searchbox:focus-within .ico-slot { color: var(--accent); }
.gitops-status { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.gitops-status.ok { color: var(--ok); }
.gitops-status.warn, .gitops-status.stale { color: var(--warn); }
.gitops-status .btn { margin-left: .15rem; }

/* Profile menu: a <details> disclosure positioned as a dropdown, not an
   inline expansion — the summary is the visible trigger, the marker/arrow
   is suppressed so it reads as a button. */
.profile-menu { position: relative; }
.profile-menu > summary { list-style: none; cursor: pointer; }
.profile-menu > summary::-webkit-details-marker { display: none; }
.profile-btn { display: inline-flex; align-items: center; gap: .3rem; }
.profile-btn .ico { opacity: .7; }
.profile-item { display: flex; align-items: center; gap: .45rem; }
.profile-dropdown {
  position: absolute; top: calc(100% + .35rem); right: 0; z-index: 40;
  min-width: 160px; padding: .3rem;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .1rem;
}
.profile-item {
  width: 100%; text-align: left; border: none; background: none;
  color: var(--ink); padding: .45rem .6rem; border-radius: 5px;
  font: inherit; font-size: 13px; cursor: pointer;
}
.profile-item:hover { background: var(--bg); }
.profile-role {
  font-size: 11.5px; color: var(--muted); padding: .3rem .6rem .45rem;
  border-bottom: 1px solid var(--line); margin-bottom: .2rem;
}
.about-gitops { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ── layout ─────────────────────────────────────────────────────────────── */
main { padding: 1.5rem; max-width: 1280px; margin: 0 auto; }

.split { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.split.sidebar-collapsed { grid-template-columns: 52px minmax(0, 1fr); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

.sidebar {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: .7rem; box-shadow: var(--shadow);
  position: sticky; top: calc(var(--header-h) - 16px); max-height: calc(100vh - var(--header-h));
  display: flex; flex-direction: column; min-height: 0;
}
.sidebar.is-collapsed { display: grid; justify-items: center; gap: .75rem; padding: .45rem; }
.sidebar .grouphead {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); padding: 0;
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; }
.sidebar-heading { font-size: 15px; line-height: 1.2; font-weight: 650; }
.sidebar-description { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin: .45rem 0 .65rem; }
.sidebar-toggle {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--muted);
  cursor: pointer;
}
.sidebar-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.current-service { display: flex; align-items: center; gap: .55rem; padding: .75rem 0 .65rem; }
.service-mark {
  display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 6px;
  background: var(--accent-soft); color: var(--accent); font: 700 11px var(--mono); letter-spacing: .03em;
}
button.service-mark { cursor: pointer; }
button.service-mark:hover { border-color: var(--accent); }
.service-current-copy { display: grid; min-width: 0; gap: .05rem; }
.service-current-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; text-transform: capitalize; }
.sidebar-picker-label { display: block; color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .3rem; }
.service-picker {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--bg);
  color: var(--ink); padding: .45rem .5rem; font: 12.5px var(--sans); cursor: pointer;
}
.service-picker:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.service-total, .category-count {
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; line-height: 1; padding: .25rem .45rem; white-space: nowrap;
}
.sidebar-search {
  width: 100%; border: 1px solid var(--line); border-radius: 5px; background: var(--bg);
  color: var(--ink); padding: .45rem .6rem; font: inherit; font-size: 12.5px; margin: 0;
}
.sidebar-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.sidebar-result { color: var(--faint); font-size: 11px; margin: .45rem .1rem .1rem; }
.service-list { display: grid; flex: 1; gap: .6rem; overflow-y: auto; min-height: 0; padding-right: .15rem; }
.service-group { border-top: 1px solid var(--line); padding-top: .55rem; }
.service-group-head { display: flex; align-items: center; justify-content: space-between; padding: 0 .35rem .25rem; }
.service-group-count { color: var(--faint); font: 10.5px var(--mono); }
.sidebar .service-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; text-align: left; border: 1px solid transparent; background: none;
  color: var(--ink); padding: .45rem .5rem; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 13px; text-transform: capitalize;
}
.sidebar .service-item:hover { background: var(--bg); border-color: var(--line); }
.sidebar .service-item.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); color: var(--accent); font-weight: 560; }
.service-label { min-width: 0; display: grid; gap: .1rem; }
.service-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-code { color: var(--faint); font: 10.5px var(--mono); text-transform: none; overflow: hidden; text-overflow: ellipsis; }
.sidebar .service-item.on .service-code { color: inherit; opacity: .75; }
.service-selected { color: var(--accent); font-size: 10.5px; text-transform: none; white-space: nowrap; }
.sidebar-empty { color: var(--faint); font-size: 12.5px; padding: .65rem .55rem; }

/* ── sign in ────────────────────────────────────────────────────────────── */
.signin-page {
  min-height: calc(100vh - 3px); display: grid; place-items: center;
  padding: 2rem 1.25rem 5rem;
}
.signin-card {
  width: min(100%, 390px); padding: 2rem; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.signin-logo {
  display: block; height: 36px; width: auto; margin: 0 auto 1.35rem;
}
.signin-card h1 { font-size: 22px; font-weight: 650; letter-spacing: -.025em; margin: 0; }
.signin-copy { color: var(--muted); margin: .75rem auto 1.5rem; max-width: 34ch; }
.signin-action { width: 100%; padding: .6rem .9rem; }
.signin-note { color: var(--faint); font-size: 11.5px; line-height: 1.5; margin: 1rem auto 0; max-width: 36ch; }

/* ── provisioning control room ─────────────────────────────────────────── */
.provisioning-page { display: grid; gap: .9rem; }
.provision-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--accent-soft) 45%, var(--panel)));
  box-shadow: var(--shadow);
}
.provision-hero-copy { max-width: 48rem; }
.provision-hero .sub { margin: .5rem 0 0; color: var(--muted); }
.provision-mode { display: grid; gap: .25rem; max-width: 15rem; text-align: right; font-size: 11.5px; }
.provision-path { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.provision-step { display: inline-flex; align-items: center; gap: .42rem; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; background: var(--bg); }
.provision-step.blocked { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); color: var(--err); background: var(--err-bg); }
.provision-step-number { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 999px; border: 1px solid currentColor; font: 700 10px var(--mono); }
.provision-arrow { color: var(--faint); font-weight: 700; }
.provision-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.provision-fact { margin: 0; padding: .9rem 1rem; min-height: 9.3rem; }
.provision-fact strong { display: block; font-size: 15px; line-height: 1.3; margin: .15rem 0 .35rem; }
.provision-fact p:last-child { margin: 0; font-size: 12px; line-height: 1.45; }
.provision-run-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.provision-evidence-fact { min-width: 190px; display: grid; gap: 4px; }
.provision-evidence-fact strong { font-size: 14px; }
.platform-inventory { margin-top: .9rem; }
.platform-facts { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 1rem; }
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .9rem; }
.platform-workload-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.platform-workload-card h3 { margin: 0; padding: .75rem .9rem; font-size: 13px; border-bottom: 1px solid var(--line); }
.platform-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.platform-table th, .platform-table td { padding: .55rem .9rem; border-bottom: 1px solid var(--line); text-align: left; }
.platform-table tr:last-child td { border-bottom: 0; }
.provision-roadmap { display: grid; gap: .6rem; margin: 0; padding-left: 1.3rem; color: var(--muted); }
.provision-roadmap li::marker { color: var(--accent); font-weight: 700; }

/* ── operations control center ─────────────────────────────────────────── */
.operations-page { display: grid; gap: .9rem; }
.ops-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 1.35rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--accent-soft) 60%, var(--panel)));
  box-shadow: var(--shadow);
}
.ops-hero.compact { padding-block: 1rem; }
.ops-hero h1 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.025em; }
.ops-hero .sub { max-width: 60rem; margin: .35rem 0 0; color: var(--muted); }
.ops-health { display: grid; min-width: 9rem; padding-left: 1.25rem; border-left: 1px solid var(--line-strong); text-align: right; }
.ops-health strong { font-size: 25px; line-height: 1.1; }
.ops-health span { color: var(--muted); font-size: 11.5px; }
.ops-health.attention strong { color: var(--warn); }
.ops-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.ops-metric {
  min-width: 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow);
}
.ops-metric strong { display: block; margin: .18rem 0; font-size: 24px; line-height: 1.15; }
.ops-metric p:last-child { margin: 0; color: var(--muted); font-size: 11.5px; }
.ops-metric.warn strong { color: var(--warn); }
.ops-metric.err strong { color: var(--err); }
.ops-queue-list { display: grid; padding-block: .35rem !important; }
.ops-queue-row {
  display: grid; grid-template-columns: minmax(9rem, .7fr) 1fr auto; gap: 1rem; align-items: center;
  width: 100%; padding: .65rem 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.ops-queue-row:last-child { border-bottom: 0; }
.ops-queue-row:hover { color: var(--accent); }
.selected-row { background: var(--accent-soft); }
.service-link { padding-left: 0 !important; font-family: var(--mono); }
.alert-list, .seeder-list { display: grid; gap: .65rem; }
.acknowledged-list { margin-top: .65rem; }
.alert-row, .seeder-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 7px; background: var(--bg);
}
.alert-row.critical { border-left: 3px solid var(--err); }
.alert-row.warning { border-left: 3px solid var(--warn); }
.alert-row.info { border-left: 3px solid var(--accent); }
.alert-row.acked { opacity: .72; }
.alert-copy, .seeder-copy { min-width: 0; }
.alert-copy p, .seeder-copy p { margin: .4rem 0 .15rem; overflow-wrap: anywhere; }
.tag.alert-critical { border-color: color-mix(in srgb, var(--err) 55%, transparent); color: var(--err); }
.tag.alert-warning { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); }
.seeder-actions { display: flex; gap: .4rem; flex: none; }
.job-log {
  min-height: 12rem; max-height: 58vh; margin: 0 0 1rem; padding: .8rem;
  overflow: auto; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--ink); font: 11.5px/1.5 var(--mono); white-space: pre-wrap;
}

/* Secrets — view only. */
.secrets-category { padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.secrets-category:last-child { border-bottom: none; }
.secrets-category-title { margin: 0 0 .5rem; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.reveal-value {
  display: block; padding: .7rem .9rem; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  font: 13px/1.5 var(--mono); word-break: break-all; user-select: all;
}

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: .9rem;
}
.card > .head {
  padding: .85rem 1rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.card > .head h2 { margin: 0; font-size: 14.5px; font-weight: 620; }
.card > .head .sub { color: var(--muted); font-size: 12.5px; margin: 0; }
.card > .body { padding: .85rem 1rem; }
.card > .body.flush { padding: 0; }
.page-title { margin: 0; font-size: 20px; line-height: 1.15; font-weight: 680; text-transform: capitalize; letter-spacing: -.02em; }
.eyebrow { color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; margin: 0 0 .18rem; text-transform: uppercase; }
.category-title { display: grid; gap: .18rem; }
.service-summary { padding: .75rem 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.2rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 60%, transparent); }
.metric { display: grid; gap: 0; min-width: 4.2rem; }
.metric strong { font-size: 15px; line-height: 1.15; }
.metric span { color: var(--muted); font-size: 11.5px; }
.metric.attention strong, .category-alert { color: var(--warn); }
.category-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-left: auto; }
.category-nav a, .category-nav button { border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: inherit; font-size: 11.5px; padding: .2rem .5rem; text-decoration: none; white-space: nowrap; background: transparent; cursor: pointer; }
.category-nav a:hover, .category-nav button:hover, .category-nav button.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.secret-nav { margin: -.1rem 0 .9rem; }
.service-context .body { padding-top: .75rem; }
.topology-label { color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .4rem; }
.topology-flow { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.topology-node { border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 12px; line-height: 1.25; padding: .28rem .55rem; }
.topology-node.current { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 650; }
.topology-arrow { color: var(--faint); font-weight: 700; }
.category-card { scroll-margin-top: calc(var(--header-h) - 8px); }
.category-card .head { align-items: center; }
.category-alert { font-size: 11.5px; font-weight: 600; }
.action-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.deployment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.deployment-fact { min-width: 0; padding: .72rem 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: .1rem; }
.deployment-fact:nth-child(3n) { border-right: none; }
.deployment-fact:nth-last-child(-n+3) { border-bottom: none; }
.deployment-fact span { color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.deployment-fact strong { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.deployment-details { padding: 0 1rem .8rem; }
.deployment-table td { vertical-align: middle; }
.cdn-scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cdn-scope-fact { min-width: 0; padding: .72rem 1rem; border-right: 1px solid var(--line); display: grid; gap: .16rem; }
.cdn-scope-fact:last-child { border-right: none; }
.cdn-scope-fact span { color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.cdn-scope-fact strong { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.history-diff { border: 1px solid var(--line); border-radius: var(--r); overflow: auto; max-height: 52vh; background: var(--bg); }
.diff-line { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .3rem; padding: .18rem .6rem; font: 12px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; }
.diff-line.added { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.diff-line.removed { background: color-mix(in srgb, var(--err) 10%, transparent); color: var(--err); }
.diff-line code { font: inherit; color: var(--ink); }

/* ── tables ─────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-weight: 600; color: var(--faint);
  border-bottom: 1px solid var(--line); padding: .5rem .9rem;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
}
td { padding: .55rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* Genuinely multi-line cells opt back out; single-line controls should not
   float above the key text they belong to. */
td.top, .diff-cell { vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.scroll-x { overflow-x: auto; }

code, .mono { font-family: var(--mono); font-size: 12.5px; }
.key { font-family: var(--mono); font-size: 12.5px; font-weight: 600; word-break: break-all; }
.src { color: var(--faint); font-size: 11px; font-family: var(--mono); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* ── inputs ─────────────────────────────────────────────────────────────── */
input[type=text], input[type=password], textarea, select.plain {
  font: inherit; font-family: var(--mono); font-size: 12.5px;
  padding: .35rem .5rem; border: 1px solid var(--line-strong);
  border-radius: calc(var(--r) - 3px); background: var(--bg); color: var(--ink); width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input.changed { border-color: var(--accent); background: var(--accent-soft); }
input.bad { border-color: var(--err); background: var(--err-bg); }
input[readonly] { background: var(--bg); color: var(--muted); cursor: default; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  font: inherit; font-size: 13px; padding: .35rem .75rem;
  border: 1px solid var(--line-strong); border-radius: calc(var(--r) - 3px);
  background: var(--panel); color: var(--ink); cursor: pointer;
  white-space: nowrap; text-decoration: none; display: inline-block;
}
.btn:hover:not(:disabled) { border-color: var(--faint); background: var(--accent-soft); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.pri:hover:not(:disabled) { filter: brightness(1.08); color: var(--accent-ink); }
.btn.danger { border-color: var(--err); color: var(--err); }
.btn.danger:hover:not(:disabled) { background: var(--err); color: #fff; }
.btn.sm { font-size: 12px; padding: .22rem .55rem; }
.btn.link { border: none; background: none; color: var(--accent); padding: .2rem .3rem; }
.btn.link:hover { text-decoration: underline; }

/* ── messages ───────────────────────────────────────────────────────────── */
.msg {
  padding: .6rem .8rem; border-radius: 6px; font-size: 12.5px;
  margin: 0 0 .7rem; border: 1px solid var(--line); background: var(--bg);
  color: var(--muted);
}
.msg:last-child { margin-bottom: 0; }
.msg.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
.msg.err  { background: var(--err-bg);  border-color: color-mix(in srgb, var(--err) 45%, transparent);  color: var(--err); }
.msg.ok   { background: var(--bg); border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }
.msg strong { font-weight: 640; }
.msg pre {
  margin: .45rem 0 0; background: var(--panel); padding: .45rem .6rem;
  border-radius: 5px; overflow-x: auto; font-family: var(--mono); font-size: 11.5px;
  color: var(--ink); border: 1px solid var(--line);
}

.note-inline { font-size: 12px; margin-top: .25rem; display: flex; gap: .35rem; align-items: flex-start; }
.note-inline.error { color: var(--err); }
.note-inline.warn  { color: var(--warn); }
.note-inline.info  { color: var(--muted); }
.note-inline .ico { flex: none; font-weight: 700; }

/* ── status words (replacing badge soup) ────────────────────────────────── */
.status { font-size: 12px; color: var(--muted); }
.status.ok   { color: var(--ok); }
.status.warn { color: var(--warn); }
.status.err  { color: var(--err); }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: .4rem; background: currentColor; vertical-align: middle; }

.tag {
  display: inline-block; font-size: 11px; padding: .05rem .4rem;
  border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted);
  white-space: nowrap;
}
.tag.self  { border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); }
.tag.backend { border-color: color-mix(in srgb, var(--warn) 50%, transparent); color: var(--warn); }
.tag.vault { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }

/* ── sticky save bar (replaces the floating cart) ───────────────────────── */
.savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--panel); border-top: 1px solid var(--line-strong);
  box-shadow: var(--bar-shadow);
  padding: .6rem 1.25rem;
}
.savebar .inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.savebar .count { font-weight: 600; }
.savebar .blocked { color: var(--warn); font-size: 12.5px; }

/* ── dialog ─────────────────────────────────────────────────────────────── */
dialog {
  border: 1px solid var(--line); border-radius: 9px; padding: 0;
  background: var(--panel); color: var(--ink);
  max-width: 620px; width: 92vw; box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
dialog::backdrop { background: var(--overlay); }
dialog .dhead { padding: 1rem 1.1rem .3rem; }
dialog .dhead h3 { margin: 0 0 .2rem; font-size: 15px; }
dialog .dbody { padding: .5rem 1.1rem 0; max-height: 62vh; overflow: auto; }
dialog .dfoot {
  padding: .85rem 1.1rem; margin-top: .8rem;
  border-top: 1px solid var(--line); display: flex; gap: .5rem; justify-content: flex-end;
  background: var(--bg); border-radius: 0 0 9px 9px;
}
dialog.wide { max-width: 860px; }

.check { display: flex; gap: .55rem; align-items: flex-start; margin: .45rem 0; font-size: 12.5px; }
.check input { width: auto; margin-top: .2rem; flex: none; }

.changelist { font-size: 12.5px; }
.changelist .row {
  display: flex; gap: .6rem; align-items: baseline;
  padding: .3rem 0; border-bottom: 1px solid var(--line);
}
.changelist .row:last-child { border-bottom: none; }

/* ── reveal ─────────────────────────────────────────────────────────────── */
.revealed {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  padding: .35rem .5rem; border-radius: 5px; word-break: break-all; user-select: all;
}
.revealed.pem { white-space: pre-wrap; max-height: 18rem; max-width: 42rem; overflow: auto; text-align: left; }
.countdown { color: var(--warn); font-size: 11px; }

/* Secret activation needs a clear, bounded hand-off after a save. */
.restart-panel { border-top: 1px solid var(--line); padding: .95rem 1rem 1rem; background: color-mix(in srgb, var(--accent-soft) 33%, var(--panel)); }
.restart-intro { display: grid; gap: .25rem; }
.restart-title { display: flex; align-items: flex-start; gap: .75rem; }
.restart-title h3 { margin: 0; font-size: 14px; font-weight: 640; }
.restart-title p, .restart-note { color: var(--muted); font-size: 12px; line-height: 1.45; margin: .15rem 0 0; }
.restart-count { color: var(--accent); background: var(--accent-soft); border-radius: 999px; font-size: 11px; font-weight: 600; padding: .28rem .45rem; white-space: nowrap; }
.restart-note { margin-top: .7rem; max-width: 52rem; }
.restart-targets { display: flex; flex-wrap: wrap; gap: .35rem; margin: .65rem 0 .75rem; }
.restart-target { border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--ink); font: 11px var(--mono); padding: .28rem .42rem; }
.restart-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .6rem; }
.restart-manual { color: var(--muted); font-size: 11.5px; }
.restart-command { margin-top: .7rem; }
.restart-command summary, .activation-command summary { color: var(--muted); cursor: pointer; font-size: 11.5px; }
.command-shell { display: flex; align-items: center; gap: .55rem; margin-top: .45rem; padding: .55rem .65rem; overflow: auto; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); }
.command-shell code { color: var(--ink); font: 11.5px var(--mono); line-height: 1.45; white-space: nowrap; }
.command-prompt { color: var(--ok); font: 12px var(--mono); }
.command-shell .btn { margin-left: auto; flex: none; }
.activation-state { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.activation-targets { display: grid; gap: .45rem; flex-basis: 100%; margin-top: .25rem; }
.activation-target { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .6rem; padding: .5rem .6rem; border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--line)); border-radius: 6px; background: var(--panel); }
.activation-command { flex-basis: 100%; margin-top: .1rem; }
.operation-log { display: grid; gap: .35rem; flex-basis: 100%; margin-top: .55rem; }
.operation-row { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: 11.5px; }
.operation-row.running { color: var(--accent); }
.operation-row.done { color: var(--ok); }
.operation-row.err { color: var(--err); }
.operation-mark { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; border: 1px solid currentColor; border-radius: 999px; font-size: 9px; font-weight: 700; flex: none; }

.commit-progress { display: grid; gap: .38rem; margin-top: .8rem; }
.progress-row { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: 12.5px; }
.progress-row.running { color: var(--accent); }
.progress-row.done { color: var(--ok); }
.progress-row.err { color: var(--err); }
.progress-mark { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 700; flex: none; }
.next-step-list { display: grid; gap: .45rem; margin-top: .85rem; }
.next-step { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.next-step-number { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-weight: 700; flex: none; }
.next-step code { min-width: 0; overflow: auto; color: var(--ink); font: 11.5px var(--mono); white-space: nowrap; }

/* ── misc ───────────────────────────────────────────────────────────────── */
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: .45rem; }
.grow { flex: 1; }
.spin { padding: 2.5rem; text-align: center; color: var(--muted); }
.empty { padding: 2rem 1rem; text-align: center; color: var(--faint); font-size: 13px; }

/* Toasts live in ONE fixed container and are laid out by normal flow inside
   it. Each toast used to be `position: fixed` at the same bottom/left itself,
   so two toasts raised close together — a Run that fails while a Refresh is
   still settling — landed on exactly the same coordinates and the later one
   covered the earlier one completely. A stack cannot overlap by construction,
   and it also keeps the anchor identical no matter how many are showing. */
.toast-stack {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 100;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .5rem;
  /* The container spans a corner region but must not swallow clicks on the
     page behind it; each toast turns pointer events back on for itself. */
  pointer-events: none;
  max-width: min(420px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
}
.toast {
  pointer-events: auto; cursor: pointer;
  max-width: 100%; box-shadow: var(--shadow);
  margin: 0; padding: .7rem 1rem; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-size: 13px;
  /* Messages carry request ids and Job names, which have no spaces to break on. */
  overflow-wrap: anywhere;
  animation: toast-in .18s ease-out;
}
/* column-reverse means the newest toast is nearest the corner, so it never
   pushes the one the operator is already reading out from under the cursor. */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(.5rem); }
  to   { opacity: 1; transform: none; }
}
.toast.leaving { opacity: 0; transition: opacity .15s ease-in; }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.leaving { transition: none; }
}
.toast.ok   { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 12%, var(--bg));  color: var(--ok); }
.toast.err  { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); background: var(--err-bg); color: var(--err); }
.toast.note { border-color: var(--line); background: var(--bg); color: var(--ink); }

@media (max-width: 820px) {
  /* Narrow screens have no room for a 420px column beside the content, so the
     stack spans the width but keeps the same bottom anchor. */
  .toast-stack { left: 1rem; right: 1rem; max-width: none; align-items: stretch; }
  .split.sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .sidebar.is-collapsed { display: flex; align-items: center; justify-content: space-between; }
  .sidebar.is-collapsed .service-mark { margin-left: auto; }
  .sidebar { max-height: none; }
  .service-list { max-height: 18rem; }
  .provision-hero { display: grid; }
  .provision-mode { max-width: none; text-align: left; }
  .provision-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-grid { grid-template-columns: 1fr; }
  .ops-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-summary { align-items: flex-start; }
  .category-nav { margin-left: 0; width: 100%; }
  .deployment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deployment-fact:nth-child(3n) { border-right: 1px solid var(--line); }
  .deployment-fact:nth-child(2n) { border-right: none; }
  .deployment-fact:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .deployment-fact:nth-last-child(-n+2) { border-bottom: none; }
  .cdn-scope-grid { grid-template-columns: 1fr; }
  .cdn-scope-fact { border-right: none; border-bottom: 1px solid var(--line); }
  .cdn-scope-fact:last-child { border-bottom: none; }
}

@media (max-width: 520px) {
  .signin-card { padding: 1.75rem 1.25rem; }
  .provision-summary-grid { grid-template-columns: 1fr; }
  .ops-hero { display: grid; }
  .ops-health { padding: .75rem 0 0; border-left: 0; border-top: 1px solid var(--line-strong); text-align: left; }
  .ops-metric-grid { grid-template-columns: 1fr; }
  .ops-queue-row { grid-template-columns: 1fr auto; gap: .15rem .75rem; }
  .ops-queue-row .muted { grid-column: 1; }
  .ops-queue-row > :last-child { grid-column: 2; grid-row: 1 / span 2; }
  .alert-row, .seeder-row { display: grid; }
  .seeder-actions { justify-content: flex-end; }
}

details.more > summary {
  cursor: pointer; font-size: 12.5px; color: var(--accent);
  padding: .3rem 0; list-style: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary { display: flex; align-items: center; gap: .3rem; }
details.more > summary .ico { transition: transform .12s ease; }
details.more[open] > summary .ico { transform: rotate(90deg); }

/* ── icons ──────────────────────────────────────────────────────────────────
   Inline SVG from icons.js. Sized in em so an icon tracks the type it sits
   next to instead of needing a per-context override. */
.ico {
  width: 1em; height: 1em; flex: none;
  vertical-align: -0.125em;
  stroke: currentColor; fill: none;
}
.btn .ico, .profile-item .ico, nav.tabs button .ico { margin-right: .05rem; }
.btn:has(.ico) { display: inline-flex; align-items: center; gap: .35rem; }
.note-inline .ico { margin-top: .12em; }

/* Screen-reader-only text: carries the severity/state word that the icon and
   the colour otherwise convey on their own. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── focus ──────────────────────────────────────────────────────────────────
   The UA ring is close to invisible on the dark shell, and most controls here
   are custom-styled buttons that never got one. One rule covers all of them. */
:where(a, button, summary, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
input:focus-visible, textarea:focus-visible, .service-picker:focus-visible, .sidebar-search:focus-visible {
  outline-offset: -1px;
}
.searchbox input:focus-visible { outline: none; }
.savebar .btn:focus-visible { outline-offset: 3px; }
.ops-queue-row:focus-visible, tbody tr .btn.link:focus-visible { outline-offset: -2px; }

/* ── loading and empty states ───────────────────────────────────────────── */
.spin::before {
  content: ''; display: block; width: 18px; height: 18px;
  margin: 0 auto .6rem;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty .ico { display: block; width: 22px; height: 22px; margin: 0 auto .5rem; color: var(--faint); }
.empty.ok .ico { color: var(--ok); }

/* Busy buttons: a long action (redeploy, rollout, seeder run) otherwise looks
   inert and gets clicked twice. */
.btn[aria-busy="true"] { position: relative; color: transparent; }
.btn[aria-busy="true"]::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--ink); animation: spin .7s linear infinite;
}
.btn.pri[aria-busy="true"]::after { color: var(--accent-ink); }
/* A disabled primary at low opacity reads like an ordinary secondary button;
   keep its identity and drop only its ink. */
.btn.pri:disabled {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 32%, var(--panel));
  border-color: var(--line-strong);
  color: var(--faint);
}
/* Cluster-mutating actions (redeploy, rollout restart) should not look like
   the read-only Refresh sitting next to them. */
.btn.caution { border-color: color-mix(in srgb, var(--warn) 55%, var(--line-strong)); color: var(--warn); }
.btn.caution:hover:not(:disabled) { border-color: var(--warn); background: var(--warn-bg); }

/* ── card head action cluster ───────────────────────────────────────────── */
.card > .head .head-actions {
  display: flex; align-items: center; gap: .4rem;
  margin-left: auto; flex: none;
}

/* ── affordances on clickable rows ──────────────────────────────────────── */
tbody tr:hover { background: var(--accent-soft); }
.selected-row { background: none; }
.selected-row > td { background: var(--accent-soft); }
.ops-queue-row:hover { color: var(--accent); background: var(--accent-soft); }
.service-link { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* Chips of different families sat at visibly different heights. */
.tag, .category-count, .service-total, .restart-count {
  display: inline-flex; align-items: center; min-height: 20px; padding: .15rem .45rem;
}
.tag.staged { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.staged-value { color: var(--accent); }

/* The grid pages already space their children; .card's own margin doubled it. */
:is(.operations-page, .provisioning-page) > .card { margin-bottom: 0; }

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

/* Without backdrop-filter the translucent header lets scrolled content bleed
   through its own text. */
@supports not (backdrop-filter: blur(1px)) {
  header { background: var(--bg); }
}

/* .btn:has(.ico) sets display, which would otherwise beat the UA [hidden]
   rule and keep a hidden button on screen. */
[hidden] { display: none !important; }

/* The conflict recovery puts an explanation above the two footer buttons. */
dialog .dfoot { flex-wrap: wrap; }
dialog .dfoot .msg { flex-basis: 100%; margin: 0 0 .1rem; }

.status { display: inline-flex; align-items: center; gap: .1rem; }
.tag:has(.ico) { gap: .1rem; }
.provision-arrow, .topology-arrow { display: inline-flex; align-items: center; }