/* Fonts */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Azeret Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/static/fonts/azeret-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { accent-color: var(--color-action); background: var(--color-page); color: var(--color-ink); font-family: var(--font-sans); line-height: 1.5; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
/* Links inside running text share one style; links with a class (buttons, nav, rows) style themselves.
   A link anywhere else that should look like a body link takes .text-link. */
.content :where(p, dd, td) > a:not([class]), .content .text-link { color: var(--color-action); text-underline-offset: .2em; }
.content :where(p, dd, td) > a:not([class]):hover, .content .text-link:hover { color: var(--color-action-hover); }
code, pre, .technical { font-family: var(--font-mono); }
code { overflow-wrap: anywhere; }
p { margin-block: 0 var(--space-4); }
h2 { line-height: 1.2; }
:focus-visible { outline: 3px solid var(--color-sky); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden, .skip-link { width: 1px; height: 1px; padding: 0; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link:focus { width: auto; height: auto; top: var(--space-4); left: var(--space-4); z-index: 100; padding: var(--space-3) var(--space-4); clip: auto; background: var(--color-ink); color: white; }
.muted, .empty-copy { color: var(--color-text-muted); }
.technical-wrap { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* App shell and navigation */
.topbar { padding: var(--space-3) var(--space-5); display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-6); row-gap: var(--space-2); background: var(--color-paper); border-bottom: 1px solid var(--color-border); }
.wordmark { display: inline-flex; align-items: center; gap: .375rem; color: var(--color-ink); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.brand-mark { width: 1.375rem; height: 1.375rem; flex: none; background: url("/static/logo.svg") center / contain no-repeat; }
.topbar-nav { display: flex; align-items: center; gap: var(--space-1); }
.topbar-nav a, .topbar-help { min-height: 2.25rem; padding: 0 var(--space-3); display: flex; align-items: center; border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; }
.topbar-nav a:hover, .topbar-help:hover { background: var(--color-nav-hover); color: var(--color-ink); }
.topbar-nav a[aria-current="page"] { background: var(--color-sky); color: var(--color-ink); font-weight: 650; }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.topbar-help { padding: 0 var(--space-2); }
.account-menu { position: relative; }
.account-menu summary { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--color-sky); color: var(--color-ink); font-size: var(--text-sm); font-weight: 650; cursor: pointer; list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 20; width: 16rem; padding: var(--space-2); display: grid; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }
.account-panel p { margin: 0; padding: var(--space-2) var(--space-3) var(--space-3); display: grid; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.account-panel small { color: var(--color-text-muted); overflow-wrap: anywhere; }
.account-panel a, .account-panel button { width: 100%; min-height: 2.25rem; padding: 0 var(--space-3); display: flex; align-items: center; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); font-size: var(--text-sm); text-align: left; text-decoration: none; cursor: pointer; }
.account-panel a:first-of-type, .account-panel form { margin-top: var(--space-1); }
.account-panel a:hover, .account-panel button:hover { background: var(--color-nav-hover); color: var(--color-ink); }

/* Below 40rem the links move to a row of their own under the wordmark and the account menu. */
@media (max-width: 39.999rem) {
  .topbar { padding-inline: var(--space-4); column-gap: var(--space-3); }
  .topbar-nav { order: 3; width: 100%; overflow-x: auto; }
  .topbar-nav a { white-space: nowrap; }
  .content { width: calc(100% - 2rem); padding-block: var(--space-5); }
}

.app-main { min-width: 0; }
.content { width: min(calc(100% - 4rem), var(--content-width)); margin-inline: auto; padding-block: var(--space-7); container: content / inline-size; }

/* Page headings and breadcrumbs */
.breadcrumbs { margin-bottom: var(--space-5); display: flex; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.breadcrumbs a { color: var(--color-action); }
.breadcrumbs a:hover { color: var(--color-action-hover); }
.page-heading { margin-bottom: var(--space-6); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
.page-heading h1 { margin: 0; font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.1; letter-spacing: -.045em; }
.page-heading p:not(.eyebrow) { max-width: 42rem; margin: var(--space-3) 0 0; color: var(--color-text-muted); }
.eyebrow { margin: 0 0 var(--space-3); color: var(--color-text-muted); font: 600 var(--text-xs)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.application-heading { margin-bottom: var(--space-4); }
.application-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.application-title-row h1 { margin: 0; font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.1; letter-spacing: -.045em; }
.detail-heading { margin-bottom: var(--space-5); }
.detail-heading h1, .detail-heading h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.1; }
.application-title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.panel-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.application-kind { margin: 0; display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: .875rem; }
.application-kind::before { content: "\00b7"; }
.application-kind img { flex: none; width: 1.25rem; height: 1.25rem; }
.resource-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
/* Runtime form: the start command row and the command block */
.start-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.start-row.has-factory { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.start-row .check-field { min-height: 2.625rem; margin-top: 1.75rem; white-space: nowrap; }
.start-row .check-field[hidden] { display: none; }
.field input.mono { font-family: var(--font-mono); font-size: .8125rem; }
.field input[aria-invalid="true"] { border-color: var(--color-danger); }
.command-preview { display: grid; gap: var(--space-2); transition: opacity .15s; }
.command-preview.is-loading { opacity: .5; }
.command-box { border-radius: var(--radius-sm); background: var(--color-log-bg); overflow: hidden; }
.command-head { padding: .55rem var(--space-4) 0; color: var(--color-log-dim); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
.command-line { margin: 0; padding: .3rem var(--space-4) .85rem; color: var(--color-log-text); font-family: var(--font-mono); font-size: .8125rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.command-prompt { color: var(--color-log-dim); user-select: none; }
.command-arg { color: var(--color-log-accent); }
.command-in { color: var(--color-log-input); }
.command-box[data-command-state="incomplete"] .command-line { color: var(--color-log-dim); }
.command-box[data-command-state="invalid"] .command-line { color: var(--color-log-error); }
.command-note { margin: 0; color: var(--color-warning); font-size: var(--text-xs); }
@media (max-width: 34rem) { .start-row, .start-row.has-factory { grid-template-columns: 1fr; } .start-row .check-field { margin-top: 0; min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .command-preview { transition: none; } }
.application-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); }
.application-heading-actions form { margin: 0; }
.heading-statuses { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.heading-statuses:empty { display: none; }
.heading-with-status { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }

/* Buttons and status labels */
.button { min-height: 2.625rem; padding-inline: var(--space-4); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-ink); font-weight: 650; text-decoration: none; cursor: pointer; }
.button.primary { background: var(--color-action); border-color: var(--color-action); color: white; }
.button.primary:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
.button.secondary { background: transparent; border-color: var(--color-action); color: var(--color-action); }
.button.secondary:hover { background: var(--color-surface); border-color: var(--color-action-hover); color: var(--color-action-hover); }
.button.text { min-height: auto; padding: 0; color: var(--color-action); }
.button.text:hover { color: var(--color-action-hover); }
.button.danger { background: var(--color-danger); border-color: var(--color-danger); color: white; }
.button.danger:hover { background: var(--color-danger-hover); }
.button:disabled, .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.button.primary[aria-disabled="true"]:hover { background: var(--color-action); border-color: var(--color-action); }
.button.text:disabled { opacity: .45; }
.button.text.danger-text { color: var(--color-danger); }
.button.secondary[aria-disabled="true"]:hover { background: transparent; border-color: var(--color-action); color: var(--color-action); }
.button.danger-outline { background: var(--color-surface); border-color: var(--color-danger); color: var(--color-danger); }
.button.danger-outline:hover { background: var(--color-danger-bg); }
.status { width: max-content; max-width: 100%; padding: .35rem .55rem; display: inline-flex; align-items: center; gap: .4rem; border-radius: var(--radius-pill); font: 600 .68rem/1 var(--font-mono); letter-spacing: .03em; text-transform: uppercase; }
.status::before { content: ""; width: .4rem; height: .4rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.status.healthy { background: var(--color-success-bg); color: var(--color-success); }
.status.building, .status.warning { background: var(--color-warning-bg); color: var(--color-warning); }
.status.failed, .status.unavailable { background: var(--color-danger-bg); color: var(--color-danger); }
.status.info { background: var(--color-surface-blue); color: var(--color-cobalt); }
.status.stopped { background: var(--color-neutral-bg); color: var(--color-neutral); }
a.status { text-decoration: none; }
.chip { padding: .15rem .5rem; display: inline-block; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font: 600 var(--text-xs)/1.4 var(--font-mono); }

/* Panels and forms */
.panel { min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.panel-header { min-height: 3.75rem; padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-border); }
.panel-header h2, .panel-header p { margin: 0; }
.panel-header h2 { font-size: var(--text-md); }
.panel-header p:not(.application-kind) { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
.panel-body { padding: var(--space-5); }
.panel-footer { padding: var(--space-4); border-top: 1px solid var(--color-border); }
.field { display: grid; align-content: start; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field input:not([type="checkbox"]), .field select, .field textarea { width: 100%; min-height: 2.625rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }
.field textarea { resize: vertical; }
.field small { color: var(--color-text-muted); }
.form-grid { padding: var(--space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.field-wide { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); }
.form-stack, .stack { display: grid; gap: var(--space-4); }
.check-field { display: flex; gap: var(--space-2); align-items: center; }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); }
.inline-actions { margin-top: var(--space-5); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.inline-actions.compact { margin: 0; }
small.block { display: block; }
.form-grid.flush { padding: 0; }
details summary { color: var(--color-action); cursor: pointer; }
details summary:hover { color: var(--color-action-hover); }
.choice-list { margin: 0; padding: 0; display: grid; gap: var(--space-2); border: 0; }
.choice-list legend { margin-bottom: var(--space-2); font-weight: 650; }
.choice-list > label, .choice-list details > label { padding: var(--space-3); display: flex; align-items: start; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.choice-list span { display: grid; }
.choice-list small { color: var(--color-text-muted); }
.choice-list .cell-error { color: var(--color-danger); }
.choice-list details { display: grid; gap: var(--space-2); }
.choice-list > label:has(:checked), .choice-list details > label:has(:checked) { border-color: var(--color-action); background: var(--color-surface-blue); }
.kind-picker .kind-grid, .kind-picker details > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-3); }
.kind-picker legend { padding: 0; }
@media (max-width: 34rem) { .kind-picker .kind-grid, .kind-picker details > div { grid-template-columns: 1fr; } }
.kind-picker .kind-card { position: relative; display: flex; flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; }
.kind-picker .kind-card:hover { border-color: var(--color-action); }
.kind-picker .kind-card:has(:checked) { border-color: var(--color-action); box-shadow: 0 0 0 1px var(--color-action); background: var(--color-surface-blue); }
.kind-picker .kind-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kind-picker .kind-card img { flex: none; width: 2.25rem; height: 2.25rem; }
.kind-picker .kind-card:has(:focus-visible) { outline: 3px solid var(--color-sky); outline-offset: 2px; }
.groups-field { display: none; }
[data-access-form]:has(input[value="ALLOWED_GROUPS"]:checked) .groups-field { display: grid; }
.address-preview { display: block; margin-top: var(--space-2); color: var(--color-text-muted); }
.address-preview strong { color: var(--color-ink); font-weight: 600; overflow-wrap: anywhere; }
.notice.danger + .panel { margin-top: var(--space-4); }
[data-live="notice"] > .notice.danger { margin-bottom: var(--space-4); }
.panel-body.fact-panel { padding-block: var(--space-2); }
.cell-error { margin-top: var(--space-2); display: block; color: var(--color-danger); font-size: var(--text-xs); }
input[readonly] { background: transparent; color: var(--color-text-muted); cursor: default; }
/* A field that failed validation keeps its red border over any component border. */
[aria-invalid="true"] { border-color: var(--color-danger) !important; }

/* Tables and the inventory */
.table-wrap { max-width: 100%; overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table th { background: var(--color-surface-muted); color: var(--color-text-muted); font: 500 .68rem var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.application-link { display: grid; text-decoration: none; }
.application-link:hover strong { color: var(--color-action-hover); }
.application-link span { color: var(--color-text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.row-action { position: relative; z-index: 1; text-align: right; }
.data-table td.row-action { text-align: right; }
/* A table whose rows hold an actions menu must not clip the open menu. */
.table-wrap.menu-host { overflow: visible; }
.menu-host .data-table thead th:first-child { border-top-left-radius: var(--radius-md); }
.menu-host .data-table thead th:last-child { border-top-right-radius: var(--radius-md); }
/* Each action cell is its own stacking context, so the cell holding the open menu must rise above the cells of the rows below. */
.row-action:has(.row-menu[open]) { z-index: 3; }
.row-menu { position: relative; display: inline-block; }
.row-menu summary { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--color-text-muted); list-style: none; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu summary:hover, .row-menu[open] summary { background: var(--color-nav-hover); color: var(--color-ink); }
.row-menu-panel { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 20; min-width: 12rem; padding: var(--space-2); display: grid; gap: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); text-align: left; }
.row-menu-panel button { width: 100%; min-height: 2.25rem; padding: 0 var(--space-3); display: flex; align-items: center; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-ink); font-size: var(--text-sm); text-align: left; white-space: nowrap; cursor: pointer; }
.row-menu-panel button:hover { background: var(--color-nav-hover); }
.row-menu-panel button.danger { color: var(--color-danger); }
.empty-state { padding: var(--space-6); display: grid; place-items: center; gap: var(--space-2); color: var(--color-text-muted); text-align: center; }
.data-table td.empty-state { padding: var(--space-6); }
.empty-state strong { color: var(--color-ink); }
td.empty-state { display: table-cell; }
td.empty-state > * { display: block; }
/* Inventory: whole row navigates to Manage; Open and Manage stay independently clickable above it */
.inventory-table tbody tr { position: relative; }
.inventory-table tbody tr:hover { background: var(--color-row-hover); }
.inventory-table .application-link::after { content: ""; position: absolute; inset: 0; }
.kind-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.kind-label img { flex: none; width: 1.25rem; height: 1.25rem; }
.inventory-table .row-action { position: relative; z-index: 1; }

/* Notices */
.notice { padding: var(--space-4); display: flex; gap: var(--space-3); border: 1px solid var(--color-border); border-left-width: 4px; border-radius: var(--radius-sm); }
.notice p { margin: var(--space-1) 0 0; }
.notice.danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); border-left-color: var(--color-danger); color: var(--color-danger); }
.notice.warning { margin-bottom: var(--space-4); background: var(--color-warning-bg); border-color: var(--color-warning-border); border-left-color: var(--color-warning); color: var(--color-warning); }
.toasts { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 50; width: min(26rem, calc(100vw - 2 * var(--space-6))); display: grid; gap: var(--space-3); pointer-events: none; }
.toast { padding: var(--space-3) var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); border: 1px solid var(--color-border); border-left-width: 4px; border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-dialog); pointer-events: auto; }
.toast p { margin: 0; min-width: 0; flex: 1; overflow-wrap: anywhere; font-weight: 600; }
.toast.success { background: var(--color-success-bg); border-color: var(--color-success-border); border-left-color: var(--color-success); color: var(--color-success); }
.toast.warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); border-left-color: var(--color-warning); color: var(--color-warning); }
.toast.danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); border-left-color: var(--color-danger); color: var(--color-danger); }
.toast a { color: inherit; text-decoration: underline; }
.toast-close { flex: none; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.toast-close:hover { background: rgb(0 0 0 / .08); }
.restart-notice { align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.restart-notice p { margin: var(--space-1) 0 0; }

/* Overview and facts */
.fact-list { margin: 0; display: grid; }
.fact-list > div { min-height: 3.25rem; padding-block: var(--space-3); display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: var(--space-3); border-bottom: 1px solid var(--color-border); }
.fact-list > div:last-child { border-bottom: 0; }
.fact-list dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.fact-list dd { margin: 0; min-width: 0; }
.fact-address { display: flex; align-items: center; gap: var(--space-2); }
.fact-address > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); }
.fact-address .button { min-height: 0; padding: 0 var(--space-1); }
.fact-list dd > span + span { margin-left: var(--space-2); }

/* Wide layouts. These respond to the width of the content column (.content is a size container),
   not the viewport, so they follow the page margins. */
@container content (min-width: 56rem) {
  .fact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); }
  .fact-list > div { border-bottom: 0; }
  .fact-list > .fact-wide { grid-column: 1 / -1; }
}
@container content (min-width: 56rem) {
  .settings-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .settings-sections > :not(.half) { grid-column: 1 / -1; }
  .settings-sections > .half { align-self: stretch; }
  .resource-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .overview-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .attempt-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  /* Half-width panels are too narrow for the two-column fact list. */
  .overview-columns .fact-list { grid-template-columns: minmax(0, 1fr); }
  .overview-columns .fact-list > div { border-bottom: 1px solid var(--color-border); }
  .overview-columns .fact-list > div:last-child { border-bottom: 0; }
}

/* Copy command and publish hint */
.copy-command { padding: var(--space-3); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-muted); overflow: hidden; }
.copy-command code { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.copy-command > a { min-width: 0; }
.address-field { max-width: 32rem; }
.or-divider { width: 100%; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }
.publish-hint { position: relative; }
.publish-hint-card { width: 24rem; max-width: calc(100vw - 2rem); padding-top: var(--space-2); position: absolute; top: 100%; right: 0; z-index: 20; display: none; }
.publish-hint:not([data-dismissed]):is(:hover, :focus-within) .publish-hint-card { display: block; }
.publish-hint-body { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-dialog); font-size: var(--text-sm); }
.publish-hint-body p { margin-bottom: var(--space-3); }
.publish-hint-body p:last-child { margin-bottom: 0; }
.publish-hint-body .copy-command { margin-bottom: var(--space-3); align-items: flex-start; }

/* History, versions, and stages */
.timeline-group { border-bottom: 1px solid var(--color-border); }
.timeline-group:last-child { border-bottom: 0; }
.timeline-group-header { padding: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); background: var(--color-page); border-bottom: 1px solid var(--color-border); font-weight: 650; }
.timeline-group-title { margin-right: auto; }
.timeline-events { margin: 0; padding: 0; list-style: none; }
.timeline-event { padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5); display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-4); border-left: 3px solid transparent; }
.timeline-event.timeline-warn { border-left-color: var(--color-warning); }
.timeline-event.timeline-error { border-left-color: var(--color-danger); }
.timeline-time { color: var(--color-text-muted); font: var(--text-xs)/1.5 var(--font-mono); }
.timeline-message { min-width: 0; overflow-wrap: anywhere; }
.timeline-message code { margin-left: var(--space-2); font-size: var(--text-xs); }
.timeline-output { grid-column: 2; font-size: var(--text-sm); }
.snapshot-warning { margin: 0; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); }
.panel-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.timeline-source { font-size: var(--text-sm); }
.timeline-step { font: var(--text-xs)/1.5 var(--font-mono); }
@media (max-width: 40rem) { .timeline-event { grid-template-columns: minmax(0, 1fr) auto; } .timeline-time { grid-column: 1 / -1; } }
.history-item { padding: var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-5); border-bottom: 1px solid var(--color-border); }
.history-item:last-of-type { border-bottom: 0; }
.history-item p { margin: 0; }
.history-item p + p { margin-top: var(--space-1); }
.history-item.linked { position: relative; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--space-4); color: inherit; text-decoration: none; }
.history-item.linked:hover { background: var(--color-row-hover); }
/* The version name link covers the whole row; the action button stays clickable above it. */
.history-item.result { grid-template-columns: max-content minmax(0, 1fr); align-items: start; gap: var(--space-2) var(--space-4); }
.history-item.result .cell-error { grid-column: 2; margin-top: 0; overflow-wrap: anywhere; }
.history-item.stretched { position: relative; grid-template-columns: minmax(0, 1fr) auto; }
.history-item.stretched:hover { background: var(--color-row-hover); }
.row-link { color: inherit; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
.row-link:focus-visible::after { outline: 3px solid var(--color-sky); outline-offset: -3px; }
.history-item .technical { font-size: .9em; }
.row-detail { min-width: 0; display: grid; gap: var(--space-1); }
.row-detail > span:first-child { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); }
.row-detail .attempt-version { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Sits above the row-link overlay so it stays clickable. */
.row-detail .text-link { position: relative; z-index: 1; }
.nowrap, .row-detail time { white-space: nowrap; }
.row-reason { color: var(--color-danger); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-list { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); row-gap: var(--space-1); }
.segmented { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.segmented a { padding: var(--space-1) var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; }
.segmented a + a { border-left: 1px solid var(--color-border); }
.segmented a[aria-current="true"] { background: var(--color-selected); color: var(--color-ink); font-weight: 600; }
.stages { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; }
.stage { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.stage::before { content: "○"; }
.stage.done { color: var(--color-success); }
.stage.done::before { content: "✓"; }
.stage.current { color: var(--color-action); font-weight: 600; }
.stage.current::before { content: "●"; }
.stage.failed { color: var(--color-danger); font-weight: 600; }
.stage.failed::before { content: "✕"; }

/* Subnav and filters */
.subnav { margin-bottom: var(--space-5); display: flex; gap: var(--space-5); overflow-x: auto; border-bottom: 1px solid var(--color-border); scrollbar-width: thin; }
.subnav a { padding: var(--space-3) 0; border-bottom: 2px solid transparent; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; }
.subnav a[aria-current="page"] { border-color: var(--color-action); color: var(--color-ink); font-weight: 650; }
/* Reserve the bold width so switching tabs does not move the others. */
.subnav a::after { content: attr(data-label); height: 0; display: block; overflow: hidden; visibility: hidden; font-weight: 650; }
.filter-form { max-width: 44rem; margin-bottom: var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr) 11rem auto; grid-template-areas: "search status submit"; align-items: center; gap: var(--space-3); }
.filter-form .field { gap: 0; }
.filter-form .filter-field { grid-area: search; }
.filter-form .filter-status { grid-area: status; }
.filter-form .filter-submit { grid-area: submit; }
.filter-form input, .filter-form select, .catalogue-search input { min-height: 2.625rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }

@media (max-width: 74.999rem) { .filter-form { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search submit" "status status"; } }

/* Resource cards */
.resource-card h3 { margin: 0 0 var(--space-1); font-size: var(--text-md); }
.resource-meta { margin: 0 0 var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.resource-card h3 + p, .resource-card .chip-row { margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.resource-cards { padding-block: var(--space-2); display: grid; gap: 0; }
.resource-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.resource-card:last-child { border-bottom: 0; }
.resource-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); }

@media (max-width: 79.999rem) {
  .resource-card { align-items: flex-start; flex-direction: column; }
  .resource-actions { justify-content: flex-start; }
}

.resource-card > div:first-child { min-width: 0; }
.resource-card h3, .resource-card p { overflow-wrap: anywhere; }

/* Publish editors: environment variables and volumes */
.settings-sections { min-width: 0; display: grid; gap: var(--space-5); }
.settings-sections section { scroll-margin-top: 6rem; }
.settings-sections .panel-header > div { min-width: 0; }
.settings-sections .panel-header > .button { flex: none; }
.variable-header-actions { display: flex; flex: none; align-items: center; gap: var(--space-2); }
.variable-add span { font-size: 1.25rem; font-weight: 400; line-height: 1; }
.variable-list { --editor-columns: minmax(0, 1.1fr) minmax(0, 1.35fr) 4.5rem 4rem; }
.variable-columns, .variable-row, .volume-columns, .volume-row { display: grid; grid-template-columns: var(--editor-columns); gap: var(--space-2); align-items: center; }
.variable-columns, .volume-columns { padding-bottom: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; }
.variable-columns span:nth-child(n+3), .volume-columns span:nth-child(n+3) { text-align: center; }
.variable-row, .volume-row { padding-block: var(--space-2); }
.variable-row + .variable-row, .volume-row + .volume-row { border-top: 1px solid var(--color-border); }
.variable-value > label { min-width: 0; }
.variable-row input:not([type="checkbox"]), .variable-row select, .volume-row input:not([type="checkbox"]), .volume-row select { width: 100%; min-width: 0; min-height: 2.25rem; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }
.variable-value, .variable-secret-choice { min-width: 0; display: grid; gap: var(--space-1); }
.variable-row .check-field, .variable-row button, .volume-row .check-field, .volume-row button { min-height: 2.25rem; }
.variable-secret-toggle, .volume-read-only { justify-content: center; cursor: pointer; }
.button.variable-delete { width: 2.25rem; padding: 0; justify-self: center; color: var(--color-danger); font-size: 1.5rem; font-weight: 600; line-height: 1; }
.button.variable-delete:hover { background: var(--color-danger-bg); }
.volume-list { --editor-columns: minmax(0, 1.1fr) minmax(0, 1.35fr) 4.5rem 5rem; }
.volume-row .volume-unmount { justify-self: center; }
/* Keep the empty state's height as the floor so adding a first item doesn't shrink the section. */
#environment .panel-body, #persistent-volumes .panel-body { min-height: 9rem; display: flex; flex-direction: column; }
#environment .empty-state, #persistent-volumes .empty-state { padding: var(--space-3); flex: 1; }
.variable-row > *, .volume-row > * { min-width: 0; }
.volume-row[data-pending-removal] { background: var(--color-paper); }
.pending-note { grid-column: 1 / -1; align-self: center; }
.variable-row label > span:first-child { display: block; margin-bottom: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; }
.variable-row label span { font-size: var(--text-xs); }

/* Logs */
.log-output { min-height: 12rem; max-height: min(70vh, 40rem); margin: 0; padding: var(--space-5); overflow: auto; background: var(--color-log-bg); color: var(--color-log-text); font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.log-output.compact { max-height: 24rem; min-height: 5rem; }
.log-controls select { min-height: 2.625rem; padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font-weight: 650; cursor: pointer; }
[data-log-updated] { font-variant-numeric: tabular-nums; }
.log-output:focus-visible { outline: 2px solid var(--color-action); outline-offset: -2px; }
.log-controls select:hover { border-color: var(--color-ink); }
.log-title { display: flex; align-items: center; gap: var(--space-3); }
.log-panel .log-controls { gap: var(--space-4); flex-wrap: nowrap; }
.log-panel .log-controls .check-field { font-size: var(--text-sm); white-space: nowrap; }
.log-panel .log-controls select, .log-panel .log-controls .button { min-height: 2.25rem; }
.log-panel .log-controls select { min-width: 8.5rem; }
.log-panel .log-output { font-size: var(--text-xs); line-height: 1.5; }
.log-toolbar { padding: var(--space-2) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); }
.log-toolbar-actions { display: flex; align-items: center; gap: var(--space-4); }
.log-toolbar .check-field { color: var(--color-ink); }
.log-toolbar .button.text { color: var(--color-action); font-size: var(--text-sm); text-decoration: underline; }
.log-toolbar .button.text:hover { color: var(--color-action-hover); }
.log-panel[data-nowrap] .log-output { white-space: pre; overflow-wrap: normal; }

/* Dialogs */
dialog { width: min(calc(100% - 2rem), 31rem); padding: var(--space-5); border: 0; border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-dialog); }
dialog h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
dialog > p { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
dialog > p strong { color: var(--color-ink); }
dialog form { display: grid; gap: var(--space-4); }
dialog::backdrop { background: rgb(16 36 71 / 48%); backdrop-filter: blur(5px); }
.dialog-actions { margin-top: var(--space-2); display: flex; justify-content: flex-end; gap: var(--space-2); }

/* Danger area, ownership, and selection lists */
.danger-section { padding: var(--space-5); display: grid; gap: var(--space-4); }
.danger-section + .danger-section { border-top: 1px solid var(--color-border); }
.danger-section h3, .danger-section p { margin: 0; }
.danger-section h3 { font-size: var(--text-md); }
.danger-section p { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.danger-section-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.delete-confirm { display: none; }
[data-delete-form]:has(input[value="destroy"]:checked) .delete-confirm { display: grid; }
.owner-card { padding: var(--space-3); display: grid; gap: var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-blue); }
.owner-card .eyebrow { margin: 0; }
.owner-name { display: grid; }
.owner-name small { color: var(--color-text-muted); }
.danger-collapse summary { display: block; position: relative; padding-right: var(--space-6); cursor: pointer; color: inherit; list-style: none; }
.danger-collapse summary::-webkit-details-marker { display: none; }
.danger-collapse summary::after { content: ""; position: absolute; right: var(--space-2); top: .35rem; width: .5rem; height: .5rem; border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); transform: rotate(45deg); transition: transform .15s; }
.danger-collapse[open] summary::after { transform: rotate(-135deg); top: .5rem; }
.danger-collapse-body { margin-top: var(--space-4); display: grid; gap: var(--space-4); }
.danger-section .search-hint { margin-top: calc(-1 * var(--space-2)); font-size: var(--text-xs); }
.selection-list { margin: 0; padding: 0; list-style: none; }
.selection-list li { padding-block: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--color-border); }
.selection-list li > span:first-child { display: grid; }
.selection-list small { color: var(--color-text-muted); }
.selection-list li:last-child { border-bottom: 0; }

/* Administration and errors */
.admin-grid, .summary-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); }
.admin-card { display: flex; color: inherit; text-decoration: none; }
.admin-card:hover { border-color: var(--color-action); }
.summary-cards { margin-bottom: var(--space-4); }

/* Administration */
.section-title { margin: 0 0 var(--space-3); font-size: var(--text-md); }
.admin-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.admin-card h3 { margin: 0; font-size: var(--text-md); }
.admin-card .panel-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.admin-card .panel-body p { margin: 0; }
.admin-card .button.text { margin-top: auto; padding-top: var(--space-2); }
#activity .panel-header { flex-wrap: wrap; }
#activity .panel-header > div { flex: 1 1 24rem; }
#activity .segmented a { white-space: nowrap; }
.status-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.summary-value { display: block; font-size: var(--text-lg); }
.terminal-error { max-width: 42rem; margin-block: 12vh; padding: var(--space-7); border-left: 4px solid var(--color-danger); background: var(--color-surface); box-shadow: var(--shadow-dialog); }

/* Layout helpers */
.narrow-panel { max-width: 46rem; }
.section-gap { margin-top: var(--space-4); }
.attempt-columns > .panel { min-width: 0; }
.steps-stages { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
/* Edge shadows show that the list scrolls; the "local" layers cover them once the edge is reached. */
/* A fixed height, not a maximum: a growing list would push Build output down while it is read. */
.steps-scroll { height: min(16rem, 40vh); overflow-y: auto; background:
  linear-gradient(var(--color-surface) 30%, transparent) top / 100% 1.5rem local no-repeat,
  linear-gradient(transparent, var(--color-surface) 70%) bottom / 100% 1.5rem local no-repeat,
  linear-gradient(rgb(0 0 0 / 14%), transparent) top / 100% 0.5rem scroll no-repeat,
  linear-gradient(transparent, rgb(0 0 0 / 14%)) bottom / 100% 0.5rem scroll no-repeat; }
.timeline-events.compact .timeline-event { grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--space-3); padding-left: var(--space-4); }
.timeline-events.compact .timeline-time { white-space: nowrap; }
.overview-columns { display: grid; gap: var(--space-4); }
.overview-side { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.borderless { border: 0; border-radius: 0; }
.onboarding-panel { margin-bottom: var(--space-4); }

/* Sign-in and one-time-link pages (rendered by the identity package) */
.auth-shell { min-height: 100vh; padding: var(--space-5); display: grid; place-items: center; background: var(--color-page); }
.auth-card { width: min(100%, 26rem); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-dialog); }
.auth-card h1 { margin: 0 0 var(--space-3); font-size: var(--text-lg); letter-spacing: -.02em; }
.auth-card .wordmark { margin-bottom: var(--space-5); }
.auth-card .form-actions { justify-content: stretch; }
.auth-card .form-actions .button { width: 100%; }
.auth-error { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-danger-border); border-radius: var(--radius-sm); background: var(--color-danger-bg); color: var(--color-danger); font-size: var(--text-sm); }
.auth-note { color: var(--color-text-muted); font-size: var(--text-sm); }
.auth-card form + .auth-note { margin-top: var(--space-4); }

.catalogue-heading { margin-bottom: var(--space-5); }
.catalogue-count { min-height: 1.5em; }
.catalogue-search .field { gap: 0; }
.catalogue-search { max-width: 44rem; margin-bottom: var(--space-5); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); }
@media (max-width: 39.999rem) {
  .catalogue-search { grid-template-columns: minmax(0, 1fr) auto; }
  .catalogue-search .button.text { grid-column: 1 / -1; justify-self: start; }
}
.catalogue-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--space-5); }
.catalogue-card { position: relative; transition: border-color .15s, box-shadow .15s; }
.catalogue-card.openable:hover { border-color: var(--color-action); box-shadow: var(--shadow-card); }
.catalogue-card .panel-body { height: 100%; display: flex; flex-direction: column; gap: var(--space-3); }
.catalogue-card-head { display: flex; align-items: center; gap: var(--space-3); }
.catalogue-card-title { min-width: 0; }
.catalogue-card-title h3 { margin: 0; font-size: var(--text-md); overflow-wrap: anywhere; }
.catalogue-meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.catalogue-description { margin: 0; overflow-wrap: anywhere; }
.catalogue-card .inline-actions { justify-content: flex-end; margin-top: auto; padding-top: var(--space-2); }
.catalogue-card:not(.openable) .avatar { filter: grayscale(1); opacity: .65; }
.catalogue-card:not(.openable) h3 { color: var(--color-text-muted); }
/* The Open link covers its whole card, as .row-link covers a row; Manage and the tags stay above it. */
.card-open::after { content: ""; position: absolute; inset: 0; }
.card-open:focus-visible { outline: none; }
.card-open:focus-visible::after { outline: 3px solid var(--color-action); outline-offset: -3px; }
.card-manage, .tag-list a { position: relative; z-index: 1; }
.avatar { width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); font-size: var(--text-lg); font-weight: 700; line-height: 1; }
.avatar-0 { background: var(--avatar-0-bg); color: var(--avatar-0-fg); }
.avatar-1 { background: var(--avatar-1-bg); color: var(--avatar-1-fg); }
.avatar-2 { background: var(--avatar-2-bg); color: var(--avatar-2-fg); }
.avatar-3 { background: var(--avatar-3-bg); color: var(--avatar-3-fg); }
.avatar-4 { background: var(--avatar-4-bg); color: var(--avatar-4-fg); }
.avatar-5 { background: var(--avatar-5-bg); color: var(--avatar-5-fg); }
.avatar-6 { background: var(--avatar-6-bg); color: var(--avatar-6-fg); }
.avatar-7 { background: var(--avatar-7-bg); color: var(--avatar-7-fg); }
.tag-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-list li { border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-muted); font: 600 var(--text-xs)/1.4 var(--font-mono); }
.tag-list a { padding: .15rem .55rem; display: block; color: var(--color-text-muted); text-decoration: none; }
.tag-list a:hover { color: var(--color-ink); text-decoration: underline; }
.tag-list li:has(a:hover) { border-color: var(--color-ink); }

