/* hv console design system v2 — the ONE stylesheet (docs/DESIGN.md).
   Classless: selectors are elements, [data-*], [aria-*] and [role] only.
   The sole class selectors are runtime classes that htmx and uPlot add
   themselves (sections 11 and 10).

   1 fonts · 2 tokens · 3 base · 4 typography · 5 shell · 6 page header ·
   7 components · 8 forms · 9 tables · 10 charts · 11 runtime states ·
   12 print · 13 motion and forced colors */

/* 1. Fonts (self-hosted, SIL OFL; priv/static/vendor/fonts/geist) -------- */
@font-face {
  font-family: "Geist";
  src: url("/vendor/fonts/geist/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/vendor/fonts/geist/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens (docs/DESIGN.md section 2; dark is the reference theme) ------- */
:root {
  color-scheme: dark;
  --surface-default: #0f1011;
  --surface-raise: #17181a;
  --surface-secondary: #1e2023;
  --surface-tertiary: #26282c;
  --surface-hover: #202225;
  --surface-scrim: rgb(0 0 0 / .6);
  --content-raise: #f2f2f0;
  --content-default: #dcdcd8;
  --content-secondary: #a9aaa6;
  --content-tertiary: #8e908d;
  --content-quaternary: #6c6e71;
  --content-disabled: #55575a;
  --stroke-default: #2e3135;
  --stroke-secondary: #24272a;
  --stroke-raise: #6a6d72;
  --content-accent: #f7a928;
  --content-heading: #f7a928;
  --content-accent-secondary: #ffc457;
  --content-accent-tertiary: #c97306;
  --surface-accent: #2b2214;
  --surface-accent-hover: #3d2f16;
  --stroke-accent: #f7a928;
  --stroke-accent-secondary: #6b4a12;
  --surface-accent-solid: #f7a928;
  --content-on-accent-solid: #1a1206;
  --content-success: #5ad08a;
  --surface-success: #16291e;
  --stroke-success: rgb(90 208 138 / 0.3);
  --content-notice: #f0d05a;
  --surface-notice: #2d2917;
  --stroke-notice: rgb(240 208 90 / 0.3);
  --content-error: #ff7b7b;
  --surface-error: #2f191a;
  --stroke-error: rgb(255 123 123 / 0.3);
  --content-info: #7db8ff;
  --surface-info: #1a2431;
  --stroke-info: rgb(125 184 255 / 0.3);
  --content-alt: #c0a8ff;
  --surface-alt: #252131;
  --stroke-alt: rgb(192 168 255 / 0.3);
  --tab-underline: #f7a928;
  --input-fill: #0f1011;
  --shadow-menu: 0 8px 24px rgb(0 0 0 / .45);
  --shadow-modal: 0 8px 24px rgb(0 0 0 / .45);
  --shadow-toast: 0 8px 24px rgb(0 0 0 / .45);
  --series-1: #c98500;
  --series-2: #d55181;
  --series-3: #3987e5;
  --series-4: #199e70;
  --series-5: #9085e9;
  --series-6: #e66767;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-mono-xs: 500 11px/14px var(--font-mono);
  --text-mono-sm: 500 12px/16px var(--font-mono);
  --text-mono-code: 400 12px/16px var(--font-mono);
  --text-sans-sm: 400 12px/16px var(--font-sans);
  --text-sans-md: 400 14px/18px var(--font-sans);
  --text-sans-semi-md: 500 14px/18px var(--font-sans);
  --text-sans-lg: 500 16px/20px var(--font-sans);
  --text-sans-xl: 500 18px/24px var(--font-sans);
  --text-sans-2xl: 400 25px/32px var(--font-sans);
  --text-sans-3xl: 400 36px/44px var(--font-sans);
  --tracking-mono: 0.04em;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 40px;
  --s8: 48px;
  --s9: 64px;

  --top-bar-height: 54px;
  --sidebar-width: 228px;
  --content-gutter: 40px;
  --form-width: 740px;
  --control-h: 32px;
  --control-h-small: 24px;
  --input-h: 40px;
  --row-h: 44px;
  --head-h: 36px;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --ease: 120ms ease-out;
}

/* Light: the Account's explicit choice, or the OS when it has not chosen. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
  --surface-default: #f6f6f4;
    --surface-raise: #ffffff;
    --surface-secondary: #efefec;
    --surface-tertiary: #e6e6e2;
    --surface-hover: #f0f0ed;
    --surface-scrim: rgb(20 20 18 / .35);
    --content-raise: #111214;
    --content-default: #26272a;
    --content-secondary: #55575b;
    --content-tertiary: #66686c;
    --content-quaternary: #8b8d90;
    --content-disabled: #a5a7aa;
    --stroke-default: #dcdcd7;
    --stroke-secondary: #e8e8e4;
    --stroke-raise: #8f9195;
    --content-accent: #a35708;
    --content-heading: #111214;
    --content-accent-secondary: #83440d;
    --content-accent-tertiary: #c97306;
    --surface-accent: #faf1e6;
    --surface-accent-hover: #f3e3cc;
    --stroke-accent: #a35708;
    --stroke-accent-secondary: #e2b98a;
    --surface-accent-solid: #b05e00;
    --content-on-accent-solid: #ffffff;
    --content-success: #1a7a43;
    --surface-success: #e9f3ed;
    --stroke-success: rgb(26 122 67 / 0.3);
    --content-notice: #7a5c00;
    --surface-notice: #f3f0e6;
    --stroke-notice: rgb(122 92 0 / 0.3);
    --content-error: #b42323;
    --surface-error: #f9eaea;
    --stroke-error: rgb(180 35 35 / 0.3);
    --content-info: #1a62bd;
    --surface-info: #e8f1fa;
    --stroke-info: rgb(26 98 189 / 0.3);
    --content-alt: #5f42c9;
    --surface-alt: #f1edfb;
    --stroke-alt: rgb(95 66 201 / 0.3);
    --tab-underline: #111214;
    --input-fill: #f6f6f4;
    --shadow-menu: 0 8px 24px rgb(20 20 18 / .12);
    --shadow-modal: 0 8px 24px rgb(20 20 18 / .12);
    --shadow-toast: 0 8px 24px rgb(20 20 18 / .12);
    --series-1: #c27803;
    --series-2: #e87ba4;
    --series-3: #2a78d6;
    --series-4: #1baf7a;
    --series-5: #6250d6;
    --series-6: #e34948;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --surface-default: #f6f6f4;
  --surface-raise: #ffffff;
  --surface-secondary: #efefec;
  --surface-tertiary: #e6e6e2;
  --surface-hover: #f0f0ed;
  --surface-scrim: rgb(20 20 18 / .35);
  --content-raise: #111214;
  --content-default: #26272a;
  --content-secondary: #55575b;
  --content-tertiary: #66686c;
  --content-quaternary: #8b8d90;
  --content-disabled: #a5a7aa;
  --stroke-default: #dcdcd7;
  --stroke-secondary: #e8e8e4;
  --stroke-raise: #8f9195;
  --content-accent: #a35708;
  --content-heading: #111214;
  --content-accent-secondary: #83440d;
  --content-accent-tertiary: #c97306;
  --surface-accent: #faf1e6;
  --surface-accent-hover: #f3e3cc;
  --stroke-accent: #a35708;
  --stroke-accent-secondary: #e2b98a;
  --surface-accent-solid: #b05e00;
  --content-on-accent-solid: #ffffff;
  --content-success: #1a7a43;
  --surface-success: #e9f3ed;
  --stroke-success: rgb(26 122 67 / 0.3);
  --content-notice: #7a5c00;
  --surface-notice: #f3f0e6;
  --stroke-notice: rgb(122 92 0 / 0.3);
  --content-error: #b42323;
  --surface-error: #f9eaea;
  --stroke-error: rgb(180 35 35 / 0.3);
  --content-info: #1a62bd;
  --surface-info: #e8f1fa;
  --stroke-info: rgb(26 98 189 / 0.3);
  --content-alt: #5f42c9;
  --surface-alt: #f1edfb;
  --stroke-alt: rgb(95 66 201 / 0.3);
  --tab-underline: #111214;
  --input-fill: #f6f6f4;
  --shadow-menu: 0 8px 24px rgb(20 20 18 / .12);
  --shadow-modal: 0 8px 24px rgb(20 20 18 / .12);
  --shadow-toast: 0 8px 24px rgb(20 20 18 / .12);
  --series-1: #c27803;
  --series-2: #e87ba4;
  --series-3: #2a78d6;
  --series-4: #1baf7a;
  --series-5: #6250d6;
  --series-6: #e34948;
}

/* 3. Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--surface-default);
  color: var(--content-default);
  font: var(--text-sans-md);
  line-height: 1.43;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
img,
svg,
canvas {
  display: block;
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--stroke-accent);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}
::selection {
  background: var(--surface-accent-hover);
}

/* Skip link: the first link of the body, visible on focus only. */
body > a[href="#main"] {
  position: absolute;
  left: var(--s3);
  top: -3rem;
  z-index: 60;
  padding: var(--s2) var(--s3);
  background: var(--surface-accent-solid);
  color: var(--content-on-accent-solid);
  border-radius: var(--r-sm);
  text-decoration: none;
}
body > a[href="#main"]:focus {
  top: var(--s3);
}

/* 4. Typography ---------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--content-raise);
}
h1 {
  font: var(--text-sans-3xl);
  letter-spacing: -0.01em;
  color: var(--content-heading);
}
h2 {
  font: var(--text-sans-lg);
}
h3 {
  font: var(--text-sans-semi-md);
}
h4 {
  font: var(--text-sans-semi-md);
  color: var(--content-secondary);
}
p {
  margin: 0;
  color: var(--content-secondary);
}
p + p {
  margin-top: var(--s2);
}
a {
  color: var(--content-accent);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--content-accent-secondary);
  text-decoration: underline;
}
small {
  font: var(--text-sans-sm);
  color: var(--content-tertiary);
}
strong {
  font-weight: 500;
  color: var(--content-raise);
}
code,
kbd,
samp,
pre,
var {
  font: var(--text-mono-code);
}
code {
  color: var(--content-default);
  background: var(--surface-secondary);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
}
pre {
  margin: 0;
  padding: var(--s3) var(--s4);
  overflow-x: auto;
  background: var(--surface-secondary);
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-md);
  line-height: 1.6;
}
pre code {
  background: none;
  padding: 0;
}
kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.35em;
  border: 1px solid var(--stroke-default);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--surface-secondary);
  color: var(--content-secondary);
  font: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  line-height: 1.6;
  text-align: center;
}
hr {
  border: 0;
  border-top: 1px solid var(--stroke-default);
  margin: var(--s5) 0;
}
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}
time,
data {
  font-variant-numeric: tabular-nums;
}
/* ValueUnit: the value in the body colour, the unit quieter. */
data + small,
data ~ small {
  color: var(--content-tertiary);
}

/* The label style: mono, small, uppercase (table headers, dt, legends,
   tabs, badges). */
th,
dt,
mark {
  font: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* 5. Shell (docs/DESIGN.md section 3) ------------------------------------- */
/* <body> = top bar over a sidebar and the page column. Signed-out pages
   (login) have no sidebar: the grid collapses to one column. The top bar
   (header[data-shell="top"]) spans both columns. */
body:has(> nav) {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: var(--top-bar-height) 1fr;
  grid-template-areas:
    "side top"
    "side main";
}
body:has(> header[data-shell="top"]) {
  grid-template-rows: var(--top-bar-height) auto 1fr;
  grid-template-areas:
    "top top"
    "acting acting"
    "side main";
}
body > nav {
  grid-area: side;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: 0 var(--s3) var(--s3);
  background: var(--surface-default);
  border-right: 1px solid var(--stroke-default);
  font: var(--text-sans-md);
}
body:has(> header[data-shell="top"]) > nav {
  top: var(--top-bar-height);
  height: calc(100dvh - var(--top-bar-height));
  padding-top: var(--s3);
}
body > nav > * {
  flex-shrink: 0;
}
body > nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

/* Group headings: mono, uppercase, quiet. */
body > nav :is(h2, h3) {
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding: var(--s1) var(--s2);
  color: var(--content-tertiary);
  font: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  border-radius: var(--r-sm);
}
body > nav :is(h2, h3) {
  cursor: default;
  margin-top: var(--s2);
}

body > nav hr {
  margin: var(--s2) calc(-1 * var(--s3));
}
body > nav li > a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 28px;
  padding: 0 var(--s2);
  border-radius: var(--r-sm);
  color: var(--content-default);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
body > nav li > a:hover {
  background: var(--surface-hover);
  color: var(--content-raise);
}
body > nav a[aria-current="page"] {
  background: var(--surface-accent);
  color: var(--content-accent);
}
body > nav svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--content-quaternary);
}
body > nav a[aria-current="page"] svg {
  color: var(--content-accent-tertiary);
}
/* Jump to: a quiet bordered button with its key hint on the right. */
body > nav > button {
  justify-content: flex-start;
  width: 100%;
  margin-bottom: var(--s2);
  color: var(--content-tertiary);
  border-color: var(--stroke-default);
  font: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
}
body > nav > button kbd {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--content-tertiary);
}
/* Top bar: home cell, breadcrumb, right cluster. */
body > header {
  grid-area: top;
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: var(--top-bar-height);
  padding: 0 var(--content-gutter);
  background: var(--surface-default);
  border-bottom: 1px solid var(--stroke-default);
}
body > header[data-shell="top"] {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
}
body > header > nav ol {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--text-sans-md);
  color: var(--content-secondary);
}
body > header > nav li {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
body > header > nav ol > li + li::before {
  content: "/";
  color: var(--content-quaternary);
}
body > header > nav a {
  color: var(--content-secondary);
}
body > header > nav a:hover {
  color: var(--content-raise);
}
body > header > nav [aria-current="page"] {
  color: var(--content-raise);
}
/* The project crumb is a menu button: plain text with a chevron. */
body > header > nav li > button {
  height: 28px;
  padding: 0 var(--s1);
  border: 0;
  background: none;
  color: var(--content-secondary);
  font: var(--text-sans-md);
  letter-spacing: 0;
  text-transform: none;
}
body > header > nav li > button:hover {
  background: var(--surface-hover);
  color: var(--content-raise);
}

body > header > menu {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  padding: 0 var(--s3);
  list-style: none;
}
/* Right cluster buttons: bordered, sans (Oxide's scope switch, account menu). */
body > header[data-shell="top"] > menu > li > button {
  padding: 0 var(--s3);
  border-color: var(--stroke-default);
  font: var(--text-sans-md);
  letter-spacing: 0;
  text-transform: none;
  color: var(--content-default);
}
/* Home cell: the Silo or System tile and its two-line label. */
body > header > a[data-scope] {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 10px;
  height: 100%;
  padding: 0 var(--s3);
  border-right: 1px solid var(--stroke-default);
  color: var(--content-raise);
  text-decoration: none;
}
body > header > a[data-scope] > svg {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  padding: 3px;
  background: var(--surface-accent);
  color: var(--content-accent);
  border-radius: var(--r-sm);
}
/* The Silo tile: the initials of the Silo on the solid accent (DESIGN 3.2;
   content-on-accent-solid on surface-accent-solid, 9.41:1 dark, 4.72:1
   light). */
body > header > a[data-scope] > [data-initials] {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--surface-accent-solid);
  color: var(--content-on-accent-solid);
  border-radius: var(--r-lg);
  font: 600 14px/1 var(--font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
  user-select: none;
}
body > header > a[data-scope] > small {
  align-self: end;
  font: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--content-secondary);
}
body > header > a[data-scope] > strong {
  align-self: start;
  font: var(--text-sans-semi-md);
  color: var(--content-raise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body > header > a[data-scope]:has(> mark) {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}
body > header > a[data-scope]:has(> mark) > :is(small, strong) {
  grid-column: 2;
}
body > header > a[data-scope] > mark {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
}
body > header[data-shell="top"] > nav {
  padding: 0 var(--s3);
  min-width: 0;
}

/* Acting banner: a Fleet role working in another Silo (never dismissible). */
body > aside[data-shell="acting"] {
  grid-area: acting;
  display: block;
  min-height: 32px;
  padding: 0 var(--s4);
  line-height: 31px;
  text-align: center;
  background: var(--surface-notice);
  color: var(--content-default);
  border-bottom: 1px solid var(--stroke-notice);
  font: var(--text-sans-md);
}
body > aside[data-shell="acting"] strong {
  margin: 0;
  color: var(--content-notice);
}
body > aside[data-shell="acting"] > a[role="button"] {
  margin-left: var(--s3);
  vertical-align: middle;
}

/* Menu button and off-canvas sidebar (B7A-12): the button shows only where the
   sidebar is gone; the dialog is a copy of
   the sidebar, opened from it. */
body > header[data-shell="top"] > button {
  display: none;
}
body > dialog[data-shell="menu"] {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(18rem, 85vw);
  height: 100dvh;
  max-height: none;
  margin: 0;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background: var(--surface-default);
}
body > dialog[data-shell="menu"] > nav {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3);
  font: var(--text-sans-md);
}
body > dialog[data-shell="menu"] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
body > dialog[data-shell="menu"] h2 {
  margin: var(--s2) 0 0;
  padding: var(--s1) var(--s2);
  color: var(--content-tertiary);
  font: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
body > dialog[data-shell="menu"] li > a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 28px;
  padding: 0 var(--s2);
  border-radius: var(--r-sm);
  color: var(--content-default);
  text-decoration: none;
}
body > dialog[data-shell="menu"] li > a:hover {
  background: var(--surface-hover);
  color: var(--content-raise);
}
body > dialog[data-shell="menu"] a[aria-current="page"] {
  background: var(--surface-accent);
  color: var(--content-accent);
}
body > dialog[data-shell="menu"] svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--content-quaternary);
}
body > dialog[data-shell="menu"] a[aria-current="page"] svg {
  color: var(--content-accent-tertiary);
}
body > dialog[data-shell="menu"] > nav > button {
  justify-content: flex-start;
  width: 100%;
  margin-bottom: var(--s2);
  color: var(--content-tertiary);
  font: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
}
body > dialog[data-shell="menu"] > nav > button kbd {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--content-tertiary);
}
body > dialog[data-shell="menu"] hr {
  margin: var(--s2) calc(-1 * var(--s3));
}

