/* Local draft reference primitives. Load after the four token stylesheets and Roboto.
   Usage, semantics, supported scope and checks: components/README.md. */
/* Component and reference-surface assignments. The palette stays in theme.css.
   Keep these aliases at every theme boundary so nested .dark regions resolve
   their own colours. Recipes and usage are owned by components/README.md. */
:root, .dark, :root[data-theme="dark"] {
  --status-progress:color-mix(in srgb,var(--color-deep-orange) 80%,var(--color-ink));
  --status-planned:var(--muted-foreground);
  --status-complete:var(--foreground);
  --status-error:var(--destructive);
  --status-out-of-date:var(--foreground);
  --status-tag-progress:color-mix(in oklab,var(--status-progress) 12%,transparent);
  --status-tag-progress-foreground:color-mix(in srgb,var(--status-progress) 88%,var(--color-ink));
  --status-tag-error:color-mix(in oklab,var(--destructive) 12%,transparent);
  --status-tag-out-of-date:color-mix(in oklab,var(--chart-1) 30%,transparent);
  --tooltip-surface:var(--foreground);
  --tooltip-foreground:var(--background);
  --component-footer: color-mix(in oklab, var(--muted) 50%, transparent);
  --link: var(--foreground);
  --canvas: var(--muted);
  --canvas-foreground: var(--foreground);
  --canvas-mark: var(--muted-foreground);
  --selection: var(--accent);
  --selection-foreground: var(--accent-foreground);
  --feedback-neutral: var(--card);
  --feedback-neutral-foreground: var(--card-foreground);
  --warning: var(--card);
  --warning-foreground: var(--card-foreground);
  --warning-icon: var(--card-foreground);
  --error: var(--card);
  --error-foreground: var(--card-foreground);
  --error-icon: var(--destructive);
  /* Fields keep the supplied fills while --input darkens for the field border. */
  --input-fill-base: oklch(0.922 0 0);
  --field-fill: transparent;
  /* Supporting text on darker surfaces, such as the shell: muted-foreground alone reaches 4.48:1 there. */
  --muted-foreground-strong: color-mix(in oklab, var(--muted-foreground) 85%, var(--foreground));
  --field-disabled-fill: color-mix(in oklab, var(--input-fill-base) 50%, transparent);
  --field-select-hover: var(--field-fill);
  --input-invalid: var(--field-fill);
  --input-invalid-foreground: var(--foreground);
  --input-invalid-border: var(--destructive);
  --input-invalid-message: var(--destructive);
  --highlight-cream: var(--color-cream);
  --highlight-orange: var(--color-light-orange);
  --highlight-foreground: var(--foreground);
  --floating-border: var(--border);
  --floating-shadow-color: color-mix(in srgb, var(--color-ink) 10%, transparent);
  --floating-shadow: var(--floating-shadow-geometry) var(--floating-shadow-color);
  --modal-backdrop: color-mix(in srgb, var(--color-ink) 24%, transparent);
  --chart-mark: var(--chart-series-1);
  /* Lines, points, rings and edges: deep orange in light mode, where Along orange is too faint for a thin mark. */
  --chart-mark-line: var(--chart-series-1-line);
  --chart-track: var(--border);
  --chart-cursor: var(--border);
  --chart-comparison: var(--muted-foreground);
  --chart-context: color-mix(in oklab, var(--muted-foreground) 45%, var(--card));
  --chart-grid: color-mix(in oklab, var(--border) 50%, transparent);
  --chart-band: var(--muted);
  --flow-canvas: color-mix(in oklab, var(--muted) 70%, var(--card));
  --flow-text: var(--muted-foreground-strong);
  --flow-line: color-mix(in oklab, var(--muted-foreground) 80%, var(--card));
  --flow-hot: var(--chart-mark-line);
  --flow-node-border: var(--border);
  --flow-group-border: color-mix(in oklab, var(--muted-foreground) 28%, var(--border));
  --flow-fail-border: color-mix(in oklab, var(--destructive) 60%, var(--card));
  --flow-final: color-mix(in oklab, var(--foreground) 45%, var(--card));
  --flow-pulse-on-hot: color-mix(in oklab, var(--chart-mark) 45%, var(--color-ink));
  --timeline-band: color-mix(in oklab, var(--chart-band) 70%, transparent);
  --timeline-edge-planned: var(--muted-foreground);
  --timeline-edge-in-progress: var(--chart-mark-line);
  --timeline-fill-in-progress: color-mix(in oklab, var(--chart-mark) 16%, transparent);
  --timeline-edge-complete: color-mix(in oklab, var(--foreground) 55%, var(--card));
  --timeline-fill-complete: color-mix(in oklab, var(--foreground) 9%, transparent);
  --timeline-edge-error: var(--destructive);
  --timeline-fill-error: color-mix(in oklab, var(--destructive) 12%, transparent);
  --timeline-plan-track: var(--chart-comparison);
  --timeline-bracket: color-mix(in oklab, var(--foreground) 38%, var(--card));
  --timeline-today: var(--foreground);
  --timeline-marker: var(--muted-foreground);
}

.dark, :root[data-theme="dark"] {
  --status-progress:var(--color-orange);
  --status-tag-progress:color-mix(in oklab,var(--status-progress) 18%,transparent);
  --status-tag-progress-foreground:var(--status-progress);
  --status-tag-error:color-mix(in oklab,var(--destructive) 22%,transparent);
  --status-tag-out-of-date:color-mix(in oklab,var(--chart-1) 20%,transparent);
  --input-fill-base: oklch(1 0 0 / 15%);
  --field-fill: color-mix(in oklab, var(--input-fill-base) 30%, transparent);
  --field-disabled-fill: color-mix(in oklab, var(--input-fill-base) 80%, transparent);
  --field-select-hover: color-mix(in oklab, var(--input-fill-base) 50%, transparent);
  --highlight-cream: color-mix(in srgb, var(--color-cream) 12%, var(--card));
  --highlight-orange: color-mix(in srgb, var(--color-light-orange) 12%, var(--card));
  --floating-shadow-color: color-mix(in srgb, var(--color-ink) 30%, transparent);
  --modal-backdrop: color-mix(in srgb, var(--color-ink) 40%, transparent);
  --flow-canvas: color-mix(in oklab, var(--background) 60%, var(--card));
  --flow-line: color-mix(in oklab, var(--muted-foreground) 60%, var(--card));
  --flow-node-border: color-mix(in oklab, var(--foreground) 14%, transparent);
  --flow-group-border: color-mix(in oklab, var(--foreground) 16%, transparent);
  --flow-pulse-on-hot: color-mix(in oklab, var(--chart-mark) 35%, var(--color-white));
  --timeline-fill-in-progress: color-mix(in oklab, var(--chart-mark) 22%, transparent);
  --timeline-fill-complete: color-mix(in oklab, var(--foreground) 12%, transparent);
  --timeline-fill-error: color-mix(in oklab, var(--destructive) 22%, transparent);
}

:root { --control-min-block:2.5rem; --selected-weight:600; }
/* Meaningful inline status, separate from interaction selection and brand highlights. */
.status-label { display:inline-flex; align-items:center; gap:var(--space-1); max-inline-size:100%; vertical-align:middle; color:var(--foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.status-label > svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); flex-shrink:0; }
.status-label[data-status="in-progress"] { color:var(--status-progress); }
.status-label[data-status="planned"] { color:var(--status-planned); }
.status-label[data-status="complete"] { color:var(--status-complete); }
.status-label[data-status="error"] { color:var(--status-error); }
.status-label[data-status="out-of-date"] { color:var(--status-out-of-date); }
/* Badges and status tags share one pill shape (badges.md); the tag adds status tints for dense visuals. See status-labels.md#tag-appearance. */
.badge,.status-label[data-appearance="tag"] { min-block-size:1.25rem; padding:0 var(--space-2); border:var(--border-width) var(--border-style) transparent; border-radius:var(--radius-full); }
.badge > svg,.status-label[data-appearance="tag"] > svg { inline-size:var(--icon-size-2xs); block-size:var(--icon-size-2xs); }
.status-label[data-appearance="tag"] { white-space:nowrap; }
.status-label[data-appearance="tag"][data-status="planned"] { border-color:var(--border); color:var(--status-planned); }
.status-label[data-appearance="tag"][data-status="in-progress"] { background:var(--status-tag-progress); color:var(--status-tag-progress-foreground); }
.status-label[data-appearance="tag"][data-status="complete"] { background:var(--secondary); color:var(--secondary-foreground); }
.status-label[data-appearance="tag"][data-status="error"] { background:var(--status-tag-error); color:var(--foreground); }
.status-label[data-appearance="tag"][data-status="error"] > svg { color:var(--status-error); }
.status-label[data-appearance="tag"][data-status="out-of-date"] { background:var(--status-tag-out-of-date); color:var(--status-out-of-date); }
@media(forced-colors:active) { .status-label[data-status] { color:CanvasText; } .status-label[data-appearance="tag"] { border-color:CanvasText; } .status-label[data-status] > svg { color:CanvasText; } }
.btn.icon-button { min-inline-size:var(--control-min-block); padding:var(--space-2); }
.btn[data-loading-label] { display:inline-grid; }
.busy-idle,.busy-label { grid-area:1 / 1; min-inline-size:0; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); }
.busy-text { min-inline-size:0; }
.icon-button .busy-text { position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.btn:not([aria-busy="true"]) .busy-label,.btn[aria-busy="true"] .busy-idle { visibility:hidden; }
:is(input,textarea,select):disabled { opacity:.5; cursor:not-allowed; }
.tablist { display:flex; flex-wrap:wrap; gap:var(--space-1); inline-size:fit-content; max-inline-size:100%; }
.tablist .btn { --button-fg:var(--muted-foreground); --button-hover:var(--accent); }
.tablist[aria-orientation="vertical"] { flex-direction:column; align-items:stretch; }
.tablist [aria-selected="true"] { --button-fill:var(--selection); --button-fg:var(--selection-foreground); --button-hover:var(--selection); font-weight:var(--selected-weight); }
[role="tabpanel"] { margin-block-start:var(--space-4); min-inline-size:0; }
.table-region { max-inline-size:100%; overflow:auto; padding:var(--space-2); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); }
.data-table { inline-size:100%; border-collapse:collapse; text-align:start; }
.data-table caption { text-align:start; padding:var(--space-2) var(--space-3); font-size:var(--type-supporting-size); color:var(--muted-foreground); }
.data-table :is(th,td) { overflow-wrap:normal; padding:var(--space-3); text-align:start; vertical-align:middle; border-block-end:var(--border-width) var(--border-style) var(--border); }
.data-table th { font-weight:var(--font-weight-regular); }
.data-table thead th { background:var(--muted); color:var(--foreground); font-size:var(--type-supporting-size); }
.data-table thead .btn { white-space:nowrap; overflow-wrap:normal; }
.data-table tbody tr:last-child :is(td,th),.data-table tfoot :is(td,th) { border-block-end:0; }
.data-table tfoot { background:var(--component-footer); border-block-start:var(--border-width) var(--border-style) var(--border); }
@media(hover:hover) { .data-table tbody tr[data-notes]:hover { background:var(--component-footer); } }
.table-state { padding:var(--space-6); text-align:center; }
.data-table .numeric { text-align:end; font-variant-numeric:var(--type-numeric-variant); }
.data-table td.numeric { white-space:nowrap; }
@media(pointer:coarse) { :root { --control-min-block:2.75rem; } .nav a { min-block-size:var(--control-min-block); } }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
a,a:visited { color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
@media(hover:hover) { a:hover { text-decoration-thickness:2px; } }
a:active { text-decoration-thickness:2px; }
:is(button,a,input,textarea,select,summary,[tabindex]):focus-visible { outline:var(--focus-ring-width) solid var(--ring); outline-offset:var(--focus-ring-offset); }
.nav { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-block:var(--gap-stack); }
.nav a { min-block-size:var(--control-min-block); min-inline-size:0; position:relative; display:flex; align-items:center; gap:var(--space-2); color:var(--sidebar-foreground); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); text-decoration:none; }
.nav a:is([aria-current="page"],[aria-current="location"]) { background:var(--sidebar-accent); color:var(--sidebar-accent-foreground); font-weight:var(--selected-weight); }
.nav a:focus-visible { outline-color:var(--sidebar-ring); }
.panel { box-shadow:var(--shadow-none); background:var(--card); color:var(--card-foreground); padding:var(--layout-panel-padding); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); align-content:start; }
.btn { box-sizing:border-box; box-shadow:var(--shadow-none); display:inline-flex; flex:0 0 auto; inline-size:fit-content; justify-content:center; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); min-block-size:var(--control-min-block); max-inline-size:100%; border:0; border-radius:var(--radius-md); background:var(--button-fill); color:var(--button-fg); font-weight:var(--font-weight-regular); text-align:center; overflow-wrap:anywhere; }
.btn svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); flex-shrink:0; pointer-events:none; }
/* Nova adaptation with Along's requested orange primary action; see buttons.md. In light mode the fill is the ramp's
   darker orange (--chart-4, #CA3500), so white text reaches 5.2:1. */
.primary { --button-fill:var(--chart-4); --button-fg:var(--color-white); --button-hover:color-mix(in srgb,var(--button-fill) 95%,var(--color-ink)); }
:where(.dark,:root[data-theme="dark"]) .primary { --button-fill:var(--color-orange); --button-fg:var(--color-ink); }
.secondary { --button-fill:var(--secondary); --button-fg:var(--secondary-foreground); --button-hover:color-mix(in oklch,var(--secondary),var(--foreground) 5%); }
.ghost { --button-fill:transparent; --button-fg:var(--foreground); --button-hover:var(--muted); }
.destructive { --button-fill:color-mix(in oklab,var(--destructive) 10%,transparent); --button-fg:var(--foreground); --button-hover:color-mix(in oklab,var(--destructive) 20%,transparent); }
:where(.dark,:root[data-theme="dark"]) .ghost { --button-hover:color-mix(in oklab,var(--muted) 50%,transparent); }
:where(.dark,:root[data-theme="dark"]) .destructive { --button-fill:color-mix(in oklab,var(--destructive) 20%,transparent); --button-hover:color-mix(in oklab,var(--destructive) 30%,transparent); }
@media(hover:hover) { .btn:not(:disabled):not([aria-disabled="true"]):hover { background:var(--button-hover); } .nav a:not([aria-disabled="true"]):hover { text-decoration:none; background:var(--sidebar-accent); } }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn[aria-busy="true"] { background:var(--button-fill); color:var(--button-fg); cursor:progress; }
.spinner { inline-size:1em; block-size:1em; border:2px solid currentColor; border-inline-end-color:transparent; border-radius:var(--radius-circle); animation:spin var(--motion-duration-spin) linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes feedback-enter { from { opacity:0; } to { opacity:1; } }
.motion-reveal { animation:feedback-enter var(--motion-duration-feedback) var(--motion-easing-feedback); }
@media(prefers-reduced-motion:reduce) { .spinner,.motion-reveal { animation:none; } }
.feedback { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-4); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-md); background:var(--feedback-neutral); color:var(--feedback-neutral-foreground); }
.feedback > svg { margin-block-start:var(--space-half); }
.warning { background:var(--warning); color:var(--warning-foreground); border-color:var(--border); }
.warning > svg { color:var(--warning-icon); }
.error { background:var(--error); color:var(--error-foreground); border-color:var(--border); }
.error > svg { color:var(--error-icon); }
/* Nova input/field adaptation. Values and state contracts: fields.md. */
.field-group { display:grid; gap:var(--space-6); min-inline-size:0; }
.field { display:grid; gap:var(--space-2); min-inline-size:0; }
.field > label,.field-label,.field-set > legend { font-weight:var(--font-weight-regular); color:var(--foreground); }
.field-hint { margin:0; color:var(--muted-foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.field-set { border:0; padding:0; margin:0; min-inline-size:0; }
.field-set > legend { margin-block-end:var(--space-2); }
:is(input:not([type]),input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="url"],input[type="tel"],input[type="number"],textarea,.field-control) { box-sizing:border-box; inline-size:100%; min-inline-size:0; min-block-size:var(--control-min-block); border:var(--border-width) var(--border-style) var(--input); background:var(--field-fill); color:var(--foreground); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); transition:border-color var(--motion-duration-feedback) var(--motion-easing-feedback),background-color var(--motion-duration-feedback) var(--motion-easing-feedback); }
textarea { min-block-size:var(--space-24); resize:vertical; }
input::placeholder,textarea::placeholder { color:var(--muted-foreground); opacity:1; }
:is(input:not([type]),input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="url"],input[type="tel"],input[type="number"],textarea,.field-control):focus-visible { border-color:var(--ring); }
/* WebKit doesn't match :focus-visible on date and time fields reached by keyboard. Other browsers always count a field you type
   into as focus-visible, so :focus draws the same ring there. */
