/* Deployer design tokens. Direction: Ledger, in Panels: every section on its own panel over a grey ground.
   Theme: follows the system. <html data-theme="light|dark"> overrides it.
   Colour is reserved for status. Ink is the only action colour. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); }

:root {
  /* Type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --leading: 1.45;
  --leading-log: 1.75;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Spacing, 4 px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Panels: head 14 × 18, table rows 12 × 18, header row 8 × 18, 20 between panels */
  --panel-x: 18px;
  --panel-y: 14px;
  --panel-gap: 20px;

  /* Radius: control, menu and dialog, panel, pill */
  --radius-s: 5px;
  --radius-m: 6px;
  --radius-l: 8px;
  --radius-pill: 999px;

  /* Control sizes */
  --control-s: 28px;
  --control-m: 32px;
  --control-l: 38px;
  --touch: 44px;

  /* Layout */
  --sidebar: 224px;
  --content-max: 1520px;

  /* Motion */
  --motion-fast: 120ms;

  /* Light theme */
  color-scheme: light;
  --ground: #EEF0F3;
  --bg-side: #E5E8EC;
  --bg: #FFFFFF;
  --panel-head: #F6F7F9;
  --bg-well: #F6F7F9;
  --bg-code: #F6F7F9;
  --bg-hover: #EEF0F2;
  --bg-active: #E6E8EB;
  --nav-active: #FFFFFF;
  --rule: #DDE1E6;
  --rule-strong: #C2C7CD;
  --text: #15181C;
  --text-2: #4F5761;
  --text-3: #626B75;
  --ink: #15181C;
  --ink-on: #FFFFFF;
  --crit: #B3261E;
  --crit-bg: #FBEBE9;
  --crit-border: #F1C7C2;
  --crit-line: #FBE3E0;
  --crit-on: #FFFFFF;
  --warn: #8A5A00;
  --warn-bg: #FBF3E0;
  --warn-border: #EBD6A6;
  --ok: #1E6E43;
  --ok-bg: #E7F4EC;
  --ok-border: #BEDFCB;
  --info: #2F5F9E;
  --info-bg: #E9F0F9;
  --info-border: #C5D6EC;
  --idle-bg: #EEF0F3;
  --mark: #FFE9A8;
  --focus: #2F5F9E;
  --scrim: rgba(21, 24, 28, 0.4);
  --elev-1: 0 1px 2px rgba(21, 24, 28, 0.06);
  --elev-nav: 0 1px 2px rgba(21, 24, 28, 0.08);
  --elev-2: 0 8px 28px rgba(21, 24, 28, 0.18);
}

