.font-mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.badge[data-status], .badge[data-kind="role"] { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-badge); text-transform: uppercase; border: var(--hairline) solid var(--shade-3); background: var(--shade-0); color: var(--shade-9); }
.badge[data-kind="role"] { border-color: var(--shade-9); }
.badge[data-status="available"], .badge[data-status="published"], .badge[data-status="approved"], .badge[data-status="active"], .badge[data-status="winner"] { border-color: var(--shade-9); }
.badge[data-status="reserved"], .badge[data-status="pending"], .badge[data-status="draft"], .badge[data-status="awaiting_extraction"], .badge[data-status="extracting"], .badge[data-status="indexing"] { background: var(--shade-2); border-color: var(--shade-2); }
.badge[data-status="sold"], .badge[data-status="closed"], .badge[data-status="done"], .badge[data-status="indexed"] { background: var(--shade-9); color: var(--shade-0); border-color: var(--shade-9); }
.badge[data-status="hidden"], .badge[data-status="archived"], .badge[data-status="expired"], .badge[data-status="ineligible"] { border-style: dashed; color: var(--muted-foreground); }
.badge[data-status="denied"], .badge[data-status="failed"], .badge[data-status="budget_exceeded"] { border-color: var(--shade-danger); color: var(--shade-danger); }
:is(.table, table.grid) :is(td, th).num { text-align: right; }
/* A segmented control: a recessed track whose pressed button lifts out of it. */
.seg { display: inline-flex; gap: calc(var(--s-1) / 2); max-width: 100%; overflow-x: auto; padding: calc(var(--s-1) / 2);
  border: var(--hairline) solid var(--border); border-radius: var(--r-2); background: var(--muted); }
.seg button { font: inherit; font-size: var(--fs-sm); font-weight: 500; height: calc(var(--s-1) * 6.5); padding: 0 calc(var(--s-1) * 2.5); white-space: nowrap;
  border: 0; border-radius: var(--r-1); background: transparent; color: var(--muted-foreground); cursor: pointer; }
.seg button:hover { color: var(--foreground); }
.seg button:focus-visible { outline: var(--focus) solid var(--ring); outline-offset: calc(var(--hairline) * -1); }
.seg button[aria-pressed="true"] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-1); }
/* A record's tab strip scrolls within the page rather than widening it on a phone. */
.tabs > [role="tablist"] { max-width: 100%; overflow-x: auto; justify-content: flex-start; }
.tabs > [role="tablist"] > [role="tab"] { flex: none; white-space: nowrap; }
/* The design system's control sizes: 32px controls, 28px small ones, 13px labels. */
.btn { height: var(--s-6); padding: 0 var(--s-3); gap: var(--s-2); font-size: var(--fs-ui); border-radius: var(--r-2); }
.btn[data-size="sm"] { height: calc(var(--s-1) * 7); padding: 0 calc(var(--s-1) * 2.5); font-size: var(--fs-sm); }
input.input, .select { height: var(--s-6); font-size: var(--fs-ui); }
textarea.input { font-size: var(--fs-ui); }
.select[data-size="sm"] { height: calc(var(--s-1) * 7); }
.chip { line-height: 1.4; }
.bulkbar .btn, .bulkbar .btn[data-variant] { background: transparent; background-color: transparent; color: var(--primary-foreground); border: var(--hairline) solid var(--primary-foreground); box-shadow: none; }
.bulkbar .btn:hover, .bulkbar .btn[data-variant]:hover { background: color-mix(in oklab, var(--primary-foreground) 14%, transparent); color: var(--primary-foreground); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: var(--focus) solid var(--ring); outline-offset: var(--focus); }
.mono, .json-code { font-family: var(--font-mono); }
.json-summary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(var(--s-6) * 14); }
.json-detail summary { cursor: pointer; }
.json-code { margin-top: var(--s-2); overflow: auto; white-space: pre-wrap; }
.json-editor { display: grid; gap: var(--s-2); }
.typed-json-fieldset, .typed-json-group { border: var(--hairline) solid var(--border); border-radius: var(--radius); padding: var(--s-3); }
.typed-json-fieldset > legend, .typed-json-group > legend { padding: 0 var(--s-1); }
.typed-json-stack { display: grid; gap: var(--s-3); }
body { margin: 0; min-height: 100vh; background: var(--background); color: var(--foreground);
  font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--leading); -webkit-font-smoothing: antialiased; }
body.app-centered { display: grid; place-items: center; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); }
a { color: inherit; }
.app-main { width: 100%; min-width: 0; max-width: calc(var(--s-8) * 16); margin: 0 auto; padding: var(--s-5); }
.app-main-full { max-width: none; }
.app-shell { display: grid; grid-template-columns: calc(var(--s-2) * 29) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto; min-height: 100vh; }
/* The sign-in page has no session and therefore no sidebar; without one the
   content region must not be squeezed into the sidebar's track. */
.app-shell:not(:has(.app-sidebar)) { grid-template-columns: minmax(0, 1fr); }
.app-shell-body { grid-row: 1 / 2; min-width: 0; display: flex; flex-direction: column; }
.app-sidebar { grid-row: 1 / 2; align-self: start; position: sticky; top: 0;
  max-height: 100vh; overflow: auto; display: grid; gap: var(--s-4); align-content: start;
  padding: var(--s-3); border-right: var(--hairline) solid var(--sidebar-border);
  background: var(--sidebar); color: var(--sidebar-foreground); }
.app-sidebar-brand { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); padding: var(--s-1) var(--s-2); }
.app-sidebar-search { display: flex; align-items: center; gap: var(--s-2); width: 100%;
  padding: var(--s-2); border: var(--hairline) solid var(--input); border-radius: var(--radius);
  background: var(--background); color: var(--muted-foreground);
  font: inherit; font-size: var(--fs-sm); text-align: start; }
.app-sidebar-search kbd { margin-inline-start: auto; }
.app-sidebar-group { display: grid; gap: var(--s-1); }
.app-sidebar-heading { padding: 0 var(--s-2) var(--s-1); }
.app-sidebar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--s-1) / 2); }
.app-sidebar-link { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: calc(var(--s-1) * 7.5); padding: 0 var(--s-2); border-radius: var(--r-1); text-decoration: none;
  font-size: var(--fs-ui); font-weight: 500; color: var(--muted-foreground); }
.app-sidebar-title { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.app-sidebar-link:hover { background: var(--hover); color: var(--sidebar-foreground); }
.app-sidebar-link[aria-current="page"] { background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground); }
.app-sidebar-count { color: var(--muted-foreground); font-family: var(--font-mono);
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.app-sidebar-link[aria-current="page"] .app-sidebar-count { color: inherit; opacity: .7; }
.app-topbar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; min-height: calc(var(--s-1) * 12); padding: var(--s-1) var(--s-4);
  border-bottom: var(--hairline) solid var(--border); }