/* The tasks indicator: a ghost icon button with the count; the browser client
   shows it while a Task runs. */
[data-live="task-indicator"]:not([hidden]) {
  display: flex;
  align-items: center;
}
[data-live="task-indicator"] > button {
  gap: var(--s1);
}

/* The page column. No maximum width: tables use all of it. */
body > main {
  grid-area: main;
  width: 100%;
  margin: 0;
  padding: var(--s6) var(--content-gutter) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  min-width: 0;
}
body > main:focus {
  outline: none;
}

/* Signed-out pages: the content is centered. */
body:not(:has(> nav)) > main {
  max-width: 26rem;
  margin: 0 auto;
  min-height: 100dvh;
  justify-content: center;
}
/* One title per card, on one line at the card width (phone included). */
body:not(:has(> nav)) > main h1 {
  font: var(--text-sans-2xl);
  overflow-wrap: anywhere;
}
body:not(:has(> nav)) > main legend {
  font: var(--text-sans-semi-md);
}

/* Narrow screens: icon-only sidebar, then no sidebar (DESIGN 9; the
   off-canvas sidebar dialog takes over). */
@media (max-width: 62.5rem) {
  body:has(> nav) {
    --sidebar-width: 3.5rem;
  }
  body > main {
    padding-inline: var(--s5);
  }
  body > header {
    padding-inline: var(--s5);
  }
  body > nav :is(h2, h3),
body > nav li > a > span,
body > nav > button {
    display: none;
  }

  body > nav li > a {
    justify-content: center;
  }
  body > header[data-shell="top"] > a[data-scope] > :not(svg, [data-initials]) {
    display: none;
  }
}
@media (max-width: 40rem) {
  body:has(> nav) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "main";
  }
  body:has(> header[data-shell="top"]) {
    grid-template-areas: "top" "acting" "main";
  }
  body > nav {
    display: none;
  }
  body > header[data-shell="top"] {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }
  body > header[data-shell="top"] > button {
    display: inline-flex;
    align-self: center;
    margin-left: var(--s2);
  }

  body > main {
    padding-inline: var(--s4);
  }
  body > header > nav {
    overflow: hidden;
    padding: 0 var(--s2);
  }
  body > header > nav ol {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  body > header > nav li {
    min-width: 0;
  }
  body > header > nav li:not(:nth-last-child(-n + 2)) {
    display: none;
  }
  body > header > nav li[aria-current="page"] {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body > header[data-shell="top"] > menu {
    padding: 0 var(--s2);
    gap: var(--s1);
  }
  body > header[data-shell="top"] > menu > li > button {
    max-width: 6.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: flex-start;
  }
  body > header > nav li:nth-last-child(2)::before {
    display: none;
  }
}

/* 6. Page header (docs/DESIGN.md 4.1) ------------------------------------- */
/* header[data-page] is <main>'s child, spaced 16px below the main padding
   (48px from the bar); a fragment root <section> is a layout column. */
main > :is(section, article, form) {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  min-width: 0;
}
main > header,
main > * > header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3) var(--s4);
}
main > header > :is(hgroup, h1),
main > * > header > :is(hgroup, h1) {
  margin-right: auto;
}
hgroup {
  display: grid;
  gap: var(--s1);
}
hgroup p {
  font: var(--text-sans-sm);
}
main > header > menu,
main > * > header > menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
header[data-page] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s4);
  margin: var(--s4) 0 var(--s1);
}
header[data-page] > h1 {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-right: auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
header[data-page] > h1 > svg {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--content-accent);
}
header[data-page] > menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
header[data-page] > menu > li {
  display: flex;
  align-items: center;
}
/* The vertical rule between the utility buttons and the actions. */
[role="separator"] {
  list-style: none;
}
header[data-page] > menu > li[role="separator"] {
  align-self: stretch;
  width: 1px;
  height: var(--control-h);
  margin: 0 var(--s1);
  background: var(--stroke-default);
}
/* Utility icon buttons of a page header and of a table action bar are
   bordered squares (Oxide). */