/* Dark: no shadows. Panels are lighter than the ground, wells lighter than panels. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0E1013;
    --bg-side: #0A0C0E;
    --bg: #16191D;
    --panel-head: #1B1F24;
    --bg-well: #1B1F24;
    --bg-code: #0E1013;
    --bg-hover: #1E2226;
    --bg-active: #22262B;
    --nav-active: #1E2226;
    --rule: #262B31;
    --rule-strong: #3F454C;
    --text: #E8EAED;
    --text-2: #A9B0B8;
    --text-3: #8C949D;
    --ink: #E8EAED;
    --ink-on: #111316;
    --crit: #F2857C;
    --crit-bg: #2E1614;
    --crit-border: #4A2420;
    --crit-line: #3A1B18;
    --crit-on: #111316;
    --warn: #E5B450;
    --warn-bg: #2A2210;
    --warn-border: #4A3B16;
    --ok: #6BC794;
    --ok-bg: #12271B;
    --ok-border: #1F4430;
    --info: #8AB4F0;
    --info-bg: #15233A;
    --info-border: #24395A;
    --idle-bg: #22262B;
    --mark: #5C4A12;
    --focus: #8AB4F0;
    --scrim: rgba(0, 0, 0, 0.6);
    --elev-1: none;
    --elev-nav: none;
    --elev-2: 0 8px 28px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0E1013;
  --bg-side: #0A0C0E;
  --bg: #16191D;
  --panel-head: #1B1F24;
  --bg-well: #1B1F24;
  --bg-code: #0E1013;
  --bg-hover: #1E2226;
  --bg-active: #22262B;
  --nav-active: #1E2226;
  --rule: #262B31;
  --rule-strong: #3F454C;
  --text: #E8EAED;
  --text-2: #A9B0B8;
  --text-3: #8C949D;
  --ink: #E8EAED;
  --ink-on: #111316;
  --crit: #F2857C;
  --crit-bg: #2E1614;
  --crit-border: #4A2420;
  --crit-line: #3A1B18;
  --crit-on: #111316;
  --warn: #E5B450;
  --warn-bg: #2A2210;
  --warn-border: #4A3B16;
  --ok: #6BC794;
  --ok-bg: #12271B;
  --ok-border: #1F4430;
  --info: #8AB4F0;
  --info-bg: #15233A;
  --info-border: #24395A;
  --idle-bg: #22262B;
  --mark: #5C4A12;
  --focus: #8AB4F0;
  --scrim: rgba(0, 0, 0, 0.6);
  --elev-1: none;
  --elev-nav: none;
  --elev-2: 0 8px 28px rgba(0, 0, 0, 0.6);
}

/* Ledger base in Panels: each section is a white panel over a grey ground. Ink actions, colour only for status. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: var(--text-sm)/var(--leading) var(--font-sans); }
h1, h2, h3, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Shell */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--bg-side); border-right: 1px solid var(--rule); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-4); }
.brand { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); font-weight: 600; font-size: var(--text-md); text-decoration: none; }
.brand svg { flex: none; }
.server-chip { padding: var(--space-2) 10px; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-m); display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); }
.side .nav-toggle { display: none; }
.side .nav-theme { display: none; }
.side-nav { display: flex; flex-direction: column; gap: 1px; }
.side-nav a { display: flex; justify-content: space-between; gap: var(--space-2); padding: 6px var(--space-2); border-radius: var(--radius-s); text-decoration: none; color: var(--text-2); }
.side-nav a:hover { background: var(--bg-hover); color: var(--text); }
.side-nav a.sub { padding-left: var(--space-5); }
.side-nav a[aria-current] { background: var(--nav-active); color: var(--text); font-weight: 600; box-shadow: var(--elev-nav); }
.side-nav .nav-badge { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; }
.side-nav .nav-group { padding: 5px var(--space-2); color: var(--text-2); }
.main { min-width: 0; display: flex; flex-direction: column; }

/* Header band: the top bar, the page head and the tabs on the panel colour. */
.band { background: var(--bg); border-bottom: 1px solid var(--rule); padding: 0 var(--space-7); }
.band-inner, .main-inner { width: 100%; max-width: var(--content-max); margin: 0 auto; }
.band-inner.is-bare .topbar { border-bottom: 0; }
.band .page-head { padding: var(--space-5) 0 22px; }
.band .page-head:has(h1.statement) { padding: 22px 0 var(--space-6); }
.band .page-head:has(+ .tabs) { padding-bottom: 14px; }
.band .tabs { border-bottom: 0; gap: 2px var(--space-5); }
.band .tabs a { padding: var(--space-2) 0 10px; }
.content { padding: var(--space-6) var(--space-7) 48px; }
.main-inner { display: flex; flex-direction: column; gap: var(--panel-gap); }

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-1); color: var(--text-2); min-width: 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); }
.topbar-right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.search-btn { height: var(--control-m); min-width: 200px; padding: 0 10px; display: inline-flex; justify-content: space-between; align-items: center; gap: var(--space-5); color: var(--text-3); background: var(--ground); border: 1px solid var(--rule); border-radius: var(--radius-s); }
.search-btn:hover { border-color: var(--rule-strong); }
.jobs { color: var(--text-3); white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.jobs.active { color: var(--info); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* Page heading */
.page-head { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: flex-start; justify-content: space-between; }
.page-head > div:first-child { min-width: 0; }
h1 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; }
h1.statement { font-size: var(--text-2xl); }
h2 { font-size: var(--text-sm); font-weight: 600; }
h2.section { margin-bottom: var(--space-2); }
h3 { font-size: var(--text-sm); font-weight: 600; }
.sub { color: var(--text-2); margin-top: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.title-line { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; }

/* Utilities */
.mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: var(--text-xs); }
.strong { font-weight: 600; }
.medium { font-weight: 500; }
.nowrap { white-space: nowrap; }
.wrap { overflow-wrap: anywhere; }
.text-crit { color: var(--crit); }
.text-warn { color: var(--warn); }
.text-ok { color: var(--ok); }
.text-info { color: var(--info); }
.right { text-align: right; }
.ml-auto { margin-left: auto; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.measure { max-width: 76ch; }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--panel-gap); }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--panel-gap); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--panel-gap); align-items: stretch; }
.split-main { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 3fr); gap: var(--panel-gap); align-items: stretch; }
.link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Buttons */
.btn { height: var(--control-m); padding: 0 var(--space-3); display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; color: var(--text); background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--radius-s); text-decoration: none; }
.btn:hover { background: var(--bg-hover); }
.btn-primary { color: var(--ink-on); background: var(--ink); border-color: var(--ink); font-weight: 500; }
.btn-primary:hover { background: var(--ink); opacity: 0.88; }
.btn-danger { color: var(--crit-on); background: var(--crit); border-color: var(--crit); font-weight: 500; }
.btn-danger:hover { background: var(--crit); opacity: 0.88; }
.btn-danger:disabled, .btn-primary:disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-ghost { border-color: transparent; color: var(--text-2); }
.btn-s { height: var(--control-s); padding: 0 var(--space-2); font-size: var(--text-xs); }
.btn-l { height: var(--control-l); padding: 0 14px; font-weight: 600; }
.btn-icon { width: var(--control-s); height: var(--control-s); padding: 0; color: var(--text-2); }