:is(input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"]):focus { border-color:var(--ring); outline:var(--focus-ring-width) solid var(--ring); outline-offset:var(--focus-ring-offset); }
@media(forced-colors:active) { :is(input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"]):focus { outline-color:Highlight; } }
:is(input:not([type]),input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="url"],input[type="tel"],input[type="number"],textarea,.field-control):disabled { background:var(--field-disabled-fill); }
:is(input,textarea,select)[aria-invalid="true"] { background:var(--input-invalid); color:var(--input-invalid-foreground); border-color:var(--input-invalid-border); }
.field-error { display:flex; gap:var(--space-2); align-items:flex-start; margin:0; color:var(--input-invalid-message); font-size:var(--type-supporting-size); }
.field-error[hidden] { display:none; }
.native-select { position:relative; min-inline-size:0; }
.native-select > select { appearance:none; padding-inline-end:calc(var(--space-3) * 2 + var(--icon-size-sm)); }
.native-select > svg { position:absolute; inset-inline-end:var(--space-3); inset-block-start:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted-foreground); }
.native-select > select:disabled { background:var(--field-fill); }
.native-select:has(select:disabled) > svg { opacity:.5; }
.native-select :is(option,optgroup) { background:Canvas; color:CanvasText; }
@media(hover:hover) { .native-select > select:not(:disabled):hover { background:var(--field-select-hover); } }
.input-group { display:flex; align-items:center; gap:var(--space-2); min-inline-size:0; min-block-size:var(--control-min-block); padding-inline:var(--space-3); background:var(--field-fill); border:var(--border-width) var(--border-style) var(--input); border-radius:var(--radius-md); }
.input-group > .field-control { flex:1 1 auto; inline-size:0; min-inline-size:0; padding-inline:0; background:transparent; border:0; border-radius:0; }
.input-group > svg { color:var(--muted-foreground); flex-shrink:0; }
.input-group:has(> .field-control:focus-visible) { border-color:var(--ring); outline:var(--focus-ring-width) solid var(--ring); outline-offset:var(--focus-ring-offset); }
.input-group > .field-control:focus-visible { outline:none; }
.input-group:has(> .field-control[aria-invalid="true"]) { border-color:var(--input-invalid-border); }
.input-group:has(> .field-control:disabled) { background:var(--field-disabled-fill); opacity:.5; }
.input-group > .field-control:disabled { background:transparent; opacity:1; }
.input-group:has(> .field-control[readonly]) { background:var(--muted); }
.input-group > .field-control[readonly] { background:transparent; }
.password-action { display:inline-grid; }
.password-action > span { grid-area:1 / 1; }
.password-action:not([data-revealed="true"]) > [data-password-hide],.password-action[data-revealed="true"] > [data-password-show] { visibility:hidden; }
.choice-list { display:grid; gap:var(--space-2); }
.choice { display:flex; align-items:center; gap:var(--space-2); min-block-size:var(--control-min-block); cursor:pointer; }
.choice input { accent-color:var(--primary); flex:0 0 var(--icon-size-sm); inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); margin:0; }
.choice:has(input:disabled) { cursor:not-allowed; }
.choice:has(input:disabled) > span { opacity:.5; }
@media(forced-colors:active) { .input-group:has(> .field-control:focus-visible) { outline-color:Highlight; } }
.floating { background:var(--popover); color:var(--popover-foreground); border:var(--floating-border-width) var(--border-style) var(--floating-border); box-shadow:var(--floating-shadow); border-radius:var(--radius-lg); }
.menu { position:fixed; max-block-size:calc(100dvh - 2rem); overflow:auto; z-index:5; padding:var(--space-2); inline-size:14rem; max-inline-size:calc(100vw - 2rem); }
.menu .btn { inline-size:100%; justify-content:flex-start; --button-fill:transparent; --button-fg:var(--popover-foreground); --button-hover:var(--accent); }
.menu .btn:focus-visible { background:var(--accent); color:var(--accent-foreground); }
.menu-label { margin:0; padding:var(--space-2) var(--space-3); font-size:var(--type-supporting-size); color:var(--muted-foreground); }
.menu-separator { border:0; border-block-start:var(--border-width) var(--border-style) var(--border); margin:var(--space-2) 0; }
.menu-item-destructive > svg { color:var(--destructive); }
.menu .menu-item-destructive:focus-visible { background:color-mix(in oklab,var(--destructive) 10%,transparent); color:var(--popover-foreground); }
:where(.dark,:root[data-theme="dark"]) .menu .menu-item-destructive:focus-visible { background:color-mix(in oklab,var(--destructive) 20%,transparent); }
.tooltip { position:fixed; inset:auto; margin:0; z-index:50; inline-size:max-content; max-inline-size:calc(100vw - 2rem); padding:0; border:0; border-radius:var(--radius-md); background:var(--tooltip-surface); color:var(--tooltip-foreground); box-shadow:none; font-family:var(--font-sans); font-size:var(--type-supporting-size); font-weight:400; line-height:var(--type-supporting-leading); text-align:start; overflow:visible; }
.tooltip[hidden] { display:none; }
.tooltip-body { display:block; max-inline-size:20rem; overflow:auto; overflow-wrap:anywhere; padding:calc(var(--space-1) + var(--space-half)) var(--space-3); }
.tooltip::after { content:""; position:absolute; inline-size:var(--space-2); block-size:var(--space-2); background:inherit; transform:rotate(45deg); pointer-events:none; }
.tooltip::before { content:""; position:absolute; }
.tooltip[data-side="top"]::after { bottom:calc(-1 * var(--space-1)); left:calc(var(--tooltip-pointer) - var(--space-1)); }
.tooltip[data-side="bottom"]::after { top:calc(-1 * var(--space-1)); left:calc(var(--tooltip-pointer) - var(--space-1)); }
.tooltip[data-side="left"]::after { right:calc(-1 * var(--space-1)); top:calc(var(--tooltip-pointer) - var(--space-1)); }
.tooltip[data-side="right"]::after { left:calc(-1 * var(--space-1)); top:calc(var(--tooltip-pointer) - var(--space-1)); }
.tooltip[data-side="top"]::before { top:100%; left:0; width:100%; height:var(--space-2); }
.tooltip[data-side="bottom"]::before { bottom:100%; left:0; width:100%; height:var(--space-2); }
.tooltip[data-side="left"]::before { left:100%; top:0; height:100%; width:var(--space-2); }
.tooltip[data-side="right"]::before { right:100%; top:0; height:100%; width:var(--space-2); }
@media(forced-colors:active) { .tooltip { background:Canvas; color:CanvasText; border:1px solid CanvasText; } .tooltip::after { display:none; } }
.modal { padding:0; inline-size:min(var(--content-focused),calc(100% - 2 * var(--space-4))); max-block-size:calc(100% - 2 * var(--space-4)); overflow:auto; }
/* Large: the workspace content width, for content that needs room (settings, the chat expanded view). See modals.md. */
.modal[data-size="large"] { inline-size:min(var(--content-workspace),calc(100% - 2 * var(--space-4))); }
/* Expanded view: a zoomable visualization opened over everything (modals.md#expanded-view). */
.modal[data-size="full"] { inline-size:calc(100% - 2 * var(--space-4)); max-inline-size:none; block-size:calc(100% - 2 * var(--space-4)); }
.modal[data-size="full"][open] { display:flex; flex-direction:column; }
.expanded-view-body { flex:1 1 auto; min-block-size:0; overflow:auto; display:flex; flex-direction:column; }
/* Shorter visualizations sit in the middle; auto margins collapse, so taller ones scroll from the top instead of clipping. */
.expanded-view-body > * { margin-block:auto; }
/* Room for the graph's filters above and legend below, so everything fits without scrolling. */
.expanded-view-body .graph-stage { block-size:max(20rem,calc(100dvh - 20rem)); }
.modal::backdrop { background:var(--modal-backdrop); backdrop-filter:none; }
@media(forced-colors:active) { :is(button,a,input,textarea,select,summary,[tabindex]):focus-visible,.segmented-radio input:focus-visible + span { outline-color:Highlight; } .btn,.panel,.metric-tile,.feedback,.floating,.node { border:1px solid CanvasText; } .spinner { border-color:ButtonText; border-inline-end-color:transparent; } }

.btn[aria-disabled="true"]:not([aria-busy="true"]) { opacity:.5; cursor:not-allowed; }
.btn:not([aria-busy="true"]) .spinner { animation:none; }
@media(forced-colors:active) { .tablist [aria-selected="true"],.nav a:is([aria-current="page"],[aria-current="location"]) { background:Highlight; color:HighlightText; forced-color-adjust:none; } }

input[readonly],textarea[readonly] { background:var(--muted); color:var(--foreground); }

/* Nova composition adapted to Along geometry; see the family guides. */
.card { display:flex; flex-direction:column; gap:var(--gap-stack); min-inline-size:0; padding-block-start:var(--layout-panel-padding); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); background:var(--card); color:var(--card-foreground); box-shadow:var(--shadow-none); }
.card-header,.card-content { padding-inline:var(--layout-panel-padding); min-inline-size:0; }
.card-header { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--space-2) var(--space-4); }
.card-header > :first-child { flex:1 1 12rem; min-inline-size:0; }
.card-description,.modal-description { color:var(--muted-foreground); }
.card-content { flex:1; }
.card > :last-child:not(.card-footer) { padding-block-end:var(--layout-panel-padding); }
.card-footer,.modal-footer { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding:var(--layout-panel-padding); border-block-start:var(--border-width) var(--border-style) var(--border); border-end-start-radius:var(--radius-lg); border-end-end-radius:var(--radius-lg); background:var(--component-footer); }
.card-footer .btn,.modal-footer .btn { max-inline-size:100%; }
.card-status { min-block-size:var(--space-24); display:grid; align-content:center; gap:var(--space-3); }
.nav-surface { padding:var(--space-4); border:var(--border-width) var(--border-style) var(--sidebar-border); border-radius:var(--radius-lg); background:var(--sidebar); color:var(--sidebar-foreground); }
.nav-surface .nav { margin:0; }
.nav a[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
/* An item that isn't available yet is text, not a disabled control, so it keeps text contrast. */
.nav .nav-unavailable { color:var(--muted-foreground-strong); cursor:not-allowed; }
.nav .nav-unavailable { display:flex; align-items:center; min-block-size:var(--control-min-block); padding:var(--space-2) var(--space-3); }
.breadcrumb ol { display:flex; flex-wrap:wrap; gap:var(--space-1); align-items:center; padding:0; margin:0; list-style:none; color:var(--muted-foreground); overflow-wrap:anywhere; }
.breadcrumb li { display:flex; align-items:center; gap:var(--space-1); min-inline-size:0; }
.breadcrumb a { display:inline-flex; align-items:center; min-block-size:var(--control-min-block); color:var(--muted-foreground); }
@media(hover:hover) { .breadcrumb a:hover { color:var(--foreground); } }
.breadcrumb [aria-current] { color:var(--foreground); }
.breadcrumb-separator { display:inline-flex; color:var(--muted-foreground); }
.breadcrumb-separator > svg { inline-size:var(--icon-size-xs); block-size:var(--icon-size-xs); }
.breadcrumb .breadcrumb-more { --button-fill:transparent; --button-fg:var(--muted-foreground); }
.breadcrumb-panel { position:fixed; z-index:5; display:grid; min-inline-size:10rem; padding:var(--space-2); margin:0; list-style:none; }
.breadcrumb-panel a { display:flex; align-items:center; min-block-size:var(--control-min-block); padding:0 var(--space-3); border-radius:var(--radius-md); color:var(--popover-foreground); text-decoration:none; }
.breadcrumb-panel a:is(:hover,:focus-visible) { background:var(--accent); color:var(--accent-foreground); }
/* Full-width navbar; geometry belongs here, not in the sidebar pattern. */
.navbar {
  --navbar-padding-block:.625rem;
  --navbar-padding-inline:1.25rem;
  --navbar-control-size:2.75rem;
  --navbar-height:calc(var(--navbar-control-size) + 2 * var(--navbar-padding-block));
  position:relative; container:navbar / inline-size; box-sizing:border-box; display:flex; flex:0 0 auto;
  align-items:center; justify-content:space-between; gap:var(--space-3);
  inline-size:100%; min-inline-size:0; block-size:var(--navbar-height);
  padding:var(--navbar-padding-block) var(--navbar-padding-inline); background:var(--background); color:var(--foreground);
}
/* Draw the separator inside the frame without subtracting from its padding. */
.navbar::after { content:""; position:absolute; inset:auto 0 0; block-size:var(--border-width); background:var(--border); pointer-events:none; }
.navbar-start,.navbar-end { display:flex; align-items:center; gap:var(--space-2); min-inline-size:0; block-size:var(--navbar-control-size); }
.navbar-start { flex:1 1 0; justify-content:flex-start; }
.navbar-end { flex:0 0 auto; justify-content:flex-end; margin-inline-start:auto; }
/* Navbar buttons are library buttons, Small unless they set data-size (see the size rules below), centered in the 44px row. */
.navbar :is(.navbar-start,.navbar-end) > .btn { white-space:nowrap; overflow-wrap:normal; max-inline-size:none; }
.navbar-title { min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.navbar .breadcrumb { min-inline-size:0; max-inline-size:100%; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; padding-inline:var(--space-1); }
.navbar .breadcrumb ol { flex-wrap:nowrap; inline-size:max-content; }
.navbar .breadcrumb li { flex-shrink:0; white-space:nowrap; }
/* Opt-in only for actions with a meaningful icon, accessible name and tooltip. */
@container navbar (max-width:24rem) {
  .navbar :is(.navbar-start,.navbar-end) > .btn.navbar-adaptive-action { inline-size:var(--control-min-block); padding-inline:0; }
  .navbar-adaptive-action > .navbar-action-label { display:none; }
}
@media(forced-colors:active) { .navbar::after { background:CanvasText; } }
/* Shared modal core; compositions and dismissal are owned by modals.md. */
.modal-header,.modal-body { padding:var(--layout-panel-padding); min-inline-size:0; }
.modal-header { display:flex; align-items:flex-start; gap:var(--space-4); }
.modal-heading { display:grid; flex:1; min-inline-size:0; gap:var(--space-2); }
.modal-close { flex-shrink:0; }
.modal-body { padding-block-start:0; }
.modal-footer { justify-content:flex-end; }
@media(max-width:30rem) { .modal-footer { flex-direction:column; align-items:stretch; } .modal-footer .btn { inline-size:100%; } }
@media(forced-colors:active) { .card,.nav-surface { border-color:CanvasText; } .menu .btn:focus-visible { background:Highlight; color:HighlightText; forced-color-adjust:none; } }

/* Three collection presentations; owning guidance: tables.md. */
.record-list,.contained-list { list-style:none; padding:0; margin:0; min-inline-size:0; }
.record-list > li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2) var(--space-3); padding-block:var(--space-2); }
.record-list > li + li { border-block-start:var(--border-width) var(--border-style) var(--border); }
.record-list > li:first-child { padding-block-start:0; }
.record-list > li:last-child { padding-block-end:0; }
.record-summary { display:flex; flex:1 1 15rem; flex-wrap:wrap; align-items:center; gap:var(--space-2); min-inline-size:0; }
.record-meta { color:var(--muted-foreground); font-size:var(--type-supporting-size); }
.record-value { margin-inline-start:auto; white-space:nowrap; font-variant-numeric:var(--type-numeric-variant); }
.record-value strong { font-weight:var(--font-weight-regular); color:var(--foreground); }
.record-status { display:inline-flex; align-items:center; gap:var(--space-1); inline-size:fit-content; padding:var(--space-half) var(--space-2); border-radius:var(--radius-sm); background:var(--muted); color:var(--foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); white-space:nowrap; }
.contained-list { background:var(--card); color:var(--card-foreground); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); }
.contained-row { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); min-inline-size:0; }
.contained-row:not([hidden]) ~ .contained-row:not([hidden]) { border-block-start:var(--border-width) var(--border-style) var(--border); }
.contained-open { display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-4); min-inline-size:0; min-block-size:var(--control-min-block); padding:var(--space-2); text-align:start; border:0; border-radius:var(--radius-md); background:transparent; color:inherit; }
.contained-identity { display:flex; flex:1 1 12rem; align-items:center; gap:var(--space-3); min-inline-size:0; }
.contained-name { min-inline-size:0; overflow-wrap:anywhere; }
.contained-meta, .graph-active-filters, .flow-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.contained-open-label { color:var(--muted-foreground); font-size:var(--type-supporting-size); text-decoration:underline; text-underline-offset:3px; }
.contained-row > .icon-button { flex-shrink:0; }
@media(hover:hover) { .contained-open:hover { background:var(--component-footer); } }
.collection-filters { display:flex; flex-wrap:wrap; gap:var(--space-1); }
.collection-filters .btn[aria-pressed="true"] { --button-fill:var(--accent); --button-fg:var(--accent-foreground); --button-hover:var(--accent); font-weight:var(--selected-weight); }
.table-toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-3); }
.table-toolbar > .field { flex:1 1 12rem; min-inline-size:0; }
.table-toolbar > .table-search { flex-basis:18rem; }
.table-columns { padding:var(--space-3); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-md); }
.table-columns summary { cursor:pointer; min-block-size:var(--control-min-block); align-content:center; }
.table-columns .choice-list { display:flex; flex-wrap:wrap; gap:var(--space-4); }
.data-table-wide { min-inline-size:70rem; }
.data-table-wide th[scope="row"] { min-inline-size:10rem; }
.data-table-wide .record-role { min-inline-size:8rem; max-inline-size:12rem; }
.data-table-wide :is(th,td)[data-column="date"] { white-space:nowrap; }
.data-table-wide tbody tr[data-selected="true"] { background:var(--accent); color:var(--accent-foreground); }
.table-check { display:inline-flex; justify-content:center; align-items:center; min-inline-size:var(--control-min-block); min-block-size:var(--control-min-block); cursor:pointer; }
.table-check input { accent-color:var(--primary); inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); margin:0; }
.table-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); }
.table-pagination .field { inline-size:10rem; max-inline-size:100%; }
@media(forced-colors:active) { .contained-list,.record-status { border:1px solid CanvasText; } .data-table-wide tr[data-selected="true"],.collection-filters .btn[aria-pressed="true"] { background:Highlight; color:HighlightText; forced-color-adjust:none; } }

.record-details { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--space-2) var(--space-4); }
.record-details > * { min-inline-size:0; }
.selected-records { padding-inline-start:var(--space-6); }

/* Tab presentations: flat stays the default; grouped tabs follow campaign views. */
.tablist.tablist-segmented { padding:var(--space-1); background:var(--muted); border-radius:var(--radius-lg); }
.tablist-segmented [aria-selected="true"] { --button-fill:var(--background); --button-fg:var(--foreground); --button-hover:var(--background); }
/* Segmented radio: one of two values in the segmented tabs' tray, keeping native radio semantics, as in the Light / Dark
   choice. Options use the tabs' Small size (buttons.md#sizes): 32px, or 44px on touch screens. Owner: fields.md#segmented-radio. */
.segmented-radio { --segmented-padding:calc(var(--space-2) + var(--space-half)); --segmented-icon:var(--icon-size-xs); display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-1); inline-size:fit-content; max-inline-size:100%; padding:var(--space-1); border-radius:var(--radius-lg); background:var(--muted); }
.segmented-radio label { position:relative; min-inline-size:0; cursor:pointer; }
.segmented-radio > label > span { --control-min-block:2rem; display:flex; align-items:center; gap:var(--space-1); block-size:100%; min-block-size:var(--control-min-block); padding:var(--space-1) var(--segmented-padding); border-radius:var(--radius-md); color:var(--muted-foreground); }
.segmented-radio > label > span > svg { inline-size:var(--segmented-icon); block-size:var(--segmented-icon); }
@media(pointer:coarse) { .segmented-radio > label > span { --control-min-block:2.75rem; } }
.segmented-radio > label > span > span { min-inline-size:0; overflow-wrap:anywhere; }
.segmented-radio input:checked + span { background:var(--background); color:var(--foreground); font-weight:var(--selected-weight); }
.segmented-radio input:focus-visible + span { outline:var(--focus-ring-width) solid var(--ring); outline-offset:var(--focus-ring-offset); }
@media(forced-colors:active) { .segmented-radio input:checked + span { background:Highlight; color:HighlightText; forced-color-adjust:none; } }
.tab-count { font-size:var(--type-supporting-size); font-variant-numeric:var(--type-numeric-variant); font-weight:var(--font-weight-regular); }
.tabs-vertical { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--gap-grid); }
.tabs-vertical > .tablist { flex:1 1 10rem; }
.tabs-vertical > .tablist .btn { inline-size:100%; justify-content:flex-start; text-align:start; }
.tabs-vertical > [role="tabpanel"] { flex:3 1 18rem; margin-block-start:0; }
.context-target { background:var(--card); color:var(--card-foreground); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); padding:var(--layout-panel-padding); }
.menubar { display:flex; flex-wrap:wrap; gap:var(--space-1); inline-size:fit-content; max-inline-size:100%; padding:var(--space-1); background:var(--card); color:var(--card-foreground); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); }
.menubar .btn[aria-expanded="true"] { --button-fill:var(--accent); --button-fg:var(--accent-foreground); }
@media(forced-colors:active) {
  .tablist-segmented [aria-selected="true"],.menubar .btn[aria-expanded="true"] { background:Highlight; color:HighlightText; forced-color-adjust:none; }
  .context-target,.menubar { border-color:CanvasText; }
}

/* Text measure: running text of every size stops at the reading width. Owner: spacing-and-layout.md#padding-and-content-widths.
   :where() keeps this at zero specificity, so a component's own width wins. */
:where(p, li, dt, dd, figcaption, blockquote, legend, label, small, h1, h2, h3, h4, h5, h6, .support, .muted, .field-hint, .field-error) { max-inline-size:var(--content-reading); }
/* Full-width rows and row-like components keep their layout; their text is short or wraps inside them. */
:where(.contained-row, .list-item, .interview, .marker, .questionnaire-choice, .bar-list > li, .file-tree-items li) { max-inline-size:none; }