:is(header[data-page], [data-table-actions]) > li > :is(button, a[role="button"])[data-variant="ghost"][aria-label]:has(> svg:only-child) {
  border-color: var(--stroke-default);
}
@media (max-width: 40rem) {
  header[data-page] {
    margin-top: 0;
  }
  header[data-page] > h1 {
    flex-basis: 100%;
    font-size: 28px;
    line-height: 36px;
  }
  header[data-page] > menu {
    flex-basis: 100%;
  }
}

/* 7. Components ------------------------------------------------------------ */
/* Panels: a plain section or article of a page is a surface. The components
   below draw their own surfaces and are excluded here. */
main > * > :is(section, article):not([data-empty], [data-table], [data-properties], [data-card], [data-capacities], [data-chart], [data-actions]) {
  background: var(--surface-raise);
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-md);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}
main > * > :is(section, article):not([data-table], [data-properties], [data-capacities], [data-chart]) section {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
main > * > :is(section, article) > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
main > * > :is(section, article) > header menu {
  display: flex;
  gap: var(--s2);
}
main > * > :is(section, article) > header :is(h2, h3) {
  font: var(--text-sans-lg);
}
/* A panel that is mostly a table: the table owns the edges. */
main > * > section:not([data-table]):has(> table) {
  padding: 0;
  gap: 0;
  overflow-x: auto;
}
main > * > section:not([data-table]):has(> table) > :not(table) {
  padding: var(--s3) var(--s4);
}
main > * > section:not([data-table]):has(> table) > header {
  border-bottom: 1px solid var(--stroke-default);
}
/* A table straight in the page column gets the panel surface itself. */
main > * > table {
  background: var(--surface-raise);
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-md);
}
/* Detail pages: a card is a panel holding a header (h2 and its actions)
   and a table; its table is inset like any other. */
main > section:has(> header > h2):has(> table, > [data-table]) {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* Vertical flow: sections, articles, forms and fieldsets stack their
   children with a gap. Zero specificity, so every rule below wins. */
:where(main) :where(section, article, form, fieldset) {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}

/* Rows: a <div>, list, form or nav whose children sit side by side. */

/* A labelled control in a row (a filter bar) keeps its label above it. */

/* Grid of panels: any element marked data-grid lays its children out. */

/* Definition lists outside a properties table: label / value grid. */
dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: var(--s2) var(--s5);
  align-items: baseline;
}
dt {
  color: var(--content-secondary);
}
dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font: var(--text-sans-md);
  color: var(--content-raise);
}
dd code {
  background: none;
  padding: 0;
  color: var(--content-secondary);
}

/* Tone variables: status, badge, callout and toast read these three. A
   tone is set by data-state or data-tone; the default is neutral. */
:root {
  --tone-c: var(--content-default);
  --tone-s: var(--surface-secondary);
  --tone-r: var(--stroke-default);
}
:is(
    [data-state="running"], [data-state="attached"], [data-state="succeeded"],
    [data-state="online"], [data-state="enabled"], [data-state="healthy"],
    [data-state="success"], [data-state="ok"]
  ),
[data-tone="success"] {
  --tone-c: var(--content-success);
  --tone-s: var(--surface-success);
  --tone-r: var(--stroke-success);
}
:is(
    [data-state="paused"], [data-state="suspended"], [data-state="pending"],
    [data-state="maintenance"], [data-state="degraded"], [data-state="warning"],
    [data-state="retrying"], [data-state="serious"]
  ),
[data-tone="notice"] {
  --tone-c: var(--content-notice);
  --tone-s: var(--surface-notice);
  --tone-r: var(--stroke-notice);
}
:is(
    [data-state="failed"], [data-state="offline"], [data-state="error"],
    [data-state="critical"], [data-state="firing"]
  ),
[data-tone="error"] {
  --tone-c: var(--content-error);
  --tone-s: var(--surface-error);
  --tone-r: var(--stroke-error);
}
:is(
    [data-state="starting"], [data-state="stopping"], [data-state="rebooting"],
    [data-state="creating"], [data-state="in-progress"],
    [data-state="cancelling"]
  ),
[data-tone="info"] {
  --tone-c: var(--content-info);
  --tone-s: var(--surface-info);
  --tone-r: var(--stroke-info);
}
:is([data-state="migrating"]),
[data-tone="alt"] {
  --tone-c: var(--content-alt);
  --tone-s: var(--surface-alt);
  --tone-r: var(--stroke-alt);
}
[data-tone="accent"] {
  --tone-c: var(--content-accent);
  --tone-s: var(--surface-accent);
  --tone-r: var(--stroke-accent-secondary);
}

/* Status (docs/DESIGN.md 4.8): a badge with the state's word; the time-ago
   after it is a <small> in the cell. */
[data-state] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  background: var(--tone-s);
  color: var(--tone-c);
  box-shadow: inset 0 0 0 1px var(--tone-r);
  font: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
td [data-state],
dd [data-state] {
  font: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
}
[data-state] + small {
  margin-left: var(--s2);
  color: var(--content-tertiary);
  vertical-align: middle;
}
/* Transitional states carry a spinner before the word. */
[data-state]:is(
    [data-state="starting"], [data-state="stopping"], [data-state="rebooting"],
    [data-state="migrating"], [data-state="creating"],
    [data-state="in-progress"], [data-state="cancelling"]
  ):not(:empty)::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border: 1.5px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  border-radius: 50%;
  animation: hv-spin 0.9s linear infinite;
}
@keyframes hv-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hv-pulse {
  50% {
    opacity: 0.45;
  }
}

/* Badges (docs/DESIGN.md 4.8): <mark data-tone>. */
mark {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  background: var(--tone-s);
  color: var(--tone-c);
  box-shadow: inset 0 0 0 1px var(--tone-r);
  white-space: nowrap;
  vertical-align: middle;
}
td mark,
dd mark {
  font: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
}
search mark {
  cursor: default;
}

/* Callouts (docs/DESIGN.md 4.19). */
:is(aside, p)[data-tone] {
  display: block;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--tone-s);
  box-shadow: inset 0 0 0 1px var(--tone-r), inset 3px 0 0 var(--tone-c);
  color: var(--content-default);
  font: var(--text-sans-md);
}
:is(aside, p)[data-tone] > strong {
  color: var(--tone-c);
  margin-right: var(--s2);
}
body > aside[data-shell="acting"][data-tone] {
  border-radius: 0;
  box-shadow: none;
  padding: 0 var(--s4);
}
/* Plain lists of findings or links inside a panel. */

/* Buttons (docs/DESIGN.md 4.20): 32px, mono uppercase labels. Secondary is
   the default; data-variant picks the rest; data-size="small" is 24px. */
button,
input[type="submit"],
input[type="button"],
a[role="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: var(--control-h);
  padding: 0 var(--s3);
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--content-default);
  font: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