/* Copy for AI split button */
.split { position: relative; display: inline-flex; }
.split > .btn:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); }
.split > .split-caret { width: 28px; padding: 0; border-left-width: 0; border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.split > .btn-primary.split-caret { border-left: 1px solid var(--ink-on); }
.menu { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; min-width: 210px; padding: var(--space-1); background: var(--bg); border: 1px solid var(--rule-strong); border-radius: var(--radius-m); box-shadow: var(--elev-2); display: flex; flex-direction: column; }
.menu button, .menu a { padding: 6px var(--space-2); text-align: left; background: transparent; border: 0; border-radius: var(--radius-s); text-decoration: none; display: flex; justify-content: space-between; gap: var(--space-3); color: var(--text); font-weight: 400; }
.menu button:hover, .menu a:hover { background: var(--bg-hover); }
.menu hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-1) 0; width: 100%; }
[data-copy][data-state="generating"] { opacity: 0.7; cursor: progress; }
.btn-copy-icon { flex: none; }

/* Status */
.status { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; white-space: nowrap; }
.status svg { flex: none; }
.s-ok { color: var(--ok); }
.s-crit { color: var(--crit); }
.s-warn { color: var(--warn); }
.s-info { color: var(--info); }
.s-idle { color: var(--text-2); }
/* Pills: in tables, beside a title, and as the severity of a row. Elsewhere the plain label stays. */
:is(td, .title-line, .row-sev, .panel-head, .result-body) .status { padding: 2px 9px; border-radius: var(--radius-pill); font-size: var(--text-xs); background: var(--idle-bg); }
:is(td, .title-line, .row-sev, .panel-head, .result-body) .status svg { width: 12px; height: 12px; }
:is(td, .title-line, .row-sev, .panel-head, .result-body) .status.s-ok { background: var(--ok-bg); }
:is(td, .title-line, .row-sev, .panel-head, .result-body) .status.s-warn { background: var(--warn-bg); }
:is(td, .title-line, .row-sev, .panel-head, .result-body) .status.s-crit { background: var(--crit-bg); }
:is(td, .title-line, .row-sev, .panel-head, .result-body) .status.s-info { background: var(--info-bg); }
.result-body .status { align-self: flex-start; font-weight: 600; background: var(--bg); }
.result-crit .result-body .status.s-crit { color: var(--crit-on); background: var(--crit); }
.badge { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; font-size: var(--text-xs); border: 1px solid var(--rule-strong); border-radius: var(--radius-s); color: var(--text-2); white-space: nowrap; }
.badge-warn { color: var(--warn); border-color: var(--warn); }
.badge-crit { color: var(--crit); border-color: var(--crit); }
.badge-ok { color: var(--ok); border-color: var(--ok); }
.badge-info { color: var(--info); border-color: var(--info); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Ruled rows */
.rows { border-top: 1px solid var(--rule-strong); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.row-sev { flex: 0 0 96px; }
.row-body { flex: 1 1 420px; min-width: 0; }
.row-title { font-weight: 500; font-size: var(--text-md); overflow-wrap: anywhere; }

/* Tables. On phones each row stacks and data-label supplies the column name. */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; color: var(--text-2); font-size: var(--text-xs); padding: var(--space-2) var(--space-4) var(--space-2) 0; background: var(--panel-head); border-bottom: 1px solid var(--rule); white-space: nowrap; }
td { padding: 10px var(--space-4) 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th:first-child, td:first-child { padding-left: var(--cell-x, 0); }
th:last-child, td:last-child { padding-right: var(--cell-x, 0); }
td.cell-actions, th.cell-actions { text-align: right; white-space: nowrap; }
td .cell-title { font-size: var(--text-md); font-weight: 500; text-decoration: none; }
td a.cell-title:hover { text-decoration: underline; }
tr.group-row td { padding-top: 6px; padding-bottom: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--text-2); background: var(--bg-well); border-bottom: 1px solid var(--rule); }
tr.is-failed td { background: var(--crit-bg); }
@media (max-width: 720px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
  .table-stack td { padding: 3px 0; border: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-2); text-align: left; white-space: normal; }
  .table-stack td::before { content: attr(data-label); color: var(--text-3); font-size: var(--text-xs); }
  .table-stack td.cell-actions { grid-template-columns: 1fr; }
  .table-stack td.cell-actions::before { display: none; }
  .table-stack tr.group-row td { display: block; }
  .table-stack tr.group-row td::before { display: none; }
  .panel-body > .table-wrap .table-stack tr { padding-inline: var(--cell-x); }
  .panel-body > .table-wrap .table-stack thead + tbody tr:first-child { border-top: 0; }
}

