@layer kit.tokens, kit.reset, kit.base, kit.components, kit.utilities;
@layer kit.tokens {
/* kit theme: werkbank (mode: auto)
 * Only --kit-* tokens; see @kerf/kit/tokens. Made with the theme editor. */
:root {
  color-scheme: light;
  --kit-bg: #f4f2ed;
  --kit-surface: #fffdf9;
  --kit-surface-2: #faf8f4;
  --kit-sunken: #ebe8e1;
  --kit-ink: #1a1a17;
  --kit-ink-2: #57544d;
  --kit-muted: #6f6b62;
  --kit-faint: #a29d92;
  --kit-line: #e1ddd4;
  --kit-line-strong: #cfc9bd;
  --kit-accent: #0f5a3e;
  --kit-accent-hover: #0a4430;
  --kit-accent-ink: #ffffff;
  --kit-accent-soft: #dcebe2;
  --kit-accent-line: #a9cbb7;
  --kit-focus: #0f5a3e;
  --kit-overlay: rgb(26 26 23 / 0.38);
  --kit-ok: #1c7a4c;
  --kit-ok-soft: #e0f0e6;
  --kit-warn: #8a5300;
  --kit-warn-soft: #f8ecd2;
  --kit-bad: #b42318;
  --kit-bad-soft: #f9e2de;
  --kit-info: #2a5bb8;
  --kit-info-soft: #e3ebf9;
  --kit-tone-ink: #ffffff;
  --kit-font-sans: 'Schibsted Grotesk Variable', 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kit-font-display: var(--kit-font-sans);
  --kit-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --kit-font-num: var(--kit-font-mono);
  --kit-text-xs: 12px;
  --kit-text-sm: 13px;
  --kit-text: 14px;
  --kit-text-lg: 16px;
  --kit-h2: 17px;
  --kit-h1: 28px;
  --kit-stat: 24px;
  --kit-leading: 1.5;
  --kit-weight-medium: 500;
  --kit-weight-strong: 600;
  --kit-weight-heading: 700;
  --kit-tracking-heading: -0.02em;
  --kit-tracking-caps: 0.05em;
  --kit-radius-lg: 14px;
  --kit-radius: 10px;
  --kit-radius-sm: 6px;
  --kit-radius-pill: 999px;
  --kit-border: 1px;
  --kit-focus-width: 2px;
  --kit-space-1: 4px;
  --kit-space-2: 8px;
  --kit-space-3: 12px;
  --kit-space-4: 16px;
  --kit-space-5: 20px;
  --kit-space-6: 24px;
  --kit-space-8: 32px;
  --kit-control-h: 40px;
  --kit-control-h-sm: 32px;
  --kit-card-pad: 18px;
  --kit-cell-y: 12px;
  --kit-cell-x: 16px;
  --kit-sidebar-w: 232px;
  --kit-panel-w: 340px;
  --kit-topbar-h: 56px;
  --kit-content-max: 1180px;
  --kit-page-x: 32px;
  --kit-page-y: 24px;
  --kit-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  --kit-shadow-lg: 0 12px 32px -12px rgb(0 0 0 / 0.2), 0 2px 6px rgb(0 0 0 / 0.06);
  --kit-duration: 120ms;
  --kit-sidebar-bg: var(--kit-bg);
  --kit-sidebar-line: var(--kit-line);
  --kit-nav-ink: var(--kit-ink-2);
  --kit-nav-icon: var(--kit-muted);
  --kit-nav-active-bg: var(--kit-accent-soft);
  --kit-nav-active-ink: var(--kit-accent);
  --kit-nav-active-weight: var(--kit-weight-strong);
  --kit-nav-item-y: var(--kit-space-2);
  --kit-logo-h: 28px;
  --kit-chip-bg: transparent;
  --kit-chip-line: var(--kit-line);
  --kit-selected-bg: var(--kit-ink);
  --kit-selected-ink: var(--kit-bg);
  --kit-selected-line: var(--kit-ink);
  --kit-table-head-bg: transparent;
  --kit-table-head-ink: var(--kit-muted);
  --kit-table-head-size: var(--kit-text-xs);
  --kit-table-head-weight: var(--kit-weight-strong);
  --kit-table-head-case: uppercase;
  --kit-table-head-tracking: var(--kit-tracking-caps);
  --kit-table-head-y: var(--kit-space-2);
  --kit-btn-x: var(--kit-space-4);
  --kit-btn-danger-bg: var(--kit-surface);
  --kit-btn-danger-ink: var(--kit-bad);
  --kit-btn-danger-line: var(--kit-bad);
  --kit-btn-danger-hover: var(--kit-bad-soft);
  --kit-btn-neutral-bg: var(--kit-ink);
  --kit-btn-neutral-ink: var(--kit-bg);
  --kit-btn-neutral-hover: var(--kit-ink-2);
  --kit-input-h: var(--kit-control-h);
  --kit-input-x: var(--kit-space-3);
  --kit-brand-line: transparent;
  --kit-brand-pad: var(--kit-space-4);
  --kit-brand-gap: 0px;
  --kit-nav-icon-size: 18px;
  --kit-chip-size: var(--kit-text-sm);
  --kit-selected-weight: var(--kit-weight-strong);
  --kit-table-link-ink: var(--kit-ink);
  --kit-auth-bg: var(--kit-bg);
  --kit-auth-ink: var(--kit-ink);
  --kit-auth-muted: var(--kit-muted);
  --kit-auth-link: var(--kit-accent);
  --kit-auth-link-hover: var(--kit-accent-hover);
  --kit-auth-align: start;
  --kit-auth-logo-h: var(--kit-logo-h);
  --kit-auth-mark-size: 28px;
  --kit-auth-name: inline;
  --kit-sidebar-x: var(--kit-space-3);
  --kit-pager-h: var(--kit-control-h-sm);
  --kit-search-btn-h: var(--kit-input-h);
  --kit-label-weight: var(--kit-weight-strong);
  --kit-hint-order: 0;
  --kit-input-num-align: right;
  --kit-card-head-line: var(--kit-line);
  --kit-stat-value-weight: var(--kit-weight-medium);
  --kit-stat-icon-ink: currentColor;
  --kit-list-title-weight: var(--kit-weight-strong);
  --kit-auth-valign: start;
  --kit-avatar-size: 32px;
  --kit-auth-w: 440px;
  --kit-error-size: var(--kit-text-xs);
  --kit-error-weight: var(--kit-weight-strong);
  --kit-label-opt: inline;
  --kit-stat-pad-y: var(--kit-space-4);
  --kit-stat-gap: var(--kit-space-1);
  --kit-list-row-y: var(--kit-space-2);
  --kit-search-form-w: auto;
  --kit-btn-ghost-ink: var(--kit-ink-2);
  --kit-chip-count-before: "";
  --kit-chip-count-after: "";
  --kit-chip-count-size: var(--kit-text-xs);
  --kit-card-body-gap: 0px;
  --kit-chip-gap: var(--kit-space-2);
  --kit-table-stack-cell: flex;
  --kit-h1-leading: 1.2;
  --kit-text-xl: 20px;
  --kit-text-2xs: 11px;
  --kit-ph-sub-size: var(--kit-text);
  --kit-ph-sub-ink: var(--kit-ink-2);
  --kit-ph-text-gap: var(--kit-space-1);
  --kit-card-head-y: var(--kit-space-4);
  --kit-card-head-body-gap: var(--kit-card-pad);
  --kit-ph-align: flex-end;
  --kit-ph-gap: var(--kit-space-4);
  --kit-btn-weight: var(--kit-weight-strong);
  --kit-btn-ink: var(--kit-ink);
  --kit-btn-h: var(--kit-control-h);
  --kit-btn-size: inherit;
  --kit-ph-btn-weight: var(--kit-btn-weight);
  --kit-ph-btn-h: var(--kit-btn-h);
  --kit-ph-btn-x: var(--kit-btn-x);
  --kit-ph-btn-ink: var(--kit-btn-ink);
  --kit-btn-sm-size: var(--kit-text-sm);
  --kit-card-title-size: var(--kit-h2);
  --kit-card-title-weight: var(--kit-weight-strong);
  --kit-card-shadow: var(--kit-shadow);
  --kit-stat-label-size: var(--kit-text-sm);
  --kit-stat-label-weight: 400;
  --kit-stat-label-ink: var(--kit-ink-2);
  --kit-stat-label-tracking: normal;
  --kit-stat-value-tracking: -0.01em;
  --kit-stats-gap: var(--kit-space-3);
  --kit-stats-sm-gap: var(--kit-space-2);
  --kit-stat-sm-pad: var(--kit-space-3);
  --kit-stat-sm-size: var(--kit-stat);
  --kit-page-y-sm: var(--kit-page-y);
  --kit-list-body-gap: 2px;
  --kit-list-boxed-leading: var(--kit-leading);
  --kit-label-leading: var(--kit-leading);
  --kit-auth-label-leading: var(--kit-label-leading);
  --kit-btn-icon: 17px;
  --kit-btn-sm-icon: 15px;
  --kit-stat-icon-size: 15px;
  --kit-list-boxed-body-gap: var(--kit-list-body-gap);
  --kit-stats-sm-cols: 2;
  --kit-section-link-ink: var(--kit-accent);
  --kit-section-link-size: var(--kit-text-sm);
  --kit-badge-accent-ink: var(--kit-accent);
  --kit-section-title-size: var(--kit-h2);
  --kit-section-title-weight: var(--kit-weight-strong);
  --kit-list-title-size: inherit;
  --kit-list-meta-size: var(--kit-text-sm);
  --kit-list-end-size: inherit;
  --kit-list-end-weight: 400;
  --kit-list-boxed-title-size: var(--kit-list-title-size);
  --kit-list-boxed-meta-size: var(--kit-list-meta-size);
  --kit-list-boxed-end-size: var(--kit-list-end-size);
  --kit-list-boxed-end-weight: var(--kit-list-end-weight);
  --kit-card-title-lg-size: var(--kit-card-title-size);
  --kit-card-title-lg-weight: var(--kit-card-title-weight);
  --kit-card-title-lg-tracking: var(--kit-tracking-heading);
  --kit-table-cell-ink: var(--kit-ink);
  --kit-table-muted-ink: var(--kit-ink-2);
  --kit-table-act-ink: var(--kit-btn-ghost-ink);
  --kit-table-act-btn: var(--kit-control-h-sm);
  --kit-table-card-shadow: var(--kit-card-shadow);
  --kit-table-row-line: var(--kit-line);
  --kit-table-act-size: 15px;
  --kit-empty-pad-y: var(--kit-space-8);
  --kit-empty-gap: var(--kit-space-2);
  --kit-empty-title-weight: var(--kit-weight-strong);
  --kit-empty-text-size: inherit;
  --kit-chips-gap: var(--kit-space-2);
  --kit-toolbar-gap: var(--kit-space-3);
  --kit-text-ok-ink: var(--kit-ok);
  --kit-text-ok-strong-ink: var(--kit-ok);
  --kit-chip-weight: 400;
  --kit-badge-y: 2px;
  --kit-badge-x: var(--kit-space-2);
  --kit-badge-leading: 1.5;
  --kit-badge-weight: var(--kit-weight-strong);
  --kit-badge-soft-weight: var(--kit-weight-strong);
  --kit-badge-soft-ok-bg: var(--kit-ok-soft);
  --kit-badge-soft-ok-ink: var(--kit-ok);
  --kit-badge-soft-bg: var(--kit-sunken);
  --kit-badge-soft-ink: var(--kit-ink-2);
  --kit-label-size: var(--kit-text-sm);
  --kit-label-ink: var(--kit-ink);
  --kit-label-gap: var(--kit-space-1);
  --kit-label-sm-size: var(--kit-text-xs);
  --kit-label-sm-ink: var(--kit-muted);
  --kit-label-sm-leading: var(--kit-label-leading);
  --kit-label-sm-gap: var(--kit-label-gap);
  --kit-form-sm-gap: var(--kit-space-4);
  --kit-panel-form-gap: var(--kit-form-sm-gap);
  --kit-form-compact-btn-h: var(--kit-btn-h);
  --kit-list-sm-btn: var(--kit-control-h-sm);
  --kit-form-sm-btn-h: var(--kit-btn-h);
  --kit-input-sm-h: var(--kit-control-h-sm);
  --kit-input-sm-x: var(--kit-space-3);
  --kit-check-accent: var(--kit-accent);
  --kit-nav-gap: 2px;
  --kit-check-size: 18px;
  --kit-auth-mark-icon: calc(var(--kit-auth-mark-size) * 4 / 7);
  --kit-form-actions-pad: var(--kit-space-2);
  --kit-auth-gap: var(--kit-space-4);
  --kit-auth-card-gap: var(--kit-space-4);
  --kit-auth-sub-size: var(--kit-text);
  --kit-auth-card-pad: var(--kit-card-pad);
  --kit-auth-card-shadow: var(--kit-card-shadow);
  --kit-sidebar-foot-line: transparent;
  --kit-sidebar-foot-btn-weight: var(--kit-weight-medium);
  --kit-sidebar-foot-pad: var(--kit-space-4);
  --kit-mtop-title-size: var(--kit-text-sm);
  --kit-avatar-lg-size: 44px;
  --kit-btn-xs-h: 28px;
  --kit-btn-xs-x: var(--kit-space-2);
  --kit-btn-xs-size: var(--kit-text-xs);
  --kit-btn-xs-weight: var(--kit-btn-weight);
  --kit-btn-xs-icon: 12px;
  --kit-btn-xs-ink: var(--kit-btn-ink);
  --kit-crumbs-size: var(--kit-text-sm);
  --kit-notice-compact-y: var(--kit-space-2);
  --kit-notice-compact-warn-bg: var(--kit-warn-soft);
  --kit-notice-compact-warn-ink: var(--kit-warn);
  --kit-input-xs-h: 28px;
  --kit-input-xs-x: var(--kit-space-2);
  --kit-avatar-xl-size: 64px;
  --kit-panel-bg: var(--kit-surface-2);
  --kit-panel-line: var(--kit-line);
  --kit-panel-pad: var(--kit-space-4);
  --kit-panel-accent-bg: var(--kit-accent-soft);
  --kit-panel-accent-line: var(--kit-accent-line);
  --kit-panel-accent-pad: var(--kit-card-pad);
  --kit-label-compact-ink: var(--kit-label-ink);
  --kit-label-compact-leading: var(--kit-leading);
  --kit-label-compact-gap: var(--kit-space-1);
  --kit-imagefield-preview-h: 80px;
  --kit-gallery-cols: 3;
  --kit-gallery-cols-sm: 2;
  --kit-gallery-pad: 6px;
  --kit-gallery-badge-size: 10px;
  --kit-filechip-ok-bg: var(--kit-ok-soft);
  --kit-filechip-ok-ink: var(--kit-ok);
  --kit-file-block-line: var(--kit-line-strong);
  --kit-file-block-ink: var(--kit-btn-ink);
  --kit-file-block-weight: var(--kit-btn-weight);
  --kit-sheet-xl-w: 1024px;
  --kit-btn-bad-line: var(--kit-line-strong);
  --kit-ph-sub-max: none;
  --kit-overlap-ring: var(--kit-surface);
  --kit-overlap-bg: var(--kit-surface-2);
  --kit-figure-bg: var(--kit-surface-2);
  --kit-figure-line: var(--kit-line);
  --kit-figure-pad: var(--kit-space-4);
  --kit-figure-max-h: 256px;
  --kit-grid-wn-main: 1.15fr;
  --kit-grid-wn-side: 0.85fr;
  --kit-grid-wn-side-min: 20rem;
  --kit-grid-wn-gap: var(--kit-space-8);
  --kit-grid-min: 320px;
  --kit-grid-2-min: 420px;
  --kit-grid-3-min: 260px;
  --kit-sheet-title-size: var(--kit-h2);
  --kit-sheet-title-weight: var(--kit-weight-strong);
  --kit-sheet-foot-bg: var(--kit-surface-2);
  --kit-sheet-foot-justify: flex-end;
  --kit-sheet-pad-y: var(--kit-card-pad);
  --kit-input-strong-line: var(--kit-ink-2);
  --kit-list-sm-row-y: var(--kit-space-2);
  --kit-list-sm-title-weight: var(--kit-list-title-weight);
  --kit-imagefield-btn-weight: var(--kit-btn-weight);
  --kit-choice-on-bg: var(--kit-accent-soft);
  --kit-choice-on-line: var(--kit-accent);
  --kit-choice-on-ink: var(--kit-accent);
  --kit-dense-input-min: 4rem;
  --kit-card-sub-size: var(--kit-text-sm);
  --kit-card-sub-gap: var(--kit-space-1);
  --kit-check-strong-weight: var(--kit-label-weight);
  --kit-check-strong-ink: var(--kit-label-ink);
  --kit-check-strong-leading: inherit;
  --kit-check-strong-gap: var(--kit-space-2);
  --kit-badge-md-x: var(--kit-space-3);
  --kit-badge-md-y: var(--kit-space-1);
  --kit-badge-md-weight: var(--kit-weight-medium);
  --kit-badge-soft-bad-bg: var(--kit-bad-soft);
  --kit-badge-soft-bad-ink: var(--kit-bad);
  --kit-sticky-bar-mx: calc(var(--kit-space-4) * -1);
  --kit-sticky-bar-side: 0px;
  --kit-sticky-bar-radius: 0px;
  --kit-ph-after: 0px;
  --kit-icon-stroke: 1.8;
  --kit-code-keyword: #8b2f7a;
  --kit-code-string: #2f6b1f;
  --kit-code-comment: #625e56;
  --kit-code-number: #8a5300;
  --kit-code-function: #1f4fa8;
  --kit-code-type: #0f6a6a;
  --kit-code-attr: #9b3a1e;
  --kit-code-punct: var(--kit-ink-2);
  --kit-code-meta: var(--kit-info);
  --kit-diff-add-bg: #e1f1e4;
  --kit-diff-add-ink: #1c6b3e;
  --kit-diff-del-bg: #f9e3df;
  --kit-diff-del-ink: #a3261b;
  --kit-md-gap: 10px;
  --kit-md-h1: 20px;
  --kit-md-h2: var(--kit-h2);
  --kit-md-h3: var(--kit-text-lg);
  --kit-input-touch-size: 16px;
  --kit-chat-text: 15px;
  --kit-chat-me-bg: var(--kit-accent-soft);
  --kit-chat-me-ink: var(--kit-ink);
  --kit-chat-me-meta: var(--kit-ink-2);
  --kit-chat-them-bg: var(--kit-surface);
  --kit-chat-them-ink: var(--kit-ink);
  --kit-chat-them-line: var(--kit-line);
  --kit-chat-meta: var(--kit-muted);
  --kit-chat-system-bg: var(--kit-sunken);
  --kit-chat-system-ink: var(--kit-ink-2);
  --kit-chat-head-bg: var(--kit-bg);
  --kit-chat-dock-bg: var(--kit-surface);
  --kit-chat-input-bg: var(--kit-surface-2);
  --kit-chat-input-line: var(--kit-line);
  --kit-chat-input-size: 16px;
  --kit-chat-max: 860px;
  --kit-chat-gap: var(--kit-space-3);
  --kit-chat-gap-run: 3px;
  --kit-chat-bubble-x: 12px;
  --kit-chat-bubble-y: 7px;
  --kit-chat-bubble-max: 85%;
  --kit-chat-bubble-max-wide: 75%;
  --kit-chat-radius: var(--kit-radius-lg);
  --kit-chat-tail-radius: var(--kit-radius-sm);
  --kit-chat-time-size: var(--kit-text-2xs);
  --kit-card-foot-bg: var(--kit-surface-2);
  --kit-card-foot-line: var(--kit-line);
  --kit-card-bg: var(--kit-surface);
  --kit-card-line: var(--kit-line);
  --kit-btn-bg: var(--kit-surface);
  --kit-btn-line: var(--kit-line-strong);
  --kit-btn-radius: var(--kit-radius);
  --kit-tabs-pill-bg: transparent;
  --kit-tabs-pill-line: transparent;
  --kit-tabs-pill-ink: var(--kit-ink-2);
  --kit-tabs-pill-active-bg: var(--kit-accent);
  --kit-tabs-pill-active-ink: var(--kit-accent-ink);
  --kit-tabs-pill-rule: var(--kit-line);
  --kit-tabs-pill-radius: var(--kit-radius);
  --kit-tabs-pill-size: inherit;
  --kit-tabs-pill-y: var(--kit-space-2);
  --kit-tabs-pill-x: var(--kit-space-3);
  --kit-stat-icon-bg: transparent;
  --kit-stat-icon-pad: 0px;
  --kit-stat-accent-bg: var(--kit-accent-soft);
  --kit-stat-accent-ink: var(--kit-ink);
  --kit-stat-accent-muted: var(--kit-ink-2);
  --kit-stat-contrast-bg: var(--kit-ink);
  --kit-stat-contrast-ink: var(--kit-bg);
  --kit-stat-contrast-muted: var(--kit-faint);
  --kit-card-contrast-bg: var(--kit-ink);
  --kit-card-contrast-ink: var(--kit-bg);
  --kit-card-contrast-muted: var(--kit-faint);
  --kit-meter-seg-h: 28px;
  --kit-meter-seg-gap: var(--kit-space-1);
  --kit-meter-seg-w: 16px;
  --kit-meter-seg-radius: var(--kit-radius-pill);
  --kit-meter-seg-on: var(--kit-accent);
  --kit-meter-seg-off: var(--kit-line-strong);
  --kit-bars-h: 150px;
  --kit-bar-w: 34px;
  --kit-bar-radius: var(--kit-radius-sm);
  --kit-bar-radius-bottom: 0px;
  --kit-bar-bg: var(--kit-accent-line);
  --kit-bar-current-bg: var(--kit-accent);
  --kit-bar-empty-grow: 0;
  --kit-bar-empty-bg: var(--kit-bar-bg);
  --kit-bar-empty-line: transparent;
  --kit-tile-bg: var(--kit-card-bg);
  --kit-tile-line: var(--kit-card-line);
  --kit-tile-hover-bg: var(--kit-surface-2);
  --kit-tile-icon-bg: var(--kit-sunken);
  --kit-tile-text-ink: var(--kit-muted);
  --kit-tile-pad: var(--kit-space-4);
  --kit-tile-radius: var(--kit-radius-lg);
  --kit-tile-min: 160px;
  --kit-rail-w: 64px;
  --kit-rail-inset: 12px;
  --kit-rail-radius: 22px;
  --kit-rail-item: 40px;
  --kit-rail-bg: var(--kit-ink);
  --kit-rail-icon: var(--kit-faint);
  --kit-rail-hover-bg: color-mix(in oklab, var(--kit-ink-2) 45%, var(--kit-ink));
  --kit-rail-active-bg: var(--kit-ink-2);
  --kit-rail-active-ink: var(--kit-bg);
  --kit-rail-brand-bg: var(--kit-bg);
  --kit-rail-brand-ink: var(--kit-ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --kit-bg: #121311;
    --kit-surface: #1a1b18;
    --kit-surface-2: #20211e;
    --kit-sunken: #0e0f0d;
    --kit-ink: #f1efe9;
    --kit-ink-2: #c9c5bb;
    --kit-muted: #a19c91;
    --kit-faint: #6f6b62;
    --kit-line: #2c2d29;
    --kit-line-strong: #3d3e39;
    --kit-accent: #5fbf8f;
    --kit-accent-hover: #7fd1a7;
    --kit-accent-ink: #08261a;
    --kit-accent-soft: #1c3127;
    --kit-accent-line: #2f5c45;
    --kit-focus: #7fd1a7;
    --kit-overlay: rgb(0 0 0 / 0.6);
    --kit-ok: #63cf93;
    --kit-ok-soft: #16291e;
    --kit-warn: #f0b85a;
    --kit-warn-soft: #2f2511;
    --kit-bad: #f2766c;
    --kit-bad-soft: #33191a;
    --kit-info: #8fb2f5;
    --kit-info-soft: #17213a;
    --kit-tone-ink: #0e0f0d;
    --kit-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
    --kit-shadow-lg: 0 12px 32px -12px rgb(0 0 0 / 0.7);
    --kit-sidebar-bg: var(--kit-bg);
    --kit-sidebar-line: var(--kit-line);
    --kit-nav-ink: var(--kit-ink-2);
    --kit-nav-icon: var(--kit-muted);
    --kit-nav-active-bg: var(--kit-accent-soft);
    --kit-nav-active-ink: var(--kit-accent);
    --kit-chip-bg: transparent;
    --kit-chip-line: var(--kit-line);
    --kit-selected-bg: var(--kit-ink);
    --kit-selected-ink: var(--kit-bg);
    --kit-selected-line: var(--kit-ink);
    --kit-table-head-bg: transparent;
    --kit-table-head-ink: var(--kit-muted);
    --kit-btn-danger-bg: var(--kit-surface);
    --kit-btn-danger-ink: var(--kit-bad);
    --kit-btn-danger-line: var(--kit-bad);
    --kit-btn-danger-hover: var(--kit-bad-soft);
    --kit-btn-neutral-bg: var(--kit-ink);
    --kit-btn-neutral-ink: var(--kit-bg);
    --kit-btn-neutral-hover: var(--kit-ink-2);
    --kit-brand-line: transparent;
    --kit-table-link-ink: var(--kit-ink);
    --kit-auth-bg: var(--kit-bg);
    --kit-auth-ink: var(--kit-ink);
    --kit-auth-muted: var(--kit-muted);
    --kit-auth-link: var(--kit-accent);
    --kit-auth-link-hover: var(--kit-accent-hover);
    --kit-card-head-line: var(--kit-line);
    --kit-stat-icon-ink: currentColor;
    --kit-btn-ghost-ink: var(--kit-ink-2);
    --kit-ph-sub-ink: var(--kit-ink-2);
    --kit-btn-ink: var(--kit-ink);
    --kit-ph-btn-ink: var(--kit-btn-ink);
    --kit-card-shadow: var(--kit-shadow);
    --kit-stat-label-ink: var(--kit-ink-2);
    --kit-section-link-ink: var(--kit-accent);
    --kit-badge-accent-ink: var(--kit-accent);
    --kit-table-cell-ink: var(--kit-ink);
    --kit-table-muted-ink: var(--kit-ink-2);
    --kit-table-act-ink: var(--kit-btn-ghost-ink);
    --kit-table-card-shadow: var(--kit-card-shadow);
    --kit-table-row-line: var(--kit-line);
    --kit-text-ok-ink: var(--kit-ok);
    --kit-text-ok-strong-ink: var(--kit-ok);
    --kit-badge-soft-ok-bg: var(--kit-ok-soft);
    --kit-badge-soft-ok-ink: var(--kit-ok);
    --kit-badge-soft-bg: var(--kit-sunken);
    --kit-badge-soft-ink: var(--kit-ink-2);
    --kit-label-ink: var(--kit-ink);
    --kit-label-sm-ink: var(--kit-muted);
    --kit-check-accent: var(--kit-accent);
    --kit-auth-card-shadow: var(--kit-card-shadow);
    --kit-sidebar-foot-line: transparent;
    --kit-btn-xs-ink: var(--kit-btn-ink);
    --kit-notice-compact-warn-bg: var(--kit-warn-soft);
    --kit-notice-compact-warn-ink: var(--kit-warn);
    --kit-panel-bg: var(--kit-surface-2);
    --kit-panel-line: var(--kit-line);
    --kit-panel-accent-bg: var(--kit-accent-soft);
    --kit-panel-accent-line: var(--kit-accent-line);
    --kit-label-compact-ink: var(--kit-label-ink);
    --kit-filechip-ok-bg: var(--kit-ok-soft);
    --kit-filechip-ok-ink: var(--kit-ok);
    --kit-file-block-line: var(--kit-line-strong);
    --kit-file-block-ink: var(--kit-btn-ink);
    --kit-btn-bad-line: var(--kit-line-strong);
    --kit-overlap-ring: var(--kit-surface);
    --kit-overlap-bg: var(--kit-surface-2);
    --kit-figure-bg: var(--kit-surface-2);
    --kit-figure-line: var(--kit-line);
    --kit-sheet-foot-bg: var(--kit-surface-2);
    --kit-input-strong-line: var(--kit-ink-2);
    --kit-choice-on-bg: var(--kit-accent-soft);
    --kit-choice-on-line: var(--kit-accent);
    --kit-choice-on-ink: var(--kit-accent);
    --kit-check-strong-ink: var(--kit-label-ink);
    --kit-badge-soft-bad-bg: var(--kit-bad-soft);
    --kit-badge-soft-bad-ink: var(--kit-bad);
    --kit-code-keyword: #e0a3e8;
    --kit-code-string: #a6d98a;
    --kit-code-comment: var(--kit-muted);
    --kit-code-number: #f0b86a;
    --kit-code-function: #8fb8f5;
    --kit-code-type: #6fd0c8;
    --kit-code-attr: #f29a7a;
    --kit-code-punct: var(--kit-ink-2);
    --kit-code-meta: var(--kit-info);
    --kit-diff-add-bg: #15291c;
    --kit-diff-add-ink: #7fd6a0;
    --kit-diff-del-bg: #341a1b;
    --kit-diff-del-ink: #f2918a;
    --kit-chat-me-bg: color-mix(in oklab, var(--kit-accent) 30%, var(--kit-surface));
    --kit-chat-me-ink: var(--kit-ink);
    --kit-chat-me-meta: var(--kit-ink-2);
    --kit-chat-them-bg: var(--kit-surface);
    --kit-chat-them-ink: var(--kit-ink);
    --kit-chat-them-line: var(--kit-line);
    --kit-chat-meta: var(--kit-muted);
    --kit-chat-system-bg: var(--kit-surface-2);
    --kit-chat-system-ink: var(--kit-ink-2);
    --kit-chat-head-bg: var(--kit-bg);
    --kit-chat-dock-bg: var(--kit-surface);
    --kit-chat-input-bg: var(--kit-surface-2);
    --kit-chat-input-line: var(--kit-line);
    --kit-card-foot-bg: var(--kit-surface-2);
    --kit-card-foot-line: var(--kit-line);
    --kit-card-bg: var(--kit-surface);
    --kit-card-line: var(--kit-line);
    --kit-btn-bg: var(--kit-surface);
    --kit-btn-line: var(--kit-line-strong);
    --kit-tabs-pill-bg: transparent;
    --kit-tabs-pill-line: transparent;
    --kit-tabs-pill-ink: var(--kit-ink-2);
    --kit-tabs-pill-active-bg: var(--kit-accent);
    --kit-tabs-pill-active-ink: var(--kit-accent-ink);
    --kit-tabs-pill-rule: var(--kit-line);
    --kit-stat-icon-bg: transparent;
    --kit-stat-accent-bg: var(--kit-accent-soft);
    --kit-stat-accent-ink: var(--kit-ink);
    --kit-stat-accent-muted: var(--kit-ink-2);
    --kit-stat-contrast-bg: var(--kit-sunken);
    --kit-stat-contrast-ink: var(--kit-ink);
    --kit-stat-contrast-muted: var(--kit-muted);
    --kit-card-contrast-bg: var(--kit-sunken);
    --kit-card-contrast-ink: var(--kit-ink);
    --kit-card-contrast-muted: var(--kit-muted);
    --kit-meter-seg-on: var(--kit-accent);
    --kit-meter-seg-off: var(--kit-line-strong);
    --kit-bar-bg: var(--kit-accent-line);
    --kit-bar-current-bg: var(--kit-accent);
    --kit-bar-empty-bg: var(--kit-bar-bg);
    --kit-bar-empty-line: transparent;
    --kit-tile-bg: var(--kit-card-bg);
    --kit-tile-line: var(--kit-card-line);
    --kit-tile-hover-bg: var(--kit-surface-2);
    --kit-tile-icon-bg: var(--kit-sunken);
    --kit-tile-text-ink: var(--kit-muted);
    --kit-rail-bg: var(--kit-surface);
    --kit-rail-icon: var(--kit-muted);
    --kit-rail-hover-bg: var(--kit-surface-2);
    --kit-rail-active-bg: var(--kit-line-strong);
    --kit-rail-active-ink: var(--kit-ink);
    --kit-rail-brand-bg: var(--kit-ink);
    --kit-rail-brand-ink: var(--kit-bg);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --kit-bg: #121311;
  --kit-surface: #1a1b18;
  --kit-surface-2: #20211e;
  --kit-sunken: #0e0f0d;
  --kit-ink: #f1efe9;
  --kit-ink-2: #c9c5bb;
  --kit-muted: #a19c91;
  --kit-faint: #6f6b62;
  --kit-line: #2c2d29;
  --kit-line-strong: #3d3e39;
  --kit-accent: #5fbf8f;
  --kit-accent-hover: #7fd1a7;
  --kit-accent-ink: #08261a;
  --kit-accent-soft: #1c3127;
  --kit-accent-line: #2f5c45;
  --kit-focus: #7fd1a7;
  --kit-overlay: rgb(0 0 0 / 0.6);
  --kit-ok: #63cf93;
  --kit-ok-soft: #16291e;
  --kit-warn: #f0b85a;
  --kit-warn-soft: #2f2511;
  --kit-bad: #f2766c;
  --kit-bad-soft: #33191a;
  --kit-info: #8fb2f5;
  --kit-info-soft: #17213a;
  --kit-tone-ink: #0e0f0d;
  --kit-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  --kit-shadow-lg: 0 12px 32px -12px rgb(0 0 0 / 0.7);
  --kit-sidebar-bg: var(--kit-bg);
  --kit-sidebar-line: var(--kit-line);
  --kit-nav-ink: var(--kit-ink-2);
  --kit-nav-icon: var(--kit-muted);
  --kit-nav-active-bg: var(--kit-accent-soft);
  --kit-nav-active-ink: var(--kit-accent);
  --kit-chip-bg: transparent;
  --kit-chip-line: var(--kit-line);
  --kit-selected-bg: var(--kit-ink);
  --kit-selected-ink: var(--kit-bg);
  --kit-selected-line: var(--kit-ink);
  --kit-table-head-bg: transparent;
  --kit-table-head-ink: var(--kit-muted);
  --kit-btn-danger-bg: var(--kit-surface);
  --kit-btn-danger-ink: var(--kit-bad);
  --kit-btn-danger-line: var(--kit-bad);
  --kit-btn-danger-hover: var(--kit-bad-soft);
  --kit-btn-neutral-bg: var(--kit-ink);
  --kit-btn-neutral-ink: var(--kit-bg);
  --kit-btn-neutral-hover: var(--kit-ink-2);
  --kit-brand-line: transparent;
  --kit-table-link-ink: var(--kit-ink);
  --kit-auth-bg: var(--kit-bg);
  --kit-auth-ink: var(--kit-ink);
  --kit-auth-muted: var(--kit-muted);
  --kit-auth-link: var(--kit-accent);
  --kit-auth-link-hover: var(--kit-accent-hover);
  --kit-card-head-line: var(--kit-line);
  --kit-stat-icon-ink: currentColor;
  --kit-btn-ghost-ink: var(--kit-ink-2);
  --kit-ph-sub-ink: var(--kit-ink-2);
  --kit-btn-ink: var(--kit-ink);
  --kit-ph-btn-ink: var(--kit-btn-ink);
  --kit-card-shadow: var(--kit-shadow);
  --kit-stat-label-ink: var(--kit-ink-2);
  --kit-section-link-ink: var(--kit-accent);
  --kit-badge-accent-ink: var(--kit-accent);
  --kit-table-cell-ink: var(--kit-ink);
  --kit-table-muted-ink: var(--kit-ink-2);
  --kit-table-act-ink: var(--kit-btn-ghost-ink);
  --kit-table-card-shadow: var(--kit-card-shadow);
  --kit-table-row-line: var(--kit-line);
  --kit-text-ok-ink: var(--kit-ok);
  --kit-text-ok-strong-ink: var(--kit-ok);
  --kit-badge-soft-ok-bg: var(--kit-ok-soft);
  --kit-badge-soft-ok-ink: var(--kit-ok);
  --kit-badge-soft-bg: var(--kit-sunken);
  --kit-badge-soft-ink: var(--kit-ink-2);
  --kit-label-ink: var(--kit-ink);
  --kit-label-sm-ink: var(--kit-muted);
  --kit-check-accent: var(--kit-accent);
  --kit-auth-card-shadow: var(--kit-card-shadow);
  --kit-sidebar-foot-line: transparent;
  --kit-btn-xs-ink: var(--kit-btn-ink);
  --kit-notice-compact-warn-bg: var(--kit-warn-soft);
  --kit-notice-compact-warn-ink: var(--kit-warn);
  --kit-panel-bg: var(--kit-surface-2);
  --kit-panel-line: var(--kit-line);
  --kit-panel-accent-bg: var(--kit-accent-soft);
  --kit-panel-accent-line: var(--kit-accent-line);
  --kit-label-compact-ink: var(--kit-label-ink);
  --kit-filechip-ok-bg: var(--kit-ok-soft);
  --kit-filechip-ok-ink: var(--kit-ok);
  --kit-file-block-line: var(--kit-line-strong);
  --kit-file-block-ink: var(--kit-btn-ink);
  --kit-btn-bad-line: var(--kit-line-strong);
  --kit-overlap-ring: var(--kit-surface);
  --kit-overlap-bg: var(--kit-surface-2);
  --kit-figure-bg: var(--kit-surface-2);
  --kit-figure-line: var(--kit-line);
  --kit-sheet-foot-bg: var(--kit-surface-2);
  --kit-input-strong-line: var(--kit-ink-2);
  --kit-choice-on-bg: var(--kit-accent-soft);
  --kit-choice-on-line: var(--kit-accent);
  --kit-choice-on-ink: var(--kit-accent);
  --kit-check-strong-ink: var(--kit-label-ink);
  --kit-badge-soft-bad-bg: var(--kit-bad-soft);
  --kit-badge-soft-bad-ink: var(--kit-bad);
  --kit-code-keyword: #e0a3e8;
  --kit-code-string: #a6d98a;
  --kit-code-comment: var(--kit-muted);
  --kit-code-number: #f0b86a;
  --kit-code-function: #8fb8f5;
  --kit-code-type: #6fd0c8;
  --kit-code-attr: #f29a7a;
  --kit-code-punct: var(--kit-ink-2);
  --kit-code-meta: var(--kit-info);
  --kit-diff-add-bg: #15291c;
  --kit-diff-add-ink: #7fd6a0;
  --kit-diff-del-bg: #341a1b;
  --kit-diff-del-ink: #f2918a;
  --kit-chat-me-bg: color-mix(in oklab, var(--kit-accent) 30%, var(--kit-surface));
  --kit-chat-me-ink: var(--kit-ink);
  --kit-chat-me-meta: var(--kit-ink-2);
  --kit-chat-them-bg: var(--kit-surface);
  --kit-chat-them-ink: var(--kit-ink);
  --kit-chat-them-line: var(--kit-line);
  --kit-chat-meta: var(--kit-muted);
  --kit-chat-system-bg: var(--kit-surface-2);
  --kit-chat-system-ink: var(--kit-ink-2);
  --kit-chat-head-bg: var(--kit-bg);
  --kit-chat-dock-bg: var(--kit-surface);
  --kit-chat-input-bg: var(--kit-surface-2);
  --kit-chat-input-line: var(--kit-line);
  --kit-card-foot-bg: var(--kit-surface-2);
  --kit-card-foot-line: var(--kit-line);
  --kit-card-bg: var(--kit-surface);
  --kit-card-line: var(--kit-line);
  --kit-btn-bg: var(--kit-surface);
  --kit-btn-line: var(--kit-line-strong);
  --kit-tabs-pill-bg: transparent;
  --kit-tabs-pill-line: transparent;
  --kit-tabs-pill-ink: var(--kit-ink-2);
  --kit-tabs-pill-active-bg: var(--kit-accent);
  --kit-tabs-pill-active-ink: var(--kit-accent-ink);
  --kit-tabs-pill-rule: var(--kit-line);
  --kit-stat-icon-bg: transparent;
  --kit-stat-accent-bg: var(--kit-accent-soft);
  --kit-stat-accent-ink: var(--kit-ink);
  --kit-stat-accent-muted: var(--kit-ink-2);
  --kit-stat-contrast-bg: var(--kit-sunken);
  --kit-stat-contrast-ink: var(--kit-ink);
  --kit-stat-contrast-muted: var(--kit-muted);
  --kit-card-contrast-bg: var(--kit-sunken);
  --kit-card-contrast-ink: var(--kit-ink);
  --kit-card-contrast-muted: var(--kit-muted);
  --kit-meter-seg-on: var(--kit-accent);
  --kit-meter-seg-off: var(--kit-line-strong);
  --kit-bar-bg: var(--kit-accent-line);
  --kit-bar-current-bg: var(--kit-accent);
  --kit-bar-empty-bg: var(--kit-bar-bg);
  --kit-bar-empty-line: transparent;
  --kit-tile-bg: var(--kit-card-bg);
  --kit-tile-line: var(--kit-card-line);
  --kit-tile-hover-bg: var(--kit-surface-2);
  --kit-tile-icon-bg: var(--kit-sunken);
  --kit-tile-text-ink: var(--kit-muted);
  --kit-rail-bg: var(--kit-surface);
  --kit-rail-icon: var(--kit-muted);
  --kit-rail-hover-bg: var(--kit-surface-2);
  --kit-rail-active-bg: var(--kit-line-strong);
  --kit-rail-active-ink: var(--kit-ink);
  --kit-rail-brand-bg: var(--kit-ink);
  --kit-rail-brand-ink: var(--kit-bg);
}
}
/* @kerf/kit — component styles. Every colour, radius, font, size step and shadow comes from a
 * --kit-* token (src/lib/tokens.ts); a theme file sets them. test/css.test.ts enforces this.
 * Load order in an app: kit.css, then the product theme (or themes/werkbank.css). */


/* The built dist/kit.css starts with the werkbank defaults in @layer kit.tokens, so a product theme
 * (unlayered) only needs the values it changes. */

/* ------------------------------------------------------------------ reset */
@layer kit.reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* anchors and focused fields land below sticky bars */
  html:has(.kit-shell[data-layout='top']) { scroll-padding-top: calc(var(--kit-topbar-h) + var(--kit-space-3)); }
  @media (max-width: 860px) { html:has(.kit-mtop) { scroll-padding-top: calc(var(--kit-topbar-h) + env(safe-area-inset-top) + var(--kit-space-3)); } }
  body, h1, h2, h3, h4, p, figure, dl, dd, blockquote, ul, ol { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  svg.kit-i { display: inline-block; flex: none; vertical-align: -0.2em; }
  button, input, select, textarea { font: inherit; color: inherit; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

/* ------------------------------------------------------------------ base */
@layer kit.base {
  body {
    background: var(--kit-bg);
    color: var(--kit-ink);
    font-family: var(--kit-font-sans);
    font-size: var(--kit-text);
    line-height: var(--kit-leading);
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--kit-accent); text-decoration: none; }
  a:hover { color: var(--kit-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
  /* Links inside running text are underlined, so they do not rely on colour alone (WCAG 1.4.1). */
  :where(p, li, dd, blockquote, .kit-hint, .kit-notice, .kit-callout) a:not([class]) { text-decoration: underline; text-decoration-color: var(--kit-accent-line); text-underline-offset: 3px; }
  :where(p, li, dd, blockquote, .kit-hint, .kit-notice, .kit-callout) a:not([class]):hover { text-decoration-color: currentColor; }
  :focus-visible { outline: var(--kit-focus-width) solid var(--kit-focus); outline-offset: 2px; }
  ::selection { background: var(--kit-accent-soft); }
  svg.kit-i { stroke-width: var(--kit-icon-stroke); }
  h1, h2, h3 { font-family: var(--kit-font-display); letter-spacing: var(--kit-tracking-heading); }
  h1 { font-size: var(--kit-h1); font-weight: var(--kit-weight-heading); line-height: var(--kit-h1-leading); }
  h2 { font-size: var(--kit-h2); font-weight: var(--kit-weight-strong); line-height: 1.3; }
  h3 { font-size: var(--kit-text-lg); font-weight: var(--kit-weight-strong); }
  code, kbd, pre { font-family: var(--kit-font-mono); font-size: var(--kit-text-sm); }
  ul, ol { padding-left: var(--kit-space-5); }
  li + li { margin-top: var(--kit-space-1); }
}

/* ------------------------------------------------------------------ components */
@layer kit.components {

  /* ---- app shell: sidebar layout (default) ---- */
  .kit-shell { min-height: 100vh; display: grid; grid-template-columns: var(--kit-sidebar-w) minmax(0, 1fr); }
  .kit-sidebar {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--kit-space-1);
    padding: var(--kit-space-5) var(--kit-sidebar-x);
    border-right: var(--kit-border) solid var(--kit-sidebar-line);
    background: var(--kit-sidebar-bg);
  }
  .kit-brand {
    display: flex; align-items: center; gap: var(--kit-space-3);
    padding: var(--kit-space-1) var(--kit-space-2) var(--kit-space-4);
    color: var(--kit-ink); font-weight: var(--kit-weight-heading); font-size: var(--kit-text-lg);
    letter-spacing: var(--kit-tracking-heading);
  }
  .kit-brand:hover { color: var(--kit-ink); text-decoration: none; }
  /* sidebar brand: optional divider line across the full sidebar width (--kit-brand-line), drawn as an inset
     shadow so it takes no space; the content box stays where it was */
  .kit-sidebar > .kit-brand {
    margin: 0 calc(-1 * var(--kit-sidebar-x)) var(--kit-brand-gap);
    padding: var(--kit-space-1) calc(var(--kit-space-2) + var(--kit-sidebar-x)) var(--kit-brand-pad);
    box-shadow: inset 0 calc(-1 * var(--kit-border)) 0 var(--kit-brand-line);
  }
  .kit-brand-mark {
    display: grid; place-items: center; width: 28px; height: 28px; flex: none;
    border-radius: var(--kit-radius-sm); background: var(--kit-accent); color: var(--kit-accent-ink);
  }
  /* image logo instead of mark + name; with a dark variant both are rendered and the mode picks one */
  .kit-brand-logo { display: flex; align-items: center; min-width: 0; }
  .kit-brand-logo img { height: var(--kit-logo-h); width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
  .kit-brand-logo img[data-dark] { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .kit-brand-logo img[data-light] { display: none; }
    :root:not([data-theme='light']) .kit-brand-logo img[data-dark] { display: block; }
  }
  :root[data-theme='dark'] .kit-brand-logo img[data-light] { display: none; }
  :root[data-theme='dark'] .kit-brand-logo img[data-dark] { display: block; }
  .kit-env {
    font-size: var(--kit-text-xs); font-weight: var(--kit-weight-strong); text-transform: uppercase;
    letter-spacing: var(--kit-tracking-caps); color: var(--kit-warn); background: var(--kit-warn-soft);
    padding: 1px var(--kit-space-2); border-radius: var(--kit-radius-pill);
  }
  .kit-nav { display: flex; flex-direction: column; gap: var(--kit-nav-gap); }
  .kit-nav-section {
    padding: var(--kit-space-4) var(--kit-space-3) var(--kit-space-1);
    font-size: var(--kit-text-xs); font-weight: var(--kit-weight-strong); color: var(--kit-muted);
    text-transform: uppercase; letter-spacing: var(--kit-tracking-caps);
  }
  .kit-nav a {
    display: flex; align-items: center; gap: var(--kit-space-3);
    padding: var(--kit-nav-item-y) var(--kit-space-3); border-radius: var(--kit-radius);
    color: var(--kit-nav-ink); font-weight: var(--kit-weight-medium);
  }
  .kit-nav a .kit-i { width: var(--kit-nav-icon-size); height: var(--kit-nav-icon-size); color: var(--kit-nav-icon); }
  .kit-nav a:hover { background: var(--kit-sunken); color: var(--kit-ink); text-decoration: none; }
  .kit-nav a[aria-current='page'] { background: var(--kit-nav-active-bg); color: var(--kit-nav-active-ink); font-weight: var(--kit-nav-active-weight); }
  .kit-nav a[aria-current='page'] .kit-i { color: var(--kit-nav-active-ink); }
  .kit-nav-count { margin-left: auto; font-family: var(--kit-font-num); font-size: var(--kit-text-xs); color: var(--kit-muted); }
  .kit-nav a[aria-current='page'] .kit-nav-count { color: var(--kit-nav-active-ink); }
  .kit-sidebar-foot { margin-top: auto; padding-top: var(--kit-space-4); display: flex; flex-direction: column; gap: 2px; }
  .kit-user { padding: var(--kit-space-2) var(--kit-space-3); font-size: var(--kit-text-sm); color: var(--kit-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* sidebar footer (0.14.4, e.g. "Signed in as …" and a log-out button): below the foot items, over the full width
     with an optional divider line */
  .kit-sidebar-footer {
    margin: var(--kit-space-2) calc(-1 * var(--kit-sidebar-x)) calc(-1 * var(--kit-space-5));
    padding: var(--kit-sidebar-foot-pad); border-top: var(--kit-border) solid var(--kit-sidebar-foot-line);
    display: flex; flex-direction: column; gap: var(--kit-space-2); min-width: 0;
  }
  .kit-sidebar-footer > * { min-width: 0; }
  .kit-sidebar-footer .kit-user { padding: 0; font-size: var(--kit-text-xs); color: var(--kit-faint); }
  .kit-sidebar-footer .kit-btn { justify-content: flex-start; height: auto; padding: var(--kit-space-2) var(--kit-space-3); font-weight: var(--kit-sidebar-foot-btn-weight); }
  .kit-sidebar-footer form { display: contents; }

  .kit-main { min-width: 0; display: flex; flex-direction: column; }

  /* ---- app shell: side panel (inspector, filters, editor) ---- */
  .kit-shell[data-panel] { grid-template-columns: var(--kit-sidebar-w) minmax(0, 1fr) var(--kit-panel-w); }
  .kit-panel {
    position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--kit-space-5) var(--kit-space-4);
    border-left: var(--kit-border) solid var(--kit-line); background: var(--kit-surface);
  }
  /* Too narrow for three columns: the panel floats over the right edge of the content. */
  @media (max-width: 1100px) and (min-width: 861px) {
    .kit-shell[data-panel] { grid-template-columns: var(--kit-sidebar-w) minmax(0, 1fr); }
    .kit-shell[data-layout='rail'][data-panel] { grid-template-columns: calc(var(--kit-rail-w) + var(--kit-rail-inset) * 2) minmax(0, 1fr); }
    .kit-panel { position: fixed; top: 0; right: 0; z-index: 25; width: var(--kit-panel-w); box-shadow: var(--kit-shadow-lg); }
  }
  /* ---- app shell: rail layout (0.17.0): a floating icon-only sidebar; labels are tooltips and stay for screen readers ---- */
  .kit-shell[data-layout='rail'] { grid-template-columns: calc(var(--kit-rail-w) + var(--kit-rail-inset) * 2) minmax(0, 1fr); }
  .kit-shell[data-layout='rail'][data-panel] { grid-template-columns: calc(var(--kit-rail-w) + var(--kit-rail-inset) * 2) minmax(0, 1fr) var(--kit-panel-w); }
  .kit-shell[data-layout='rail'] > .kit-sidebar {
    top: var(--kit-rail-inset); height: calc(100vh - var(--kit-rail-inset) * 2); margin: var(--kit-rail-inset);
    align-items: center; gap: var(--kit-space-2); padding: var(--kit-space-3) 0; overflow-x: hidden;
    border: 0; border-radius: var(--kit-rail-radius); background: var(--kit-rail-bg);
  }
  .kit-shell[data-layout='rail'] > .kit-sidebar > .kit-brand { margin: 0 0 var(--kit-space-2); padding: 0; box-shadow: none; gap: 0; }
  .kit-shell[data-layout='rail'] > .kit-sidebar .kit-brand-mark {
    width: var(--kit-rail-item); height: var(--kit-rail-item); border-radius: var(--kit-radius-pill);
    background: var(--kit-rail-brand-bg); color: var(--kit-rail-brand-ink);
  }
  .kit-shell[data-layout='rail'] > .kit-sidebar .kit-brand-logo img { height: var(--kit-rail-item); }
  .kit-shell[data-layout='rail'] > .kit-sidebar :is(.kit-brand > span:not([class]), .kit-nav a > span:not(.kit-nav-count)) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .kit-shell[data-layout='rail'] > .kit-sidebar :is(.kit-env, .kit-user) { display: none; }
  .kit-shell[data-layout='rail'] > .kit-sidebar .kit-nav { align-items: center; gap: var(--kit-space-2); }
  .kit-shell[data-layout='rail'] > .kit-sidebar .kit-nav a {
    position: relative; justify-content: center; width: var(--kit-rail-item); height: var(--kit-rail-item); padding: 0;
    border-radius: var(--kit-radius); color: var(--kit-rail-icon);
  }
  .kit-shell[data-layout='rail'] > .kit-sidebar .kit-nav a .kit-i { color: inherit; }
  .kit-shell[data-layout='rail'] > .kit-sidebar .kit-nav a:hover { background: var(--kit-rail-hover-bg); color: var(--kit-rail-active-ink); }
  .kit-shell[data-layout='rail'] > .kit-sidebar .kit-nav a[aria-current='page'] { background: var(--kit-rail-active-bg); color: var(--kit-rail-active-ink); }
  .kit-shell[data-layout='rail'] > .kit-sidebar .kit-nav-count {
    position: absolute; top: -2px; right: -2px; display: grid; place-items: center; min-width: 16px; height: 16px; margin: 0; padding: 0 var(--kit-space-1);
    border-radius: var(--kit-radius-pill); background: var(--kit-accent-soft); color: var(--kit-ink); font-size: var(--kit-text-2xs);
  }
  .kit-shell[data-layout='rail'] > .kit-sidebar .kit-nav-section { width: 24px; height: var(--kit-border); padding: 0; margin: var(--kit-space-1) 0; overflow: hidden; color: transparent; background: var(--kit-rail-active-bg); }
  .kit-shell[data-layout='rail'] > .kit-sidebar .kit-sidebar-foot { align-items: center; padding-top: var(--kit-space-2); }
  .kit-shell[data-layout='rail'] > .kit-sidebar .kit-sidebar-footer { align-items: center; margin: var(--kit-space-1) 0 0; padding: 0; border: 0; }
  .kit-shell[data-layout='rail'] > .kit-sidebar .kit-sidebar-footer .kit-btn {
    justify-content: center; width: var(--kit-rail-item); height: var(--kit-rail-item); padding: 0; font-size: 0;
    border-color: transparent; background: transparent; color: var(--kit-rail-icon); border-radius: var(--kit-radius);
  }
  .kit-shell[data-layout='rail'] > .kit-sidebar .kit-sidebar-footer .kit-btn:hover { background: var(--kit-rail-hover-bg); color: var(--kit-rail-active-ink); }
  .kit-topbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-3); justify-content: space-between;
    min-height: var(--kit-topbar-h); padding: var(--kit-space-3) var(--kit-page-x);
  }
  .kit-topbar-actions { display: flex; align-items: center; gap: var(--kit-space-2); margin-left: auto; }
  .kit-content { width: 100%; max-width: var(--kit-content-max); padding: 0 var(--kit-page-x) calc(var(--kit-page-y) * 2); display: flex; flex-direction: column; gap: var(--kit-space-6); }
  .kit-content:first-child { padding-top: var(--kit-page-y); }

  /* ---- app shell: top-nav layout ---- */
  .kit-shell[data-layout='top'] { display: flex; flex-direction: column; }
  .kit-shell[data-layout='top'] .kit-header {
    position: sticky; top: 0; z-index: 10;
    background: var(--kit-bg); border-bottom: var(--kit-border) solid var(--kit-line);
  }
  .kit-header-inner {
    max-width: var(--kit-content-max); margin: 0 auto; min-height: var(--kit-topbar-h);
    padding: 0 var(--kit-page-x); display: flex; align-items: center; gap: var(--kit-space-5);
  }
  .kit-header-inner .kit-brand { padding: 0; font-size: var(--kit-text-lg); }
  .kit-header-inner .kit-nav { flex-direction: row; flex-wrap: wrap; }
  .kit-header-inner .kit-nav a { padding: var(--kit-space-1) var(--kit-space-3); }
  .kit-shell[data-layout='top'] .kit-content { margin: 0 auto; padding-top: var(--kit-page-y); }

  /* ---- navigation progress ---- */
  .kit-progress { position: fixed; top: 0; left: 0; z-index: 50; height: 2px; width: 40%; background: var(--kit-accent); animation: kit-slide 1s ease-in-out infinite; }
  @keyframes kit-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

  /* ---- shell on phones: compact top bar + bottom tab bar ---- */
  .kit-mtop, .kit-tabbar { display: none; }
  @media (max-width: 860px) {
    .kit-shell, .kit-shell[data-panel], .kit-shell[data-layout='rail'] { display: block; }
    .kit-shell:not([data-layout='top']) .kit-sidebar { display: none; }
    .kit-panel {
      position: fixed; inset: auto 0 calc(60px + env(safe-area-inset-bottom)) 0; z-index: 25; height: auto; max-height: 50vh;
      border-left: 0; border-top: var(--kit-border) solid var(--kit-line); box-shadow: var(--kit-shadow-lg);
      border-radius: var(--kit-radius-lg) var(--kit-radius-lg) 0 0;
    }
    .kit-shell[data-panel] .kit-content { padding-bottom: calc(50vh + 96px); }
    .kit-mtop {
      display: flex; align-items: center; gap: var(--kit-space-3); position: sticky; top: 0; z-index: 10;
      padding: calc(env(safe-area-inset-top) + var(--kit-space-2)) var(--kit-space-4) var(--kit-space-2);
      background: var(--kit-bg); border-bottom: var(--kit-border) solid var(--kit-line);
    }
    .kit-mtop .kit-brand { padding: 0; }
    .kit-shell[data-layout='top'] .kit-mtop { display: none; }
    /* top layout on phones: the header keeps brand + actions, the menu moves to the bottom tab bar */
    .kit-shell[data-layout='top'] .kit-header { padding-top: env(safe-area-inset-top); }
    .kit-header-inner { padding: var(--kit-space-2) var(--kit-space-4); gap: var(--kit-space-3); }
    .kit-header-inner .kit-nav { display: none; }
    .kit-topbar { padding: var(--kit-space-3) var(--kit-space-4); }
    /* only desktop-only actions in it: don't leave an empty bar on phones */
    .kit-topbar:not(:has(> :not(.kit-hide-sm))) { display: none; }
    .kit-content { padding: var(--kit-space-4) var(--kit-space-4) calc(96px + env(safe-area-inset-bottom)); }
    .kit-content:first-child { padding-top: var(--kit-page-y-sm); }
    .kit-shell[data-layout='top']:not(:has(> .kit-tabbar)) .kit-content { padding-bottom: calc(var(--kit-page-y) * 2); }
    .kit-tabbar {
      display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
      position: fixed; inset: auto 0 0 0; z-index: 20;
      padding: var(--kit-space-1) var(--kit-space-1) calc(var(--kit-space-1) + env(safe-area-inset-bottom));
      background: var(--kit-surface); border-top: var(--kit-border) solid var(--kit-line);
    }
    .kit-tabbar > a, .kit-tabbar summary {
      display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--kit-space-2) 0 var(--kit-space-1);
      font-size: var(--kit-text-xs); font-weight: var(--kit-weight-medium); color: var(--kit-muted);
      border-radius: var(--kit-radius); cursor: pointer; list-style: none; text-decoration: none;
    }
    .kit-tabbar summary::-webkit-details-marker { display: none; }
    .kit-tabbar .kit-i { width: 22px; height: 22px; }
    .kit-tabbar > a[aria-current='page'], .kit-more[open] summary, .kit-more[data-active] summary { color: var(--kit-accent); }
    .kit-more { position: relative; }
    .kit-more-sheet {
      position: absolute; right: var(--kit-space-1); bottom: calc(100% + var(--kit-space-3)); min-width: 220px;
      /* never taller than the screen above the tab bar: the rest scrolls (0.14.4) */
      max-height: calc(100dvh - 100% - var(--kit-space-3) * 2 - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      overflow-y: auto; overscroll-behavior: contain;
      display: flex; flex-direction: column; padding: var(--kit-space-2);
      background: var(--kit-surface); border: var(--kit-border) solid var(--kit-line);
      border-radius: var(--kit-radius-lg); box-shadow: var(--kit-shadow-lg);
    }
    .kit-more-sheet a { display: flex; align-items: center; gap: var(--kit-space-3); padding: var(--kit-space-3); border-radius: var(--kit-radius); color: var(--kit-ink); }
    /* drawer navigation (0.14.4, mobileNav 'drawer'): a title and a menu button in the top bar, no tab bar */
    .kit-shell[data-mnav='drawer'] .kit-content { padding-bottom: calc(var(--kit-page-y) * 2); }
    .kit-mtop[data-drawer] { justify-content: space-between; padding: calc(env(safe-area-inset-top) + var(--kit-space-3)) var(--kit-space-4) var(--kit-space-3); background: var(--kit-surface); }
    .kit-mtop-title { font-size: var(--kit-mtop-title-size); font-weight: var(--kit-weight-strong); color: var(--kit-ink); }
    .kit-more-sheet a[aria-current='page'] { color: var(--kit-accent); background: var(--kit-accent-soft); }
  }

  /* ---- drawer navigation (mobileNav 'drawer'): the whole sidebar as a sheet from the left on phones ---- */
  .kit-sheet.kit-drawer[open] {
    inset: 0 auto 0 0; width: var(--kit-sidebar-w); max-width: 85vw; height: 100%; max-height: 100%;
    border-width: 0 var(--kit-border) 0 0; border-radius: 0; animation-name: kit-drawer-in;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  @keyframes kit-drawer-in { from { transform: translateX(-100%); } }
  .kit-sheet.kit-drawer .kit-drawer-h {
    display: flex; align-items: center; justify-content: space-between; gap: var(--kit-space-3);
    padding: var(--kit-space-4) var(--kit-space-4); border-bottom: var(--kit-border) solid var(--kit-brand-line);
  }
  .kit-sheet.kit-drawer .kit-drawer-h .kit-brand { padding: 0; }
  .kit-sheet.kit-drawer .kit-drawer-h > form { display: contents; }
  .kit-sheet.kit-drawer .kit-drawer-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: var(--kit-space-4); gap: var(--kit-space-1); }
  .kit-sheet.kit-drawer .kit-sidebar-footer { margin: 0; }

  /* ---- breadcrumbs ---- */
  .kit-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-1); font-size: var(--kit-crumbs-size); color: var(--kit-muted); }
  .kit-crumbs a { color: var(--kit-muted); }
  .kit-crumbs a:hover { color: var(--kit-ink); }
  .kit-crumbs [aria-current='page'] { color: var(--kit-ink); }
  .kit-crumbs-sep { color: var(--kit-faint); }
  /* back link (0.14.4): one crumb with a chevron, e.g. "‹ Back to orders" */
  .kit-crumbs[data-back] a { display: inline-flex; align-items: center; gap: var(--kit-space-1); }

  /* ---- page header ---- */
  .kit-ph { display: flex; flex-wrap: wrap; align-items: var(--kit-ph-align); justify-content: space-between; gap: var(--kit-space-4); margin-bottom: var(--kit-ph-after); }
  .kit-ph-text { display: flex; flex-direction: column; gap: var(--kit-ph-text-gap); min-width: 0; }
  .kit-ph-sub { color: var(--kit-ph-sub-ink); font-size: var(--kit-ph-sub-size); max-width: var(--kit-ph-sub-max); }
  /* actions under the title block, at the start (0.14.4) */
  .kit-ph-actions .kit-btn:not([data-size='sm']) { height: var(--kit-ph-btn-h); padding: 0 var(--kit-ph-btn-x); font-weight: var(--kit-ph-btn-weight); }
  .kit-ph-actions .kit-btn[data-icon-only]:not([data-size='sm']) { width: var(--kit-ph-btn-h); padding: 0; }
  .kit-ph-actions .kit-btn[data-variant='secondary'] { color: var(--kit-ph-btn-ink); }
  .kit-ph[data-actions='below'] { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--kit-ph-gap); }
  .kit-ph-actions { display: flex; flex-wrap: wrap; gap: var(--kit-space-2); }
  .kit-eyebrow { font-size: var(--kit-text-xs); font-weight: var(--kit-weight-strong); text-transform: uppercase; letter-spacing: var(--kit-tracking-caps); color: var(--kit-accent); }
  .kit-section-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--kit-space-3); }
  .kit-section-h a { font-size: var(--kit-section-link-size); font-weight: var(--kit-weight-medium); color: var(--kit-section-link-ink); }
  .kit-section-h > h2 { font-size: var(--kit-section-title-size); font-weight: var(--kit-section-title-weight); }

  /* ---- buttons ---- */
  .kit-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--kit-space-2);
    height: var(--kit-btn-h); padding: 0 var(--kit-btn-x);
    border: var(--kit-border) solid var(--kit-btn-line); border-radius: var(--kit-btn-radius);
    background: var(--kit-btn-bg); color: var(--kit-btn-ink); font-size: var(--kit-btn-size);
    font-weight: var(--kit-btn-weight); white-space: nowrap; cursor: pointer;
    transition: background var(--kit-duration), border-color var(--kit-duration), color var(--kit-duration);
  }
  .kit-btn:hover { background: var(--kit-surface-2); border-color: var(--kit-muted); color: var(--kit-ink); text-decoration: none; }
  .kit-btn[data-variant='primary'] { background: var(--kit-accent); border-color: var(--kit-accent); color: var(--kit-accent-ink); }
  .kit-btn[data-variant='primary']:hover { background: var(--kit-accent-hover); border-color: var(--kit-accent-hover); color: var(--kit-accent-ink); }
  .kit-btn[data-variant='ghost'] { background: transparent; border-color: transparent; color: var(--kit-btn-ghost-ink); }
  .kit-btn[data-tone='bad'] { color: var(--kit-bad); }
  .kit-btn[data-tone='bad'][data-variant='secondary'] { border-color: var(--kit-btn-bad-line); }
  .kit-btn[data-variant='ghost']:hover { background: var(--kit-sunken); color: var(--kit-ink); }
  .kit-btn[data-variant='danger'] { background: var(--kit-btn-danger-bg); border-color: var(--kit-btn-danger-line); color: var(--kit-btn-danger-ink); }
  .kit-btn[data-variant='danger']:hover { background: var(--kit-btn-danger-hover); border-color: var(--kit-btn-danger-line); color: var(--kit-btn-danger-ink); }
  .kit-btn[data-variant='neutral'] { background: var(--kit-btn-neutral-bg); border-color: var(--kit-btn-neutral-bg); color: var(--kit-btn-neutral-ink); }
  .kit-btn[data-variant='neutral']:hover { background: var(--kit-btn-neutral-hover); border-color: var(--kit-btn-neutral-hover); color: var(--kit-btn-neutral-ink); }
  .kit-btn[data-size='sm'] { height: var(--kit-control-h-sm); padding: 0 var(--kit-space-3); font-size: var(--kit-btn-sm-size); }
  .kit-btn[data-icon-only] { width: var(--kit-btn-h); padding: 0; }
  .kit-btn > .kit-i { width: var(--kit-btn-icon); height: var(--kit-btn-icon); }
  .kit-btn[data-size='sm'] > .kit-i { width: var(--kit-btn-sm-icon); height: var(--kit-btn-sm-icon); }
  .kit-btn[data-size='xs'] { height: var(--kit-btn-xs-h); padding: 0 var(--kit-btn-xs-x); gap: var(--kit-space-1); font-size: var(--kit-btn-xs-size); font-weight: var(--kit-btn-xs-weight); }
  .kit-btn[data-size='xs'] > .kit-i { width: var(--kit-btn-xs-icon); height: var(--kit-btn-xs-icon); }
  .kit-btn[data-size='xs'][data-variant='secondary'] { color: var(--kit-btn-xs-ink); }
  .kit-btn[data-icon-only][data-size='sm'] { width: var(--kit-control-h-sm); }
  /* round (0.16.0): a circular icon button, e.g. the send button of a chat composer */
  .kit-btn[data-round] { width: var(--kit-btn-h); padding: 0; border-radius: var(--kit-radius-pill); flex: none; }
  .kit-btn[data-round][data-size='sm'] { width: var(--kit-control-h-sm); }
  .kit-btn[data-round][data-size='xs'] { width: var(--kit-btn-xs-h); }
  .kit-btn:disabled, .kit-btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
  .kit-btn[aria-busy='true'] { cursor: progress; pointer-events: none; }
  .kit-btn[data-block] { display: flex; width: 100%; }
  .kit-btn-row { display: flex; flex-wrap: wrap; gap: var(--kit-space-2); align-items: center; }

  /* ---- badge ---- */
  .kit-badge {
    display: inline-flex; align-items: center; gap: var(--kit-space-1);
    padding: var(--kit-badge-y) var(--kit-badge-x); border-radius: var(--kit-radius-pill);
    font-size: var(--kit-text-xs); font-weight: var(--kit-badge-weight); line-height: var(--kit-badge-leading); white-space: nowrap;
    background: var(--kit-sunken); color: var(--kit-ink-2);
  }
  /* soft badge (0.14.4): a quieter status, e.g. "Active" in a settings list */
  /* a badge as a button (e.g. click to switch a status) */
  button.kit-badge { border: 0; cursor: pointer; font-family: inherit; }
  .kit-badge[data-variant='soft'] { background: var(--kit-badge-soft-bg); color: var(--kit-badge-soft-ink); font-weight: var(--kit-badge-soft-weight); }
  .kit-badge[data-variant='soft'][data-tone='ok'] { background: var(--kit-badge-soft-ok-bg); color: var(--kit-badge-soft-ok-ink); }
  .kit-badge[data-variant='soft'][data-tone='bad'] { background: var(--kit-badge-soft-bad-bg); color: var(--kit-badge-soft-bad-ink); }
  /* size md (0.14.4): a bigger pill */
  .kit-badge[data-size='md'], .kit-badge[data-variant][data-size='md'] { padding: var(--kit-badge-md-y) var(--kit-badge-md-x); font-weight: var(--kit-badge-md-weight); }
  [data-tone='ok'].kit-badge { background: var(--kit-ok-soft); color: var(--kit-ok); }
  [data-tone='warn'].kit-badge { background: var(--kit-warn-soft); color: var(--kit-warn); }
  [data-tone='bad'].kit-badge { background: var(--kit-bad-soft); color: var(--kit-bad); }
  [data-tone='info'].kit-badge { background: var(--kit-info-soft); color: var(--kit-info); }
  [data-tone='accent'].kit-badge { background: var(--kit-accent-soft); color: var(--kit-badge-accent-ink); }
  .kit-dot { width: 8px; height: 8px; border-radius: var(--kit-radius-pill); background: currentColor; flex: none; }
  .kit-dot[data-tone='ok'] { background: var(--kit-ok); }
  .kit-dot[data-tone='warn'] { background: var(--kit-warn); }
  .kit-dot[data-tone='bad'] { background: var(--kit-bad); }
  .kit-dot[data-tone='info'] { background: var(--kit-info); }
  .kit-dot[data-tone='neutral'] { background: var(--kit-faint); }
  .kit-dot[data-pulse] { animation: kit-pulse 1.4s ease-in-out infinite; }
  @keyframes kit-pulse { 50% { opacity: 0.35; } }
  @media (prefers-reduced-motion: reduce) { .kit-dot[data-pulse] { animation: none; } }

  /* ---- card ---- */
  .kit-card {
    background: var(--kit-card-bg); border: var(--kit-border) solid var(--kit-card-line);
    border-radius: var(--kit-radius-lg); box-shadow: var(--kit-card-shadow); min-width: 0;
  }
  .kit-card-h > h2, .kit-card-titles > h2 { font-size: var(--kit-card-title-size); font-weight: var(--kit-card-title-weight); }
  .kit-card-titles { display: flex; flex-direction: column; gap: var(--kit-card-sub-gap); min-width: 0; }
  .kit-card-sub { font-size: var(--kit-card-sub-size); color: var(--kit-muted); }
  .kit-card[data-title='lg'] > .kit-card-h > h2 { font-size: var(--kit-card-title-lg-size); font-weight: var(--kit-card-title-lg-weight); letter-spacing: var(--kit-card-title-lg-tracking); }
  /* panel (0.14.4): a sunken box inside a card, e.g. a small form above a list */
  .kit-card[data-variant='panel'] { background: var(--kit-panel-bg); border-color: var(--kit-panel-line); box-shadow: none; }
  .kit-card[data-variant='panel'] > .kit-card-b { padding: var(--kit-panel-pad); }
  /* accent panel (0.14.4): e.g. an inline create form above a list */
  .kit-card[data-variant='accent'] { background: var(--kit-panel-accent-bg); border-color: var(--kit-panel-accent-line); box-shadow: none; }
  .kit-card[data-variant='accent'] > .kit-card-b { padding: var(--kit-panel-accent-pad); }
  .kit-card[data-variant='accent'] > .kit-card-h { padding: var(--kit-panel-accent-pad) var(--kit-panel-accent-pad) 0; }
  .kit-card[data-variant='accent'] > .kit-card-h + .kit-card-b { padding-top: var(--kit-space-4); }
  .kit-card[data-variant='accent'] > .kit-card-h > h2 { font-size: var(--kit-text-lg); }
  /* contrast (0.17.0): a dark card, e.g. a call to action next to light cards */
  .kit-card[data-variant='contrast'] { background: var(--kit-card-contrast-bg); border-color: transparent; box-shadow: none; color: var(--kit-card-contrast-ink); }
  .kit-card[data-variant='contrast'] > .kit-card-h { border-bottom-color: transparent; }
  .kit-card[data-variant='contrast'] .kit-card-sub, .kit-card[data-variant='contrast'] .kit-muted { color: var(--kit-card-contrast-muted); }
  .kit-card[data-variant='contrast'] a:not([class]) { color: inherit; }
  /* (0.18.2) fields in a contrast card: labels and hints in the card's text colours (inputs stay on Surface) */
  .kit-card[data-variant='contrast'] { --kit-label-ink: var(--kit-card-contrast-ink); --kit-label-sm-ink: var(--kit-card-contrast-muted); --kit-label-compact-ink: var(--kit-card-contrast-ink); --kit-check-strong-ink: var(--kit-card-contrast-ink); }
  .kit-card[data-variant='contrast'] :is(.kit-hint, .kit-label-opt) { color: var(--kit-card-contrast-muted); }
  .kit-card-b > * + * { margin-top: var(--kit-card-body-gap); }
  .kit-card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kit-space-3); padding: var(--kit-card-head-y) var(--kit-card-pad); border-bottom: var(--kit-border) solid var(--kit-card-head-line); }
  .kit-card-h + .kit-card-b { padding-top: var(--kit-card-head-body-gap); }
  /* a text link in a card header (e.g. "All orders") as a section header link */
  .kit-card-h > .kit-btn-row > a:not([class]) { color: var(--kit-section-link-ink); font-size: var(--kit-section-link-size); }
  .kit-card-b { padding: var(--kit-card-pad); }
  .kit-card-f { padding: var(--kit-space-3) var(--kit-card-pad); border-top: var(--kit-border) solid var(--kit-card-foot-line); background: var(--kit-card-foot-bg); border-radius: 0 0 var(--kit-radius-lg) var(--kit-radius-lg); }
  .kit-card > .kit-table-scroll:last-child table tr:last-child td { border-bottom: 0; }

  /* ---- stats ---- */
  .kit-stats { display: grid; gap: var(--kit-stats-gap); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .kit-stat { display: flex; flex-direction: column; gap: var(--kit-stat-gap); padding: var(--kit-stat-pad-y) var(--kit-card-pad); min-width: 0; }
  .kit-stat-label { display: flex; align-items: center; gap: var(--kit-space-2); font-size: var(--kit-stat-label-size); font-weight: var(--kit-stat-label-weight); color: var(--kit-stat-label-ink); letter-spacing: var(--kit-stat-label-tracking); }
  .kit-stat-value { font-family: var(--kit-font-num); font-size: var(--kit-stat); font-weight: var(--kit-stat-value-weight); font-variant-numeric: tabular-nums; letter-spacing: var(--kit-stat-value-tracking); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kit-stat-value small { font-size: var(--kit-text); color: var(--kit-muted); font-family: var(--kit-font-sans); }
  .kit-stat-sub { font-size: var(--kit-text-xs); color: var(--kit-muted); }
  a.kit-stat { color: var(--kit-ink); text-decoration: none; transition: border-color var(--kit-duration); }
  a.kit-stat:hover { color: var(--kit-ink); text-decoration: none; border-color: var(--kit-line-strong); }
  a.kit-stat:hover .kit-stat-label { color: var(--kit-accent); }
  [data-tone='bad'] > .kit-stat-value, .kit-stat-sub[data-tone='bad'] { color: var(--kit-bad); }
  [data-tone='warn'] > .kit-stat-value, .kit-stat-sub[data-tone='warn'] { color: var(--kit-warn); }
  [data-tone='ok'] > .kit-stat-value, .kit-stat-sub[data-tone='ok'] { color: var(--kit-ok); }
  .kit-stat .kit-spark { margin-top: var(--kit-space-1); }
  .kit-stat[data-icon='end'] .kit-stat-label > .kit-i { order: 1; margin-inline-start: auto; color: var(--kit-stat-icon-ink); }
  .kit-stat-label > .kit-i { width: var(--kit-stat-icon-size); height: var(--kit-stat-icon-size); box-sizing: content-box; padding: var(--kit-stat-icon-pad); border-radius: var(--kit-radius-pill); background: var(--kit-stat-icon-bg); }
  /* 0.17.0: an action at the end of the label row (a menu, a link), a tag next to the number, coloured variants */
  .kit-stat-action { margin-inline-start: auto; display: flex; align-items: center; gap: var(--kit-space-1); }
  .kit-stat[data-icon='end'] .kit-stat-action { margin-inline-start: var(--kit-space-2); order: 2; }
  .kit-stat-tag { display: inline-flex; vertical-align: top; margin-inline-start: var(--kit-space-2); font-family: var(--kit-font-sans); font-size: var(--kit-text-xs); letter-spacing: normal; }
  .kit-stat[data-variant='accent'] { background: var(--kit-stat-accent-bg); border-color: transparent; color: var(--kit-stat-accent-ink); }
  .kit-stat[data-variant='accent'] :is(.kit-stat-label, .kit-stat-sub, .kit-stat-value small) { color: var(--kit-stat-accent-muted); }
  .kit-stat[data-variant='contrast'] { background: var(--kit-stat-contrast-bg); border-color: transparent; color: var(--kit-stat-contrast-ink); }
  .kit-stat[data-variant='contrast'] :is(.kit-stat-label, .kit-stat-sub, .kit-stat-value small) { color: var(--kit-stat-contrast-muted); }
  .kit-stat[data-variant='contrast'] .kit-meter-seg[data-on] { background: var(--kit-stat-contrast-ink); border-color: var(--kit-stat-contrast-ink); }
  .kit-stat[data-variant='contrast'] .kit-meter-seg:not([data-on]) { border-color: var(--kit-stat-contrast-muted); }
  .kit-stat[data-variant='contrast'] .kit-btn[data-variant='ghost'] { color: inherit; }
  /* phones: two tiles per row instead of one long column */
  @media (max-width: 520px) {
    .kit-stats { grid-template-columns: repeat(var(--kit-stats-sm-cols), minmax(0, 1fr)); gap: var(--kit-stats-sm-gap); }
    .kit-stat { padding: var(--kit-stat-sm-pad); }
    .kit-stat-value { font-size: var(--kit-stat-sm-size); white-space: normal; overflow-wrap: anywhere; }
  }
  /* a big standalone number (e.g. a 2FA code), without the card of <Stat> */
  .kit-bigvalue { display: flex; flex-direction: column; gap: var(--kit-space-1); min-width: 0; }
  .kit-bigvalue-label { font-size: var(--kit-text-sm); color: var(--kit-ink-2); }
  .kit-bigvalue-num { font-family: var(--kit-font-num); font-size: calc(var(--kit-stat) * 1.5); font-weight: var(--kit-weight-medium); font-variant-numeric: tabular-nums; letter-spacing: var(--kit-tracking-caps); line-height: 1.2; overflow-wrap: anywhere; }
  .kit-bigvalue[data-size='sm'] .kit-bigvalue-num { font-size: var(--kit-stat); }
  .kit-bigvalue[data-tone='bad'] .kit-bigvalue-num { color: var(--kit-bad); }
  .kit-bigvalue[data-tone='warn'] .kit-bigvalue-num { color: var(--kit-warn); }
  .kit-bigvalue[data-tone='ok'] .kit-bigvalue-num { color: var(--kit-ok); }

  /* ---- sparkline + meter ---- */
  .kit-spark { width: 100%; height: 28px; overflow: visible; }
  .kit-spark-line { fill: none; stroke: var(--kit-accent); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .kit-spark-area { fill: var(--kit-accent-soft); stroke: none; }
  .kit-spark[data-tone='bad'] .kit-spark-line { stroke: var(--kit-bad); }
  .kit-spark[data-tone='ok'] .kit-spark-line { stroke: var(--kit-ok); }
  .kit-meter { display: flex; flex-direction: column; gap: var(--kit-space-1); min-width: 0; }
  .kit-meter-head { display: flex; justify-content: space-between; gap: var(--kit-space-2); font-size: var(--kit-text-sm); }
  .kit-meter-head span:last-child { font-family: var(--kit-font-num); color: var(--kit-ink-2); }
  .kit-meter[data-compact] { flex-direction: row; align-items: center; gap: var(--kit-space-2); }
  .kit-meter[data-compact] .kit-meter-track { flex: 1; min-width: 48px; }
  .kit-meter[data-compact] .kit-meter-value { font-family: var(--kit-font-num); font-size: var(--kit-text-xs); color: var(--kit-ink-2); white-space: nowrap; }
  .kit-meter-track { height: 6px; border-radius: var(--kit-radius-pill); background: var(--kit-sunken); overflow: hidden; }
  .kit-meter-bar { height: 100%; border-radius: var(--kit-radius-pill); background: var(--kit-accent); transition: width var(--kit-duration); }
  [data-tone='warn'] > .kit-meter-track .kit-meter-bar { background: var(--kit-warn); }
  [data-tone='bad'] > .kit-meter-track .kit-meter-bar { background: var(--kit-bad); }
  [data-tone='ok'] > .kit-meter-track .kit-meter-bar { background: var(--kit-ok); }
  /* segments (0.17.0): the value as a row of capsules, filled ones solid, empty ones dashed */
  .kit-meter-segs { display: flex; gap: var(--kit-meter-seg-gap); height: var(--kit-meter-seg-h); }
  .kit-meter-seg { flex: 0 1 var(--kit-meter-seg-w); min-width: 0; border: var(--kit-border) dashed var(--kit-meter-seg-off); border-radius: var(--kit-meter-seg-radius); }
  .kit-meter-seg[data-on] { border-style: solid; border-color: var(--kit-meter-seg-on); background: var(--kit-meter-seg-on); }
  [data-tone='warn'] > .kit-meter-segs .kit-meter-seg[data-on] { border-color: var(--kit-warn); background: var(--kit-warn); }
  [data-tone='bad'] > .kit-meter-segs .kit-meter-seg[data-on] { border-color: var(--kit-bad); background: var(--kit-bad); }
  [data-tone='ok'] > .kit-meter-segs .kit-meter-seg[data-on] { border-color: var(--kit-ok); background: var(--kit-ok); }

  /* ---- time chart ---- */
  .kit-tchart { position: relative; width: 100%; min-width: 0; color: var(--kit-accent); }
  .kit-tchart[data-tone='warn'] { color: var(--kit-warn); }
  .kit-tchart[data-tone='bad'] { color: var(--kit-bad); }
  .kit-tchart svg { display: block; overflow: visible; touch-action: pan-y; }
  .kit-tchart-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .kit-tchart-area { fill: currentColor; opacity: 0.14; }
  .kit-tchart-base { stroke: var(--kit-line); stroke-width: var(--kit-border); }
  .kit-tchart-limit { stroke: var(--kit-faint); stroke-width: var(--kit-border); stroke-dasharray: 3 3; }
  .kit-tchart-cross { stroke: var(--kit-faint); stroke-width: var(--kit-border); }
  .kit-tchart-dot { fill: currentColor; stroke: var(--kit-surface); stroke-width: 2; }
  .kit-tchart-empty { display: flex; align-items: center; justify-content: center; font-size: var(--kit-text-xs); color: var(--kit-muted); border-bottom: var(--kit-border) dashed var(--kit-line); }
  .kit-tchart-tip {
    position: absolute; top: calc(var(--kit-space-1) * -1); transform: translate(-50%, -100%); z-index: 2; pointer-events: none;
    display: flex; gap: var(--kit-space-2); padding: var(--kit-space-1) var(--kit-space-2); white-space: nowrap;
    background: var(--kit-surface); border: var(--kit-border) solid var(--kit-line-strong); border-radius: var(--kit-radius-sm);
    box-shadow: var(--kit-shadow-lg); font-size: var(--kit-text-xs); color: var(--kit-ink-2);
  }
  .kit-tchart-tip strong { color: var(--kit-ink); font-family: var(--kit-font-num); font-weight: var(--kit-weight-strong); }
  .kit-tchart-axis { display: flex; justify-content: space-between; margin-top: var(--kit-space-1); font-family: var(--kit-font-num); font-size: var(--kit-text-xs); color: var(--kit-muted); }

  /* ---- bar chart (simple, CSS only) ---- */
  .kit-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--kit-space-2); align-items: end; height: var(--kit-bars-h); }
  .kit-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--kit-space-1); height: 100%; min-width: 0; }
  .kit-bar-fill { width: 100%; max-width: var(--kit-bar-w); min-height: 2px; border-radius: var(--kit-bar-radius) var(--kit-bar-radius) var(--kit-bar-radius-bottom) var(--kit-bar-radius-bottom); background: var(--kit-bar-bg); transition: background var(--kit-duration); }
  .kit-bar[data-current] .kit-bar-fill, .kit-bar:hover .kit-bar-fill { background: var(--kit-bar-current-bg); }
  .kit-bar[data-empty] .kit-bar-fill { flex-grow: var(--kit-bar-empty-grow); background: var(--kit-bar-empty-bg); border: var(--kit-border) dashed var(--kit-bar-empty-line); }
  .kit-bar-label { font-size: var(--kit-text-xs); color: var(--kit-muted); }

  /* ---- notices / flash ---- */
  .kit-notice {
    display: flex; align-items: flex-start; gap: var(--kit-space-3);
    padding: var(--kit-space-3) var(--kit-space-4); border-radius: var(--kit-radius);
    background: var(--kit-info-soft); color: var(--kit-info); font-weight: var(--kit-weight-medium);
  }
  .kit-notice .kit-i { margin-top: 2px; }
  .kit-notice[data-compact] { padding: var(--kit-notice-compact-y) var(--kit-space-3); font-size: var(--kit-text-xs); font-weight: normal; }
  [data-tone='warn'].kit-notice[data-compact] { background: var(--kit-notice-compact-warn-bg); }
  [data-tone='warn'].kit-notice[data-compact] > div { color: var(--kit-notice-compact-warn-ink); }
  .kit-notice > :not(.kit-i) { color: var(--kit-ink); }
  [data-tone='ok'].kit-notice { background: var(--kit-ok-soft); color: var(--kit-ok); }
  [data-tone='warn'].kit-notice { background: var(--kit-warn-soft); color: var(--kit-warn); }
  [data-tone='bad'].kit-notice { background: var(--kit-bad-soft); color: var(--kit-bad); }
  [data-tone='accent'].kit-notice { background: var(--kit-accent-soft); color: var(--kit-accent); }

  /* ---- empty state ---- */
  .kit-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--kit-empty-gap); padding: var(--kit-empty-pad-y) var(--kit-space-5); }
  .kit-empty > h3 { font-weight: var(--kit-empty-title-weight); }
  .kit-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--kit-radius-lg); background: var(--kit-sunken); color: var(--kit-ink-2); margin-bottom: var(--kit-space-1); }
  .kit-empty p { color: var(--kit-muted); max-width: 46ch; font-size: var(--kit-empty-text-size); }
  .kit-empty .kit-btn { margin-top: var(--kit-space-2); }

  /* ---- data table ---- */
  .kit-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-2); padding: var(--kit-space-3) var(--kit-space-4); border-bottom: var(--kit-border) solid var(--kit-line); }
  .kit-toolbar-end { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--kit-space-2); align-items: center; min-width: 0; max-width: 100%; }
  .kit-toolbar[data-search-first] > .kit-toolbar-end { order: -1; margin-left: 0; }
  .kit-toolbar[data-search-below] > .kit-toolbar-end { flex-basis: 100%; margin-left: 0; }
  /* above the card (0.14.4): no padding or line of its own */
  .kit-toolbar[data-outside] { padding: 0; border-bottom: 0; gap: var(--kit-toolbar-gap); }
  .kit-toolbar[data-outside] > .kit-toolbar-end { gap: var(--kit-toolbar-gap); }
  .kit-chips { display: flex; flex-wrap: wrap; gap: var(--kit-chips-gap); }
  .kit-chip {
    display: inline-flex; align-items: center; gap: var(--kit-space-2); height: var(--kit-control-h-sm); padding: 0 var(--kit-space-3);
    border: var(--kit-border) solid var(--kit-chip-line); border-radius: var(--kit-radius-pill);
    background: var(--kit-chip-bg); color: var(--kit-ink-2); font-size: var(--kit-chip-size); font-weight: var(--kit-chip-weight); cursor: pointer;
  }
  .kit-chip:hover { border-color: var(--kit-line-strong); color: var(--kit-ink); text-decoration: none; }
  .kit-chip[aria-current='true'], .kit-chip[aria-pressed='true'] { background: var(--kit-selected-bg); border-color: var(--kit-selected-line); color: var(--kit-selected-ink); font-weight: var(--kit-selected-weight); }
  .kit-chip-count { font-family: var(--kit-font-num); font-size: var(--kit-chip-count-size); }
  .kit-chip-count::before { content: var(--kit-chip-count-before); }
  .kit-chip-count::after { content: var(--kit-chip-count-after); }
  .kit-chip { column-gap: var(--kit-chip-gap); }
  /* (0.14.4) data-variant="choice": a small square toggle (a picker in a tool, not a filter) */
  .kit-chip[data-variant='choice'] { height: auto; padding: var(--kit-space-1) var(--kit-space-2); border-radius: var(--kit-radius); border-color: var(--kit-line); background: transparent; font-size: var(--kit-text-xs); font-weight: var(--kit-weight-medium); color: var(--kit-ink-2); line-height: var(--kit-leading); }
  .kit-chip[data-variant='choice'][aria-pressed='true'] { background: var(--kit-choice-on-bg); border-color: var(--kit-choice-on-line); color: var(--kit-choice-on-ink); font-weight: var(--kit-weight-medium); }
  .kit-search {
    display: flex; align-items: center; gap: var(--kit-space-2); height: var(--kit-control-h-sm); min-width: 220px; padding: 0 var(--kit-space-3);
    border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius); background: var(--kit-surface); color: var(--kit-muted);
  }
  .kit-search:focus-within { border-color: var(--kit-accent); }
  .kit-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--kit-ink); }
  /* search with a submit button: the field looks like a form field, the button has the same height */
  .kit-search-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-3); min-width: 0; width: var(--kit-search-form-w); max-width: 100%; }
  .kit-search-form .kit-search {
    flex: 1 1 12rem; min-width: 0; height: var(--kit-input-h); padding: 0 var(--kit-input-x);
    border-color: var(--kit-line-strong); transition: border-color var(--kit-duration), box-shadow var(--kit-duration);
  }
  .kit-search-form .kit-search:hover { border-color: var(--kit-muted); }
  .kit-search-form .kit-search:focus-within { border-color: var(--kit-accent); box-shadow: 0 0 0 var(--kit-focus-width) var(--kit-accent-soft); }
  .kit-search-form > .kit-btn { height: var(--kit-search-btn-h); }
  /* position: relative keeps absolutely placed bits (screen-reader texts) inside the scroller, so a wide table never
     widens the page on a phone. */
  .kit-table-scroll { overflow-x: auto; position: relative; }
  /* an open menu/filter inside a table must not be clipped by the scroll box */
  .kit-table-scroll:has(details[open]) { overflow: visible; }
  .kit-table { width: 100%; font-variant-numeric: tabular-nums; }
  .kit-table th {
    padding: var(--kit-table-head-y) var(--kit-cell-x); text-align: left; white-space: nowrap;
    font-size: var(--kit-table-head-size); font-weight: var(--kit-table-head-weight); color: var(--kit-table-head-ink);
    text-transform: var(--kit-table-head-case); letter-spacing: var(--kit-table-head-tracking);
    background: var(--kit-table-head-bg); border-bottom: var(--kit-border) solid var(--kit-line);
  }
  .kit-table td { padding: var(--kit-cell-y) var(--kit-cell-x); border-bottom: var(--kit-border) solid var(--kit-table-row-line); vertical-align: middle; color: var(--kit-table-cell-ink); }
  .kit-table tbody tr:hover td { background: var(--kit-surface-2); }
  .kit-table tr[data-href] { cursor: pointer; }
  .kit-table [data-align='right'] { text-align: right; }
  .kit-table [data-align='center'] { text-align: center; }
  .kit-table td[data-num], .kit-num { font-family: var(--kit-font-num); font-variant-numeric: tabular-nums; }
  .kit-table td[data-num] { font-size: var(--kit-text-sm); }
  .kit-table td[data-muted] { color: var(--kit-table-muted-ink); }
  /* row actions: icon buttons in the last cell */
  .kit-table td[data-act] .kit-btn[data-variant='ghost'] { color: var(--kit-table-act-ink); }
  .kit-table td[data-act] .kit-btn[data-variant='ghost'][data-tone='bad'] { color: var(--kit-bad); }
  .kit-table td[data-act] .kit-btn > .kit-i { width: var(--kit-table-act-size); height: var(--kit-table-act-size); }
  .kit-table td[data-act] .kit-btn[data-icon-only] { width: var(--kit-table-act-btn); height: var(--kit-table-act-btn); }
  .kit-card:has(> .kit-table-scroll) { box-shadow: var(--kit-table-card-shadow); }
  .kit-table td[data-strong] { font-weight: var(--kit-weight-medium); }
  .kit-table td a { color: var(--kit-table-link-ink); font-weight: var(--kit-weight-medium); }
  .kit-table td a:hover { color: var(--kit-accent); }
  .kit-table td[data-shrink], .kit-table th[data-shrink] { width: 1%; white-space: nowrap; }
  .kit-sort { display: inline-flex; align-items: center; gap: var(--kit-space-1); color: inherit; }
  .kit-sort:hover { color: var(--kit-ink); text-decoration: none; }
  .kit-sort .kit-i { opacity: 0.35; }
  .kit-sort[data-dir] { color: var(--kit-ink); }
  .kit-sort[data-dir] .kit-i { opacity: 1; }
  .kit-table-empty td { padding: 0; }
  .kit-table tfoot td { white-space: nowrap; font-weight: var(--kit-weight-strong); border-bottom: 0; border-top: var(--kit-border) solid var(--kit-line-strong); background: var(--kit-surface-2); }
  .kit-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kit-space-3); padding: var(--kit-space-3) var(--kit-space-4); font-size: var(--kit-text-sm); color: var(--kit-muted); }
  .kit-pager-links { display: flex; gap: var(--kit-space-1); align-items: center; }
  .kit-pager[data-size='xs'] > div:first-child { font-size: var(--kit-text-xs); }
  .kit-pager-links a, .kit-pager-links span {
    display: inline-grid; place-items: center; min-width: var(--kit-pager-h); height: var(--kit-pager-h); padding: 0 var(--kit-space-2);
    border-radius: var(--kit-radius-sm); color: var(--kit-ink-2); font-family: var(--kit-font-num); font-size: var(--kit-text-sm);
  }
  .kit-pager-links a { border: var(--kit-border) solid var(--kit-line); background: var(--kit-surface); }
  .kit-pager-links a:hover { border-color: var(--kit-line-strong); color: var(--kit-ink); text-decoration: none; }
  .kit-pager-links [aria-current='page'] { background: var(--kit-selected-bg); border-color: var(--kit-selected-line); color: var(--kit-selected-ink); }
  .kit-pager-links [aria-disabled='true'] { opacity: 0.4; pointer-events: none; }
  /* compact: outlined previous / next around "Pagina 2 / 5" */
  .kit-pager-links[data-variant='compact'] a { padding: 0 var(--kit-space-3); }
  .kit-pager-links .kit-pager-page { font-family: var(--kit-font-sans); white-space: nowrap; }
  /* phones: rows become stacked cards when the table opts in */
  @media (max-width: 640px) {
    .kit-table[data-stack] thead { display: none; }
    .kit-table[data-stack], .kit-table[data-stack] tbody, .kit-table[data-stack] tr, .kit-table[data-stack] td { display: block; width: 100%; }
    .kit-table[data-stack] tr { padding: var(--kit-space-3) var(--kit-space-4); border-bottom: var(--kit-border) solid var(--kit-line); }
    .kit-table[data-stack] td { padding: 2px 0; border: 0; text-align: left; }
    .kit-table[data-stack] td[data-hide-sm] { display: none; }
    /* the first column is the card's title; the rest are compact label/value lines */
    .kit-table[data-stack] td[data-label] { display: var(--kit-table-stack-cell); flex-wrap: wrap; align-items: baseline; gap: 0 var(--kit-space-2); grid-template-columns: 8.5em minmax(0, 1fr); }
    .kit-table[data-stack] td[data-label] > * { min-width: 0; grid-column: 2; }
    /* a badge keeps its own width in a stacked cell (0.14.4) */
    .kit-table[data-stack] td[data-label] > .kit-badge { justify-self: start; }
    .kit-table[data-stack] td[data-label]::before { content: attr(data-label); flex: 0 0 8.5em; color: var(--kit-muted); font-size: var(--kit-text-xs); font-family: var(--kit-font-sans); font-weight: var(--kit-weight-medium); }
    .kit-table[data-stack] td[data-label]:first-child, .kit-table[data-stack] td:not([data-label]) + td[data-label] { display: block; padding-bottom: var(--kit-space-1); font-weight: var(--kit-weight-strong); }
    .kit-table[data-stack] td[data-label]:first-child::before, .kit-table[data-stack] td:not([data-label]) + td[data-label]::before { content: none; }
    .kit-pager { padding: var(--kit-space-3); }
  }

  /* ---- tabs (links) ---- */
  .kit-tabs { display: flex; gap: var(--kit-space-1); border-bottom: var(--kit-border) solid var(--kit-line); overflow-x: auto; }
  .kit-tabs a { padding: var(--kit-space-2) var(--kit-space-3); color: var(--kit-ink-2); font-weight: var(--kit-weight-medium); white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
  .kit-tabs a:hover { color: var(--kit-ink); text-decoration: none; }
  .kit-tabs a[aria-current='page'] { color: var(--kit-ink); box-shadow: inset 0 -2px 0 var(--kit-accent); }
  .kit-tabs a { display: inline-flex; align-items: center; gap: var(--kit-space-2); }
  .kit-tabs .kit-chip-count { color: var(--kit-muted); }
  .kit-tabs[data-variant='pills'] { gap: var(--kit-space-2); padding-bottom: var(--kit-space-3); border-bottom-color: var(--kit-tabs-pill-rule); }
  .kit-tabs[data-variant='pills'] a {
    padding: var(--kit-tabs-pill-y) var(--kit-tabs-pill-x); border-radius: var(--kit-tabs-pill-radius); font-size: var(--kit-tabs-pill-size);
    background: var(--kit-tabs-pill-bg); color: var(--kit-tabs-pill-ink); box-shadow: inset 0 0 0 var(--kit-border) var(--kit-tabs-pill-line);
  }
  .kit-tabs[data-variant='pills'] a:hover { background: var(--kit-sunken); }
  .kit-tabs[data-variant='pills'] a[aria-current='page'] { background: var(--kit-tabs-pill-active-bg); color: var(--kit-tabs-pill-active-ink); box-shadow: none; }

  /* ---- description list ---- */
  .kit-dl { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--kit-space-2) var(--kit-space-5); }
  .kit-dl dt { color: var(--kit-muted); }
  .kit-dl dd { min-width: 0; overflow-wrap: anywhere; }
  @media (max-width: 520px) { .kit-dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .kit-dl dd { margin-bottom: var(--kit-space-2); } }

  /* ---- forms ---- */
  .kit-form { display: flex; flex-direction: column; gap: var(--kit-space-4); }
  .kit-form-row { display: grid; gap: var(--kit-space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .kit-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--kit-space-4); }
  .kit-fieldset > legend { padding: 0; margin-bottom: var(--kit-space-2); font-family: var(--kit-font-display); font-size: var(--kit-h2); font-weight: var(--kit-weight-strong); }
  .kit-field { display: flex; flex-direction: column; gap: var(--kit-label-gap); min-width: 0; }
  .kit-unit-row { display: flex; align-items: center; gap: var(--kit-space-2); min-width: 0; }
  .kit-unit-row > .kit-input { flex: 1 1 auto; min-width: 0; }
  .kit-unit { flex: none; font-size: var(--kit-text-xs); color: var(--kit-muted); }
  .kit-field[data-inline-label] { flex-direction: row; align-items: center; gap: var(--kit-space-1); }
  .kit-field[data-inline-label] > .kit-label { flex: none; font-size: var(--kit-text-xs); font-weight: normal; color: var(--kit-muted); }
  .kit-field[data-inline-label] > .kit-input { flex: 1 1 auto; min-width: 0; text-align: center; }
  .kit-label { font-size: var(--kit-label-size); font-weight: var(--kit-label-weight); color: var(--kit-label-ink); line-height: var(--kit-label-leading); }
  .kit-auth .kit-label { line-height: var(--kit-auth-label-leading); }
  /* small form (0.14.4): small grey labels and lower fields, e.g. a status form in a panel */
  /* hintsAbove: label, hint, control (checkbox fields keep the hint under the box) */
  .kit-form[data-hints='above'] .kit-field:not(:has(> .kit-check)) > .kit-label { order: -2; }
  .kit-form[data-hints='above'] .kit-field:not(:has(> .kit-check)) > .kit-hint { order: -1; }
  .kit-form[data-hints='above'] .kit-choice > .kit-choice-opts { order: 1; }
  .kit-form[data-hints='above'] .kit-choice > .kit-error { order: 2; }
  .kit-form[data-size='sm'], .kit-form[data-size='sm'] .kit-form-row { gap: var(--kit-form-sm-gap); }
  .kit-card[data-variant='panel'] .kit-form[data-size='sm'], .kit-card[data-variant='panel'] .kit-form[data-size='sm'] .kit-form-row { gap: var(--kit-panel-form-gap); }
  .kit-form[data-size='sm'] .kit-field { gap: var(--kit-label-sm-gap); }
  .kit-form[data-size='sm'] .kit-btn:not([data-size]) { height: var(--kit-form-sm-btn-h); }
  .kit-form[data-size='compact'] .kit-btn:not([data-size]) { height: var(--kit-form-compact-btn-h); }
  .kit-form[data-size='sm'] .kit-label { font-size: var(--kit-label-sm-size); color: var(--kit-label-sm-ink); line-height: var(--kit-label-sm-leading); }
  .kit-form[data-size='sm'] .kit-input { height: var(--kit-input-sm-h); padding: 0 var(--kit-input-sm-x); font-size: var(--kit-text); }
  .kit-form[data-size='sm'] textarea.kit-input { height: auto; padding: var(--kit-space-2) var(--kit-input-sm-x); }
  /* compact form (0.14.4): normal labels, lower fields (--kit-label-compact-*, --kit-input-sm-*) */
  .kit-form[data-size='compact'] .kit-field { gap: var(--kit-label-compact-gap); }
  .kit-form[data-lines='strong'] .kit-field:not(.kit-imagefield) .kit-input, .kit-form[data-lines='strong'] > .kit-form-actions .kit-btn[data-variant='secondary'] { border-color: var(--kit-input-strong-line); }
  .kit-form[data-size='compact'] .kit-label { color: var(--kit-label-compact-ink); line-height: var(--kit-label-compact-leading); }
  .kit-form[data-size='compact'] .kit-input, .kit-form[data-size='sm'] .kit-imagefield-row > .kit-btn, .kit-form[data-size='compact'] .kit-imagefield-row > .kit-btn { height: var(--kit-input-sm-h); }
  .kit-form[data-size='compact'] .kit-input { padding: 0 var(--kit-input-sm-x); font-size: var(--kit-text); }
  .kit-form[data-size='compact'] textarea.kit-input { height: auto; padding: var(--kit-space-2) var(--kit-input-sm-x); }
  .kit-field > .kit-label { order: -2; }
  .kit-field > .kit-label ~ .kit-hint { order: var(--kit-hint-order); }
  .kit-form[data-hints='below'] .kit-field > .kit-hint { order: 0; }
  .kit-label-opt { display: var(--kit-label-opt); font-weight: var(--kit-weight-medium); color: var(--kit-muted); }
  .kit-hint { font-size: var(--kit-text-xs); color: var(--kit-muted); }
  .kit-error { font-size: var(--kit-error-size); font-weight: var(--kit-error-weight); color: var(--kit-bad); }
  .kit-input {
    width: 100%; height: var(--kit-input-h); padding: 0 var(--kit-input-x);
    border: var(--kit-border) solid var(--kit-line-strong); border-radius: var(--kit-radius);
    background: var(--kit-surface); color: var(--kit-ink);
    transition: border-color var(--kit-duration), box-shadow var(--kit-duration);
  }
  textarea.kit-input { height: auto; min-height: calc(var(--kit-input-h) * 2); padding: var(--kit-space-2) var(--kit-input-x); resize: vertical; line-height: var(--kit-leading); }
  select.kit-input { appearance: none; padding-right: var(--kit-space-8); background-image: linear-gradient(45deg, transparent 50%, var(--kit-muted) 50%), linear-gradient(135deg, var(--kit-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
  .kit-input::placeholder { color: var(--kit-faint); }
  .kit-input:hover { border-color: var(--kit-muted); }
  .kit-input:focus { outline: 0; border-color: var(--kit-accent); box-shadow: 0 0 0 var(--kit-focus-width) var(--kit-accent-soft); }
  .kit-input:disabled { background: var(--kit-sunken); color: var(--kit-muted); }
  .kit-field[data-invalid] .kit-input { border-color: var(--kit-bad); }
  .kit-field[data-invalid] .kit-input:focus { box-shadow: 0 0 0 var(--kit-focus-width) var(--kit-bad-soft); }
  .kit-input[data-num] { font-family: var(--kit-font-num); text-align: var(--kit-input-num-align); }
  /* extra small field (0.14.4), e.g. a status select per table row */
  .kit-input[data-size='xs'] { height: var(--kit-input-xs-h); padding: 0 var(--kit-input-xs-x); font-size: var(--kit-text-xs); color: var(--kit-ink-2); width: auto; }
  select.kit-input[data-size='xs'] { padding-right: var(--kit-space-6); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; }
  .kit-input[data-mono] { font-family: var(--kit-font-mono); }
  /* file button (Field fileButton): the native input hidden but focusable, the label drawn as a dashed button */
  .kit-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-3); min-width: 0; }
  .kit-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
  .kit-file-input:focus-visible + .kit-btn { outline: var(--kit-focus-width) solid var(--kit-focus); outline-offset: 2px; }
  .kit-btn[data-dashed] { border-style: dashed; cursor: pointer; }
  .kit-file:has(> .kit-btn[data-block]) { display: flex; }
  .kit-file > .kit-btn[data-block] { flex: 1 1 auto; border-color: var(--kit-file-block-line); color: var(--kit-file-block-ink); font-weight: var(--kit-file-block-weight); }
  .kit-file-name { font-size: var(--kit-text-sm); color: var(--kit-muted); overflow-wrap: anywhere; }
  [data-kit-edit][data-empty] > .kit-table-scroll { display: none; }
  [data-kit-edit]:not([data-empty]) > .kit-edit-empty { display: none; }
  .kit-edit-empty { margin: 0; }
  .kit-input[type='color'] { width: calc(var(--kit-input-h) * 1.4); padding: var(--kit-space-1); cursor: pointer; }
  /* iOS Safari sizes date/time inputs to their content (ignoring width) and top-aligns the value: draw them like text inputs */
  @supports (-webkit-touch-callout: none) {
    .kit-input:is([type='date'], [type='time'], [type='datetime-local'], [type='month'], [type='week']) {
      -webkit-appearance: none; appearance: none; display: block; min-width: 0;
      line-height: calc(var(--kit-input-h) - 2 * var(--kit-border)); text-align: left;
    }
    .kit-input::-webkit-date-and-time-value { margin: 0; text-align: left; }
  }
  .kit-input-group { display: flex; gap: var(--kit-space-2); align-items: center; }
  .kit-input-group > .kit-input:not([type='color']) { flex: 1; min-width: 0; }
  .kit-check { display: inline-flex; align-items: center; gap: var(--kit-space-2); cursor: pointer; }
  .kit-check input { width: var(--kit-check-size); height: var(--kit-check-size); margin: 0; accent-color: var(--kit-check-accent); }
  .kit-check[data-strong] { gap: var(--kit-check-strong-gap); font-weight: var(--kit-check-strong-weight); color: var(--kit-check-strong-ink); line-height: var(--kit-check-strong-leading); }
  .kit-field:has(> .kit-check[data-strong]) > .kit-hint { padding-left: calc(var(--kit-check-size) + var(--kit-check-strong-gap)); }
  .kit-form-actions { display: flex; flex-wrap: wrap; gap: var(--kit-space-2); align-items: center; padding-top: var(--kit-form-actions-pad); }
  .kit-form-actions[data-sticky] {
    position: sticky; bottom: 0; z-index: 5; margin: 0 var(--kit-sticky-bar-mx); padding: var(--kit-space-3) var(--kit-space-4);
    background: var(--kit-bg); border: 0 solid var(--kit-line); border-width: var(--kit-border) var(--kit-sticky-bar-side) var(--kit-sticky-bar-side);
    border-radius: var(--kit-sticky-bar-radius);
  }
  @media (max-width: 860px) { .kit-form-actions[data-sticky] { bottom: calc(64px + env(safe-area-inset-bottom)); } }
  .kit-input[type='file'] { height: auto; padding: var(--kit-space-2); }
  .kit-input[type='file']::file-selector-button { margin-right: var(--kit-space-3); padding: var(--kit-space-1) var(--kit-space-3); border: var(--kit-border) solid var(--kit-line-strong); border-radius: var(--kit-radius-sm); background: var(--kit-surface-2); color: var(--kit-ink); font: inherit; cursor: pointer; }

  /* ---- embed (PDF/HTML preview) ---- */
  .kit-embed { display: block; width: 100%; border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius); background: var(--kit-surface); }
  .kit-embed[width] { width: auto; max-width: 100%; margin-inline: auto; }
  @media (max-width: 860px) { .kit-embed[data-hide-sm] { display: none; } }

  /* ---- editable table (e.g. invoice lines) ---- */
  .kit-edit-table td { padding: var(--kit-space-2); vertical-align: top; }
  .kit-edit-table th { padding: var(--kit-space-2); }
  .kit-edit-table .kit-input { min-width: 0; }
  /* (0.14.4) data-dense: many small number cells (narrow padding) */
  .kit-edit-table[data-dense] td, .kit-edit-table[data-dense] th { padding: var(--kit-space-1); }
  .kit-edit-table[data-dense] .kit-input { padding-left: var(--kit-space-2); padding-right: var(--kit-space-2); min-width: var(--kit-dense-input-min); }
  .kit-edit-table[data-dense] .kit-input[data-num] { text-align: right; }
  .kit-edit-table textarea.kit-input { min-height: var(--kit-control-h); resize: vertical; }
  /* (0.14.4) the widths are also minimums: a wide table scrolls instead of cutting its numbers off */
  .kit-edit-table [data-w='xs'] { width: calc(var(--kit-control-h) * 1.6); min-width: calc(var(--kit-control-h) * 1.6); }
  .kit-edit-table [data-w='sm'] { width: calc(var(--kit-control-h) * 2.4); min-width: calc(var(--kit-control-h) * 2.4); }
  .kit-edit-table [data-w='md'] { width: calc(var(--kit-control-h) * 3.4); min-width: calc(var(--kit-control-h) * 3.4); }
  .kit-edit-table [data-w='lg'] { width: calc(var(--kit-control-h) * 5); min-width: calc(var(--kit-control-h) * 5); }
  .kit-edit-table td[data-act] { width: 1%; }
  .kit-edit-table [data-out] { display: block; line-height: var(--kit-control-h); white-space: nowrap; }
  .kit-edit-add { padding: var(--kit-space-2) var(--kit-space-3); }

  /* ---- dialog (native <dialog>) ---- */
  .kit-dialog {
    width: min(520px, calc(100vw - 32px)); padding: 0; border: var(--kit-border) solid var(--kit-line);
    border-radius: var(--kit-radius-lg); background: var(--kit-surface); color: var(--kit-ink); box-shadow: var(--kit-shadow-lg);
  }
  .kit-dialog::backdrop { background: var(--kit-overlay); }
  .kit-dialog-h { display: flex; align-items: center; justify-content: space-between; gap: var(--kit-space-3); padding: var(--kit-space-4) var(--kit-card-pad); border-bottom: var(--kit-border) solid var(--kit-line); }
  .kit-dialog-b { padding: var(--kit-card-pad); display: flex; flex-direction: column; gap: var(--kit-space-3); }
  .kit-dialog-f { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--kit-space-2); padding: var(--kit-space-3) var(--kit-card-pad); border-top: var(--kit-border) solid var(--kit-line); background: var(--kit-surface-2); border-radius: 0 0 var(--kit-radius-lg) var(--kit-radius-lg); }

  /* ---- misc ---- */
  .kit-kbd { font-family: var(--kit-font-mono); font-size: var(--kit-text-xs); padding: 0 var(--kit-space-1); border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius-sm); color: var(--kit-muted); }
  .kit-code { font-family: var(--kit-font-mono); font-size: var(--kit-text-sm); color: var(--kit-ink); background: var(--kit-sunken); padding: 1px var(--kit-space-1); border-radius: var(--kit-radius-sm); }
  .kit-pre-wrap { position: relative; min-width: 0; }
  .kit-pre-wrap > .kit-copy { position: absolute; top: var(--kit-space-2); right: var(--kit-space-2); }
  .kit-pre-wrap > .kit-copy .kit-btn { background: var(--kit-sunken); }
  .kit-pre-wrap > .kit-pre { padding-right: calc(var(--kit-control-h-sm) + var(--kit-space-4)); }
  .kit-pre { font-family: var(--kit-font-mono); font-size: var(--kit-text-sm); background: var(--kit-sunken); padding: var(--kit-space-4); border-radius: var(--kit-radius); overflow-x: auto; line-height: 1.6; white-space: pre; }
  .kit-divider { border: 0; border-top: var(--kit-border) solid var(--kit-line); margin: 0; }
}