:is(button, input[type="submit"], a[role="button"]):hover {
  background: var(--surface-hover);
  border-color: var(--stroke-raise);
  color: var(--content-default);
  text-decoration: none;
}
:is(button, input[type="submit"], a[role="button"])[data-variant="primary"] {
  background: var(--surface-accent);
  border-color: var(--stroke-accent-secondary);
  color: var(--content-accent);
}
:is(button, input[type="submit"], a[role="button"])[data-variant="primary"]:hover {
  background: var(--surface-accent-hover);
  border-color: var(--stroke-accent-secondary);
  color: var(--content-accent-secondary);
}
:is(button, a[role="button"])[data-variant="danger"] {
  background: var(--surface-error);
  border-color: var(--stroke-error);
  color: var(--content-error);
}
:is(button, a[role="button"])[data-variant="danger"]:hover {
  background: var(--surface-error);
  border-color: var(--content-error);
  color: var(--content-error);
}
:is(button, a[role="button"])[data-variant="ghost"] {
  border-color: transparent;
  background: transparent;
  color: var(--content-secondary);
}
:is(button, a[role="button"])[data-variant="ghost"]:hover {
  background: var(--surface-hover);
  border-color: transparent;
  color: var(--content-default);
}
:is(button, a[role="button"])[data-size="small"] {
  height: var(--control-h-small);
  padding: 0 var(--s2);
  font: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
}
/* Icons: 12px before a label, 16px alone in a square 32px button. */
:is(button, a[role="button"]) > svg {
  flex: none;
  width: 12px;
  height: 12px;
}
:is(button, a[role="button"])[aria-label]:has(> svg:only-child) {
  width: var(--control-h);
  padding: 0;
}
:is(button, a[role="button"])[aria-label]:has(> svg:only-child) > svg {
  width: 16px;
  height: 16px;
}
:is(button, a[role="button"])[data-size="small"][aria-label]:has(> svg:only-child) {
  width: var(--control-h-small);
}
/* A menu trigger with a label keeps its chevron quiet. */
:is(button, a[role="button"])[aria-haspopup] > svg:last-child:not(:only-child) {
  color: var(--content-tertiary);
}
/* Disabled by state (aria-disabled, so the reason stays focusable). */
:is(button, input, a[role="button"])[aria-disabled="true"],
button:disabled {
  background: transparent;
  border-color: var(--stroke-secondary);
  color: var(--content-disabled);
  cursor: not-allowed;
}
:is(button, a[role="button"])[data-variant="ghost"][aria-disabled="true"] {
  border-color: transparent;
}
:is(button, input, a[role="button"])[aria-disabled="true"]:hover,
button:disabled:hover {
  background: transparent;
  border-color: var(--stroke-secondary);
  color: var(--content-disabled);
}
menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A menu of buttons in the page is a toolbar. */
main menu:not([popover], [role="tablist"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

/* Menus and popovers (docs/DESIGN.md 4.3, 4.13, 4.15). The script positions
   them (position: fixed, top, left) when they open. */
[popover] {
  margin: 0;
  inset: auto;
  padding: var(--s1);
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-md);
  background: var(--surface-raise);
  color: var(--content-default);
  box-shadow: var(--shadow-menu);
  overflow: visible;
}
[popover]:not(:popover-open) {
  display: none;
}
menu[popover]:popover-open {
  display: block;
  min-width: 11rem;
  z-index: 40;
}
menu[popover] > li {
  display: block;
  list-style: none;
}
menu[popover] > li > :is(button, a)[role="menuitem"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 var(--s2);
  width: 100%;
  min-height: 32px;
  height: auto;
  padding: 7px var(--s3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--content-default);
  font: var(--text-sans-semi-md);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}
menu[popover] > li > :is(button, a)[role="menuitem"]:is(:hover, :focus-visible) {
  background: var(--surface-hover);
  color: var(--content-raise);
  outline: none;
}
menu[popover] > li > [role="menuitem"][data-variant="danger"] {
  color: var(--content-error);
}
menu[popover] > li > [role="menuitem"][aria-disabled="true"] {
  color: var(--content-disabled);
}
/* The reason an item is disabled shows on focus or hover. */
menu[popover] > li > [role="menuitem"] > small:not([data-hint]) {
  display: none;
  flex-basis: 100%;
  white-space: normal;
  color: var(--content-tertiary);
}
menu[popover] > li > [role="menuitem"]:is(:hover, :focus-visible) > small:not([data-hint]) {
  display: block;
}
menu[popover] > [role="separator"] {
  height: 1px;
  margin: var(--s1) calc(-1 * var(--s1));
  background: var(--stroke-default);
}
/* A group title inside a menu (SILOS) and the trailing hint / badge of an
   annotated item (Enter silo, HOME). */
menu[popover] > [role="presentation"] {
  padding: var(--s2) var(--s3) var(--s1);
  font: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--content-tertiary);
}
menu[popover] > [role="presentation"] > strong {
  font: inherit;
}
menu[popover] > li > [role="menuitem"] > small[data-hint] {
  display: inline;
  flex-basis: auto;
  margin-left: auto;
  padding-left: var(--s4);
  font: var(--text-sans-md);
  color: var(--content-tertiary);
}
menu[popover] > li > [role="menuitem"] > mark {
  margin-left: auto;
}
menu[popover] > li > [role="menuitem"] > :is(small[data-hint], mark) + :is(small[data-hint], mark) {
  margin-left: var(--s2);
  padding-left: 0;
}
menu[popover] > li > [role="menuitem"]:is(:hover, :focus-visible) > small[data-hint] {
  color: var(--content-secondary);
}
menu[popover] > li > [role="menuitem"] svg {
  width: 16px;
  height: 16px;
  color: var(--content-quaternary);
}
/* The docs popover: a 384px card with a quiet GUIDES list. */
aside[popover]:popover-open {
  display: block;
  width: min(24rem, calc(100vw - 2rem));
  padding: var(--s4);
  z-index: 40;
}
aside[popover] > h2 {
  font: var(--text-sans-lg);
  margin-bottom: var(--s2);
}
aside[popover] > p {
  color: var(--content-secondary);
}
aside[popover] > h3 {
  margin: var(--s4) 0 var(--s2);
  font: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--content-tertiary);
}
aside[popover] > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s1);
}

/* Tabs (docs/DESIGN.md 4.5): route tabs are a <nav> of links straight in the
   page column; in-form tabs are menu[role=tablist] of buttons. The current
   tab is the heading colour with a 2px underline. */
main nav:has(> ul a[aria-current]),
menu[role="tablist"] {
  border-bottom: 1px solid var(--stroke-default);
  margin-top: var(--s4);
}
main nav:has(> ul a[aria-current]) ul,
menu[role="tablist"] {
  display: flex;
  gap: var(--s5);
  padding: 0;
  list-style: none;
  overflow-x: auto;
}
main nav:has(> ul a[aria-current]) ul {
  margin: 0 0 -1px;
}
menu[role="tablist"] {
  margin-top: 0;
}
main nav:has(> ul a[aria-current]) a,
menu[role="tablist"] > li > button {
  display: block;
  height: 40px;
  padding: 0 var(--s1);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--content-secondary);
  font: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  line-height: 38px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
menu[role="tablist"] > li > button {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  margin-bottom: -1px;
}
main nav:has(> ul a[aria-current]) a:hover,
menu[role="tablist"] > li > button:hover {
  background: transparent;
  color: var(--content-raise);
}
main nav:has(> ul a[aria-current]) a[aria-current="page"],
menu[role="tablist"] > li > button[aria-selected="true"] {
  color: var(--content-heading);
  border-bottom-color: var(--tab-underline);
}

/* Dialogs. */
dialog {
  padding: 0;
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-lg);
  background: var(--surface-raise);
  color: var(--content-default);
  box-shadow: var(--shadow-modal);
}
dialog:not([data-sheet], [data-confirm], [data-palette]) {
  width: min(32rem, calc(100vw - 2rem));
}
dialog::backdrop {
  background: var(--surface-scrim);
}
dialog:not([data-sheet], [data-confirm], [data-palette]) > * {
  padding: var(--s4) var(--s5);
}
dialog > header {
  border-bottom: 1px solid var(--stroke-default);
}

/* Confirm (docs/DESIGN.md 4.7): 480px, centred. */
dialog[data-confirm] {
  width: min(30rem, calc(100vw - 2rem));
  overflow: visible;
}
dialog[data-confirm] > form {
  display: grid;
  gap: var(--s3);
  max-width: none;
  padding: var(--s5);
}
dialog[data-confirm] h2 {
  font: var(--text-sans-xl);
  color: var(--content-raise);
}
dialog[data-confirm] p {
  color: var(--content-secondary);
}
dialog[data-confirm] strong {
  color: var(--content-raise);
}
dialog[data-confirm] > form > footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--s2);
  margin-top: var(--s3);
}

/* Side sheet (docs/DESIGN.md 4.6): 512px, full height, from the right. The
   server renders it open; the script upgrades it to a modal dialog. */
dialog[data-sheet] {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 50;
  width: min(32rem, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border-width: 0 0 0 1px;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  overflow: hidden;
}
/* The wide variant (data-size="wide") for the long create forms. */
dialog[data-sheet][data-size="wide"] {
  width: min(56rem, 100vw);
}
dialog[data-sheet]:is([open], :modal) {
  display: block;
  animation: hv-slide-in 200ms ease-out;
}
@keyframes hv-slide-in {
  from {
    transform: translateX(100%);
  }
}
dialog[data-sheet] > :is(form, article) {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: none;
  gap: 0;
}
dialog[data-sheet] > :is(form, article) > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  padding: var(--s5) var(--s6) var(--s4);
  border-bottom: 1px solid var(--stroke-default);
}
dialog[data-sheet] > :is(form, article) > header > h2 {
  font: var(--text-sans-2xl);
  color: var(--content-raise);
}
dialog[data-sheet] > :is(form, article) > header > small {
  flex-basis: 100%;
  order: 3;
}
dialog[data-sheet] > :is(form, article) > header > a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  align-self: flex-start;
  border-radius: var(--r-sm);
  color: var(--content-secondary);
}
dialog[data-sheet] > :is(form, article) > header > a:hover {
  background: var(--surface-hover);
  color: var(--content-raise);
}
dialog[data-sheet] > :is(form, article) > header > a > svg {
  width: 16px;
  height: 16px;
}
dialog[data-sheet] > :is(form, article) > section {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--s6);
}
dialog[data-sheet] > :is(form, article) > footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  padding: var(--s4) var(--s6);
  border-top: 1px solid var(--stroke-default);
}
dialog[data-sheet] > :is(form, article) > footer > p {
  flex-basis: 100%;
  color: var(--content-error);
}
@media (max-width: 40rem) {
  dialog[data-sheet] {
    width: 100vw;
    border-radius: 0;
  }
  dialog[data-sheet] > :is(form, article) > header,
dialog[data-sheet] > :is(form, article) > footer {
    padding-inline: var(--s4);
  }
  dialog[data-sheet] > :is(form, article) > section {
    padding: var(--s4);
  }
}