/* Key and value */
.kv { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 0; }
.kv dt, .kv dd { padding: 9px 0; border-top: 1px solid var(--rule); }
.kv dt { color: var(--text-2); padding-right: var(--space-4); }
.kv dd { overflow-wrap: anywhere; min-width: 0; }

/* Panels: title, count, one-line description, actions on the right. */
.panel { background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-l); box-shadow: var(--elev-1); min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); justify-content: space-between; align-items: center; padding: var(--panel-y) var(--panel-x); border-bottom: 1px solid var(--rule); }
.panel-head > div:first-child { min-width: 0; }
.panel-head h2 { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.panel-count { font-size: var(--text-sm); font-weight: 500; color: var(--text-3); }
.panel-desc { margin-top: 2px; color: var(--text-2); }
.panel-head .actions a:not(.btn) { color: var(--text-2); }
.panel-body { --bx: var(--panel-x); --by: var(--panel-y); padding: var(--by) var(--bx); min-width: 0; }
/* Tables, row lists, key-value lists and steps at the edge of a panel's body run edge to edge. */
.panel-body > :is(.table-wrap, .rows, .kv, .steps, .env-diff) { margin-inline: calc(-1 * var(--bx)); }
.panel-body > :is(.table-wrap, .rows, .kv, .steps, .env-diff):first-child { margin-top: calc(-1 * var(--by)); }
.panel-body > :is(.table-wrap, .rows, .kv, .steps, .env-diff):last-child { margin-bottom: calc(-1 * var(--by)); }
.panel-body > .table-wrap { --cell-x: var(--bx); }
.panel-body > .table-wrap:last-child tbody tr:last-child td { border-bottom: 0; }
.panel-body > .table-wrap:first-child th { border-top: 0; }
.panel-body > .kv > dt { padding-left: var(--bx); }
.panel-body > .kv > dd { padding-right: var(--bx); }
.panel-body > .kv:first-child > :is(dt, dd):nth-child(-n+2) { border-top: 0; }
.panel-body > .rows { border-top: 0; }
.panel-body > .rows:not(:first-child) { margin-top: var(--space-3); border-top: 1px solid var(--rule); }
.panel-body > .rows > .row { padding: var(--panel-y) var(--bx); }
.panel-body > .rows:last-child > .row:last-child { border-bottom: 0; }
.panel-body > .steps li { padding: 10px var(--bx); }
.panel-body > .steps:first-child li:first-child { border-top: 0; }
.panel-body > .empty { padding: var(--space-2) 0; }
/* Open forms sit in the well under the table. */
.well { padding: var(--panel-y) var(--panel-x); background: var(--bg-well); border-top: 1px solid var(--rule); }
.panel-body > .well { margin: var(--space-3) calc(-1 * var(--bx)) 0; padding-inline: var(--bx); }
.panel-body > .well:last-child { margin-bottom: calc(-1 * var(--by)); border-radius: 0 0 var(--radius-l) var(--radius-l); }
.panel-body > .table-wrap + .well { margin-top: 0; border-top: 0; }
/* A panel inside a panel is a plain titled block. */
.panel-body .panel { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.panel-body .panel > .panel-head { padding: 0 0 var(--space-2); border: 0; }
.panel-body .panel > .panel-head h2 { font-size: var(--text-sm); }
.panel-body .panel > .panel-body { --bx: 0px; --by: 0px; padding: 0; }

/* Blocks a page puts straight on the ground get a panel of their own. */
:is(.main-inner, .stack-6, .stack-4, [data-panel]) > :is(.table-wrap, .rows, .empty):not(.panel-body *) { background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-l); box-shadow: var(--elev-1); }
:is(.main-inner, .stack-6, .stack-4, [data-panel]) > .table-wrap:not(.panel-body *) { --cell-x: var(--panel-x); }
:is(.main-inner, .stack-6, .stack-4, [data-panel]) > .table-wrap:not(.panel-body *) tbody tr:last-child td { border-bottom: 0; }
:is(.main-inner, .stack-6, .stack-4, [data-panel]) > .rows:not(.panel-body *) > .row { padding: var(--panel-y) var(--panel-x); }
:is(.main-inner, .stack-6, .stack-4, [data-panel]) > .rows:not(.panel-body *) > .row:last-child { border-bottom: 0; }
:is(.main-inner, .stack-6, .stack-4, [data-panel]) > .empty:not(.panel-body *) { padding: var(--space-6) var(--panel-x); }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 2px var(--space-4); border-bottom: 1px solid var(--rule-strong); }
.tabs a, .tabs button { padding: 6px 0 7px; text-decoration: none; color: var(--text-2); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover, .tabs button:hover { color: var(--text); }
.tabs [aria-current], .tabs [aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }

/* Result statement: from the Triage direction. Reassurance first, then cause. */
.result { padding: 22px var(--space-6); border: 1px solid transparent; border-radius: var(--radius-l); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); justify-content: space-between; align-items: flex-start; }
.result-body { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.result-title { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.result-crit { background: var(--crit-bg); border-color: var(--crit-border); }
.result-warn { background: var(--warn-bg); border-color: var(--warn-border); }
.result-ok { background: var(--ok-bg); border-color: var(--ok-border); }
.result-info { background: var(--info-bg); border-color: var(--info-border); }

/* Notices */
.notice { padding: var(--space-3) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-l); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; }
.notice-body { flex: 1 1 320px; min-width: 0; }
.notice-crit { background: var(--crit-bg); border-color: var(--crit-border); }
.notice-warn { background: var(--warn-bg); border-color: var(--warn-border); }
.notice-info { background: var(--info-bg); border-color: var(--info-border); }
.notice-ok { background: var(--ok-bg); border-color: var(--ok-border); }

/* Step timeline */
.steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: var(--space-2) 0; border-top: 1px solid var(--rule); }
.steps [data-mark] { width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--radius-pill); font-size: 11px; color: var(--text-3); background: var(--idle-bg); }
.steps .st-done [data-mark] { color: var(--ok); background: var(--ok-bg); }
.steps .st-fail [data-mark] { color: var(--crit-on); background: var(--crit); }
.steps .st-run [data-mark] { color: var(--info); background: var(--info-bg); }
.steps .st-warn [data-mark] { color: var(--warn); background: var(--warn-bg); }
.steps .st-done { color: var(--text); }
.steps .st-fail { color: var(--crit); font-weight: 600; background: var(--crit-bg); }
.steps .st-run { color: var(--info); font-weight: 600; }
.steps .st-skip { color: var(--text-3); }
.steps .st-warn { color: var(--warn); font-weight: 600; }