/* ------------------------------------------------------------------ utilities (layout only) */
@layer kit.utilities {
  .kit-stack { display: flex; flex-direction: column; gap: var(--kit-space-4); }
  .kit-stack[data-gap='sm'] { gap: var(--kit-space-2); }
  .kit-stack[data-gap='lg'] { gap: var(--kit-space-6); }
  .kit-stack[data-gap='xl'] { gap: var(--kit-space-8); }
  .kit-stack[data-gap='none'] { gap: 0; }
  .kit-stack[data-gap='xs'] { gap: var(--kit-space-1); }
  .kit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-3); }
  .kit-row[data-justify='between'] { justify-content: space-between; }
  .kit-row[data-justify='end'] { justify-content: flex-end; }
  .kit-row[data-nowrap] { flex-wrap: nowrap; }
  .kit-row[data-gap='sm'] { gap: var(--kit-space-1); }
  .kit-row[data-gap='overlap'] { gap: 0; }
  .kit-row[data-gap='overlap'] > * + * { margin-left: calc(-1 * var(--kit-space-2)); }
  .kit-row[data-gap='overlap'] > .kit-avatar { border: var(--kit-border) solid var(--kit-overlap-ring); background: var(--kit-overlap-bg); }
  .kit-row[data-align='start'] { align-items: flex-start; }
  .kit-row[data-align='end'] { align-items: flex-end; }
  .kit-grow { flex: 1 1 0; min-width: 0; }
  .kit-grid { display: grid; gap: var(--kit-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kit-grid-min)), 1fr)); }
  .kit-grid[data-cols='2'] { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kit-grid-2-min)), 1fr)); }
  .kit-grid[data-cols='wide-narrow'] { grid-template-columns: minmax(0, 1fr); gap: var(--kit-grid-wn-gap); }
  @media (min-width: 1024px) { .kit-grid[data-cols='wide-narrow'] { grid-template-columns: minmax(0, var(--kit-grid-wn-main)) minmax(var(--kit-grid-wn-side-min), var(--kit-grid-wn-side)); } }
  .kit-grid[data-cols='3'] { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kit-grid-3-min)), 1fr)); }
  .kit-muted { color: var(--kit-muted); }
  /* muted text on the login page itself (not in a card), e.g. a line under the heading */
  .kit-auth-b > .kit-muted { color: var(--kit-auth-muted); }
  .kit-small { font-size: var(--kit-text-sm); }
  .kit-xsmall { font-size: var(--kit-text-xs); }
  .kit-xl { font-size: var(--kit-text-xl); }
  .kit-tiny { font-size: var(--kit-text-2xs); }
  .kit-faint { color: var(--kit-faint); }
  .kit-section-link { color: var(--kit-section-link-ink); }
  .kit-bold { font-weight: var(--kit-weight-heading); }
  .kit-text-warn { color: var(--kit-warn); }
  .kit-strong { font-weight: var(--kit-weight-strong); }
  .kit-accent { color: var(--kit-accent); }
  .kit-mono { font-family: var(--kit-font-mono); }
  .kit-medium { font-weight: var(--kit-weight-medium); }
  .kit-text-ok { color: var(--kit-text-ok-ink); }
  .kit-text-ok-strong { color: var(--kit-text-ok-strong-ink); }
  .kit-text-bad { color: var(--kit-bad); }
  .kit-mono { font-family: var(--kit-font-mono); }
  .kit-right { text-align: right; }
  .kit-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .kit-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  @media (max-width: 860px) { .kit-hide-sm { display: none !important; } }
  /* touch screens (0.16.0): fields use at least --kit-input-touch-size (16px), else iOS Safari zooms in on focus.
     In the utilities layer so it wins over every component size (xs fields, small forms, code editor + its gutter). */
  @media (pointer: coarse) { .kit-input, .kit-code-lines { font-size: max(var(--kit-text), var(--kit-input-touch-size)); } }
}