/* Accordion: heading buttons and immediate panels. Owner: accordions.md. */
.accordion { display:flex; flex-direction:column; inline-size:100%; min-inline-size:0; }
.accordion-item:not(:last-child) { border-block-end:var(--border-width) var(--border-style) var(--border); }
.accordion-heading { margin:0; font:inherit; }
.accordion-trigger { display:flex; inline-size:100%; align-items:flex-start; justify-content:space-between; gap:var(--space-3); min-block-size:var(--control-min-block); padding:var(--space-3) 0; border:0; border-radius:var(--radius-md); background:transparent; color:var(--foreground); font:inherit; text-align:start; cursor:pointer; }
.accordion-trigger > span { min-inline-size:0; overflow-wrap:anywhere; }
.accordion-trigger > svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); flex-shrink:0; margin-block-start:var(--space-half); color:var(--muted-foreground); }
.accordion-trigger[aria-expanded="true"] > svg { transform:rotate(180deg); }
.accordion-trigger[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
@media(hover:hover) { .accordion-trigger:not([aria-disabled="true"]):hover > span { text-decoration:underline; text-underline-offset:3px; } }
.accordion-panel { padding-block-end:var(--space-3); overflow-wrap:anywhere; }
.accordion-panel > * { margin:0; }
.accordion-panel > * + * { margin-block-start:var(--space-4); }

/* Avatar: a person or workspace image with initials fallback. Owner: avatars.md. */
.card,.panel,.contained-list { --avatar-ring:var(--card); }
.floating { --avatar-ring:var(--popover); }
.avatar { --avatar-size:var(--space-8); position:relative; display:inline-flex; flex:0 0 var(--avatar-size); inline-size:var(--avatar-size); block-size:var(--avatar-size); border-radius:var(--radius-circle); user-select:none; }
.avatar[data-size="sm"] { --avatar-size:var(--space-6); }
.avatar[data-size="lg"] { --avatar-size:calc(var(--space-8) + var(--space-2)); }
.avatar[data-shape="square"] { border-radius:var(--radius-md); }
.avatar::after { content:""; position:absolute; inset:0; border-radius:inherit; border:var(--border-width) var(--border-style) var(--border); mix-blend-mode:darken; pointer-events:none; }
:where(.dark,:root[data-theme="dark"]) .avatar::after { mix-blend-mode:lighten; }
.avatar-fallback { display:grid; place-items:center; inline-size:100%; block-size:100%; border-radius:inherit; background:var(--muted); color:var(--muted-foreground); font-size:var(--type-body-size); line-height:1; }
/* Inside a named control, initials come from data-initials so they aren't text in the control's name; see avatars.md. */
.avatar-fallback[data-initials]::before { content:attr(data-initials); }
.avatar[data-size="sm"] .avatar-fallback { font-size:var(--type-supporting-size); }
.avatar-image { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; border-radius:inherit; }
.avatar[data-avatar-state="error"] .avatar-image { display:none; }
.avatar-badge { position:absolute; inset-inline-end:0; inset-block-end:0; z-index:1; inline-size:.625rem; block-size:.625rem; border-radius:var(--radius-circle); background:var(--primary); box-shadow:0 0 0 2px var(--avatar-ring,var(--background)); }
.avatar[data-size="sm"] .avatar-badge { inline-size:var(--space-2); block-size:var(--space-2); }
.avatar[data-size="lg"] .avatar-badge { inline-size:var(--space-3); block-size:var(--space-3); }
.avatar-group { display:flex; align-items:center; }
.avatar-group > :is(.avatar,.avatar-group-count) { box-shadow:0 0 0 2px var(--avatar-ring,var(--background)); }
.avatar-group > * + * { margin-inline-start:calc(-1 * var(--space-2)); }
/* On a narrow screen a long group wraps; the start padding keeps each row's first avatar inside the group. */
@media(max-width:30rem) { .avatar-group { flex-wrap:wrap; row-gap:var(--space-1); padding-inline-start:var(--space-2); } .avatar-group > * { margin-inline-start:calc(-1 * var(--space-2)); } }
.avatar-group-count { display:inline-grid; place-items:center; flex:0 0 var(--space-8); inline-size:var(--space-8); block-size:var(--space-8); border-radius:var(--radius-circle); background:var(--muted); color:var(--muted-foreground); font-size:var(--type-supporting-size); }
.avatar-group:has(.avatar[data-size="sm"]) .avatar-group-count { flex-basis:var(--space-6); inline-size:var(--space-6); block-size:var(--space-6); }
.avatar-group:has(.avatar[data-size="lg"]) .avatar-group-count { flex-basis:calc(var(--space-8) + var(--space-2)); inline-size:calc(var(--space-8) + var(--space-2)); block-size:calc(var(--space-8) + var(--space-2)); }

/* Attachment: file or image with upload state and actions. Owner: attachments.md. */
.attachment { --attachment-media:2.5rem; position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); inline-size:fit-content; min-inline-size:min(10rem, 100%); max-inline-size:100%; padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); background:var(--card); color:var(--card-foreground); box-sizing:border-box; }
.attachment[data-size="sm"] { --attachment-media:var(--space-8); font-size:var(--type-supporting-size); }
.attachment[data-size="xs"] { --attachment-media:1.75rem; gap:var(--space-2); padding:var(--space-1) var(--space-2) var(--space-1) var(--space-1); border-radius:var(--radius-md); font-size:var(--type-supporting-size); }
.attachment[data-state="idle"] { border-style:dashed; }
.attachment[data-state="error"] { border-color:color-mix(in oklab,var(--destructive) 30%,transparent); }
@media(hover:hover) { .attachment:has(> .attachment-trigger):hover { background:color-mix(in oklab,var(--muted) 50%,var(--card)); } }
.attachment-media { position:relative; display:grid; place-items:center; flex:0 0 auto; inline-size:var(--attachment-media); aspect-ratio:1; overflow:hidden; border-radius:var(--radius-md); background:var(--muted); color:var(--foreground); }
.attachment[data-size="xs"] .attachment-media { border-radius:var(--radius-sm); }
.attachment-media > svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); }
.attachment-media > img { inline-size:100%; block-size:100%; object-fit:cover; }
.attachment:is([data-state="uploading"],[data-state="processing"]) .attachment-media > img { opacity:.6; }
.attachment-media > .spinner { position:absolute; }
.attachment:is([data-state="uploading"],[data-state="processing"]) .attachment-media > svg { visibility:hidden; }
.attachment[data-state="error"] .attachment-media { background:color-mix(in oklab,var(--destructive) 10%,var(--card)); color:var(--error-icon); }
.attachment-content { display:grid; gap:var(--space-half); flex:1; min-inline-size:0; line-height:1.3; }
.attachment-title { overflow-wrap:anywhere; }
.attachment-description { color:var(--muted-foreground); font-size:var(--type-supporting-size); overflow-wrap:anywhere; }
.attachment[data-state="error"] .attachment-description { color:var(--foreground); }
.attachment-actions { position:relative; z-index:2; display:flex; align-items:center; flex-shrink:0; gap:var(--space-1); }
.attachment-trigger { position:absolute; inset:0; z-index:1; margin:0; padding:0; border:0; border-radius:inherit; background:transparent; cursor:pointer; }
.attachment[data-orientation="vertical"] { flex-direction:column; align-items:stretch; inline-size:6rem; min-inline-size:0; padding:var(--space-2); }
.attachment[data-orientation="vertical"]:has(.attachment-content) { inline-size:7.5rem; }
.attachment[data-orientation="vertical"] .attachment-media { inline-size:100%; }
.attachment[data-orientation="vertical"] .attachment-media > svg { inline-size:var(--icon-size-md); block-size:var(--icon-size-md); }
.attachment[data-orientation="vertical"] .attachment-content { padding-inline:var(--space-1); }
.attachment[data-orientation="vertical"] .attachment-actions { position:absolute; inset-block-start:var(--space-3); inset-inline-end:var(--space-3); }
.attachment-group { display:flex; gap:var(--space-3); min-inline-size:0; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--space-1); padding:var(--space-1); }
.attachment-group > .attachment { flex:none; scroll-snap-align:start; }
.attachment-group > .attachment:not([data-orientation="vertical"]) { max-inline-size:20rem; }

/* Questionnaire: one question at a time with native answers. Owner: questionnaire.md. */
.questionnaire { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--space-4); inline-size:100%; min-inline-size:0; }
.questionnaire-progress { margin:0; color:var(--muted-foreground); font-size:var(--type-supporting-size); font-variant-numeric:var(--type-numeric-variant); }
.questionnaire-item { display:grid; gap:var(--space-4); min-inline-size:0; margin:0; padding:0; border:0; }
.questionnaire-title { margin-block-end:var(--space-2); padding:0; font-size:var(--type-subheading-size); line-height:var(--type-subheading-leading); }
.questionnaire-description { margin:0; color:var(--muted-foreground); }
.questionnaire-choices { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--space-2); min-inline-size:0; }
.questionnaire-choice { position:relative; display:flex; align-items:flex-start; gap:var(--space-3); min-block-size:var(--control-min-block); padding:var(--space-2) var(--space-3); border:var(--border-width) var(--border-style) var(--input); border-radius:var(--radius-md); background:var(--field-fill); cursor:pointer; box-sizing:border-box; }
.questionnaire-choice > input { position:absolute; inset:0; z-index:1; inline-size:100%; block-size:100%; margin:0; opacity:0; cursor:inherit; }
@media(hover:hover) { .questionnaire-choice:not(:has(> input:disabled)):hover { background:color-mix(in oklab,var(--muted) 50%,transparent); } }
.questionnaire-choice:has(> input:checked) { border-color:color-mix(in oklab,var(--primary) 40%,transparent); background:var(--muted); }
.questionnaire-choice:has(> input:focus-visible) { border-color:var(--ring); outline:var(--focus-ring-width) solid var(--ring); outline-offset:var(--focus-ring-offset); }
.questionnaire-choice:has(> input:disabled) { opacity:.5; cursor:not-allowed; }
.questionnaire-item[aria-invalid="true"] .questionnaire-choice { border-color:var(--input-invalid-border); }
.questionnaire-indicator { display:grid; place-items:center; flex:0 0 auto; inline-size:var(--space-4); block-size:var(--space-4); margin-block-start:.125rem; border:var(--border-width) var(--border-style) var(--input); border-radius:var(--radius-sm); background:var(--field-fill); color:var(--primary-foreground); box-sizing:border-box; }
.questionnaire-indicator > svg { inline-size:var(--icon-size-2xs); block-size:var(--icon-size-2xs); visibility:hidden; }
.questionnaire-choice:has(> input[type="radio"]) .questionnaire-indicator { border-radius:var(--radius-circle); }
.questionnaire-choice:has(> input:checked) .questionnaire-indicator { border-color:var(--primary); background:var(--primary); }
.questionnaire-choice:has(> input[type="checkbox"]:checked) .questionnaire-indicator > svg { visibility:visible; }
.questionnaire-choice:has(> input[type="radio"]:checked) .questionnaire-indicator::after { content:""; inline-size:var(--space-2); block-size:var(--space-2); border-radius:var(--radius-circle); background:var(--primary-foreground); }
.questionnaire-choice-label { display:grid; gap:var(--space-half); flex:1; min-inline-size:0; overflow-wrap:anywhere; }
.questionnaire-choice-description { color:var(--muted-foreground); }
.questionnaire-shortcut { display:none; place-items:center; flex:0 0 auto; min-inline-size:var(--space-6); block-size:var(--space-6); padding-inline:var(--space-1); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-sm); background:var(--background); color:var(--muted-foreground); font:inherit; font-size:var(--type-supporting-size); box-sizing:border-box; }
.questionnaire-choice[data-shortcut] .questionnaire-shortcut { display:inline-grid; }
@media(hover:none) { .questionnaire-choice[data-shortcut] .questionnaire-shortcut { display:none; } }
.questionnaire-actions { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:var(--space-2); }
.questionnaire-actions > [data-questionnaire="previous"] { grid-column:1; justify-self:start; }
.questionnaire-actions > [data-questionnaire="skip"] { grid-column:2; }
.questionnaire-actions > :is([data-questionnaire="next"],[data-questionnaire="submit"]) { grid-column:3; }
.questionnaire-actions > * { grid-row:1; }
@media(forced-colors:active) {
  .questionnaire-choice:has(> input:checked),.questionnaire-choice:has(> input:checked) .questionnaire-indicator { border-color:Highlight; }
  .questionnaire-choice:has(> input:checked) .questionnaire-indicator { background:Highlight; forced-color-adjust:none; }
  .avatar::after,.attachment { border-color:CanvasText; }
}

/* Badge: compact label for metadata, counts and categories. Owner: badges.md. */
.badge { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1); inline-size:fit-content; background:var(--primary); color:var(--primary-foreground); font-size:var(--type-supporting-size); line-height:1.3; white-space:nowrap; flex-shrink:0; box-sizing:border-box; vertical-align:middle; }
/* On a narrow screen, a badge wider than its container wraps, inside a long word if it must. */
@media(max-width:30rem) { .badge { max-inline-size:100%; white-space:normal; overflow-wrap:anywhere; } }
/* An icon tightens its side so it sits evenly inside the pill's curve (shadcn data-icon convention). */
.badge:has(> [data-icon="inline-start"]) { padding-inline-start:calc(var(--space-1) + var(--space-half)); }
.badge:has(> [data-icon="inline-end"]) { padding-inline-end:calc(var(--space-1) + var(--space-half)); }
.badge > svg { display:block; flex-shrink:0; }
.badge > .spinner { display:block; inline-size:var(--icon-size-2xs); block-size:var(--icon-size-2xs); border-width:1.5px; flex-shrink:0; }
.badge[data-variant="secondary"] { background:var(--secondary); color:var(--secondary-foreground); }
.badge[data-variant="destructive"] { background:color-mix(in oklab,var(--destructive) 10%,transparent); color:var(--foreground); }
:where(.dark,:root[data-theme="dark"]) .badge[data-variant="destructive"] { background:color-mix(in oklab,var(--destructive) 20%,transparent); }
.badge[data-variant="destructive"] > svg { color:var(--error-icon); }
.badge[data-variant="outline"] { background:transparent; border-color:var(--border); color:var(--foreground); }
.badge[data-variant="ghost"] { background:transparent; color:var(--foreground); }
/* Highlight: brand orange for small references such as chat citations, never a status. Dark mode uses solid orange with
   dark text, the primary button's dark pairing, so it still reads as orange. */
.badge[data-variant="highlight"] { border-color:color-mix(in srgb,var(--color-orange) 55%,transparent); background:var(--highlight-orange); color:var(--highlight-foreground); }
@media(hover:hover) { button.badge[data-variant="highlight"]:hover { background:color-mix(in srgb,var(--highlight-orange),var(--color-orange) 35%); border-color:var(--color-orange); } }
button.badge[data-variant="highlight"][aria-expanded="true"] { background:color-mix(in srgb,var(--highlight-orange),var(--color-orange) 35%); border-color:var(--color-orange); }
:where(.dark,:root[data-theme="dark"]) .badge[data-variant="highlight"] { background:var(--color-orange); border-color:var(--color-orange); color:var(--color-ink); }
@media(hover:hover) { :where(.dark,:root[data-theme="dark"]) button.badge[data-variant="highlight"]:hover { background:color-mix(in srgb,var(--color-orange),var(--color-ink) 15%); } }
:where(.dark,:root[data-theme="dark"]) button.badge[data-variant="highlight"][aria-expanded="true"] { background:color-mix(in srgb,var(--color-orange),var(--color-ink) 15%); }
a.badge { text-decoration:none; }
a.badge[data-variant="link"] { background:transparent; color:var(--link); text-decoration:underline; text-underline-offset:3px; }
@media(hover:hover) {
  a.badge:not([data-variant]):hover { background:color-mix(in oklab,var(--primary) 80%,transparent); }
  a.badge[data-variant="secondary"]:hover { background:color-mix(in oklab,var(--secondary) 80%,transparent); }
  a.badge:is([data-variant="outline"],[data-variant="ghost"]):hover { background:var(--muted); }
}
@media(pointer:coarse) { a.badge { min-block-size:var(--control-min-block); } }

/* Marker: inline conversation status, note, bordered row or labelled separator. Owner: markers.md. */
.marker { position:relative; display:flex; align-items:center; gap:var(--space-2); inline-size:100%; min-block-size:var(--space-4); margin:0; color:var(--muted-foreground); font-size:var(--type-body-size); text-align:start; }
.marker a { color:inherit; }
@media(hover:hover) { .marker a:hover { color:var(--foreground); } }
.marker-icon { display:inline-grid; place-items:center; flex:0 0 var(--icon-size-sm); inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); }
.marker-icon > svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); }
.marker-content { min-inline-size:0; overflow-wrap:anywhere; }
.marker[data-variant="border"] { padding-block-end:var(--space-2); border-block-end:var(--border-width) var(--border-style) var(--border); }
.marker[data-variant="separator"]::before,.marker[data-variant="separator"]::after { content:""; flex:1; min-inline-size:var(--space-4); block-size:var(--border-width); background:var(--border); }
.marker[data-variant="separator"] .marker-content { flex:0 1 auto; max-inline-size:80%; text-align:center; white-space:normal; }
button.marker { min-block-size:var(--control-min-block); padding:0; border:0; background:transparent; font:inherit; cursor:pointer; }
@media(hover:hover) { button.marker:hover { color:var(--foreground); } }

/* Code block: code, output and diffs with header, numbers and copy. Owner: code-blocks.md. */
.code-block { position:relative; display:flex; flex-direction:column; inline-size:100%; min-inline-size:0; overflow:hidden; border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); background:var(--field-fill); color:var(--foreground); font-size:var(--type-body-size); }
.code-block[data-size="sm"] { font-size:var(--type-supporting-size); }
.code-block[data-variant="destructive"] { border-color:color-mix(in oklab,var(--destructive) 30%,transparent); }
.code-block:has(> .code-block-content:focus-visible) { border-color:var(--ring); outline:var(--focus-ring-width) solid var(--ring); outline-offset:var(--focus-ring-offset); }
.code-block-header,.code-block-footer { display:flex; align-items:center; gap:var(--space-2); min-inline-size:0; padding:var(--space-2) var(--space-2) 0 var(--space-3); color:var(--muted-foreground); }
.code-block-footer { padding:0 var(--space-3) var(--space-3); font-size:var(--type-supporting-size); }
.code-block-title { display:flex; align-items:center; gap:var(--space-2); min-inline-size:0; color:var(--foreground); overflow-wrap:anywhere; }
.code-block-title > svg { inline-size:var(--icon-size-xs); block-size:var(--icon-size-xs); flex-shrink:0; color:var(--muted-foreground); }
.code-block[data-variant="destructive"] .code-block-title > svg { color:var(--error-icon); }
.code-block-actions { display:flex; align-items:center; gap:var(--space-1); flex-shrink:0; margin-inline-start:auto; }
.code-block > .code-block-actions { position:absolute; inset-block-start:var(--space-2); inset-inline-end:var(--space-2); z-index:1; opacity:0; }
.code-block:is(:hover,:focus-within) > .code-block-actions { opacity:1; }
@media(hover:none) { .code-block > .code-block-actions { opacity:1; } }
.code-block-content { margin:0; padding:var(--space-3); overflow:auto; font-family:var(--font-mono); font-size:inherit; line-height:1.6; tab-size:2; scrollbar-width:thin; outline:none; }
.code-block[data-size="sm"] .code-block-content { padding:var(--space-2) var(--space-3); }
.code-block-content > code { display:grid; min-inline-size:max-content; font:inherit; counter-reset:line var(--code-start, 0); }
.code-block-content[data-wrap] > code { min-inline-size:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.code-block-line { position:relative; display:block; min-block-size:1lh; margin-inline:calc(-1 * var(--space-3)); padding-inline:var(--space-3); }
.code-block-content[data-numbered] .code-block-line { display:grid; grid-template-columns:auto 1fr; gap:var(--space-3); counter-increment:line; }
.code-block-content[data-numbered] .code-block-line::before { content:counter(line); min-inline-size:1.5rem; text-align:end; color:var(--muted-foreground); user-select:none; }
.code-block-line[data-variant="added"],.code-block-line[data-variant="highlighted"] { background:var(--muted); }
.code-block-line[data-variant="removed"] { background:color-mix(in oklab,var(--destructive) 10%,transparent); }
.code-block-line:is([data-variant="added"],[data-variant="removed"])::after { position:absolute; inset-inline-start:var(--space-1); color:var(--muted-foreground); user-select:none; }
.code-block-line[data-variant="added"]::after { content:"+"; }
.code-block-line[data-variant="removed"]::after { content:"−"; color:var(--error-icon); }
.code-block [data-copied="true"] .code-copy-icon,.code-block :not([data-copied="true"]) > .code-copied-icon { display:none; }

/* Calendar and date picker. Owners: calendar.md and date-pickers.md. */
.calendar { --cell-max:2.5rem; --calendar-cols:7; --calendar-months:1; position:relative; container-type:inline-size; display:grid; padding:var(--space-1); box-sizing:border-box; --calendar-full:calc(var(--calendar-months) * var(--calendar-cols) * var(--cell-max) + (var(--calendar-months) - 1) * var(--space-4) + 2 * var(--space-1)); inline-size:min(100%, var(--calendar-full)); contain-intrinsic-inline-size:var(--calendar-full); overflow-x:auto; }
@media(pointer:coarse) { .calendar { --cell-max:2.75rem; } }
.calendar[data-week-numbers] { --calendar-cols:8; }
/* On a phone, week numbers give way so the seven days keep 40px; Frederik decided on October 26, 2026. */
@media(max-width:751px) { .calendar[data-week-numbers] { --calendar-cols:7; } .calendar .calendar-week-number { display:none; } }
.calendar[data-months="2"] { --calendar-months:2; }
/* Cells keep the shared target and shrink evenly, to no less than 32px, when a month doesn't fit. */
.calendar-months { --cell-size:clamp(2rem, calc(100cqi / var(--calendar-cols)), var(--cell-max)); display:flex; flex-wrap:wrap; gap:var(--space-4); }
.calendar-header { position:absolute; inset-inline:var(--space-1); inset-block-start:var(--space-1); z-index:1; display:flex; justify-content:space-between; pointer-events:none; }
.calendar-header > .btn { pointer-events:auto; }
.calendar-month { display:grid; gap:var(--space-1); }
.calendar-caption { display:flex; align-items:center; justify-content:center; gap:var(--space-1); min-block-size:var(--control-min-block); padding-inline:var(--control-min-block); }
.calendar-select select { inline-size:auto; padding-inline-end:var(--space-8); }
.calendar-grid { border-collapse:separate; border-spacing:0 var(--space-half); }
.calendar-grid th { inline-size:var(--cell-size); padding:0; color:var(--muted-foreground); font-size:var(--type-supporting-size); font-weight:var(--font-weight-regular); text-align:center; }
.calendar-grid td { padding:0; text-align:center; }
.calendar-week-number { color:var(--muted-foreground); font-size:var(--type-supporting-size); }
.calendar-day { display:grid; place-items:center; inline-size:var(--cell-size); block-size:var(--cell-size); padding:0; border:0; border-radius:var(--radius-md); background:transparent; color:var(--foreground); font:inherit; font-variant-numeric:var(--type-numeric-variant); cursor:pointer; }
@media(hover:hover) { .calendar-day:not([aria-disabled="true"]):hover { background:var(--muted); } }
.calendar-day[aria-current="date"] { background:var(--muted); }
.calendar-day[data-outside] { color:var(--muted-foreground); }
.calendar-day[aria-disabled="true"] { color:var(--muted-foreground); opacity:.5; text-decoration:line-through; cursor:not-allowed; }
[aria-selected="true"] > .calendar-day { background:var(--primary); color:var(--primary-foreground); }
[aria-selected="true"] > .calendar-day[data-range-middle] { border-radius:0; background:var(--muted); color:var(--foreground); }
[aria-selected="true"] > .calendar-day[data-range-start]:not([data-range-end]) { border-start-end-radius:0; border-end-end-radius:0; }
[aria-selected="true"] > .calendar-day[data-range-end]:not([data-range-start]) { border-start-start-radius:0; border-end-start-radius:0; }
.calendar-hidden { visibility:hidden; }
.calendar-nav[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.calendar-nav > svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); }
.date-picker-trigger { justify-content:flex-start; min-inline-size:15rem; max-inline-size:100%; }
@media(max-width:30rem) { .date-picker-trigger { min-inline-size:min(15rem, 100%); } }
.date-picker-trigger[data-empty] .date-picker-label { color:var(--muted-foreground); }
.popover { position:fixed; z-index:5; max-inline-size:calc(100vw - 2rem); overflow:auto; }
.date-picker-panel { padding:0; }
.date-picker-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); padding:var(--space-2) var(--space-3) var(--space-3); border-block-start:var(--border-width) var(--border-style) var(--border); }
.date-picker-presets { display:flex; flex-wrap:wrap; gap:var(--space-1); padding:var(--space-3) var(--space-3) 0; }