/* Log viewer */
.log { display: flex; flex-direction: column; min-width: 0; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-l); box-shadow: var(--elev-1); overflow: hidden; }
.log > :not(.log-tools, .log-body) { padding: var(--space-2) var(--panel-x); border-top: 1px solid var(--rule); }
.panel-body .log { box-shadow: none; border-radius: var(--radius-s); }
.log-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: 10px var(--panel-x); border-bottom: 1px solid var(--rule); }
.log-tools h2 { font-size: var(--text-lg); }
.log-body { max-height: 520px; overflow: auto; padding: 10px 0; background: var(--bg-code); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-log); }
.log-line { display: grid; grid-template-columns: 48px 72px minmax(max-content, 1fr); gap: var(--space-2); padding: 0 var(--space-3) 0 var(--space-2); }
.log-body.is-wrapped .log-line { grid-template-columns: 48px 72px minmax(0, 1fr); }
.log-body.is-wrapped .log-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.log-n { text-align: right; color: var(--text-3); background: none; border: 0; padding: 0; font: inherit; user-select: none; }
.log-t { color: var(--text-3); }
.log-text { white-space: pre; }
.log-line.is-err { background: var(--crit-line); color: var(--crit); }
.log-line.is-warn { color: var(--warn); }
.log-line.is-sel { background: var(--bg-active); }
.log-line.is-err.is-sel { outline: 1px solid var(--crit); outline-offset: -1px; }
.log mark { background: var(--mark); color: inherit; }
.log-tools input[type="search"] { width: 150px; }
.log-tools select { width: auto; }
.log-hint { color: var(--text-3); font-size: var(--text-xs); }