/* overlays components. Tokens only (test/css.test.ts). */
@layer kit.components {
  /* ---- menu (dropdown on <details>) ---- */
  .kit-menu { position: relative; display: inline-block; }
  .kit-menu > summary { list-style: none; }
  .kit-menu > summary::-webkit-details-marker { display: none; }
  .kit-menu > summary > .kit-i:last-child:not(:first-child) { transition: transform var(--kit-duration); }
  .kit-menu[open] > summary > .kit-i:last-child:not(:first-child) { transform: rotate(180deg); }
  .kit-menu[open] > summary[data-variant='secondary'], .kit-menu[open] > summary[data-variant='ghost'] { background: var(--kit-sunken); }
  .kit-menu-list {
    position: absolute; z-index: 30; top: calc(100% + var(--kit-space-1)); left: 0;
    min-width: 200px; max-width: min(320px, calc(100vw - 32px));
    display: flex; flex-direction: column; padding: var(--kit-space-1);
    background: var(--kit-surface); border: var(--kit-border) solid var(--kit-line);
    border-radius: var(--kit-radius); box-shadow: var(--kit-shadow-lg);
  }
  .kit-menu[data-align='right'] > .kit-menu-list { left: auto; right: 0; }
  .kit-menu-form { display: contents; }
  .kit-menu-item {
    display: flex; align-items: center; gap: var(--kit-space-2); width: 100%;
    padding: var(--kit-space-2) var(--kit-space-3); border: 0; border-radius: var(--kit-radius-sm);
    background: none; color: var(--kit-ink); font-size: var(--kit-text); text-align: left;
    white-space: nowrap; cursor: pointer; text-decoration: none;
  }
  .kit-menu-item > span { overflow: hidden; text-overflow: ellipsis; }
  .kit-menu-item .kit-i { color: var(--kit-muted); }
  .kit-menu-item:hover, .kit-menu-item:focus-visible { background: var(--kit-sunken); color: var(--kit-ink); text-decoration: none; }
  .kit-menu-item:focus-visible { outline-offset: -2px; }
  .kit-menu-item[data-tone='bad'], .kit-menu-item[data-tone='bad'] .kit-i, .kit-menu-item[data-tone='bad']:hover { color: var(--kit-bad); }
  .kit-menu-item[data-tone='bad']:hover, .kit-menu-item[data-tone='bad']:focus-visible { background: var(--kit-bad-soft); }
  .kit-menu-item:disabled, .kit-menu-item[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; background: none; }
  .kit-menu-sep { border: 0; border-top: var(--kit-border) solid var(--kit-line); margin: var(--kit-space-1) 0; }

  /* ---- toasts (Svelte <Toaster>), bottom right, above the phone tab bar ---- */
  .kit-toaster {
    position: fixed; right: var(--kit-space-4); bottom: var(--kit-space-4); z-index: 40;
    display: flex; flex-direction: column; gap: var(--kit-space-2);
    width: min(380px, calc(100vw - 32px)); pointer-events: none;
  }
  .kit-toast {
    pointer-events: auto; display: flex; align-items: center; gap: var(--kit-space-3);
    padding: var(--kit-space-2) var(--kit-space-2) var(--kit-space-2) var(--kit-space-4);
    background: var(--kit-surface); color: var(--kit-info);
    border: var(--kit-border) solid var(--kit-line); border-left: 3px solid currentColor;
    border-radius: var(--kit-radius); box-shadow: var(--kit-shadow-lg);
    animation: kit-toast-in var(--kit-duration) ease-out;
  }
  .kit-toast-msg { flex: 1; min-width: 0; padding: var(--kit-space-1) 0; color: var(--kit-ink); overflow-wrap: anywhere; }
  [data-tone='ok'].kit-toast { color: var(--kit-ok); }
  [data-tone='warn'].kit-toast { color: var(--kit-warn); }
  [data-tone='bad'].kit-toast { color: var(--kit-bad); }
  @keyframes kit-toast-in { from { opacity: 0; transform: translateY(8px); } }
  @media (max-width: 860px) {
    .kit-toaster { left: var(--kit-space-4); width: auto; bottom: calc(64px + env(safe-area-inset-bottom) + var(--kit-space-3)); }
  }

  /* ---- tooltip: data-tip="…" on any non-void element (visual only; screen readers skip it) ---- */
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip); content: attr(data-tip) / '';
    position: absolute; z-index: 45; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 2px);
    width: max-content; max-width: 240px; padding: var(--kit-space-1) var(--kit-space-2);
    background: var(--kit-ink); color: var(--kit-bg); border-radius: var(--kit-radius-sm); box-shadow: var(--kit-shadow);
    font-family: var(--kit-font-sans); font-size: var(--kit-text-xs); font-weight: var(--kit-weight-medium);
    line-height: 1.4; letter-spacing: 0; text-align: center; text-transform: none; white-space: normal;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--kit-duration), transform var(--kit-duration);
  }
  [data-tip-pos='bottom']::after { bottom: auto; top: calc(100% + 6px); transform: translate(-50%, -2px); }
  [data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip]:has(:focus-visible)::after {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 150ms;
  }
  .kit-tip { display: inline-flex; align-items: center; }
  .kit-tip[tabindex] { cursor: help; text-decoration: underline dotted var(--kit-muted); text-underline-offset: 3px; }

  /* ---- spinner ---- */
  .kit-spinner {
    display: inline-block; flex: none; width: 20px; height: 20px; vertical-align: -0.25em;
    border: 2px solid var(--kit-line-strong); border-top-color: var(--kit-accent);
    border-radius: var(--kit-radius-pill); animation: kit-spin 0.7s linear infinite;
  }
  .kit-spinner[data-size='sm'] { width: 14px; height: 14px; }
  .kit-btn .kit-spinner { border-color: currentColor; border-top-color: transparent; }
  @keyframes kit-spin { to { transform: rotate(360deg); } }

  /* ---- skeleton ---- */
  .kit-skeleton { display: flex; flex-direction: column; gap: var(--kit-space-2); }
  .kit-skeleton-line, .kit-skeleton[data-block] {
    display: block; border-radius: var(--kit-radius-sm);
    background: linear-gradient(90deg, var(--kit-sunken) 30%, var(--kit-surface-2) 50%, var(--kit-sunken) 70%);
    background-size: 300% 100%; animation: kit-shimmer 1.4s ease-in-out infinite;
  }
  .kit-skeleton-line { height: var(--kit-text); }
  .kit-skeleton-line:last-child:not(:first-child) { width: 60%; }
  .kit-skeleton[data-block] { width: 100%; border-radius: var(--kit-radius); }
  @keyframes kit-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

  /* ---- progress (task progress; Meter is for a measured quantity) ---- */
  .kit-progressbar { display: flex; flex-direction: column; gap: var(--kit-space-1); min-width: 0; }
  .kit-progressbar-head { display: flex; justify-content: space-between; gap: var(--kit-space-2); font-size: var(--kit-text-sm); }
  .kit-progressbar-head span:last-child:not(:first-child) { font-family: var(--kit-font-num); color: var(--kit-ink-2); }
  .kit-progressbar-track { position: relative; height: 8px; border-radius: var(--kit-radius-pill); background: var(--kit-sunken); overflow: hidden; }
  .kit-progressbar-bar { height: 100%; width: 0; border-radius: var(--kit-radius-pill); background: var(--kit-accent); transition: width var(--kit-duration); }
  [data-tone='ok'] > .kit-progressbar-track .kit-progressbar-bar { background: var(--kit-ok); }
  [data-tone='warn'] > .kit-progressbar-track .kit-progressbar-bar { background: var(--kit-warn); }
  [data-tone='bad'] > .kit-progressbar-track .kit-progressbar-bar { background: var(--kit-bad); }
  [data-tone='info'] > .kit-progressbar-track .kit-progressbar-bar { background: var(--kit-info); }
  .kit-progressbar[data-indeterminate] .kit-progressbar-bar { position: absolute; inset: 0 auto 0 0; width: 35%; animation: kit-indeterminate 1.2s ease-in-out infinite; }
  @keyframes kit-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

  /* ---- steps (wizard) ---- */
  .kit-steps { display: flex; align-items: center; gap: var(--kit-space-2); margin: 0; padding: 0; list-style: none; }
  .kit-steps > li { display: flex; align-items: center; gap: var(--kit-space-2); flex: 1 1 auto; min-width: 0; }
  .kit-steps > li:last-child { flex: 0 1 auto; }
  .kit-steps > li:not(:last-child)::after { content: ''; flex: 1; min-width: var(--kit-space-4); height: var(--kit-border); background: var(--kit-line-strong); }
  .kit-steps > li[data-state='done']:not(:last-child)::after { background: var(--kit-accent-line); }
  .kit-step {
    display: inline-flex; align-items: center; gap: var(--kit-space-2); min-width: 0;
    color: var(--kit-muted); font-size: var(--kit-text-sm); font-weight: var(--kit-weight-medium);
    white-space: nowrap; border-radius: var(--kit-radius-sm);
  }
  .kit-step-label { overflow: hidden; text-overflow: ellipsis; }
  a.kit-step:hover { color: var(--kit-ink); text-decoration: none; }
  a.kit-step:hover .kit-step-label { text-decoration: underline; text-underline-offset: 3px; }
  .kit-step-mark {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px;
    border: var(--kit-border) solid var(--kit-line-strong); border-radius: var(--kit-radius-pill); background: var(--kit-surface);
    font-family: var(--kit-font-num); font-size: var(--kit-text-xs); color: var(--kit-muted);
  }
  [data-state='current'] > .kit-step { color: var(--kit-ink); font-weight: var(--kit-weight-strong); }
  [data-state='current'] .kit-step-mark { background: var(--kit-accent); border-color: var(--kit-accent); color: var(--kit-accent-ink); }
  [data-state='done'] > .kit-step { color: var(--kit-ink-2); }
  [data-state='done'] .kit-step-mark { background: var(--kit-accent-soft); border-color: var(--kit-accent-line); color: var(--kit-accent); }
  @media (max-width: 640px) {
    .kit-steps { flex-direction: column; align-items: stretch; gap: 0; }
    .kit-steps > li { flex-direction: column; align-items: flex-start; gap: 0; }
    .kit-steps > li:not(:last-child)::after { flex: none; min-width: 0; width: var(--kit-border); height: var(--kit-space-3); margin: var(--kit-space-1) 0 var(--kit-space-1) 12px; }
  }

  /* ---- accordion (<details>) ---- */
  .kit-accordion { border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius-lg); background: var(--kit-surface); }
  .kit-card > .kit-accordion { border: 0; border-radius: 0; background: none; }
  .kit-accordion-item + .kit-accordion-item { border-top: var(--kit-border) solid var(--kit-line); }
  .kit-accordion-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--kit-space-3);
    padding: var(--kit-space-3) var(--kit-card-pad); font-weight: var(--kit-weight-strong);
    list-style: none; cursor: pointer;
  }
  .kit-accordion-item > summary::-webkit-details-marker { display: none; }
  .kit-accordion-item > summary:hover { background: var(--kit-surface-2); }
  .kit-accordion-item > summary:focus-visible { outline-offset: -2px; }
  .kit-accordion-item:first-child > summary { border-radius: var(--kit-radius-lg) var(--kit-radius-lg) 0 0; }
  .kit-accordion-item:last-child:not([open]) > summary { border-radius: 0 0 var(--kit-radius-lg) var(--kit-radius-lg); }
  .kit-accordion-item:only-child:not([open]) > summary { border-radius: var(--kit-radius-lg); }
  .kit-accordion-item > summary .kit-i { color: var(--kit-muted); transition: transform var(--kit-duration); }
  .kit-accordion-item[open] > summary .kit-i { transform: rotate(180deg); }
  .kit-accordion-b { display: flex; flex-direction: column; gap: var(--kit-space-2); padding: 0 var(--kit-card-pad) var(--kit-card-pad); color: var(--kit-ink-2); }

  /* ---- copy button ---- */
  .kit-copy { display: inline-flex; }
  .kit-copy-i, .kit-copy-ok { display: inline-flex; }
  .kit-copy-ok { display: none; }
  [data-copied] .kit-copy-i { display: none; }
  [data-copied] .kit-copy-ok { display: inline-flex; }
  .kit-btn:not([data-variant='primary'])[data-copied] .kit-copy-ok { color: var(--kit-ok); }

  /* ---- avatar ---- */
  .kit-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--kit-avatar-size); height: var(--kit-avatar-size);
    border-radius: var(--kit-radius-pill); overflow: hidden; user-select: none;
    background: var(--kit-sunken); color: var(--kit-ink-2);
    font-size: var(--kit-text-xs); font-weight: var(--kit-weight-strong); line-height: 1; letter-spacing: 0;
  }
  .kit-avatar[data-size='sm'] { width: 24px; height: 24px; }
  .kit-avatar[data-size='lg'] { width: var(--kit-avatar-lg-size); height: var(--kit-avatar-lg-size); font-size: var(--kit-text-lg); }
  /* xl (0.14.4): a thumbnail, e.g. of an order line */
  .kit-avatar[data-size='xl'] { width: var(--kit-avatar-xl-size); height: var(--kit-avatar-xl-size); font-size: var(--kit-text-lg); }
  /* framed (0.14.4): a thin border and a little room around a picture shown whole */
  .kit-avatar[data-framed] { border: var(--kit-border) solid var(--kit-line); background: var(--kit-surface-2); padding: var(--kit-space-1); }
  .kit-avatar > .kit-avatar-text { padding: var(--kit-space-1); font-size: var(--kit-text-xs); font-weight: normal; line-height: 1.2; text-align: center; color: var(--kit-faint); }
  .kit-avatar > img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .kit-avatar[data-fit='contain'] > img { object-fit: contain; }
  .kit-avatar[data-shape='square'] { border-radius: var(--kit-radius-sm); }
  [data-tone='accent'].kit-avatar { background: var(--kit-accent-soft); color: var(--kit-accent); }
  [data-tone='info'].kit-avatar { background: var(--kit-info-soft); color: var(--kit-info); }
  [data-tone='ok'].kit-avatar { background: var(--kit-ok-soft); color: var(--kit-ok); }
  [data-tone='warn'].kit-avatar { background: var(--kit-warn-soft); color: var(--kit-warn); }
  [data-tone='none'].kit-avatar { background: transparent; }

  /* ---- sheet (native <dialog>): bottom sheet on phones, centred panel or right drawer from 640px ---- */
  .kit-sheet {
    position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 90dvh;
    padding: 0; border: var(--kit-border) solid var(--kit-line); border-bottom: 0;
    border-radius: var(--kit-radius-lg) var(--kit-radius-lg) 0 0; overflow: hidden; overscroll-behavior: contain;
    background: var(--kit-surface); color: var(--kit-ink); box-shadow: var(--kit-shadow-lg);
  }
  .kit-sheet[open] { display: flex; flex-direction: column; animation: kit-sheet-up calc(var(--kit-duration) * 2) ease-out; }
  .kit-sheet::backdrop { background: var(--kit-overlay); }
  .kit-sheet[open]::backdrop { animation: kit-fade calc(var(--kit-duration) * 2) ease-out; }
  html:has(.kit-sheet[open]) { overflow: hidden; }
  .kit-sheet-grabber { flex: none; width: 40px; height: 4px; margin: var(--kit-space-2) auto 0; border-radius: var(--kit-radius-pill); background: var(--kit-line-strong); }
  .kit-sheet-h, .kit-sheet-b, .kit-sheet-f {
    padding-left: calc(var(--kit-card-pad) + env(safe-area-inset-left));
    padding-right: calc(var(--kit-card-pad) + env(safe-area-inset-right));
  }
  .kit-sheet-h {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--kit-space-3);
    padding-top: var(--kit-space-2); padding-bottom: var(--kit-space-3); border-bottom: var(--kit-border) solid var(--kit-line);
  }
  .kit-sheet-h > h2 { margin: 0; min-width: 0; font-size: var(--kit-sheet-title-size); font-weight: var(--kit-sheet-title-weight); overflow-wrap: anywhere; }
  .kit-sheet-h > h2:focus { outline: none; }
  .kit-sheet-h > form { display: contents; }
  .kit-sheet-b {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: var(--kit-space-3);
    padding-top: var(--kit-sheet-pad-y); padding-bottom: var(--kit-sheet-pad-y);
  }
  .kit-sheet-b:last-child { padding-bottom: calc(var(--kit-sheet-pad-y) + env(safe-area-inset-bottom)); }
  .kit-sheet-f {
    flex: none; display: flex; flex-wrap: wrap; gap: var(--kit-space-2);
    padding-top: var(--kit-space-3); padding-bottom: calc(var(--kit-space-3) + env(safe-area-inset-bottom));
    border-top: var(--kit-border) solid var(--kit-line); background: var(--kit-sheet-foot-bg); justify-content: var(--kit-sheet-foot-justify);
  }
  @keyframes kit-sheet-up { from { transform: translateY(100%); } }
  @keyframes kit-sheet-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
  @keyframes kit-sheet-left { from { transform: translateX(100%); } }
  @keyframes kit-fade { from { opacity: 0; } }
  @media (max-width: 639.98px) {
    /* Full-width buttons are easier to hit on a phone. */
    .kit-sheet-f > .kit-btn { flex: 1 1 auto; }
  }
  @media (min-width: 640px) {
    .kit-sheet {
      inset: 0; margin: auto; width: min(560px, calc(100vw - 32px)); height: fit-content; max-height: min(85dvh, 800px);
      border-bottom: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius-lg);
    }
    .kit-sheet[data-size='sm'] { width: min(400px, calc(100vw - 32px)); }
    .kit-sheet[data-size='lg'] { width: min(760px, calc(100vw - 32px)); }
    .kit-sheet[data-size='xl'] { width: min(var(--kit-sheet-xl-w), calc(100vw - 32px)); }
    .kit-sheet[open] { animation-name: kit-sheet-pop; }
    .kit-sheet-grabber { display: none; }
    .kit-sheet-h { padding-top: var(--kit-space-4); padding-bottom: var(--kit-space-4); }
    .kit-sheet[data-side='right'] {
      inset: 0 0 0 auto; width: min(480px, 100vw); height: 100%; max-height: 100%;
      border-width: 0 0 0 var(--kit-border); border-radius: var(--kit-radius-lg) 0 0 var(--kit-radius-lg);
    }
    .kit-sheet[data-side='right'][data-size='sm'] { width: min(360px, 100vw); }
    .kit-sheet[data-side='right'][data-size='lg'] { width: min(680px, 100vw); }
    .kit-sheet[data-side='right'][open] { animation-name: kit-sheet-left; }
    .kit-sheet[data-side='right'] .kit-sheet-h { padding-top: calc(var(--kit-space-4) + env(safe-area-inset-top)); }
  }

  /* ---- auth shell (login, invite, reset, setup) ---- */
  .kit-auth {
    display: grid; grid-template-rows: auto 1fr auto; gap: var(--kit-space-8);
    width: 100%; max-width: var(--kit-auth-w); min-height: 100vh; min-height: 100dvh; margin: 0 auto;
    padding: calc(env(safe-area-inset-top) + var(--kit-space-6)) calc(var(--kit-space-4) + env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom) + var(--kit-space-6)) calc(var(--kit-space-4) + env(safe-area-inset-left));
  }
  .kit-auth[data-inline] { min-height: 0; padding: var(--kit-space-6) var(--kit-space-4); }
  /* the login page can have its own page colour (--kit-auth-bg, e.g. dark behind a light card); not inline previews */
  body:has(.kit-auth:not([data-inline])) { background: var(--kit-auth-bg); }
  .kit-auth-h .kit-brand { padding: 0; font-size: var(--kit-h2); justify-content: var(--kit-auth-align); }
  .kit-auth-h .kit-brand, .kit-auth-h .kit-brand:hover { color: var(--kit-auth-ink); }
  .kit-auth-h .kit-brand-logo img { height: var(--kit-auth-logo-h); }
  /* the mark on the login page: its own size (icon at the mark's proportion) and the name can be hidden */
  .kit-auth-h .kit-brand-mark { width: var(--kit-auth-mark-size); height: var(--kit-auth-mark-size); }
  .kit-auth-h .kit-brand-mark > .kit-i { width: var(--kit-auth-mark-icon); height: var(--kit-auth-mark-icon); }
  .kit-auth-h .kit-brand-mark + span { display: var(--kit-auth-name); }
  .kit-auth-b { display: flex; flex-direction: column; gap: var(--kit-space-5); min-width: 0; align-self: var(--kit-auth-valign); }
  .kit-auth-b > h1 { margin: 0; color: var(--kit-auth-ink); }
  .kit-auth-b > p { font-size: var(--kit-auth-sub-size); }
  .kit-auth-b > .kit-card { box-shadow: var(--kit-auth-card-shadow); }
  .kit-auth-b > .kit-card > .kit-card-b { padding: var(--kit-auth-card-pad); }
  .kit-auth-b > :is(h1, p) { text-align: var(--kit-auth-align); }
  :where(.kit-auth-b > p) { color: var(--kit-auth-ink); }
  .kit-auth-f { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kit-space-2) var(--kit-space-4); color: var(--kit-auth-muted); font-size: var(--kit-text-sm); text-align: center; }
  .kit-auth-f a { color: var(--kit-auth-link); }
  .kit-auth-f a:hover { color: var(--kit-auth-link-hover); }
  @media (min-height: 700px) { .kit-auth:not([data-inline]):not([data-center]) { padding-top: calc(env(safe-area-inset-top) + 10vh); } }
  /* center (0.14.3): brand + body in the middle of the page, as one block */
  .kit-auth[data-center] { grid-template-rows: auto auto auto; align-content: center; gap: var(--kit-auth-gap); }
  .kit-auth[data-center] .kit-auth-b { gap: var(--kit-space-2); }
  .kit-auth[data-center] .kit-auth-b > :is(h1, p) + :not(h1, p) { margin-top: var(--kit-auth-card-gap); }

  /* ---- confirm dialog (shellScript: data-confirm + data-confirm-title) ---- */
  .kit-confirm { display: none; }
  .kit-confirm[open] { display: flex; flex-direction: column; gap: var(--kit-space-3); padding: var(--kit-card-pad) calc(var(--kit-card-pad) + env(safe-area-inset-right)) calc(var(--kit-card-pad) + env(safe-area-inset-bottom)) calc(var(--kit-card-pad) + env(safe-area-inset-left)); }
  .kit-confirm-title { margin: 0; font-size: var(--kit-h2); font-weight: var(--kit-weight-strong); }
  .kit-confirm-text { margin: 0; color: var(--kit-ink-2); }
  .kit-confirm-actions { justify-content: flex-end; margin-top: var(--kit-space-2); }

  /* ---- connection banner (Svelte <ConnectionBanner>) ---- */
  .kit-conn { position: sticky; top: 0; z-index: 50; }
  .kit-conn[data-static] { position: static; }
  .kit-conn-bar {
    display: flex; align-items: center; justify-content: center; gap: var(--kit-space-2);
    padding: calc(env(safe-area-inset-top) + var(--kit-space-2)) var(--kit-space-4) var(--kit-space-2);
    background: var(--kit-warn-soft); color: var(--kit-warn);
    font-size: var(--kit-text-sm); font-weight: var(--kit-weight-strong); text-align: center;
    animation: kit-fade var(--kit-duration) ease-out;
  }
  .kit-conn[data-static] .kit-conn-bar { padding-top: var(--kit-space-2); border-radius: var(--kit-radius); }
  .kit-conn-bar[data-tone='ok'] { background: var(--kit-ok-soft); color: var(--kit-ok); }
  .kit-conn-bar > .kit-i { flex: none; }

  /* ---- share button (shares the copy button's icon swap) ---- */
  .kit-share { display: inline-flex; }

  /* ---- less motion ---- */
  @media (prefers-reduced-motion: reduce) {
    .kit-toast { animation: none; }
    [data-tip]::after { transition: none; }
    .kit-spinner { animation-duration: 2s; }
    .kit-skeleton-line, .kit-skeleton[data-block] { animation: none; }
    .kit-progressbar[data-indeterminate] .kit-progressbar-bar { animation: none; width: 100%; opacity: 0.4; }
    .kit-menu > summary > .kit-i, .kit-accordion-item > summary .kit-i { transition: none; }
    .kit-sheet[open], .kit-sheet[open]::backdrop, .kit-conn-bar { animation: none; }
  }
}

