/*
  The console's one stylesheet: the "Graphite" look. A dark navigation rail
  beside a light workspace, white cards, one indigo accent, Inter throughout.

  Colours are tokens, and every pair that carries meaning is checked against
  WCAG 2.2 AA: 4.5:1 for text, 3:1 for the boundary of anything you can click
  and for focus indicators. A tool whose own controls model bad practice will
  not reliably produce good banners, so the admin is held to the standard the
  banner is legally held to.

  No inline styles anywhere in the markup: the content security policy is
  style-src 'self', so a style="" attribute is silently ignored. Every visual
  variation is a class here.
*/

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --ground: #f5f6f8;
  --surface: #ffffff;
  --surface-sunken: #fafbfc;
  --row-hover: #f6f7f9;
  --rule: #e3e6eb;
  --rule-soft: #eef0f3;
  /* Anything you can click or type into is bounded by this: 3.5:1 on white. */
  --border-strong: #858c99;

  --text: #14171c;
  --text-muted: #4b5361;
  --text-faint: #5f6775;

  --accent: #4053d6;
  --accent-hover: #3343b8;
  --accent-text: #ffffff;
  --accent-quiet: #eef0fd;
  --link: #3443b8;
  --link-hover: #1f2a80;

  --rail-bg: #15181e;
  --rail-text: #c9ced8;
  --rail-heading: #8c94a3;
  --rail-hover: #20242c;
  --rail-active: #2a303b;
  /* The accent fails 3:1 against the rail, so focus there is drawn lighter. */
  --rail-focus: #9aa8ff;

  --ok: #1e6b45;
  --ok-quiet: #e6f4ec;
  --warn: #7a4e00;
  --warn-quiet: #fff1d6;
  --bad: #b42318;
  --bad-quiet: #fdecea;
  --unknown: #4b5361;
  --unknown-quiet: #eef0f3;

  /* Heat cells: each 3:1 or better on white, and each a different lightness
     from the others, so the strip reads without telling green from red. */
  --cell-ok: #2e8b57;
  --cell-warn: #d08a12;
  --cell-bad: #a51d14;
  --cell-unknown: #e1e4e9;

  --focus: #4053d6;

  --radius: 8px;
  --radius-card: 12px;
  --gap: 1rem;
  --rail: 15rem;
  --shadow-card: 0 1px 2px rgb(16 24 40 / 6%), 0 4px 12px rgb(16 24 40 / 4%);

  /* 24px is the WCAG 2.2 AA minimum target, and the reason this console has no
     16-pixel icon buttons however dense a table gets. */
  --target: 2.75rem;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 0.9375rem/1.55 var(--font);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* Never removed, and 3:1 against what sits behind it (WCAG 2.4.11/2.4.13). */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Blazor moves focus to the page's heading after every navigation, so screen
   readers announce the new page. The heading is not a control, and a ring
   round it on every page load reads as a fault; controls keep theirs. */
h1:focus, .auth:focus { outline: none; }

/* Sticky headers and action bars must never sit over the row you just tabbed
   to, which is 2.4.11 Focus Not Obscured. */
tr, li, .card, .field { scroll-margin-block: 6rem; }

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--focus);
  border-radius: var(--radius);
}

.skip-link:focus { left: 0.5rem; top: 0.5rem; }

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

.shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  min-height: 3.75rem;
  padding: 0.625rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--text); }
.brand:hover { color: var(--text); }
.brand__mark { display: block; flex: none; color: var(--accent); }
.brand__text { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }

.topbar__account { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.topbar__user { color: var(--text-muted); font-size: 0.8125rem; }

.shell__body { display: flex; flex: 1; align-items: stretch; }

.rail {
  width: var(--rail);
  flex: 0 0 var(--rail);
  padding: 0.5rem 0.75rem 1.5rem;
  background: var(--rail-bg);
  color: var(--rail-text);
}

/* The rail's own contents stay in view on a long page; the dark column behind
   them runs the full height of the page. */
.rail__inner { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; }

.rail :focus-visible { outline-color: var(--rail-focus); }

.rail__heading {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--rail-heading); margin: 1.25rem 0.75rem 0.375rem;
  overflow-wrap: anywhere;
}
.rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rail__link {
  display: flex;
  align-items: center;
  min-height: var(--target);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  color: var(--rail-text);
  font-size: 0.875rem;
  text-decoration: none;
}
.rail__link:hover { background: var(--rail-hover); color: #ffffff; }
.rail__link.active { background: var(--rail-active); color: #ffffff; font-weight: 500; }
.rail__link--back { color: var(--rail-heading); font-size: 0.8125rem; }
.rail__back { margin: 0.5rem 0 0.25rem; }
.rail__action { margin: 1.5rem 0.75rem 0; }
.rail__action .button { width: 100%; }

.main { flex: 1; min-width: 0; padding: 2rem 2.5rem 3rem; }
.main:focus { outline: none; }

.page { max-width: 80rem; }
.page--full { max-width: none; }

.shell__footer {
  padding: 1rem 2.5rem;
  background: var(--surface);
  border-top: 1px solid var(--rule);
}
.attribution { margin: 0; font-size: 0.75rem; color: var(--text-faint); }

/* Three panes become stacked panes below this width, per the design note. */
@media (max-width: 1100px) {
  .shell__body { flex-direction: column; }
  .rail { width: 100%; flex: none; }
  .rail__inner { position: static; max-height: none; }
  .rail__list { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; }
  .main { padding: 1.5rem 1rem 2.5rem; }
  .shell__footer { padding: 1rem; }
}

/* ---- sign-in -------------------------------------------------------- */

.auth {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}
.auth__column { width: 100%; max-width: 25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.auth__card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}
.auth__card h1 { font-size: 1.375rem; margin-bottom: 1.25rem; }
.auth__card .field { max-width: none; margin-bottom: 1.25rem; }
.auth__card form .button,
.auth__card .button--block { width: 100%; }
.auth__card > :last-child { margin-bottom: 0; }

/* ---- typography ----------------------------------------------------- */

h1 { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 0.375rem; }
h2 { font-size: 1rem; font-weight: 600; margin: 2rem 0 0.75rem; }
h3 { font-size: 0.9375rem; font-weight: 600; margin: 1.25rem 0 0.4rem; }

.lede { color: var(--text-muted); margin: 0 0 1.75rem; max-width: 62ch; }
.muted { color: var(--text-faint); }
.small { font-size: 0.8125rem; }
.mono { font-family: var(--font-mono); font-size: 0.9em; }
.mono--spaced { letter-spacing: 0.12em; }

/* ---- controls ------------------------------------------------------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: var(--target); min-width: var(--target);
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent); color: var(--accent-text);
  font: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }
.button[disabled] { opacity: 0.55; cursor: not-allowed; }

.button--quiet { background: var(--surface); color: var(--text); border-color: var(--border-strong); font-weight: 500; }
.button--quiet:hover { background: var(--row-hover); border-color: var(--text-faint); color: var(--text); }
.button--danger { background: var(--bad); border-color: var(--bad); color: #ffffff; }
.button--danger:hover { background: #8f1c13; border-color: #8f1c13; color: #ffffff; }

.button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }

input[type="text"], input[type="search"], input[type="password"], input[type="email"],
input[type="url"], input[type="number"], input[type="date"], select, textarea {
  min-height: var(--target);
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; border-color: var(--accent); }
textarea { min-height: 6rem; resize: vertical; }

.field { margin: 0 0 1rem; max-width: 42rem; }
.field > label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; }
.field__hint { display: block; color: var(--text-faint); font-size: 0.8125rem; margin-top: 0.25rem; }
.field__error { display: block; color: var(--bad); font-size: 0.875rem; margin-top: 0.25rem; }
.field--narrow { width: 14rem; max-width: 100%; }
.field--medium { max-width: 24rem; }
.field--wide { max-width: none; }

.filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 1.25rem; }
.filters .field { margin: 0; width: 12rem; }

/* ---- cards and panels ----------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.card__title { margin: 0 0 0.75rem; font-size: 1rem; }

.grid { display: grid; gap: var(--gap); }
.grid--kpi { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.grid--two { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }

.kpi { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1rem 1.25rem; }
.kpi__value { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi__label { color: var(--text-muted); font-size: 0.8125rem; }
.kpi__denominator { color: var(--text-faint); font-size: 0.75rem; }

/* ---- status vocabulary ---------------------------------------------- */

/* Colour is never the only channel: every pill carries a glyph and a word. */
.pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 1.5rem;
  padding: 0.125rem 0.5625rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; line-height: 1.3;
  white-space: nowrap;
}
.pill--ok { color: var(--ok); background: var(--ok-quiet); }
.pill--warn { color: var(--warn); background: var(--warn-quiet); }
.pill--bad { color: var(--bad); background: var(--bad-quiet); }
.pill--unknown { color: var(--unknown); background: var(--unknown-quiet); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: var(--target);
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: 0.8125rem; cursor: pointer;
}
.chip:hover { background: var(--row-hover); }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-quiet); font-weight: 600; }
.chip__count { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- the fleet at a glance -------------------------------------------- */

.glance { display: flex; flex-direction: column; gap: 1.125rem; }
.glance__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.glance__stat { display: flex; align-items: center; gap: 0.625rem; }
.glance__swatch { display: block; width: 14px; height: 14px; border-radius: 3px; }
.glance__count { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.glance__label { font-size: 0.8125rem; color: var(--text-muted); }

/* ---- heat strip ------------------------------------------------------ */

.heat { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.heat__cell {
  display: block;
  width: 14px; height: 14px;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
}
.heat__cell--healthy { background: var(--cell-ok); }
.heat__cell--degraded { background: var(--cell-warn); }
.heat__cell--broken { background: var(--cell-bad); }
.heat__cell--unknown { background: var(--cell-unknown); box-shadow: inset 0 0 0 1px var(--border-strong); }
.heat__legend { margin: 0; color: var(--text-faint); font-size: 0.8125rem; }

/* ---- tables ---------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
table { border-collapse: collapse; width: 100%; font-size: 0.84375rem; }
caption { text-align: left; padding: 0.75rem 0.875rem; color: var(--text-faint); }
th, td { text-align: left; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
thead th {
  position: sticky; top: 0;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--rule);
  font-size: 0.75rem; font-weight: 600; color: var(--text-faint);
  white-space: nowrap;
}
tbody tr:last-child > td, tbody tr:last-child > th { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover); }
td.numeric, th.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.table--compact th, .table--compact td { padding: 0.5rem 0.75rem; }

/* A gated audit event: a marker in the first cell rather than a style on the
   row, so it survives the policy that forbids inline styles. */
.row--gated > td:first-child { box-shadow: inset 4px 0 0 var(--bad); }

.row-count { color: var(--text-faint); font-size: 0.8125rem; margin: 0.5rem 0 0.75rem; }

.pager { display: flex; gap: 0.5rem; align-items: center; margin: 0.875rem 0; }

/* ---- sparkline ------------------------------------------------------- */

.spark { display: block; width: 6rem; height: 1.5rem; }
.spark__line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.spark__area { fill: var(--accent-quiet); }

/* ---- diffs and code -------------------------------------------------- */

.code {
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  white-space: pre;
  margin: 0;
}
.code-block { margin-bottom: 1.5rem; }
.code-block__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.code-block__note { color: var(--text-faint); font-size: 0.8125rem; margin: 0.5rem 0 0; }

.diff { list-style: none; margin: 0; padding: 0; }
.diff li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule-soft); }
.diff__path { font-weight: 600; }
.diff__before { color: var(--bad); text-decoration: line-through; }
.diff__after { color: var(--ok); }

/* ---- designer -------------------------------------------------------- */

.designer { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 1100px) { .designer { grid-template-columns: 1fr; } }

.preview {
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 1rem;
}
.preview__frame {
  display: block;
  width: 100%;
  height: auto;
  max-height: 36rem;
  margin-inline: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.preview__frame--desktop { aspect-ratio: 1440 / 900; }
.preview__frame--tablet { aspect-ratio: 834 / 1112; }
.preview__frame--phone { aspect-ratio: 390 / 844; }
.preview__meta { color: var(--text-faint); font-size: 0.8125rem; margin: 0.625rem 0 0; }

.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule-soft); }