/* Forms */
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field > label, .label { font-weight: 500; }
.hint { color: var(--text-3); font-size: var(--text-xs); }
.err { color: var(--crit); font-size: var(--text-xs); }
input[type="text"], input[type="search"], input[type="password"], input[type="url"], input[type="number"], input[type="email"], select, textarea { width: 100%; min-height: var(--control-m); padding: 5px var(--space-2); background: var(--bg); border: 1px solid var(--rule-strong); border-radius: var(--radius-s); }
textarea { resize: vertical; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; }
input.mono { font-family: var(--font-mono); font-size: var(--text-xs); }
input.is-invalid { border-color: var(--crit); }
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--space-3); }
.check { display: flex; align-items: flex-start; gap: var(--space-2); }
.check input { margin: 3px 0 0; flex: none; accent-color: var(--ink); }
.search-input { max-width: 280px; }

/* Secrets, commands */
.secret { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); }
.cmd { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg-well); border: 1px solid var(--rule); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: var(--text-xs); min-width: 0; }
.cmd code { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.copy-mini { background: transparent; border: 0; padding: 0 2px; color: var(--text-3); display: inline-flex; vertical-align: middle; }
.copy-mini:hover { color: var(--text); }
pre.code { padding: var(--space-3); overflow: auto; background: var(--bg-well); border: 1px solid var(--rule); border-radius: var(--radius-s); font: var(--text-xs)/1.6 var(--font-mono); }

/* Sparkline, chart, meter */
.spark { display: block; }
.spark polyline, .chart polyline { fill: none; stroke: var(--text-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.chart { width: 100%; height: 120px; display: block; }
.chart line { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .threshold { stroke: var(--warn); stroke-dasharray: 4 3; }
.bar { display: block; height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--text-2); }
.w-5 { width: 5%; } .w-10 { width: 10%; } .w-20 { width: 20%; } .w-30 { width: 30%; } .w-40 { width: 40%; } .w-50 { width: 50%; } .w-60 { width: 60%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-90 { width: 90%; } .w-100 { width: 100%; }

/* Empty, skeleton */
.empty { padding: var(--space-6) 0; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.skeleton { display: block; height: 12px; margin: 6px 0; background: var(--bg-active); border-radius: var(--radius-s); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* Toast */
.toasts { position: fixed; z-index: 60; left: 50%; bottom: var(--space-6); transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--space-2); align-items: center; width: max-content; max-width: calc(100vw - 32px); }
.toast { padding: var(--space-2) var(--space-2) var(--space-2) 14px; display: flex; flex-wrap: wrap; gap: var(--space-2) 10px; align-items: center; color: var(--ink-on); background: var(--ink); border-radius: var(--radius-m); box-shadow: var(--elev-2); }
.toast .btn { color: inherit; border-color: currentColor; background: transparent; height: var(--control-s); font-weight: 600; padding: 0 var(--space-2); }
.toast-crit { color: var(--crit-on); background: var(--crit); }

/* Drawer and dialogs */
dialog { color: var(--text); background: var(--bg); border: 1px solid var(--rule-strong); border-radius: var(--radius-m); box-shadow: var(--elev-2); padding: 0; max-width: min(560px, calc(100vw - 32px)); width: 100%; }
dialog::backdrop { background: var(--scrim); }
.dlg { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.dlg h2 { font-size: var(--text-lg); line-height: 1.3; }
.dlg ul.consequences { display: flex; flex-direction: column; gap: var(--space-1); list-style: disc; padding-left: var(--space-4); }
.dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.dlg-risk3 { border-top: 3px solid var(--crit); }
dialog.drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(680px, 100vw); max-width: 100vw; border-radius: 0; border-width: 0 0 0 1px; }
.drawer-in { height: 100%; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.drawer-in textarea { flex: 1 1 auto; min-height: 240px; resize: none; }
dialog.palette { margin-top: 12vh; max-width: min(620px, calc(100vw - 32px)); }
.palette input { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; height: 44px; padding: 0 var(--space-4); font-size: var(--text-md); outline: none; }
.palette-list { max-height: 50vh; overflow: auto; padding: var(--space-1); }
.palette-list a, .palette-list button { width: 100%; padding: 7px var(--space-3); display: flex; justify-content: space-between; gap: var(--space-3); text-align: left; text-decoration: none; background: none; border: 0; border-radius: var(--radius-s); }
.palette-list .is-active { background: var(--bg-active); }

/* Reconnect banner */
.reconnect { position: fixed; z-index: 70; top: 0; left: 0; right: 0; padding: var(--space-2) var(--space-4); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); text-align: center; background: var(--info-bg); border-bottom: 1px solid var(--rule-strong); }
.is-reconnecting .main button, .is-reconnecting .main a.btn { opacity: 0.5; pointer-events: none; }

/* Wizard */
.wizard-steps { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule-strong); color: var(--text-3); }
.wizard-steps .is-current { color: var(--text); font-weight: 600; }
.wizard-steps .is-done { color: var(--text-2); }
.choice-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 var(--space-5); border-top: 1px solid var(--rule); }
.choice { display: flex; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.choice input { margin: 3px 0 0; accent-color: var(--ink); }

/* Auth */
.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--space-5); }
.auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-l); box-shadow: var(--elev-1); }