.app-topbar-where { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.app-topbar-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.app-topbar-trigger { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2);
  border: var(--hairline) solid var(--border); border-radius: var(--radius);
  background: var(--background); color: var(--foreground); font: inherit; font-size: var(--fs-sm); }
.app-topbar-organization { font-size: var(--fs-sm); }
.app-avatar { flex: 0 0 auto; width: calc(var(--s-1) * 5); height: calc(var(--s-1) * 5); border-radius: 50%;
  display: grid; place-items: center; background: var(--shade-9); color: var(--shade-0);
  font-size: var(--fs-xs); font-weight: 600; }
.app-avatar-large { width: var(--s-6); height: var(--s-6); font-size: var(--fs-md); }
.app-env-badge { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-badge);
  text-transform: uppercase; border: var(--hairline) solid var(--shade-9); border-radius: var(--radius);
  padding: var(--s-1) var(--s-2); white-space: nowrap; }
.app-env-badge:not([data-env="production"]) { border-style: dashed; color: var(--muted-foreground); }
.app-env-badge-mini { font-size: var(--fs-xs); padding: var(--s-1); }
.app-identity { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2); }
.app-identity-who { display: grid; gap: var(--s-1); min-width: 0; }
.app-identity-who .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge[data-kind="mono"] { font-family: var(--font-mono); font-size: var(--fs-xs); }
.translated-missing-dot { color: var(--shade-danger); margin-inline-start: var(--s-1); }
.app-prefrow { display: grid; gap: var(--s-2); padding: var(--s-2); }
.app-breadcrumbs { min-width: 0; }
.app-breadcrumb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: var(--s-2); font-size: var(--fs-sm); color: var(--muted-foreground); }
.app-breadcrumb-list li { display: flex; gap: var(--s-2); align-items: center; }
.app-breadcrumbs [aria-current="page"] { color: var(--foreground); font-weight: 600; }
.app-statusbar { grid-row: 2 / 3; grid-column: 1 / -1; display: flex; align-items: center;
  justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-2) var(--s-4);
  border-top: var(--hairline) solid var(--border); background: var(--muted);
  color: var(--muted-foreground); font-family: var(--font-mono); font-size: var(--fs-xs); }
.app-statusbar-cell { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.app-chain { display: inline-flex; align-items: center; gap: var(--s-1); }
.app-chain-dot { width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--shade-9); }
.app-chain[data-chain="broken"] .app-chain-dot { background: var(--shade-danger); }
.app-chain[data-chain="unknown"] .app-chain-dot { background: var(--shade-4); }
.app-nav-toggle, .app-nav-close, .app-nav-scrim { display: none; }
/* Without a session, the shell itself carries the centred sign-in card's width. */
body.app-centered .app-shell { width: min(calc(var(--s-7) * 8), calc(100vw - var(--s-6))); min-height: 0; }
body.app-centered .app-login { width: 100%; }
.app-main-narrow { max-width: calc(var(--s-7) * 16); }
.app-login { width: min(calc(var(--s-7) * 8), calc(100% - var(--s-6))); }
.app-grid, .app-record { display: grid; grid-template-columns: minmax(0, 2fr) minmax(calc(var(--s-8) * 4), 1fr);
  gap: var(--s-5); align-items: start; }
.app-record-head { display: grid; gap: var(--s-2); padding-bottom: var(--s-3); margin-bottom: var(--s-4);
  border-bottom: var(--hairline) solid var(--border); }
.app-record-headline { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.app-record-gap { flex: 1; }
.app-record-subtitle { margin: 0; font-size: var(--fs-sm); color: var(--muted-foreground); }
.app-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); margin: 0; }
.app-overview .app-field { padding: 0; }
.app-overview dd { margin: 0; }
@media (max-width: 860px) { .app-overview { grid-template-columns: 1fr; } }
.app-record-version { font-size: var(--fs-xs); color: var(--muted-foreground); }
.app-record-back { margin: var(--s-5) 0 0; }
.app-timeline { display: grid; gap: var(--s-3); }
.app-timeline > header { flex-wrap: wrap; }
.app-timeline-filter { flex: 0 1 auto; gap: var(--s-2); justify-content: flex-start; }
.app-timeline-foot { justify-content: flex-end; }
.app-timeline-head { flex-wrap: wrap; gap: var(--s-3); }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li { display: grid; grid-template-columns: var(--s-4) minmax(0, 1fr); gap: var(--s-3);
  padding-bottom: var(--s-4); position: relative; }
.timeline li::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--foreground); margin-top: 6px; }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 3px; top: 16px;
  bottom: 0; width: var(--hairline); background: var(--border); }
.app-timeline-body { display: grid; gap: var(--s-1); min-width: 0; }
.timeline .who { font-size: var(--fs-sm); }
.timeline .who a { color: inherit; }
.timeline .app-timeline-diff { justify-content: flex-start; gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--fs-sm); overflow-wrap: anywhere; }
.app-fields { display: grid; grid-template-columns: 1fr 1fr; }
.app-field { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-1); min-width: 0; }
.app-field-value { font-size: var(--fs-md); overflow-wrap: anywhere; }
.app-field:has(.attr-sheet) { grid-column: 1 / -1; }
.attr-sheet { display: grid; gap: var(--s-4); }
.attr-tools { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.attr-tools .searchbox { flex: 1; min-width: calc(var(--s-4) * 11); max-width: calc(var(--s-4) * 21); }
.attr-summary { margin-left: auto; font-size: var(--fs-sm); }
.attr-group { border: var(--hairline) solid var(--border); border-radius: var(--radius-lg, var(--radius)); background: var(--background); overflow: hidden; }
.attr-group > header { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: var(--hairline) solid var(--border); background: var(--card); }
.attr-group > header h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.attr-group > header .mono { font-size: var(--fs-xs); }
.attr-scroll { overflow-x: auto; }
table.grid.attr-table { min-width: 0; }
table.grid.attr-table th { background: transparent; }
table.grid.attr-table tbody tr { cursor: default; }
table.grid.attr-table td.attr-key { width: 32%; color: var(--muted-foreground); white-space: normal; }
table.grid.attr-table td:nth-child(2) { width: 24%; white-space: normal; }
table.grid.attr-table td.attr-controls { width: 1%; text-align: right; }
.attr-row[data-missing] td, .attr-row[data-missing] .attr-value { color: var(--muted-foreground); font-weight: 400; }
.attr-value { font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.attr-src { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--muted-foreground); min-width: 0; }
.attr-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.attr-cls { font: 500 var(--fs-xs)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--foreground); }
.attr-controls [data-override] { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s-2); }
@media (max-width: 640px) { table.grid.attr-table td.attr-key { width: auto; } }
.attr-evidence { display: grid; gap: var(--s-4); }
.attr-evidence-winner { display: grid; gap: var(--s-1); padding: var(--s-3); border: var(--hairline) solid var(--border); border-radius: var(--radius); }
.attr-evidence-winner .attr-value { font-size: var(--fs-lg); }
.attr-evidence-list { list-style: none; margin: 0; padding: 0; border: var(--hairline) solid var(--border); border-radius: var(--radius); }
.attr-evidence-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-bottom: var(--hairline) solid var(--border); }
.attr-evidence-list li:last-child { border-bottom: 0; }
.attr-evidence-list li > div { display: grid; gap: var(--s-1); min-width: 0; }
.attr-evidence-list li[data-evidence-status="ineligible"] .attr-value { color: var(--muted-foreground); font-weight: 400; }
.attr-row .attr-evidence-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; text-align: start; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.app-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.app-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.app-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.field { display: grid; gap: var(--s-2); }
.field-inline { display: flex; align-items: center; gap: var(--s-2); }
.muted { color: var(--muted-foreground); font-size: var(--fs-md); }
/* Basecoat only supplies a `.field > .sr-only` override, so the shell owns the utility. */
.sr-only { position: absolute; width: var(--hairline); height: var(--hairline); margin: calc(-1 * var(--hairline)); padding: 0;
  overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%); }