/* Jump-to palette (docs/DESIGN.md 4.18). */
dialog[data-palette] {
  width: min(35rem, calc(100vw - 2rem));
  margin: 12vh auto auto;
  overflow: hidden;
}
dialog[data-palette] > search {
  display: block;
  border-bottom: 1px solid var(--stroke-default);
}
dialog[data-palette] > search input {
  height: 52px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: 16px 50%;
  padding-left: 44px;
  font: var(--text-sans-lg);
  font-weight: 400;
  box-shadow: none;
}
dialog[data-palette] > search input:focus-visible {
  box-shadow: none;
  outline: none;
}
dialog[data-palette] > section {
  max-height: 50vh;
  overflow-y: auto;
  padding: var(--s2);
}
dialog[data-palette] ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
dialog[data-palette] li {
  border-radius: var(--r-sm);
}
dialog[data-palette] li > a {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 36px;
  padding: 0 var(--s3);
  color: var(--content-default);
  text-decoration: none;
}
dialog[data-palette] li > a > svg {
  width: 16px;
  height: 16px;
  color: var(--content-quaternary);
}
dialog[data-palette] li:is(:hover, [aria-selected="true"], :focus-within) {
  background: var(--surface-accent);
}
dialog[data-palette] li:is(:hover, [aria-selected="true"], :focus-within) > a {
  color: var(--content-accent);
}
dialog[data-palette] li:not([role]) {
  padding: var(--s3);
  color: var(--content-tertiary);
}

/* Toasts (docs/DESIGN.md 4.9): a fixed stack at the bottom left. */
#notices {
  position: fixed;
  left: var(--s4);
  bottom: var(--s4);
  z-index: 70;
  display: grid;
  gap: var(--s2);
  width: min(24rem, calc(100vw - 2rem));
  margin: 0;
}
#notices:empty,
#notices:not(:has(> :not(template))) {
  display: none;
}
output[data-tone] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  overflow: hidden;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--tone-s);
  box-shadow: inset 0 0 0 1px var(--tone-r), var(--shadow-toast);
  color: var(--content-default);
  font: var(--text-sans-md);
}
/* A success toast is tinted with the accent, as Oxide's. */
output[data-tone="success"] {
  --tone-c: var(--content-accent);
  --tone-s: var(--surface-accent);
  --tone-r: var(--stroke-accent-secondary);
}
output[data-tone] > strong {
  color: var(--tone-c);
}
output[data-tone] > span,
output[data-tone] > :is(strong, a) {
  flex: none;
}
output[data-tone] > span {
  flex: 1;
  min-width: 0;
}
output[data-tone] > a {
  color: var(--tone-c);
  text-decoration: underline;
}
output[data-tone] > button {
  flex: none;
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-color: transparent;
  color: var(--tone-c);
}
/* The timeout bar: 5s for success, 15s for errors, paused on hover. */
#notices > output[data-tone]::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--tone-c);
  transform-origin: left;
  animation: hv-countdown 5s linear forwards;
}
#notices > output[data-tone="error"]::after {
  animation-duration: 15s;
}
#notices > output[data-tone]:is(:hover, :focus-within)::after {
  animation-play-state: paused;
}
@keyframes hv-countdown {
  to {
    transform: scaleX(0);
  }
}
/* Progress and meters. */
progress,
meter {
  display: block;
  width: 100%;
  height: 0.375rem;
  border: 0;
  border-radius: 999px;
  background: var(--surface-tertiary);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
progress::-webkit-progress-bar,
meter::-webkit-meter-bar {
  background: var(--surface-tertiary);
  border: 0;
  border-radius: 999px;
}
progress::-webkit-progress-value {
  background: var(--content-accent);
  border-radius: 999px;
}
progress::-moz-progress-bar {
  background: var(--content-accent);
  border-radius: 999px;
}
meter::-webkit-meter-optimum-value {
  background: var(--content-success);
}
meter::-webkit-meter-suboptimum-value {
  background: var(--content-notice);
}
meter::-webkit-meter-even-less-good-value {
  background: var(--content-error);
}
meter:-moz-meter-optimum::-moz-meter-bar {
  background: var(--content-success);
}
meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: var(--content-notice);
}
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--content-error);
}

/* Empty states (docs/DESIGN.md 4.10). */
[data-empty] {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--s2);
  min-height: 200px;
  padding: var(--s7) var(--s5);
  text-align: center;
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-md);
  background: var(--surface-raise);
}
[data-empty] > svg {
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  padding: 4px;
  margin-bottom: var(--s1);
  border-radius: var(--r-sm);
  background: var(--surface-accent);
  color: var(--content-accent);
}
[data-empty] > p {
  max-width: 18rem;
}
[data-empty] > p > strong {
  font: var(--text-sans-lg);
  color: var(--content-raise);
}
[data-empty] > :last-child:is(a, button, form) {
  margin-top: var(--s2);
}

/* Capacity cards (docs/DESIGN.md 4.17). */
[data-capacities] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--s4);
}
[data-capacity] {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface-raise);
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-md);
}
[data-capacity] > header h3 {
  font: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--content-secondary);
}
[data-capacity] > header h3 > small {
  margin-left: var(--s2);
  font: inherit;
  color: var(--content-tertiary);
}
[data-capacity] > p {
  color: var(--content-raise);
}
[data-capacity] > p > data {
  font: var(--text-sans-2xl);
  font-weight: 300;
  color: var(--content-raise);
}
[data-capacity] > p > data > small {
  font: inherit;
  color: var(--content-tertiary);
}
[data-capacity] > meter {
  height: 8px;
  border-radius: var(--r-sm);
}
[data-capacity] > meter::-webkit-meter-bar {
  border-radius: var(--r-sm);
  background: var(--surface-tertiary);
}
[data-capacity] > meter::-webkit-meter-optimum-value,
[data-capacity] > meter::-webkit-meter-suboptimum-value,
[data-capacity] > meter::-webkit-meter-even-less-good-value {
  background: var(--series-1);
}
[data-capacity] > meter:-moz-meter-optimum::-moz-meter-bar,
[data-capacity] > meter:-moz-meter-sub-optimum::-moz-meter-bar,
[data-capacity] > meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--series-1);
}
[data-capacity] > footer dl {
  display: flex;
  gap: var(--s5);
  margin: 0;
}
[data-capacity] > footer dl > div {
  display: grid;
  gap: 2px;
}
[data-capacity] > footer dd {
  font: var(--text-sans-md);
  color: var(--content-raise);
}

/* Code blocks and copy buttons (docs/DESIGN.md 4.14). */
figure:has(> pre) {
  position: relative;
  margin: 0;
}
figure:has(> pre) > pre {
  padding-right: 48px;
}
figure:has(> pre) > button[data-copy] {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
}
button[data-copy] {
  width: var(--control-h-small);
  height: var(--control-h-small);
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--content-tertiary);
}
button[data-copy] > svg {
  width: 14px;
  height: 14px;
}
[data-copy-value] {
  min-width: 0;
}
dd[data-mono] {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font: var(--text-mono-code);
  color: var(--content-raise);
}
/* Timeline. */

/* Disclosure. */
details > summary {
  cursor: pointer;
}
/* A plain disclosure (a secondary form such as Resize): its summary is a
   secondary button; open, the form follows below it. */
main details {
  display: grid;
  gap: var(--s3);
  justify-items: start;
}
main details > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 2rem;
  padding: 0 var(--s3);
  border: 1px solid var(--stroke-raise);
  border-radius: var(--r-sm);
  background: var(--surface-raise);
  color: var(--content-default);
  font-size: 13px;
  font-weight: 500;
  list-style: none;
}
main details > summary::-webkit-details-marker {
  display: none;
}
main details > summary::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
main details[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
main details > :not(summary) {
  justify-self: stretch;
}

/* Creation disclosures: closed, a primary button; open, a panel holding the
   form, its summary turned into a quiet close control. */

/* 8. Forms (docs/DESIGN.md 4.16) ------------------------------------------ */
form {
  margin: 0;
}
form:not([method="dialog"], [data-inline], dialog > form):has(> label, > fieldset, > p > label) {
  display: grid;
  gap: var(--s5);
  max-width: var(--form-width);
}
/* A field is a <p> holding label, control, help and error. */
p:has(> :is(input, select, textarea)),
p:has(> label + :is(input, select, textarea)) {
  display: grid;
  gap: var(--s2);
  color: var(--content-default);
}
form p + p {
  margin-top: 0;
}
main > form p:has(> :is(input, select, textarea)) {
  max-width: 32rem;
}
/* Sections: a hairline above and a large legend (Oxide's FormDivider). The
   legend carries the rule, so it never straddles a border. */
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--s4);
  min-width: 0;
}
legend {
  width: 100%;
  padding: var(--s5) 0 var(--s3);
  margin: 0;
  border-top: 1px solid var(--stroke-default);
  font: var(--text-sans-2xl);
  color: var(--content-raise);
}
legend + p,
fieldset > p:first-of-type:not(:has(> :is(input, select, textarea))) {
  color: var(--content-secondary);
}
label {
  display: grid;
  gap: var(--s2);
  font: var(--text-sans-semi-md);
  color: var(--content-default);
}
label:has(> input[type="checkbox"], > input[type="radio"]):not(:has(> strong)) {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font: var(--text-sans-md);
}
input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="range"]),
select,
textarea {
  width: 100%;
  height: var(--input-h);
  padding: 0 var(--s3);
  border: 1px solid var(--stroke-raise);
  border-radius: var(--r-sm);
  background: var(--input-fill);
  color: var(--content-raise);
  font: var(--text-sans-md);
  transition: border-color var(--ease), box-shadow var(--ease);
}
textarea {
  height: auto;
  min-height: 6rem;
  padding: 11px var(--s3);
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  color: var(--content-tertiary);
}
:is(input, select, textarea):hover {
  border-color: var(--content-tertiary);
}
:is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--stroke-accent);
  box-shadow: 0 0 0 1px var(--stroke-accent);
}
select {
  appearance: none;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--content-tertiary) 50%),
    linear-gradient(135deg, var(--content-tertiary) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--surface-accent-solid);
}
:is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--content-error);
}
label > small,
label + small,
fieldset > small {
  font: var(--text-sans-sm);
}
small[role="alert"] {
  color: var(--content-error);
}
/* Radio cards: a label wrapping a radio, a title and a description. */
label:has(> input[type="radio"]):has(> strong) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s3);
  row-gap: 2px;
  align-items: start;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-md);
  cursor: pointer;
}
label:has(> input[type="radio"]):has(> strong) > input {
  grid-row: 1 / 3;
  margin-top: 2px;
}
label:has(> input[type="radio"]):has(> strong) > small {
  grid-column: 2;
}
label:has(> input[type="radio"]:checked):has(> strong) {
  border-color: var(--stroke-accent);
  background: var(--surface-accent);
}
/* Identifiers typed in forms read better in mono. */
input[inputmode="numeric"],
input[data-mono],
input[name$="uuid"],
input[name$="mac"],
input[name$="address"] {
  font-family: var(--font-mono);
}
/* Form actions: the last <p>/<menu> holding the submit button. */
form > menu,
main form > footer {
  display: flex;
  gap: var(--s2);
  justify-content: flex-end;
}
/* Inline forms (filter rows, one-button actions) stay on one line. */
form[data-inline],
td form,
menu form {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--s2);
  max-width: none;
}

/* Search / filter bar (docs/DESIGN.md 4.11). */
search {
  display: block;
}
search form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  max-width: none;
}
search input[type="search"] {
  padding-left: 2rem;
  background-color: var(--input-fill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e908d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.6rem 50%;
  background-size: 0.95rem;
}
/* Filter rows above lists: labelled selects side by side. */

[data-table-actions] search :is(input, select) {
  width: auto;
  min-width: 10rem;
}
[data-table-actions] search input[type="search"] {
  min-width: 16rem;
}
/* A filter bar is one compact row of controls that wraps (DESIGN 4.11): the
   search box, text filters and facet selects share the row, each growing to a
   readable width; on a phone every control takes the full row. */
search > form :is(input:not([type="hidden"], [type="checkbox"], [type="radio"]), select) {
  flex: 1 1 9rem;
  width: auto;
  min-width: 0;
  max-width: 16rem;
  height: var(--control-h);
}
search > form > input[type="search"] {
  flex-basis: 14rem;
}
search > form > :is(button, a[role="button"]) {
  flex: 0 0 auto;
}
@media (max-width: 40rem) {
  search > form :is(input:not([type="hidden"]), select) {
    flex-basis: 100%;
    max-width: none;
  }
}
/* Table action bars and page footers use compact 32px controls. */
[data-table-actions] :is(input:not([type="checkbox"], [type="radio"]), select),
[data-shell="page-footer"] :is(input, select) {
  height: var(--control-h);
}

/* 9. Tables (docs/DESIGN.md 4.2, 4.3) ------------------------------------- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: var(--text-sans-md);
  font-variant-numeric: tabular-nums;
}
caption {
  padding: var(--s3) var(--s4);
  text-align: left;
  font: var(--text-sans-semi-md);
  color: var(--content-raise);
  caption-side: top;
}
[data-table] > table > caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The panel: the table itself, hairline-bordered, nearly square. */
[data-table] > table,
:is(main, dialog, [data-chart]) > table,
details > table {
  background: var(--surface-raise);
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-md);
  overflow: hidden;
}
thead th {
  height: var(--head-h);
  padding: 0 var(--s3);
  background: var(--surface-secondary);
  color: var(--content-secondary);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--stroke-default);
}
/* Every column is separated by a vertical hairline, header and body. */
:is(th, td) + :is(th, td) {
  border-left: 1px solid var(--stroke-default);
}
th[aria-sort] button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  gap: 0.4em;
  align-items: center;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
th[aria-sort] button:focus-visible {
  outline: 2px solid var(--stroke-accent);
  outline-offset: 2px;
}
th[aria-sort="ascending"] button::after {
  content: "\2191";
  color: var(--content-accent);
}
th[aria-sort="descending"] button::after {
  content: "\2193";
  color: var(--content-accent);
}
td,
tbody th {
  height: var(--row-h);
  padding: 0 var(--s3);
  border-bottom: 1px solid var(--stroke-default);
  vertical-align: middle;
  color: var(--content-default);
  text-align: left;
  font: var(--text-sans-md);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
tbody tr:last-child > :is(td, th) {
  border-bottom: 0;
}
tbody tr {
  transition: background var(--ease);
}
tbody tr:hover {
  background: var(--surface-hover);
}
tbody tr[aria-selected="true"] {
  background: var(--surface-accent);
}
/* The name link: body colour, underlined; accent on hover. */
td a:not([role="button"]) {
  color: var(--content-default);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
td a:not([role="button"]):hover {
  color: var(--content-accent);
}
td > small,
td small {
  color: var(--content-tertiary);
}
td code,
td[data-mono] {
  font: var(--text-mono-code);
  background: none;
  padding: 0;
  color: var(--content-secondary);
}
/* Description text keeps its line breaks. */
td[data-lines],
[data-properties] [data-wide] > dd {
  white-space: pre-line;
}
td[data-num],
th[data-num] {
  text-align: right;
}
td > :is([aria-label="none"], span[aria-label]) {
  color: var(--content-tertiary);
}
/* The selection column: just wide enough for a checkbox, centred. */
td[data-select],
th[data-select] {
  width: 1%;
  padding: 0 var(--s3);
  text-align: center;
}
td[data-select] > input,
th[data-select] > input {
  display: block;
  margin: 0 auto;
}
/* The row actions cell: one ghost icon button, as narrow as it can be. */
td[data-actions],
th[data-actions] {
  width: 1%;
  padding: 0 var(--s1);
  text-align: center;
}
td[data-actions] > button {
  margin: 0 auto;
}
/* Table action bar: refresh and Updated/Live on the left, filters, the
   primary create action on the right. */
[data-table-actions] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s3);
}
[data-table-actions] > li {
  display: flex;
  align-items: center;
}
[data-table-actions] > li:has(> [data-variant="primary"]) {
  margin-left: auto;
}
[data-table-actions] small {
  font: var(--text-sans-md);
  color: var(--content-secondary);
}
/* Live: a pulsing dot instead of a time. */
[data-table-actions] small:not(:has(time))::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--s2);
  border-radius: 50%;
  background: var(--content-success);
  animation: hv-pulse 2s ease-in-out infinite;
}
[data-table] {
  min-width: 0;
}
@media (max-width: 62.5rem) {
  [data-table] {
    overflow-x: auto;
  }
  [data-table] > table {
    min-width: 40rem;
  }
}

/* Pagination and page-level form actions (docs/DESIGN.md 4.12): a sticky
   footer under the content. */
footer[data-shell="page-footer"] {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  margin: auto calc(-1 * var(--content-gutter)) 0;
  padding: var(--s3) var(--content-gutter);
  background: var(--surface-default);
  border-top: 1px solid var(--stroke-default);
  font: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--content-tertiary);
}
footer[data-shell="page-footer"] > nav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--s2);
}
footer[data-shell="page-footer"] > nav > small {
  margin-right: auto;
  margin-left: var(--s3);
  font: inherit;
  letter-spacing: inherit;
  color: var(--content-tertiary);
}
footer[data-shell="page-footer"] label {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font: inherit;
  letter-spacing: inherit;
  color: var(--content-tertiary);
}
footer[data-shell="page-footer"] select {
  width: auto;
  min-width: 4.5rem;
  height: var(--control-h-small);
  padding: 0 1.5rem 0 var(--s2);
  background-color: var(--surface-secondary);
  border-color: var(--stroke-default);
  border-radius: var(--r-sm);
  font: var(--text-mono-sm);
  color: var(--content-default);
  background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
}
footer[data-shell="page-footer"] a[role="button"] {
  height: var(--control-h-small);
  padding: 0 var(--s2);
  font: var(--text-mono-sm);
  color: var(--content-tertiary);
}
footer[data-shell="page-footer"] a[role="button"]:not([aria-disabled="true"]):hover {
  color: var(--content-raise);
}
/* A disabled pager link has no href; it is not focusable and says so. */
a[role="button"][aria-disabled="true"]:not([href]) {
  color: var(--content-disabled);
  cursor: not-allowed;
}
footer[data-shell="page-footer"] > :is(button, a[role="button"]) {
  height: var(--control-h);
}

/* Properties table (docs/DESIGN.md 4.4): bordered grid of label/value rows,
   two columns on wide screens. Each <dl> is a column; rows are placed
   explicitly so a wide row (description) can span both. The column divider is
   drawn by the surface itself and a row has a hairline only between rows, so a
   column that is shorter than the other leaves surface, not a bare cell. */
[data-properties] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
  align-content: start;
  gap: 0;
  overflow: hidden;
  background-color: var(--surface-raise);
  background-image: linear-gradient(var(--stroke-default), var(--stroke-default));
  background-size: 1px 100%;
  background-position: 50% 0;
  background-repeat: no-repeat;
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-md);
}
[data-properties] > dl {
  display: contents;
}
[data-properties] > dl > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s3);
  min-height: 38px;
  padding: 0 var(--s4);
}
[data-properties] > dl > div:not(:last-child) {
  border-bottom: 1px solid var(--stroke-secondary);
}
[data-properties] > dl:first-child > div {
  grid-column: 1;
}
[data-properties] > dl:not(:first-child) > div {
  grid-column: 2;
}
[data-properties] > dl > div[data-wide] {
  grid-column: 1 / -1;
  border-top: 1px solid var(--stroke-secondary);
  background: var(--surface-raise);
}
[data-properties] dt {
  color: var(--content-secondary);
}
[data-properties] dd {
  font: var(--text-sans-md);
  color: var(--content-raise);
}
[data-properties] dd a {
  color: var(--content-raise);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
[data-properties] dd a:hover {
  color: var(--content-accent);
}
@media (max-width: 62.5rem) {
  [data-properties] {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-properties] {
    background-image: none;
  }
  [data-properties] > dl > div,
[data-properties] > dl:not(:first-child) > div {
    grid-column: 1;
  }
  [data-properties] > dl > div {
    border-bottom: 1px solid var(--stroke-secondary);
  }
  [data-properties] > dl:last-child > div:last-child {
    border-bottom: 0;
  }
}

/* Card (docs/DESIGN.md 4.21): <section data-card> = <header> (title,
   description, right-aligned actions) over a body. The header is separated from
   the body by a hairline; a table or empty state inside keeps its own border. */
[data-card] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-raise);
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-md);
}
[data-card] + [data-card] {
  margin-top: var(--s4);
}
[data-card="narrow"] {
  max-width: 740px;
}
[data-card] > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  min-height: 64px;
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--stroke-secondary);
}
[data-card] > header > h2 {
  margin: 0;
  font: var(--text-sans-lg);
  color: var(--content-raise);
}
[data-card] > header > p {
  flex-basis: 100%;
  order: 1;
  margin: 0;
  font: var(--text-sans-md);
  color: var(--content-secondary);
}
[data-card] > header > menu {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
[data-card] > :not(header) {
  margin: var(--s5);
}
[data-card] > :not(header):last-child {
  margin-bottom: var(--s5);
}

/* Component refinements (hv-b7a.35) ---------------------------------------- */
/* A table directly in a card is flush: the card draws the edge, so the table
   drops its own border and corners (no double rule); the header hairline of the
   card and the header row of the table meet. */
[data-card] > :is(table, [data-table]) {
  margin: 0;
}
[data-card] > :is(table, [data-table]):last-child {
  margin-bottom: 0;
}
[data-card] > table,
[data-card] > [data-table] > table {
  border: 0;
  border-radius: 0;
  background: transparent;
}
[data-card] > [data-table] > [data-table-actions] {
  margin: var(--s3) var(--s5);
}
/* Identifiers and copy buttons share one baseline and centre in their cell. */
td > [data-copy-value],
dd > [data-copy-value] {
  display: inline-block;
  vertical-align: middle;
  line-height: var(--control-h-small);
}
td > button[data-copy],
dd > button[data-copy] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: var(--s1);
}
td[data-mono] {
  padding: 0 var(--s3);
  white-space: nowrap;
}
/* A nested fieldset (SSH keys inside a section) is a sub-section: a smaller
   legend and no rule above it. The legend of any fieldset in a sheet is
   likewise one step down from the page-form legend. */
fieldset fieldset > legend,
dialog[data-sheet] fieldset > legend {
  padding: var(--s3) 0 var(--s2);
  border-top: 0;
  font: var(--text-sans-lg);
  color: var(--content-raise);
}
fieldset fieldset {
  padding-left: var(--s4);
  border-left: 1px solid var(--stroke-default);
}
/* Preset radio cards (hardware presets) lay out four across, two across in a
   sheet or on a tablet, one on a phone; the legend and its description keep
   the whole row. */
fieldset:has(> label > input[type="radio"] + strong) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
fieldset:has(> label > input[type="radio"] + strong) > :not(label) {
  grid-column: 1 / -1;
}
@media (max-width: 62.5rem) {
  fieldset:has(> label > input[type="radio"] + strong) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
dialog[data-sheet] fieldset:has(> label > input[type="radio"] + strong) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
dialog[data-sheet][data-size="wide"] fieldset:has(> label > input[type="radio"] + strong) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 40rem) {
  fieldset:has(> label > input[type="radio"] + strong),
dialog[data-sheet] fieldset:has(> label > input[type="radio"] + strong),
dialog[data-sheet][data-size="wide"] fieldset:has(> label > input[type="radio"] + strong) {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* A list of checkboxes or radios is a plain stack, not a bulleted list. */
:is(ul, ol):has(> li > label > input:is([type="checkbox"], [type="radio"])) {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The inline form (add a member, attach a disk): a field and its button on one
   row, the button on the field's baseline, never stretched to the card. */
form[data-inline] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3);
  max-width: none;
}
form[data-inline] > p {
  flex: 0 1 24rem;
  min-width: min(100%, 12rem);
  max-width: 100%;
}
form[data-inline] > :is(button, a[role="button"]) {
  flex: 0 0 auto;
}

/* Polish (B7A-34) ---------------------------------------------------------- */
/* A badge after a name (DEFAULT, PERSONAL) keeps its distance. */
td > :is(a, span, strong) + mark,
dd > :is(a, span, strong) + mark,
td > mark + :is(a, span) {
  margin-inline-start: var(--s2);
}
/* A quieter qualifier after a cell's text (a Pool, a provider key) is a
   word apart; at the start of a line the space collapses away. */
td small::before {
  content: " ";
}
/* A long description in a cell is clamped to two lines (the title holds the
   whole text). */
td > p:only-child {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
  max-width: 40rem;
}
/* A form's own submit button keeps its width (Save fleet roles), it does not
   stretch to the fields' column. */
:where(main, dialog) form > :is(button, input[type="submit"]),
:where(main, dialog) form > p:has(> button:only-child) > button {
  justify-self: start;
  align-self: start;
  width: auto;
}
/* A sheet section of number fields only (Edit quotas) is a 2 x 2 grid. */
dialog[data-sheet] section:has(> p > input[type="number"]):not(:has(> p > :is(input:not([type="number"], [type="hidden"]), select, textarea))) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  align-items: start;
  gap: var(--s4);
}
dialog[data-sheet] section:has(> p > input[type="number"]) > :not(p:has(> input)) {
  grid-column: 1 / -1;
}
/* Properties: a wide row (the description) closes the table across both
   columns, so the columns stay balanced; a single list takes the full width. */
[data-properties] > dl > div[data-wide] {
  order: 1;
}
[data-properties]:has(> dl:only-child) {
  grid-template-columns: minmax(0, 1fr);
  background-image: none;
}
[data-properties]:has(> dl:only-child) > dl > div {
  grid-column: 1;
}
/* A page header separator only separates: none before the first action. */
header[data-page] > menu > li[role="separator"]:first-child,
header[data-page] > menu > li[role="separator"]:last-child {
  display: none;
}
/* Segmented control (the console's Screen / Serial, Control / View only):
   joined buttons in one hairline frame, the current one accent-tinted. */
menu[role="group"] {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-sm);
  overflow: hidden;
}
menu[role="group"] > li {
  display: flex;
}
menu[role="group"] > li + li {
  border-left: 1px solid var(--stroke-default);
}
menu[role="group"] a[role="button"] {
  border: 0;
  border-radius: 0;
  color: var(--content-secondary);
}
menu[role="group"] a[role="button"]:hover {
  background: var(--surface-hover);
  color: var(--content-raise);
}
menu[role="group"] a[aria-current="page"],
menu[role="group"] a[aria-current="page"]:hover {
  background: var(--surface-accent);
  color: var(--content-accent);
}
/* The filter bar is one row: the search box and facets share the action
   bar's free width instead of stacking in a narrow cell. */
[data-table-actions] > li:has(> search) {
  flex: 1 1 22rem;
  min-width: 0;
}
[data-table-actions] > li > search,
[data-table-actions] > li > search > form {
  width: 100%;
}
/* A long secret or command in a code block wraps instead of overflowing. */
figure:has(> pre) > pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* The console pages give the screen or the serial terminal the rest of the
   page height. */
main:has(> section:is([data-console], [data-serial])) {
  display: flex;
  flex-direction: column;
}
main > section:is([data-console], [data-serial]) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 24rem;
  background: none;
  border: 0;
  padding: 0;
}
main > section:is([data-console], [data-serial]) > :not(noscript) {
  flex: 1 1 auto;
  max-width: 100%;
}
/* A bulk action waits for a selection: quiet until a row is checked. */
button[data-bulk][aria-disabled="true"] {
  cursor: not-allowed;
}
/* Page footer labels never break. */
footer[data-shell="page-footer"] :is(label, small) {
  white-space: nowrap;
}
@media (max-width: 40rem) {
  /* Phones: the breadcrumb is the current page only. */
  body > header > nav li:not(:last-child) {
    display: none;
  }
  body > header > nav li:last-child::before {
    display: none;
  }
  /* Tables keep the name, the second column and the last (row actions);
     the other columns are hidden rather than scrolled out of view. */
  [data-table] tr > :nth-child(n + 3):not(:last-child) {
    display: none;
  }
  [data-table] > table {
    min-width: 0;
  }
  [data-table] td {
    overflow-wrap: anywhere;
  }
  /* The scope switch and account menu shrink to leave the crumb room. */
  body > header[data-shell="top"] > menu > li > button {
    max-width: 4.5rem;
    padding-inline: var(--s2);
  }
  body > header[data-shell="top"] > menu > li > button > svg:first-child:not(:only-child) {
    display: none;
  }
  footer[data-shell="page-footer"] > nav {
    flex-wrap: wrap;
    row-gap: var(--s2);
  }
  footer[data-shell="page-footer"] > nav > form {
    flex-basis: 100%;
  }
  footer[data-shell="page-footer"] > nav > small {
    margin-left: 0;
  }
}

/* 10. Charts --------------------------------------------------------------- */
/* <figure data-chart>: title in figcaption, uPlot canvas inside, the table
   view in a <details> after it (docs/DESIGN.md §8.3). */
figure {
  margin: 0;
}
figure[data-chart] {
  display: grid;
  align-content: start;
  gap: var(--s2);
  min-width: 0;
  padding: var(--s4);
  background: var(--surface-raise);
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-md);
}
figure[data-chart] > figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  font: var(--text-sans-semi-md);
  color: var(--content-raise);
}
figure[data-chart] > figcaption > small {
  margin-right: auto;
  font: var(--text-mono-sm);
  color: var(--content-tertiary);
}
figure[data-chart] > figcaption > data {
  font: var(--text-mono-sm);
  color: var(--content-secondary);
}
figure[data-chart] > [data-plot],
figure[data-chart] > [data-live] {
  min-height: 10rem;
  width: 100%;
}
figure[data-chart] > p {
  font: var(--text-sans-sm);
  color: var(--content-tertiary);
}
figure[data-chart] > details {
  overflow-x: auto;
}
figure[data-chart] > details > summary {
  font: var(--text-sans-sm);
  color: var(--content-tertiary);
}
/* A chart of several series (DESIGN.md 4.17): the legend under the plot and
   the readout at the cursor key each line with a short stroke of its colour
   ([data-series]: 1-6 the categorical slots, neutral, mean, accent); the names
   and values stay in text ink. */
figure[data-chart] > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--text-mono-sm);
  color: var(--content-secondary);
}
/* Series names are the machine's own (cpu0): not uppercased like labels. */
figure[data-chart] :is(th, dt)[data-series] {
  text-transform: none;
  letter-spacing: normal;
}
figure[data-chart] :is(li, dt)[data-series] {
  display: flex;
  align-items: center;
  gap: var(--s1);
}
figure[data-chart] :is(li, dt)[data-series]::before {
  content: "";
  flex: none;
  width: 14px;
  height: 2px;
  background: var(--stroke-raise);
}
figure[data-chart] :is(li, dt)[data-series="1"]::before {
  background: var(--series-1);
}
figure[data-chart] :is(li, dt)[data-series="2"]::before {
  background: var(--series-2);
}
figure[data-chart] :is(li, dt)[data-series="3"]::before {
  background: var(--series-3);
}
figure[data-chart] :is(li, dt)[data-series="4"]::before {
  background: var(--series-4);
}
figure[data-chart] :is(li, dt)[data-series="5"]::before {
  background: var(--series-5);
}
figure[data-chart] :is(li, dt)[data-series="6"]::before {
  background: var(--series-6);
}
figure[data-chart] :is(li, dt)[data-series="accent"]::before {
  height: 3px;
  background: var(--series-1);
}
figure[data-chart] :is(li, dt)[data-series="mean"]::before {
  height: 3px;
  background: var(--content-raise);
}
figure[data-chart] [data-plot] aside {
  position: absolute;
  z-index: 1;
  min-width: 11rem;
  padding: var(--s2) var(--s3);
  background: var(--surface-raise);
  border: 1px solid var(--stroke-raise);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-menu);
  font: var(--text-mono-sm);
  color: var(--content-default);
  pointer-events: none;
}
figure[data-chart] [data-plot] aside[hidden] {
  display: none;
}
figure[data-chart] [data-plot] aside p {
  margin: 0 0 var(--s1);
  color: var(--content-tertiary);
}
figure[data-chart] [data-plot] aside dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--s3);
  margin: 0;
}
figure[data-chart] [data-plot] aside dd {
  margin: 0;
  text-align: right;
  color: var(--content-raise);
}
figure[data-chart] [data-plot] aside [aria-current] {
  font-weight: 700;
  color: var(--content-raise);
}
/* Network map (Observability): a server-rendered <svg> in <figure data-map>.
   Shape tells the kind apart (circle: virtual machine, square: address,
   diamond: external group); fill is a second cue, never the only one. Link
   width and node size carry the bytes. */
figure[data-map] {
  display: grid;
  gap: var(--s2);
  min-width: 0;
}
figure[data-map] > svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 75vh;
  background: var(--surface-raise);
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-md);
}
figure[data-map] svg line {
  stroke: var(--stroke-raise);
  stroke-linecap: round;
}
figure[data-map] svg line:hover {
  stroke: var(--content-accent);
}
svg [data-kind] {
  stroke: var(--surface-raise);
  stroke-width: 2;
}
svg [data-kind="host"] {
  fill: var(--series-1);
}
svg [data-kind="vm"] {
  fill: var(--series-3);
}
svg [data-kind="ip"] {
  fill: var(--series-5);
}
svg [data-kind="external"] {
  fill: var(--content-tertiary);
}
figure[data-map] svg text {
  fill: var(--content-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  pointer-events: none;
}
figure[data-map] svg a:is(:hover, :focus-visible) [data-kind] {
  stroke: var(--content-accent);
  stroke-width: 3;
}
figure[data-map] > figcaption svg {
  width: 1rem;
  height: 1rem;
  vertical-align: -0.15em;
}
figure[data-map] > figcaption svg [data-kind] {
  stroke-width: 1;
}
/* uPlot runtime classes (added by the vendored library itself). */
.uplot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--content-tertiary);
  width: 100%;
}
.uplot,
.uplot * {
  box-sizing: border-box;
}
.u-wrap {
  position: relative;
  user-select: none;
}
.u-over,
.u-under {
  position: absolute;
}
.u-under {
  overflow: hidden;
}
.uplot canvas {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.u-axis {
  position: absolute;
}
.u-legend {
  margin: var(--s2) auto 0;
  text-align: left;
  font-size: 11px;
}
.u-legend .u-marker {
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.35em;
  background-clip: padding-box !important;
}
.u-inline tr {
  margin-right: var(--s3);
}
.u-legend th {
  font-weight: 500;
}
.u-legend td {
  padding: 0 var(--s1);
  border: 0;
  font-family: var(--font-mono);
  font-size: 11px;
}
.u-inline {
  display: block;
}
.u-inline * {
  display: inline-block;
}
.u-inline tr {
  margin-right: 1rem;
}
.u-cursor-x,
.u-cursor-y {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
}
.u-cursor-x {
  height: 100%;
  border-right: 1px dashed var(--stroke-raise);
}
.u-cursor-y {
  width: 100%;
  border-bottom: 1px dashed var(--stroke-raise);
}
.u-cursor-pt {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  border: 2px solid var(--surface-raise);
  pointer-events: none;
  will-change: transform;
  background-clip: padding-box !important;
}
.u-select {
  position: absolute;
  pointer-events: none;
  background: var(--surface-accent);
}
.u-hz .u-cursor-y,
.u-off {
  display: none;
}
/* Sparklines in tables. */

/* The manual (docs/DESIGN.md 4.22): a section of the manual is a <section>
   holding a <nav aria-label> of the sections beside the <article> of the
   rendered Markdown. The article is a panel; its headings, paragraphs, lists,
   code and tables use the base typography above. */
main > section:has(> nav[aria-label] + article) {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--s5);
}
main > section > nav[aria-label] > ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s1);
}
main > section > nav[aria-label] > ol a {
  display: block;
  padding: var(--s1) var(--s3);
  border-radius: var(--r-sm);
  color: var(--content-secondary);
}
main > section > nav[aria-label] > ol a:hover {
  background: var(--surface-secondary);
  color: var(--content-raise);
  text-decoration: none;
}
main > section > nav[aria-label] > ol a[aria-current="page"] {
  background: var(--surface-secondary);
  color: var(--content-heading);
  font-weight: 500;
}
main > section > article[lang] {
  max-width: 78ch;
}
main > section > article[lang] :is(ul, ol) {
  margin: 0;
  padding-left: var(--s5);
  color: var(--content-secondary);
}
main > section > article[lang] li + li {
  margin-top: var(--s1);
}
main > section > article[lang] h2 {
  font: var(--text-sans-2xl);
}
main > section > article[lang] h3 {
  font: var(--text-sans-xl);
  margin-top: var(--s3);
}
main > section > article[lang] blockquote {
  margin: 0;
  padding: var(--s2) var(--s4);
  border-left: 2px solid var(--stroke-default);
}
main > section > article[lang] table {
  background: var(--surface-raise);
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-md);
  overflow: hidden;
}
main > section > article[lang] td {
  padding: var(--s2) var(--s3);
  vertical-align: top;
}
@media (max-width: 760px) {
  main > section:has(> nav[aria-label] + article) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 11. Runtime states (htmx adds these classes itself) --------------------- */
[aria-busy="true"] {
  cursor: progress;
}
.htmx-indicator {
  opacity: 0;
  transition: opacity var(--ease);
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}
.htmx-request:is(form, section, table) {
  opacity: 0.7;
  transition: opacity var(--ease);
}
.htmx-swapping {
  opacity: 0;
  transition: opacity 80ms ease-out;
}

/* 12. Print ---------------------------------------------------------------- */
@media print {
  body > nav,
body > header,
menu,
button {
    display: none !important;
  }
  body {
    display: block;
    background: #fff;
    color: #000;
  }
  main section,
main article,
table {
    border-color: #999 !important;
    break-inside: avoid;
  }
}

/* 13. Motion and forced colors -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* Nothing moves: the spinner is a static ring, the timeout bar is gone. */
  #notices > output[data-tone]::after {
    display: none;
  }
}
@media (forced-colors: active) {
  button,
a[role="button"],
input,
select,
textarea,
table,
[data-properties],
[data-capacity],
[data-empty],
dialog,
[popover],
output[data-tone],
:is(aside, p)[data-tone],
[data-state],
mark {
    border: 1px solid CanvasText;
    forced-color-adjust: auto;
  }
  [data-state],
mark,
:is(aside, p)[data-tone],
output[data-tone] {
    box-shadow: none;
  }
  :focus-visible {
    outline: 2px solid Highlight;
  }
  [data-state]::before {
    forced-color-adjust: none;
  }
  body > nav a[aria-current="page"],
main nav a[aria-current="page"],
menu[role="tablist"] > li > button[aria-selected="true"] {
    outline: 2px solid Highlight;
  }
  :is(button, a[role="button"])[aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }
}
}