/* Prototype map, not part of the product */
.proto-map h2 { margin-top: var(--space-5); }

/* Phones and tablets */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { padding: var(--space-2) var(--space-4); border-right: 0; border-bottom: 1px solid var(--rule); flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
  .server-chip { border: 0; padding: 0; background: transparent; flex: 1 1 140px; }
  .side .nav-toggle { display: inline-flex; }
  .side-nav { display: none; width: 100%; padding-bottom: var(--space-2); }
  .side.nav-open .side-nav { display: flex; }
  .side-nav a { padding-block: 10px; }
  .band { padding: 0 var(--space-4); }
  .content { padding: var(--space-4) var(--space-4) var(--space-7); }
  .panel-body { --bx: 14px; }
  .panel-head { padding-inline: 14px; }
  .search-btn { min-width: 0; flex: 1 1 auto; }
  .search-btn > span:first-child { display: none; }
  .split-main { grid-template-columns: minmax(0, 1fr); }
  .log-body { max-height: 60vh; }
  .result-title { font-size: var(--text-xl); }
  h1.statement { font-size: var(--text-xl); }
}
@media (max-width: 640px), (pointer: coarse) {
  .btn, input[type="text"], input[type="search"], input[type="password"], select { min-height: var(--touch); }
  .btn-s, .btn-icon { min-height: var(--touch); min-width: var(--touch); }
  .split-caret { width: var(--touch) !important; }
  .status { white-space: normal; }
  .row-sev { flex-basis: 100%; }
  .row .actions, .result .actions { width: 100%; }
  .result .actions .btn, .result .actions .split { flex: 1 1 auto; }
  .result .split .btn:first-child { flex: 1 1 auto; }
  .topbar-right { width: 100%; margin-left: 0; }
  .topbar-right .jobs:not(.active), .topbar-right [data-theme-toggle] { display: none; }
  .topbar-right .split { margin-left: auto; }
  .side .nav-theme { display: inline-flex; margin-top: var(--space-2); }
  .toasts { left: var(--space-3); right: var(--space-3); transform: none; width: auto; }
  dialog.drawer { width: 100vw; border: 0; }
  .log-line { grid-template-columns: 36px 62px minmax(max-content, 1fr); }
}


/* Apps list, Add app wizard, Sidebar Buy tabs */
.apps-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.apps-tools select { width: auto; }
.apps-tools input[type="search"] { width: 220px; }
.dom.wrap { overflow-wrap: break-word; }
input.t-search { width: 220px; }
.t-end td.cell-actions .actions { justify-content: flex-end; flex-wrap: nowrap; }
.stack-tight { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice { align-items: flex-start; }
.wiz-nav { padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.mb-2 { margin-bottom: var(--space-2); }
.form-narrow { max-width: 240px; }
.api-line { grid-template-columns: 120px minmax(0, 1fr); }

/* Environment */
.env-diff { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.env-diff-row { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: var(--space-1) var(--space-3); align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.env-savebar { padding-top: var(--space-3); border-top: 1px solid var(--rule-strong); }
tr.is-removed [data-env-name], tr.is-removed [data-env-display] { color: var(--text-3); text-decoration: line-through; }
tr.is-changed td { background: var(--bg-hover); }
td textarea, td input[type="text"] { min-width: 180px; }

@media (max-width: 720px) {
  .t-end td.cell-actions .actions { justify-content: flex-start; flex-wrap: wrap; }
  .env-diff-row { grid-template-columns: max-content minmax(0, 1fr); }
  .env-diff-row > :last-child { grid-column: 1 / -1; }
  .apps-tools input[type="search"] { width: 100%; }
  .api-line { grid-template-columns: minmax(0, 1fr); }
}

/* Apps: promotion direction, summary counts, file lists, container metrics, cancel where safe. */

/* Direction of a promotion, on its own panel. The arrow reads left to right, top to bottom on phones. */
.direction { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-3) var(--space-6); align-items: center; padding: var(--space-4) var(--panel-x); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-l); box-shadow: var(--elev-1); }
.direction-role { color: var(--text-2); font-size: var(--text-xs); font-weight: 600; }
.direction-name { font-size: var(--text-xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.direction-name a { text-decoration: none; }
.direction-name a:hover { text-decoration: underline; }
.direction-arrow { font-family: var(--font-mono); font-size: var(--text-2xl); line-height: 1; }

/* Summary counts */
.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-3) var(--space-5); padding-top: var(--space-2); border-top: 1px solid var(--rule-strong); }
.counts dt { color: var(--text-2); font-size: var(--text-xs); }
.counts dd { font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Expandable file lists */
.files details { border-top: 1px solid var(--rule); }
.files details:last-child { border-bottom: 1px solid var(--rule); }
.files summary { padding: 7px 0; cursor: pointer; }
.files summary:hover { background: var(--bg-hover); }
.files .table-wrap { padding-bottom: var(--space-3); }

/* Container metrics inside a ruled row */
.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--space-2) var(--space-4); }
.metrics dt { color: var(--text-3); font-size: var(--text-xs); }
.metrics-wide { grid-column: 1 / -1; }

/* Cancel where safe: once Activate release has started, the button gives way to a note. */
.cancel-locked { display: none; }
[data-job-sim]:has(.steps li:nth-child(4):not(.st-skip)) .cancel-safe { display: none; }
[data-job-sim]:has(.steps li:nth-child(4):not(.st-skip)) .cancel-locked { display: inline; }

@media (max-width: 640px) {
  .direction { grid-template-columns: minmax(0, 1fr); }
  .direction-arrow { transform: rotate(90deg); justify-self: start; }
}

/* Server pages, part A. Only what the shared base doesn't cover. */

/* Health: each chart on its own panel. */
.metric { margin: 0; padding: var(--panel-y) var(--panel-x); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-l); box-shadow: var(--elev-1); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.metric-axis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); color: var(--text-3); font-size: var(--text-xs); }
.disk-bar { width: 72px; flex: none; }
input.input-num { width: 72px; }
.panel-body .metric { padding: var(--space-3) 0 0; background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; }

/* Forms: a fieldset that reads as plain rows. */
.plain-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.plain-fieldset legend { padding: 0; margin-bottom: var(--space-2); }

/* Numbered next steps on the service page. */
.todo-list { list-style: decimal; padding-left: var(--space-5); }
.todo-list .cmd { margin-top: var(--space-1); }

/* Services: an action menu per row. The menu must escape the table's scroll container. */
.menu-wrap { position: relative; display: inline-flex; }
.menu-wrap .menu { white-space: normal; text-align: left; }
.menu button:disabled { color: var(--text-3); cursor: not-allowed; }
.menu button:disabled:hover { background: transparent; }
.table-wrap:has(> .table-svc) { overflow: visible; }
.table-svc .actions { flex-wrap: nowrap; justify-content: flex-end; }

/* Nine columns plus a sidebar don't fit below this width, and this table can't scroll sideways. */
@media (max-width: 1080px) {
  .table-svc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-svc, .table-svc tbody, .table-svc tr, .table-svc td { display: block; width: 100%; }
  .table-svc tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
  .table-svc td { padding: 3px 0; border: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-2); text-align: left; white-space: normal; }
  .table-svc td::before { content: attr(data-label); color: var(--text-3); font-size: var(--text-xs); }
  .table-svc td.cell-actions { grid-template-columns: 1fr; }
  .table-svc td.cell-actions::before { display: none; }
  .table-svc .actions { justify-content: flex-start; }
  .table-svc .menu { left: 0; right: auto; }
}
@media (max-width: 640px), (pointer: coarse) {
  .menu-wrap .menu button, .menu-wrap .menu a { min-height: var(--touch); align-items: center; }
}

/* Server pages, part B: Databases, Firewall, Cron, Backups, Logs, Access. */
tr.is-warned td { background: var(--warn-bg); }
/* Output and script bodies inside table cells wrap, so they never widen the table. */
pre.code-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Groups radio choices without the browser's box, which Ledger doesn't use. */
fieldset.plain { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.plain legend { padding: 0; margin-bottom: var(--space-1); }