.inherit { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--text-faint); margin-top: 0.25rem; }
.inherit--overridden { color: var(--accent); font-weight: 600; }

/* ---- toasts and reconnect ------------------------------------------- */

.status { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: grid; gap: 0.5rem; max-width: 26rem; }
.status__live { display: grid; gap: 0.5rem; }
.toast {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(16 24 40 / 14%);
  font-size: 0.875rem;
}
.toast--information { border-color: var(--accent); background: var(--accent-quiet); }
.toast--warning { border-color: var(--warn); background: var(--warn-quiet); }
.toast--error { border-color: var(--bad); background: var(--bad-quiet); }
.toast__dismiss {
  margin-left: auto;
  min-width: var(--target); min-height: var(--target);
  margin-block: -0.5rem;
  border: none; border-radius: 6px; background: none; color: inherit; font-size: 1.2rem; cursor: pointer;
}

#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: grid;
  position: fixed; inset: 0; z-index: 200;
  place-items: center;
  background: rgb(21 24 30 / 60%);
}
.reconnect__panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 40px rgb(16 24 40 / 24%);
  padding: 1.75rem;
  max-width: 30rem;
}
.reconnect__title { font-weight: 600; margin-top: 0; }
.components-reconnect-show .components-reconnect-failed,
.components-reconnect-show .components-reconnect-rejected,
.components-reconnect-failed .components-reconnect-show,
.components-reconnect-failed .components-reconnect-rejected,
.components-reconnect-rejected .components-reconnect-show,
.components-reconnect-rejected .components-reconnect-failed { display: none; }