/* forms components. Tokens only (test/css.test.ts). */
@layer kit.components {
  /* ---- colour field: native picker swatch + hex text input ---- */
  .kit-color { display: flex; gap: var(--kit-space-2); }
  .kit-color .kit-input { font-family: var(--kit-font-mono); text-transform: lowercase; }
  .kit-color-swatch {
    flex: none; width: var(--kit-input-h); height: var(--kit-input-h); padding: var(--kit-space-1);
    border: var(--kit-border) solid var(--kit-line-strong); border-radius: var(--kit-radius); background: var(--kit-surface); cursor: pointer;
  }
  .kit-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
  .kit-color-swatch::-webkit-color-swatch { border: 0; border-radius: var(--kit-radius-sm); }
  .kit-color-swatch::-moz-color-swatch { border: 0; border-radius: var(--kit-radius-sm); }
  .kit-color-swatch:disabled { opacity: 0.5; cursor: not-allowed; }

  /* ---- switch (checkbox with role="switch") ---- */
  .kit-switch { display: inline-flex; align-items: center; gap: var(--kit-space-2); cursor: pointer; }
  .kit-switch input {
    appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0;
    border-radius: var(--kit-radius-pill); background: var(--kit-muted); cursor: pointer;
    transition: background var(--kit-duration);
  }
  .kit-switch input::before {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: var(--kit-radius-pill); background: var(--kit-surface); box-shadow: var(--kit-shadow);
    transition: transform var(--kit-duration);
  }
  .kit-switch input:checked { background: var(--kit-accent); }
  .kit-switch input:checked::before { transform: translateX(16px); background: var(--kit-accent-ink); }
  .kit-switch input:disabled { opacity: 0.5; cursor: not-allowed; }
  .kit-switch:has(input:disabled) { color: var(--kit-muted); cursor: not-allowed; }
  .kit-field[data-invalid] .kit-switch input { box-shadow: 0 0 0 var(--kit-focus-width) var(--kit-bad); }
  @media (prefers-reduced-motion: reduce) { .kit-switch input, .kit-switch input::before { transition: none; } }

  /* ---- radio / checkbox groups ---- */
  .kit-choice { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--kit-space-1); }
  .kit-choice > legend { padding: 0; margin-bottom: var(--kit-space-2); }
  .kit-choice-opts { display: flex; flex-direction: column; gap: var(--kit-space-2); }
  .kit-choice[data-inline] .kit-choice-opts { flex-direction: row; flex-wrap: wrap; column-gap: var(--kit-space-5); row-gap: var(--kit-space-2); }
  .kit-choice-opt { display: flex; flex-direction: column; min-width: 0; }
  .kit-choice-opt .kit-hint { padding-left: 26px; }
  .kit-choice-opt:has(input:disabled) .kit-check { color: var(--kit-muted); cursor: not-allowed; }

  .kit-choice[data-invalid] > legend { color: var(--kit-bad); }
  /* cards (0.14.1): a box per option, the chosen one in the accent colours */
  .kit-choice[data-variant='cards'] .kit-choice-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--kit-space-2); }
  .kit-choice[data-variant='cards'] .kit-choice-opt { gap: 2px; padding: var(--kit-space-3); border: var(--kit-border) solid var(--kit-line-strong); border-radius: var(--kit-radius); background: var(--kit-surface); }
  .kit-choice[data-variant='cards'] .kit-choice-opt .kit-check { font-weight: var(--kit-weight-strong); }
  .kit-choice[data-variant='cards'] .kit-choice-opt:has(input:checked) { border-color: var(--kit-accent); background: var(--kit-accent-soft); }
  .kit-choice[data-variant='cards'] .kit-choice-opt:has(input:checked) .kit-hint { color: var(--kit-ink-2); }
  .kit-choice[data-variant='cards'] .kit-choice-opt:has(input:focus-visible) { box-shadow: 0 0 0 var(--kit-focus-width) var(--kit-accent-soft); }

  /* ---- range ---- */
  .kit-range-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--kit-space-2); }
  .kit-range-value { font-family: var(--kit-font-num); font-size: var(--kit-text-sm); color: var(--kit-ink-2); }
  .kit-range { width: 100%; height: 24px; margin: 0; accent-color: var(--kit-accent); cursor: pointer; }
  .kit-range:disabled { cursor: not-allowed; opacity: 0.5; }

  /* ---- timeline ---- */
  .kit-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .kit-tl-item { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--kit-space-3); padding-bottom: var(--kit-space-5); color: var(--kit-faint); }
  .kit-tl-item:last-child { padding-bottom: 0; }
  .kit-tl-item::before { content: ''; position: absolute; left: 10px; top: 26px; bottom: 4px; width: var(--kit-border); background: var(--kit-line); }
  .kit-tl-item:last-child::before { display: none; }
  .kit-tl-item[data-tone='ok'] { color: var(--kit-ok); }
  .kit-tl-item[data-tone='warn'] { color: var(--kit-warn); }
  .kit-tl-item[data-tone='bad'] { color: var(--kit-bad); }
  .kit-tl-item[data-tone='info'] { color: var(--kit-info); }
  .kit-tl-dot { width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--kit-radius-pill); }
  .kit-tl-dot:empty::before { content: ''; width: 10px; height: 10px; border-radius: var(--kit-radius-pill); background: currentColor; box-shadow: 0 0 0 3px var(--kit-surface); }
  .kit-tl-item[data-icon] .kit-tl-dot { background: var(--kit-sunken); color: var(--kit-muted); }
  .kit-tl-item[data-icon][data-tone='ok'] .kit-tl-dot { background: var(--kit-ok-soft); color: var(--kit-ok); }
  .kit-tl-item[data-icon][data-tone='warn'] .kit-tl-dot { background: var(--kit-warn-soft); color: var(--kit-warn); }
  .kit-tl-item[data-icon][data-tone='bad'] .kit-tl-dot { background: var(--kit-bad-soft); color: var(--kit-bad); }
  .kit-tl-item[data-icon][data-tone='info'] .kit-tl-dot { background: var(--kit-info-soft); color: var(--kit-info); }
  .kit-tl-body { min-width: 0; padding-top: 1px; color: var(--kit-ink); }
  .kit-tl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: var(--kit-space-3); }
  .kit-tl-title { font-weight: var(--kit-weight-strong); }
  .kit-tl-time { font-family: var(--kit-font-num); font-size: var(--kit-text-xs); color: var(--kit-muted); white-space: nowrap; }
  .kit-tl-text { font-size: var(--kit-text-sm); color: var(--kit-ink-2); }

  /* ---- split layout (main + aside) ---- */
  .kit-split { display: grid; gap: var(--kit-space-6); grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: 'main aside'; align-items: start; }
  .kit-split[data-width='sm'] { grid-template-columns: minmax(0, 1fr) 320px; }
  .kit-split[data-side='left'] { grid-template-columns: 400px minmax(0, 1fr); grid-template-areas: 'aside main'; }
  .kit-split[data-side='left'][data-width='sm'] { grid-template-columns: 320px minmax(0, 1fr); }
  .kit-split-main, .kit-split-aside { min-width: 0; display: flex; flex-direction: column; gap: var(--kit-space-4); }
  .kit-split-main { grid-area: main; }
  .kit-split-aside { grid-area: aside; }
  .kit-split[data-sticky] > .kit-split-aside { position: sticky; top: calc(var(--kit-topbar-h) + var(--kit-space-4)); }
  @media (max-width: 860px) {
    .kit-split, .kit-split[data-width], .kit-split[data-side] { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'main' 'aside'; gap: var(--kit-space-4); }
    .kit-split[data-sticky] > .kit-split-aside { position: static; }
  }

  /* ---- donut ---- */
  .kit-donut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-6); }
  .kit-donut-chart { position: relative; flex: none; width: 160px; height: 160px; }
  .kit-donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .kit-donut-svg circle { fill: none; stroke-width: 5.5; }
  .kit-donut-track { stroke: var(--kit-sunken); }
  .kit-donut-seg { stroke: var(--kit-accent); transition: stroke-dasharray var(--kit-duration); }
  .kit-donut-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
  .kit-donut-value { font-family: var(--kit-font-num); font-size: var(--kit-h2); font-weight: var(--kit-weight-strong); color: var(--kit-ink); }
  .kit-donut-label { font-size: var(--kit-text-xs); color: var(--kit-muted); }
  .kit-donut-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: var(--kit-space-2); font-size: var(--kit-text-sm); }
  .kit-donut-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 44px; align-items: center; gap: var(--kit-space-2); color: var(--kit-accent); }
  .kit-donut-swatch { width: 10px; height: 10px; border-radius: var(--kit-radius-pill); background: currentColor; }
  .kit-donut-name { color: var(--kit-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kit-donut-num { font-family: var(--kit-font-num); color: var(--kit-ink); text-align: right; }
  .kit-donut-pct { font-family: var(--kit-font-num); color: var(--kit-muted); text-align: right; }
  [data-tone='info'].kit-donut-seg { stroke: var(--kit-info); }
  [data-tone='ok'].kit-donut-seg { stroke: var(--kit-ok); }
  [data-tone='warn'].kit-donut-seg { stroke: var(--kit-warn); }
  [data-tone='bad'].kit-donut-seg { stroke: var(--kit-bad); }
  [data-tone='muted'].kit-donut-seg { stroke: var(--kit-muted); }
  [data-tone='faint'].kit-donut-seg { stroke: var(--kit-faint); }
  .kit-donut-legend [data-tone='info'] { color: var(--kit-info); }
  .kit-donut-legend [data-tone='ok'] { color: var(--kit-ok); }
  .kit-donut-legend [data-tone='warn'] { color: var(--kit-warn); }
  .kit-donut-legend [data-tone='bad'] { color: var(--kit-bad); }
  .kit-donut-legend [data-tone='muted'] { color: var(--kit-muted); }
  .kit-donut-legend [data-tone='faint'] { color: var(--kit-faint); }

  /* ---- bar list (top N) ---- */
  .kit-barlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kit-space-1); }
  .kit-barlist-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--kit-space-3); }
  .kit-barlist-track { position: relative; min-width: 0; padding: var(--kit-space-1) var(--kit-space-2); }
  .kit-barlist-bar { position: absolute; inset: 0 auto 0 0; border-radius: var(--kit-radius-sm); background: var(--kit-accent-soft); transition: width var(--kit-duration); }
  .kit-barlist-label { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kit-ink); }
  .kit-barlist-label a { color: inherit; }
  .kit-barlist-label a:hover { color: var(--kit-accent); }
  .kit-barlist-value { font-family: var(--kit-font-num); font-size: var(--kit-text-sm); color: var(--kit-ink-2); text-align: right; white-space: nowrap; }

  /* ---- callout (notice with title + actions) ---- */
  .kit-callout {
    display: flex; align-items: flex-start; gap: var(--kit-space-3);
    padding: var(--kit-space-4); border: var(--kit-border) solid var(--kit-line); border-left: 3px solid currentColor;
    border-radius: var(--kit-radius); background: var(--kit-surface); color: var(--kit-info);
  }
  .kit-callout > .kit-i { margin-top: 2px; }
  .kit-callout > .kit-btn { margin: calc(var(--kit-space-1) * -1) calc(var(--kit-space-2) * -1) 0 auto; color: var(--kit-muted); }
  .kit-callout-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--kit-space-1); color: var(--kit-ink); }
  .kit-callout-title { font-weight: var(--kit-weight-strong); }
  .kit-callout-text { color: var(--kit-ink-2); }
  .kit-callout-actions { margin-top: var(--kit-space-2); }
  [data-tone='ok'].kit-callout { color: var(--kit-ok); }
  [data-tone='warn'].kit-callout { color: var(--kit-warn); }
  [data-tone='bad'].kit-callout { color: var(--kit-bad); }
  /* chips: pill buttons for quick choices */
  .kit-choice[data-variant='chips'] .kit-choice-opts { flex-direction: row; flex-wrap: wrap; gap: var(--kit-space-2); }
  .kit-choice[data-variant='chips'] .kit-check {
    position: relative; min-height: var(--kit-control-h-sm); padding: 0 var(--kit-space-3);
    border: var(--kit-border) solid var(--kit-line-strong); border-radius: var(--kit-radius-pill);
    background: var(--kit-surface); color: var(--kit-ink-2); font-size: var(--kit-text-sm); font-weight: var(--kit-weight-medium);
  }
  .kit-choice[data-variant='chips'] .kit-check:hover { border-color: var(--kit-muted); color: var(--kit-ink); }
  .kit-choice[data-variant='chips'] .kit-check input,
  .kit-choice[data-variant='swatches'] .kit-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
  .kit-choice[data-variant='chips'] .kit-check:has(input:checked) { background: var(--kit-accent); border-color: var(--kit-accent); color: var(--kit-accent-ink); }
  .kit-choice[data-variant='chips'] .kit-check:has(input:focus-visible),
  .kit-choice[data-variant='swatches'] .kit-check:has(input:focus-visible) { outline: var(--kit-focus-width) solid var(--kit-focus); outline-offset: 2px; }
  .kit-choice[data-variant='chips'] .kit-choice-opt .kit-hint { display: none; }

  /* swatches: colour circles; the colour is data (option.color), passed as --_swatch */
  .kit-choice[data-variant='swatches'] .kit-choice-opts { flex-direction: row; flex-wrap: wrap; gap: var(--kit-space-2); }
  .kit-choice[data-variant='swatches'] .kit-check { position: relative; padding: var(--kit-space-1); border-radius: var(--kit-radius-pill); }
  .kit-swatch {
    display: block; width: 36px; height: 36px; border-radius: var(--kit-radius-pill);
    background: var(--_swatch, var(--kit-faint)); box-shadow: inset 0 0 0 var(--kit-border) var(--kit-line-strong);
  }
  .kit-choice[data-variant='swatches'] .kit-check:has(input:checked) .kit-swatch { box-shadow: 0 0 0 var(--kit-focus-width) var(--kit-surface), 0 0 0 calc(var(--kit-focus-width) * 2) var(--kit-ink); }

  /* ---- media grid (library / picker tiles) ---- */
  .kit-media { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--kit-space-3); }
  .kit-media-empty { margin: 0; color: var(--kit-muted); font-size: var(--kit-text-sm); }
  .kit-media-tile {
    position: relative; display: flex; flex-direction: column; gap: var(--kit-space-1); height: 100%; padding: var(--kit-space-1);
    border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius); background: var(--kit-surface);
    color: var(--kit-ink); text-decoration: none; cursor: default;
  }
  a.kit-media-tile, label.kit-media-tile { cursor: pointer; }
  a.kit-media-tile:hover, label.kit-media-tile:hover { border-color: var(--kit-line-strong); }
  a.kit-media-tile:focus-visible, .kit-media-tile:has(.kit-media-input:focus-visible) { outline: var(--kit-focus-width) solid var(--kit-focus); outline-offset: 2px; }
  .kit-media-tile:has(.kit-media-input:checked) { border-color: var(--kit-accent); box-shadow: 0 0 0 var(--kit-border) var(--kit-accent); }
  .kit-media-input { position: absolute; top: var(--kit-space-2); left: var(--kit-space-2); margin: 0; z-index: 1; accent-color: var(--kit-accent); }
  .kit-media-thumb { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--kit-radius-sm); background: var(--kit-sunken); }
  .kit-media-badge { position: absolute; top: var(--kit-space-1); left: var(--kit-space-1); padding: 0 var(--kit-space-1); border-radius: var(--kit-radius-sm); background: var(--kit-accent); color: var(--kit-accent-ink); font-size: var(--kit-text-xs); font-weight: var(--kit-weight-strong); }
  .kit-media-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .kit-media[data-fit='contain'] .kit-media-thumb img { object-fit: contain; }
  .kit-media-cap { display: flex; flex-direction: column; min-width: 0; padding: 0 var(--kit-space-1) var(--kit-space-1); }
  .kit-media-name { font-size: var(--kit-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kit-media-meta { font-size: var(--kit-text-xs); color: var(--kit-muted); }

  /* ---- image picker ---- */
  .kit-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
  .kit-picker > legend { padding: 0; }
  .kit-picker-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--kit-space-3); }
  .kit-picker-current {
    flex: none; width: 160px; aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center;
    border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius); background: var(--kit-sunken);
  }
  .kit-picker-img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .kit-picker-none { display: flex; flex-direction: column; align-items: center; gap: var(--kit-space-1); color: var(--kit-ink-2); font-size: var(--kit-text-xs); }
  .kit-picker-choose { flex: 1 1 260px; min-width: 0; }
  .kit-picker-choose > summary { list-style: none; width: max-content; }
  .kit-picker-choose > summary::-webkit-details-marker { display: none; }
  .kit-picker-body {
    display: flex; flex-direction: column; gap: var(--kit-space-3); margin-top: var(--kit-space-2); padding: var(--kit-space-3);
    max-height: 420px; overflow: auto; border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius); background: var(--kit-surface-2);
  }
  .kit-picker-upload { display: flex; flex-direction: column; gap: var(--kit-space-1); }
  .kit-field[data-invalid] .kit-picker-current { border-color: var(--kit-bad); }

  /* ---- image field (0.14.4): URL + upload + clear, preview under it ---- */
  .kit-imagefield-row { display: flex; gap: var(--kit-space-2); align-items: center; min-width: 0; }
  .kit-imagefield-row > .kit-input { flex: 1 1 auto; min-width: 0; }
  .kit-imagefield-row > .kit-btn { flex: none; cursor: pointer; font-weight: var(--kit-imagefield-btn-weight); }
  .kit-imagefield-row > .kit-btn[data-busy] { opacity: 0.6; pointer-events: none; }
  .kit-figure { margin: 0; display: flex; flex-direction: column; gap: var(--kit-space-1); }
  .kit-figure > img { display: block; width: 100%; max-height: var(--kit-figure-max-h); object-fit: contain; padding: var(--kit-figure-pad); background: var(--kit-figure-bg); border: var(--kit-border) solid var(--kit-figure-line); border-radius: var(--kit-radius); }
  .kit-imagefield-preview { height: var(--kit-imagefield-preview-h); width: auto; max-width: 100%; object-fit: contain; border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius); }

  /* ---- image gallery (0.14.4): photo tiles, the first one the main photo, an add tile ---- */
  .kit-gallery { display: flex; flex-direction: column; gap: var(--kit-space-2); min-width: 0; }
  .kit-gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kit-space-2); grid-template-columns: repeat(var(--kit-gallery-cols-sm), minmax(0, 1fr)); }
  @media (min-width: 640px) { .kit-gallery-grid { grid-template-columns: repeat(var(--kit-gallery-cols), minmax(0, 1fr)); } }
  .kit-gallery-grid > li + li { margin-top: 0; }
  .kit-gallery-tile, .kit-gallery-add { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--kit-radius); }
  .kit-gallery-tile { border: var(--kit-border) solid var(--kit-line); background: var(--kit-surface-2); }
  .kit-gallery-tile > img { width: 100%; height: 100%; object-fit: contain; padding: var(--kit-gallery-pad); }
  .kit-gallery-badge { display: none; position: absolute; top: var(--kit-space-2); left: var(--kit-space-2); padding: 2px var(--kit-space-2); border-radius: var(--kit-radius); background: var(--kit-accent); color: var(--kit-accent-ink); font-size: var(--kit-gallery-badge-size); font-weight: var(--kit-weight-strong); line-height: 1.2; }
  .kit-gallery-tile:first-child .kit-gallery-badge { display: block; }
  .kit-gallery-acts { position: absolute; top: var(--kit-space-2); right: var(--kit-space-2); display: flex; gap: var(--kit-space-1); }
  @media (hover: hover) and (min-width: 640px) { .kit-gallery-acts { opacity: 0; transition: opacity var(--kit-duration); } .kit-gallery-tile:hover .kit-gallery-acts, .kit-gallery-tile:focus-within .kit-gallery-acts { opacity: 1; } }
  .kit-gallery-tile:first-child [data-kit-gallery-main] { display: none; }
  .kit-gallery-act { display: grid; place-items: center; padding: var(--kit-space-1); border: 0; border-radius: var(--kit-radius-pill); background: var(--kit-surface); color: var(--kit-ink-2); box-shadow: var(--kit-shadow); cursor: pointer; }
  .kit-gallery-act:hover { color: var(--kit-accent); }
  .kit-gallery-act[data-tone='bad'] { color: var(--kit-faint); }
  .kit-gallery-act[data-tone='bad']:hover { color: var(--kit-bad); }
  .kit-gallery-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kit-space-1); border: var(--kit-border) dashed var(--kit-line-strong); color: var(--kit-muted); cursor: pointer; font-size: var(--kit-text-xs); font-weight: var(--kit-weight-medium); }
  .kit-gallery-add:hover { border-color: var(--kit-accent-line); background: var(--kit-accent-soft); color: var(--kit-accent); }
  .kit-gallery-add[data-busy] { opacity: 0.6; pointer-events: none; }

  /* ---- file chip (0.14.4) ---- */
  .kit-filechip { display: flex; align-items: center; gap: var(--kit-space-2); padding: var(--kit-space-2) var(--kit-space-3); border-radius: var(--kit-radius); background: var(--kit-sunken); color: var(--kit-ink-2); font-size: var(--kit-text); }
  .kit-filechip[data-tone='ok'] { background: var(--kit-filechip-ok-bg); color: var(--kit-filechip-ok-ink); }
  .kit-filechip > a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
  .kit-filechip-x { display: grid; place-items: center; padding: var(--kit-space-1); border-radius: var(--kit-radius); cursor: pointer; }
  .kit-filechip-x:hover { background: var(--kit-surface); }
  .kit-filechip:has(input:checked) { display: none; }
  .kit-filechip ~ [data-kit-filechip-alt] { display: none; }
  .kit-filechip:has(input:checked) ~ [data-kit-filechip-alt] { display: revert; }

  /* ---- markdown editor ---- */
  .kit-md { display: flex; flex-direction: column; border: var(--kit-border) solid var(--kit-line-strong); border-radius: var(--kit-radius); background: var(--kit-surface); }
  .kit-md:focus-within { border-color: var(--kit-accent); box-shadow: 0 0 0 var(--kit-focus-width) var(--kit-accent-soft); }
  .kit-md-bar { display: flex; flex-wrap: wrap; gap: var(--kit-space-1); padding: var(--kit-space-1); border-bottom: var(--kit-border) solid var(--kit-line); }
  .kit-md .kit-md-text { border: 0; border-radius: 0 0 var(--kit-radius) var(--kit-radius); box-shadow: none; outline: none; resize: vertical; font-family: var(--kit-font-mono); font-size: var(--kit-text-sm); }
  .kit-field[data-invalid] .kit-md { border-color: var(--kit-bad); }
  div.kit-code { display: grid; grid-template-columns: auto minmax(0, 1fr); border: var(--kit-border) solid var(--kit-line-strong); border-radius: var(--kit-radius); background: var(--kit-surface); overflow: hidden; }
  .kit-code:focus-within { border-color: var(--kit-accent); box-shadow: 0 0 0 var(--kit-focus-width) var(--kit-accent-soft); }
  .kit-code[data-readonly] { background: var(--kit-sunken); }
  .kit-code-lines { display: flex; flex-direction: column; overflow: hidden; padding: var(--kit-space-2) var(--kit-space-2) var(--kit-space-2) var(--kit-space-3); background: var(--kit-sunken); border-right: var(--kit-border) solid var(--kit-line); color: var(--kit-muted); font-family: var(--kit-font-mono); font-size: var(--kit-text-sm); line-height: 1.6; text-align: right; user-select: none; font-variant-numeric: tabular-nums; }
  .kit-code-lines > [data-error] { color: var(--kit-bad); font-weight: var(--kit-weight-strong); }
  .kit-code .kit-code-text { border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent; resize: vertical; font-family: var(--kit-font-mono); font-size: var(--kit-text-sm); line-height: 1.6; white-space: pre; overflow-x: auto; tab-size: 2; }
  .kit-code .kit-code-text.kit-input:focus { box-shadow: none; }
  .kit-field[data-invalid] .kit-code { border-color: var(--kit-bad); }

  /* ---- image editor: photo + tools left, tabs with sliders / crop / filters right; stacks on small screens ---- */
  .kit-imgedit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--kit-space-5); align-items: start; }
  @media (max-width: 860px) { .kit-imgedit { grid-template-columns: minmax(0, 1fr); } }
  .kit-imgedit-view { display: flex; flex-direction: column; gap: var(--kit-space-2); min-width: 0; }
  .kit-imgedit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-1); }
  .kit-imgedit-sep { width: var(--kit-border); height: var(--kit-control-h-sm); margin: 0 var(--kit-space-1); background: var(--kit-line); }
  .kit-imgedit-tools .kit-btn[aria-pressed='true'] { background: var(--kit-accent-soft); color: var(--kit-ink); }
  .kit-imgedit-stage {
    position: relative; display: grid; place-items: center; min-height: 240px; padding: var(--kit-space-3); overflow: hidden;
    border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius); background: var(--kit-sunken);
    touch-action: none; user-select: none;
  }
  .kit-imgedit-img, .kit-imgedit-canvas { display: block; max-width: 100%; max-height: min(65vh, 640px); width: auto; height: auto; }
  .kit-imgedit-img[hidden], .kit-imgedit-canvas[hidden], .kit-imgedit-crop[hidden] { display: none; }
  .kit-imgedit-crop {
    position: absolute; box-shadow: 0 0 0 9999px var(--kit-overlay); outline: var(--kit-border) solid var(--kit-surface); cursor: move;
  }
  .kit-imgedit-crop:focus-visible { outline: var(--kit-focus-width) solid var(--kit-focus); }
  .kit-imgedit-grid {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
    background:
      linear-gradient(to right, transparent calc(33.33% - 0.5px), var(--kit-surface) calc(33.33% - 0.5px), var(--kit-surface) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), var(--kit-surface) calc(66.66% - 0.5px), var(--kit-surface) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
      linear-gradient(to bottom, transparent calc(33.33% - 0.5px), var(--kit-surface) calc(33.33% - 0.5px), var(--kit-surface) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), var(--kit-surface) calc(66.66% - 0.5px), var(--kit-surface) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
  }
  .kit-imgedit-handle {
    position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--kit-accent);
    border-radius: var(--kit-radius-pill); background: var(--kit-surface); box-shadow: var(--kit-shadow);
  }
  @media (pointer: coarse) { .kit-imgedit-handle { width: 22px; height: 22px; margin: -11px 0 0 -11px; } }
  .kit-imgedit-handle[data-h='nw'] { left: 0; top: 0; cursor: nwse-resize; }
  .kit-imgedit-handle[data-h='n'] { left: 50%; top: 0; cursor: ns-resize; }
  .kit-imgedit-handle[data-h='ne'] { left: 100%; top: 0; cursor: nesw-resize; }
  .kit-imgedit-handle[data-h='e'] { left: 100%; top: 50%; cursor: ew-resize; }
  .kit-imgedit-handle[data-h='se'] { left: 100%; top: 100%; cursor: nwse-resize; }
  .kit-imgedit-handle[data-h='s'] { left: 50%; top: 100%; cursor: ns-resize; }
  .kit-imgedit-handle[data-h='sw'] { left: 0; top: 100%; cursor: nesw-resize; }
  .kit-imgedit-handle[data-h='w'] { left: 0; top: 50%; cursor: ew-resize; }
  .kit-imgedit-size { margin: 0; font-family: var(--kit-font-num); }
  .kit-imgedit-side { display: flex; flex-direction: column; gap: var(--kit-space-4); min-width: 0; }
  .kit-imgedit-tabs .kit-chip { display: inline-flex; align-items: center; gap: var(--kit-space-1); }
  .kit-imgedit-tabs .kit-chip[aria-selected='true'] { background: var(--kit-selected-bg); border-color: var(--kit-selected-line); color: var(--kit-selected-ink); font-weight: var(--kit-selected-weight); }
  .kit-imgedit-panel { display: flex; flex-direction: column; gap: var(--kit-space-4); }
  .kit-imgedit-panel[hidden] { display: none; }
  .kit-imgedit-group { display: flex; flex-direction: column; gap: var(--kit-space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
  .kit-imgedit-group > legend { padding: 0; margin-bottom: var(--kit-space-1); color: var(--kit-ink-2); font-size: var(--kit-text-xs); text-transform: uppercase; letter-spacing: var(--kit-tracking-caps); }
  .kit-imgedit-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: var(--kit-space-2); }
  .kit-imgedit-preset {
    display: flex; flex-direction: column; gap: var(--kit-space-1); padding: var(--kit-space-1); border: var(--kit-border) solid var(--kit-line);
    border-radius: var(--kit-radius); background: var(--kit-surface); color: var(--kit-ink-2); font: inherit; font-size: var(--kit-text-xs); cursor: pointer; text-align: center;
  }
  .kit-imgedit-preset:hover { border-color: var(--kit-line-strong); color: var(--kit-ink); }
  .kit-imgedit-preset:focus-visible { outline: var(--kit-focus-width) solid var(--kit-focus); outline-offset: 2px; }
  .kit-imgedit-preset[aria-pressed='true'] { border-color: var(--kit-accent); box-shadow: inset 0 0 0 1px var(--kit-accent); color: var(--kit-ink); font-weight: var(--kit-weight-medium); }
  .kit-imgedit-thumb { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--kit-radius-sm); background: var(--kit-sunken); object-fit: cover; }
}