/* Navigation menu: disclosure buttons revealing panels of links. Owner: navigation-menus.md. */
.navigation-menu > ul { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); margin:0; padding:0; list-style:none; }
.navigation-menu-trigger,.navigation-menu-link { display:inline-flex; align-items:center; gap:var(--space-1); min-block-size:var(--control-min-block); padding:var(--space-2) var(--space-3); border:0; border-radius:var(--radius-md); background:transparent; color:var(--foreground); font:inherit; text-decoration:none; cursor:pointer; }
@media(hover:hover) { :is(.navigation-menu-trigger,.navigation-menu-link):hover { background:var(--muted); } }
.navigation-menu-trigger[aria-expanded="true"] { background:var(--muted); }
.navigation-menu-link[aria-current] { background:var(--muted); font-weight:var(--selected-weight); }
.navigation-menu-trigger > svg { inline-size:var(--icon-size-2xs); block-size:var(--icon-size-2xs); color:var(--muted-foreground); }
.navigation-menu-trigger[aria-expanded="true"] > svg { transform:rotate(180deg); }
.navigation-menu-panel { padding:var(--space-2); inline-size:min(32rem,calc(100vw - 2rem)); }
.navigation-menu-panel ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); gap:var(--space-1); margin:0; padding:0; list-style:none; }
.navigation-menu-panel a { display:grid; gap:var(--space-1); min-block-size:var(--control-min-block); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); color:var(--popover-foreground); text-decoration:none; overflow-wrap:anywhere; }
.navigation-menu-panel a:is(:hover,:focus-visible) { background:var(--accent); color:var(--accent-foreground); }
.navigation-menu-panel a[aria-current] { background:var(--accent); }
.navigation-menu-panel a .support { color:var(--muted-foreground); }
@media(forced-colors:active) {
  [aria-selected="true"] > .calendar-day { background:Highlight; color:HighlightText; forced-color-adjust:none; }
  .badge,.code-block { border-color:CanvasText; }
}

/* Pagination: page links with previous/next and a compact summary. Owner: pagination.md. */
.pagination { container-type:inline-size; inline-size:100%; }
.pagination-list { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-1); margin:0; padding:0; list-style:none; }
.pagination-list a { text-decoration:none; }
.pagination-list a[aria-current="page"] { font-weight:var(--selected-weight); }
.pagination-list a[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.pagination-edge .btn { gap:var(--space-1); padding-inline:var(--space-2); }
.pagination-ellipsis { display:inline-grid; place-items:center; inline-size:var(--control-min-block); block-size:var(--control-min-block); color:var(--muted-foreground); }
.pagination-ellipsis > svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); }
.pagination-summary { display:none; padding-inline:var(--space-2); color:var(--muted-foreground); font-variant-numeric:var(--type-numeric-variant); white-space:nowrap; }
@container (max-width:30rem) { .pagination-text { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .pagination-number[data-sibling] { display:none; } }
@container (max-width:22rem) { .pagination-number { display:none; } .pagination-summary { display:block; } }

/* Scroll area: native scrolling with a quiet thin scrollbar. Owner: scroll-areas.md. */
.scroll-area,.table-region,.menu,.popover,.code-block-content,.attachment-group,.navbar .breadcrumb,.catalog-tablist,.settings-scroll,.sidebar-middle { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.scroll-area { overflow:auto; max-inline-size:100%; overscroll-behavior:contain; border-radius:var(--radius-md); }
.scroll-area[data-orientation="horizontal"] { overflow-x:auto; overflow-y:hidden; }
.scroll-area[data-orientation="vertical"] { overflow-x:hidden; overflow-y:auto; }
.scroll-area:focus-visible { outline:var(--focus-ring-width) solid var(--ring); outline-offset:var(--focus-ring-offset); }
@media(hover:hover) { .scroll-area:hover { scrollbar-color:var(--muted-foreground) transparent; } }

/* Toast: brief notifications in one top-layer region. Owner: toasts.md. */
.toast-viewport { position:fixed; inset:auto var(--space-4) var(--space-4) auto; z-index:50; inline-size:min(24rem,calc(100vw - 2 * var(--space-4))); max-block-size:calc(100dvh - 2 * var(--space-4)); margin:0; padding:0; border:0; background:transparent; overflow:visible; pointer-events:none; }
.toast-list { display:flex; flex-direction:column; justify-content:flex-end; gap:var(--space-3); margin:0; padding:0; list-style:none; }
.toast { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-4); pointer-events:auto; overflow-wrap:anywhere; }
.toast:focus-visible { outline:var(--focus-ring-width) solid var(--ring); outline-offset:var(--focus-ring-offset); }
.toast-icon { display:inline-grid; place-items:center; flex:0 0 var(--icon-size-sm); block-size:1.3125rem; }
.toast-icon > svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); }
.toast[data-type="error"] .toast-icon { color:var(--error-icon); }
.toast[data-type="warning"] .toast-icon { color:var(--warning-icon); }
.toast-content { display:grid; gap:var(--space-half); flex:1; min-inline-size:0; }
.toast-content > p { margin:0; }
.toast-description { color:var(--muted-foreground); }
.toast-actions { display:flex; align-items:center; gap:var(--space-1); flex-shrink:0; margin-block:calc(-1 * var(--space-2)); }
.toast-close { --button-fg:var(--muted-foreground); }
@media(max-width:751px) { .toast-viewport { inset:auto var(--space-4) var(--space-4); inline-size:auto; } }
@media(forced-colors:active) { .toast { border:1px solid CanvasText; } }
.table-pagination .pagination { flex:1 1 16rem; inline-size:auto; }
.table-pagination .pagination-list { justify-content:flex-end; }

/* Empty state: media, title, description and next action. Owner: empty-states.md. */
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4); inline-size:100%; min-inline-size:0; padding:var(--space-6); text-align:center; border-radius:var(--radius-lg); box-sizing:border-box; overflow-wrap:anywhere; }
.empty[data-variant="outline"] { border:var(--border-width) dashed var(--border); }
.empty[data-size="sm"] { gap:var(--space-3); padding:var(--space-4); }
.empty-header { display:grid; justify-items:center; gap:var(--space-2); max-inline-size:24rem; }
.empty-media { display:grid; place-items:center; margin-block-end:var(--space-2); }
.empty-media[data-variant="icon"] { inline-size:var(--space-8); block-size:var(--space-8); border-radius:var(--radius-md); background:var(--muted); color:var(--foreground); }
.empty-media[data-variant="icon"] > :is(svg,.spinner) { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); }
.empty-media[data-tone="error"] { background:color-mix(in oklab,var(--destructive) 10%,var(--card)); color:var(--error-icon); }
.empty-media[data-tone="warning"] { color:var(--warning-icon); }
.empty-media > img { display:block; inline-size:min(100%,20rem); block-size:auto; aspect-ratio:16 / 9; object-fit:cover; border-radius:var(--radius-lg); }
.empty-title { margin:0; font-size:var(--type-subheading-size); line-height:var(--type-subheading-leading); }
.empty-description { margin:0; color:var(--muted-foreground); }
.empty-content { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2); max-inline-size:24rem; }

/* Skeleton: a static placeholder in the shape of the content. Owner: skeletons.md. */
.skeleton { display:block; inline-size:100%; max-inline-size:100%; block-size:var(--space-4); border-radius:var(--radius-md); background:var(--muted); }
.skeleton[data-shape="text"] { block-size:.75rem; border-radius:var(--radius-sm); }
.skeleton[data-shape="title"] { block-size:var(--space-4); border-radius:var(--radius-sm); }
.skeleton[data-shape="circle"] { flex:0 0 auto; inline-size:var(--space-8); block-size:var(--space-8); border-radius:var(--radius-circle); }
.skeleton[data-shape="control"] { block-size:var(--control-min-block); }
.skeleton[data-shape="metric"] { block-size:calc(var(--type-metric-size) * var(--type-metric-leading)); }
.skeleton[data-shape="chart"] { block-size:var(--chart-plot-height,15rem); }
.skeleton[data-shape="sparkline"] { inline-size:6rem; block-size:1.5rem; border-radius:var(--radius-sm); }
.skeleton[data-shape="meter"] { block-size:var(--space-2); border-radius:var(--radius-full); }
.skeleton[data-shape="heatmap"] { block-size:auto; aspect-ratio:24 / 7; }
.skeleton[data-shape="donut"] { flex:none; inline-size:min(100%,11rem); block-size:auto; aspect-ratio:1; margin-inline:auto; border-radius:var(--radius-circle); background:radial-gradient(closest-side,transparent calc(100% * 64 / 88),var(--muted) calc(100% * 64 / 88)); }
.skeleton-group { display:grid; gap:var(--space-3); inline-size:100%; }
.skeleton-row { display:flex; align-items:center; gap:var(--space-3); min-inline-size:0; }
.skeleton-row > .skeleton-group { gap:var(--space-2); }
@media(forced-colors:active) { .skeleton { background:Canvas; border:1px solid GrayText; } .empty[data-variant="outline"] { border-color:CanvasText; } }

/* Error summary: all invalid fields after submit, linked to each one. Owner: fields.md. */
.error-summary { display:grid; gap:var(--space-2); padding:var(--space-4); border:var(--border-width) var(--border-style) color-mix(in oklab,var(--destructive) 40%,var(--border)); border-radius:var(--radius-md); background:var(--card); color:var(--card-foreground); }
.error-summary:focus-visible { outline:var(--focus-ring-width) solid var(--ring); outline-offset:var(--focus-ring-offset); }
.error-summary-title { display:flex; align-items:center; gap:var(--space-2); margin:0; font-size:var(--type-subheading-size); line-height:var(--type-subheading-leading); }
.error-summary-title > svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); flex-shrink:0; color:var(--error-icon); }
.error-summary-list { display:grid; gap:var(--space-1); margin:0; padding-inline-start:var(--space-6); }

/* Button sizes. Default (40px) is the main size for calls to action; sm (32px) is the navbar default and, with xs (24px),
   is for controls inside components. Components below set their buttons' size; data-size works anywhere. Owner: buttons.md#sizes. */
:is(.btn[data-size="sm"], .tablist .btn, .menu .btn, .menubar .btn, .card-header > .btn.icon-button, .contained-row > .btn.icon-button, .data-table .btn, .collection-filters .btn, .search-active .btn, .pagination-list .btn, .toast-actions .btn, .calendar-nav, .date-picker-presets .btn, .breadcrumb-more, .attachment-actions .btn, .input-group .btn, .modal-close, :where(.navbar-start,.navbar-end) > .btn:not([data-size])) { --control-min-block:2rem; gap:var(--space-1); padding:var(--space-1) calc(var(--space-2) + var(--space-half)); }
:is(.btn[data-size="sm"], .tablist .btn, .menu .btn, .menubar .btn, .card-header > .btn.icon-button, .contained-row > .btn.icon-button, .data-table .btn, .collection-filters .btn, .search-active .btn, .pagination-list .btn, .toast-actions .btn, .calendar-nav, .date-picker-presets .btn, .breadcrumb-more, .attachment-actions .btn, .input-group .btn, .modal-close, :where(.navbar-start,.navbar-end) > .btn:not([data-size])).icon-button { padding:var(--space-1); }
:is(.btn[data-size="sm"], .tablist .btn, .menu .btn, .menubar .btn, .card-header > .btn.icon-button, .contained-row > .btn.icon-button, .data-table .btn, .collection-filters .btn, .search-active .btn, .pagination-list .btn, .toast-actions .btn, .calendar-nav, .date-picker-presets .btn, .breadcrumb-more, .attachment-actions .btn, .input-group .btn, .modal-close, :where(.navbar-start,.navbar-end) > .btn:not([data-size])) svg { inline-size:var(--icon-size-xs); block-size:var(--icon-size-xs); }
:is(.btn[data-size="xs"], .code-block-actions .btn) { --control-min-block:1.5rem; gap:var(--space-1); padding:0 var(--space-2); border-radius:var(--radius-sm); font-size:var(--type-supporting-size); }
:is(.btn[data-size="xs"], .code-block-actions .btn).icon-button { padding:var(--space-1); }
:is(.btn[data-size="xs"], .code-block-actions .btn) svg { inline-size:var(--icon-size-2xs); block-size:var(--icon-size-2xs); }
/* On touch screens every button returns to the shared 44px target. */
@media(pointer:coarse) { :is(.btn[data-size="sm"], .tablist .btn, .menu .btn, .menubar .btn, .card-header > .btn.icon-button, .contained-row > .btn.icon-button, .data-table .btn, .collection-filters .btn, .search-active .btn, .pagination-list .btn, .toast-actions .btn, .calendar-nav, .date-picker-presets .btn, .breadcrumb-more, .attachment-actions .btn, .input-group .btn, .modal-close, :where(.navbar-start,.navbar-end) > .btn:not([data-size]), .btn[data-size="xs"], .code-block-actions .btn) { --control-min-block:2.75rem; } }

/* Metric tiles: one number per tile, with a caption, change, trend or limit. Owner: metric-tiles.md. */
.metric-tile-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); gap:var(--gap-grid); margin:0; }
.metric-tile { --metric-surface:var(--card); position:relative; display:grid; align-content:start; gap:var(--space-2); min-inline-size:0; margin:0; padding:var(--layout-panel-padding); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); background-color:var(--metric-surface); color:var(--card-foreground); transition:background-color var(--motion-duration-feedback) var(--motion-easing-feedback); }
/* The Nova data-table row hover: orientation only, never a click target. */
@media(hover:hover) { .metric-tile:hover { --metric-surface:color-mix(in oklab,var(--muted) 50%,var(--card)); } }
.metric-tile :is(dt,dd) { min-inline-size:0; margin:0; }
.metric-tile-label, .bar-list-name, .bar-list-parts, :is(.share-total-label,.share-donut-label), .chart-headline > span:last-child, .funnel-summary-label, .flow-status, .flow-current, .timeline-sub, .file-tree-count, .file-tree-detail, .tree-fixed { font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); color:var(--muted-foreground); }
.metric-tile-value { font-size:var(--type-metric-size); line-height:var(--type-metric-leading); letter-spacing:var(--type-metric-tracking); font-variant-numeric:var(--type-numeric-variant); color:var(--card-foreground); }
.metric-tile[data-emphasis="headline"] .metric-tile-value { font-size:var(--type-display-size); line-height:var(--type-display-leading); letter-spacing:var(--type-display-tracking); }
.metric-tile-unit { font-size:var(--type-body-size); letter-spacing:var(--type-tracking-normal); color:var(--muted-foreground); }
.metric-tile-value[data-empty] { color:var(--muted-foreground); }
.metric-tile-detail { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-2); min-block-size:calc(var(--type-supporting-size) * var(--type-supporting-leading)); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); color:var(--muted-foreground); }
.metric-tile-detail > .skeleton { inline-size:70%; }
.metric-tile-error > svg { color:var(--error-icon); }
.metric-change { display:inline-flex; align-items:center; gap:var(--space-1); border-radius:var(--radius-sm); color:var(--card-foreground); font-variant-numeric:var(--type-numeric-variant); }
.metric-change > svg { inline-size:var(--icon-size-xs); block-size:var(--icon-size-xs); }
/* Sparkline: one 2px line in the mark color, an end dot, and a cursor and active dot on hover or focus. */
.sparkline { position:relative; inline-size:100%; block-size:var(--space-8); color:var(--chart-mark-line); touch-action:pan-y; }
.sparkline > svg { display:block; inline-size:100%; block-size:100%; overflow:visible; }
.sparkline polyline { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sparkline-cursor { position:absolute; inset-block:0; inline-size:var(--border-width); background:var(--chart-cursor); transform:translateX(-50%); pointer-events:none; }
.sparkline[data-size="sm"] { display:block; inline-size:6rem; max-inline-size:100%; block-size:1.5rem; touch-action:auto; }
.sparkline rect { fill:var(--chart-context); stroke:none; }
.sparkline rect[data-latest] { fill:var(--chart-mark); }
.sparkline-dot { position:absolute; inline-size:var(--space-2); block-size:var(--space-2); border-radius:var(--radius-full); background:currentColor; box-shadow:0 0 0 2px var(--metric-surface,var(--card)); transform:translate(-50%,-50%); pointer-events:none; }
/* Meter: a value against a limit; the text beside it carries the exact numbers. */
.meter { block-size:var(--space-2); border-radius:var(--radius-full); background:var(--chart-track); overflow:hidden; }
.meter-fill { display:block; inline-size:0; block-size:100%; border-radius:inherit; background:var(--chart-mark); }
/* Standalone meters: name and amount on one row, the meter, then what's left. Owner: meters.md. */
.meter-group { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
.meter-item { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-2); }
.meter-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 var(--space-3); margin:0; }
.meter-value { color:var(--muted-foreground); font-variant-numeric:var(--type-numeric-variant); }
/* Notes under meters and tables: what's left, a warning or what failed, with an optional Try again. Owners: meters.md, sparklines.md. */
:is(.meter-note,.chart-note) { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin:0; font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); color:var(--muted-foreground); }
:is(.meter-note,.chart-note) > svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); flex-shrink:0; }
:is(.meter-note,.chart-note) > svg[data-tone="warning"] { color:var(--warning-icon); }
:is(.meter-note,.chart-note) > svg[data-tone="error"] { color:var(--error-icon); }
/* A missing value: a muted dash, with its meaning in visually hidden text or the owner's accessible name. */
.chart-empty { color:var(--muted-foreground); }
.sparkline > .chart-empty { display:flex; align-items:center; block-size:100%; }
.meter[data-split] { display:flex; gap:2px; }
.meter-part { flex:none; block-size:100%; background:var(--part,var(--chart-mark)); }
.meter-part:first-child { border-start-start-radius:inherit; border-end-start-radius:inherit; }