/* Alpine strips the attribute once it initializes; a control that is
   meaningless without the runtime stays hidden until then. */
[x-cloak] { display: none !important; }
.empty { color: var(--muted-foreground); padding: var(--s-4) 0; }
.overview-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--s-7) * 4), 1fr)); gap: var(--s-4); }
.overview-tile { padding: var(--s-4); }
.overview-tile a { display: grid; gap: var(--s-2); text-decoration: none; }
.overview-count { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.overview-sparkline { block-size: calc(var(--s-1) * 7); inline-size: 100%; }
.overview-sparkline polygon { fill: var(--secondary); }
.overview-sparkline polyline { fill: none; stroke: var(--foreground); stroke-width: var(--stroke); }
@media (max-width: 1100px) {
  .app-record { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .app-fields { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .app-grid { grid-template-columns: 1fr; }
  .app-topbar, .app-main { padding-left: var(--s-4); padding-right: var(--s-4); }
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  /* With Alpine absent nothing can open a drawer, so the sidebar stays in the
     page where it is still reachable. `[data-nav]` is the attribute the shell
     binds on init: its presence, not the viewport, is what says the drawer
     works. */
  .app-sidebar { position: static; max-height: none; border-right: 0;
    border-bottom: var(--hairline) solid var(--sidebar-border); }
  .app-shell[data-nav] .app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: var(--z-drawer);
    width: 78%; max-width: calc(var(--s-6) * 10); max-height: none; border-right: var(--hairline) solid var(--sidebar-border);
    border-bottom: 0; visibility: hidden; transform: translateX(-100%); transition: transform var(--dur) var(--ease); }
  .app-shell[data-nav="open"] .app-sidebar { visibility: visible; transform: none; }
  .app-shell[data-nav] .app-nav-toggle { display: grid; place-items: center; flex: 0 0 auto;
    width: calc(var(--s-1) * 7); height: calc(var(--s-1) * 7); border: var(--hairline) solid var(--border);
    border-radius: var(--radius); background: var(--background); color: inherit; }
  .app-shell[data-nav] .app-nav-toggle span { display: block; position: relative;
    width: var(--s-4); height: var(--stroke); background: currentColor; }
  .app-shell[data-nav] .app-nav-toggle span::before,
  .app-shell[data-nav] .app-nav-toggle span::after { content: ""; position: absolute; left: 0;
    width: var(--s-4); height: var(--stroke); background: currentColor; }
  .app-shell[data-nav] .app-nav-toggle span::before { top: calc(-1 * var(--s-1)); }
  .app-shell[data-nav] .app-nav-toggle span::after { top: var(--s-1); }
  /* Outside the panel, over the scrim, so it stays reachable at any panel
     width — and it is the drawer's first tab stop, which is where focus lands
     on open. */
  .app-shell[data-nav] .app-nav-close { display: grid; place-items: center;
    width: var(--s-5); height: var(--s-5); border-radius: 50%; border: var(--hairline) solid var(--border);
    background: var(--background); color: var(--foreground); font-size: var(--fs-sm); }
  .app-shell[data-nav="open"] .app-nav-scrim { display: block; position: fixed; inset: 0;
    z-index: var(--z-scrim); background: var(--scrim); }
  .app-breadcrumb-list li:not(:last-child) { display: none; }
}
@media (max-width: 480px) {
  .app-main { padding: var(--s-3); }
  .app-statusbar { font-size: var(--fs-xs); padding: var(--s-2) var(--s-3); }
  table th, table td { padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); }
  .app-env-badge { padding: var(--s-1); }
}
#list-rows:has([id^="list-row-"]) #list-empty { display: none; }
.cards > #list-empty { grid-column: 1 / -1; }
.amount-row, .field-chips { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.text-list-input { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.field-chips .combobox-chip, .text-list-input .combobox-chip { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--muted); font-size: var(--fs-sm); }
.combobox-chip-remove { min-width: var(--s-5); min-height: var(--s-5); color: var(--foreground); cursor: pointer; }
.combobox-chip-remove:focus-visible, .combobox [data-clear]:focus-visible { outline: var(--focus) solid var(--ring); outline-offset: var(--focus); }
.combobox { width: calc(var(--s-1) * 66); max-width: 100%; }
.combobox [data-clear] { margin-inline-start: auto; cursor: pointer; }
.combobox-panel { display: block; padding: 0; overflow-y: auto; }
.combobox-panel [role="listbox"] { max-height: calc(var(--s-6) * 8); }
.combobox-label { display: grid; flex: 1; min-width: 0; text-align: start; }
.combobox-label small { overflow: hidden; text-overflow: ellipsis; }
.combobox-foot { display: flex; justify-content: center; border-top: var(--hairline) solid var(--border); padding: var(--s-1); }
.date-range { flex-wrap: wrap; max-width: 100%; }
.date-range .input { width: calc(var(--s-6) * 5); min-width: 0; }
.period-editor, .period-filter { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.period-editor .field-inline, .period-filter .field-inline { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.period-editor .input, .period-filter .input { min-width: 0; max-width: 100%; }
.amount-row .num { width: calc(var(--s-6) * 5); text-align: right; }
.tabular, .num { font-variant-numeric: tabular-nums; }
.check-glyph { font-weight: 700; }
.check-glyph.no { color: var(--muted-foreground); }
.switch { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.switch input[type="checkbox"] { position: absolute; width: var(--hairline); height: var(--hairline); opacity: 0; }
.switch .rail { width: calc(var(--s-6) + var(--s-1)); height: var(--s-5); border-radius: var(--r-3); border: var(--hairline) solid var(--border); background: var(--muted); }
.switch .rail::after { content: ""; display: block; width: var(--s-4); height: var(--s-4); margin: calc(var(--s-1) - var(--hairline)); border-radius: 50%; background: var(--background); border: var(--hairline) solid var(--border); transition: transform var(--dur) var(--ease); }
.switch input:checked + .rail { background: var(--primary); border-color: var(--primary); }
.switch input:checked + .rail::after { transform: translateX(var(--s-3)); background: var(--primary-foreground); border-color: transparent; }
.switch input:focus-visible + .rail { outline: var(--focus) solid var(--ring); outline-offset: var(--focus); }
.switch:has(input:disabled) { cursor: not-allowed; }
.switch input:disabled + .rail { border-style: dashed; border-color: var(--muted-foreground); }
.switch input:disabled:checked + .rail { opacity: .6; border-style: solid; }
/* Native dialogs own the top layer. Set display only while [open], or closed dialogs paint. */
.boxdialog { z-index: var(--z-modal); width: min(var(--w-dialog), calc(100% - var(--s-6))); margin: auto; background: var(--popover);
  color: var(--popover-foreground); border: none; border-radius: var(--radius-xl);
  padding: var(--s-5); box-shadow: var(--shadow-3); }
.boxdialog[open] { display: grid; gap: calc(var(--s-1) * 5); white-space: normal; overflow-wrap: anywhere; }
.boxdialog > * { min-width: 0; }
.boxdialog::backdrop { background: var(--scrim); }
.boxdialog.confirm header { text-align: center; display: grid; gap: var(--s-2); justify-items: center; }
.boxdialog.confirm .icon { width: calc(var(--s-2) * 5); height: calc(var(--s-2) * 5); border-radius: 50%;
  background: color-mix(in oklab, var(--shade-danger) 14%, transparent); color: var(--shade-danger);
  display: grid; place-items: center; font-size: var(--fs-lg); margin-bottom: var(--s-1); }
:is(.boxdialog, .drawerbox) header h2 { font-size: var(--fs-lg); font-weight: 600; }
.boxdialog header p { font-size: var(--fs-sm); color: var(--muted-foreground); line-height: var(--leading); }
.boxdialog footer { display: flex; gap: var(--s-2); justify-content: flex-end; }
.boxdialog.confirm footer { justify-content: center; }
/* Files tab: one row per file, a thumbnail, its facts and its actions. */
.files { list-style: none; margin: 0; padding: 0; display: grid; }
.file { display: grid; grid-template-columns: calc(var(--s-6) * 2) minmax(0, 1fr) auto; gap: var(--s-3);
  align-items: center; padding: var(--s-3) 0; border-top: var(--hairline) solid var(--border); }
.file:first-child { border-top: 0; }
.file-thumb { width: calc(var(--s-6) * 2); height: calc(var(--s-6) * 2); display: grid; place-items: center; overflow: hidden;
  border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--muted);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-badge); color: var(--muted-foreground); }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-meta { display: grid; gap: var(--s-1); min-width: 0; overflow-wrap: anywhere; }
.file-hash { font-family: var(--font-mono); font-size: var(--fs-xs); }
@media (max-width: 720px) { .file { grid-template-columns: calc(var(--s-6) * 2) minmax(0, 1fr); } .file .app-actions { grid-column: 1 / -1; } }
/* The viewer: a native dialog filling the window, the stage taking the room the bar and strip leave. */
.viewer { z-index: var(--z-modal); width: min(calc(var(--s-8) * 14), calc(100% - var(--s-4))); height: calc(100dvh - var(--s-5));
  max-width: none; max-height: none; margin: auto; padding: var(--s-3); background: var(--popover); color: var(--popover-foreground);
  border: none; border-radius: var(--radius-xl); box-shadow: var(--shadow-3); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--s-3); }
.viewer::backdrop { background: var(--scrim); }
.viewer-bar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.viewer-title { overflow-wrap: anywhere; }
.viewer-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; min-height: 0; }
.viewer-frame { height: 100%; min-height: 0; overflow: auto; display: grid; place-items: center; background: var(--muted);
  border-radius: var(--radius); }
.viewer-image { width: calc(var(--viewer-zoom, 1) * 100%); height: calc(var(--viewer-zoom, 1) * 100%); object-fit: contain; }
.viewer-pdf { width: 100%; height: 100%; border: 0; }
.viewer-strip { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); overflow-x: auto; }
.viewer-strip button { width: calc(var(--s-6) * 2); height: calc(var(--s-6) * 2); padding: 0; display: grid; place-items: center; overflow: hidden;
  border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--muted); color: var(--muted-foreground);
  font-size: var(--fs-xs); text-transform: uppercase; }
.viewer-strip button[aria-current="true"] { outline: var(--focus) solid var(--ring); outline-offset: var(--hairline); }
.viewer-strip img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .viewer { padding: var(--s-2); } .viewer-stage { grid-template-columns: minmax(0, 1fr); } .viewer-stage > button { display: none; } }
.drawerbox { z-index: var(--z-drawer); width: min(var(--w-drawer), 86vw); height: 100vh; max-height: 100vh; margin: 0 0 0 auto;
  background: var(--popover); color: var(--popover-foreground); border: none; padding: 0;
  box-shadow: var(--shadow-3); }
.drawerbox[open] { display: flex; flex-direction: column; }
.drawerbox::backdrop { background: var(--scrim); }
.drawerbox header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--drawer-pad); border-bottom: var(--hairline) solid var(--border); }
.drawerbox header p { font-size: var(--fs-sm); color: var(--muted-foreground); margin-top: var(--s-1); }
.drawerbox .close { width: var(--s-5); height: var(--s-5); border-radius: var(--radius); border: var(--hairline) solid var(--border);
  display: grid; place-items: center; flex-shrink: 0; color: var(--muted-foreground); background: none; }
.drawerbox section { flex: 1; overflow-y: auto; padding-block: var(--s-4) 0; display: grid; align-content: start; row-gap: var(--s-4);
  grid-template-columns: [full-start] var(--drawer-pad) [content-start] minmax(0, 1fr) [content-end] var(--drawer-pad) [full-end]; }
/* The form's children join the section's grid: the save bar spans the full width, the rest the content column. */
.drawerbox section > form { display: contents; }
.drawerbox section > *, .drawerbox section > form > * { grid-column: content; }
.drawerbox footer { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--drawer-pad);
  border-top: var(--hairline) solid var(--border); }
.toaststack { position: fixed; z-index: var(--z-toast); bottom: calc(var(--s-1) * 5); right: calc(var(--s-1) * 5); width: calc(var(--s-1) * 85);
  max-width: calc(100vw - var(--s-6)); display: grid; gap: var(--s-2); }
.toastcard { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3) var(--s-4);
  border: var(--hairline) solid var(--border); border-radius: var(--radius-lg); background: var(--popover);
  color: var(--popover-foreground); box-shadow: var(--shadow-2); }
.toastcard .icon { width: var(--s-4); height: var(--s-4); border-radius: 50%; display: grid;
  place-items: center; font-size: var(--fs-xs); flex-shrink: 0; margin-top: var(--s-1); }
.toastcard[data-variant="success"] .icon { background: var(--shade-9); color: var(--shade-0); }
.toastcard[data-variant="error"] .icon { background: var(--shade-danger); color: var(--shade-0); }
.toastcard[data-variant="info"] .icon { border: var(--hairline) solid var(--border); color: var(--muted-foreground); }
.toastcard .body { flex: 1; min-width: 0; display: grid; gap: var(--s-1); }
.toastcard .body h2 { font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--tracking-title); }
.toastcard .body p { font-size: var(--fs-sm); color: var(--muted-foreground); }
.toastcard .dismiss { margin-left: auto; flex-shrink: 0; width: var(--s-4); height: var(--s-4);
  display: grid; place-items: center; color: var(--muted-foreground); background: none; border: none; }
.errbox { border: var(--hairline) solid var(--border); border-radius: var(--radius-xl); padding: calc(var(--s-2) * 5) calc(var(--s-1) * 7);
  min-height: calc(var(--s-6) * 10); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--s-2); }
.errbox .code { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted-foreground);
  letter-spacing: var(--tracking-code); }
.errbox h1 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--tracking-title); }
.errbox p { font-size: var(--fs-sm); color: var(--muted-foreground); max-width: 28ch; }
.errbox footer { display: flex; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; justify-content: center; }
.app-map { display: block; width: 100%; max-width: calc(var(--s-6) * 14); height: calc(var(--s-3) * 15);
  border: var(--hairline) solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--muted); }
.app-map-still { pointer-events: none; }
.app-map-note { display: block; max-width: calc(var(--s-6) * 14); }
.map-view .app-map { max-width: none; height: calc(var(--s-3) * 30); }
.map-legend { margin: 0; display: grid; gap: var(--s-2); counter-reset: map-legend; }
.map-legend > div { display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; }
.map-legend dt { font-weight: 600; counter-increment: map-legend; }
.map-legend dt::before { content: counter(map-legend, upper-alpha) " · "; color: var(--muted-foreground); }
.map-legend dd { margin: 0; }
.app-coordinates { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); }
.listview { min-width: 0; }
.listview a.btn:not([data-variant]) { color: var(--primary-foreground); }
.titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.titlebar h2 { font-weight: 650; letter-spacing: -.02em; }
.titlebar h2 + .muted { display: block; margin-top: calc(var(--s-1) / 2); font-size: var(--fs-ui); }
.filterbar { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.searchbox { display: inline-flex; align-items: center; gap: var(--s-2); flex: 1 1 calc(var(--s-6) * 6); min-width: 0; max-width: calc(var(--s-1) * 85); padding-inline-start: var(--s-3);
  border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--background); color: var(--muted-foreground); }
.searchbox:focus-within { outline: var(--focus) solid var(--ring); outline-offset: var(--hairline); }
.searchbox .input { flex: 1; min-width: 0; border: 0; box-shadow: none; background: transparent; }
.searchbox .input:focus-visible { outline: 0; }
.chips { display: inline-flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.chip { font: inherit; font-size: var(--fs-sm); padding: var(--s-1) var(--s-3); border: var(--hairline) solid var(--border); border-radius: var(--s-5);
  background: var(--card); color: var(--foreground); cursor: pointer; }
.chip:hover { background: var(--accent); }
.chip:focus-visible { outline: var(--focus) solid var(--ring); outline-offset: var(--hairline); }
.chip[aria-pressed="true"] { background: var(--secondary); border-color: var(--foreground); font-weight: 600; }
table.grid th .sortbtn { color: inherit; font-weight: 600; text-decoration: none; }
table.grid th .sortbtn:hover { text-decoration: underline; }
.bulkbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-2) var(--s-3);
  border: var(--hairline) solid var(--primary); border-radius: var(--radius);
  background: var(--primary); color: var(--primary-foreground); font-size: var(--fs-sm); }
.bulkbar .eyebrow, .bulkbar .select { color: var(--primary-foreground); }
.tablewrap { position: relative; overflow-x: auto; border: var(--hairline) solid var(--border); border-radius: var(--r-3); background: var(--card); }
table.grid { border-collapse: collapse; width: 100%; min-width: calc(var(--s-2) * 95); font-size: var(--fs-ui); }
table.grid th { text-align: left; padding: calc(var(--s-1) * 2.5) var(--s-3); border-bottom: var(--hairline) solid var(--border);
  background: var(--muted); white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  line-height: 1.2; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); }
table.grid td { padding: calc(var(--s-1) * 2.25) var(--s-3); border-bottom: var(--hairline) solid var(--border); vertical-align: middle; white-space: nowrap; }
table.grid tr:last-child td { border-bottom: 0; }
/* The row is a click target, so it says so — but only where a pointer can
   express that, and never while text is being selected. */
table.grid tbody tr { cursor: pointer; }
table.grid tbody tr:hover td { background: var(--accent); }
/* A host's read-only table has no row to open, and its prose cells wrap. */
table.grid[data-static] td { white-space: normal; }
table.grid[data-static] tbody tr { cursor: auto; }
table.grid[data-static] tbody tr:hover td { background: none; }
table.grid[data-static] td a { color: inherit; font-weight: 600; }
table.grid[data-static] td a:hover { text-decoration: underline; }
.cell-more > summary { cursor: pointer; }
.cell-more[open] > summary { color: var(--muted-foreground); }
.cell-more > p { margin: var(--s-2) 0 0; white-space: pre-line; max-width: 80ch; }
table.grid[data-static] td.act { width: 1%; white-space: nowrap; text-align: right; }
.cell-actions { display: inline-flex; gap: var(--s-2); }
.cell-change { display: inline-flex; align-items: baseline; gap: var(--s-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-change s { color: var(--muted-foreground); }
.cell-change b { font-weight: 600; }
.cell-change-note { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted-foreground); }
.cell-change-note[data-out] { color: var(--shade-danger); }
/* A stage stepper: the stages done read filled, the current one solid, those ahead outlined. */
.stages { display: inline-flex; gap: var(--s-1); }
.stages > span { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-badge); text-transform: uppercase;
  padding: var(--s-1) var(--s-2); border: var(--hairline) solid var(--border); border-radius: var(--radius); color: var(--muted-foreground); }
.stages > span[data-stage="ahead"] { color: var(--shade-4); }
.stages > span[data-stage="done"] { background: var(--shade-2); border-color: var(--shade-2); color: var(--shade-5); }
.stages > span[data-stage="now"] { background: var(--shade-9); color: var(--shade-0); border-color: var(--shade-9); }
.stages > span[data-stage="failed"] { border-color: var(--shade-danger); color: var(--shade-danger); }
/* Headline figures: each value over its label, ruled above. */
.stats { margin: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(calc(var(--s-8) * 2), 1fr)); }
.stats > div { display: flex; flex-direction: column-reverse; gap: var(--s-1); border-top: var(--hairline) solid var(--shade-9); padding-top: var(--s-2); min-width: 0; }
.stats dt { font-size: var(--fs-sm); color: var(--muted-foreground); }
.stats dd { margin: 0; font-size: var(--fs-xl); font-weight: 600; }
/* A segmented bar: each segment as wide as its share, toned like the badges. */
/* Not .progress: basecoat's own progress bar owns that class. */
.pbar-block { display: flex; flex-direction: column; gap: var(--s-2); }
.pbar { display: flex; gap: var(--hairline); height: var(--s-2); border-radius: var(--radius); overflow: hidden; background: var(--shade-2); }
.pbar > i, .pbar-legend i { display: block; background: var(--shade-3); }
.pbar > i { height: 100%; }
.pbar-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--fs-sm); color: var(--muted-foreground); }
.pbar-legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.pbar-legend i { width: var(--s-3); height: var(--s-3); border-radius: var(--r-1); }
.pbar [data-tone="done"], .pbar-legend [data-tone="done"] { background: var(--shade-9); }
.pbar [data-tone="active"], .pbar-legend [data-tone="active"] { background: var(--shade-5); }
.pbar [data-tone="pending"], .pbar-legend [data-tone="pending"] { background: repeating-linear-gradient(45deg, var(--shade-4) 0 var(--s-1), var(--shade-3) var(--s-1) var(--s-2)); }
.pbar [data-tone="hidden"], .pbar-legend [data-tone="hidden"] { background: var(--shade-3); }
.pbar [data-tone="failed"], .pbar-legend [data-tone="failed"] { background: var(--shade-danger); }
.page-gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--s-8) * 2.5), 1fr)); }
.page-gallery-item { display: grid; gap: var(--s-2); color: inherit; text-decoration: none; }
.page-gallery-item img { width: 100%; aspect-ratio: 1 / 1.414; object-fit: contain; background: var(--muted);
  border: var(--hairline) solid var(--border); border-radius: var(--radius); }
.page-gallery-item:hover img { border-color: var(--ring); }
.page-gallery-item:focus-visible { outline: var(--focus) solid var(--ring); outline-offset: var(--hairline); border-radius: var(--radius); }
.page-gallery-caption { display: grid; gap: var(--s-1); font-size: var(--fs-sm); }
table.grid tbody tr[data-state="selected"] td { background: var(--secondary); }
table.grid td.check, table.grid th.check { width: calc(var(--s-3) * 3); padding-right: 0; }
table.grid td.menu, table.grid th.menu { width: calc(var(--s-2) * 5); text-align: right; white-space: nowrap; }
table.grid td.menu > .btn { margin-inline-end: var(--s-1); }
table.grid td.title a { color: inherit; font-weight: 600; }
/* A tree stays the list component: only its title cell gains a disclosure
   control and a depth-sized gutter.  Logical margins make the hierarchy read
   correctly in both writing directions. */
.tree-indent { display: inline-block; width: calc(var(--tree-depth) * var(--s-1) * 5); }
.tree-toggle { display: inline-grid; place-items: center; width: calc(var(--s-1) * 5); height: calc(var(--s-1) * 5);
  margin-inline-end: var(--s-1); border: 0; border-radius: var(--r-1); background: transparent;
  color: var(--muted-foreground); cursor: pointer; }
.tree-toggle[aria-expanded="true"] > span { transform: rotate(90deg); }
.tree-toggle:disabled { visibility: hidden; }
.tree-toggle:focus-visible { outline: var(--focus) solid var(--ring); outline-offset: var(--hairline); }
tr[hidden] { display: none; }
.rowmenu { display: inline-block; }
.rowmenu .popover > .btn { min-width: calc(var(--s-1) * 7); padding-inline: var(--s-2); }
/* Placed by overlay.js from the trigger's rectangle: fixed, so no overflow clips it. */
.popover { display: inline-block; }
.popover-panel { position: fixed; z-index: var(--z-dropdown); min-width: calc(var(--s-1) * 53); display: grid; gap: var(--s-1);
  padding: var(--s-1); border: var(--hairline) solid var(--border); border-radius: var(--radius);
  background: var(--popover); color: var(--popover-foreground); font-size: var(--fs-sm);
  box-shadow: var(--shadow-2); text-align: start; overflow-y: auto; }
.popover-panel[role="dialog"] { padding: var(--s-4); min-width: calc(var(--s-1) * 59); }
.menuitem { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%;
  padding: var(--s-2); border: 0; border-radius: var(--r-1); background: transparent; color: inherit; font: inherit;
  text-align: start; text-decoration: none; cursor: pointer; }
.menuitem:hover:not([disabled]), .menuitem[aria-current="true"] { background: var(--accent); }
.menuitem:focus-visible { outline: var(--focus) solid var(--ring); outline-offset: calc(-1 * var(--focus)); }
.menuitem[data-tone="destructive"] { color: var(--destructive); }
.menuitem[disabled] { color: var(--muted-foreground); opacity: .6; cursor: default; }
.menuitem-text { display: grid; gap: var(--s-1); }
.menuitem-note { font-size: var(--fs-xs); color: var(--muted-foreground); line-height: var(--leading); white-space: normal; }
.menusep { border-top: var(--hairline) solid var(--border); margin: var(--s-1) 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s-4) * 14), 1fr)); gap: var(--s-3); }
.gcard { display: grid; gap: var(--s-3); padding: var(--s-3); border: var(--hairline) solid var(--border); border-radius: var(--radius);
  background: var(--card); cursor: pointer; align-content: start; }
.gcard:hover { background: var(--accent); }
.gcard[data-state="selected"] { background: var(--secondary); border-color: var(--foreground); }
.gcard-media { display: grid; place-items: center; height: calc(var(--s-4) * 6); border-radius: var(--r-1);
  background: var(--muted); color: var(--muted-foreground); font-size: var(--fs-lg); font-weight: 600; letter-spacing: .04em; }
.gcard-media img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.preview-media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--hairline) solid var(--border); border-radius: var(--radius); background: var(--muted); }
td.title:has(> .tn) { white-space: nowrap; }
.tn { display: inline-block; width: calc(var(--s-1) * 11); height: var(--s-6); object-fit: cover; vertical-align: middle; margin-right: var(--s-3);
  border: var(--hairline) solid var(--border); border-radius: var(--r-1); background: var(--muted); }
.gcard-body { display: grid; gap: var(--s-2); }
.gcard-head { display: flex; align-items: center; gap: var(--s-2); }
.gcard-head .rowmenu { margin-left: auto; }
.gcard .title { margin: 0; font-size: var(--fs-md); }
.gcard .title a { color: inherit; font-weight: 600; }
.gcard-fields { display: grid; gap: var(--s-1); margin: 0; font-size: var(--fs-sm); }
.gcard-fields > div { display: flex; justify-content: space-between; gap: var(--s-2); }
.gcard-fields dt { color: var(--muted-foreground); }
.gcard-fields dd { margin: 0; text-align: end; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  color: var(--muted-foreground); font-size: var(--fs-sm); }
.pager .count { font-variant-numeric: tabular-nums; }
.pager .btn[aria-current="true"] { background: var(--secondary); border-color: var(--foreground); }
.emptystate { padding: calc(var(--s-2) * 5) var(--s-5); justify-items: center; text-align: center; white-space: normal; }
.emptystate .muted { max-width: 46ch; }
@media (max-width: 30rem) {
  table.grid { min-width: 0; display: block; }
  table.grid thead { position: absolute; width: var(--hairline); height: var(--hairline); margin: calc(-1 * var(--hairline)); overflow: hidden; clip-path: inset(50%); }
  table.grid tbody, table.grid tr, table.grid td { display: block; }
  table.grid tr { position: relative; padding: var(--s-2) var(--s-7) var(--s-2) calc(var(--s-3) * 3); border-bottom: var(--hairline) solid var(--border); }
  table.grid tr:last-child { border-bottom: 0; }
  table.grid td { padding: var(--s-1) 0; border: 0; white-space: normal; }
  table.grid td[data-label]::before { content: attr(data-label) ": "; color: var(--muted-foreground); }
  table.grid td.title { font-size: var(--fs-md); padding-bottom: var(--s-1); }
  table.grid td.title a { display: inline-flex; align-items: center; min-height: var(--s-5); }
  .tree-indent { width: calc(var(--tree-depth) * var(--s-4)); }
  table.grid td.check { position: absolute; left: var(--s-2); top: var(--s-3); padding: 0; }
  table.grid td.menu { position: absolute; right: var(--s-2); top: var(--s-2); padding: 0; }
  .pager { justify-content: flex-start; }
}
.measure { max-width: calc(var(--s-8) * 10); display: grid; gap: calc(var(--s-1) * 5); }
.drawerbox .measure { max-width: none; }
.formlayout { display: grid; gap: var(--s-6); }
.formlayout:has(.formtoc) { grid-template-columns: calc(var(--s-8) * 3) minmax(0, 1fr); align-items: start; }
.formtoc { position: sticky; top: var(--s-4); display: grid; gap: var(--s-2); }
.formtoc ol { list-style: none; display: grid; gap: var(--s-1); padding: 0; }
.formtoc a { color: var(--muted-foreground); font-size: var(--fs-sm); }
.formtoc a:hover { color: var(--foreground); }
.errorlist { list-style: none; display: grid; gap: var(--s-1); padding: 0; font-size: var(--fs-sm); }
.errorlist a { color: var(--destructive); text-decoration: underline; }
.formsection { scroll-margin-top: var(--s-4); }
@media (max-width: 820px) { .formlayout:has(.formtoc) { grid-template-columns: minmax(0, 1fr); } .formtoc { display: none; } }
.formsection { display: grid; gap: var(--s-2); }
.formsection > header { display: grid; gap: var(--s-1); padding-bottom: var(--s-2);
  border-bottom: var(--hairline) solid var(--border); }
.formsection > header h3 { font-size: var(--fs-md); font-weight: 600; }
.fieldstack { display: grid; gap: var(--s-4); }
.field > .label { display: flex; gap: var(--s-1); align-items: baseline; }
.field .req { color: var(--destructive); font-weight: 600; }
.field .help { color: var(--muted-foreground); font-size: var(--fs-sm); }
.field .field-error, .field-error { color: var(--destructive); font-size: var(--fs-sm); }
.field .masked { color: var(--muted-foreground); font-family: var(--font-mono);
  font-size: var(--fs-sm); }
.reqnote { color: var(--muted-foreground); font-size: var(--fs-sm); }
.savebar { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center;
  gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) 0; margin-top: calc(var(--s-1) * 5);
  border-top: var(--hairline) solid var(--border); background: var(--background); }
.savebar .grow { flex: 1; }
.savebar .dirty { color: var(--foreground); font-size: var(--fs-sm); font-weight: 600; }
.drawerbox section > form > .savebar { grid-column: full; margin-top: 0; padding-inline: var(--drawer-pad); background: var(--popover); }
.banner { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: var(--hairline) solid var(--border);
  border-radius: var(--radius); background: var(--muted); font-size: var(--fs-sm); }
.banner[data-tone="danger"] { border-color: var(--destructive); }
.banner h3 { font-size: var(--fs-md); font-weight: 600; }
.banner p { color: var(--muted-foreground); font-size: var(--fs-sm); line-height: var(--leading); }
.conflict { border: var(--hairline) solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--card); }
.conflict > header { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-2) var(--s-4);
  border-bottom: var(--hairline) solid var(--border); background: var(--muted); }
.conflict table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.conflict th, .conflict td { text-align: left; padding: var(--s-2) var(--s-4);
  border-bottom: var(--hairline) solid var(--border); vertical-align: top; }
