/* Proxy Panel styles. The values follow DESIGN.md next to this directory.
   Light is the base palette. The dark palette is applied either by the system
   preference or by an explicit choice from the toggle, which wins over it; the
   two dark blocks carry the same values. */
:root {
  color-scheme: light;
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --line: #e4e4e7;
  --line-strong: #d4d4d8;
  --text: #18181b;
  --muted: #6b6b74;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff6ff;
  --accent-text: #ffffff;
  --link: #2563eb;
  --focus: rgba(37, 99, 235, .35);
  --ok-text: #15803d;
  --ok-bg: #f0fdf4;
  --ok-dot: #16a34a;
  --warn-text: #b45309;
  --warn-bg: #fffbeb;
  --warn-dot: #d97706;
  --down-text: #b91c1c;
  --down-bg: #fef2f2;
  --down-dot: #dc2626;
  --down-line: #fca5a5;
  --unknown-text: #52525b;
  --unknown-bg: #f4f4f5;
  --unknown-dot: #a1a1aa;
  /* Neutral fill for the dashboard's "Modem-Reboot" IP-source pill; the reboot
     button itself stays unstyled. Same value in both dark blocks. */
  --reboot: #52525b;
  --maint-text: #1d4ed8;
  --maint-bg: #eff6ff;
  --maint-dot: #3b82f6;
  --code-bg: #f4f4f5;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sidebar: 240px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111113;
    --surface: #18181b;
    --surface-2: #1f1f23;
    --line: #2a2a2e;
    --line-strong: #3f3f46;
    --text: #f4f4f5;
    --muted: #a1a1aa;
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-soft: #1e2a44;
    --accent-text: #ffffff;
    --link: #60a5fa;
    --focus: rgba(96, 165, 250, .45);
    --ok-text: #4ade80;
    --ok-bg: #14261b;
    --ok-dot: #22c55e;
    --warn-text: #fbbf24;
    --warn-bg: #2b2111;
    --warn-dot: #f59e0b;
    --down-text: #f87171;
    --down-bg: #2e1616;
    --down-dot: #ef4444;
    --down-line: #7f1d1d;
    --unknown-text: #a1a1aa;
    --unknown-bg: #232327;
    --unknown-dot: #71717a;
    --reboot: #52525b;
    --maint-text: #93c5fd;
    --maint-bg: #172036;
    --maint-dot: #60a5fa;
    --code-bg: #232327;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111113;
  --surface: #18181b;
  --surface-2: #1f1f23;
  --line: #2a2a2e;
  --line-strong: #3f3f46;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-soft: #1e2a44;
  --accent-text: #ffffff;
  --link: #60a5fa;
  --focus: rgba(96, 165, 250, .45);
  --ok-text: #4ade80;
  --ok-bg: #14261b;
  --ok-dot: #22c55e;
  --warn-text: #fbbf24;
  --warn-bg: #2b2111;
  --warn-dot: #f59e0b;
  --down-text: #f87171;
  --down-bg: #2e1616;
  --down-dot: #ef4444;
  --down-line: #7f1d1d;
  --unknown-text: #a1a1aa;
  --unknown-bg: #232327;
  --unknown-dot: #71717a;
  --reboot: #52525b;
  --maint-text: #93c5fd;
  --maint-bg: #172036;
  --maint-dot: #60a5fa;
  --code-bg: #232327;
}