/* data components: table extras (filters, pills, groups, selection, page sizes). Tokens only (test/css.test.ts). */
@layer kit.components {
  .kit-filter { position: relative; }
  .kit-filter > summary { list-style: none; }
  .kit-filter > summary::-webkit-details-marker { display: none; }
  .kit-filter[open] > summary:not([aria-current]) { border-color: var(--kit-line-strong); color: var(--kit-ink); }
  .kit-filter-pop {
    position: absolute; top: calc(100% + var(--kit-space-1)); left: 0; z-index: 20; min-width: 240px;
    display: flex; flex-direction: column; gap: var(--kit-space-3); padding: var(--kit-space-3);
    background: var(--kit-surface); border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius);
    box-shadow: var(--kit-shadow-lg);
  }
  .kit-filter-opts { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kit-space-2); max-height: 280px; overflow-y: auto; }
  .kit-filter-opts .kit-check { justify-content: flex-start; }
  .kit-filter-opts .kit-chip-count { margin-left: auto; }

  .kit-pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-2); padding: var(--kit-space-2) var(--kit-space-4); border-bottom: var(--kit-border) solid var(--kit-line); }
  .kit-pill {
    display: inline-flex; align-items: center; gap: var(--kit-space-1); padding: 2px var(--kit-space-1) 2px var(--kit-space-3);
    border-radius: var(--kit-radius-pill); background: var(--kit-accent-soft); color: var(--kit-accent);
    font-size: var(--kit-text-sm); font-weight: var(--kit-weight-medium);
  }
  .kit-pill:hover { color: var(--kit-accent-hover); text-decoration: none; }
  .kit-pills-clear { font-size: var(--kit-text-sm); color: var(--kit-muted); }

  .kit-table .kit-table-group th {
    padding: var(--kit-space-2) var(--kit-cell-x); background: var(--kit-sunken); color: var(--kit-ink-2);
    font-size: var(--kit-text-sm); font-weight: var(--kit-weight-strong); text-transform: none; letter-spacing: normal;
  }
  .kit-table input[type='checkbox'] { width: 16px; height: 16px; margin: 0; accent-color: var(--kit-accent); vertical-align: middle; }
  .kit-table tr:has(td input[type='checkbox']:checked) td { background: var(--kit-accent-soft); }
  .kit-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-2); padding: var(--kit-space-2) var(--kit-space-4); border-bottom: var(--kit-border) solid var(--kit-line); background: var(--kit-surface-2); }

  .kit-pager-sizes { display: flex; align-items: center; gap: var(--kit-space-1); }
  .kit-pager-sizes a, .kit-pager-sizes span { padding: 0 var(--kit-space-2); font-family: var(--kit-font-num); color: var(--kit-ink-2); }
  .kit-pager-sizes [aria-current='true'] { color: var(--kit-ink); font-weight: var(--kit-weight-strong); }
  @media (max-width: 640px) { .kit-table[data-stack] .kit-table-group th { display: block; } }

  /* ---- tiles (0.17.0): icon, title, short line; a grid of quick links ---- */
  .kit-tiles { display: grid; gap: var(--kit-stats-gap); align-content: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kit-tile-min)), 1fr)); }
  .kit-tile {
    display: flex; flex-direction: column; gap: var(--kit-space-1); min-width: 0; padding: var(--kit-tile-pad);
    background: var(--kit-tile-bg); border: var(--kit-border) solid var(--kit-tile-line); border-radius: var(--kit-tile-radius);
    color: var(--kit-ink); transition: background var(--kit-duration);
  }
  a.kit-tile:hover { background: var(--kit-tile-hover-bg); color: var(--kit-ink); text-decoration: none; }
  .kit-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kit-space-2); margin-bottom: var(--kit-space-3); }
  .kit-tile-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--kit-radius); background: var(--kit-tile-icon-bg); color: var(--kit-ink); }
  .kit-tile-arrow { margin-inline-start: auto; color: var(--kit-ink-2); }
  .kit-tile-title { font-weight: var(--kit-weight-strong); overflow-wrap: anywhere; }
  .kit-tile-text { font-size: var(--kit-text-sm); color: var(--kit-tile-text-ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* ---- list (mobile-friendly rows) ---- */
  .kit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  /* (0.18.1) a card list follows the card tokens (filled cards in kerf) */
  .kit-list[data-card] { background: var(--kit-card-bg); border: var(--kit-border) solid var(--kit-card-line); border-radius: var(--kit-radius-lg); box-shadow: var(--kit-card-shadow); }
  .kit-list[data-card] > .kit-list-item + .kit-list-item { border-top-color: var(--kit-table-row-line); }
  .kit-list-item + .kit-list-item { border-top: var(--kit-border) solid var(--kit-line); }
  .kit-list[data-variant='boxed'] { gap: var(--kit-space-3); }
  /* (0.14.4) the gap only: no base li + li margin on top of it */
  .kit-list[data-variant='boxed'] > .kit-list-item + .kit-list-item { margin-top: 0; }
  .kit-list[data-variant='boxed'] > .kit-list-item { border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius); }
  .kit-list[data-variant='boxed'] > .kit-list-item > .kit-list-row { padding-left: var(--kit-space-4); padding-right: var(--kit-space-4); border-radius: var(--kit-radius); }
  .kit-list-row { display: flex; align-items: center; gap: var(--kit-space-3); min-height: 60px; padding: var(--kit-list-row-y) var(--kit-space-4); color: var(--kit-ink); }
  .kit-list:not([data-card]) .kit-list-row { padding-left: 0; padding-right: 0; }
  .kit-list[data-size='sm'] .kit-list-row { min-height: 0; padding-top: var(--kit-list-sm-row-y); padding-bottom: var(--kit-list-sm-row-y); }
  .kit-list[data-size='sm'] .kit-list-title { font-weight: var(--kit-list-sm-title-weight); }
  .kit-list[data-size='sm'] .kit-list-end .kit-btn[data-icon-only] { width: var(--kit-list-sm-btn); height: var(--kit-list-sm-btn); }
  a.kit-list-row:hover { text-decoration: none; background: var(--kit-surface-2); color: var(--kit-ink); }
  a.kit-list-row:hover .kit-list-title { text-decoration: underline; text-underline-offset: 3px; }
  .kit-list-row > .kit-i:last-child { color: var(--kit-faint); }
  .kit-list-bar { align-self: stretch; width: 4px; flex: none; border-radius: var(--kit-radius-pill); background: var(--_item, var(--kit-accent)); }
  .kit-list-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--kit-radius); background: var(--kit-sunken); color: var(--kit-ink-2); }
  .kit-list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--kit-list-body-gap); }
  .kit-list[data-variant='boxed'] .kit-list-body { gap: var(--kit-list-boxed-body-gap); }
  .kit-list-title { font-size: var(--kit-list-title-size); font-weight: var(--kit-list-title-weight); overflow-wrap: anywhere; }
  .kit-list-icon[data-plain] { width: auto; height: auto; background: transparent; color: var(--kit-accent); }
  .kit-list-title[data-icon] { display: flex; align-items: center; gap: var(--kit-space-2); }
  .kit-list-title[data-icon] > .kit-i { color: var(--kit-accent); }
  .kit-list-meta { font-size: var(--kit-list-meta-size); color: var(--kit-muted); overflow-wrap: anywhere; }
  .kit-list-end { flex: none; display: flex; align-items: center; gap: var(--kit-space-2); font-size: var(--kit-list-end-size); font-weight: var(--kit-list-end-weight); }
  .kit-list[data-variant='boxed'] .kit-list-title { font-size: var(--kit-list-boxed-title-size); line-height: var(--kit-list-boxed-leading); }
  .kit-list[data-variant='boxed'] .kit-list-end > * { line-height: var(--kit-list-boxed-leading); }
  .kit-list[data-variant='boxed'] .kit-list-meta { font-size: var(--kit-list-boxed-meta-size); }
  .kit-list[data-variant='boxed'] .kit-list-end { font-size: var(--kit-list-boxed-end-size); font-weight: var(--kit-list-boxed-end-weight); }
  .kit-list-item[data-highlight] .kit-list-row { animation: kit-flash 2.4s ease-out 1; }
  @keyframes kit-flash { from { background: var(--kit-accent-soft); } to { background: transparent; } }
  @media (prefers-reduced-motion: reduce) { .kit-list-item[data-highlight] .kit-list-row { animation: none; background: var(--kit-accent-soft); } }

  /* ---- day strip ---- */
  .kit-daystrip { display: flex; gap: var(--kit-space-1); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--kit-space-1); }
  .kit-day {
    flex: none; width: 48px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--kit-space-2) 0;
    border-radius: var(--kit-radius); color: var(--kit-ink-2); scroll-snap-align: start;
  }
  .kit-day:hover { background: var(--kit-sunken); color: var(--kit-ink); text-decoration: none; }
  .kit-day-wd { font-size: var(--kit-text-xs); text-transform: uppercase; letter-spacing: var(--kit-tracking-caps); color: var(--kit-muted); }
  .kit-day:hover .kit-day-wd { color: var(--kit-ink-2); }
  .kit-day-n { font-family: var(--kit-font-num); font-size: var(--kit-text-lg); font-weight: var(--kit-weight-strong); font-variant-numeric: tabular-nums; }
  .kit-day[data-today] .kit-day-n { color: var(--kit-accent); }
  .kit-day[aria-current='date'] { background: var(--kit-ink); color: var(--kit-bg); }
  .kit-day[aria-current='date'] .kit-day-wd, .kit-day[aria-current='date'] .kit-day-n { color: var(--kit-bg); }
  .kit-day-marks { display: flex; gap: 2px; height: 6px; }
  .kit-day-mark { width: 6px; height: 6px; border-radius: var(--kit-radius-pill); background: var(--_item, var(--kit-accent)); }
  .kit-day-mark[data-tone='ok'] { background: var(--kit-ok); }
  .kit-day-mark[data-tone='warn'] { background: var(--kit-warn); }
  .kit-day-mark[data-tone='bad'] { background: var(--kit-bad); }
  .kit-day-mark[data-tone='info'] { background: var(--kit-info); }

  /* ---- status panel ---- */
  .kit-status {
    --_status-c: var(--kit-ink-2); --_status-bg: var(--kit-surface); --_status-ink: var(--kit-ink);
    display: flex; flex-direction: column; gap: var(--kit-space-2); padding: var(--kit-space-5) var(--kit-card-pad);
    border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius-lg);
    background: var(--_status-bg); color: var(--_status-ink); box-shadow: var(--kit-shadow);
  }
  .kit-status[data-tone='ok'] { --_status-c: var(--kit-ok); --_status-soft: var(--kit-ok-soft); }
  .kit-status[data-tone='warn'] { --_status-c: var(--kit-warn); --_status-soft: var(--kit-warn-soft); }
  .kit-status[data-tone='bad'] { --_status-c: var(--kit-bad); --_status-soft: var(--kit-bad-soft); }
  .kit-status[data-tone='info'] { --_status-c: var(--kit-info); --_status-soft: var(--kit-info-soft); }
  .kit-status[data-tone='accent'] { --_status-c: var(--kit-accent); --_status-soft: var(--kit-accent-soft); }
  .kit-status:not([data-fill]):not([data-tone='neutral']) { background: var(--_status-soft); border-color: transparent; }
  .kit-status[data-fill] { --_status-bg: var(--_status-c); --_status-ink: var(--kit-tone-ink); border-color: transparent; }
  .kit-status[data-fill][data-tone='accent'] { --_status-ink: var(--kit-accent-ink); }
  .kit-status[data-fill][data-tone='neutral'] { --_status-bg: var(--kit-ink); --_status-ink: var(--kit-bg); }
  .kit-status-top { display: flex; align-items: center; justify-content: space-between; gap: var(--kit-space-3); }
  .kit-status-live { display: inline-flex; align-items: center; gap: var(--kit-space-2); font-size: var(--kit-text-xs); font-weight: var(--kit-weight-strong); text-transform: uppercase; letter-spacing: var(--kit-tracking-caps); }
  .kit-status-live .kit-dot { background: currentColor; }
  .kit-status-aside { font-family: var(--kit-font-num); font-variant-numeric: tabular-nums; font-size: var(--kit-text-lg); }
  .kit-status-icon { color: var(--_status-c); }
  .kit-status[data-fill] .kit-status-icon { color: inherit; opacity: 0.85; }
  .kit-status-title { font-size: calc(var(--kit-h1) * 1.1); font-weight: var(--kit-weight-heading); line-height: 1.2; }
  .kit-status:not([data-fill]) .kit-status-title { color: var(--_status-c); }
  .kit-status[data-tone='neutral']:not([data-fill]) .kit-status-title { color: var(--kit-ink); }
  .kit-status-text { font-size: var(--kit-text-lg); opacity: 0.9; }
  .kit-status-actions { display: flex; flex-wrap: wrap; gap: var(--kit-space-2); margin-top: var(--kit-space-2); }
  /* buttons on a filled panel take its colours: primary = inverted, others = outline */
  .kit-status[data-fill] .kit-btn { background: transparent; border-color: currentColor; color: var(--_status-ink); }
  .kit-status[data-fill] .kit-btn:hover { background: var(--kit-overlay); }
  .kit-status[data-fill] .kit-btn[data-variant='primary'] { background: var(--_status-ink); border-color: var(--_status-ink); color: var(--_status-bg); }
  .kit-status[data-fill] .kit-btn[data-variant='primary']:hover { opacity: 0.9; background: var(--_status-ink); }

  /* ---- month calendar ---- */
  .kit-cal { display: flex; flex-direction: column; gap: var(--kit-space-2); min-width: 0; }
  .kit-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kit-space-2); }
  .kit-cal-title { font-size: var(--kit-h2); text-transform: capitalize; }
  .kit-cal-nav { display: flex; gap: var(--kit-space-1); }
  .kit-cal-nav [data-off] { opacity: 0.35; pointer-events: none; }
  .kit-cal-grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; }
  .kit-cal-grid th { padding: var(--kit-space-1) 0; font-size: var(--kit-text-xs); font-weight: var(--kit-weight-strong); color: var(--kit-muted); text-transform: uppercase; letter-spacing: var(--kit-tracking-caps); text-align: center; }
  .kit-cal-grid td { padding: 0; }
  .kit-cal-day {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 48px; border-radius: var(--kit-radius); color: var(--kit-ink);
  }
  .kit-cal-day:hover { background: var(--kit-sunken); color: var(--kit-ink); text-decoration: none; }
  .kit-cal-n { font-family: var(--kit-font-num); font-size: var(--kit-text); font-weight: var(--kit-weight-medium); font-variant-numeric: tabular-nums; line-height: 1.2; }
  .kit-cal-day[data-outside] { color: var(--kit-muted); }
  .kit-cal-day[data-today] .kit-cal-n { color: var(--kit-accent); font-weight: var(--kit-weight-heading); }
  .kit-cal-day[data-today]:not([aria-current]) { box-shadow: inset 0 0 0 var(--kit-border) var(--kit-accent-line); }
  .kit-cal-day[aria-current='date'] { background: var(--kit-ink); color: var(--kit-bg); }
  .kit-cal-day[aria-current='date'] .kit-cal-n { color: var(--kit-bg); }
  .kit-cal-day .kit-day-marks { min-height: 6px; }
  @media (min-width: 640px) { .kit-cal-day { min-height: 64px; } }
}