/* Phones: management pages only need to not break. The page-level rules for the top bar and
   catalogue are with their components above. */
@media (max-width: 39.999rem) {
  .topbar-nav a { padding-inline: var(--space-2); }
  .application-title-row { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .application-heading-actions { justify-content: flex-start; }
  /* Tabs scroll sideways; the scroll shadows show that there are more on either side. */
  .subnav { gap: var(--space-4); background:
    linear-gradient(to right, var(--color-page) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--color-page) 30%, transparent) right / 2rem 100% no-repeat local,
    linear-gradient(to right, rgb(0 0 0 / 14%), transparent) left / .75rem 100% no-repeat scroll,
    linear-gradient(to left, rgb(0 0 0 / 14%), transparent) right / .75rem 100% no-repeat scroll; }
  .log-panel .panel-header { flex-wrap: wrap; }
  .log-panel .log-controls { flex-wrap: wrap; }
  .history-item.linked { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); }
  .history-item.linked > :first-child { grid-column: 1 / -1; justify-self: start; }
}

.group-ids { margin-top: var(--space-2); font-size: var(--text-sm); }
.group-ids summary { color: var(--color-action); cursor: pointer; }
.group-ids ul { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.filter-form .check-field { grid-area: status; white-space: nowrap; }
/* A collapsed form panel: the whole header opens it, like a button. */
.disclosure-panel > summary { list-style: none; cursor: pointer; }
.disclosure-panel > summary::-webkit-details-marker { display: none; }
.disclosure-panel:not([open]) > summary { border-bottom: 0; }
.disclosure-panel[open] > summary .button { display: none; }
.kind-picker > .field-hint { display: block; margin-bottom: var(--space-3); }
.button.text.card-manage { color: var(--color-text-muted); }
.button.text.card-manage:hover { color: var(--color-action); }
@media (max-width: 34rem) { .fact-address > a { white-space: normal; overflow-wrap: anywhere; } }
.field-help { display: grid; gap: var(--space-1); }
.field-help summary { color: var(--color-action); font-size: var(--text-sm); cursor: pointer; }

.usage-totals { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-7); }
.usage-totals dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.usage-totals dd { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.usage-chart { margin: 0; }
.usage-peak { color: var(--color-text-muted); font-size: var(--text-sm); padding-bottom: var(--space-1); }
.usage-chart svg { display: block; width: 100%; height: 7rem; border-bottom: 1px solid var(--color-border); }
.usage-chart .usage-slot { fill: transparent; }
.usage-chart .usage-bar { fill: var(--color-action); }
.usage-chart g:hover .usage-slot { fill: var(--color-selected); }
.usage-chart figcaption { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: var(--text-sm); padding-top: var(--space-1); }

/* Dependency audit (docs/design/dependency-audit). A neutral panel: findings are never red or green, and only the state chips of an audit in progress or one that did not finish carry colour. */
.audit-panel { margin-top: var(--space-5); }
.audit-panel .panel-header form { margin: 0; }
.audit-panel .button[disabled] { opacity: .5; cursor: not-allowed; }
.audit-note { padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-1); border-bottom: 1px solid var(--color-border); background: var(--color-surface-muted); font-size: var(--text-xs); }
.audit-note p { margin: 0; }
.audit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); color: var(--color-text-muted); }
.audit-meta .technical { font-size: .75rem; }
.audit-state { padding: var(--space-5) var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); }
.audit-state strong { display: block; }
.audit-state .muted { font-size: var(--text-sm); }
.spin { width: 1rem; height: 1rem; margin-top: .2rem; flex: none; border: 2px solid var(--color-border); border-top-color: var(--color-warning); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.audit-table { border: 0; border-radius: 0; }
.audit-table .data-table td { vertical-align: top; }
.audit-table td.pkg { font-weight: 600; }
.audit-table td.ver, .audit-table td.fix, .audit-table td.adv { font-family: var(--font-mono); font-size: var(--text-xs); }
/* A package with several advisories names itself once; the repeats stay for screen readers and phones. */
.audit-table tr:not(.group-last) td { border-bottom-color: transparent; }
.audit-table tr.group-cont td.pkg, .audit-table tr.group-cont td.ver { color: transparent; }
.audit-table td.adv a { color: var(--color-ink); text-underline-offset: .15em; }
.audit-table .aliases { display: block; margin-top: .15rem; color: var(--color-text-muted); font-size: .6875rem; }
.audit-table .nofix { color: var(--color-text-muted); font-family: var(--font-sans); }
.content dd.audit-line > a:not([class]), .content dd.audit-line > a:not([class]):hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 34rem) {
  .audit-panel .panel-header { flex-wrap: wrap; }
  .audit-table .data-table thead { display: none; }
  .audit-table .data-table, .audit-table .data-table tbody, .audit-table .data-table tr, .audit-table .data-table td { display: block; }
  .audit-table .data-table tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
  .audit-table .data-table tbody tr:last-child { border-bottom: 0; }
  .audit-table .data-table td { padding: .1rem 0; border: 0 !important; color: inherit !important; }
  .audit-table td.fix:not(:has(.nofix))::before { content: "Fixed in "; color: var(--color-text-muted); font-family: var(--font-sans); }
}