/* Chart tooltip: a data card for chart marks, separate from the text tooltip. Owner: chart-tooltips.md. */
.chart-tooltip { position:fixed; inset:auto; z-index:50; display:grid; gap:calc(var(--space-1) + var(--space-half)); inline-size:max-content; min-inline-size:8rem; max-inline-size:min(16rem,calc(100vw - 2rem)); margin:0; padding:calc(var(--space-1) + var(--space-half)) calc(var(--space-2) + var(--space-half)); font-family:var(--font-sans); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); overflow:visible; pointer-events:none; }
.chart-tooltip:not(:popover-open) { display:none; }
.chart-tooltip-label { margin:0; }
.chart-tooltip-rows { display:grid; gap:calc(var(--space-1) + var(--space-half)); }
.chart-tooltip-row { display:flex; align-items:center; gap:var(--space-2); margin:0; line-height:1; }
.chart-tooltip-indicator { flex-shrink:0; inline-size:.625rem; block-size:.625rem; border-radius:calc(var(--radius) * .2); background:var(--indicator,var(--chart-mark)); }
.chart-tooltip-name { flex:1; color:var(--muted-foreground); }
.chart-tooltip-value { font-variant-numeric:var(--type-numeric-variant); }
/* shadcn's line and dashed indicators key line charts; dashed marks an earlier period. */
.chart-tooltip-indicator[data-indicator="line"] { inline-size:.25rem; block-size:auto; min-block-size:.75rem; align-self:stretch; }
.chart-tooltip-indicator[data-indicator="dashed"] { inline-size:0; block-size:auto; min-block-size:.75rem; align-self:stretch; background:none; border:1.5px dashed var(--indicator,var(--chart-mark)); border-radius:0; }
@media(forced-colors:active) { .meter { border:1px solid CanvasText; } :is(.meter-fill,.sparkline-dot,.chart-tooltip-indicator) { forced-color-adjust:none; background:CanvasText; } .sparkline-cursor { background:CanvasText; } }

/* Chart legend: keys above the plot for two or more series; lines for line charts, squares for bars. Owner: line-charts.md#legend-and-labels. */
.chart-legend { display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-4); margin:0; padding:0; list-style:none; font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); color:var(--muted-foreground); }
.chart-legend li { display:inline-flex; align-items:center; gap:var(--space-2); }
.chart-legend-key { inline-size:var(--space-3); border-block-start:2px solid var(--key); }
.chart-legend-key[data-dashed] { border-block-start-style:dashed; }
.chart-legend-key[data-shape="square"] { inline-size:.625rem; block-size:.625rem; border:0; border-radius:calc(var(--radius) * .2); background:var(--key); }

/* Shared chart frame: a 15rem plot with gridlines and labels, a table view and state slots. Owners: line-charts.md, bar-charts.md. */
.chart { --chart-plot-height:15rem; display:grid; gap:var(--space-3); min-inline-size:0; }
.chart-plot { position:relative; block-size:var(--chart-plot-height); border-radius:var(--radius-sm); touch-action:pan-y; }
.chart-plot > svg { display:block; inline-size:100%; block-size:100%; overflow:visible; fill:none; stroke:none; }
.chart-plot text { fill:var(--muted-foreground); font-family:var(--font-sans); font-size:var(--type-supporting-size); font-variant-numeric:var(--type-numeric-variant); }
.chart-gridline { stroke:var(--chart-grid); stroke-width:1; }
.chart-table { max-block-size:var(--chart-plot-height); }
.chart-state { display:grid; place-items:center; min-block-size:var(--chart-plot-height); }

/* Line chart: one to four series over time. Owner: line-charts.md. */
.chart-plot .line-chart-end { fill:var(--card-foreground); }
.line-chart-series { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.line-chart-series[data-dashed] { stroke-dasharray:4 4; }
.line-chart-series[data-thin] { stroke-width:1.5; }
/* End and marker labels keep a card-colored halo where they cross a line. */
.chart-plot :is(.line-chart-end, .line-chart-marker-label) { paint-order:stroke; stroke:var(--card); stroke-width:4px; stroke-linejoin:round; }
.chart-plot .line-chart-marker-label { fill:var(--card-foreground); }
.chart-plot .line-chart-marker-label[data-kind="target"] { fill:var(--muted-foreground); }
.line-chart-marker { stroke:var(--foreground); stroke-width:1; }
.line-chart-marker[data-kind="target"] { stroke:var(--muted-foreground); stroke-dasharray:3 3; }
.line-chart-cursor { stroke:var(--chart-cursor); stroke-width:1; }
.line-chart-dot { stroke:var(--card); stroke-width:2; }

/* Bar chart: columns in the shared frame, and ranked bars as a list. Owner: bar-charts.md. */
.bar-chart-band { fill:var(--chart-band); }
/* Bridge: totals in context gray, every change in one color, thin links between them and a break on totals above a broken axis. Owner: bar-charts.md#bridges. */
.bridge-chart-column[data-kind="total"] { fill:var(--chart-context); }
.bridge-chart-column[data-kind="change"] { fill:var(--chart-series-1); }
.bridge-chart-link { stroke:var(--muted-foreground); stroke-width:1; }
.bridge-chart-break { fill:none; stroke:var(--card); stroke-width:3; }
.chart-plot .bridge-chart-value { fill:var(--card-foreground); }
@media(forced-colors:active) { .bridge-chart-column { forced-color-adjust:none; fill:CanvasText; } .bridge-chart-link { stroke:CanvasText; } }

/* Area chart: one series with a 10% wash, or stacked bands at 40% with a line along each. Owner: area-charts.md. */
.area-chart-fill { fill-opacity:.1; }
.area-chart[data-stacked] .area-chart-fill { fill-opacity:.4; }

/* Sparkline list: name, trend, value and change on one row. Owner: sparklines.md. */
.sparkline-list { display:grid; grid-template-columns:minmax(0,1fr); margin:0; padding:0; list-style:none; }
/* Rows wrap rather than scroll when enlarged text or a narrow column leaves too little room. */
.sparkline-list > li { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); padding-block:var(--space-3); border-block-end:var(--border-width) var(--border-style) var(--border); }
.sparkline-list > li > :first-child { flex:1 1 8rem; min-inline-size:0; }
/* The end dot and its ring reach 6px past the last point; keep them inside the row when the sparkline ends a line. */
.sparkline-list > li > .sparkline { flex:none; margin-inline-end:calc(var(--space-1) + var(--space-half)); }
.sparkline-list > li:last-child { border-block-end:0; }
.sparkline-list-value { flex:0 0 3rem; text-align:end; font-variant-numeric:var(--type-numeric-variant); }
.sparkline-list > li > .metric-change { flex:0 0 3.5rem; justify-content:flex-end; }
.bar-list { display:grid; gap:var(--space-1); margin:0; padding:0; list-style:none; }
.bar-list > li { display:grid; gap:var(--space-1); margin-inline:calc(-1 * var(--space-2)); padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); transition:background-color var(--motion-duration-feedback) var(--motion-easing-feedback); }
@media(hover:hover) { .bar-list > li:hover { background:var(--component-footer); } }
.bar-list-row { display:flex; align-items:center; gap:var(--space-2); }
.bar-list-bar { flex:none; inline-size:max(var(--border-width),calc((100% - 3.5rem) * var(--share,0))); block-size:var(--space-4); border-radius:0 calc(var(--radius) * .4) calc(var(--radius) * .4) 0; background:var(--chart-series-1); }
.bar-list[data-highlight] > li:not([data-highlight]) .bar-list-bar { background:var(--chart-context); }
.bar-list[data-highlight] > li[data-highlight] .bar-list-name { color:var(--card-foreground); }
.bar-list-value { color:var(--card-foreground); font-variant-numeric:var(--type-numeric-variant); }
/* Stacked ranked bars: the parts of one bar sit 2px apart; the parts' values are written beside the name. Owner: stacked-bar-charts.md. */
.bar-list-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 var(--space-3); }
.bar-list-bar[data-parts] { display:flex; gap:2px; border-radius:0; background:none; }
.bar-list-part { flex:1 1 0; min-inline-size:1px; background:var(--part,var(--chart-series-1)); }
.bar-list-part:last-child { border-start-end-radius:calc(var(--radius) * .4); border-end-end-radius:calc(var(--radius) * .4); }
.bar-list-loading { display:grid; gap:var(--space-3); }
/* Share chart: one whole as a 100% bar or a donut, drawn from the value list beneath or beside it. Owner: share-charts.md. */
/* Tracks and rows shrink, so very narrow columns at 200% text stay contained. */
.share-chart, .funnel-chart { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); min-inline-size:0; container-type:inline-size; }
.share-total { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--space-2); margin:0; }
.share-total > .metric-tile-value { font-size:min(var(--type-metric-size),24cqi); }
.share-bar { display:flex; gap:2px; block-size:var(--space-4); }
.share-bar[data-empty] { border-start-end-radius:calc(var(--radius) * .4); border-end-end-radius:calc(var(--radius) * .4); background:var(--chart-track); }
.share-bar-part { flex:1 1 0; min-inline-size:2px; background:var(--part); }
/* Like a ranked bar, the start stays square and only the end is rounded. */
.share-bar-part:last-child { border-start-end-radius:calc(var(--radius) * .4); border-end-end-radius:calc(var(--radius) * .4); }
/* Hover changes are immediate, following the visual foundation. */
.share-chart[data-active] :is(.share-bar-part,.share-donut-part):not([data-active]) { opacity:.4; }
.share-legend { display:grid; grid-template-columns:minmax(0,1fr); margin:0; padding:0; list-style:none; font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.share-legend > li { display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--space-2); margin-inline:calc(-1 * var(--space-2)); padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); }
.share-legend > li[data-active] { background:var(--component-footer); }
.share-legend-name { flex:1 1 5rem; min-inline-size:0; overflow-wrap:anywhere; color:var(--muted-foreground); }
/* The two figures stay together; when the name needs the room, they move to their own line at the end. */
.share-legend-figures { display:flex; flex-wrap:wrap; justify-content:flex-end; flex:0 1 auto; gap:0 var(--space-2); max-inline-size:100%; margin-inline-start:auto; }
:is(.share-legend-count,.share-legend-value) { text-align:end; font-variant-numeric:var(--type-numeric-variant); }
.share-legend-count { min-inline-size:3rem; color:var(--muted-foreground); }
.share-legend-value { min-inline-size:2.5rem; color:var(--card-foreground); }
.share-donut-layout { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4) var(--space-6); }
.share-donut-layout > :is(.share-legend,.skeleton-group,.chart-note) { flex:1 1 12rem; min-inline-size:0; }
.share-donut { position:relative; flex:none; inline-size:min(100%,11rem); aspect-ratio:1; margin-inline:auto; container-type:inline-size; }
.share-donut > svg { display:block; inline-size:100%; block-size:100%; fill:none; stroke:none; }
.share-donut-part { fill:var(--part); }
/* One part fills the whole ring, with no gap. */
.share-donut-part[data-ring] { fill:none; stroke:var(--part); }
.share-donut-track { stroke:var(--chart-track); }
.share-donut-center { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; margin:0; pointer-events:none; }
.share-donut-center > .metric-tile-value { font-size:min(var(--type-metric-size),18cqi); }
/* Histogram and scatter plot: a headline, named axes, markers and dots on the shared chart frame. Owners: histograms.md, scatter-plots.md. */
.histogram,.scatter { container-type:inline-size; }
.chart-headline { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--space-2); margin:0; }
.chart-headline > .metric-tile-value { font-size:min(var(--type-metric-size),9cqi + 1rem); }
.chart-marker { stroke:var(--chart-comparison); stroke-width:1; stroke-dasharray:4 4; }
.chart-plot .chart-marker-label { fill:var(--card-foreground); }
.chart-axis { margin:0; font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); color:var(--muted-foreground); }
.chart-axis[data-axis="x"] { text-align:end; }
/* Dots carry a 2px ring in the card color, so overlapping dots stay separate. */
.scatter-dot { fill:var(--dot,var(--chart-mark-line)); stroke:var(--card); stroke-width:2; }
.scatter-dot[data-context] { fill:var(--chart-context); }
.scatter-ring { fill:none; stroke:var(--card-foreground); stroke-width:2; }
.scatter-trend { stroke:var(--chart-comparison); stroke-width:2; stroke-dasharray:4 4; }
.chart-plot .scatter-name { fill:var(--card-foreground); }
/* Node-link graph: a quiet field with floating search, counts and controls, adapted from the Kontext Keys graph view. Owner: node-link-graphs.md. */
/* The stage sits on its own quiet field: a very light gray in light mode (#f8f8f8, as in Kontext Keys) and a shade darker than the card in dark mode. */
.graph { --graph-canvas:color-mix(in oklab,var(--muted) 70%,var(--card)); --graph-document:var(--chart-series-1); --graph-concept:var(--chart-tone-1); --graph-entity:var(--chart-series-3); --graph-memory:var(--chart-tone-3); --graph-line:var(--chart-context);
  --graph-muted:color-mix(in oklab,var(--muted-foreground) 85%,var(--foreground));
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-3); min-inline-size:0; container-type:inline-size; }
.dark .graph,:root[data-theme="dark"] .graph { --graph-canvas:color-mix(in oklab,var(--background) 60%,var(--card)); }
.graph-vocabulary { --graph-canvas:var(--card); --graph-document:var(--chart-series-1); --graph-concept:var(--chart-tone-1); --graph-entity:var(--chart-series-3); --graph-memory:var(--chart-tone-3); --graph-line:var(--chart-context); display:grid; gap:var(--space-3); min-inline-size:0; }
/* Filters above the graph reuse the search and filtering pattern's layout: fields flex and wrap, and Reset all sits at the end. */
.graph-filters { display:flex; flex-wrap:wrap; align-items:end; gap:var(--space-4); }
.graph-filters > .field { flex:1 1 10rem; min-inline-size:0; }
.graph-filters > .btn { margin-inline-start:auto; }
.graph-active-filters[hidden] { display:none; }
.graph-active-filters .btn { max-inline-size:100%; text-align:start; }
/* Legend entries double as filters: pressed shows the kind, released hides it. */
/* The chart legend with show/hide toggles. Items carry 8px padding for their toggles, so no gap keeps them 16px apart like the chart legend. */
.graph-legend { column-gap:0; }
.graph-legend li:not(:has(button)) { padding-inline:var(--space-2); }
.graph-legend svg { inline-size:var(--icon-size-xs); block-size:var(--icon-size-xs); overflow:visible; fill:none; stroke:none; }
.graph-legend-toggle { display:inline-flex; align-items:center; gap:var(--space-2); min-block-size:2rem; padding-inline:var(--space-2); border:0; border-radius:var(--radius-md); background:none; color:var(--card-foreground); font:inherit; cursor:pointer; }
@media(hover:hover) { .graph-legend-toggle:hover:not(:disabled) { background:var(--component-footer); } }
.graph-legend-toggle[aria-pressed="false"] { color:var(--muted-foreground); text-decoration:line-through; }
.graph-legend-toggle[aria-pressed="false"] svg { opacity:.3; }
.graph-legend-toggle:disabled { cursor:default; }
/* Muted text on the gray field is a little stronger, so it keeps 4.5:1 against it. */
.graph-stage { --muted-foreground:var(--graph-muted); position:relative; block-size:28rem; overflow:hidden; border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); background:var(--graph-canvas); touch-action:none; }
.graph[data-compact] .graph-stage { block-size:14rem; }
/* Show list replaces the field at the same height, scrolling inside it. */
.graph > .table-region { max-block-size:28rem; }
.graph[data-compact] > .table-region { max-block-size:14rem; }
/* What each item relates to gets room to read in a line or two; narrow cards scroll the table sideways. */
.graph > .table-region td:last-child { min-inline-size:12rem; }
/* Loading, no graph yet and couldn’t load fill the same field the graph sits in, with their message centered. */
.graph-stage > .chart-state { min-block-size:100%; }
.graph-loading { display:flex; align-items:center; gap:var(--space-2); margin:0; color:var(--muted-foreground); }
.graph-stage > svg { display:block; inline-size:100%; block-size:100%; fill:none; stroke:none; }
.graph-stage:focus-visible { outline-offset:2px; }
.graph-stage text { fill:var(--card-foreground); font-family:var(--font-sans); font-size:.75rem; paint-order:stroke; stroke:var(--graph-canvas); stroke-width:3px; stroke-linejoin:round; }
.graph-edge { stroke:var(--graph-line); stroke-width:1; }
.graph-edge[data-kind="semantic"] { stroke-dasharray:4 3; }
.graph-edge[data-kind="memory"] { stroke-dasharray:1 3; stroke-linecap:round; }
/* A focused item's relationships turn orange at twice the width; a hovered or selected relationship at two and a half. */
.graph-edge[data-near] { stroke:var(--chart-mark-line); stroke-width:2; }
.graph-edge[data-hot] { stroke:var(--chart-mark-line); stroke-width:2.5; }
.graph-edge[data-far] { opacity:.07; }
.graph-node[data-far],.graph-stage text[data-far] { opacity:.12; }
.graph-node[data-dim] { opacity:.45; }
/* Reserved: a memory is a hollow, dashed circle, as in Kontext Keys. */
.graph-node[data-hollow] { stroke-width:1.5; stroke-dasharray:2 2; }
.graph-ring { fill:none; stroke:var(--chart-mark-line); stroke-width:1.5; }
.graph-ring[data-strong] { stroke-width:2.5; }
.graph-stage text.graph-edge-label { fill:var(--muted-foreground); font-size:.6875rem; }
/* Controls float over the stage, as in Kontext Keys, on the opaque floating surface rather than a translucent blur. */
.graph-overlay { position:absolute; z-index:1; }
.graph-search-area { inset-block-start:var(--space-3); inset-inline-start:var(--space-3); display:grid; justify-items:start; gap:var(--space-2); inline-size:min(20rem,calc(100% - var(--space-6))); }
.graph-search { display:flex; align-items:center; gap:var(--space-2); inline-size:100%; min-block-size:var(--control-min-block); padding-inline:var(--space-3) var(--space-1); border-radius:var(--radius-full); }
/* The pill is a search field, so it takes the field border rather than the faint floating one. */
.graph-search.floating { border-color:var(--input); }
/* Icon buttons for clearing the search and closing details: a 32px round target with the shared close icon. */
.graph-icon-button { display:inline-grid; place-items:center; flex:none; inline-size:2rem; block-size:2rem; min-inline-size:2rem; padding:0; border-radius:var(--radius-full); }
.graph-icon-button > svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); }
.graph-icon-button[hidden] { display:none; }
.graph-search:focus-within { outline:var(--focus-ring-width) solid var(--ring); outline-offset:var(--focus-ring-offset); }
.graph-search > svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); flex-shrink:0; color:var(--muted-foreground); }
.graph-search input { flex:1; min-inline-size:0; border:0; background:none; color:inherit; font:inherit; font-size:var(--type-supporting-size); outline:none; }
.graph-search input::-webkit-search-cancel-button { display:none; }
/* The pill carries the focus ring, so the field inside it doesn’t draw a second one. */
.graph-search input:focus-visible { outline:none; }
/* Status lines sit straight on the field, without a background; the layout keeps the graph clear of them. */
.graph-status,.graph-updated { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-2); margin:0; padding-inline:var(--space-3); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); color:var(--card-foreground); font-variant-numeric:var(--type-numeric-variant); }
.graph-status[hidden] { display:none; }
.graph-updated { padding-inline:0; color:var(--muted-foreground); }
.graph-matches { inline-size:100%; margin:0; padding:var(--space-1); list-style:none; }
.graph-matches[hidden] { display:none; }
.graph-matches li { display:flex; align-items:center; gap:var(--space-2); min-block-size:2.25rem; padding-inline:var(--space-2); border-radius:var(--radius-sm); font-size:var(--type-supporting-size); cursor:pointer; }
.graph-matches li[aria-selected="true"] { background:var(--accent); color:var(--accent-foreground); }
@media(hover:hover) { .graph-matches li:hover { background:var(--component-footer); } }
.graph-matches svg { inline-size:var(--icon-size-xs); block-size:var(--icon-size-xs); flex-shrink:0; overflow:visible; fill:none; stroke:none; }
.graph-matches li > span:nth-child(2) { flex:1; min-inline-size:0; overflow-wrap:anywhere; }
.graph-match-kind { color:var(--muted-foreground); }
.graph-stats { inset-block-start:var(--space-3); inset-inline-end:var(--space-3); display:grid; justify-items:end; gap:var(--space-1); }
.graph-stat-tiles { display:flex; gap:var(--space-2); }
.graph-stat { display:grid; margin:0; padding:var(--space-2) var(--space-3); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); color:var(--muted-foreground); }
.graph-stat strong { font-size:1.25rem; line-height:1.2; font-weight:inherit; color:var(--popover-foreground); font-variant-numeric:var(--type-numeric-variant); }
/* Zoom, layout and the product's own actions share the bottom-left slot. */
.graph-controls { inset-block-end:var(--space-3); inset-inline-start:var(--space-3); display:flex; flex-wrap:wrap; gap:var(--space-1); max-inline-size:calc(100% - var(--space-6)); }
.graph-controls .btn { min-inline-size:var(--control-min-block); }
.graph-controls .graph-action { margin-inline-start:var(--space-2); }
.graph-details { position:absolute; z-index:2; grid-template-columns:minmax(0,1fr); inset-block-end:var(--space-3); inset-inline-end:var(--space-3); inline-size:min(18.75rem,calc(100% - var(--space-6))); max-block-size:calc(100% - var(--space-6) - var(--graph-top,0px)); overflow:auto; display:grid; justify-items:start; gap:var(--space-2); padding:var(--space-3) var(--space-4); }
.graph-details > * { justify-self:stretch; }
.graph-details > .btn { justify-self:start; }
.graph-details[hidden] { display:none; }
.graph-details-head { display:flex; align-items:start; justify-content:space-between; gap:var(--space-2); }
.graph-details-head > div { display:grid; justify-items:start; gap:var(--space-1); min-inline-size:0; }
.graph-details-head .badge { max-inline-size:100%; white-space:normal; }
.graph-details h4 { margin:0; overflow-wrap:anywhere; }
.graph-details p { margin:0; font-size:var(--type-supporting-size); color:var(--muted-foreground); }
.graph-details-section { padding-block-start:var(--space-2); border-block-start:var(--border-width) var(--border-style) var(--border); }
.graph-details ul { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-1); margin:0; padding:0; list-style:none; }
.graph-details li button { display:flex; flex-wrap:wrap; gap:0 var(--space-2); inline-size:100%; padding:var(--space-1) var(--space-2); border:0; border-radius:var(--radius-sm); background:none; color:inherit; font:inherit; font-size:var(--type-supporting-size); text-align:start; cursor:pointer; }
.graph-details li button:hover { background:var(--component-footer); }
.graph-details li span:first-child { color:var(--muted-foreground); }
.graph-details-rows { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-1) var(--space-3); margin:0; padding-block-start:var(--space-2); border-block-start:var(--border-width) var(--border-style) var(--border); font-size:var(--type-supporting-size); }
.graph-details-rows dt { color:var(--muted-foreground); }
.graph-details-rows dd { margin:0; text-align:end; overflow-wrap:anywhere; }
.graph-note { margin:0; font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); color:var(--muted-foreground); }
.graph-nomatch { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:var(--space-2); text-align:center; }
.graph-nomatch[hidden] { display:none; }
/* Vocabulary: specimens of every kind in every state. */
.graph-specimen { display:block; inline-size:2.5rem; block-size:2rem; margin-inline:auto; overflow:visible; fill:none; stroke:none; }
.graph-vocabulary-table th[scope="row"] { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-2); }
.graph-vocabulary-table td:last-child { color:var(--muted-foreground); }
.graph-pairings { display:grid; gap:var(--space-1); margin:0; padding:0; list-style:none; font-size:var(--type-supporting-size); color:var(--muted-foreground); }
.graph-pairings li { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.graph-pairings .graph-specimen { margin:0; }
/* In narrow cards, and with enlarged text, the overlays leave the field: search above the graph, then the graph, then the
   counts and status, then controls, in rows below it, and details under those, so nothing overlaps. */
@container (max-width:36rem) {
  .graph-stage { display:flex; flex-direction:column; gap:var(--space-3); block-size:auto; min-block-size:28rem; padding-block:var(--space-3); }
  .graph-stage > svg { order:2; flex:1 1 12rem; min-block-size:12rem; }
  .graph-stage > .chart-state { flex:1; min-block-size:0; }
  .graph-overlay,.graph-details { position:static; }
  /* One shrinkable column, so a long status button can't widen the search past the field. */
  .graph-search-area { order:1; inline-size:auto; margin-inline:var(--space-3); grid-template-columns:minmax(0,1fr); }
  .graph-nomatch { position:static; order:2; flex:1 1 12rem; min-block-size:12rem; }
  .graph-stage:has(> .graph-nomatch:not([hidden])) > svg { display:none; }
  .graph-stats { order:3; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); margin-inline:var(--space-3); }
  /* The count tiles become a line of text, so counts and their status stay visible. */
  .graph-stat-tiles { gap:var(--space-3); }
  .graph-stat { display:inline-flex; align-items:baseline; gap:var(--space-1); padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
  .graph-stat strong { font-size:inherit; line-height:inherit; color:var(--card-foreground); }
  /* A compact preview has no overlays, so it keeps its short field. */
  .graph[data-compact] .graph-stage { display:block; block-size:14rem; min-block-size:0; padding-block:0; }
  .graph-controls { order:4; margin-inline:var(--space-3); max-inline-size:none; }
  .graph-details { order:5; inline-size:auto; max-block-size:none; margin-inline:var(--space-3); }
}
/* In very narrow graphs the search keeps its field and clear button: the decorative icon goes and the padding tightens. */
@container (max-width:20rem) {
  .graph-search > svg { display:none; }
  .graph-search { flex-wrap:wrap; row-gap:0; padding-inline:var(--space-2) var(--space-half); }
  /* With almost no room, the clear button moves to its own line inside the field instead of spilling out of it. */
  .graph-search input { flex:1 1 4rem; }
  .graph-icon-button { inline-size:1.5rem; block-size:1.5rem; min-inline-size:1.5rem; }
  .graph-search-area,.graph-stats,.graph-controls,.graph-details { margin-inline:var(--space-2); }
  /* Details keep every word inside the card: the close button wraps under the title and long words break. */
  .graph-details { padding:var(--space-2); }
  .graph-details-head { flex-wrap:wrap; }
  .graph-details :is(h4,li button,dd,.badge) { overflow-wrap:anywhere; }
}
@media(forced-colors:active) { .graph-node,.graph-legend svg *,.graph-matches svg * { forced-color-adjust:none; } .graph-ring { stroke:Highlight; } .graph-edge[data-near],.graph-edge[data-hot] { stroke:Highlight; } }
/* Heatmap: cells colored by amount in four orange steps, with a legend of ranges. Owner: heatmaps.md. */
.heatmap, .flow { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-3); min-inline-size:0; }
.heatmap > .chart-state { min-block-size:9rem; }
/* The chart legend as a color scale: each key sits close to its range. */
.heatmap-legend { align-items:center; }
.heatmap-legend li { display:inline-flex; align-items:center; gap:var(--space-1); font-variant-numeric:var(--type-numeric-variant); }
.heatmap-key { inline-size:.625rem; block-size:.625rem; border-radius:calc(var(--radius) * .2); background:var(--key); }
/* Cells share the width but stop at 2rem, so a few columns don't turn into large tiles. */
.heatmap-plot { display:grid; grid-template-columns:auto repeat(var(--columns),minmax(0,2rem)); justify-content:start; gap:2px; align-items:center; border-radius:var(--radius-sm); touch-action:pan-y; }
.heatmap-row-label,.heatmap-column-label { font-size:.75rem; line-height:1; color:var(--muted-foreground); white-space:nowrap; }
.heatmap-row-label { padding-inline-end:var(--space-2); }
.heatmap-column-label { padding-block-start:var(--space-1); overflow:hidden; text-overflow:clip; }
.heatmap-cell { aspect-ratio:1; min-inline-size:0; border-radius:calc(var(--radius) * .2); background:var(--cell); }
/* Days after today stay blank, so they don't read as none. */
.heatmap-cell[data-ahead] { background:none; }
.heatmap-cell[data-active] { position:relative; z-index:1; outline:2px solid var(--card-foreground); outline-offset:1px; }
.heatmap .table-region { max-block-size:16rem; }
/* Funnel: steps measured against the first, with what continued and dropped off between them. Owner: funnels.md. */
.funnel-summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--space-2); margin:0; }
.funnel-summary > .metric-tile-value { font-size:min(var(--type-metric-size),24cqi); }
.funnel { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-1); margin:0; padding:0; list-style:none; }
.funnel > li { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-1); margin-inline:calc(-1 * var(--space-2)); padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); }
@media(hover:hover) { .funnel > li:hover { background:var(--component-footer); } }
.funnel-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 var(--space-3); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.funnel-name { min-inline-size:0; overflow-wrap:anywhere; color:var(--muted-foreground); }
.funnel-figures { display:flex; gap:var(--space-2); margin-inline-start:auto; font-variant-numeric:var(--type-numeric-variant); }
.funnel-count { color:var(--card-foreground); }
.funnel-percent { min-inline-size:2.5rem; text-align:end; color:var(--muted-foreground); }
.funnel-percent:empty { display:none; }
/* The track is as long as the first step; the bar starts square and rounds only its end, like a ranked bar. */
.funnel-track { position:relative; display:block; block-size:var(--space-4); border-radius:0 calc(var(--radius) * .4) calc(var(--radius) * .4) 0; background:var(--chart-track); }
.funnel-fill { display:block; inline-size:calc(var(--share,0) * 100%); block-size:100%; border-radius:inherit; background:var(--chart-mark); }
.funnel-marker { position:absolute; inset-block:calc(-1 * var(--space-1)); inset-inline-start:calc(var(--previous,0) * 100% - 1px); inline-size:2px; border-radius:1px; background:var(--chart-comparison); }
.funnel-marker[hidden] { display:none; }
.funnel-marker-key { inline-size:2px; block-size:.75rem; border-radius:1px; background:var(--chart-comparison); }
.funnel-drop { display:flex; align-items:center; gap:var(--space-1); margin:var(--space-1) 0 0; font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); color:var(--muted-foreground); }
.funnel-drop > svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); flex-shrink:0; }
.funnel-skeleton { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-2); }
.funnel-skeleton > .skeleton[data-shape="text"] { margin-block-start:var(--space-2); }
@media(forced-colors:active) { .chart-legend-key { border-color:CanvasText; } .chart-legend-key[data-shape="square"],.bar-list-bar,.bar-list-part,.meter-part,.share-bar-part { forced-color-adjust:none; background:CanvasText; } .share-donut-part { forced-color-adjust:none; fill:CanvasText; } .share-donut-part[data-ring] { fill:none; stroke:CanvasText; } .funnel-fill,.funnel-marker,.funnel-marker-key { forced-color-adjust:none; background:CanvasText; } .funnel-track { forced-color-adjust:none; background:Canvas; outline:1px solid GrayText; } .heatmap-key,.heatmap-cell { forced-color-adjust:none; } .heatmap-cell[data-active] { outline-color:Highlight; } .scatter-dot { forced-color-adjust:none; fill:CanvasText; stroke:Canvas; } .scatter-dot[data-context] { fill:GrayText; } .bar-list-bar[data-parts] { background:none; } .chart-gridline { stroke:GrayText; } }

/* Flow diagram: stage columns, step cards, groups and right-angled connections on the canvas. Owner: flow-diagrams.md. */
/* Legend entries wrap inside narrow cards and enlarged text instead of widening the diagram. */
.flow-legend li { min-inline-size:0; overflow-wrap:anywhere; }
.flow-legend .status-label[data-appearance="tag"] { white-space:normal; }
.flow-legend { gap:var(--space-1) var(--space-4); }
.flow-legend .chart-legend-key { inline-size:var(--space-6); }
.flow-legend .status-label { font-size:inherit; }
.flow-stage { position:relative; min-inline-size:0; }
.flow-viewport { position:relative; overflow:auto; border-radius:var(--radius-md); background:var(--flow-canvas); overscroll-behavior-inline:contain; }
.flow-sizer { position:relative; margin-inline:auto; }
.flow-canvas, .tree-canvas { position:absolute; inset:0 auto auto 0; transform-origin:0 0; }
.flow-lines { position:absolute; inset:0 auto auto 0; overflow:visible; pointer-events:none; fill:none; stroke:none; }
.flow-wire, .tree-wire { fill:none; stroke:var(--flow-line); stroke-width:1.5; }
.flow-head { fill:var(--flow-line); stroke:none; }
.flow-edge[data-style="dashed"] .flow-wire { stroke-dasharray:5 4; }
.flow-edge[data-lit] .flow-wire { stroke:var(--flow-hot); stroke-width:2; }
.flow-edge[data-lit] .flow-head { fill:var(--flow-hot); }
.flow[data-focus] .flow-edge:not([data-lit]) { opacity:.25; }
/* Faded items fade their shape, not their words: the fill blends into the canvas, the border lightens and icons drop to 40%,
   while names, details and tags keep full contrast (Frederik, October 26, 2026). */