/* ---- switcher -------------------------------------------------------- */

.switcher { position: relative; flex: 1 1 16rem; max-width: 26rem; }
.switcher__input { min-height: 2.5rem; background: var(--ground); }
.switcher__results {
  position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 0.375rem);
  list-style: none; margin: 0; padding: 0.375rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgb(16 24 40 / 16%);
}
.switcher__result {
  display: block; width: 100%; text-align: left;
  min-height: var(--target);
  padding: 0.5rem 0.625rem; border: none; border-radius: 6px;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.switcher__result:hover { background: var(--accent-quiet); }
.switcher__name { display: block; font-weight: 600; font-size: 0.875rem; }
.switcher__meta { display: block; color: var(--text-faint); font-size: 0.8125rem; }
.switcher__empty { padding: 0.625rem; color: var(--text-faint); font-size: 0.875rem; }

/* ---- stepper --------------------------------------------------------- */

.stepper { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.75rem; padding: 0; }
.stepper__step {
  display: flex; align-items: center; gap: 0.4rem;
  min-height: 2rem;
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface);
  font-size: 0.8125rem;
}
.stepper__step--done { border-color: var(--ok); color: var(--ok); background: var(--ok-quiet); }
.stepper__step--current { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-quiet); font-weight: 600; }

/* ---- callouts --------------------------------------------------------- */

.callout {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  margin: 1rem 0;
  background: var(--surface);
}
.callout--warn { border-color: #e9c27a; background: var(--warn-quiet); color: #4d3200; }
.callout--bad { border-color: #f1a9a2; background: var(--bad-quiet); color: #7a1810; }
.callout--ok { border-color: #a6d6b9; background: var(--ok-quiet); color: #14492f; }
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }