/* components.css: the component library of 07 §2 (tokens only, 07 §0.4). */
:root {
  /* 2.31 avatar colours: 8 muted tokens, each ≥ 4.5:1 against white text */
  --avatar-0: #5B4B8A; --avatar-1: #2F6B5E; --avatar-2: #8A4B3B; --avatar-3: #3E5F8A; --avatar-4: #6B5A2E; --avatar-5: #7A3E62; --avatar-6: #3F6B3A; --avatar-7: #56606B;
}
.glyph.xs { width: 12px; height: 12px; }
.glyph-space { width: 16px; flex: none; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.row { display: flex; align-items: center; gap: var(--s-2); }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font: var(--t-small); }
.mono-small { font: var(--t-mono-small); }
.caps { font: var(--t-caps); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
button { font: inherit; color: inherit; }
kbd { display: inline-flex; align-items: center; height: 18px; padding: 0 var(--s-1); border: 1px solid var(--line); border-radius: var(--r-1); font: var(--t-mono-small); color: var(--ink-2); background: var(--surface); }
.btn kbd { margin-left: var(--s-1); }
.hidden { display: none !important; }

/* 2.1 buttons (the rest in shell.css) */
.btn { white-space: nowrap; user-select: none; position: relative; }
.btn.sm { height: var(--h-sm); padding: 0 10px; gap: 6px; }
.btn.icon.sm { width: var(--h-sm); padding: 0; }
.btn.icon.lg { width: var(--h-lg); }
.btn.primary:active { box-shadow: inset 0 1px 0 rgba(0,0,0,.2); }
.btn.secondary:active, .btn.ghost:active { background: var(--surface-3); }
.btn.danger { background: var(--fail); color: var(--danger-ink); }
.btn.danger:hover { filter: brightness(.92); }
.btn.danger-ghost { background: transparent; color: var(--fail); }
.btn.danger-ghost:hover { background: var(--fail-soft); }
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover { color: var(--ink-3); background: transparent; border-color: var(--line); cursor: not-allowed; filter: none; }
.btn.primary[aria-disabled="true"], .btn.danger[aria-disabled="true"] { background: var(--surface-3); color: var(--ink-2); }
.btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); }
.btn .label { overflow: hidden; text-overflow: ellipsis; }
.split { display: inline-flex; }
.split > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; width: 28px; padding: 0; justify-content: center; border-left: 1px solid color-mix(in srgb, var(--accent-ink) 35%, transparent); }
.split > .btn.secondary:last-child { border-left-color: var(--line-strong); }

/* 2.33 spinner, 2.32 skeleton */
.spinner { display: inline-block; width: 16px; height: 16px; border-radius: var(--r-round); border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
.spinner.xs { width: 10px; height: 10px; border-width: 1.5px; }
.spinner.md { width: 20px; height: 20px; }
.spinner.lg { width: 24px; height: 24px; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { height: 12px; border-radius: var(--r-1); background: var(--surface-2); position: relative; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 20%, transparent), transparent); animation: shimmer 1.2s infinite; }
.skeleton-block { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) 0; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.top-progress { position: fixed; top: var(--topbar-h); left: 0; right: 0; height: 2px; overflow: hidden; z-index: var(--z-shell); pointer-events: none; }
.top-progress::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: var(--accent); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { from { left: -30%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-color: var(--accent); border-style: dotted; }
  .skeleton::after, .top-progress::after { animation: none; }
}

/* 2.28 badge, 2.29 dot, 2.30 pill and chip, 2.31 avatar */
.badge { display: inline-flex; align-items: center; justify-content: center; height: 18px; min-width: 18px; padding: 0 6px; border-radius: var(--r-1); font: var(--t-mono-small); background: var(--surface-3); color: var(--ink); }
.badge.fail { background: var(--fail-soft); color: var(--fail); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.status-pill { white-space: nowrap; }
.status-pill .glyph { width: 14px; height: 14px; }
.status-pill.accent { background: var(--accent-soft); color: var(--accent); }
.status-pill.idle { background: var(--surface-2); color: var(--ink-2); }
.status-pill.outline { background: transparent; border: 1px solid currentColor; }
.status-pill.warn.outline { color: var(--warn); }
.status-pill.ok.outline { color: var(--ok); }
.chip { display: inline-flex; align-items: center; gap: var(--s-1); height: 24px; padding: 0 var(--s-2); border-radius: var(--r-1); background: var(--surface-2); color: var(--ink); font: var(--t-small); border: none; max-width: 100%; }
button.chip { cursor: pointer; }
button.chip:hover { background: var(--surface-3); }
.chip .chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; background: transparent; border-radius: var(--r-1); cursor: pointer; color: var(--ink-2); }
.chip-x:hover { background: var(--surface-3); color: var(--ink); }
.chip.warn { background: var(--warn-soft); color: var(--ink); }
.chips { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.avatar { width: 24px; height: 24px; font: 600 11px/1 var(--font-sans); color: #FFFFFF; flex: none; }
.avatar.lg { width: 32px; height: 32px; font: var(--t-label); }
.topbar .avatar { width: 32px; height: 32px; font: var(--t-label); }

/* 2.26 banner, 2.27 inline message */
.banner .glyph { flex: none; }
.banner.ok { background: var(--ok-soft); }
.view-banner { margin-bottom: var(--s-4); border-radius: var(--r-1); }
.inline-message { display: flex; align-items: flex-start; gap: var(--s-2); color: var(--ink); }
.inline-message > .glyph { margin-top: 2px; }
.inline-message.fail > .glyph { color: var(--fail); }
.inline-message.warn { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.inline-message.warn > .glyph { color: var(--warn); }
.inline-message.info > .glyph { color: var(--info); }
.inline-message.ok { background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.inline-message.ok > .glyph { color: var(--ok); }
.inline-message .btn { flex: none; }

/* 2.34 empty state */
.empty .btn { margin-top: var(--s-2); }
.error-state .glyph { color: var(--fail); }

/* 2.18 tooltip */
.tooltip { position: fixed; z-index: var(--z-popover); max-width: 280px; padding: 6px 8px; border-radius: var(--r-1); background: var(--tooltip-bg); color: var(--surface); font: var(--t-small); pointer-events: none; }

/* 2.19 popover, 2.20 menu */
.popover { position: fixed; z-index: var(--z-popover); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--e-2); padding: var(--s-3); min-width: 240px; max-width: 420px; }
.popover.pop-list { padding: var(--s-1); max-width: 480px; }
.popover:focus { outline: none; }
.menu { position: fixed; z-index: var(--z-popover); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--e-2); padding: var(--s-1); min-width: 200px; max-width: 360px; display: flex; flex-direction: column; }
.menu-item { display: flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-3); border: none; background: transparent; border-radius: var(--r-1); text-align: left; cursor: pointer; font: var(--t-body); color: var(--ink); }
.menu-item:hover, .menu-item:focus { background: var(--surface-2); outline: none; }
.menu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.menu-item.danger { color: var(--fail); }
.menu-item[aria-disabled="true"] { color: var(--ink-3); cursor: not-allowed; }
.menu-kbd { font: var(--t-mono-small); color: var(--ink-2); margin-left: var(--s-4); }
.menu-sep { height: 1px; background: var(--line); margin: var(--s-1) 0; }
.menu-heading { font: var(--t-caps); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: var(--s-2) var(--s-3) var(--s-1); }

/* 2.5 select, 2.7 combobox */
.listbox { display: flex; flex-direction: column; max-height: 320px; overflow: auto; outline: none; }
.option { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: var(--s-1) var(--s-3); border-radius: var(--r-1); cursor: pointer; }
.option.active, .option:hover { background: var(--surface-2); }
.option[aria-selected="true"] { background: var(--accent-soft); }
.option[aria-disabled="true"] { color: var(--ink-3); cursor: not-allowed; }
.option.hint { color: var(--ink-2); cursor: default; font: var(--t-small); }
.option.create { color: var(--accent); }
.opt-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-desc { display: block; font: var(--t-small); color: var(--ink-2); }
.option b { font-weight: 600; }
.select-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); text-align: left; cursor: pointer; width: 100%; }
.select-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-text.placeholder { color: var(--ink-2); }
.fake-check { width: 16px; height: 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r-1); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fake-check.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.combo-box.multi { flex-wrap: wrap; height: auto; min-height: var(--h-md); padding: 2px 28px 2px var(--s-2); gap: var(--s-1); border: 1px solid var(--line-strong); border-radius: var(--r-1); background: var(--surface); }
.combo-box.multi:hover { border-color: var(--ink-2); }
.combo-box.multi:focus-within { border-color: var(--accent); }
.combo-box.multi .input { border: none; flex: 1; min-width: 80px; height: 26px; padding: 0; }
.combo-box.multi .chip { height: 20px; }
.trailing-glyph { position: absolute; right: var(--s-2); color: var(--ink-2); pointer-events: none; }

/* 2.2 inputs */
.field { gap: var(--s-1); min-width: 0; }
.field-label { font: var(--t-label); color: var(--ink); display: flex; align-items: center; gap: var(--s-1); }
.req { color: var(--fail); }
.input-box { position: relative; display: flex; align-items: center; }
.input, .field .input { width: 100%; height: var(--h-md); padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-1); background: var(--surface); color: var(--ink); font: var(--t-body); }
.input.lg { height: var(--h-lg); }
.input.sm { height: var(--h-sm); }
textarea.input { height: auto; min-height: 72px; padding: var(--s-2); resize: vertical; line-height: 20px; }
.input.mono { font: var(--t-mono); }
.input::placeholder { color: var(--ink-2); }
.input:hover { border-color: var(--ink-2); }
.input:focus { border-color: var(--accent); outline: none; }
.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--fail); }
.input[readonly] { background: var(--surface-2); border-color: var(--surface-2); }
.has-leading .input { padding-left: 28px; }
.lead { position: absolute; left: var(--s-2); color: var(--ink-2); }
.input-box .trailing { position: absolute; right: 2px; }
.input-box:has(.trailing) .input { padding-right: 34px; }
.clear-btn { display: none; }
.input-box:hover .clear-btn, .input-box:focus-within .clear-btn { display: inline-flex; }
.input-box:has(.input:placeholder-shown) .clear-btn { display: none; }
.field.number .input { text-align: right; font-variant-numeric: tabular-nums; }
.help { font: var(--t-small); color: var(--ink-2); min-height: 0; display: flex; align-items: center; gap: var(--s-1); }
.help:empty { display: none; }
.help.error { color: var(--fail); }
.help.block { display: block; }

/* 2.10 switch */
.switch-wrap { display: inline-flex; align-items: center; gap: var(--s-2); }
.switch { border: none; background: transparent; padding: 7px 0; cursor: pointer; display: inline-flex; }
.switch-track { position: relative; width: 32px; height: 18px; border-radius: 9px; background: var(--line-strong); transition: background var(--m-fast); display: block; }
.switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--r-round); background: var(--surface); transition: left var(--m-fast); display: flex; align-items: center; justify-content: center; }
.switch[aria-checked="true"] .switch-track { background: var(--accent); }
.switch[aria-checked="true"] .switch-knob { left: 16px; background: #FFFFFF; }
.switch[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }
.switch-label { font: var(--t-body); cursor: pointer; }

/* 2.11 checkbox, 2.12 radio */
.checkbox, .radio-row input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; cursor: pointer; flex: none; }
.check-row, .radio-row { display: inline-flex; align-items: flex-start; gap: var(--s-2); cursor: pointer; min-height: 24px; padding: 2px 0; }
.check-row > .checkbox, .radio-row > input { margin-top: 2px; }
.radio-group { display: flex; flex-direction: column; gap: var(--s-2); }
.radio-group.row { flex-direction: row; gap: var(--s-4); }
.check-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.check-chip { height: var(--h-sm); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-1); background: var(--surface); cursor: pointer; font: var(--t-label); }
.check-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }

/* 2.13 segmented */
.segmented { display: inline-flex; height: 28px; padding: 2px; gap: 2px; background: var(--surface-2); border-radius: var(--r-1); max-width: 100%; }
.segmented .seg { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0 var(--s-2); border: none; border-radius: 3px; background: transparent; color: var(--ink-2); font: var(--t-label); cursor: pointer; white-space: nowrap; }
.segmented .seg:hover { color: var(--ink); }
.segmented .seg[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--e-1); }
.segmented .seg[aria-disabled="true"] { color: var(--ink-3); cursor: not-allowed; }
.segmented.xs { height: 22px; }
.segmented.xs .seg { padding: 0 6px; font: 500 11px/14px var(--font-sans); }
.seg-count { font: var(--t-mono-small); color: var(--ink-2); }

/* 2.14 tabs */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { height: 40px; padding: 0 var(--s-4); border: none; background: transparent; color: var(--ink-2); font: var(--t-label); cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab-panel:focus-visible { outline-offset: -2px; }

/* 2.15 table */
.table-wrap { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); overflow: hidden; }
.table-scroll { overflow: auto; min-height: 0; flex: 1; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--t-body); table-layout: auto; }
.table thead th { position: sticky; top: 0; z-index: 1; height: 36px; background: var(--surface-2); color: var(--ink-2); font: var(--t-label); text-align: left; padding: 0 var(--s-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.th-btn { display: inline-flex; align-items: center; gap: var(--s-1); border: none; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 0; max-width: 100%; }
.th-btn:hover { color: var(--ink); }
.th-text { overflow: hidden; text-overflow: ellipsis; }
.col-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 4px; cursor: col-resize; }
.col-resize:hover { background: var(--line-strong); width: 1px; right: 1px; }
.table thead th { position: sticky; }
.table td { height: 40px; padding: 0 var(--s-3); border-bottom: 1px solid var(--line); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table.dense td { height: 32px; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr[aria-selected="true"] { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.table tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.table tbody tr[data-key] { cursor: pointer; }
.table .col-check { width: 40px; }
.table .col-menu { width: 1%; text-align: right; white-space: nowrap; }
.table tr.empty-row td, .table tr.error-row td { height: auto; white-space: normal; padding: var(--s-4); }
.table tr.empty-row:hover, .table tr.error-row:hover { background: transparent; }
.table tr.drop-target td { box-shadow: inset 0 0 0 2px var(--accent); }
.cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.cell-main { font-weight: 500; }
.cell-sub { display: block; font: var(--t-small); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.bulk-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.bulk-count { font: var(--t-label); margin-right: var(--s-2); }
.table-foot { font: var(--t-small); color: var(--ink-2); }
.table-foot:not(:empty) { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
.loading-more { display: flex; gap: var(--s-2); align-items: center; }

/* 2.16 tree */
.tree { display: flex; flex-direction: column; }
.tree-row { display: flex; align-items: center; gap: var(--s-2); height: 28px; padding-right: var(--s-2); border-radius: var(--r-1); cursor: pointer; color: var(--ink); white-space: nowrap; }
.tree-row:hover { background: var(--surface-2); }
.tree-row.selected { background: var(--accent-soft); }
.tree-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tree-row.drop-target { outline: 2px solid var(--accent); outline-offset: -2px; }
.tree-row.dragging { box-shadow: var(--e-2); }
.tree-chevron { width: 16px; display: inline-flex; justify-content: center; color: var(--ink-2); flex: none; }
.tree-label { overflow: hidden; text-overflow: ellipsis; flex: 1; }

/* 2.17 breadcrumb */
.breadcrumb ol { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0; min-width: 0; }
.breadcrumb li { display: inline-flex; align-items: center; color: var(--ink-2); white-space: nowrap; min-width: 0; }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb .current { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.breadcrumb .sep { color: var(--ink-3); margin: 0 6px; }

/* 2.22 dialog, 2.24 side sheet */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-dialog); display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; }
.dialog { background: var(--surface); border-radius: var(--r-2); box-shadow: var(--e-3); width: 560px; max-width: calc(100vw - 32px); max-height: 85vh; display: flex; flex-direction: column; animation: pop-in var(--m-slow); }
.dialog.sm { width: 400px; }
.dialog.lg { width: 800px; }
.dialog.xl { width: 1000px; height: 80vh; }
.dialog:focus { outline: none; }
.dialog-header { height: 56px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-3) 0 var(--s-5); border-bottom: 1px solid var(--line); }
.dialog-header h2, .sheet-header h2 { font: var(--t-h2); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-body { padding: var(--s-5); overflow: auto; flex: 1; display: flex; flex-direction: column; gap: var(--s-4); }
.dialog-body p { margin: 0; }
.dialog-footer { height: 64px; flex: none; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-5); border-top: 1px solid var(--line); }
@keyframes pop-in { from { transform: scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: 480px; max-width: 100vw; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--e-3); z-index: var(--z-panel); display: flex; flex-direction: column; animation: sheet-in var(--m-slow); }
.sheet.wide { width: 720px; }
.sheet:focus { outline: none; }
.sheet-scrim { padding: 0; }
.sheet-scrim .sheet { z-index: var(--z-dialog); }
.sheet-header { height: 56px; flex: none; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3) 0 var(--s-5); border-bottom: 1px solid var(--line); }
.sheet-header h2 { flex: 1; }
.sheet-body { flex: 1; overflow: auto; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.sheet-footer { flex: none; display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 2.25 toasts */
.toast { align-items: center; }
.toast > .glyph { flex: none; }
.toast.success > .glyph { color: var(--ok); }
.toast.error > .glyph { color: var(--fail); }
.toast.warning > .glyph { color: var(--warn); }
.toast.info > .glyph { color: var(--info); }
.toast-count { color: var(--ink-2); }
.toast-more { align-self: flex-end; height: 28px; padding: 0 var(--s-3); border-radius: var(--r-1); border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: var(--t-label); }

/* sections in content views */
.view-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.view-head h2 { font: var(--t-h1); margin: 0; flex: 1; }
.filter-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.filter-row .field { flex-direction: row; align-items: center; }
.filter-chips { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-bottom: var(--s-3); align-items: center; }
.section { display: flex; flex-direction: column; gap: var(--s-3); }
.section + .section { margin-top: var(--s-6); }
.section-title { font: var(--t-h2); margin: 0; }
.section-desc { color: var(--ink-2); margin: 0; }
.saved-mark { font: var(--t-small); color: var(--ok); display: inline-flex; align-items: center; gap: var(--s-1); }
.trunc-mid { white-space: nowrap; }

@media (forced-colors: active) {
  .switch-track, .segmented .seg[aria-checked="true"], .table tbody tr[aria-selected="true"] { border: 1px solid CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
}

/* 2.30 contrast fix: at 12 px the type colours on their soft backgrounds stay under 4.5:1 in light
   (ok 4.38, warn on white 4.23). The pill keeps its type colour on the glyph, soft background and
   outline, and writes the text in ink, so status is never colour alone and the text passes AA. */
.status-pill { color: var(--ink) !important; }
.status-pill.ok .glyph { color: var(--ok); }
.status-pill.warn .glyph { color: var(--warn); }
.status-pill.fail .glyph { color: var(--fail); }
.status-pill.accent .glyph { color: var(--accent); }
.status-pill.idle .glyph { color: var(--ink-2); }
.status-pill.warn.outline { border-color: var(--warn); }
.status-pill.ok.outline { border-color: var(--ok); }