:is(.flow[data-focus] .flow-node:not([data-lit]):not([data-current]), .flow-node[data-demo="dim"], .tree-diagram[data-focus] .tree-node:not([data-lit]), .tree-node[data-demo="dim"]) { border-color:color-mix(in oklab, var(--flow-node-edge, var(--flow-node-border)) 40%, var(--flow-canvas)); background:color-mix(in oklab, var(--flow-node-fill, var(--card)) 40%, var(--flow-canvas)); }
:is(.flow[data-focus] .flow-node:not([data-lit]):not([data-current]), .flow-node[data-demo="dim"], .tree-diagram[data-focus] .tree-node:not([data-lit]), .tree-node[data-demo="dim"]) :is(svg, .avatar) { opacity:.4; }
.flow-edge-label { position:absolute; transform:translate(-50%,-50%); padding:0 var(--space-1); border-radius:var(--radius-sm); background:var(--flow-canvas); color:var(--flow-text); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); white-space:nowrap; pointer-events:none; }
.flow-edge-label[data-align="start"] { transform:translate(var(--space-1),-50%); }
.flow-edge-label[data-align="end"] { transform:translate(calc(-100% - var(--space-1)),-50%); }
.flow-edge-label[data-lit] { color:var(--foreground); }
.flow-col-head { position:absolute; display:flex; justify-content:space-between; gap:var(--space-2); padding-block-end:var(--space-2); border-block-end:var(--border-width) var(--border-style) var(--flow-group-border); color:var(--foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.flow-col-head > span + span { color:var(--flow-text); font-variant-numeric:var(--type-numeric-variant); }
.flow-group { position:absolute; border:var(--border-width) var(--border-style) var(--flow-group-border); border-radius:var(--radius-lg); pointer-events:none; }
.flow-group-label { position:absolute; inset:var(--space-2) auto auto var(--space-3); color:var(--flow-text); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.flow-node, .tree-node { position:absolute; display:grid; gap:var(--space-1); align-content:center; margin:0; padding:var(--space-2) var(--space-3); border:var(--border-width) var(--border-style) var(--flow-node-border); border-radius:var(--radius-md); background:var(--card); color:var(--card-foreground); font:inherit; text-align:start; cursor:pointer; }
@media(hover:hover) { .flow-node:hover { border-color:color-mix(in oklab,var(--foreground) 32%,var(--card)); } }
/* Rings keep their on-screen width when the drawing is fitted smaller. */
.flow-node:focus-visible,.flow-subhead:focus-visible { outline:var(--flow-ring, 2px) solid var(--ring); outline-offset:calc(2px / var(--flow-scale, 1)); }
.flow-node[aria-pressed="true"] { border-color:var(--flow-hot); box-shadow:0 0 0 calc(1px / var(--flow-scale, 1)) var(--flow-hot); }
/* State colors also set --flow-node-edge and --flow-node-fill, so a faded node fades its own colors toward the canvas. */
.flow-node[data-status="error"]:not([aria-pressed="true"]) { --flow-node-edge:var(--flow-fail-border); border-color:var(--flow-fail-border); }
.flow-node-name { display:flex; align-items:flex-start; gap:var(--space-2); min-inline-size:0; }
.flow-node-name > svg { inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); flex-shrink:0; margin-block-start:.1875rem; color:var(--muted-foreground); }
.flow-node-name > span { min-inline-size:0; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* Step content shrinks with its card, so enlarged, spaced text wraps instead of spilling out. */
.flow-node { grid-template-columns:minmax(0,1fr); }
.flow-node-detail,.flow-node-meta { min-inline-size:0; overflow-wrap:anywhere; }
.flow-node .status-label[data-appearance="tag"] { max-inline-size:100%; white-space:normal; }
/* One line of detail, so a live status change never moves its neighbors; the full text is in the details and the list. */
.flow-node-detail { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; color:var(--muted-foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.flow-node-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-2); color:var(--muted-foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.flow-unavailable { color:var(--muted-foreground); }
.flow-pop { position:absolute; z-index:5; display:grid; gap:var(--space-3); inline-size:17rem; padding:var(--space-4); border:var(--border-width) var(--border-style) var(--floating-border); border-radius:var(--radius-lg); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--floating-shadow); }
.flow-pop-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-2); }
.flow-pop-head h4, .tree-panel h4 { margin:0; font-size:var(--type-body-size); font-weight:var(--font-weight-regular); }
.flow-pop p { margin:0; color:var(--muted-foreground); font-size:var(--type-supporting-size); }
.flow-pop dl { display:grid; grid-template-columns:auto 1fr; gap:var(--space-1) var(--space-3); margin:0; font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.flow-pop dt { color:var(--muted-foreground); }
.flow-pop dd { margin:0; }
.flow-list { max-block-size:32rem; }
.flow-body { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); align-items:start; min-inline-size:0; }
.flow-body:has(> .flow-details) { grid-template-columns:minmax(0,1fr) 16rem; }
/* The helper marks diagrams narrower than 44rem; a container query here would freeze the card's height in Chrome. */
.flow[data-narrow] .flow-body:has(> .flow-details) { grid-template-columns:minmax(0,1fr); }
.flow-actions .btn[aria-pressed="true"], .flow-review .btn[aria-pressed="true"] { --button-fill:var(--selection); --button-fg:var(--selection-foreground); --button-hover:var(--selection); }
.flow-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); min-inline-size:0; }
.flow-search { position:relative; display:inline-flex; min-inline-size:0; max-inline-size:100%; }
.flow-search > svg { position:absolute; inset:50% auto auto var(--space-3); inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); transform:translateY(-50%); color:var(--muted-foreground); pointer-events:none; }
.flow-search > input { inline-size:15rem; max-inline-size:100%; min-block-size:var(--control-min-block); padding:var(--space-1) var(--space-3) var(--space-1) calc(var(--space-3) + var(--icon-size-sm) + var(--space-2)); border:var(--border-width) var(--border-style) var(--input); border-radius:var(--radius-md); background:var(--field-fill); color:var(--foreground); font:inherit; }
.flow-details { display:grid; gap:var(--space-4); align-content:start; min-inline-size:0; padding:var(--space-4); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); }
.flow-details h4,.flow-details h5 { margin:0; font-size:var(--type-body-size); font-weight:var(--font-weight-regular); }
.flow-details h5 { margin-block-end:var(--space-1); color:var(--muted-foreground); font-size:var(--type-supporting-size); }
.flow-details dl { display:grid; grid-template-columns:auto 1fr; gap:var(--space-1) var(--space-3); margin:0; font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.flow-details dt { color:var(--muted-foreground); }
.flow-details dd { margin:0; }
.flow-details p { margin:0; color:var(--muted-foreground); }
.flow-details-empty { color:var(--muted-foreground); }
.flow-badges { display:flex; flex-wrap:wrap; gap:var(--space-1); }
.flow-links { display:grid; gap:var(--space-half); margin:0; padding:0; list-style:none; }
.flow-links .btn { inline-size:100%; justify-content:flex-start; overflow-wrap:anywhere; text-align:start; }
.flow-subhead { position:absolute; display:flex; align-items:center; gap:var(--space-1); padding:0 var(--space-1); border:0; border-radius:var(--radius-sm); background:none; color:var(--flow-text); font:inherit; font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); white-space:nowrap; cursor:pointer; }
.flow-subhead > svg { inline-size:var(--icon-size-xs); block-size:var(--icon-size-xs); flex-shrink:0; }
.flow-subhead[aria-expanded="false"] > svg { transform:rotate(-90deg); }
.flow-subhead-count { font-variant-numeric:var(--type-numeric-variant); }
@media(hover:hover) { .flow-subhead:hover { color:var(--foreground); } }
.flow-node.flow-row { align-content:center; padding:0 var(--space-2); border-radius:var(--radius-sm); }
.flow-row .flow-node-name { align-items:center; }
.flow-row .flow-node-name > svg { inline-size:var(--icon-size-xs); block-size:var(--icon-size-xs); margin:0; }
.flow-row .flow-node-name > span { display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.flow-node[data-match] { --flow-node-fill:var(--highlight-cream); background:var(--highlight-cream); color:var(--highlight-foreground); }
.flow-edge[data-faint]:not([data-lit]) .flow-wire { opacity:.35; }
/* The flow pulse: a short segment travelling in the direction data moves. The one motion exception; see flow-diagrams.md#flow-animation. */
.flow-pulse, .tree-pulse { fill:none; stroke:var(--flow-hot); stroke-width:3; stroke-linecap:round; stroke-dashoffset:18; }
.flow-edge[data-lit] .flow-pulse { stroke:var(--flow-pulse-on-hot); stroke-width:4; }
.flow-controls { position:absolute; inset:auto var(--space-3) var(--space-3) auto; display:flex; align-items:center; gap:var(--space-half); padding:var(--space-half); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-md); background:var(--card); }
.flow-controls output { min-inline-size:3rem; color:var(--muted-foreground); font-size:var(--type-supporting-size); font-variant-numeric:var(--type-numeric-variant); text-align:center; }
.flow-node[data-shape="pill"],.flow-node[data-shape="state"] { border-radius:var(--radius-full); padding:var(--space-2) var(--space-4); justify-items:center; text-align:center; }
.flow-eyebrow { display:flex; align-items:center; gap:var(--space-1); color:var(--muted-foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.flow-eyebrow > svg { inline-size:var(--icon-size-xs); block-size:var(--icon-size-xs); flex-shrink:0; }
.flow-run { margin:0; color:var(--muted-foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.flow-outline { display:grid; gap:var(--space-2); margin:0; padding:var(--space-2) var(--space-2) var(--space-2) var(--space-6); }
.flow-outline ul { display:grid; gap:var(--space-2); margin:var(--space-2) 0 0; padding-inline-start:var(--space-4); list-style:none; }
.flow-outline ol { display:grid; gap:var(--space-2); margin:var(--space-1) 0 0; padding-inline-start:var(--space-6); }
.flow-outline-branch { color:var(--muted-foreground); }
.flow-node[data-shape="state"] { min-block-size:2.5rem; gap:0; }
.flow-state-name { display:inline-flex; align-items:center; gap:var(--space-2); }
.flow-node[data-current] { background:var(--selection); color:var(--selection-foreground); border-color:var(--foreground); }
.flow-node[data-final] { --flow-node-edge:var(--flow-final); border:3px double var(--flow-final); }
.flow-node[data-current][data-final] { border-color:var(--foreground); }
.flow-node[data-final][aria-pressed="true"] { border-color:var(--flow-hot); box-shadow:none; }
.flow-final-mark { display:inline-grid; place-items:center; inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); flex-shrink:0; border-radius:var(--radius-circle); background:var(--flow-final); color:var(--card); }
.flow-final-mark > svg { inline-size:.625rem; block-size:.625rem; stroke-width:3; }
.flow-initial { position:absolute; inline-size:.75rem; block-size:.75rem; border-radius:var(--radius-circle); background:var(--foreground); }
.flow-updating { display:inline-flex; align-items:center; gap:var(--space-2); margin:0; color:var(--muted-foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.flow-notice { align-items:center; }
.flow-notice p { margin:0; }
.flow-notice .btn { margin-inline-start:auto; }
.flow-state { display:grid; place-items:center; align-content:center; gap:var(--space-6); overflow:hidden; padding:var(--space-6); border-radius:var(--radius-md); background:var(--flow-canvas); }
.flow-state:has(.flow-skeleton) { place-items:start; align-content:start; }
.flow-state .empty { border:0; background:none; }
.flow-skeleton { display:grid; grid-auto-flow:column; gap:var(--space-16); max-inline-size:100%; overflow:hidden; }
.flow-skeleton-col { display:grid; gap:var(--space-3); align-content:start; }
.flow-skeleton-col > .skeleton[data-shape="text"] { inline-size:60%; }
/* On the gray canvas, skeletons are one step darker so their shape still shows. */
.flow-state .skeleton { background:color-mix(in oklab,var(--foreground) 8%,var(--flow-canvas)); }
.flow-state-center { display:grid; justify-items:center; gap:var(--space-3); max-inline-size:24rem; color:var(--muted-foreground); text-align:center; }
.flow-state-center p { margin:0; }
.flow-state-center .spinner { inline-size:var(--icon-size-md); block-size:var(--icon-size-md); color:var(--foreground); }
.flow-vocabulary { gap:var(--space-8); }
.flow-vocabulary-group { display:grid; gap:var(--space-3); }
.flow-vocabulary-group h4 { margin:0; font-size:var(--type-subheading-size); font-weight:var(--font-weight-regular); }
.flow-vocabulary-group > p { margin:0; color:var(--muted-foreground); }
.flow-vocabulary-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr)); gap:var(--space-4); }
.flow-tile { display:grid; gap:var(--space-2); align-content:start; min-inline-size:0; margin:0; }
.flow-tile-field { position:relative; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; min-inline-size:0; min-block-size:8.5rem; padding:var(--space-4); border-radius:var(--radius-md); background:var(--flow-canvas); }
.flow-tile .flow-node { position:relative; inline-size:11rem; max-inline-size:100%; cursor:default; }
.flow-tile .flow-node.flow-row { block-size:2rem; }
.flow-tile .flow-node[data-shape] { inline-size:auto; min-inline-size:min(100%,9.5rem); }
.flow-tile .flow-initial { position:relative; }
.flow-tile figcaption { display:grid; gap:var(--space-half); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.flow-tile figcaption > span + span { color:var(--muted-foreground); }
.flow-tile-line { inline-size:12.5rem; max-inline-size:100%; block-size:3.5rem; overflow:visible; fill:none; stroke:none; }
.flow-tile .flow-edge-label { inset:50% auto auto 50%; }
.flow-edge[data-dim] { opacity:.25; }
.flow-node[data-demo="hover"] { border-color:color-mix(in oklab,var(--foreground) 32%,var(--card)); }
.flow-node[data-demo="focus"] { outline:2px solid var(--ring); outline-offset:2px; }
.flow-node[data-demo="selected"] { border-color:var(--flow-hot); box-shadow:0 0 0 1px var(--flow-hot); }
@media(forced-colors:active) { .flow-pulse { stroke:Highlight; } .flow-final-mark,.flow-initial { background:CanvasText; color:Canvas; } .flow-wire { stroke:CanvasText; } .flow-head { fill:CanvasText; } .flow-edge[data-lit] .flow-wire { stroke:Highlight; } .flow-edge[data-lit] .flow-head { fill:Highlight; } .flow-node,.flow-group,.flow-col-head { border-color:CanvasText; } .flow-node[aria-pressed="true"] { outline:2px solid Highlight; outline-offset:2px; } }

/* Timeline: a label column beside a date plot with bars, milestones, phases and today. Owner: timelines.md. */
.timeline { --timeline-label-width:16rem; --timeline-row:2.75rem; --timeline-bar:1.5rem; display:grid; gap:var(--space-3); min-inline-size:0; }
.timeline[data-size="medium"] { --timeline-label-width:12rem; }
.timeline[data-size="narrow"] { --timeline-label-width:0px; }
/* Narrow cards stack each name above its bar, so the plot takes the full width. */
.timeline[data-size="narrow"] :is(.timeline-head, .timeline-body) { grid-template-columns:var(--timeline-plot-width); }
.timeline[data-size="narrow"] .timeline-corner { display:none; }
.timeline[data-size="narrow"] .timeline-label { position:static; flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:flex-start; gap:0 var(--space-2); min-block-size:0; padding:var(--space-2) var(--space-2) 0; background:transparent; border-inline-end:0; }
.timeline[data-size="narrow"] .timeline-track { min-block-size:2.25rem; }
.timeline[data-size="narrow"] .timeline-row > .timeline-track { border-block-start:0; }
.timeline[data-compare] { --timeline-row:3.25rem; }
.timeline-back { justify-self:start; }
.timeline-frame { position:relative; overflow:auto; max-block-size:max(36rem, 85vh); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-md); background:var(--card); overscroll-behavior-inline:contain; }
/* A diamond on the plot's last days may reach past its end; it's clipped there rather than scrolling the chart sideways. */
.timeline-canvas { position:relative; inline-size:calc(var(--timeline-label-width) + var(--timeline-plot-width)); min-inline-size:100%; overflow-x:clip; }
.timeline-head, .timeline-body { display:grid; grid-template-columns:var(--timeline-label-width) var(--timeline-plot-width); }
.timeline-head { position:sticky; top:0; z-index:4; background:var(--card); border-block-end:var(--border-width) var(--border-style) var(--border); }
.timeline-corner { position:sticky; left:0; z-index:5; display:flex; align-items:flex-end; padding:var(--space-2) var(--space-3); background:var(--card); border-inline-end:var(--border-width) var(--border-style) var(--border); color:var(--muted-foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.timeline-axis { position:relative; display:grid; }
.timeline-tier { position:relative; block-size:1.5rem; overflow:hidden; color:var(--muted-foreground); font-size:var(--type-supporting-size); line-height:1.5rem; font-variant-numeric:var(--type-numeric-variant); white-space:nowrap; }
.timeline-tier > span { position:absolute; inset-block-start:0; padding-inline:var(--space-1); overflow:hidden; text-overflow:ellipsis; }
.timeline-tier[data-tier="phases"] { block-size:1.75rem; line-height:1.75rem; color:var(--card-foreground); }
.timeline-tier[data-tier="phases"] > span { padding-inline:var(--space-2); }
.timeline-tier[data-tier="phases"] > span[data-fill] { background:var(--timeline-band); }
.timeline-tier[data-tier="upper"] > span { border-inline-start:var(--border-width) var(--border-style) var(--border); }
.timeline-tier[data-tier="lower"] > span { overflow:visible; transform:translateX(-50%); }
.timeline-tier[data-tier="marks"] { overflow:visible; }
.timeline-tier[data-tier="marks"][data-lanes="2"] { block-size:2.75rem; }
.timeline-tier[data-tier="marks"] > span[data-lane="1"] { inset-block-start:1.25rem; }
.timeline-tier[data-tier="marks"] > span[data-today] { color:var(--timeline-today); }
.timeline-body { position:relative; }
.timeline-under { position:absolute; inset-block:0; inset-inline-start:var(--timeline-label-width); inline-size:var(--timeline-plot-width); pointer-events:none; }
.timeline-under > * { position:absolute; inset-block:0; }
.timeline-band { background:var(--timeline-band); }
.timeline-grid { border-inline-start:var(--border-width) var(--border-style) var(--chart-grid); }
.timeline-grid[data-major] { border-inline-start-color:var(--border); }
.timeline-marker { border-inline-start:var(--border-width) dashed var(--timeline-marker); }
.timeline-today { border-inline-start:var(--border-width) var(--border-style) var(--timeline-today); }
.timeline-row { display:contents; }
.timeline-label { position:sticky; left:0; z-index:2; display:flex; flex-direction:column; justify-content:center; gap:var(--space-half); min-inline-size:0; min-block-size:var(--timeline-row); padding:var(--space-2) var(--space-3); background:var(--card); border-inline-end:var(--border-width) var(--border-style) var(--border); }
.timeline-name, .timeline-sub { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
.timeline-track { position:relative; min-block-size:var(--timeline-row); }
.timeline-row[data-type="group"] > * { border-block-start:var(--border-width) var(--border-style) var(--border); }
.timeline-row[data-type="group"] .timeline-label { flex-direction:row; align-items:center; justify-content:flex-start; gap:var(--space-2); }
.timeline-row[data-type="milestones"] .timeline-name { color:var(--muted-foreground); font-size:var(--type-supporting-size); }
.timeline-count { color:var(--muted-foreground); font-size:var(--type-supporting-size); white-space:nowrap; }
.timeline-chevron { display:inline-grid; place-items:center; flex:none; inline-size:var(--space-6); block-size:var(--space-6); margin-inline-start:calc(-1 * var(--space-1)); padding:0; border:0; border-radius:var(--radius-sm); background:none; color:var(--card-foreground); cursor:pointer; }
.timeline-row[data-collapsed] .timeline-chevron svg { transform:rotate(-90deg); }
@media(hover:hover) { .timeline-chevron:hover { background:var(--accent); } }
/* Selection fills the label and rings the item in foreground, never orange; focus sits outside it. */
.timeline-row[data-selected] > .timeline-label { background:var(--selection); color:var(--selection-foreground); }
.timeline-row [data-selected-item]:not(.timeline-milestone), .timeline-row [data-selected-item] .timeline-milestone-mark { outline:2px solid var(--foreground); outline-offset:2px; }
.timeline-frame:focus-visible .timeline-row[data-active] > .timeline-label { box-shadow:inset 3px 0 0 var(--ring); }
.timeline-frame:focus-visible .timeline-row[data-active] [data-active-item]:not(.timeline-milestone):not([data-selected-item]), .timeline-frame:focus-visible .timeline-row[data-active] [data-active-item]:not([data-selected-item]) .timeline-milestone-mark { outline:2px solid var(--ring); outline-offset:2px; }
.timeline-frame:focus-visible .timeline-row[data-active] [data-active-item][data-selected-item]:not(.timeline-milestone) { box-shadow:0 0 0 4px var(--card), 0 0 0 6px var(--ring); }
/* Bars: filled means it happened or is happening; a dashed outline is only planned. */
.timeline-bar { position:absolute; inset-block-start:50%; display:flex; align-items:center; min-inline-size:2px; block-size:var(--timeline-bar); transform:translateY(-50%); border-radius:4px; cursor:pointer; --edge:var(--timeline-edge-planned); --fill:transparent; --mark:var(--status-planned); }
.timeline-bar[data-status="in-progress"] { --edge:var(--timeline-edge-in-progress); --fill:var(--timeline-fill-in-progress); --mark:var(--status-progress); }
.timeline-bar[data-status="complete"] { --edge:var(--timeline-edge-complete); --fill:var(--timeline-fill-complete); --mark:var(--status-complete); }
.timeline-bar[data-status="error"] { --edge:var(--timeline-edge-error); --fill:var(--timeline-fill-error); --mark:var(--status-error); }
.timeline-bar-fill, .timeline-bar-rest { position:absolute; inset-block:0; inset-inline-start:0; border-radius:4px; }
.timeline-bar-fill { background:linear-gradient(var(--fill), var(--fill)), var(--card); border:var(--border-width) solid var(--edge); }
.timeline-bar-rest { background:var(--card); border:var(--border-width) dashed var(--edge); }
/* Text on the plot keeps a halo in the card color, so lines read as passing behind it. */
:is(.timeline-milestone-label, .timeline-after), .timeline[data-size="narrow"] .timeline-label { paint-order:stroke fill; -webkit-text-stroke:.25rem var(--card); }
.timeline[data-size="narrow"] .timeline-row[data-selected] > .timeline-label { -webkit-text-stroke-color:var(--selection); }
.timeline-bar-fill[data-cut] { border-start-end-radius:0; border-end-end-radius:0; border-inline-end:0; }
.timeline-bar-rest[data-after] { border-start-start-radius:0; border-end-start-radius:0; border-inline-start:0; }
.timeline-bar-text { position:relative; display:inline-flex; align-items:center; gap:var(--space-1); min-inline-size:0; max-inline-size:100%; padding-inline:var(--space-2); color:var(--card-foreground); font-size:var(--type-supporting-size); line-height:1; white-space:nowrap; }
.timeline-bar-text svg { inline-size:var(--icon-size-xs); block-size:var(--icon-size-xs); flex:none; color:var(--mark); }
.timeline-bar-word { overflow:hidden; text-overflow:ellipsis; }
.timeline-bar[data-fit="icon"] .timeline-bar-word, .timeline-bar[data-fit="none"] .timeline-bar-text { display:none; }
.timeline-bar[data-fit="icon"] .timeline-bar-text { padding-inline:calc(var(--space-1) + var(--space-half)); }
.timeline-row[data-type="lane"] { --timeline-step:calc(var(--timeline-bar) + var(--space-2)); }
.timeline-row[data-type="lane"] .timeline-track { min-block-size:max(var(--timeline-row), calc(2 * var(--space-3) + var(--timeline-depth) * var(--timeline-step) - var(--space-2))); }
.timeline-row[data-type="lane"] .timeline-bar { inset-block-start:calc(var(--space-3) + var(--timeline-subrow) * var(--timeline-step)); transform:none; }
.timeline-row + .timeline-row[data-type="lane"] > * { border-block-start:var(--border-width) var(--border-style) var(--border); }
.timeline[data-compare] .timeline-row[data-type="item"] .timeline-bar { block-size:1.25rem; inset-block-start:calc(50% - .375rem); }
.timeline-plan { position:absolute; inset-block-start:calc(50% + .625rem); block-size:.25rem; border-radius:var(--radius-full); background:var(--timeline-plan-track); }
.timeline-after { position:absolute; inset-block-start:50%; display:inline-flex; align-items:center; gap:var(--space-2); transform:translateY(-50%); color:var(--muted-foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); white-space:nowrap; pointer-events:none; }
.timeline[data-compare] .timeline-row[data-type="item"] .timeline-after { inset-block-start:calc(50% - .375rem); }
.timeline-after[data-late] .timeline-slip { color:var(--card-foreground); }
.timeline-bracket { position:absolute; inset-block-start:50%; block-size:.375rem; transform:translateY(-50%); border-radius:var(--radius-full); background:var(--timeline-bracket); }
.timeline-milestone { position:absolute; inset-block-start:50%; display:flex; align-items:center; gap:var(--space-2); transform:translate(-.5rem, -50%); cursor:pointer; white-space:nowrap; }
.timeline-milestone[data-flip] { flex-direction:row-reverse; transform:translate(calc(-100% + .5rem), -50%); }
.timeline-milestone-mark { flex:none; inline-size:.7rem; block-size:.7rem; margin-inline:.15rem; transform:rotate(45deg); border:1.5px solid var(--card-foreground); border-radius:1px; background:var(--card); }
.timeline-milestone[data-state="reached"] .timeline-milestone-mark { background:var(--card-foreground); }
.timeline-milestone[data-state="missed"] .timeline-milestone-mark { border-color:var(--destructive); }
.timeline-milestone-label { color:var(--card-foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.timeline-milestone-label small { color:var(--muted-foreground); font-size:inherit; }
.timeline-milestone[data-state="missed"] .timeline-milestone-label small { color:var(--card-foreground); }
.timeline-milestone-plan { position:absolute; inset-block-start:50%; inline-size:.7rem; block-size:.7rem; transform:translate(-50%, -50%) rotate(45deg); border:1.5px solid var(--timeline-plan-track); border-radius:1px; background:var(--card); }
.timeline-milestone-link { position:absolute; inset-block-start:50%; block-size:0; border-block-start:var(--border-width) var(--border-style) var(--timeline-plan-track); }
.timeline-legend li { gap:var(--space-2); }
.timeline-key { flex:none; display:inline-block; inline-size:1.25rem; block-size:.625rem; border:var(--border-width) solid var(--edge); border-radius:2px; background:var(--fill); }
.timeline-key[data-key="planned"] { --edge:var(--timeline-edge-planned); --fill:transparent; border-style:dashed; }
.timeline-key[data-key="in-progress"] { --edge:var(--timeline-edge-in-progress); --fill:var(--timeline-fill-in-progress); }
.timeline-key[data-key="complete"] { --edge:var(--timeline-edge-complete); --fill:var(--timeline-fill-complete); }
.timeline-key[data-key="error"] { --edge:var(--timeline-edge-error); --fill:var(--timeline-fill-error); }
.timeline-key[data-key="plan"] { block-size:.25rem; border:0; border-radius:var(--radius-full); background:var(--timeline-plan-track); }
.timeline-key[data-key="milestone"] { inline-size:.6rem; block-size:.6rem; margin-inline:.3rem; transform:rotate(45deg); border:1.5px solid var(--card-foreground); border-radius:1px; background:none; }
.timeline-key:is([data-key="today"],[data-key="marker"]) { inline-size:0; block-size:.875rem; margin-inline:.6rem; border:0; border-inline-start:var(--border-width) solid var(--timeline-today); border-radius:0; background:none; }
.timeline-key[data-key="marker"] { border-inline-start:var(--border-width) dashed var(--timeline-marker); }
.timeline-details { position:fixed; z-index:20; display:grid; gap:var(--space-3); inline-size:min(20rem, calc(100vw - 2rem)); padding:var(--space-4); border-radius:var(--radius-lg); }
.timeline-details-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-2); }
.timeline-details-head h4 { margin:0; font-size:var(--type-body-size); line-height:var(--type-body-leading); font-weight:var(--font-weight-regular); }
.timeline-details dl { display:grid; grid-template-columns:auto 1fr; gap:var(--space-1) var(--space-4); margin:0; font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.timeline-details dt, .timeline-details p { margin:0; color:var(--muted-foreground); }
.timeline-details p { font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.timeline-details dd { margin:0; font-variant-numeric:var(--type-numeric-variant); }
.timeline-details-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.timeline-loading .skeleton-row { min-block-size:var(--timeline-row); }
.timeline-loading .skeleton-row > [data-shape="text"] { flex:0 0 8rem; }
.timeline-loading .skeleton-row > .skeleton:not([data-shape]) { inline-size:var(--to); block-size:var(--timeline-bar); margin-inline-start:var(--from); }
.timeline-list .data-table th[scope="rowgroup"] { background:var(--component-footer); color:var(--muted-foreground); font-size:var(--type-supporting-size); }
.timeline-list .data-table :is(td, th[scope="row"]) { font-size:var(--type-supporting-size); }
.timeline-list .data-table [data-nowrap] { white-space:nowrap; font-variant-numeric:var(--type-numeric-variant); }
@media(forced-colors:active) { :is(.timeline-milestone-label, .timeline-after, .timeline-label) { -webkit-text-stroke-color:Canvas; } :is(.timeline-bar-fill,.timeline-bar-rest,.timeline-milestone-mark,.timeline-key) { border-color:CanvasText; } :is(.timeline-today,.timeline-marker) { border-color:CanvasText; } :is(.timeline-plan,.timeline-bracket,.timeline-milestone[data-state="reached"] .timeline-milestone-mark) { forced-color-adjust:none; background:CanvasText; } .timeline-row [data-selected-item] { outline-color:Highlight; } }

/* File tree: folders and files, or other nested items, as an ARIA tree, adapted from the AI Elements File Tree. Owner: file-trees.md.
   The guide line reuses the flow diagram's group border; states reuse the flow diagram's state styles. */
.file-tree { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--space-3); min-inline-size:0; }
.file-tree-tools, .tree-tools { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); }
.file-tree-tools > .flow-search { flex:0 1 15rem; }
.file-tree-tools > .flow-search > input { inline-size:100%; }
.file-tree-frame { container-type:inline-size; overflow:auto; max-block-size:32rem; padding:var(--space-2); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); }
.file-tree-frame > .empty { padding:var(--space-4); }
.file-tree-items, .file-tree-items ul { margin:0; padding:0; list-style:none; }
/* The source indents 16px plus 8px after the guide line; narrow frames indent less, so deep rows keep room for their names. */
.file-tree-items { --file-tree-indent:min(1.5rem, 8cqi); }
.file-tree-items [role="group"] { position:relative; }
.file-tree-items [role="group"]::before { content:""; position:absolute; inset-block:0; inset-inline-start:calc(var(--space-2) + (var(--lvl) - 1) * var(--file-tree-indent) + var(--icon-size-sm) / 2); border-inline-start:var(--border-width) var(--border-style) var(--flow-group-border); pointer-events:none; }
.file-tree-items [role="treeitem"] { outline:none; }
.file-tree-row { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-half) var(--space-2); min-block-size:var(--space-8); padding:.3125rem var(--space-2) .3125rem calc(var(--space-2) + (var(--lvl) - 1) * var(--file-tree-indent)); border-radius:var(--radius-sm); cursor:pointer; }
@media (pointer:coarse) { .file-tree-row { min-block-size:2.75rem; } }
@media (hover:hover) { .file-tree-row:hover { background:color-mix(in oklab, var(--muted) 50%, transparent); } }
.file-tree-items [role="treeitem"]:focus-visible > .file-tree-row { outline:var(--focus-ring-width) solid var(--ring); outline-offset:calc(var(--focus-ring-width) * -1); }
.file-tree-items [aria-selected="true"] > .file-tree-row { background:var(--selection); color:var(--selection-foreground); }
.file-tree-chevron { display:grid; place-items:center; flex:0 0 var(--icon-size-sm); inline-size:var(--icon-size-sm); block-size:var(--icon-size-sm); margin-block-start:.1875rem; color:var(--muted-foreground); }
.file-tree-items [aria-expanded="true"] > .file-tree-row .file-tree-chevron svg { transform:rotate(90deg); }
.file-tree-icon { display:flex; margin-block-start:.1875rem; color:var(--muted-foreground); }
.file-tree-icon .when-open, .file-tree-items [aria-expanded="true"] > .file-tree-row .when-closed { display:none; }
.file-tree-items [aria-expanded="true"] > .file-tree-row .when-open { display:block; }
.file-tree-text { display:grid; flex:1 1 6rem; min-inline-size:0; }
.file-tree-name { overflow-wrap:anywhere; }
.file-tree-code { margin-inline-end:var(--space-2); color:var(--muted-foreground); font-variant-numeric:var(--type-numeric-variant); }
.file-tree-count { font-variant-numeric:var(--type-numeric-variant); }
.file-tree-detail { overflow-wrap:anywhere; }
.file-tree-meta { display:flex; align-items:center; gap:var(--space-2); min-block-size:1.3125rem; margin-inline-start:auto; color:var(--muted-foreground); font-size:var(--type-supporting-size); font-variant-numeric:var(--type-numeric-variant); }
/* With very large text in a narrow frame, dates and status tags wrap inside their row instead of running past it. */
.file-tree-meta { flex-wrap:wrap; max-inline-size:100%; min-inline-size:0; }
.file-tree-meta > .status-label { max-inline-size:100%; white-space:normal; overflow-wrap:anywhere; }
.file-tree-items mark { border-radius:2px; background:var(--highlight-cream); color:var(--highlight-foreground); }
.file-tree-status { display:flex; align-items:center; gap:var(--space-2); min-block-size:var(--space-8); padding:var(--space-1) var(--space-2) var(--space-1) calc(var(--space-2) + var(--lvl) * var(--file-tree-indent) + var(--icon-size-sm) + var(--space-2)); color:var(--muted-foreground); font-size:var(--type-supporting-size); }
.file-tree-status .spinner { inline-size:var(--icon-size-xs); block-size:var(--icon-size-xs); }
.file-tree-items [data-retry] > .file-tree-row .file-tree-icon { color:var(--status-error); }
.file-tree-items [aria-disabled="true"] > .file-tree-row { color:var(--muted-foreground); cursor:not-allowed; }
@media (hover:hover) { .file-tree-items [aria-disabled="true"] > .file-tree-row:hover { background:none; } }
/* Tree states: a plain state box for the file tree and skeletons in the shape the content will take. */
.flow-state[data-plain] { padding:var(--space-4); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); background:none; }
.flow-state:has(.tree-skeleton) { place-items:stretch; align-content:start; }
/* Slow loading: the message and Cancel sit centered under the skeleton. */
.flow-state:has(.tree-skeleton) > .flow-state-center { justify-self:center; }
.tree-skeleton { display:grid; gap:var(--space-3); min-inline-size:0; }
.tree-skeleton[data-shape="rows"] { gap:var(--space-4); padding-block:var(--space-2); }
.tree-skeleton[data-shape="rows"] .skeleton { inline-size:var(--w); max-inline-size:calc(100% - var(--d) * 1.5rem); margin-inline-start:calc(var(--d) * 1.5rem); }
@media (forced-colors:active) { .file-tree-items [role="group"]::before { border-color:GrayText; } .file-tree-items [aria-selected="true"] > .file-tree-row { outline:2px solid Highlight; } }

/* Tree diagram: org chart and driver tree, with the issue tree as an option. Owner: tree-diagrams.md.
   Canvas, connectors, node borders and highlight reuse the flow diagram's aliases; details reuse its popover. */
.tree-diagram { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--space-3); min-inline-size:0; }
.tree-tools > .flow-search { flex:0 1 15rem; }
.tree-tools > .flow-search > input { inline-size:100%; }
.tree-orient { display:inline-flex; flex-wrap:wrap; gap:var(--space-half); }
.tree-stage { position:relative; min-inline-size:0; }
.tree-viewport { position:relative; overflow-x:auto; overflow-y:hidden; border-radius:var(--radius-md); background:var(--flow-canvas); }
.tree-list-note { margin:0; color:var(--muted-foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.tree-sizer { position:relative; margin-inline:auto; }
.tree-lines { position:absolute; inset:0 auto auto 0; overflow:visible; pointer-events:none; }
.tree-wire[data-lit] { stroke:var(--flow-hot); stroke-width:2; }
/* Driver trees: the flow diagram's pulse, rolling values up from parts to their parent. */
.tree-pulse[data-lit] { stroke:var(--flow-pulse-on-hot); stroke-width:4; }
.tree-diagram[data-focus] .tree-wire:not([data-lit]) { opacity:.25; }
.tree-diagram[data-focus] :is(.tree-toggle, .tree-op):not([data-lit]) { border-color:color-mix(in oklab, var(--flow-node-border) 40%, var(--flow-canvas)); background:color-mix(in oklab, var(--card) 40%, var(--flow-canvas)); }
.tree-diagram[data-focus] :is(.tree-toggle, .tree-op):not([data-lit]) svg { opacity:.4; }
@media (hover:hover) { .tree-node:hover { border-color:color-mix(in oklab, var(--foreground) 32%, var(--card)); } }
.tree-node:focus-visible { outline:var(--tree-ring, var(--focus-ring-width)) solid var(--ring); outline-offset:calc(var(--focus-ring-offset) / var(--tree-scale, 1)); }
.tree-node[aria-pressed="true"] { border-color:var(--flow-hot); box-shadow:0 0 0 calc(1px / var(--tree-scale, 1)) var(--flow-hot); }
/* Parents leave room for the collapse toggle on their outgoing edge. */
.tree-node[data-parent] { padding-block-end:var(--space-4); }
.tree-diagram[data-layout="horizontal"] .tree-node[data-parent] { padding-block-end:var(--space-2); padding-inline-end:var(--space-4); }
.tree-node[data-match] { --flow-node-fill:var(--highlight-cream); background:var(--highlight-cream); color:var(--highlight-foreground); }
.tree-node-text { display:grid; min-inline-size:0; }
.tree-node-name { display:-webkit-box; min-inline-size:0; overflow:hidden; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.tree-node-detail { color:var(--muted-foreground); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); overflow-wrap:anywhere; }
.tree-node-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-2); min-inline-size:0; }
.tree-node-meta > .status-label, .tree-diagram > .chart-legend .status-label { max-inline-size:100%; white-space:normal; overflow-wrap:anywhere; }
.tree-diagram > .chart-legend li { max-inline-size:100%; min-inline-size:0; }
/* The name sits beside the avatar, and drops below it when a card is very narrow. */
.tree-org-node { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-3); }
.tree-org-node > .tree-node-text { flex:1 1 6rem; }
/* Driver tree parts: name, value in tabular figures, a data word (or Fixed number), and an optional note. */
.tree-value { font-size:var(--type-subheading-size); line-height:var(--type-subheading-leading); font-variant-numeric:var(--type-numeric-variant); }
.tree-driver-node[data-missing] .tree-value { color:var(--muted-foreground); }
.tree-fn { color:var(--flow-text); font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.tree-issue-node .tree-node-detail { color:var(--flow-text); }
.tree-panel { display:grid; gap:var(--space-4); min-inline-size:0; padding:var(--space-4); border:var(--border-width) var(--border-style) var(--border); border-radius:var(--radius-lg); overflow-wrap:anywhere; }
.tree-panel-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--space-2) var(--space-4); }
.tree-panel-head > div { display:grid; flex:1 1 8rem; gap:var(--space-1); min-inline-size:0; }
.tree-panel-head > .status-label { max-inline-size:100%; white-space:normal; }
.tree-panel-hint, .tree-panel-links > span, .tree-formula > span { color:var(--muted-foreground); }
.tree-formula { margin:0; font-variant-numeric:var(--type-numeric-variant); }
.tree-panel dl { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--space-1) var(--space-3); margin:0; font-size:var(--type-supporting-size); line-height:var(--type-supporting-leading); }
.tree-panel dt { color:var(--muted-foreground); }
.tree-panel dd { margin:0; overflow-wrap:anywhere; }
.tree-panel-links { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); }
.tree-panel-hint { margin:0; }
.tree-org-node .avatar { --avatar-ring:var(--card); }
.tree-toggle { position:absolute; z-index:2; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-half); min-inline-size:1.25rem; block-size:1.25rem; padding:0 var(--space-1); border:var(--border-width) var(--border-style) var(--flow-node-border); border-radius:var(--radius-full); background:var(--card); color:var(--muted-foreground); font:inherit; font-size:var(--type-supporting-size); line-height:1; font-variant-numeric:var(--type-numeric-variant); cursor:pointer; transform:translate(-50%, -50%); }
.tree-toggle svg { inline-size:var(--icon-size-2xs); block-size:var(--icon-size-2xs); }
.tree-toggle[aria-expanded="false"] { padding-inline:var(--space-2); color:var(--foreground); }
@media (hover:hover) { .tree-toggle:hover { border-color:color-mix(in oklab, var(--foreground) 32%, var(--card)); color:var(--foreground); } }
.tree-toggle::after { content:""; position:absolute; inset:calc(var(--space-2) * -1); }
/* Touch screens: small diagram controls get an invisible 44px tap area and the drawing doesn't change. Drawings fitted smaller
   divide by their scale, so the area stays 44px on screen. A tap area never covers another control; items packed too close
   for one rely on the list view instead. See foundations/accessibility.md. */