/* content components (0.15.0): syntax colours, Markdown, DiffView, ToolCall, TaskList, CommandPicker. Tokens only (test/css.test.ts). */
@layer kit.components {
  /* ---- syntax tokens (highlight()) ---- */
  .kit-tok-keyword { color: var(--kit-code-keyword); }
  .kit-tok-string { color: var(--kit-code-string); }
  .kit-tok-comment { color: var(--kit-code-comment); font-style: italic; }
  .kit-tok-number { color: var(--kit-code-number); }
  .kit-tok-function { color: var(--kit-code-function); }
  .kit-tok-type { color: var(--kit-code-type); }
  .kit-tok-attr { color: var(--kit-code-attr); }
  .kit-tok-punct { color: var(--kit-code-punct); }
  .kit-tok-meta { color: var(--kit-code-meta); }
  .kit-tok-add { color: var(--kit-diff-add-ink); background: var(--kit-diff-add-bg); }
  .kit-tok-del { color: var(--kit-diff-del-ink); background: var(--kit-diff-del-bg); }

  /* ---- markdown ---- */
  .kit-prose { display: flex; flex-direction: column; gap: var(--kit-md-gap); min-width: 0; overflow-wrap: anywhere; line-height: var(--kit-leading); }
  .kit-prose :where(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, hr, .kit-pre-wrap, .kit-pre, .kit-prose-table) { margin: 0; }
  .kit-prose :where(h1, h2, h3, h4, h5, h6) { font-family: var(--kit-font-display); font-weight: var(--kit-weight-heading); letter-spacing: var(--kit-tracking-heading); line-height: 1.3; color: var(--kit-ink); }
  .kit-prose h1 { font-size: var(--kit-md-h1); }
  .kit-prose h2 { font-size: var(--kit-md-h2); }
  .kit-prose h3 { font-size: var(--kit-md-h3); }
  .kit-prose h4 { font-size: var(--kit-text); }
  .kit-prose :where(h5, h6) { font-size: var(--kit-text-sm); }
  .kit-prose h6 { color: var(--kit-muted); }
  .kit-prose :where(h1, h2, h3, h4, h5, h6):not(:first-child) { margin-top: var(--kit-space-1); }
  .kit-prose :where(ul, ol) { padding-left: var(--kit-space-6); display: flex; flex-direction: column; gap: var(--kit-space-1); }
  .kit-prose li > :where(ul, ol) { margin-top: var(--kit-space-1); }
  .kit-prose li:has(> p) { display: flex; flex-direction: column; gap: var(--kit-space-2); }
  .kit-prose li::marker { color: var(--kit-muted); }
  .kit-prose li > .kit-pre-wrap, .kit-prose li > .kit-pre { margin-top: var(--kit-space-1); }
  .kit-prose .kit-prose-tasks { list-style: none; padding-left: var(--kit-space-1); }
  .kit-prose-task { position: relative; padding-left: calc(var(--kit-space-5) + var(--kit-space-1)); }
  .kit-prose-box { position: absolute; left: 0; top: 0.3em; width: 15px; height: 15px; display: grid; place-items: center; border: var(--kit-border) solid var(--kit-line-strong); border-radius: var(--kit-radius-sm); background: var(--kit-surface); }
  .kit-prose-task[data-checked] > .kit-prose-box { background: var(--kit-accent); border-color: var(--kit-accent); color: var(--kit-accent-ink); }
  .kit-prose-task[data-checked] { color: var(--kit-muted); }
  .kit-prose blockquote { padding: var(--kit-space-1) 0 var(--kit-space-1) var(--kit-space-3); border-left: 3px solid var(--kit-line-strong); color: var(--kit-ink-2); display: flex; flex-direction: column; gap: var(--kit-md-gap); }
  .kit-prose a:not([class]) { text-decoration: underline; text-decoration-color: var(--kit-accent-line); text-underline-offset: 3px; }
  .kit-prose a:not([class]):hover { text-decoration-color: currentColor; }
  .kit-prose hr { border: 0; border-top: var(--kit-border) solid var(--kit-line); }
  .kit-prose a > .kit-i { margin-right: var(--kit-space-1); }
  .kit-prose strong { font-weight: var(--kit-weight-strong); }
  .kit-prose del { color: var(--kit-muted); }
  .kit-prose .kit-pre { padding: var(--kit-space-3); }
  .kit-prose .kit-pre-wrap > .kit-pre { padding-right: calc(var(--kit-control-h-sm) + var(--kit-space-4)); }
  .kit-prose-table { overflow-x: auto; max-width: 100%; border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius); }
  .kit-prose-table table { width: max-content; min-width: 100%; font-size: var(--kit-text-sm); font-variant-numeric: tabular-nums; }
  .kit-prose-table :where(th, td) { padding: var(--kit-space-1) var(--kit-space-3); border-bottom: var(--kit-border) solid var(--kit-line); text-align: left; vertical-align: top; overflow-wrap: normal; max-width: 40ch; }
  .kit-prose-table th { background: var(--kit-surface-2); font-weight: var(--kit-weight-strong); white-space: nowrap; }
  .kit-prose-table tr:last-child td { border-bottom: 0; }
  .kit-prose-table [data-align='right'] { text-align: right; }
  .kit-prose-table [data-align='center'] { text-align: center; }

  /* ---- code block with a language ---- */
  .kit-pre[data-lang] { color: var(--kit-ink); }

  /* ---- diff view ---- */
  .kit-diff { display: flex; flex-direction: column; gap: var(--kit-space-3); min-width: 0; }
  .kit-diff-file { border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius); background: var(--kit-surface); overflow: hidden; min-width: 0; }
  .kit-diff-h { display: flex; align-items: baseline; gap: var(--kit-space-3); padding: var(--kit-space-2) var(--kit-space-3); background: var(--kit-surface-2); border-bottom: var(--kit-border) solid var(--kit-line); font-family: var(--kit-font-mono); font-size: var(--kit-text-sm); }
  .kit-diff-path { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: var(--kit-weight-medium); }
  .kit-diff-old { color: var(--kit-muted); font-weight: var(--kit-weight-medium); }
  .kit-diff-stat { display: inline-flex; gap: var(--kit-space-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .kit-diff-plus { color: var(--kit-diff-add-ink); }
  .kit-diff-minus { color: var(--kit-diff-del-ink); }
  .kit-diff-scroll { overflow-x: auto; position: relative; }
  .kit-diff-lines { width: max-content; min-width: 100%; font-family: var(--kit-font-mono); font-size: var(--kit-text-sm); line-height: 1.6; padding: var(--kit-space-1) 0; }
  .kit-diff-line { display: grid; grid-template-columns: calc(var(--_nw, 3ch) + var(--kit-space-3)) calc(var(--_nw, 3ch) + var(--kit-space-3)) 2ch auto; background: var(--kit-surface); }
  .kit-diff-line[data-type='add'] { background: var(--kit-diff-add-bg); }
  .kit-diff-line[data-type='del'] { background: var(--kit-diff-del-bg); }
  .kit-diff-n { position: sticky; padding: 0 var(--kit-space-2) 0 var(--kit-space-1); text-align: right; color: var(--kit-muted); background: inherit; user-select: none; font-variant-numeric: tabular-nums; }
  .kit-diff-n:first-child { left: 0; }
  .kit-diff-n + .kit-diff-n { left: calc(var(--_nw, 3ch) + var(--kit-space-3)); border-right: var(--kit-border) solid var(--kit-line); }
  .kit-diff-sign { padding-left: var(--kit-space-1); color: var(--kit-muted); user-select: none; }
  .kit-diff-line[data-type='add'] .kit-diff-sign, .kit-diff-line[data-type='add'] .kit-diff-n { color: var(--kit-diff-add-ink); }
  .kit-diff-line[data-type='del'] .kit-diff-sign, .kit-diff-line[data-type='del'] .kit-diff-n { color: var(--kit-diff-del-ink); }
  .kit-diff-code { white-space: pre; padding-right: var(--kit-space-4); color: var(--kit-ink); }
  .kit-diff-hunk { padding: var(--kit-space-1) var(--kit-space-3); background: var(--kit-sunken); color: var(--kit-ink-2); white-space: pre; position: sticky; left: 0; width: max-content; min-width: 100%; }
  .kit-diff-hunk:not(:first-child) { margin-top: var(--kit-space-1); }
  .kit-diff-fold > summary { list-style: none; cursor: pointer; padding: var(--kit-space-1) var(--kit-space-3); background: var(--kit-sunken); color: var(--kit-ink-2); font-family: var(--kit-font-sans); font-size: var(--kit-text-xs); position: sticky; left: 0; width: max-content; }
  .kit-diff-fold > summary::-webkit-details-marker { display: none; }
  .kit-diff-fold > summary:hover { color: var(--kit-ink); }
  .kit-diff-fold > summary:focus-visible { outline-offset: -2px; }
  .kit-diff-fold[open] > summary { display: none; }
  .kit-diff-fold { background: var(--kit-sunken); }
  .kit-diff-empty { padding: var(--kit-space-3); color: var(--kit-muted); font-family: var(--kit-font-sans); }

  /* ---- tool call (one action of an agent or automation) ---- */
  .kit-tool { --_c: var(--kit-faint); min-width: 0; font-size: var(--kit-text-sm); }
  .kit-tool[data-status='running'] { --_c: var(--kit-info); }
  .kit-tool[data-status='ok'] { --_c: var(--kit-ok); }
  .kit-tool[data-status='error'] { --_c: var(--kit-bad); }
  .kit-tool[data-status='denied'] { --_c: var(--kit-warn); }
  .kit-tool-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--kit-space-2); padding: 2px var(--kit-space-1); border-radius: var(--kit-radius-sm); }
  summary.kit-tool-h { list-style: none; cursor: pointer; }
  summary.kit-tool-h::-webkit-details-marker { display: none; }
  summary.kit-tool-h:hover { background: var(--kit-surface-2); }
  summary.kit-tool-h:focus-visible { outline-offset: 0; }
  .kit-tool-dot { width: 8px; height: 8px; border-radius: var(--kit-radius-pill); background: var(--_c); }
  .kit-tool[data-status='denied'] > * > .kit-tool-h > .kit-tool-dot, .kit-tool[data-status='denied'] > .kit-tool-h > .kit-tool-dot { background: transparent; border: 2px solid var(--_c); }
  .kit-tool[data-status='running'] > * > .kit-tool-h > .kit-tool-dot, .kit-tool[data-status='running'] > .kit-tool-h > .kit-tool-dot { animation: kit-pulse 1.2s ease-in-out infinite; }
  .kit-tool-call { display: flex; min-width: 0; white-space: nowrap; font-family: var(--kit-font-mono); color: var(--kit-ink); }
  .kit-tool-name { font-weight: var(--kit-weight-strong); flex: none; }
  .kit-tool-p { color: var(--kit-muted); flex: none; }
  .kit-tool-arg { overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--kit-ink-2); }
  .kit-tool-meta { grid-column: 3; color: var(--kit-muted); font-family: var(--kit-font-num); font-size: var(--kit-text-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .kit-tool-chev { grid-column: 4; display: inline-flex; color: var(--kit-muted); }
  .kit-tool-chev .kit-i { transition: transform var(--kit-duration); }
  .kit-tool-d[open] > summary .kit-tool-chev .kit-i { transform: rotate(180deg); }
  .kit-tool-sum { grid-column: 2 / -1; color: var(--kit-muted); font-family: var(--kit-font-mono); font-size: var(--kit-text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kit-tool[data-status='error'] .kit-tool-h > .kit-tool-sum { color: var(--kit-bad); }
  .kit-tool-b { margin: var(--kit-space-1) 0 var(--kit-space-2) calc(8px + var(--kit-space-2) + var(--kit-space-1)); display: flex; flex-direction: column; gap: var(--kit-space-2); min-width: 0; }
  .kit-tool-b > .kit-pre, .kit-tool-b > .kit-pre-wrap > .kit-pre { padding: var(--kit-space-2) var(--kit-space-3); font-size: var(--kit-text-xs); max-height: 320px; overflow: auto; }
  .kit-tool-nested { margin-left: calc(3px + var(--kit-space-1)); padding-left: var(--kit-space-3); border-left: var(--kit-border) solid var(--kit-line); display: flex; flex-direction: column; }
  .kit-tool + .kit-tool { margin-top: 2px; }

  /* ---- task list ---- */
  .kit-tasks { display: flex; flex-direction: column; gap: var(--kit-space-1); font-size: var(--kit-text-sm); min-width: 0; }
  .kit-tasks[data-sticky] { position: sticky; top: 0; z-index: 2; background: var(--kit-surface); padding: var(--kit-space-2) var(--kit-space-3); border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius); box-shadow: var(--kit-shadow); }
  .kit-tasks-h { display: flex; align-items: baseline; gap: var(--kit-space-2); }
  .kit-tasks-title { flex: 1; min-width: 0; font-weight: var(--kit-weight-strong); }
  .kit-tasks-count { margin-left: auto; color: var(--kit-muted); font-family: var(--kit-font-num); font-size: var(--kit-text-xs); font-variant-numeric: tabular-nums; }
  .kit-tasks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .kit-task { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: var(--kit-space-2); align-items: start; color: var(--kit-ink); }
  .kit-task-i { width: 14px; height: 14px; margin-top: 0.2em; display: grid; place-items: center; border: var(--kit-border) solid var(--kit-line-strong); border-radius: var(--kit-radius-sm); }
  .kit-task[data-status='completed'] { color: var(--kit-muted); }
  .kit-task[data-status='completed'] .kit-task-t { text-decoration: line-through; text-decoration-color: var(--kit-faint); }
  .kit-task[data-status='completed'] .kit-task-i { background: var(--kit-ok-soft); border-color: var(--kit-ok); color: var(--kit-ok); }
  .kit-task[data-status='in_progress'] .kit-task-t { font-weight: var(--kit-weight-strong); }
  .kit-task[data-status='in_progress'] .kit-task-i { border: 2px solid var(--kit-accent); border-top-color: transparent; border-radius: var(--kit-radius-pill); animation: kit-spin 0.9s linear infinite; }

  /* ---- command picker ---- */
  .kit-cmd { border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius); background: var(--kit-surface); box-shadow: var(--kit-shadow-lg); overflow: hidden; }
  .kit-cmd-list { max-height: min(50vh, 360px); overflow-y: auto; padding: var(--kit-space-1); overscroll-behavior: contain; }
  .kit-cmd-list:empty { display: none; }
  .kit-cmd-group { padding: var(--kit-space-2) var(--kit-space-2) var(--kit-space-1); color: var(--kit-muted); font-size: var(--kit-text-xs); font-weight: var(--kit-weight-strong); text-transform: uppercase; letter-spacing: var(--kit-tracking-caps); }
  .kit-cmd-item { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'icon label' 'icon desc'; column-gap: var(--kit-space-2); align-items: center; min-height: 44px; padding: var(--kit-space-1) var(--kit-space-2); border-radius: var(--kit-radius-sm); cursor: pointer; }
  .kit-cmd-item > .kit-i { grid-area: icon; color: var(--kit-muted); }
  .kit-cmd-label { grid-area: label; font-family: var(--kit-font-mono); font-weight: var(--kit-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kit-cmd-desc { grid-area: desc; color: var(--kit-muted); font-size: var(--kit-text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kit-cmd-item[aria-selected='true'] { background: var(--kit-accent-soft); }
  .kit-cmd-item[aria-selected='true'] > .kit-cmd-label { color: var(--kit-accent); }
  .kit-cmd-item[aria-selected='true'] > .kit-cmd-desc, .kit-cmd-item[aria-selected='true'] > .kit-i { color: var(--kit-ink-2); }
  .kit-cmd-item:hover { background: var(--kit-surface-2); }
  .kit-cmd-item[aria-selected='true']:hover { background: var(--kit-accent-soft); }
  .kit-cmd-empty { padding: var(--kit-space-3); color: var(--kit-muted); font-size: var(--kit-text-sm); }
  @media (min-width: 640px) {
    .kit-cmd-item { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: 'icon label desc'; min-height: 36px; }
    .kit-cmd-desc { font-size: var(--kit-text-sm); }
  }

  @media (prefers-reduced-motion: reduce) {
    .kit-tool[data-status='running'] > * > .kit-tool-h > .kit-tool-dot, .kit-tool[data-status='running'] > .kit-tool-h > .kit-tool-dot { animation: none; }
    .kit-task[data-status='in_progress'] .kit-task-i { animation: none; border-top-color: var(--kit-accent); background: linear-gradient(90deg, var(--kit-accent) 50%, transparent 50%); }
    .kit-tool-chev .kit-i { transition: none; }
  }
}

/* chat components (0.16.0): ChatView, ChatMessage, ChatComposer. Tokens only (test/css.test.ts). */
@layer kit.components {
  /* ---- chat view: a whole chat screen on the document scroll (native momentum, address bar, keyboard) ---- */
  .kit-chat { display: flex; flex-direction: column; min-width: 0; }
  .kit-chat:not([data-inline]) { min-height: calc(100vh - var(--_top, 0px)); min-height: calc(100dvh - var(--_top, 0px)); }
  .kit-chat-head { position: sticky; top: 0; z-index: 6; background: var(--kit-chat-head-bg); border-bottom: var(--kit-border) solid var(--kit-line); }
  .kit-chat-bar, .kit-chat-top, .kit-chat-log, .kit-chat-dock-in { width: 100%; max-width: var(--kit-chat-max); margin: 0 auto; padding-left: var(--kit-space-3); padding-right: var(--kit-space-3); }
  .kit-chat-bar { display: flex; align-items: center; gap: var(--kit-space-2); min-height: var(--kit-topbar-h); padding-top: var(--kit-space-2); padding-bottom: var(--kit-space-2); }
  .kit-chat-bar > .kit-btn:first-child { margin-left: calc(-1 * var(--kit-space-2)); flex: none; }
  .kit-chat-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .kit-chat-title-row { display: flex; align-items: center; gap: var(--kit-space-2); min-width: 0; }
  .kit-chat-title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--kit-text-lg); font-weight: var(--kit-weight-strong); line-height: 1.3; letter-spacing: var(--kit-tracking-heading); }
  .kit-chat-status { display: inline-flex; flex: none; }
  .kit-chat-sub { display: flex; align-items: center; gap: var(--kit-space-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--kit-text-xs); color: var(--kit-muted); }
  .kit-chat-sub .kit-spinner { flex: none; }
  .kit-chat-actions { display: flex; align-items: center; gap: var(--kit-space-1); flex: none; }
  .kit-chat-top { padding-bottom: var(--kit-space-2); }
  .kit-chat-log { flex: 1 0 auto; display: flex; flex-direction: column; padding-top: var(--kit-space-4); padding-bottom: var(--kit-space-4); }
  .kit-chat[data-anchor='bottom'] > .kit-chat-log { justify-content: flex-end; }
  .kit-chat-log > * { margin-top: 0; margin-bottom: 0; }
  .kit-chat-log > * + * { margin-top: var(--kit-chat-gap); }
  .kit-chat-dock { position: sticky; bottom: 0; z-index: 6; background: var(--kit-chat-dock-bg); border-top: var(--kit-border) solid var(--kit-line); padding: var(--kit-space-2) 0; }
  .kit-chat-dock[data-empty] { background: transparent; border-top: 0; padding: 0; }
  .kit-chat-dock-in { position: relative; }
  .kit-chat[data-inline] > :is(.kit-chat-head, .kit-chat-dock) { position: relative; }
  /* jump to the latest message: floats just above the dock at the right */
  .kit-chat-jump {
    position: absolute; right: var(--kit-space-3); bottom: calc(100% + var(--kit-space-2) + var(--kit-space-3));
    display: grid; place-items: center; width: var(--kit-control-h); height: var(--kit-control-h); padding: 0;
    border: var(--kit-border) solid var(--kit-line); border-radius: var(--kit-radius-pill);
    background: var(--kit-surface); color: var(--kit-ink-2); box-shadow: var(--kit-shadow-lg); cursor: pointer;
    animation: kit-chat-pop var(--kit-duration) ease-out;
  }
  .kit-chat-dock[data-empty] .kit-chat-jump { bottom: calc(100% + var(--kit-space-3)); }
  .kit-chat-jump:hover { color: var(--kit-ink); background: var(--kit-surface-2); }
  .kit-chat-jump[data-new]::after {
    content: ''; position: absolute; top: 0; right: 0; width: 10px; height: 10px;
    border-radius: var(--kit-radius-pill); background: var(--kit-accent); box-shadow: 0 0 0 var(--kit-focus-width) var(--kit-surface);
  }
  @keyframes kit-chat-pop { from { opacity: 0; transform: translateY(6px) scale(0.9); } }

  /* inside AppShell: the header and dock sit flush with the content edges */
  .kit-shell .kit-content:has(> .kit-chat), .kit-shell[data-layout] .kit-content:has(> .kit-chat) { padding-top: 0; padding-bottom: 0; }
  @media (min-width: 861px) {
    .kit-shell[data-layout='top'] .kit-content > .kit-chat > .kit-chat-head { top: calc(var(--kit-topbar-h) + var(--kit-border)); }
  }
  @media (max-width: 860px) {
    /* full: the chat is the whole screen (no shell top bar or tab bar); safe areas on the header and the dock */
    .kit-shell:has(.kit-content > .kit-chat[data-full]) :is(.kit-mtop, .kit-tabbar, .kit-topbar),
    .kit-shell[data-layout='top']:has(> .kit-content > .kit-chat[data-full]) > .kit-header { display: none; }
    .kit-shell .kit-content:has(> .kit-chat[data-full]), .kit-shell[data-layout] .kit-content:has(> .kit-chat[data-full]) { padding: 0; }
    .kit-chat[data-full] > .kit-chat-head { padding-top: env(safe-area-inset-top); }
    .kit-chat[data-full] > .kit-chat-dock:not([data-empty]) { padding-bottom: calc(var(--kit-space-2) + env(safe-area-inset-bottom)); }
    .kit-chat[data-full][data-kb] > .kit-chat-dock:not([data-empty]) { padding-bottom: var(--kit-space-2); }
    .kit-chat[data-full] { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    /* not full: the shell's bars stay; the header scrolls away, the dock sits above the tab bar */
    .kit-shell .kit-chat:not([data-full]) > .kit-chat-head { position: relative; }
    .kit-shell:has(> .kit-tabbar) .kit-chat:not([data-full]):not([data-inline]) > .kit-chat-dock { bottom: calc(60px + env(safe-area-inset-bottom)); }
  }

  /* ---- message ---- */
  .kit-msg { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; animation: kit-msg-in var(--kit-duration) ease-out; }
  .kit-msg[data-from='me'] { align-items: flex-end; }
  .kit-msg[data-from='system'] { align-items: center; }
  .kit-msg + .kit-msg { margin-top: var(--kit-chat-gap); }
  .kit-msg[data-from='me']:not([data-plain]) + .kit-msg[data-from='me']:not([data-plain]),
  .kit-msg[data-from='them']:not([data-plain]) + .kit-msg[data-from='them']:not([data-plain]) { margin-top: var(--kit-chat-gap-run); }
  @keyframes kit-msg-in { from { opacity: 0; transform: translateY(6px); } }
  .kit-msg-name { margin-bottom: 2px; padding: 0 var(--kit-chat-bubble-x); font-size: var(--kit-text-xs); font-weight: var(--kit-weight-strong); color: var(--kit-muted); }
  .kit-msg-bubble {
    display: flow-root; min-width: 0; max-width: var(--kit-chat-bubble-max); padding: var(--kit-chat-bubble-y) var(--kit-chat-bubble-x);
    border: var(--kit-border) solid var(--kit-chat-them-line); border-radius: var(--kit-chat-radius);
    background: var(--kit-chat-them-bg); color: var(--kit-chat-them-ink);
    font-size: var(--kit-chat-text); line-height: var(--kit-leading); overflow-wrap: anywhere;
  }
  .kit-msg-bubble :where(img, video) { max-width: 100%; height: auto; }
  .kit-msg-bubble :where(.kit-pre, .kit-prose-table, .kit-diff) { max-width: 100%; }
  .kit-msg-bubble > .kit-prose + .kit-msg-foot { margin-top: var(--kit-space-1); }
  .kit-msg[data-from='me'] > .kit-msg-bubble { background: var(--kit-chat-me-bg); color: var(--kit-chat-me-ink); border-color: transparent; }
  /* links in an own bubble: the bubble's text colour, underlined (the accent can be too close to --kit-chat-me-bg) */
  .kit-msg[data-from='me'] > .kit-msg-bubble a:not([class]) { color: var(--kit-chat-me-ink); text-decoration: underline; text-underline-offset: 3px; }
  .kit-msg[data-from='me'][data-tail]:not([data-plain]) > .kit-msg-bubble { border-top-right-radius: var(--kit-chat-tail-radius); }
  .kit-msg[data-from='them'][data-tail]:not([data-plain]) > .kit-msg-bubble { border-top-left-radius: var(--kit-chat-tail-radius); }
  .kit-msg[data-plain] > .kit-msg-bubble { width: 100%; max-width: 100%; padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; white-space: normal; }
  .kit-msg[data-from='system'] > .kit-msg-bubble {
    max-width: 100%; padding: 2px var(--kit-space-3); border: 0; border-radius: var(--kit-radius-pill);
    background: var(--kit-chat-system-bg); color: var(--kit-chat-system-ink); font-size: var(--kit-text-xs); text-align: center;
  }
  .kit-msg[data-tone='info'] > .kit-msg-bubble { background: var(--kit-info-soft); color: var(--kit-info); }
  .kit-msg[data-tone='ok'] > .kit-msg-bubble { background: var(--kit-ok-soft); color: var(--kit-ok); }
  .kit-msg[data-tone='warn'] > .kit-msg-bubble { background: var(--kit-warn-soft); color: var(--kit-warn); }
  .kit-msg[data-tone='bad'] > .kit-msg-bubble { background: var(--kit-bad-soft); color: var(--kit-bad); }
  /* time + meta: floats bottom-right, on the last line when it fits (WhatsApp) */
  .kit-msg-foot {
    float: right; position: relative; top: 0.5em; display: inline-flex; align-items: baseline; gap: var(--kit-space-1);
    margin-left: var(--kit-space-3); font-size: var(--kit-chat-time-size); line-height: 1; color: var(--kit-chat-meta);
    white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .kit-msg[data-from='me'] .kit-msg-foot { color: var(--kit-chat-me-meta); }
  .kit-msg[data-plain] .kit-msg-foot { top: 0; margin-top: var(--kit-space-1); }
  .kit-msg[data-from='system'] .kit-msg-foot { float: none; top: 0; margin-left: var(--kit-space-2); color: inherit; }
  @media (min-width: 640px) { .kit-msg-bubble { max-width: var(--kit-chat-bubble-max-wide); } }

  /* ---- composer ---- */
  .kit-composer { display: flex; flex-direction: column; gap: var(--kit-space-2); min-width: 0; }
  .kit-composer-row { display: flex; align-items: flex-end; gap: var(--kit-space-2); min-width: 0; }
  .kit-composer-box {
    flex: 1; min-width: 0; display: flex; align-items: flex-end; padding: 0 var(--kit-space-1);
    border: var(--kit-border) solid var(--kit-chat-input-line); border-radius: calc(var(--kit-btn-h) / 2 + var(--kit-border));
    background: var(--kit-chat-input-bg); transition: border-color var(--kit-duration), box-shadow var(--kit-duration);
  }
  .kit-composer-box:focus-within { border-color: var(--kit-accent); box-shadow: 0 0 0 var(--kit-focus-width) var(--kit-accent-soft); }
  .kit-composer-start, .kit-composer-end { display: flex; align-items: center; flex: none; min-height: var(--kit-btn-h); }
  .kit-composer-box .kit-btn[data-variant='ghost'] { color: var(--kit-muted); border-radius: var(--kit-radius-pill); }
  .kit-composer-box .kit-btn[data-variant='ghost']:hover { color: var(--kit-ink); }
  .kit-composer-input {
    flex: 1; min-width: 0; margin: 0; border: 0; outline: 0; background: transparent; color: var(--kit-ink); resize: none;
    font-size: var(--kit-chat-input-size); line-height: 1.4; field-sizing: content;
    padding: calc((var(--kit-btn-h) - 1.4em) / 2) var(--kit-space-2);
    min-height: var(--kit-btn-h); max-height: calc(var(--_rows, 8) * 1.4em + var(--kit-btn-h) - 1.4em); overflow-y: auto;
  }
  .kit-composer-input::placeholder { color: var(--kit-faint); }
  .kit-composer-input:focus-visible { outline: 0; }
  .kit-composer-action { display: flex; align-items: center; flex: none; margin-bottom: var(--kit-border); }
  .kit-composer-above, .kit-composer-below { min-width: 0; }
  .kit-composer-below { padding: 0 var(--kit-space-3); font-size: var(--kit-text-xs); color: var(--kit-muted); }
  .kit-composer[data-disabled] .kit-composer-box { background: var(--kit-sunken); opacity: 0.7; }

  @media (prefers-reduced-motion: reduce) {
    .kit-msg, .kit-chat-jump { animation: none; }
    .kit-composer-box { transition: none; }
  }
}

/* kit theme: kerf-cloud (mode: light)
 * Only --kit-* tokens; see @kerf/kit/tokens. Made with the theme editor.
 * Light and calm: a soft grey page, sage cards, near-black actions and a lime highlight; Inter; the dark icon rail.
 * settings: accent=#17181c neutral=cool font=inter numbers=body density=normal corners=rounder depth=flat status=crisp mode=light fixContrast=true sidebar=plain chips=filled tableHead=plain danger=outline brand=plain tableLinks=ink auth=plain
 * fonts: import @kerf/kit/inter.css before kit.css */
:root {
  color-scheme: light;
  --kit-bg: #f3f4f2;
  --kit-surface: #ffffff;
  --kit-surface-2: #f7f8f6;
  --kit-sunken: #e4e9e5;
  --kit-ink: #17181c;
  --kit-ink-2: #45484d;
  --kit-muted: #676b70;
  --kit-faint: #a3a8a4;
  --kit-line: #dde2de;
  --kit-line-strong: #c9cfca;
  --kit-accent: #17181c;
  --kit-accent-hover: #34363c;
  --kit-accent-ink: #ffffff;
  --kit-accent-soft: #eefa94;
  --kit-accent-line: #d3e35a;
  --kit-focus: #17181c;
  --kit-overlay: rgb(17 24 39 / 0.4);
  --kit-ok: #0f7d3a;
  --kit-ok-soft: #e8f5ec;
  --kit-warn: #a16207;
  --kit-warn-soft: #fdf6e3;
  --kit-bad: #b91c1c;
  --kit-bad-soft: #fdecec;
  --kit-info: #1d4ed8;
  --kit-info-soft: #e8effd;
  --kit-tone-ink: #ffffff;
  --kit-font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kit-font-num: var(--kit-font-sans);
  --kit-h2: 18px;
  --kit-h1: 46px;
  --kit-stat: 46px;
  --kit-weight-heading: 450;
  --kit-tracking-heading: -0.035em;
  --kit-tracking-caps: 0.04em;
  --kit-radius-lg: 28px;
  --kit-radius: 14px;
  --kit-radius-sm: 8px;
  --kit-control-h: 44px;
  --kit-control-h-sm: 36px;
  --kit-card-pad: 22px;
  --kit-content-max: 1480px;
  --kit-page-x: 28px;
  --kit-page-y: 30px;
  --kit-shadow: 0 0 0 transparent;
  --kit-shadow-lg: 0 8px 24px -12px rgb(16 24 40 / 0.22), 0 0 0 1px rgb(16 24 40 / 0.04);
  --kit-nav-active-weight: 500;
  --kit-chip-bg: #ffffff;
  --kit-chip-line: transparent;
  --kit-selected-bg: #17181c;
  --kit-selected-ink: #ffffff;
  --kit-selected-line: #17181c;
  --kit-table-head-bg: transparent;
  --kit-table-head-ink: #676b70;
  --kit-table-head-size: var(--kit-text);
  --kit-table-head-weight: var(--kit-weight-medium);
  --kit-table-head-case: none;
  --kit-table-head-tracking: normal;
  --kit-table-head-y: var(--kit-space-3);
  --kit-selected-weight: 500;
  --kit-label-weight: 500;
  --kit-card-head-line: transparent;
  --kit-stat-value-weight: 400;
  --kit-list-title-weight: 500;
  --kit-stat-pad-y: 22px;
  --kit-stat-gap: 10px;
  --kit-h1-leading: 1.08;
  --kit-ph-sub-size: 15px;
  --kit-ph-sub-ink: #676b70;
  --kit-card-head-y: 18px;
  --kit-btn-weight: 500;
  --kit-btn-h: 44px;
  --kit-ph-btn-weight: 500;
  --kit-ph-btn-h: 48px;
  --kit-ph-btn-x: 22px;
  --kit-card-title-size: 17px;
  --kit-card-title-weight: 500;
  --kit-card-shadow: none;
  --kit-stat-label-size: 14px;
  --kit-stat-label-weight: 500;
  --kit-stat-label-ink: #17181c;
  --kit-stat-value-tracking: -0.03em;
  --kit-stats-gap: 14px;
  --kit-stat-icon-size: 16px;
  --kit-badge-accent-ink: #17181c;
  --kit-section-title-size: 20px;
  --kit-section-title-weight: 500;
  --kit-card-title-lg-size: 24px;
  --kit-card-title-lg-weight: 450;
  --kit-table-card-shadow: none;
  --kit-table-row-line: #d9dfda;
  --kit-auth-card-shadow: none;
  --kit-panel-bg: #ffffff;
  --kit-panel-line: transparent;
  --kit-panel-accent-bg: #eefa94;
  --kit-panel-accent-line: transparent;
  --kit-grid-3-min: 220px;
  --kit-choice-on-bg: #eefa94;
  --kit-choice-on-line: #17181c;
  --kit-choice-on-ink: #17181c;
  --kit-ph-after: 4px;
  --kit-chat-me-bg: #eefa94;
  --kit-chat-me-ink: #17181c;
  --kit-chat-me-meta: #45484d;
  --kit-chat-them-bg: #ffffff;
  --kit-chat-them-line: transparent;
  --kit-chat-input-bg: #ffffff;
  --kit-chat-input-line: transparent;
  --kit-chat-radius: 20px;
  --kit-card-bg: #e9eeea;
  --kit-card-line: transparent;
  --kit-btn-bg: #ffffff;
  --kit-btn-line: transparent;
  --kit-btn-radius: 999px;
  --kit-tabs-pill-bg: #ffffff;
  --kit-tabs-pill-ink: #17181c;
  --kit-tabs-pill-active-bg: #17181c;
  --kit-tabs-pill-active-ink: #ffffff;
  --kit-tabs-pill-rule: transparent;
  --kit-tabs-pill-radius: 999px;
  --kit-tabs-pill-size: 13px;
  --kit-tabs-pill-y: 9px;
  --kit-tabs-pill-x: 18px;
  --kit-stat-icon-bg: #ffffff;
  --kit-stat-icon-pad: 9px;
  --kit-stat-accent-bg: #eefa94;
  --kit-stat-accent-ink: #17181c;
  --kit-stat-accent-muted: #45484d;
  --kit-stat-contrast-bg: #17181c;
  --kit-stat-contrast-ink: #ffffff;
  --kit-stat-contrast-muted: #a3a8a4;
  --kit-card-contrast-bg: #17181c;
  --kit-card-contrast-ink: #ffffff;
  --kit-card-contrast-muted: #a3a8a4;
  --kit-meter-seg-h: 36px;
  --kit-meter-seg-gap: 5px;
  --kit-meter-seg-w: 18px;
  --kit-meter-seg-on: #17181c;
  --kit-meter-seg-off: #b5bcb7;
  --kit-bars-h: 210px;
  --kit-bar-w: 42px;
  --kit-bar-radius: 999px;
  --kit-bar-radius-bottom: 999px;
  --kit-bar-bg: #17181c;
  --kit-bar-current-bg: #c9db45;
  --kit-bar-empty-grow: 1;
  --kit-bar-empty-bg: transparent;
  --kit-bar-empty-line: #b5bcb7;
  --kit-tile-bg: #e9eeea;
  --kit-tile-line: transparent;
  --kit-tile-hover-bg: #e1e7e2;
  --kit-tile-icon-bg: #ffffff;
  --kit-tile-text-ink: #676b70;
  --kit-tile-pad: 18px;
  --kit-tile-radius: 24px;
  --kit-tile-min: 200px;
  --kit-rail-w: 66px;
  --kit-rail-inset: 14px;
  --kit-rail-radius: 28px;
  --kit-rail-item: 42px;
  --kit-rail-bg: #17181c;
  --kit-rail-icon: #9a9da1;
  --kit-rail-hover-bg: #2b2d31;
  --kit-rail-active-bg: #45474b;
  --kit-rail-active-ink: #ffffff;
  --kit-rail-brand-bg: #ffffff;
  --kit-rail-brand-ink: #17181c;
  --kit-sidebar-bg: var(--kit-bg);
  --kit-sidebar-line: var(--kit-line);
  --kit-nav-ink: var(--kit-ink-2);
  --kit-nav-icon: var(--kit-muted);
  --kit-nav-active-bg: var(--kit-accent-soft);
  --kit-nav-active-ink: var(--kit-accent);
  --kit-btn-danger-bg: var(--kit-surface);
  --kit-btn-danger-ink: var(--kit-bad);
  --kit-btn-danger-line: var(--kit-bad);
  --kit-btn-danger-hover: var(--kit-bad-soft);
  --kit-btn-neutral-bg: var(--kit-ink);
  --kit-btn-neutral-ink: var(--kit-bg);
  --kit-btn-neutral-hover: var(--kit-ink-2);
  --kit-brand-line: transparent;
  --kit-table-link-ink: var(--kit-ink);
  --kit-auth-bg: var(--kit-bg);
  --kit-auth-ink: var(--kit-ink);
  --kit-auth-muted: var(--kit-muted);
  --kit-auth-link: var(--kit-accent);
  --kit-auth-link-hover: var(--kit-accent-hover);
  --kit-stat-icon-ink: currentColor;
  --kit-btn-ghost-ink: var(--kit-ink-2);
  --kit-btn-ink: var(--kit-ink);
  --kit-ph-btn-ink: var(--kit-btn-ink);
  --kit-section-link-ink: var(--kit-accent);
  --kit-table-cell-ink: var(--kit-ink);
  --kit-table-muted-ink: var(--kit-ink-2);
  --kit-table-act-ink: var(--kit-btn-ghost-ink);
  --kit-text-ok-ink: var(--kit-ok);
  --kit-text-ok-strong-ink: var(--kit-ok);
  --kit-badge-soft-ok-bg: var(--kit-ok-soft);
  --kit-badge-soft-ok-ink: var(--kit-ok);
  --kit-badge-soft-bg: var(--kit-sunken);
  --kit-badge-soft-ink: var(--kit-ink-2);
  --kit-label-ink: var(--kit-ink);
  --kit-label-sm-ink: var(--kit-muted);
  --kit-check-accent: var(--kit-accent);
  --kit-sidebar-foot-line: transparent;
  --kit-btn-xs-ink: var(--kit-btn-ink);
  --kit-notice-compact-warn-bg: var(--kit-warn-soft);
  --kit-notice-compact-warn-ink: var(--kit-warn);
  --kit-label-compact-ink: var(--kit-label-ink);
  --kit-filechip-ok-bg: var(--kit-ok-soft);
  --kit-filechip-ok-ink: var(--kit-ok);
  --kit-file-block-line: var(--kit-line-strong);
  --kit-file-block-ink: var(--kit-btn-ink);
  --kit-btn-bad-line: var(--kit-line-strong);
  --kit-overlap-ring: var(--kit-surface);
  --kit-overlap-bg: var(--kit-surface-2);
  --kit-figure-bg: var(--kit-surface-2);
  --kit-figure-line: var(--kit-line);
  --kit-sheet-foot-bg: var(--kit-surface-2);
  --kit-input-strong-line: var(--kit-ink-2);
  --kit-check-strong-ink: var(--kit-label-ink);
  --kit-badge-soft-bad-bg: var(--kit-bad-soft);
  --kit-badge-soft-bad-ink: var(--kit-bad);
  --kit-code-keyword: #8b2f7a;
  --kit-code-string: #2f6b1f;
  --kit-code-comment: #625e56;
  --kit-code-number: #8a5300;
  --kit-code-function: #1f4fa8;
  --kit-code-type: #0f6a6a;
  --kit-code-attr: #9b3a1e;
  --kit-code-punct: var(--kit-ink-2);
  --kit-code-meta: var(--kit-info);
  --kit-diff-add-bg: #e1f1e4;
  --kit-diff-add-ink: #1c6b3e;
  --kit-diff-del-bg: #f9e3df;
  --kit-diff-del-ink: #a3261b;
  --kit-chat-them-ink: var(--kit-ink);
  --kit-chat-meta: var(--kit-muted);
  --kit-chat-system-bg: var(--kit-sunken);
  --kit-chat-system-ink: var(--kit-ink-2);
  --kit-chat-head-bg: var(--kit-bg);
  --kit-chat-dock-bg: var(--kit-surface);
  --kit-tabs-pill-line: transparent;
}