.conflict tr:last-child td { border-bottom: 0; }
.conflict td .val { font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.conflict td.pick { width: 1%; white-space: nowrap; }
.conflict .pick .field-inline { font-size: var(--fs-sm); }
@media (max-width: 40rem) {
  .conflict thead { display: none; }
  .conflict tr, .conflict td { display: block; }
  .conflict th, .conflict td { border-bottom: 0; padding: var(--s-2) var(--s-4); }
  .conflict tbody tr { border-bottom: var(--hairline) solid var(--border); padding: var(--s-2) 0; }
  .conflict tbody tr:last-child { border-bottom: 0; }
}
.ask-main { width: 100%; padding: 0; flex: 1; min-height: 0; }
kernel-ask { display: grid; grid-template-columns: calc(var(--s-7) * 5) minmax(0, 1fr); height: calc(100dvh - calc(var(--s-4) * 7)); min-height: calc(var(--s-6) * 16); }
.ask-history { border-right: var(--hairline) solid var(--border); padding: var(--s-4); overflow: auto; }
.ask-history header, .ask-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.ask-history h1 { font-size: var(--fs-lg); }
.ask-history nav { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.ask-history nav a { padding: var(--s-2); border-radius: var(--radius); text-decoration: none; overflow-wrap: anywhere; font-size: var(--fs-md); }
.ask-history nav a:hover, .ask-history nav a[aria-current] { background: var(--muted); }
.ask-thread { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.ask-heading { padding: var(--s-4) var(--s-5); border-bottom: var(--hairline) solid var(--border); align-items: start; }
.ask-heading h2 { font-size: var(--fs-lg); overflow-wrap: anywhere; }
.ask-manage { font-size: var(--fs-sm); max-width: calc(var(--s-6) * 11); }
.ask-manage form { display: grid; gap: var(--s-2); padding: var(--s-2) 0; }
.ask-scroll { flex: 1; overflow: auto; min-height: 0; padding: var(--s-5); }
#assistant-transcript { max-width: calc(var(--s-6) * 26); margin: 0 auto; }
.ask-turn { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); min-width: 0; }
.ask-question { justify-self: end; padding: var(--s-4); background: var(--muted); border-radius: var(--radius); max-width: 90%; font-size: var(--fs-lg); white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-welcome { padding: var(--s-7) var(--s-4); display: grid; gap: var(--s-4); text-align: center; }
.assistant-sources { padding: var(--s-4); display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.assistant-sources h4 { margin: 0; font-weight: 600; }
.assistant-sources blockquote { margin: var(--s-2) 0 0; color: var(--muted-foreground); overflow-wrap: anywhere; }
.ask-steps { display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
.ask-steps pre { padding: var(--s-3); background: var(--muted); max-height: calc(var(--s-6) * 10); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-answer { line-height: var(--leading-prose); overflow-wrap: anywhere; overflow-x: auto; }
.assistant-answer p, .assistant-answer ul, .assistant-answer ol, .assistant-answer pre { margin: var(--s-2) 0 var(--s-4); }
.assistant-answer ul, .assistant-answer ol { padding-left: var(--s-5); }
.assistant-answer ul { list-style: disc; }
.assistant-answer ol { list-style: decimal; }
.assistant-answer table { border-collapse: collapse; width: 100%; font-size: var(--fs-md); }
.assistant-answer th, .assistant-answer td { border: var(--hairline) solid var(--border); padding: var(--s-2); text-align: left; }
.assistant-answer th { background: var(--muted); }
.assistant-answer pre { overflow-x: auto; padding: var(--s-4); background: var(--muted); }
.ask-citations { padding-left: var(--s-5); list-style: decimal; font-size: var(--fs-sm); }
.ask-status { font-size: var(--fs-sm); color: var(--muted-foreground); }
.ask-feedback { font-size: var(--fs-sm); }
.ask-feedback fieldset { display: flex; flex-wrap: wrap; gap: var(--s-3); border: 0; padding: 0; }
.ask-feedback textarea { width: 100%; }
.ask-composer { padding: var(--s-4) var(--s-5); border-top: var(--hairline) solid var(--border); display: grid; gap: var(--s-3); }
.ask-composer textarea { width: 100%; resize: vertical; max-height: calc(var(--s-7) * 4); }
.ask-controls { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.ask-controls .select { width: auto; max-width: calc(var(--s-7) * 4); }
.ask-deep { margin-right: auto; white-space: nowrap; }
.ask-thread > [role] { padding: var(--s-2) var(--s-5); }
.ask-thread [role=alert] { color: var(--destructive); }
@media (max-width: 1100px) {
  kernel-ask { grid-template-columns: calc(var(--s-4) * 11) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  kernel-ask { display: flex; flex-direction: column; height: calc(100dvh - calc(var(--s-4) * 11)); min-height: calc(var(--s-6) * 16); }
  .ask-history { border-right: 0; border-bottom: var(--hairline) solid var(--border); padding: var(--s-3); flex-shrink: 0; }
  .ask-history nav { display: flex; overflow-x: auto; margin-top: var(--s-2); max-height: calc(var(--s-6) * 2); }
  .ask-history nav a { white-space: nowrap; max-width: calc(var(--s-6) * 7); text-overflow: ellipsis; overflow: hidden; flex-shrink: 0; }
  .ask-history nav p { font-size: var(--fs-sm); }
  .ask-thread { flex: 1; }
  .ask-heading, .ask-composer, .ask-scroll { padding: var(--s-3); }
  .ask-heading { flex-wrap: wrap; }
  .ask-controls { gap: var(--s-2); font-size: var(--fs-sm); }
  .ask-controls .select { max-width: calc(var(--s-4) * 7); }
}
kernel-ask input[type="checkbox"], kernel-ask input[type="radio"] { width: var(--s-5); height: var(--s-5); flex-shrink: 0; }
.ask-feedback label, .ask-deep, [data-estimate] label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--s-6); }
.ask-steps summary, .ask-manage summary { cursor: pointer; min-height: var(--s-5); }
.ask-citations a, .assistant-sources a { display: inline-block; min-height: var(--s-5); }
/* Roles and permissions: a declared capability per row, a role per column. The
   capability column stays put while the roles scroll under it. */
table.permissions-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-sm); }
.permissions-matrix :is(th, td) { padding: var(--s-2) var(--s-3); border-bottom: var(--hairline) solid var(--border);
  text-align: center; vertical-align: middle; white-space: nowrap; }
.permissions-matrix thead th { background: var(--muted); font-weight: 600; }
.permissions-matrix :is(thead th:first-child, th[scope="row"]) { position: sticky; inset-inline-start: 0; z-index: var(--z-sticky);
  text-align: start; border-inline-end: var(--hairline) solid var(--border); }
.permissions-matrix th[scope="row"] { background: var(--card); font-weight: 400; white-space: normal; min-width: calc(var(--s-7) * 3); }
.permissions-matrix tbody tr:last-child :is(th, td) { border-bottom: 0; }
.permissions-matrix tbody + tbody .permissions-group th { border-top: var(--hairline) solid var(--border); }
.permissions-group th { text-align: start; background: var(--muted); font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); }
.permissions-feature { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted-foreground);
  overflow-wrap: anywhere; }
.permissions-effective { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: var(--hairline) solid var(--border);
  border-radius: var(--radius); background: var(--card); }
.permissions-effective h3 { font-size: var(--fs-md); font-weight: 600; }
.permissions-hidden { display: grid; gap: var(--s-2); margin: 0; font-size: var(--fs-sm); }
.permissions-hidden > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.permissions-hidden dt { font-weight: 600; }
.permissions-hidden dd { margin: 0; overflow-wrap: anywhere; }
.permissions-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.permissions-inline > .field { flex: 0 1 calc(var(--s-7) * 6); }
.permissions-inline :is(.select, .input) { width: 100%; }
/* The import flow: a non-interactive step indicator and the review's counts. */
.import-steps { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.import-steps li { padding: var(--s-1) var(--s-3); border: var(--hairline) solid var(--border); border-radius: var(--s-5);
  font-size: var(--fs-sm); color: var(--muted-foreground); }
.import-steps li[aria-current="step"] { background: var(--secondary); border-color: var(--foreground); color: var(--foreground); font-weight: 600; }
.import-summary { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin: 0; }
.import-summary div { display: grid; gap: var(--s-1); }
.import-summary dt { color: var(--muted-foreground); font-size: var(--fs-sm); }
.import-summary dd { margin: 0; font-size: var(--fs-xl); }