@media (pointer:coarse) {
  /* Flow tap areas sit under every drawn item, so a tap on a neighbor always reaches the neighbor; where items are packed too
     close, as lineage rows are, the nearest wins and Show list is the touch route. */
  .flow-canvas { isolation:isolate; }
  :is(.flow-node:not(.flow-row), .flow-subhead)::after { content:""; position:absolute; z-index:-1; inset:min(0px, calc(50% - 1.375rem / var(--flow-scale, 1))); }
  .tree-toggle::after { inset:min(calc(var(--space-2) * -1), calc(50% - 1.375rem / var(--tree-scale, 1))); }
  .timeline-chevron { position:relative; }
  .timeline-chevron::after { content:""; position:absolute; z-index:1; inset:min(0px, calc(50% - 1.375rem)); }
  :is(.graph-legend-toggle, .graph-details li button) { min-block-size:var(--control-min-block); }
}
.tree-op { position:absolute; z-index:1; display:grid; place-items:center; inline-size:1.5rem; block-size:1.5rem; border:var(--border-width) var(--border-style) var(--flow-node-border); border-radius:var(--radius-full); background:var(--card); color:var(--foreground); line-height:1; transform:translate(-50%, -50%); pointer-events:none; }
.tree-nomatch { padding:var(--space-8) var(--space-4); border-radius:var(--radius-md); background:var(--flow-canvas); }
.tree-skeleton .node { flex:0 0 auto; inline-size:12.5rem; max-inline-size:100%; block-size:3.5rem; }
.tree-skeleton[data-shape="vertical"] { justify-items:center; gap:var(--space-12); }
.tree-skeleton-row { display:flex; justify-content:center; gap:var(--space-6); max-inline-size:100%; overflow:hidden; }
.tree-skeleton[data-shape="horizontal"] { grid-template-columns:auto auto; align-items:center; justify-content:start; column-gap:var(--space-16); }
.tree-skeleton-col { display:grid; gap:var(--space-6); }
.tree-skeleton[data-shape="stacked"] .node { inline-size:auto; margin-inline-start:calc(var(--d) * 1.5rem); }
/* On the diagram's gray field, skeletons are one step darker so their shape still shows. */
.flow-state:not([data-plain]) .tree-skeleton .skeleton { background:color-mix(in oklab, var(--foreground) 8%, var(--flow-canvas)); }
@media (forced-colors:active) { .tree-pulse { stroke:Highlight; } .tree-wire { stroke:CanvasText; } .tree-wire[data-lit] { stroke:Highlight; } .tree-node, .tree-toggle, .tree-op { border-color:CanvasText; } .tree-node[aria-pressed="true"] { outline:2px solid Highlight; outline-offset:2px; } }
/* Tree item states gallery: reuses the flow diagram's tiles. */
.tree-vocabulary { display:grid; }
.flow-tile .tree-node { position:relative; inline-size:11.5rem; max-inline-size:100%; cursor:default; }
.tree-tile-node { position:relative; max-inline-size:100%; }
.tree-tile-node > .tree-toggle { inset:100% auto auto 50%; }
/* Row pictures are inert. Below the file tree's 12rem frame contract no row fits, so the tile clips its picture instead of widening the page. */
.tree-tile-plain { place-items:stretch; align-content:center; min-block-size:5rem; padding:var(--space-2); border:var(--border-width) var(--border-style) var(--border); background:none; overflow:clip; }
.tree-tile-ops { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3); }
.tree-tile-ops > .tree-op { position:relative; transform:none; }
.tree-node[data-demo="hover"] { border-color:color-mix(in oklab, var(--foreground) 32%, var(--card)); }
.tree-node[data-demo="focus"] { outline:var(--focus-ring-width) solid var(--ring); outline-offset:var(--focus-ring-offset); }
.file-tree-row[data-demo="hover"] { background:color-mix(in oklab, var(--muted) 50%, transparent); }
.file-tree-row[data-demo="focus"] { outline:var(--focus-ring-width) solid var(--ring); outline-offset:calc(var(--focus-ring-width) * -1); }
/* Touch screens: every button is at least 44px wide as well as tall. The doubled class outranks component rules that fix a
   narrower width, such as the graph's round buttons and the compact pagination arrows. */
@media(pointer:coarse) { .btn.btn { min-inline-size:var(--control-min-block); } }