/* Base */
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--text); margin: 0; text-wrap: balance; }
h1 { font-size: 24px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
h2 { font-size: 15px; font-weight: 600; line-height: 1.4; }
h3 { font-size: 13px; font-weight: 600; margin: 20px 0 8px; }
p { margin: 0 0 12px; }
ul { margin: 0 0 12px; padding-left: 20px; }
code { background: var(--code-bg); border-radius: 4px; font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; padding: 1px 5px; }
code:empty { display: none; }
pre { background: var(--code-bg); border-radius: 6px; font-family: var(--mono); font-size: 12px; overflow-x: auto; padding: 12px; }
:focus-visible { border-radius: 4px; outline: 2px solid var(--accent); outline-offset: 2px; }
.muted, .empty { color: var(--muted); }
.num, time { font-variant-numeric: tabular-nums; }
.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.skip-link { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; left: 12px; padding: 8px 12px; position: absolute; top: -48px; z-index: 20; }
.skip-link:focus { top: 12px; }

/* App frame: fixed sidebar plus content column */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  position: fixed;
  top: 0;
  width: var(--sidebar);
  z-index: 10;
}
.sidebar-head { align-items: center; display: flex; height: 56px; justify-content: space-between; padding: 0 20px; }
.brand { color: var(--text); font-size: 15px; font-weight: 650; }
.brand:hover { text-decoration: none; }
.menu-toggle { display: none; }
.sidebar-menu { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; padding: 8px 12px 16px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { border-radius: 6px; color: var(--text); font-weight: 500; padding: 7px 10px; }
.nav a:hover { background: var(--surface-2); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.sidebar-foot { border-top: 1px solid var(--line); display: grid; gap: 10px; margin-top: auto; padding: 16px 10px 0; }
.sidebar-user { display: grid; min-width: 0; }
.sidebar-user strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user span { color: var(--muted); font-size: 13px; }
.sidebar-foot form { margin: 0; }
.sidebar-foot button { width: 100%; }
.version { color: var(--muted); font-size: 12px; }

.main { margin-left: var(--sidebar); min-width: 0; }
.content {
  align-items: start;
  column-gap: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0 auto;
  max-width: 1200px;
  padding: 28px 32px 48px;
  row-gap: 24px;
}
.content > * { grid-column: 1 / -1; min-width: 0; }
.content > .page-header { grid-column: 1; grid-row: 1; }
.content > .content-tools { align-self: center; grid-column: 2; grid-row: 1; }
.stack { display: grid; gap: 24px; min-width: 0; }

/* Page header */
.page-header { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: space-between; min-height: 36px; }
.page-header > div { min-width: 0; }
.page-header p { color: var(--muted); margin: 4px 0 0; }
.title-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.title-row h1 { overflow-wrap: anywhere; }
.meta { color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.meta .ip { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 500; }
.content-tools { align-items: center; display: flex; gap: 8px; }

/* Sections */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-width: 0; padding: 20px; }
.panel > h2 { margin-bottom: 4px; }
.panel > h2:only-child { margin-bottom: 0; }
.panel > h2 + form, .panel > h2 + .filters { margin-top: 14px; }
.panel > h2 + p.muted, .panel-head p { font-size: 13px; }
.panel-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; margin-bottom: 4px; }
.panel-head .count-note { color: var(--muted); font-size: 13px; }
.panel > *:last-child { margin-bottom: 0; }
.panel > p.muted { margin-bottom: 12px; }
.panel > h2 + p.muted { margin-bottom: 16px; }
.panel-danger { border-color: var(--down-line); }
section[id] { scroll-margin-top: 24px; }
.columns { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }

/* Tables run edge to edge inside a section */
.table-wrap { margin: 16px -20px 0; overflow-x: auto; }
.panel > .table-wrap:last-child { margin-bottom: -20px; }
.panel > .table-wrap:last-child tr:last-child td { border-bottom: 0; }
table { border-collapse: collapse; font-size: 13px; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 9px 16px; text-align: left; vertical-align: middle; }
th:first-child, td:first-child { padding-left: 20px; }
th:last-child, td:last-child { padding-right: 20px; }
thead th { background: var(--surface-2); border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
tbody tr:hover td { background: var(--surface-2); }
td.nowrap, td time { white-space: nowrap; }
td.num, td code { font-variant-numeric: tabular-nums; }
td.message { min-width: 240px; overflow-wrap: anywhere; }
td.empty-row { color: var(--muted); padding-bottom: 16px; padding-top: 16px; }
.cell-name { display: grid; min-width: 0; }
.cell-name { min-width: 10rem; }
.cell-name a { font-weight: 500; overflow-wrap: break-word; }
.cell-name span { color: var(--muted); font-size: 12px; overflow-wrap: break-word; }

/* Status pills: dot plus text, never colour alone */
.status, .severity {
  align-items: center;
  background: var(--unknown-bg);
  border-radius: 999px;
  color: var(--unknown-text);
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
  line-height: 1;
  padding: 4px 9px 4px 8px;
  white-space: nowrap;
}
.status::before, .severity::before { background: var(--unknown-dot); border-radius: 50%; content: ""; flex: none; height: 7px; width: 7px; }
.status-ok { background: var(--ok-bg); color: var(--ok-text); }
.status-ok::before { background: var(--ok-dot); }
.status-degraded, .severity-warning { background: var(--warn-bg); color: var(--warn-text); }
.status-degraded::before, .severity-warning::before { background: var(--warn-dot); }
.status-down, .severity-error { background: var(--down-bg); color: var(--down-text); }
.status-down::before, .severity-error::before { background: var(--down-dot); }
/* Fixed red in both modes so white text stays above 4.5:1. */
.severity-critical { background: #b91c1c; color: #ffffff; }
.severity-critical::before { background: #ffffff; }
.status-maintenance { background: var(--maint-bg); color: var(--maint-text); }
.status-maintenance::before { background: var(--maint-dot); }
.status-dot { border-radius: 50%; display: inline-block; flex: none; height: 8px; width: 8px; }
.status-dot.ok { background: var(--ok-dot); }
.status-dot.down { background: var(--down-dot); }

/* "Last IP via" pill: filled with the source action's colour. The text colour
   is picked in Go (contrastTextColor) so it stays readable on the lighter
   palette entries; the --reboot fill is the fallback for a pill without an
   inline colour and matches the neutral modem-reboot pill. */
.ip-source {
  align-items: center;
  background: var(--reboot);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 9px;
  white-space: nowrap;
}

/* Agent version: tinted with the status colours by comparison with the newest
   release. The state is also in the tooltip and in visually hidden text, so it
   never depends on the colour alone. Without a reported version or a release
   to compare against the badge stays grey. */
.agent-version {
  background: var(--unknown-bg);
  border-radius: 999px;
  color: var(--unknown-text);
  display: inline-block;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1;
  padding: 4px 9px;
  white-space: nowrap;
}
.agent-version-current { background: var(--ok-bg); color: var(--ok-text); }
.agent-version-outdated { background: var(--down-bg); color: var(--down-text); }
/* No reported version: a plain dash like the other empty cells, not a pill. */
.agent-version-blank { background: none; color: var(--muted); padding: 0; }

/* Live indicator (dashboard) */
.live { align-items: center; color: var(--muted); display: inline-flex; font-size: 13px; gap: 6px; }
.live::before { background: var(--ok-dot); border-radius: 50%; content: ""; height: 7px; width: 7px; }

/* Dashboard status counters */
.counts { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.count { border-left: 1px solid var(--line); display: grid; gap: 6px; min-width: 0; padding: 14px 20px; }
.count:first-child { border-left: 0; }
.count-label { align-items: center; color: var(--muted); display: flex; font-size: 13px; gap: 8px; }
.count-label::before { background: var(--unknown-dot); border-radius: 50%; content: ""; height: 8px; width: 8px; }
.count-value { font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.2; }
.count-ok .count-label::before { background: var(--ok-dot); }
.count-degraded .count-label::before { background: var(--warn-dot); }
.count-down .count-label::before { background: var(--down-dot); }
.count-maintenance .count-label::before { background: var(--maint-dot); }
.count-degraded:not(.count-zero) .count-value { color: var(--warn-text); }
.count-down:not(.count-zero) .count-value { color: var(--down-text); }
.count-zero .count-value { color: var(--muted); }
.all-clear { align-items: center; color: var(--muted); display: flex; gap: 8px; margin: 12px 0 0; }

/* Definition lists (proxy info) */
.info-list { display: grid; gap: 0; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); margin: 12px 0 0; }
.info-list dt, .info-list dd { border-top: 1px solid var(--line); padding: 9px 0; }
.info-list dt { color: var(--muted); padding-right: 16px; }
.info-list dd { font-variant-numeric: tabular-nums; margin: 0; overflow-wrap: anywhere; }
.info-grid { display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 12px; }
.info-item { display: grid; gap: 2px; min-width: 0; }
.info-label { color: var(--muted); font-size: 13px; }
.info-value { font-weight: 500; overflow-wrap: anywhere; }

/* Buttons */
button, .button {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  gap: 8px;
  justify-content: center;
  line-height: 20px;
  min-height: 32px;
  padding: 5px 12px;
  touch-action: manipulation;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap;
}
button:hover, .button:hover { background: var(--surface-2); text-decoration: none; }
.button-primary, .login-card button[type="submit"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.button-primary:hover, .login-card button[type="submit"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button-danger { border-color: var(--down-line); color: var(--down-text); }
.button-danger:hover { background: var(--down-bg); }
.swatch { border-radius: 50%; display: inline-block; flex: none; height: 9px; width: 9px; }

/* Proxy action toolbar */
.toolbar { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 12px 16px; }
.toolbar:not(:has(form, .notice)) { display: none; }
.toolbar form { margin: 0; }
.toolbar .notice { flex-basis: 100%; margin: 0; }
/* The swapped block only groups its forms for htmx; visually they flow in the toolbar. */
#proxy-exclusive-actions { display: contents; }
.toolbar .rotate-group { flex-basis: 100%; }
.action-group { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.action-group:empty { display: none; }
.action-label { color: var(--muted); font-size: 13px; }
.toolbar-sep { align-self: stretch; border-left: 1px solid var(--line); }

/* Forms */
input, select, textarea {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  min-height: 32px;
  padding: 5px 10px;
}
input::placeholder { color: var(--muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); border-radius: 6px; box-shadow: 0 0 0 3px var(--focus); outline: none; }
input[type="checkbox"] { accent-color: var(--accent); height: 16px; min-height: 0; width: 16px; }
label { color: var(--text); font-size: 13px; font-weight: 500; }
.panel form, .form-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.panel form:last-child { margin-bottom: 0; }
.panel .table-wrap form, .row-actions form { margin: 0; }
.panel form.stacked { align-items: stretch; display: grid; gap: 14px; max-width: 480px; }
.panel form.stacked label, .form-grid label { display: grid; gap: 6px; }
.panel form.stacked button { justify-self: start; }
.panel form.form-grid { align-items: start; display: grid; gap: 14px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.form-grid > p, .form-grid > button, .form-grid > .full { grid-column: 1 / -1; margin: 0; }
.form-grid > button { justify-self: start; }
.form-grid label.check, .panel form label.check { align-items: center; display: flex; flex-direction: row; gap: 8px; }
.panel form label.inline { align-items: center; display: inline-flex; gap: 8px; }
.group-check { align-items: center; display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; }
.group-check .checkbox { align-items: center; display: inline-flex; font-weight: 400; gap: 6px; }
.row-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.row-actions input { width: 150px; }
.filters { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.subform { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }

/* Notices */
.notice { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; margin: 0; padding: 10px 14px; }
.notice-error, .notice[role="alert"] { background: var(--down-bg); border-color: var(--down-line); color: var(--down-text); }
.panel .notice { margin-bottom: 12px; }
.notices { display: grid; gap: 8px; }

/* Admin jump list */
.jump-list { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 0; padding: 0; }
.jump-list a { border: 1px solid var(--line); border-radius: 6px; color: var(--text); display: inline-block; font-size: 13px; padding: 4px 10px; }
.jump-list a:hover { background: var(--surface-2); border-color: var(--line-strong); text-decoration: none; }

/* Details */
details summary { color: var(--link); cursor: pointer; font-weight: 500; }
details[open] summary { margin-bottom: 4px; }

/* Job log */
.log { margin-top: 0; }
.log-line { border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 8px 0; }
.log-line:last-child { border-bottom: 0; }
.log-line time { color: var(--muted); white-space: nowrap; }
.log-line strong { font-weight: 600; min-width: 4.5rem; }
.log-line span { flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; }
.level-warning { color: var(--warn-text); }
.level-error, .level-critical { color: var(--down-text); }
.level-info { color: var(--muted); }
.stream-state { color: var(--muted); font-size: 13px; }

/* Account */
.codes { columns: 2; gap: 16px; list-style: none; margin: 12px 0 0; padding: 0; }
.codes li { margin-bottom: 6px; }

/* Login keeps its own centred layout */
.login-body { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: 24px 16px; }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; max-width: 380px; padding: 28px; width: 100%; }
.login-card h1 { font-size: 20px; margin-bottom: 20px; }
.login-card form { display: grid; gap: 14px; }
.login-card label { display: grid; gap: 6px; }
.login-card button[type="submit"] { margin-top: 4px; width: 100%; }
.login-card .notice { margin-bottom: 16px; }
.login-theme { display: flex; justify-content: flex-end; margin-top: 20px; }
.footer-login { color: var(--muted); font-size: 12px; margin-top: 16px; }

@media (max-width: 1100px) {
  .columns { grid-template-columns: minmax(0, 1fr); }
}

/* Narrow screens: the sidebar turns into a top bar with a collapsible menu */
@media (max-width: 800px) {
  .sidebar { border-bottom: 1px solid var(--line); border-right: 0; bottom: auto; position: sticky; width: auto; }
  .sidebar-head { height: 52px; padding: 0 16px; }
  .js .menu-toggle { display: inline-flex; }
  .js .sidebar:not(.is-open) .sidebar-menu { display: none; }
  .sidebar-menu { border-top: 1px solid var(--line); max-height: calc(100vh - 52px); overscroll-behavior: contain; padding: 8px 12px 16px; }
  .nav a { padding: 10px; }
  .sidebar-foot { margin-top: 12px; }
  .main { margin-left: 0; }
  section[id] { scroll-margin-top: 68px; }
  .content { padding: 20px 16px 40px; row-gap: 20px; }
  h1 { font-size: 22px; }
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .count { border-left: 0; border-top: 1px solid var(--line); padding: 12px 14px; }
  .count:nth-child(-n+2) { border-top: 0; }
  .count:nth-child(even) { border-left: 1px solid var(--line); }
  .count:last-child { grid-column: 1 / -1; }
  .panel { padding: 16px; }
  .table-wrap { margin-left: -16px; margin-right: -16px; }
  .panel > .table-wrap:last-child { margin-bottom: -16px; }
  th:first-child, td:first-child { padding-left: 16px; }
  th:last-child, td:last-child { padding-right: 16px; }
  .panel form.form-grid { grid-template-columns: minmax(0, 1fr); }
  .toolbar-sep { display: none; }
  /* Proxy lists read as stacked rows on a phone instead of a wide table. */
  .stacked-table thead { display: none; }
  .stacked-table tbody tr { border-bottom: 1px solid var(--line); display: grid; gap: 2px 12px; grid-template-columns: auto minmax(0, 1fr); padding: 12px 16px; }
  .panel > .table-wrap:last-child .stacked-table tr:last-child { border-bottom: 0; }
  .stacked-table td { border: 0; padding: 0; white-space: normal; }
  .stacked-table tbody tr:hover td { background: none; }
  .stacked-table td:first-child { align-self: center; grid-row: 1; }
  .stacked-table td:nth-child(2) { align-self: center; grid-row: 1; }
  .stacked-table td[data-label] { color: var(--muted); font-size: 12px; grid-column: 2; min-width: 0; }
  .stacked-table td[data-label]::before { content: attr(data-label) " "; }
  .stacked-table .cell-name { min-width: 0; }
  .stacked-table td.empty-row { grid-column: 1 / -1; }
  .codes { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}