/* Generated at startup by internal/ui (assets.go). Sources: css/shopdesk.css imports, then charts/charts.css, compat.css, shell.css, realtime.css, nav.css. */
@layer reset, tokens, base, components, compat, layout, shell, utilities, module, themes, print;

/* ---- css/reset.css */
@layer reset {
/* Reset: minimal, modern, keeps semantics. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; }
html, body { margin: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre { margin: 0; }
ol[role="list"], ul[role="list"], ol[class], ul[class] { list-style: none; padding: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; }
img, svg, video, canvas, picture { display: block; max-inline-size: 100%; }
img, video { block-size: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: not-allowed; }
table { border-collapse: collapse; }
textarea { resize: vertical; }
dialog { padding: 0; border: 0; color: inherit; max-inline-size: none; max-block-size: none; }
[popover] { padding: 0; border: 0; color: inherit; }
a { color: inherit; text-decoration-skip-ink: auto; }
abbr[title] { text-decoration: underline dotted; }

}

/* ---- css/tokens.css */
@layer tokens {
/* ==========================================================================
   Design tokens: the ONLY place for raw values.
   Colours are oklch. Dark/light pairs use light-dark() and follow color-scheme,
   so any element with [data-theme] re-themes its subtree. The neutrals take a
   faint tint from the tenant accent (relative colour syntax), so a white-label
   accent changes the whole mood, not just the buttons.
   Extra themes (contrast, paper) live in themes.css (layer "themes").
   ========================================================================== */

/* 1. Scales that never change with the theme ------------------------------ */
:root {
  /* Brand slot: the product name exists ONLY here (and in the server config). */
  --brand-name: "Shopdesk";
  /* Tenant accent: any colour; lightness is normalised per theme for contrast. */
  --accent-base: oklch(0.6 0.19 278);

  /* Typography: system stacks, no web fonts at runtime */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Inter", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Inter", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Noto Sans Mono", "DejaVu Sans Mono", monospace;

  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13 */
  --text-md: 0.875rem;    /* 14  body */
  --text-lg: 1rem;        /* 16 */
  --text-xl: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --text-2xl: clamp(1.3125rem, 1.1rem + 0.55vw, 1.625rem);   /* page title */
  --text-3xl: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);        /* KPI value */
  --text-4xl: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);       /* display */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.5;
  --lh-prose: 1.65;

  --weight-regular: 400;
  --weight-medium: 510;
  --weight-semibold: 600;
  --weight-bold: 680;

  --tracking-tight: -0.022em;
  --tracking-snug: -0.011em;
  --tracking-caps: 0.06em;

  /* Spacing: 4 px grid */
  --space-0: 0.125rem;  /* 2 */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --gutter: clamp(1rem, 0.4rem + 1.8vw, 2rem);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Motion */
  --dur-fast: 120ms;
  --dur: 160ms;
  --dur-slow: 240ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Layout */
  --rail-w: 15rem;
  --rail-w-collapsed: 3.5rem;
  --topbar-h: 3rem;
  --sheet-gap: 0.5rem;
  --content-max: 92rem;
  --measure: 68ch;

  /* Layers (only for things outside the top layer) */
  --z-sticky: 5;
  --z-rail: 30;
  --z-bulkbar: 40;
  --z-toast: 90;

  /* Icon sizes */
  --icon-sm: 0.875rem;
  --icon-md: 1rem;
  --icon-lg: 1.25rem;

  /* Density: comfortable (default) */
  --ctl-h: 2rem;
  --ctl-h-sm: 1.75rem;
  --ctl-h-lg: 2.5rem;
  --ctl-px: 0.75rem;
  --row-h: 2.625rem;
  --head-h: 2.25rem;
  --cell-px: 0.625rem;
  --table-fs: var(--text-sm);
  --pad: 1.25rem;
  --gap: 1rem;
  --nav-item-h: 1.875rem;
}

[data-density="compact"] {
  --ctl-h: 1.75rem;
  --ctl-h-sm: 1.5rem;
  --ctl-h-lg: 2.125rem;
  --ctl-px: 0.625rem;
  --row-h: 2rem;
  --head-h: 2rem;
  --cell-px: 0.5rem;
  --table-fs: 0.78125rem;
  --pad: 1rem;
  --gap: 0.75rem;
  --nav-item-h: 1.625rem;
}

/* Touch screens (phones, tablets): controls are at least 40 px tall in both densities, so
   every button, field, chip and tab is a comfortable tap target (WCAG 2.5.8; screentest R5). */
@media (pointer: coarse) {
  :root, [data-density="compact"] {
    --ctl-h: 2.75rem;
    --ctl-h-sm: 2.5rem;
    --ctl-h-lg: 3rem;
    --nav-item-h: 2.5rem;
    --row-h: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}

/* 2. Theme-dependent primitives (dark default, light via color-scheme) ---- */
:root { color-scheme: dark; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
[data-theme="auto"] { color-scheme: light dark; }

/* Accent presets (tenant can also set --accent-base to any colour) */
[data-accent="iris"] { --accent-base: oklch(0.6 0.19 278); }
[data-accent="cobalt"] { --accent-base: oklch(0.6 0.17 252); }
[data-accent="jade"] { --accent-base: oklch(0.62 0.13 168); }
[data-accent="amber"] { --accent-base: oklch(0.7 0.15 68); }
[data-accent="rose"] { --accent-base: oklch(0.6 0.19 12); }
[data-accent="graphite"] { --accent-base: oklch(0.55 0.02 260); }

:root, [data-theme], [data-accent] {
  /* Surfaces, back to front */
  --canvas: light-dark(oklch(from var(--accent-base) 0.962 0.005 h), oklch(from var(--accent-base) 0.142 0.007 h));
  --surface: light-dark(oklch(from var(--accent-base) 0.996 0.0015 h), oklch(from var(--accent-base) 0.175 0.008 h));
  --surface-raised: light-dark(oklch(1 0 0), oklch(from var(--accent-base) 0.198 0.009 h));
  --surface-sunken: light-dark(oklch(from var(--accent-base) 0.974 0.004 h), oklch(from var(--accent-base) 0.158 0.007 h));
  --surface-overlay: light-dark(oklch(1 0 0), oklch(from var(--accent-base) 0.222 0.01 h));
  --surface-inverse: light-dark(oklch(from var(--accent-base) 0.22 0.012 h), oklch(from var(--accent-base) 0.93 0.006 h));
  --surface-hover: light-dark(oklch(from var(--accent-base) 0.3 0.03 h / 0.05), oklch(1 0 0 / 0.045));
  --surface-active: light-dark(oklch(from var(--accent-base) 0.3 0.03 h / 0.09), oklch(1 0 0 / 0.08));

  /* Hairlines: alpha so they sit on any surface */
  --line-soft: light-dark(oklch(from var(--accent-base) 0.3 0.03 h / 0.075), oklch(1 0 0 / 0.05));
  --line: light-dark(oklch(from var(--accent-base) 0.3 0.03 h / 0.12), oklch(1 0 0 / 0.08));
  --line-strong: light-dark(oklch(from var(--accent-base) 0.3 0.03 h / 0.2), oklch(1 0 0 / 0.14));
  /* Form borders meet 3:1 against their surface (WCAG 1.4.11) */
  --field-line: light-dark(oklch(from var(--accent-base) 0.64 0.012 h), oklch(from var(--accent-base) 0.55 0.012 h));
  --field-line-hover: light-dark(oklch(from var(--accent-base) 0.52 0.014 h), oklch(from var(--accent-base) 0.6 0.012 h));
  --field-bg: light-dark(oklch(1 0 0), oklch(from var(--accent-base) 0.155 0.007 h));

  /* Text */
  --fg: light-dark(oklch(from var(--accent-base) 0.21 0.014 h), oklch(from var(--accent-base) 0.965 0.004 h));
  --fg-2: light-dark(oklch(from var(--accent-base) 0.38 0.016 h), oklch(from var(--accent-base) 0.82 0.008 h));
  --fg-3: light-dark(oklch(from var(--accent-base) 0.5 0.014 h), oklch(from var(--accent-base) 0.68 0.01 h));
  --fg-4: light-dark(oklch(from var(--accent-base) 0.68 0.01 h), oklch(from var(--accent-base) 0.48 0.01 h)); /* decoration, never body text */
  --fg-on-inverse: light-dark(oklch(0.97 0 0), oklch(0.2 0.01 260));

  /* Accent (normalised lightness, chroma capped) */
  --accent: light-dark(oklch(from var(--accent-base) 0.52 min(c, 0.2) h), oklch(from var(--accent-base) 0.77 min(c, 0.15) h));
  --accent-solid: light-dark(oklch(from var(--accent-base) 0.53 min(c, 0.2) h), oklch(from var(--accent-base) 0.56 min(c, 0.19) h));
  --accent-solid-hover: light-dark(oklch(from var(--accent-base) 0.48 min(c, 0.2) h), oklch(from var(--accent-base) 0.6 min(c, 0.19) h));
  --on-accent: oklch(1 0 0);
  --focus: light-dark(oklch(from var(--accent-base) 0.56 min(c, 0.2) h), oklch(from var(--accent-base) 0.74 min(c, 0.16) h));

  /* Status (reserved: never used for decoration or chart series) */
  --ok: light-dark(oklch(0.5 0.13 155), oklch(0.79 0.15 155));
  --warn: light-dark(oklch(0.55 0.12 76), oklch(0.84 0.14 82));
  --crit: light-dark(oklch(0.54 0.2 25), oklch(0.74 0.16 22));
  --info: light-dark(oklch(0.52 0.15 250), oklch(0.78 0.11 245));
  --special: light-dark(oklch(0.52 0.19 300), oklch(0.78 0.13 300));
  --neutral: var(--fg-3);

  /* Elevation */
  --shadow-sm: 0 1px 2px light-dark(oklch(0.25 0.03 260 / 0.06), oklch(0 0 0 / 0.3));
  --shadow-md: 0 1px 2px light-dark(oklch(0.25 0.03 260 / 0.05), oklch(0 0 0 / 0.28)), 0 6px 16px -6px light-dark(oklch(0.25 0.03 260 / 0.12), oklch(0 0 0 / 0.5));
  --shadow-lg: 0 2px 6px light-dark(oklch(0.25 0.03 260 / 0.05), oklch(0 0 0 / 0.3)), 0 16px 40px -10px light-dark(oklch(0.25 0.03 260 / 0.2), oklch(0 0 0 / 0.62));
  --shadow-xl: 0 4px 12px light-dark(oklch(0.25 0.03 260 / 0.06), oklch(0 0 0 / 0.35)), 0 32px 80px -16px light-dark(oklch(0.25 0.03 260 / 0.3), oklch(0 0 0 / 0.72));
  --highlight: inset 0 1px 0 light-dark(oklch(1 0 0 / 0.65), oklch(1 0 0 / 0.045));
  --scrim: light-dark(oklch(0.25 0.02 260 / 0.3), oklch(0 0 0 / 0.56));
  --ring-width: 2px;

  /* Derived tints */
  --accent-tint: color-mix(in oklab, var(--accent) 12%, transparent);
  --accent-tint-strong: color-mix(in oklab, var(--accent) 20%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 45%, transparent);
  --selection: color-mix(in oklab, var(--accent) 30%, transparent);
  --tooltip-bg: light-dark(oklch(from var(--accent-base) 0.24 0.012 h), oklch(from var(--accent-base) 0.31 0.012 h));
  --tooltip-fg: oklch(0.97 0 0);

  /* Charts: series 1 is the accent; grid and axes stay recessive */
  --chart-1: var(--accent);
  --chart-grid: var(--line-soft);
  --chart-axis: var(--fg-3);
}

/* Entity tones (avatars, shop chips): pastel fill + dark ink, same in all themes */
.tone-1 { --tone-h: 20; }
.tone-2 { --tone-h: 55; }
.tone-3 { --tone-h: 90; }
.tone-4 { --tone-h: 150; }
.tone-5 { --tone-h: 195; }
.tone-6 { --tone-h: 235; }
.tone-7 { --tone-h: 280; }
.tone-8 { --tone-h: 330; }
[class*="tone-"] {
  --tone-bg: oklch(0.76 0.11 var(--tone-h, 260));
  --tone-ink: oklch(0.25 0.06 var(--tone-h, 260));
  --tone-chip: oklch(0.68 0.15 var(--tone-h, 260));
}

}

/* ---- css/base.css */
@layer base {
/* Base: document defaults, type, focus, icons, scrollbars. */
html {
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scrollbar-color: var(--line-strong) transparent;
  accent-color: var(--accent-solid);
}
body {
  min-block-size: 100dvh;
  font-size: var(--text-md);
  font-feature-settings: "cv11", "ss01", "ss03";
  font-variant-numeric: tabular-nums;
  background: var(--canvas);
}
[data-theme] { color: var(--fg); }

h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; color: var(--fg); }
h1 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); }
h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--lh-snug); }
h4 { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
p { text-wrap: pretty; }
small { font-size: var(--text-xs); }
strong, b { font-weight: var(--weight-semibold); }

a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }

:focus { outline: none; }
:focus-visible {
  outline: var(--ring-width) solid var(--focus);
  outline-offset: 2px;
}
::selection { background: var(--selection); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; font-variant-ligatures: none; }
hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--space-4); }

/* Icons: <svg class="icon"><use href="…/icons.svg#i-name"/></svg> */
.icon {
  inline-size: var(--icon-md);
  block-size: var(--icon-md);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
  display: inline-block;
}
.icon--sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); stroke-width: 1.9; }
.icon--lg { inline-size: var(--icon-lg); block-size: var(--icon-lg); stroke-width: 1.5; }
.icon--xl { inline-size: 1.5rem; block-size: 1.5rem; stroke-width: 1.4; }

/* Scrollbars: thin and quiet */
* { scrollbar-width: thin; }
::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

}

/* ---- css/components/controls.css */
@layer components {
/* ==========================================================================
   Controls: buttons, form fields, choice controls, range, drop zone,
   combobox / tag input, OTP.
   ========================================================================== */

/* ---- Button ----------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface-raised);
  --btn-fg: var(--fg);
  --btn-ring: var(--line-strong);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem;
  block-size: var(--ctl-h);
  padding-inline: var(--ctl-px);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: 0 0 0 1px var(--btn-ring), var(--shadow-sm), var(--highlight);
  font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1;
  white-space: nowrap; text-decoration: none; user-select: none;
  transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), scale var(--dur-fast) var(--ease-standard);
}
.btn:hover { --btn-bg: color-mix(in oklab, var(--surface-raised), var(--fg) 5%); --btn-ring: color-mix(in oklab, var(--line-strong), var(--fg) 8%); }
.btn:active:not(:disabled, [aria-disabled="true"]) { scale: 0.975; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn .icon { color: var(--btn-icon, var(--fg-3)); margin-inline-start: -0.125rem; }
.btn .icon:last-child:not(:first-child) { margin-inline: 0 -0.125rem; }

.btn--primary {
  --btn-bg: var(--accent-solid); --btn-fg: var(--on-accent); --btn-icon: currentColor;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-solid), black 18%), 0 1px 2px oklch(0 0 0 / 0.18), inset 0 1px 0 oklch(1 0 0 / 0.2);
}
.btn--primary:hover { --btn-bg: var(--accent-solid-hover); }
.btn--danger {
  --btn-bg: oklch(from var(--crit) 0.55 0.2 h); --btn-fg: oklch(1 0 0); --btn-icon: currentColor;
  box-shadow: 0 0 0 1px oklch(from var(--crit) 0.45 0.18 h), 0 1px 2px oklch(0 0 0 / 0.18), inset 0 1px 0 oklch(1 0 0 / 0.18);
}
.btn--danger:hover { --btn-bg: oklch(from var(--crit) 0.5 0.2 h); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg-2); box-shadow: none; }
.btn--ghost:hover { --btn-bg: var(--surface-hover); --btn-fg: var(--fg); }
.btn--ghost.btn--danger, .btn--danger-ghost { --btn-bg: transparent; --btn-fg: var(--crit); --btn-icon: currentColor; box-shadow: none; }
.btn--danger-ghost:hover { --btn-bg: color-mix(in oklab, var(--crit) 10%, transparent); }
.btn--link { --btn-bg: transparent; --btn-fg: var(--accent); box-shadow: none; padding-inline: 0; block-size: auto; }
.btn--link:hover { text-decoration: underline; }
.btn--sm { block-size: var(--ctl-h-sm); padding-inline: 0.5625rem; font-size: var(--text-xs); gap: 0.3125rem; border-radius: var(--radius-sm); }
.btn--lg { block-size: var(--ctl-h-lg); padding-inline: 1rem; font-size: var(--text-md); border-radius: 10px; }
.btn--block { inline-size: 100%; }
.btn--icon { inline-size: var(--ctl-h); padding: 0; }
.btn--icon .icon { margin: 0; }
.btn--sm.btn--icon { inline-size: var(--ctl-h-sm); }
.btn--icon.btn--ghost .icon { color: var(--fg-3); }
.btn--icon.btn--ghost:hover .icon { color: var(--fg); }
.btn[aria-pressed="true"], .btn[aria-expanded="true"].btn--ghost { --btn-bg: var(--surface-active); --btn-fg: var(--fg); }
.btn[aria-pressed="true"] .icon { color: var(--accent); }
.btn__kbd { margin-inline: 0.125rem -0.25rem; }
.btn--primary .kbd { background: oklch(0 0 0 / 0.2); color: inherit; box-shadow: none; } /* darker key cap: white text keeps 4.5:1 (R5) */
.btn[data-loading] { color: transparent; pointer-events: none; }
.btn[data-loading]::after {
  content: ""; position: absolute; inset: 0; margin: auto; inline-size: 1rem; block-size: 1rem;
  border-radius: 50%; border: 2px solid var(--btn-fg); border-inline-end-color: transparent;
  animation: sd-spin 0.7s linear infinite;
}

.btn-group { display: inline-flex; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.btn-group > .btn { border-radius: 0; box-shadow: 0 0 0 1px var(--btn-ring), var(--highlight); }
.btn-group > .btn + .btn { margin-inline-start: 1px; }
.btn-group > .btn:first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
.btn-group > .btn:last-child { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }

/* ---- Field wrapper ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 0.375rem; min-inline-size: 0; }
.field__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg); }
.field__optional { font-weight: var(--weight-regular); color: var(--fg-3); font-size: var(--text-xs); }
.field__hint { font-size: var(--text-xs); color: var(--fg-3); line-height: var(--lh-snug); }
.field__error, .field__success { display: flex; align-items: center; gap: 0.375rem; font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: var(--lh-snug); }
.field__error { color: var(--crit); }
.field__success { color: var(--ok); }
.field__counter { font-size: var(--text-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.field__counter[data-state="near"] { color: var(--warn); }
.field__counter[data-state="over"] { color: var(--crit); font-weight: var(--weight-semibold); }
.field__row { display: flex; align-items: center; gap: var(--space-2); }

.form-grid { display: grid; gap: var(--space-4) var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.form-grid__wide { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

/* ---- Text inputs -------------------------------------------------------------- */
.input, .select, .textarea {
  inline-size: 100%;
  block-size: var(--ctl-h);
  padding-inline: 0.625rem;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-md);
  background: var(--field-bg);
  color: var(--fg);
  font-size: var(--text-sm);
  box-shadow: inset 0 1px 1px light-dark(oklch(0 0 0 / 0.03), oklch(0 0 0 / 0.15));
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--field-line-hover); }
.input:focus, .input:focus-within, .select:focus, .textarea:focus, .input-group:focus-within { /* :focus-within: date and time fields focus their inner segments (R5) */
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 1px var(--focus), 0 0 0 4px color-mix(in oklab, var(--focus) 22%, transparent); /* R5: 2 px solid focus line (border + 1 px) that meets 3:1, plus the soft halo */
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"], .input-group:has([aria-invalid="true"]) {
  border-color: var(--crit);
}
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus, .input-group:has([aria-invalid="true"]):focus-within {
  box-shadow: 0 0 0 1px var(--crit), 0 0 0 4px color-mix(in oklab, var(--crit) 20%, transparent);
}
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.input[readonly] { background: var(--surface-sunken); }
.input--sm, .select--sm { block-size: var(--ctl-h-sm); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.input--lg { block-size: var(--ctl-h-lg); font-size: var(--text-md); padding-inline: 0.875rem; }
.input--num { text-align: end; font-variant-numeric: tabular-nums; }
.input--mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.6; }
.input[type="date"], .input[type="time"], .input[type="datetime-local"] { font-variant-numeric: tabular-nums; }
.input::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }

.select {
  appearance: none;
  padding-inline-end: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238a909b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 8 3.5-3.5L13.5 8M6.5 12l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  cursor: pointer;
}
.select:dir(rtl) { background-position: left 0.5rem center; }

.textarea { block-size: auto; min-block-size: 5.5rem; max-block-size: 24rem; padding-block: 0.5rem; line-height: var(--lh-body); field-sizing: content; }

/* input group: leading icon, unit addons, inline buttons */
.input-group {
  display: flex; align-items: stretch;
  inline-size: 100%; block-size: var(--ctl-h);
  border: 1px solid var(--field-line); border-radius: var(--radius-md);
  background: var(--field-bg);
  box-shadow: inset 0 1px 1px light-dark(oklch(0 0 0 / 0.03), oklch(0 0 0 / 0.15));
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.input-group:hover { border-color: var(--field-line-hover); }
.input-group > .input, .input-group > .select { border: 0; box-shadow: none; background-color: transparent; block-size: 100%; border-radius: 0; min-inline-size: 0; flex: 1; }
.input-group > .input:focus, .input-group > .select:focus { box-shadow: none; }
.input-group > .select { flex: none; inline-size: auto; border-inline-start: 1px solid var(--line); background-color: var(--surface-sunken); }
.input-group--auto { inline-size: auto; }
.input-group--auto > .input { flex: none; inline-size: auto; }
.input-group__icon { display: grid; place-items: center; padding-inline: 0.625rem 0; color: var(--fg-3); }
.input-group__icon + .input { padding-inline-start: 0.5rem; }
.input-group__addon {
  display: flex; align-items: center; padding-inline: 0.625rem; flex: none;
  color: var(--fg-3); font-size: var(--text-sm); background: var(--surface-sunken);
  border-inline-start: 1px solid var(--line);
}
.input-group__addon:first-child { border-inline-start: 0; border-inline-end: 1px solid var(--line); }
.input-group__btn {
  display: grid; place-items: center; inline-size: calc(var(--ctl-h) - 2px); flex: none;
  color: var(--fg-3); border-inline-start: 1px solid var(--line);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.input-group__btn:first-child { border-inline-start: 0; border-inline-end: 1px solid var(--line); }
.input-group__btn:hover { background: var(--surface-hover); color: var(--fg); }
.input-group__btn:focus-visible { outline-offset: -3px; }
.input-group__sep { display: grid; place-items: center; color: var(--fg-3); padding-inline: 0.25rem; }
.input-group .kbd { align-self: center; margin-inline-end: 0.5rem; }
.input-group--sm { block-size: var(--ctl-h-sm); font-size: var(--text-xs); }
.input-group--lg { block-size: var(--ctl-h-lg); }
.number { inline-size: 9rem; }
.number .input { text-align: center; padding-inline: 0.25rem; -moz-appearance: textfield; }
.number .input::-webkit-inner-spin-button, .number .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Checkbox, radio, switch -------------------------------------------------- */
.check, .radio {
  appearance: none; flex: none;
  inline-size: 1rem; block-size: 1rem; margin: 0;
  border: 1px solid var(--field-line); background: var(--field-bg);
  display: inline-grid; place-content: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.check { border-radius: 4.5px; }
.check:hover, .radio:hover { border-color: var(--field-line-hover); }
.check:checked, .check:indeterminate {
  background-color: var(--accent-solid); border-color: var(--accent-solid);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.4 2.6 2.6L12 5.4'/%3E%3C/svg%3E");
  background-size: 100%; background-position: center;
}
.check:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4.5 8h7'/%3E%3C/svg%3E");
}
[data-theme="contrast"] .check:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.4 2.6 2.6L12 5.4'/%3E%3C/svg%3E"); }
[data-theme="contrast"] .check:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4.5 8h7'/%3E%3C/svg%3E"); }
.radio { border-radius: 50%; }
.radio:checked { border-color: var(--accent-solid); background: var(--accent-solid); box-shadow: inset 0 0 0 3.5px var(--field-bg); }
.check:focus-visible, .radio:focus-visible { outline: var(--ring-width) solid var(--focus); outline-offset: 2px; }
.check:disabled, .radio:disabled { opacity: 0.5; cursor: not-allowed; }
.check[aria-invalid="true"], .radio[aria-invalid="true"] { border-color: var(--crit); }

.switch {
  appearance: none; flex: none; margin: 0; cursor: pointer;
  inline-size: 1.875rem; block-size: 1.125rem; border-radius: var(--radius-full);
  background-color: var(--field-line); /* off track meets 3:1 like a field border (was --line-strong, 1.5:1) */
  background-image: radial-gradient(circle closest-side, oklch(1 0 0) 0 calc(100% - 1px), transparent 100%);
  background-size: 0.875rem 0.875rem; background-repeat: no-repeat;
  background-position: 0.125rem center;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--dur) var(--ease-standard), background-position var(--dur) var(--ease-out);
}
.switch:checked { background-color: var(--accent-solid); background-position: calc(100% - 0.125rem) center; box-shadow: none; }
[data-theme="contrast"] .switch { background-color: oklch(0.56 0 0); } /* R5: off track 3:1+ on black (was 2.8:1) */
[data-theme="contrast"] .switch:checked { background-color: var(--accent-solid); background-image: radial-gradient(circle closest-side, oklch(0 0 0) 0 calc(100% - 1px), transparent 100%); }
.switch:focus-visible { outline: var(--ring-width) solid var(--focus); outline-offset: 2px; }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }

.choice { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; font-size: var(--text-sm); line-height: 1.25rem; }
.choice > .check, .choice > .radio { margin-block-start: 0.125rem; }
.choice > .switch { margin-block-start: 0.0625rem; }
/* REQUESTS 137c: block, not a flex column, so inline markup (<b>, links, pills) inside the text keeps its spaces;
   the hint is the one block child that stacks below */
.choice__text { display: block; min-inline-size: 0; }
.choice__hint { display: block; margin-block-start: 0.125rem; font-size: var(--text-xs); color: var(--fg-3); line-height: var(--lh-snug); }
.choice:has(:disabled) { cursor: not-allowed; color: var(--fg-3); }
.choice-list { display: flex; flex-direction: column; gap: var(--space-3); }

/* option cards: radio as a selectable tile */
.option-card {
  position: relative; display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
  cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast);
}
.option-card:hover { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.option-card:has(:checked) { background: color-mix(in oklab, var(--accent) 6%, var(--surface-raised)); box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-sm); }
.option-card:has(:focus-visible) { outline: var(--ring-width) solid var(--focus); outline-offset: 2px; }
.option-card > input { position: absolute; opacity: 0; pointer-events: none; }
.option-card__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.option-card__desc { font-size: var(--text-xs); color: var(--fg-3); }

/* ---- Range slider ------------------------------------------------------------------ */
.range {
  --fill: 50%;
  appearance: none; inline-size: 100%; block-size: 1.25rem; background: transparent; cursor: pointer; margin: 0;
}
.range::-webkit-slider-runnable-track {
  block-size: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--accent-solid) 0 var(--fill), var(--line-strong) var(--fill) 100%);
}
.range::-moz-range-track { block-size: 4px; border-radius: 4px; background: var(--line-strong); }
.range::-moz-range-progress { block-size: 4px; border-radius: 4px; background: var(--accent-solid); }
.range::-webkit-slider-thumb {
  appearance: none; inline-size: 1rem; block-size: 1rem; margin-block-start: -6px; border-radius: 50%;
  background: oklch(1 0 0); border: 0;
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.12), 0 1px 3px oklch(0 0 0 / 0.3);
  transition: scale var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast);
}
.range::-moz-range-thumb { inline-size: 1rem; block-size: 1rem; border-radius: 50%; background: oklch(1 0 0); border: 0; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.12), 0 1px 3px oklch(0 0 0 / 0.3); }
.range:hover::-webkit-slider-thumb { scale: 1.1; }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 var(--ring-width) var(--surface), 0 0 0 calc(var(--ring-width) * 2) var(--focus); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 var(--ring-width) var(--surface), 0 0 0 calc(var(--ring-width) * 2) var(--focus); }
.range-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.range-field output { min-inline-size: 3.5rem; text-align: end; font-size: var(--text-sm); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.range-scale { display: flex; justify-content: space-between; font-size: var(--text-2xs); color: var(--fg-3); grid-column: 1; }

/* ---- Drop zone ------------------------------------------------------------------------ */
.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-4); text-align: center;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface-sunken); color: var(--fg-3); font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-standard), background-color var(--dur) var(--ease-standard);
}
.dropzone:hover { border-color: var(--field-line-hover); }
.dropzone:has(input:focus-visible) { outline: var(--ring-width) solid var(--focus); outline-offset: 2px; }
.dropzone[data-state="over"] { border-color: var(--accent); background: var(--accent-tint); color: var(--fg); }
.dropzone__icon {
  display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-lg);
  background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm), var(--highlight); color: var(--fg-2);
}
.dropzone__title { color: var(--fg); font-weight: var(--weight-medium); }
.dropzone__title u { color: var(--accent); text-decoration: none; }
.dropzone input[type="file"] { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.file-list { display: flex; flex-direction: column; gap: var(--space-1); }
.file-list:empty { display: none; }
.file-list__item {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line);
  font-size: var(--text-sm);
}
.file-list__name { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list__size { color: var(--fg-3); font-size: var(--text-xs); }

/* ---- Combobox / tag input ---------------------------------------------------------- */
.combobox { position: relative; }
.combobox__control {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
  min-block-size: var(--ctl-h); padding: 0.1875rem 0.25rem 0.1875rem 0.3125rem;
  border: 1px solid var(--field-line); border-radius: var(--radius-md); background: var(--field-bg);
  box-shadow: inset 0 1px 1px light-dark(oklch(0 0 0 / 0.03), oklch(0 0 0 / 0.15));
  cursor: text;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.combobox__control:hover { border-color: var(--field-line-hover); }
.combobox__control:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), 0 0 0 4px color-mix(in oklab, var(--focus) 22%, transparent); }
.combobox__input { flex: 1; min-inline-size: 6rem; block-size: calc(var(--ctl-h) - 0.5rem); border: 0; background: none; padding-inline: 0.3125rem; font-size: var(--text-sm); outline: none; }
.combobox__input::placeholder { color: var(--fg-3); }
.combobox__toggle { display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--radius-sm); color: var(--fg-3); margin-inline-start: auto; }
.combobox__toggle:hover { background: var(--surface-hover); color: var(--fg); }
.combobox__list {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 0.375rem); z-index: 20;
  max-block-size: 16rem; overflow: auto; padding: 0.25rem;
  border-radius: var(--radius-lg); background: var(--surface-overlay);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-lg);
}
.combobox__option {
  display: flex; align-items: center; gap: 0.625rem; min-block-size: 2rem; padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer;
}
.combobox__option[data-active] { background: var(--surface-active); }
.combobox__option-sub { margin-inline-start: auto; font-size: var(--text-xs); color: var(--fg-3); }
.combobox__option .combobox__tick { inline-size: 1rem; color: var(--accent); visibility: hidden; }
.combobox__option[aria-selected="true"] .combobox__tick { visibility: visible; }
.combobox__option mark { background: none; color: var(--fg); font-weight: var(--weight-semibold); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 2px; }
.combobox__empty { padding: 0.75rem; color: var(--fg-3); font-size: var(--text-sm); text-align: center; }

.tag {
  display: inline-flex; align-items: center; gap: 0.25rem;
  block-size: 1.375rem; padding-inline: 0.5rem 0.25rem; border-radius: var(--radius-sm);
  background: var(--surface-active); color: var(--fg); font-size: var(--text-xs); font-weight: var(--weight-medium);
  white-space: nowrap;
}
.tag__remove { display: grid; place-items: center; inline-size: 1rem; block-size: 1rem; border-radius: 3px; color: var(--fg-3); }
.tag__remove:hover { background: var(--surface-active); color: var(--fg); }
.tag__remove .icon { inline-size: 0.75rem; block-size: 0.75rem; stroke-width: 2.2; }

/* ---- OTP ------------------------------------------------------------------------------- */
.otp { display: flex; gap: 0.5rem; justify-content: center; }
.otp__digit {
  inline-size: 2.75rem; block-size: 3.25rem; text-align: center;
  font: var(--weight-semibold) 1.375rem/1 var(--font-mono);
  border: 1px solid var(--field-line); border-radius: var(--radius-md); background: var(--field-bg); color: var(--fg);
  caret-color: var(--accent);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.otp__digit:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), 0 0 0 4px color-mix(in oklab, var(--focus) 22%, transparent); }
.otp__sep { align-self: center; color: var(--fg-4); }
@media (width < 26rem) { .otp__digit { inline-size: 2.4rem; block-size: 2.9rem; } .otp { gap: 0.35rem; } }

}

/* ---- css/components/navigation.css */
@layer components {
/* ==========================================================================
   Navigation: brand slot, search trigger, shop switcher, breadcrumbs, tabs,
   segmented control, stepper, pagination, sub navigation, keyboard hints.
   ========================================================================== */

/* ---- Brand slot (mark + wordmark from --brand-name) ------------------------ */
.brand {
  display: inline-flex; align-items: center; gap: 0.5625rem; min-inline-size: 0;
  color: var(--fg); text-decoration: none;
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: var(--weight-semibold); letter-spacing: -0.018em;
  border-radius: var(--radius-md);
}
.brand__mark { inline-size: 1.5rem; block-size: 1.5rem; flex: none; color: var(--accent-solid); border-radius: 7px; object-fit: contain; }
.brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__name:empty::before { content: var(--brand-name); }
.brand--lg { font-size: 1.125rem; gap: 0.75rem; }
.brand--lg .brand__mark { inline-size: 2.25rem; block-size: 2.25rem; border-radius: 10px; }

/* ---- Search trigger (opens the command palette) ----------------------------- */
.search-trigger {
  display: flex; align-items: center; gap: 0.5rem; inline-size: 100%;
  block-size: var(--ctl-h); padding-inline: 0.625rem 0.375rem;
  border-radius: var(--radius-md);
  background: var(--surface-hover); color: var(--fg-3);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--text-sm); white-space: nowrap;
  transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.search-trigger:hover { color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.search-trigger__text { flex: 1; text-align: start; overflow: hidden; text-overflow: ellipsis; }
.search-trigger--topbar { inline-size: clamp(12rem, 22vw, 18rem); background: var(--surface-sunken); }

/* ---- Shop switcher ---------------------------------------------------------- */
.shop-switch {
  display: inline-flex; align-items: center; gap: 0.5625rem; min-inline-size: 0;
  block-size: 2.125rem; padding: 0 0.375rem 0 0.25rem; border-radius: var(--radius-md);
  color: var(--fg); text-align: start;
  transition: background-color var(--dur-fast);
}
.shop-switch:hover, .shop-switch[aria-expanded="true"] { background: var(--surface-hover); }
.shop-switch__meta { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.15; }
.shop-switch__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-switch__sub { font-size: var(--text-2xs); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* long company names never run into the breadcrumbs (R5, 820 px) */
.shop-switch > .icon { color: var(--fg-3); }

.shop-logo {
  position: relative; display: inline-grid; place-items: center; flex: none;
  inline-size: 1.5rem; block-size: 1.5rem; border-radius: 7px;
  background: var(--tone-bg, var(--surface-active)); color: var(--tone-ink, var(--fg));
  font-size: 0.6875rem; font-weight: var(--weight-bold); letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.08);
}
.shop-logo img { inline-size: 100%; block-size: 100%; border-radius: inherit; object-fit: cover; }
.shop-logo--sm { inline-size: 1.25rem; block-size: 1.25rem; border-radius: 5px; font-size: 0.5625rem; }
.shop-logo--lg { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 10px; font-size: 0.9375rem; }
.shop-chip { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--tone-chip); flex: none; }

/* ---- Breadcrumbs --------------------------------------------------------------- */
.breadcrumbs { min-inline-size: 0; }
.breadcrumbs ol { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; min-inline-size: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: 0.25rem; min-inline-size: 0; font-size: var(--text-sm); color: var(--fg-3); white-space: nowrap; }
.breadcrumbs li + li::before { content: "/"; color: var(--fg-4); padding-inline: 0.125rem; }
.breadcrumbs a { color: inherit; text-decoration: none; padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); transition: color var(--dur-fast), background-color var(--dur-fast); }
.breadcrumbs a:hover { color: var(--fg); background: var(--surface-hover); }
.breadcrumbs [aria-current="page"] { color: var(--fg); font-weight: var(--weight-medium); padding-inline: 0.375rem; overflow: hidden; text-overflow: ellipsis; }

/* ---- Tabs (underline) ---------------------------------------------------------- */
.tabs { display: flex; gap: var(--space-1); border-block-end: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs__tab {
  position: relative; display: inline-flex; align-items: center; gap: 0.4375rem;
  block-size: 2.375rem; padding-inline: 0.625rem; margin-block-end: -1px;
  color: var(--fg-3); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap;
  text-decoration: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--dur-fast) var(--ease-standard);
}
.tabs__tab::after {
  content: ""; position: absolute; inset-inline: 0.5rem; inset-block-end: 0; block-size: 2px; border-radius: 2px 2px 0 0;
  background: var(--fg); scale: 0 1; transition: scale var(--dur) var(--ease-out);
}
.tabs__tab:hover { color: var(--fg); }
.tabs__tab[aria-selected="true"], .tabs__tab[aria-current="page"] { color: var(--fg); }
.tabs__tab[aria-selected="true"]::after, .tabs__tab[aria-current="page"]::after { scale: 1 1; }
.tabs__tab:focus-visible { outline-offset: -2px; }
.tabs__count { font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--fg-3); background: var(--surface-active); padding: 0.0625rem 0.375rem; border-radius: var(--radius-full); font-variant-numeric: tabular-nums; }
.tab-panel:focus-visible { outline-offset: 4px; border-radius: var(--radius-sm); }

/* ---- Segmented control (radios or aria-pressed buttons) --------------------------- */
.segmented {
  display: inline-flex; padding: 2px; gap: 2px; border-radius: 9px;
  background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line);
}
.segmented__item { position: relative; display: inline-flex; }
.segmented__item > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented__label, .segmented > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  block-size: calc(var(--ctl-h) - 4px); padding-inline: 0.625rem; border-radius: 7px;
  color: var(--fg-3); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap;
  transition: color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.segmented__label:hover, .segmented > button:hover { color: var(--fg); }
.segmented__item > input:checked + .segmented__label, .segmented > button[aria-pressed="true"] {
  background: var(--surface-raised); color: var(--fg);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm), var(--highlight);
}
.segmented__item > input:focus-visible + .segmented__label { outline: var(--ring-width) solid var(--focus); outline-offset: 1px; }
.segmented--sm .segmented__label, .segmented--sm > button { block-size: calc(var(--ctl-h-sm) - 4px); font-size: var(--text-xs); padding-inline: 0.5rem; }
.segmented--block { display: flex; }
.segmented--block > * { flex: 1; }
.segmented--block .segmented__label { inline-size: 100%; }

/* ---- Stepper (wizard) ------------------------------------------------------------ */
.stepper { display: flex; align-items: center; gap: var(--space-2); counter-reset: step; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.stepper__step { display: flex; align-items: center; gap: var(--space-2); counter-increment: step; font-size: var(--text-sm); color: var(--fg-3); white-space: nowrap; }
.stepper__step + .stepper__step::before { content: ""; inline-size: 2rem; block-size: 1px; background: var(--line-strong); margin-inline-end: var(--space-1); }
.stepper__dot {
  display: inline-grid; place-items: center; inline-size: 1.375rem; block-size: 1.375rem; border-radius: 50%;
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg-3);
}
.stepper__dot::before { content: counter(step); }
.stepper__step[data-state="done"] { color: var(--fg-2); }
.stepper__step[data-state="done"] .stepper__dot { background: var(--accent-tint-strong); color: var(--accent); box-shadow: none; }
.stepper__step[data-state="done"] .stepper__dot::before { content: "✓"; font-size: 0.75rem; }
.stepper__step[data-state="done"] + .stepper__step::before { background: var(--accent-line); }
.stepper__step[aria-current="step"] { color: var(--fg); font-weight: var(--weight-medium); }
.stepper__step[aria-current="step"] .stepper__dot { background: var(--accent-solid); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent-tint); }

/* ---- Pagination -------------------------------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--fg-3); }
.pagination__pages { display: flex; align-items: center; gap: 2px; }
.pagination .select { inline-size: auto; }
.pagination__page {
  display: inline-grid; place-items: center; min-inline-size: var(--ctl-h-sm); block-size: var(--ctl-h-sm); padding-inline: 0.375rem;
  border-radius: var(--radius-sm); color: var(--fg-2); font-size: var(--text-xs); font-weight: var(--weight-medium); text-decoration: none;
  font-variant-numeric: tabular-nums; transition: background-color var(--dur-fast), color var(--dur-fast);
}
.pagination__page:hover { background: var(--surface-hover); color: var(--fg); }
.pagination__page[aria-current="page"] { background: var(--surface-raised); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }

/* ---- Sub navigation (settings) ------------------------------------------------------- */
.subnav { display: flex; flex-direction: column; gap: 1px; }
.subnav__label { padding: var(--space-3) var(--space-2) var(--space-1); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.subnav__label:first-child { padding-block-start: 0; }
.subnav__link {
  display: flex; align-items: center; gap: 0.5625rem; block-size: var(--nav-item-h); padding-inline: var(--space-2);
  border-radius: var(--radius-md); color: var(--fg-2); font-size: var(--text-sm); text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.subnav__link .icon { color: var(--fg-3); }
.subnav__link:hover { background: var(--surface-hover); color: var(--fg); }
.subnav__link[aria-current] { background: var(--surface-active); color: var(--fg); font-weight: var(--weight-medium); }
.subnav__link[aria-current] .icon { color: var(--accent); }
@media (width < 64rem) {
  .subnav { flex-direction: row; overflow-x: auto; gap: var(--space-1); padding-block-end: var(--space-1); }
  .subnav__label { display: none; }
  .subnav__link { flex: none; }
}

/* ---- Keyboard hints ------------------------------------------------------------------ */
.kbd {
  display: inline-grid; place-items: center;
  min-inline-size: 1.125rem; block-size: 1.125rem; padding-inline: 0.25rem;
  border-radius: var(--radius-xs);
  font: var(--weight-medium) 0.6875rem/1 var(--font-sans);
  color: var(--fg-3); background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -1px 0 var(--line-strong);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.kbd-group { display: inline-flex; align-items: center; gap: 0.1875rem; flex: none; }
.kbd-group__then { font-size: var(--text-2xs); color: var(--fg-4); }
.shortcut-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-6); align-items: center; font-size: var(--text-sm); }
.shortcut-list dt { color: var(--fg-2); }
.shortcut-list dd { display: flex; justify-content: flex-end; }

/* Touch screens: tabs and small segmented items are tap targets of at least 40 px (R5) */
@media (pointer: coarse) {
  .tabs__tab { block-size: 2.75rem; }
  .segmented--sm .segmented__label, .segmented--sm > button { block-size: var(--ctl-h-sm); }
  .th-sort { min-block-size: 2.5rem; } /* R6 */
}
@media (pointer: coarse) {
  .shop-switch { block-size: var(--ctl-h); }
  .search-trigger--topbar { min-inline-size: var(--ctl-h); justify-content: center; }
}

}

/* ---- css/components/overlays.css */
@layer components {
/* ==========================================================================
   Overlays: menu, popover, tooltip, dialog, drawer, command palette,
   toasts, jobs tray. Popovers use the native [popover] top layer; JS only
   positions them. Entry/exit transitions use @starting-style.
   ========================================================================== */

/* ---- Floating base ------------------------------------------------------- */
.menu, .popover {
  position: fixed; inset: auto; margin: 0;
  max-block-size: min(32rem, calc(100dvh - 2rem));
  overflow: auto; overscroll-behavior: contain;
  background: var(--surface-overlay); color: var(--fg);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-lg), var(--highlight);
  opacity: 1; translate: 0 0; scale: 1;
  transform-origin: var(--origin, top left);
  transition: opacity var(--dur) var(--ease-out), scale var(--dur) var(--ease-out), translate var(--dur) var(--ease-out), display var(--dur) allow-discrete, overlay var(--dur) allow-discrete;
}
.menu:not(:popover-open), .popover:not(:popover-open) { opacity: 0; scale: 0.98; }
@starting-style {
  .menu:popover-open, .popover:popover-open { opacity: 0; scale: 0.97; translate: 0 -3px; }
}

/* ---- Menu ------------------------------------------------------------------ */
.menu { min-inline-size: 13.5rem; padding: 0.3125rem; font-size: var(--text-sm); }
.menu__item {
  display: flex; align-items: center; gap: 0.625rem; inline-size: 100%;
  min-block-size: 2rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm);
  color: var(--fg); text-decoration: none; text-align: start; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
[data-density="compact"] .menu__item { min-block-size: 1.75rem; }
.menu__item > .icon { color: var(--fg-3); }
.menu__item:hover, .menu__item:focus-visible { background: var(--surface-active); outline: none; }
.menu__item:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-line); }
.menu__item[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.menu__item--danger, .menu__item--danger > .icon { color: var(--crit); }
.menu__item--danger:hover { background: color-mix(in oklab, var(--crit) 12%, transparent); }
.menu__text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.menu__sub { font-size: var(--text-xs); color: var(--fg-3); }
.menu__meta { margin-inline-start: auto; display: flex; align-items: center; gap: 0.375rem; color: var(--fg-3); font-size: var(--text-xs); }
.menu__tick { visibility: hidden; color: var(--accent); margin-inline-start: auto; }
.menu__item[aria-checked="true"] .menu__tick { visibility: visible; }
.menu__label { padding: 0.5rem 0.5rem 0.25rem; font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.menu__sep { block-size: 1px; margin: 0.3125rem -0.3125rem; background: var(--line); border: 0; }
.menu__head { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem; }
.menu__search { padding: 0.25rem 0.25rem 0.375rem; }
.menu__search .input { block-size: 2rem; }
.menu--wide { min-inline-size: 18rem; }

/* ---- Popover panel ---------------------------------------------------------- */
.popover { inline-size: min(20rem, calc(100vw - 2rem)); padding: var(--space-4); font-size: var(--text-sm); }
.popover--wide { inline-size: min(26rem, calc(100vw - 2rem)); }
.popover--flush { padding: 0; }
.popover__body { padding: var(--space-4); }
.popover__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-block-end: var(--space-3); }
.popover__section + .popover__section { margin-block-start: var(--space-4); }
.popover__label { display: block; font-size: var(--text-xs); color: var(--fg-3); font-weight: var(--weight-medium); margin-block-end: var(--space-2); }

/* appearance panel (theme / density / accent) */
.swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.swatch {
  position: relative; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%;
  background: oklch(from var(--accent-base) 0.6 min(c, 0.19) h);
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.15);
  transition: scale var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast);
}
.swatch:hover { scale: 1.08; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface-overlay), 0 0 0 4px var(--fg); }
.swatch--custom { overflow: hidden; background: conic-gradient(from 0deg, oklch(0.7 0.15 0), oklch(0.7 0.15 90), oklch(0.7 0.15 180), oklch(0.7 0.15 270), oklch(0.7 0.15 360)); }
.swatch--custom input { position: absolute; inset: -0.5rem; inline-size: 2.5rem; block-size: 2.5rem; opacity: 0; cursor: pointer; }
.swatch--custom:has(input:focus-visible) { outline: var(--ring-width) solid var(--focus); outline-offset: 2px; }

/* ---- Tooltip ------------------------------------------------------------------ */
.tooltip {
  position: fixed; inset: auto; margin: 0;
  max-inline-size: 18rem; padding: 0.3125rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--tooltip-bg); color: var(--tooltip-fg);
  font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: var(--lh-snug);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  display: none; align-items: center; gap: 0.5rem;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-out), display var(--dur-fast) allow-discrete, overlay var(--dur-fast) allow-discrete;
}
.tooltip:popover-open { display: flex; }
@starting-style { .tooltip:popover-open { opacity: 0; } }
.tooltip .kbd { background: oklch(1 0 0 / 0.14); color: inherit; box-shadow: none; }
[data-theme="contrast"] .tooltip .kbd { background: oklch(0 0 0 / 0.12); }

/* ---- Dialog -------------------------------------------------------------------- */
.dialog {
  inline-size: min(30rem, calc(100vw - 2rem));
  max-block-size: calc(100dvh - 3rem);
  margin: auto;
  border-radius: 14px;
  background: var(--surface-overlay); color: var(--fg);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-xl), var(--highlight);
  overflow: hidden;
  opacity: 1; scale: 1;
  transition: opacity var(--dur) var(--ease-out), scale var(--dur-slow) var(--ease-out), translate var(--dur-slow) var(--ease-out), display var(--dur) allow-discrete, overlay var(--dur) allow-discrete;
}
.dialog[open] { display: flex; flex-direction: column; }
.dialog:not([open]) { opacity: 0; scale: 0.98; }
@starting-style { .dialog[open] { opacity: 0; scale: 0.96; } }
.dialog::backdrop {
  background: var(--scrim); backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity var(--dur) var(--ease-standard), display var(--dur) allow-discrete, overlay var(--dur) allow-discrete;
}
.dialog:not([open])::backdrop { opacity: 0; }
@starting-style { .dialog[open]::backdrop { opacity: 0; } }
.dialog--sm { inline-size: min(24rem, calc(100vw - 2rem)); }
.dialog--lg { inline-size: min(46rem, calc(100vw - 2rem)); }
.dialog--xl { inline-size: min(64rem, calc(100vw - 2rem)); }
.dialog__header { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0; }
.dialog__icon { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; flex: none; border-radius: 10px; background: var(--surface-active); color: var(--fg-2); }
.dialog__icon--crit { background: color-mix(in oklab, var(--crit) 14%, transparent); color: var(--crit); }
.dialog__icon--warn { background: color-mix(in oklab, var(--warn) 14%, transparent); color: var(--warn); }
.dialog__titles { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.25rem; padding-block-start: 0.125rem; }
.dialog__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.dialog__desc { color: var(--fg-3); font-size: var(--text-sm); }
.dialog__close { margin: -0.25rem -0.375rem 0 0; }
.dialog__body { padding: var(--space-4) var(--space-5) var(--space-5); overflow: auto; display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--text-sm); }
.dialog__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5); border-block-start: 1px solid var(--line-soft); background: var(--surface-sunken);
}
.dialog__footer-start { margin-inline-end: auto; font-size: var(--text-xs); color: var(--fg-3); display: flex; align-items: center; gap: 0.375rem; }

/* confirm by typing */
.confirm-type { display: flex; flex-direction: column; gap: var(--space-2); }
.confirm-type__phrase { font-family: var(--font-mono); font-size: var(--text-xs); padding: 0.0625rem 0.375rem; border-radius: var(--radius-xs); background: var(--surface-active); color: var(--fg); user-select: all; }

/* ---- Drawer (side sheet) ------------------------------------------------------------ */
.drawer {
  inline-size: min(30rem, calc(100vw - 1rem));
  block-size: calc(100dvh - 1rem);
  max-block-size: none;
  margin: 0.5rem 0.5rem 0.5rem auto;
  border-radius: 14px;
  background: var(--surface-overlay); color: var(--fg);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-xl);
  overflow: hidden;
  translate: 0 0;
  transition: translate var(--dur-slow) var(--ease-out), display var(--dur-slow) allow-discrete, overlay var(--dur-slow) allow-discrete;
}
.drawer[open] { display: flex; flex-direction: column; }
.drawer:not([open]) { translate: calc(100% + 1rem) 0; }
@starting-style { .drawer[open] { translate: calc(100% + 1rem) 0; } }
.drawer::backdrop { background: var(--scrim); transition: opacity var(--dur-slow), display var(--dur-slow) allow-discrete, overlay var(--dur-slow) allow-discrete; }
.drawer:not([open])::backdrop { opacity: 0; }
@starting-style { .drawer[open]::backdrop { opacity: 0; } }
.drawer--start { margin: 0.5rem auto 0.5rem 0.5rem; }
.drawer--start:not([open]) { translate: calc(-100% - 1rem) 0; }
@starting-style { .drawer--start[open] { translate: calc(-100% - 1rem) 0; } }
.drawer--wide { inline-size: min(44rem, calc(100vw - 1rem)); }
.drawer__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--line-soft); }
.drawer__title { flex: 1; font-size: var(--text-md); font-weight: var(--weight-semibold); }
.drawer__body { flex: 1; overflow: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.drawer__footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-block-start: 1px solid var(--line-soft); background: var(--surface-sunken); }

/* ---- Command palette ------------------------------------------------------------------- */
.cmdk {
  inline-size: min(40rem, calc(100vw - 1.5rem));
  max-block-size: min(34rem, calc(100dvh - 6rem));
  margin: 12vh auto auto;
  border-radius: 14px;
  background: var(--surface-overlay); color: var(--fg);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-xl), var(--highlight);
  overflow: hidden;
  opacity: 1; scale: 1;
  transition: opacity var(--dur) var(--ease-out), scale var(--dur) var(--ease-out), display var(--dur) allow-discrete, overlay var(--dur) allow-discrete;
}
.cmdk[open] { display: flex; flex-direction: column; }
.cmdk:not([open]) { opacity: 0; scale: 0.98; }
@starting-style { .cmdk[open] { opacity: 0; scale: 0.98; } }
.cmdk::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }
.cmdk__search { display: flex; align-items: center; gap: var(--space-3); padding-inline: var(--space-4); border-block-end: 1px solid var(--line); flex: none; }
.cmdk__search > .icon { color: var(--fg-3); }
.cmdk__input { flex: 1; block-size: 3.25rem; border: 0; background: none; outline: none; font-size: var(--text-lg); color: var(--fg); }
.cmdk__input::placeholder { color: var(--fg-3); }
.cmdk__scope { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5rem; border-radius: var(--radius-full); font-size: var(--text-xs); color: var(--fg-2); background: var(--surface-active); white-space: nowrap; }
.cmdk__list { flex: 1; overflow: auto; padding: var(--space-2); scroll-padding-block: var(--space-2); }
.cmdk__group + .cmdk__group { margin-block-start: var(--space-2); }
.cmdk__group-label { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.cmdk__item {
  display: flex; align-items: center; gap: var(--space-3);
  min-block-size: 2.5rem; padding: 0.375rem var(--space-3); border-radius: var(--radius-md);
  cursor: pointer; font-size: var(--text-sm);
}
.cmdk__item[aria-selected="true"] { background: var(--surface-active); }
.cmdk__item-icon { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; flex: none; border-radius: var(--radius-sm); background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-2); }
.cmdk__item[aria-selected="true"] .cmdk__item-icon { color: var(--accent); }
.cmdk__item-thumb { inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--radius-sm); object-fit: cover; flex: none; background: var(--surface-sunken); }
.cmdk__item-text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; line-height: var(--lh-snug); }
.cmdk__item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk__item-title mark { background: none; color: inherit; font-weight: var(--weight-semibold); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 2px; }
.cmdk__item-sub { font-size: var(--text-xs); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk__item-meta { display: flex; align-items: center; gap: var(--space-2); color: var(--fg-3); font-size: var(--text-xs); flex: none; }
.cmdk__item-enter { visibility: hidden; }
.cmdk__item[aria-selected="true"] .cmdk__item-enter { visibility: visible; }
.cmdk__empty { padding: var(--space-10) var(--space-4); text-align: center; color: var(--fg-3); font-size: var(--text-sm); }
.cmdk__footer { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-block-start: 1px solid var(--line); background: var(--surface-sunken); font-size: var(--text-xs); color: var(--fg-3); flex: none; }
.cmdk__footer > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.cmdk__footer > span:last-child { margin-inline-start: auto; }
@media (width < 48rem) { .cmdk { margin-block-start: 0.75rem; } .cmdk__footer { display: none; } }

/* ---- Toasts ------------------------------------------------------------------------------ */
.toast-region {
  position: fixed; inset: auto var(--space-4) var(--space-4) auto; margin: 0;
  display: flex; flex-direction: column-reverse; gap: var(--space-2);
  inline-size: min(23rem, calc(100vw - 2rem));
  background: none; overflow: visible; pointer-events: none;
}
.toast-region:empty { display: none; }
.toast {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.125rem var(--space-3); align-items: start;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-overlay); color: var(--fg);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg), var(--highlight);
  font-size: var(--text-sm);
  pointer-events: auto;
  translate: 0 0; opacity: 1;
  transition: translate var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out);
}
@starting-style { .toast { translate: 0 0.75rem; opacity: 0; } }
.toast[data-leaving] { opacity: 0; translate: 1rem 0; }
.toast__icon { margin-block-start: 0.125rem; color: var(--tone, var(--fg-3)); }
.toast--ok { --tone: var(--ok); }
.toast--warn { --tone: var(--warn); }
.toast--crit { --tone: var(--crit); }
.toast--info { --tone: var(--info); }
.toast__body { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; padding-block: 0.0625rem; }
.toast__title { font-weight: var(--weight-semibold); }
.toast__msg { color: var(--fg-3); font-size: var(--text-xs); line-height: var(--lh-snug); }
.toast__actions { display: flex; align-items: center; gap: 0.125rem; margin: -0.125rem -0.125rem 0 0; }
.toast__action { font-weight: var(--weight-semibold); color: var(--accent); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: var(--text-xs); }
.toast__action:hover { background: var(--accent-tint); }
.toast__close { display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--radius-sm); color: var(--fg-3); }
.toast__close:hover { background: var(--surface-active); color: var(--fg); }
.toast__timer { position: absolute; inset: auto 0 0; block-size: 2px; background: var(--tone, var(--fg-4)); opacity: 0.5; transform-origin: left; animation: sd-toast-timer var(--toast-ms, 6000ms) linear forwards; }
.toast:hover .toast__timer, .toast:focus-within .toast__timer { animation-play-state: paused; }
@keyframes sd-toast-timer { to { scale: 0 1; } }
@media (width < 48rem) { .toast-region { inset: auto var(--space-3) var(--space-3); inline-size: auto; } }

/* ---- Jobs tray ------------------------------------------------------------------------------ */
.jobs-trigger { position: relative; }
.jobs-trigger__ring { inline-size: 1rem; block-size: 1rem; border-radius: 50%; border: 2px solid var(--line-strong); border-block-start-color: var(--accent); display: none; }
.jobs-trigger[data-busy] .jobs-trigger__ring { display: block; animation: sd-spin 0.9s linear infinite; }
.jobs-trigger[data-busy] .jobs-trigger__idle { display: none; }
.jobs { inline-size: min(24rem, calc(100vw - 2rem)); padding: 0; }
.jobs__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--line); }
.jobs__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.jobs__list { display: flex; flex-direction: column; padding: var(--space-1); }
.jobs__foot { padding: var(--space-2) var(--space-4); border-block-start: 1px solid var(--line); background: var(--surface-sunken); font-size: var(--text-xs); color: var(--fg-3); display: flex; justify-content: space-between; }
.job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.25rem var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); }
.job + .job { box-shadow: 0 -1px 0 var(--line-soft); }
.job__icon { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--radius-sm); background: var(--surface-active); color: var(--fg-2); grid-row: span 3; }
.job[data-state="running"] .job__icon { color: var(--accent); }
.job[data-state="done"] .job__icon { color: var(--ok); }
.job[data-state="failed"] .job__icon { color: var(--crit); }
.job__title { font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job__detail { grid-column: 2 / -1; font-size: var(--text-xs); color: var(--fg-3); display: flex; justify-content: space-between; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.job__progress { grid-column: 2 / -1; }
.job__pct { font-size: var(--text-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }

}

/* ---- css/components/data.css */
@layer components {
/* ==========================================================================
   Data display: card, KPI tile (clickable filter), filter bar + chips,
   saved views, facets, table (sticky, sortable, selectable, expandable,
   inline edit, resizable), bulk bar, list items, key-value list, bar list,
   chart frame.
   ========================================================================== */

/* ---- Card / panel ---------------------------------------------------------- */
.card {
  container-type: inline-size;
  display: flex; flex-direction: column;
  min-inline-size: 0;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm), var(--highlight);
}
.card__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--pad) var(--pad) 0; }
.card__titles { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; flex: 1 1 12rem; } /* R5: in a narrow card the actions wrap below the title instead of squeezing it to one word per line */
.card__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: -0.006em; display: flex; align-items: center; gap: var(--space-2); }
.card__desc { font-size: var(--text-xs); color: var(--fg-3); }
.card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-block: -0.25rem; flex: none; max-inline-size: 100%; }
.card__body { padding: var(--pad); display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; flex: 1; }
.card__body--flush { padding: 0; }
/* REQUESTS 134a/137e: a body that is also a grid or a row (this file comes after controls.css, so the
   plain .form-grid lost against .card__body; module row classes lost to the column direction) */
.card__body.form-grid { display: grid; }
.card__body--row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.card__header + .card__body--flush { margin-block-start: var(--space-3); }
.card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--pad); border-block-start: 1px solid var(--line-soft); font-size: var(--text-xs); color: var(--fg-3); }
.card--sunken { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.card--interactive { transition: box-shadow var(--dur) var(--ease-standard), translate var(--dur) var(--ease-out); text-decoration: none; color: inherit; }
.card--interactive:hover { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md), var(--highlight); translate: 0 -1px; }
.card--danger { box-shadow: 0 0 0 1px color-mix(in oklab, var(--crit) 38%, transparent), var(--shadow-sm); }
.card--danger .card__title { color: var(--crit); }

/* ---- KPI tile (works as a filter toggle when it is a <button data-filter>) ---- */
.kpi {
  --kpi-tone: var(--fg-3);
  position: relative;
  display: flex; flex-direction: column; gap: 0.375rem;
  min-inline-size: 0; padding: var(--space-3) var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm), var(--highlight);
  color: var(--fg); text-align: start; text-decoration: none;
  transition: box-shadow var(--dur) var(--ease-standard), background-color var(--dur) var(--ease-standard), translate var(--dur) var(--ease-out);
}
.kpi--ok { --kpi-tone: var(--ok); }
.kpi--warn { --kpi-tone: var(--warn); }
.kpi--crit { --kpi-tone: var(--crit); }
.kpi--info { --kpi-tone: var(--info); }
.kpi--accent { --kpi-tone: var(--accent); }
.kpi__head { display: flex; align-items: center; gap: 0.4375rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-2); min-inline-size: 0; }
.kpi__head > .icon { color: var(--kpi-tone); }
/* REQUESTS 137b: a label wraps (balanced, hyphenated), it is never cut with an ellipsis */
.kpi__label { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; hyphens: auto; min-inline-size: 0; }
.kpi__head:has(> .kpi__label) { align-items: flex-start; }
.kpi__head > .icon { margin-block-start: 0.125rem; flex: none; }
.kpi:has(.kpi__check) .kpi__head { padding-inline-end: 1.375rem; }
.kpi__value { font-family: var(--font-sans); font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi__unit { font-size: 0.55em; font-weight: var(--weight-medium); color: var(--fg-3); letter-spacing: 0; margin-inline-start: 0.125rem; }
.kpi__foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--fg-3); min-block-size: 1.25rem; }
.kpi__spark { display: block; inline-size: 100%; block-size: 1.75rem; margin-block-start: auto; padding-block-start: var(--space-1); color: var(--chart-1); }
.kpi__check {
  position: absolute; inset-block-start: 0.625rem; inset-inline-end: 0.625rem;
  display: grid; place-items: center; inline-size: 1.125rem; block-size: 1.125rem; border-radius: 50%;
  background: var(--accent-solid); color: var(--on-accent);
  opacity: 0; scale: 0.6; transition: opacity var(--dur) var(--ease-out), scale var(--dur) var(--ease-out);
}
.kpi__check .icon { inline-size: 0.75rem; block-size: 0.75rem; stroke-width: 2.4; }
.kpi__hint { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); font-size: var(--text-2xs); color: var(--fg-3); opacity: 0; translate: -2px 0; transition: opacity var(--dur), translate var(--dur) var(--ease-out); }
button.kpi, a.kpi { cursor: pointer; }
button.kpi:hover, a.kpi:hover { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md), var(--highlight); translate: 0 -1px; }
button.kpi:hover .kpi__hint, a.kpi:hover .kpi__hint { opacity: 1; translate: 0 0; }
.kpi:has(.kpi__hint) .kpi__head { padding-inline-end: 1.25rem; }
button.kpi:active { translate: 0 0; scale: 0.99; }
.kpi[aria-pressed="true"] {
  background: color-mix(in oklab, var(--accent) 7%, var(--surface-raised));
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-md);
}
.kpi[aria-pressed="true"] .kpi__check { opacity: 1; scale: 1; }
.kpi[aria-pressed="true"] .kpi__hint { display: none; }
.kpi[data-filter-zero] .kpi__value { color: var(--fg-3); }

.delta { display: inline-flex; align-items: center; gap: 0.125rem; white-space: nowrap; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.delta--up { color: var(--ok); }
.delta--down { color: var(--crit); }
.delta--flat { color: var(--fg-3); }
.delta .icon { inline-size: 0.75rem; block-size: 0.75rem; stroke-width: 2.2; }

/* ---- Filter bar --------------------------------------------------------------------- */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-block-size: var(--ctl-h); }
.filterbar__search { inline-size: min(18rem, 100%); }
.filterbar__chips { display: contents; }
.filterbar__sep { inline-size: 1px; block-size: 1.25rem; background: var(--line); }
.filterbar__result { margin-inline-start: auto; font-size: var(--text-sm); color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.filterbar__result b { color: var(--fg); font-weight: var(--weight-semibold); }

.chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  block-size: var(--ctl-h-sm); padding-inline: 0.625rem 0.25rem; border-radius: var(--radius-full);
  background: var(--accent-tint); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap;
}
@starting-style { .chip { opacity: 0; scale: 0.9; } }
.chip { transition: opacity var(--dur) var(--ease-out), scale var(--dur) var(--ease-out); }
.chip__key { color: var(--fg-3); font-weight: var(--weight-regular); }
.chip__remove { display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; color: var(--fg-3); transition: background-color var(--dur-fast), color var(--dur-fast); }
.chip__remove:hover { background: var(--accent-tint-strong); color: var(--fg); }
.chip__remove .icon { inline-size: 0.75rem; block-size: 0.75rem; stroke-width: 2.2; }
.chip--add { background: none; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg-2); padding-inline: 0.5rem 0.625rem; border-style: dashed; }
.chip--add:hover { color: var(--fg); background: var(--surface-hover); }

/* filter toggle chips (quick filters): button.chip-toggle[data-filter][aria-pressed] */
.chip-toggle {
  display: inline-flex; align-items: center; gap: 0.375rem;
  block-size: var(--ctl-h-sm); padding-inline: 0.625rem; border-radius: var(--radius-full);
  background: var(--surface-raised); color: var(--fg-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap;
  transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.chip-toggle:hover { color: var(--fg); background: var(--surface-hover); }
.chip-toggle > .icon { color: var(--tone, var(--fg-3)); inline-size: 0.875rem; block-size: 0.875rem; }
.chip-toggle__count { font-variant-numeric: tabular-nums; color: var(--fg-3); font-weight: var(--weight-semibold); }
.chip-toggle[aria-pressed="true"] { background: var(--accent-tint); color: var(--fg); box-shadow: inset 0 0 0 1px var(--accent-line); }
.chip-toggle[aria-pressed="true"] .chip-toggle__count { color: var(--accent); }

/* saved views */
.views { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.views__item {
  display: inline-flex; align-items: center; gap: 0.375rem; block-size: var(--ctl-h-sm); padding-inline: 0.5rem;
  border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-3);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.views__item:hover { background: var(--surface-hover); color: var(--fg); }
.views__item[aria-pressed="true"] { background: var(--surface-active); color: var(--fg); }
.views__item .icon { inline-size: 0.875rem; block-size: 0.875rem; }
.views__entry { display: inline-flex; align-items: center; }
.views__remove { display: inline-grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; margin-inline-start: -0.25rem; border-radius: var(--radius-xs); color: var(--fg-3); opacity: 0; transition: opacity var(--dur-fast); }
.views__remove:hover { background: var(--surface-hover); color: var(--fg); }
.views__entry:hover .views__remove, .views__remove:focus-visible { opacity: 1; }

/* ---- Facets ------------------------------------------------------------------------- */
.facets { display: flex; flex-direction: column; gap: var(--space-5); }
.facet { display: flex; flex-direction: column; gap: 1px; }
.facet__title { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; padding: 0 0.5rem var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.facet__option {
  display: flex; align-items: center; gap: 0.5625rem; min-block-size: var(--nav-item-h); padding-inline: 0.5rem;
  border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--fg-2); cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.facet__option:hover { background: var(--surface-hover); color: var(--fg); }
.facet__option:has(:checked) { color: var(--fg); }
.facet__label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 0.4375rem; }
.facet__count { font-size: var(--text-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.facet__option[data-filter-zero] .facet__label, .facet__option[data-filter-zero] .facet__count { color: var(--fg-3); } /* A11Y: no opacity (0.5 fell below 4.5:1) */
.facet__more { font-size: var(--text-xs); color: var(--fg-3); padding: 0.25rem 0.5rem; text-align: start; }
.facet__more:hover { color: var(--fg); }

/* ---- Table ------------------------------------------------------------------------------- */
.table-wrap {
  --wrap-bg: var(--surface-raised);
  --edge-shadow: light-dark(oklch(0.3 0.02 260 / 0.16), oklch(0 0 0 / 0.55));
  position: relative; overflow: auto; min-inline-size: 0;
  border-radius: var(--radius-lg);
  /* scroll affordance: an edge shadow shows on the side where more columns are hidden; the
     "local" covers scroll with the content and hide the shadow at the start and end (R5) */
  background:
    linear-gradient(to right, var(--wrap-bg) 40%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--wrap-bg) 40%, transparent) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--edge-shadow), transparent) left / 0.875rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--edge-shadow), transparent) right / 0.875rem 100% no-repeat scroll,
    var(--wrap-bg);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
  overscroll-behavior-inline: contain;
}
/* phones: tables with four or more columns keep readable columns and scroll inside their frame
   (they squeezed to one word per line before) */
@media (width < 48rem) {
  .table-wrap > .table:not([data-cards]):has(> thead > tr > :nth-child(4)) { min-inline-size: max(100%, 36rem); }
}
.table-wrap--fill { flex: 1; min-block-size: 16rem; max-block-size: max(24rem, calc(100dvh - 15rem)); }
.table--sub { inline-size: auto; min-inline-size: min(100%, 36rem); font-size: var(--text-xs); }
.table--sub thead th { position: static; background: none; block-size: 1.75rem; }
.table--sub td { block-size: 2rem; background: none; }
.table--sub tbody tr:hover > td { background: none; }
.table-wrap--plain { --wrap-bg: var(--surface); box-shadow: none; border-radius: 0; }
.card .table-wrap--plain { --wrap-bg: var(--surface-raised); }
:is(.dialog, .drawer, .popover) .table-wrap--plain { --wrap-bg: var(--surface-overlay); }
.table {
  inline-size: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: var(--table-fs);
  font-variant-numeric: tabular-nums;
}
.table caption { text-align: start; padding: var(--space-3) var(--cell-px); font-weight: var(--weight-semibold); }
.table th, .table td { padding: 0 var(--cell-px); text-align: start; vertical-align: middle; }
.table tbody th[scope="row"] { font-weight: inherit; } /* row headers keep the cell look (A11Y: key/value tables need header cells) */
.table thead th {
  position: sticky; inset-block-start: 0; z-index: 2;
  block-size: var(--head-h);
  background: var(--surface-raised);
  box-shadow: inset 0 -1px 0 var(--line);
  color: var(--fg-3); font-size: var(--text-xs); font-weight: var(--weight-medium);
  white-space: nowrap; user-select: none;
}
.table thead tr:first-child th:first-child { border-start-start-radius: var(--radius-lg); }
.table thead tr:first-child th:last-child { border-start-end-radius: var(--radius-lg); }
.table td { block-size: var(--row-h); border-block-end: 1px solid var(--line-soft); color: var(--fg); }
.table tbody tr:last-child > td { border-block-end: 0; }
.table tbody tr { transition: background-color var(--dur-fast) var(--ease-standard); }
.table tbody tr:hover > td { background: var(--surface-hover); }
.table tbody tr[aria-selected="true"] > td { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.table tbody tr[aria-selected="true"]:hover > td { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.table .num, .table [data-type="num"] { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .center { text-align: center; }
.table .nowrap { white-space: nowrap; }
.table .muted { color: var(--fg-3); }
.table .shrink { inline-size: 1%; white-space: nowrap; }
.table__check { inline-size: 2.5rem; padding-inline-end: 0; }
.table__check .check { vertical-align: middle; }
.table__expand-cell { inline-size: 2rem; padding-inline: 0.25rem 0; }
.table__actions { inline-size: 1%; white-space: nowrap; text-align: end; }
.table__actions .btn { opacity: 0; transition: opacity var(--dur-fast); }
.table tbody tr:hover .table__actions .btn, .table tbody tr:focus-within .table__actions .btn, .table__actions .btn[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .table__actions .btn { opacity: 1; } }
.table__group > td { block-size: 2rem; background: var(--surface-sunken); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--fg-2); }
.table__head-group th { block-size: 1.75rem; text-align: center; font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.table--zebra tbody tr:nth-child(even) > td { background: var(--surface-sunken); }
.table--bordered td + td, .table--bordered th + th { box-shadow: inset 1px 0 0 var(--line-soft); }

/* sortable header: <th aria-sort><button class="th-sort" data-sort="key"> */
.th-sort {
  display: inline-flex; align-items: center; gap: 0.25rem; margin-inline: -0.375rem; padding: 0.25rem 0.375rem;
  border-radius: var(--radius-sm); color: inherit; font: inherit; white-space: nowrap;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.th-sort:hover { color: var(--fg); background: var(--surface-hover); }
.th-sort .icon { inline-size: 0.75rem; block-size: 0.75rem; stroke-width: 2.2; opacity: 0; transition: opacity var(--dur-fast), rotate var(--dur) var(--ease-out); }
.th-sort:hover .icon { opacity: 0.6; }
th[aria-sort="ascending"] .th-sort, th[aria-sort="descending"] .th-sort { color: var(--fg); }
th[aria-sort="ascending"] .th-sort .icon, th[aria-sort="descending"] .th-sort .icon { opacity: 1; color: var(--accent); }
th[aria-sort="descending"] .th-sort .icon { rotate: 180deg; }
th.num .th-sort { flex-direction: row-reverse; }

/* column resizer (inserted by JS into th[data-resizable]) */
.th-resize { position: absolute; inset-block: 0.5rem; inset-inline-end: -1px; inline-size: 9px; translate: 4px 0; cursor: col-resize; touch-action: none; z-index: 1; }
.th-resize::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 4px; inline-size: 1px; background: var(--line-strong); opacity: 0; transition: opacity var(--dur-fast); }
th:hover .th-resize::after { opacity: 1; }
.th-resize:hover::after, .th-resize[data-dragging]::after { opacity: 1; background: var(--accent); inline-size: 2px; }
th[data-resizable] { position: sticky; }
th[data-resizable] { overflow: visible; }

/* expandable rows */
.row-toggle { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--radius-sm); color: var(--fg-3); transition: background-color var(--dur-fast), color var(--dur-fast); }
.row-toggle:hover { background: var(--surface-active); color: var(--fg); }
.row-toggle .icon { transition: rotate var(--dur) var(--ease-out); }
@media (pointer: coarse) { .row-toggle { inline-size: 2.5rem; block-size: 2.5rem; } } /* R5: tap target on touch screens */
.row-toggle[aria-expanded="true"] .icon { rotate: 90deg; }
.table__detail > td { block-size: auto; padding: 0; background: var(--surface-sunken); }
.table__detail-inner { padding: var(--space-4) var(--cell-px) var(--space-4) calc(var(--cell-px) + 4.5rem); }
.table tbody tr:has(+ .table__detail:not([hidden])) > td { border-block-end-color: transparent; }

/* product cell */
.cell-product { display: flex; align-items: center; gap: 0.625rem; min-inline-size: 0; }
.cell-product__thumb { inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-sm); flex: none; object-fit: cover; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
[data-density="compact"] .cell-product__thumb { inline-size: 1.5rem; block-size: 1.5rem; }
.cell-product__text { display: flex; flex-direction: column; min-inline-size: 0; max-inline-size: 18rem; line-height: 1.25; }
.cell-product__name { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); text-decoration: none; }
a.cell-product__name:hover { text-decoration: underline; }
.cell-product__sub { font-size: var(--text-xs); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-density="compact"] .cell-product__sub { display: none; }
.sku { font-family: var(--font-mono); font-size: max(0.92em, var(--text-xs)); color: var(--fg-2); white-space: nowrap; }

/* inline edit: <td data-editable data-field="price"><button class="cell-edit">…</button></td> */
.cell-edit {
  display: inline-flex; align-items: center; justify-content: inherit; gap: 0.375rem;
  inline-size: 100%; min-block-size: 1.75rem; margin-inline: -0.375rem; padding-inline: 0.375rem; box-sizing: content-box;
  border-radius: var(--radius-sm); color: inherit; font: inherit; text-align: inherit;
  transition: background-color var(--dur-fast), box-shadow var(--dur-fast);
}
td.num .cell-edit { justify-content: flex-end; }
.cell-edit .icon { inline-size: 0.75rem; block-size: 0.75rem; opacity: 0; color: var(--fg-3); }
.cell-edit:hover { background: var(--field-bg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cell-edit:hover .icon { opacity: 1; }
.cell-input {
  inline-size: 100%; block-size: 1.75rem; margin-inline: -0.375rem; padding-inline: 0.375rem; box-sizing: content-box;
  border: 0; border-radius: var(--radius-sm); background: var(--field-bg); color: var(--fg); font: inherit;
  box-shadow: inset 0 0 0 1.5px var(--focus), 0 0 0 3px color-mix(in oklab, var(--focus) 22%, transparent);
  outline: none; text-align: inherit;
}
td[data-cell-state="saved"] { animation: sd-cell-saved 1.2s var(--ease-out); }
td[data-cell-state="error"] .cell-edit { box-shadow: inset 0 0 0 1.5px var(--crit); }
@keyframes sd-cell-saved { from { background: color-mix(in oklab, var(--ok) 22%, transparent); } }

/* ---- Bulk bar ----------------------------------------------------------------------- */
.bulkbar {
  position: fixed; z-index: var(--z-bulkbar);
  inset-block-end: calc(var(--space-6) + var(--sheet-gap));
  inset-inline-start: calc(var(--rail-w) + (100vw - var(--rail-w)) / 2);
  translate: -50% 0;
  display: flex; align-items: center; gap: var(--space-1);
  padding: 0.3125rem 0.3125rem 0.3125rem var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-inverse); color: var(--fg-on-inverse);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-sm);
  transition: translate var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out), display var(--dur-slow) allow-discrete;
}
.bulkbar[hidden] { display: none; }
@starting-style { .bulkbar { translate: -50% 1rem; opacity: 0; } }
.bulkbar__count { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; padding-inline-end: var(--space-2); margin-inline-end: var(--space-1); white-space: nowrap; box-shadow: 1px 0 0 color-mix(in oklab, var(--fg-on-inverse) 20%, transparent); }
.bulkbar .btn { --btn-bg: transparent; --btn-fg: var(--fg-on-inverse); --btn-icon: color-mix(in oklab, var(--fg-on-inverse) 70%, transparent); box-shadow: none; }
.bulkbar .btn:hover { --btn-bg: color-mix(in oklab, var(--fg-on-inverse) 12%, transparent); }
.bulkbar .kbd { background: color-mix(in oklab, var(--fg-on-inverse) 14%, transparent); color: inherit; box-shadow: none; }
@media (width < 48rem) {
  .bulkbar { inset-inline: var(--space-3); translate: 0 0; overflow-x: auto; }
  @starting-style { .bulkbar { translate: 0 1rem; } }
}

/* ---- List items (split list, simple lists) -------------------------------------------- */
.list { display: flex; flex-direction: column; gap: 1px; list-style: none; margin: 0; padding: 0; }
.list-item {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.125rem var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--fg); text-decoration: none; cursor: pointer; outline: none;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
[data-density="compact"] .list-item { padding-block: 0.3125rem; }
.list-item:hover { background: var(--surface-hover); }
.list-item[aria-selected="true"] { background: var(--surface-active); }
.list-item[aria-selected="true"]::before { content: ""; position: absolute; inset-block: 0.5rem; inset-inline-start: 0; inline-size: 2px; border-radius: 2px; background: var(--accent); }
.list-item:focus-visible { box-shadow: inset 0 0 0 var(--ring-width) var(--focus); }
.list-item__media { grid-row: span 2; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-md); object-fit: cover; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
[data-density="compact"] .list-item__media { inline-size: 2rem; block-size: 2rem; }
.list-item__title { font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item__sub { grid-column: 2; font-size: var(--text-xs); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item__end { grid-row: span 2; grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; font-size: var(--text-xs); color: var(--fg-3); }

/* ---- Key-value list --------------------------------------------------------------------- */
.kv { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: var(--space-2) var(--space-6); font-size: var(--text-sm); margin: 0; }
.kv dt { color: var(--fg-3); }
.kv dd { margin: 0; color: var(--fg); min-inline-size: 0; overflow-wrap: anywhere; }
.kv--rows { gap: 0; }
.kv--rows dt, .kv--rows dd { padding-block: var(--space-2); border-block-end: 1px solid var(--line-soft); }
@container (width < 26rem) { .kv { grid-template-columns: minmax(0, 1fr); gap: 0 0; } .kv dd { margin-block-end: var(--space-2); } }

/* ---- Bar list (ranked magnitudes with native <progress>) --------------------------------- */
.barlist { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.barlist__row { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) 4.5rem; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.barlist__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
.barlist__value { text-align: end; font-variant-numeric: tabular-nums; color: var(--fg); font-weight: var(--weight-medium); }
.barlist .progress { block-size: 0.375rem; }
@container (width < 24rem) { .barlist__row { grid-template-columns: minmax(0, 1fr) auto; } .barlist__row .progress { grid-column: 1 / -1; grid-row: 2; } }

/* ---- Chart frame (SVG drawn by js/chart.js) ------------------------------------------------ */
.chart { position: relative; inline-size: 100%; block-size: var(--chart-h, 13rem); color: var(--chart-1); }
.chart--sm { --chart-h: 9rem; }
.chart--fill { flex: 1; block-size: auto; min-block-size: var(--chart-h, 13rem); }
.chart svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.chart__grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart__axis { fill: var(--chart-axis); font-size: 11px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.chart__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__area { fill: currentColor; opacity: 0.12; }
.chart__area--grad { opacity: 1; }
.chart__bar { fill: currentColor; }
.chart__bar:hover, .chart__bar[data-active] { opacity: 0.8; }
.chart__cross { stroke: var(--fg-4); stroke-width: 1; stroke-dasharray: 3 3; }
.chart__dot { fill: currentColor; stroke: var(--surface-raised); stroke-width: 2; }
.chart__tip {
  position: absolute; pointer-events: none; z-index: 2;
  padding: 0.375rem 0.5rem; border-radius: var(--radius-sm);
  background: var(--surface-overlay); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md);
  font-size: var(--text-xs); white-space: nowrap; translate: -50% calc(-100% - 10px);
}
.chart__tip b { display: block; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.chart__tip span { color: var(--fg-3); }
.spark { display: block; inline-size: 100%; block-size: 100%; color: inherit; }
.spark .chart__line { stroke-width: 1.5; }
.spark .chart__area { opacity: 0.1; }

/* ---- Phone card layout (R6): <table class="table" data-cards> --------------------------------------
   Up to 520 px a row is a card: primary column on top, the other columns as label / value pairs
   (labels from td[data-card-label], set by js/cards.js from the thead), the selection checkbox or row toggle
   in the top corner (a 2.75rem hit area; table.js also toggles the box when its cell is tapped), links in
   the cells get 2.5rem tap targets. The thead is hidden: sorting and select-all stay desktop / tablet. */
@media (width <= 32.5rem) {
  .table[data-cards], .table[data-cards] > tbody, .table[data-cards] > tbody > tr, .table[data-cards] > tbody > tr > td { display: block; }
  .table[data-cards] { min-inline-size: 0; }
  .table[data-cards] > thead, .table[data-cards] > caption { display: none; }
  .table[data-cards] > tbody > tr {
    position: relative; display: grid; gap: 0.125rem; padding: var(--space-3) var(--cell-px);
    border-block-end: 1px solid var(--line-soft);
  }
  .table[data-cards] > tbody > tr:last-child { border-block-end: 0; }
  .table[data-cards] > tbody > tr[hidden] { display: none; }
  .table[data-cards] .table__detail-inner { padding-inline: 0; }
  .table[data-cards] > tbody > tr:hover { background: var(--surface-hover); }
  .table[data-cards] > tbody > tr > td {
    block-size: auto; padding: 0; border: 0; background: none; min-inline-size: 0; overflow-wrap: anywhere;
    display: grid; grid-template-columns: minmax(5rem, 38%) minmax(0, 1fr); gap: var(--space-2); align-items: baseline;
    text-align: start; white-space: normal;
  }
  .table[data-cards] > tbody > tr:hover > td, .table[data-cards] > tbody > tr[aria-selected="true"] > td { background: none; }
  .table[data-cards] > tbody > tr[aria-selected="true"] { background: color-mix(in oklab, var(--accent) 8%, transparent); }
  .table[data-cards] > tbody > tr > td[data-card-label]::before { content: attr(data-card-label); color: var(--fg-3); font-size: var(--text-xs); }
  .table[data-cards] > tbody > tr > td:not([data-card="field"], [data-card="lead"]) { display: block; }
  .table[data-cards] > tbody > tr > td[data-card="field"] > .card-value { min-inline-size: 0; }
  .table[data-cards] > tbody > tr > td[data-card="primary"] :is(.u-muted, small, .muted, .cell-product__sub) { font-weight: var(--weight-regular); }
  .table[data-cards] > tbody > tr > td:empty { display: none; }
  .table[data-cards] > tbody > tr > td[data-card="primary"] { order: -1; font-weight: var(--weight-semibold); padding-inline-end: 2.75rem; margin-block-end: 0.125rem; }
  .table[data-cards] > tbody > tr > td[data-card="lead"] {
    position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1fr); inline-size: 2.75rem; block-size: 2.75rem; place-items: center; align-items: center;
  }
  .table[data-cards] > tbody > tr > td:not([data-card="lead"]) { justify-items: start; }
  .table[data-cards] .cell-edit { text-align: start; }
  .table[data-cards] .table__actions .btn { opacity: 1; }
  .table[data-cards] .num, .table[data-cards] [data-type="num"] { text-align: start; white-space: normal; }
  .table[data-cards] > tbody > tr > td :is(a:not(.btn, .pill, .tag), .link) { display: inline-flex; align-items: center; min-block-size: 2.5rem; min-inline-size: 2.5rem; }
  .table[data-cards] .cell-product__text { max-inline-size: none; }
  .table[data-cards] > tbody > tr > td[data-card="lead"] .check, .table[data-cards] > tbody > tr > td[data-card="lead"] .row-toggle { margin: 0; }
  .table-wrap:has(> .table[data-cards]) { background: var(--wrap-bg); }
}

/* Touch screens (R6): the interactive things inside table cells and card headers are 40 px tap targets;
   the rows are 44 px anyway, so the table layout does not change. */
@media (pointer: coarse) {
  .table .cell-edit, .table :is(button, a).cell-product__name { min-block-size: 2.5rem; }
  .table :is(button, a).cell-product__name { display: inline-flex; align-items: center; }
  .segmented--sm > a { display: inline-flex; align-items: center; min-block-size: 2.5rem; }
  summary.card__header { min-block-size: 2.5rem; }
}

}

/* ---- css/components/feedback.css */
@layer components {
/* ==========================================================================
   Feedback: status pill, count badge, dot, banner (incl. lock banner),
   progress, meter, spinner, skeleton, empty state.
   Status colour is never alone: every pill/banner carries an icon + text.
   ========================================================================== */

/* ---- Status pill ----------------------------------------------------------- */
.pill {
  --tone: var(--neutral);
  display: inline-flex; align-items: center; gap: 0.3125rem;
  block-size: 1.375rem; padding-inline: 0.4375rem 0.5625rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--tone) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 26%, transparent);
  color: color-mix(in oklab, var(--tone) 78%, var(--fg)); /* 78 %: small pill text keeps 4.5:1 on its tint (R5) */
  font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pill > .icon { inline-size: 0.8125rem; block-size: 0.8125rem; stroke-width: 2.1; color: var(--tone); }
.pill--ok { --tone: var(--ok); }
.pill--warn { --tone: var(--warn); }
.pill--crit { --tone: var(--crit); }
.pill--info { --tone: var(--info); }
.pill--special { --tone: var(--special); }
.pill--neutral { --tone: var(--fg-3); color: var(--fg-2); }
.pill--accent { --tone: var(--accent); }
.pill--solid { background: var(--tone); color: light-dark(oklch(1 0 0), oklch(0.18 0.01 260)); box-shadow: none; }
.pill--solid > .icon { color: inherit; }
.pill--sm { block-size: 1.25rem; padding-inline: 0.3125rem 0.4375rem; font-size: var(--text-xs); gap: 0.25rem; }
.pill--sm > .icon { inline-size: 0.6875rem; block-size: 0.6875rem; }
.pill--plain { background: none; box-shadow: none; padding-inline: 0; }
[data-theme="contrast"] .pill { box-shadow: inset 0 0 0 1px var(--tone); }

/* ---- Count badge & dot -------------------------------------------------------- */
.badge {
  display: inline-grid; place-items: center;
  min-inline-size: 1.125rem; block-size: 1.125rem; padding-inline: 0.3125rem;
  border-radius: var(--radius-full);
  background: var(--surface-active); color: var(--fg-2);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: 1; font-variant-numeric: tabular-nums;
}
.badge--accent { background: var(--accent-solid); color: var(--on-accent); }
.badge--crit { background: oklch(from var(--crit) 0.6 0.2 h); color: oklch(1 0 0); }
.badge--float { position: absolute; inset-block-start: -0.1875rem; inset-inline-end: -0.25rem; box-shadow: 0 0 0 2px var(--surface); min-inline-size: 1rem; block-size: 1rem; padding-inline: 0.25rem; }
.dot { display: inline-block; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--tone, var(--fg-3)); flex: none; }
.dot--ok { --tone: var(--ok); }
.dot--warn { --tone: var(--warn); }
.dot--crit { --tone: var(--crit); }
.dot--info { --tone: var(--info); }
.dot--live { box-shadow: 0 0 0 3px color-mix(in oklab, var(--tone) 25%, transparent); animation: sd-pulse 2s var(--ease-standard) infinite; }
.dot--float { position: absolute; inset-block-start: 0.375rem; inset-inline-end: 0.375rem; box-shadow: 0 0 0 2px var(--surface); }

/* ---- Banner (inline alert) ------------------------------------------------------- */
.banner {
  --tone: var(--info);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.25rem var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--tone) 9%, var(--surface-raised));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 28%, transparent);
  font-size: var(--text-sm);
}
.banner__icon { color: var(--tone); margin-block-start: 0.125rem; }
.banner__body { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; }
.banner__title { font-weight: var(--weight-semibold); color: var(--fg); }
.banner__text { color: var(--fg-2); }
.banner__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.banner__body .banner__actions { margin-block-start: var(--space-2); }
.banner--ok { --tone: var(--ok); }
.banner--warn { --tone: var(--warn); }
.banner--crit { --tone: var(--crit); }
.banner--neutral { --tone: var(--fg-3); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.banner--flush { border-radius: 0; box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--tone) 28%, transparent); }
.banner--lock { --tone: var(--warn); align-items: center; }
.banner--lock .avatar { margin-block-start: 0; }
@container (width < 34rem) { .banner { grid-template-columns: auto minmax(0, 1fr); } .banner > .banner__actions { grid-column: 2; } }

/* ---- Progress & meter ------------------------------------------------------------------ */
.progress {
  appearance: none; display: block; inline-size: 100%; block-size: 0.375rem;
  border: 0; border-radius: var(--radius-full); overflow: hidden;
  background: var(--surface-active); color: var(--progress-fill, var(--accent-solid));
}
.progress::-webkit-progress-bar { background: var(--surface-active); border-radius: var(--radius-full); }
.progress::-webkit-progress-value { background: currentColor; border-radius: var(--radius-full); transition: inline-size var(--dur-slow) var(--ease-out); }
.progress::-moz-progress-bar { background: currentColor; border-radius: var(--radius-full); }
.progress:indeterminate { background: linear-gradient(90deg, transparent 0 30%, var(--accent-solid) 30% 55%, transparent 55%) 0 0 / 200% 100% var(--surface-active); animation: sd-indeterminate 1.3s linear infinite; }
.progress:indeterminate::-webkit-progress-bar { background: transparent; }
.progress:indeterminate::-moz-progress-bar { background: transparent; }
.progress--ok { --progress-fill: var(--ok); }
.progress--warn { --progress-fill: var(--warn); }
.progress--crit { --progress-fill: var(--crit); }
.progress--muted { --progress-fill: var(--fg-3); }
.progress--lg { block-size: 0.5rem; }
.progress--thin { block-size: 0.1875rem; }
.progress-field { display: flex; flex-direction: column; gap: 0.375rem; }
.progress-field__head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); color: var(--fg-3); }
.progress-field__head b { color: var(--fg); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }

/* ---- Spinner ------------------------------------------------------------------------- */
.spinner { inline-size: 1rem; block-size: 1rem; border-radius: 50%; border: 2px solid var(--line-strong); border-block-start-color: var(--accent); animation: sd-spin 0.8s linear infinite; flex: none; }
.spinner--sm { inline-size: 0.75rem; block-size: 0.75rem; border-width: 1.5px; }

/* ---- Skeleton ------------------------------------------------------------------------- */
.skeleton {
  display: block; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-active) 0 40%, color-mix(in oklab, var(--surface-active), var(--fg) 6%) 50%, var(--surface-active) 60% 100%) 0 0 / 300% 100%;
  animation: sd-shimmer 1.6s linear infinite;
}
.skeleton--text { block-size: 0.75rem; inline-size: var(--w, 100%); margin-block: 0.25rem; }
.skeleton--title { block-size: 1.125rem; inline-size: 40%; }
.skeleton--circle { inline-size: 2rem; block-size: 2rem; border-radius: 50%; }
.skeleton--thumb { inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-sm); }
.skeleton--block { block-size: 8rem; border-radius: var(--radius-md); }
.skeleton--w-30 { --w: 30%; }
.skeleton--w-50 { --w: 50%; }
.skeleton--w-70 { --w: 70%; }
.skeleton--w-90 { --w: 90%; }
.skeleton-row { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); }
.skeleton-row > .stack { flex: 1; }
[aria-busy="true"] { cursor: progress; }

/* ---- Empty state ----------------------------------------------------------------------- */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2);
  padding: var(--space-12) var(--space-6);
  max-inline-size: 30rem; margin-inline: auto;
}
.empty__art { position: relative; inline-size: 6rem; block-size: 4.75rem; margin-block-end: var(--space-3); }
.empty__art::before, .empty__art::after {
  content: ""; position: absolute; border-radius: 10px;
  background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
}
.empty__art::before { inset: 0.75rem 0 0 1.25rem; rotate: 7deg; opacity: 0.6; }
.empty__art::after { inset: 0.5rem 1.25rem 0.25rem 0; rotate: -5deg; opacity: 0.85; }
.empty__card {
  position: absolute; inset: 0 0.75rem 0.75rem; z-index: 1;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md), var(--highlight);
  color: var(--accent);
}
.empty__card::after { content: ""; position: absolute; inset: auto 0.75rem 0.75rem; block-size: 0.25rem; border-radius: 2px; background: var(--surface-active); box-shadow: 0 -0.5rem 0 var(--surface-active); inline-size: 45%; }
.empty__card .icon { inline-size: 1.5rem; block-size: 1.5rem; stroke-width: 1.4; margin-block-end: 0.75rem; }
.empty--ok .empty__card { color: var(--ok); }
.empty__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.empty__text { color: var(--fg-3); font-size: var(--text-sm); max-inline-size: 24rem; }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-block-start: var(--space-3); }
.empty--compact { padding: var(--space-8) var(--space-4); }

/* ---- Keyframes shared by components ---------------------------------------------------- */
@keyframes sd-spin { to { rotate: 1turn; } }
@keyframes sd-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--tone) 0%, transparent); } }
@keyframes sd-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes sd-indeterminate { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton, .progress:indeterminate, .dot--live { animation: none; }
  .spinner, .jobs-trigger__ring, .btn[data-loading]::after { animation-duration: 2.4s; }
}

/* ---- Record status (dot + text, for lifecycle states like Aktiv / Entwurf) ---- */
.status { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-2); white-space: nowrap; }
.status::before { content: ""; inline-size: 0.4375rem; block-size: 0.4375rem; border-radius: 50%; background: var(--tone, var(--fg-3)); flex: none; }
.status--ok { --tone: var(--ok); }
.status--warn { --tone: var(--warn); }
.status--crit { --tone: var(--crit); }
.status--draft::before { background: none; box-shadow: inset 0 0 0 1.5px var(--fg-3); }

}

/* ---- css/components/content.css */
@layer components {
/* ==========================================================================
   Content: avatar + presence stack, timeline / audit list, diff view,
   prose (markdown guides), code block.
   ========================================================================== */

/* ---- Avatar ---------------------------------------------------------------- */
.avatar {
  position: relative; display: inline-grid; place-items: center; flex: none;
  inline-size: var(--avatar-size, 1.75rem); block-size: var(--avatar-size, 1.75rem);
  border-radius: 50%;
  background: var(--tone-bg, var(--surface-active)); color: var(--tone-ink, var(--fg-2));
  font-size: calc(var(--avatar-size, 1.75rem) * 0.4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1;
  user-select: none;
}
.avatar img { inline-size: 100%; block-size: 100%; border-radius: inherit; object-fit: cover; }
.avatar--xs { --avatar-size: 1.25rem; }
.avatar--sm { --avatar-size: 1.5rem; }
.avatar--lg { --avatar-size: 2.5rem; }
.avatar--xl { --avatar-size: 4rem; }
.avatar__status {
  position: absolute; inset-block-end: -1px; inset-inline-end: -1px;
  inline-size: 34%; block-size: 34%; min-inline-size: 7px; min-block-size: 7px; border-radius: 50%;
  background: var(--fg-3); box-shadow: 0 0 0 2px var(--avatar-ring, var(--surface));
}
.avatar__status--online { background: var(--ok); }
.avatar__status--busy { background: var(--warn); }
.avatar__status--editing { background: var(--accent-solid); }

.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack > .avatar { box-shadow: 0 0 0 2px var(--avatar-ring, var(--surface)); }
.avatar-stack > .avatar + .avatar { margin-inline-start: calc(var(--avatar-size, 1.75rem) * -0.22); }
.avatar-stack__more { background: var(--surface-active); color: var(--fg-2); font-size: var(--text-2xs); }
.presence { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--fg-3); }
.presence__text b { color: var(--fg-2); font-weight: var(--weight-medium); }

.user-chip { display: inline-flex; align-items: center; gap: 0.5rem; min-inline-size: 0; font-size: var(--text-sm); }
.user-chip__text { display: flex; flex-direction: column; line-height: 1.2; min-inline-size: 0; }
.user-chip__name { font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip__sub { font-size: var(--text-xs); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Timeline / audit list ---------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline__item { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3); padding-block-end: var(--space-4); }
.timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-block: 1.875rem 0.125rem; inset-inline-start: calc(0.875rem - 0.5px); inline-size: 1px; background: var(--line); }
.timeline__marker {
  display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%;
  background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line-strong); color: var(--fg-3);
}
.timeline__marker .icon { inline-size: 0.875rem; block-size: 0.875rem; }
.timeline__marker--ok { color: var(--ok); }
.timeline__marker--crit { color: var(--crit); }
.timeline__marker--accent { color: var(--accent); }
.timeline__body { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; padding-block-start: 0.25rem; font-size: var(--text-sm); }
.timeline__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.timeline__text { color: var(--fg-2); }
.timeline__text b { color: var(--fg); font-weight: var(--weight-medium); }
.timeline__time { font-size: var(--text-xs); color: var(--fg-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.timeline__extra { margin-block-start: var(--space-1); }
.timeline__day { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); padding: var(--space-2) 0 var(--space-3) calc(1.75rem + var(--space-3)); }

/* ---- Diff -------------------------------------------------------------------------- */
.diff { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.diff th { text-align: start; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-3); padding: 0 var(--space-3) var(--space-2); }
.diff td { padding: var(--space-2) var(--space-3); vertical-align: top; border-block-start: 1px solid var(--line-soft); }
.diff__field { color: var(--fg-3); inline-size: 9rem; white-space: nowrap; }
.diff__old { background: color-mix(in oklab, var(--crit) 7%, transparent); color: var(--fg-2); }
.diff__new { background: color-mix(in oklab, var(--ok) 8%, transparent); color: var(--fg); }
.diff__same { color: var(--fg-3); }
.diff del, .diff-inline del { text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--crit) 70%, transparent); background: color-mix(in oklab, var(--crit) 16%, transparent); color: inherit; border-radius: 3px; padding-inline: 2px; }
.diff ins, .diff-inline ins { text-decoration: none; background: color-mix(in oklab, var(--ok) 20%, transparent); color: inherit; border-radius: 3px; padding-inline: 2px; }
.diff-inline { display: inline-flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.diff-inline .icon { inline-size: 0.75rem; block-size: 0.75rem; color: var(--fg-3); }
.diff-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.diff-card { border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--text-sm); display: flex; flex-direction: column; gap: var(--space-2); }
.diff-card__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); display: flex; align-items: center; gap: 0.375rem; }
.diff-card--old { background: color-mix(in oklab, var(--crit) 6%, var(--surface-sunken)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--crit) 22%, transparent); }
.diff-card--new { background: color-mix(in oklab, var(--ok) 6%, var(--surface-sunken)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ok) 24%, transparent); }
@container (width < 30rem) { .diff-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---- Prose (markdown) --------------------------------------------------------------- */
.prose { max-inline-size: var(--measure); font-size: 0.9375rem; line-height: var(--lh-prose); color: var(--fg-2); }
.prose > * + * { margin-block-start: 1em; }
.prose :is(h1, h2, h3, h4) { color: var(--fg); scroll-margin-block-start: var(--space-8); }
.prose h1 { font-size: var(--text-2xl); margin-block-end: 0.25em; }
.prose h2 { font-size: var(--text-xl); margin-block-start: 2em; padding-block-end: 0.375em; border-block-end: 1px solid var(--line-soft); }
.prose h3 { font-size: var(--text-lg); margin-block-start: 1.6em; }
.prose h4 { font-size: var(--text-md); margin-block-start: 1.4em; }
.prose :is(h2, h3, h4) + * { margin-block-start: 0.5em; }
.prose strong { color: var(--fg); }
.prose a { color: var(--accent); text-decoration-color: var(--accent-line); }
.prose a:hover { text-decoration-color: currentColor; }
.prose :is(ul, ol) { padding-inline-start: 1.375em; }
.prose li + li { margin-block-start: 0.35em; }
.prose ul > li::marker { color: var(--fg-4); }
.prose ol > li::marker { color: var(--fg-3); font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); }
.prose blockquote { padding-inline-start: 1em; border-inline-start: 2px solid var(--accent-line); color: var(--fg-2); font-style: italic; }
.prose hr { margin-block: 2em; }
.prose :not(pre) > code { padding: 0.125em 0.375em; border-radius: var(--radius-xs); background: var(--surface-active); color: var(--fg); font-size: 0.85em; }
.prose pre { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; font-size: var(--text-xs); line-height: 1.6; color: var(--fg); }
.prose table { inline-size: 100%; font-size: var(--text-sm); border-collapse: collapse; }
.prose th { text-align: start; color: var(--fg); font-weight: var(--weight-semibold); }
.prose :is(th, td) { padding: 0.5em 0.75em; border-block-end: 1px solid var(--line); }
.prose img { border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line); }
.prose figcaption { font-size: var(--text-xs); color: var(--fg-3); margin-block-start: 0.5em; }
.prose .lead { font-size: 1.0625rem; color: var(--fg-2); }
.prose .callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-line); font-size: var(--text-sm); color: var(--fg); }
.prose .callout .icon { color: var(--accent); margin-block-start: 0.2em; }

/* ---- Code block ------------------------------------------------------------------ */
.code { border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.code__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0.25rem 0.25rem 0.25rem var(--space-3); border-block-end: 1px solid var(--line); font-size: var(--text-xs); color: var(--fg-3); }
.code__body { margin: 0; padding: var(--space-3) var(--space-4); overflow-x: auto; font-family: var(--font-mono); font-size: 0.78125rem; line-height: 1.65; color: var(--fg); tab-size: 2; }
.code__body .tok-key { color: var(--accent); }
.code__body .tok-str { color: var(--ok); }
.code__body .tok-num { color: var(--warn); }
.code__body .tok-com { color: var(--fg-3); font-style: italic; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }

}

/* ---- css/components/patterns.css */
@layer components {
/* ==========================================================================
   Patterns: composed blocks used by the page templates. Auth card, error
   page, settings sections, media viewer, review queue bar, toolbar.
   ========================================================================== */

/* ---- Toolbar (above lists) ------------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.toolbar__spacer { flex: 1; }

/* ---- Auth card ---------------------------------------------------------------- */
.auth-card {
  inline-size: min(100%, 24rem);
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-xl), var(--highlight);
}
.auth-card__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.auth-card__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.auth-card__text { font-size: var(--text-sm); color: var(--fg-3); }
.auth-card__foot { text-align: center; font-size: var(--text-xs); color: var(--fg-3); }
.auth-card__divider { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--fg-3); }
.auth-card__divider::before, .auth-card__divider::after { content: ""; flex: 1; block-size: 1px; background: var(--line); }
.auth-steps { display: flex; justify-content: center; gap: 0.375rem; }
.auth-steps span { inline-size: 1.5rem; block-size: 3px; border-radius: 2px; background: var(--line-strong); }
.auth-steps span[aria-current] { background: var(--accent); }

/* ---- Error page ------------------------------------------------------------------ */
.error-page { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); max-inline-size: 32rem; }
.error-page__code {
  font-family: var(--font-display); font-size: clamp(5rem, 3rem + 9vw, 9rem); font-weight: var(--weight-bold); line-height: 0.9; letter-spacing: -0.035em;
  background: linear-gradient(180deg, var(--fg) 10%, color-mix(in oklab, var(--fg) 10%, transparent) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-block-end: var(--space-2);
  font-variant-numeric: tabular-nums;
  pointer-events: none; /* its tall line box overlapped the links above and swallowed their clicks */
}
.error-page__title { font-size: var(--text-2xl); }
.error-page__text { color: var(--fg-3); font-size: var(--text-md); }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-block-start: var(--space-4); }
.error-page__ref { margin-block-start: var(--space-6); font-size: 0.875rem; color: var(--fg-3); display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---- Settings sections ---------------------------------------------------------------- */
.settings-section { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-4); scroll-margin-block-start: var(--space-6); }
.settings-section__head { display: flex; flex-direction: column; gap: 0.25rem; }
.settings-section__title { font-size: var(--text-lg); }
.settings-section__desc { color: var(--fg-3); font-size: var(--text-sm); }
.settings-rows { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm), var(--highlight); }
.settings-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-2) var(--space-8); align-items: center; padding: var(--space-4) var(--pad); }
.settings-row + .settings-row { border-block-start: 1px solid var(--line-soft); }
.settings-row__label { display: flex; flex-direction: column; gap: 0.25rem; }
.settings-row__title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.settings-row__desc { font-size: var(--text-xs); color: var(--fg-3); line-height: var(--lh-snug); }
.settings-row__control { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; min-inline-size: 0; }
.settings-row__control > .input, .settings-row__control > .select, .settings-row__control > .input-group, .settings-row__control > .combobox { max-inline-size: 22rem; }
.settings-row__control--stretch { justify-content: stretch; }
.settings-row__control--stretch > * { flex: 1; max-inline-size: none; }
.settings-rows__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--pad); border-block-start: 1px solid var(--line-soft); background: var(--surface-sunken); border-end-start-radius: var(--radius-lg); border-end-end-radius: var(--radius-lg); font-size: var(--text-xs); color: var(--fg-3); }
@container (width < 38rem) {
  .settings-row { grid-template-columns: minmax(0, 1fr); }
  .settings-row__control { justify-content: flex-start; }
}

/* ---- Media viewer (focus flow) ---------------------------------------------------------- */
.media { display: flex; flex-direction: column; gap: var(--space-3); }
.media__stage {
  position: relative; aspect-ratio: 4 / 5; inline-size: min(100%, calc((100dvh - 24rem) * 0.8)); min-inline-size: min(100%, 16rem);
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line);
}
.media__stage img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.media__badges { position: absolute; inset: var(--space-3) var(--space-3) auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.media__badges .pill { background: color-mix(in oklab, var(--surface-overlay) 82%, transparent); backdrop-filter: blur(8px); }
.media__nav { position: absolute; inset-block-end: var(--space-3); inset-inline-end: var(--space-3); display: flex; gap: var(--space-1); }
.media__nav .btn { --btn-bg: color-mix(in oklab, var(--surface-overlay) 85%, transparent); backdrop-filter: blur(8px); }
.media__thumbs { display: grid; grid-template-columns: repeat(auto-fill, 3.5rem); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.media__thumb { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.media__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.media__thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--accent); }
.media__thumb--issue::after { content: ""; position: absolute; inset-block-start: 4px; inset-inline-end: 4px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--crit); box-shadow: 0 0 0 2px var(--surface-sunken); }

/* placeholder product art (pure CSS, used in the showcase instead of photos) */
.art { display: block; background: var(--art-bg); }
.art--fill, .media__stage > .art, .media__thumb > .art { inline-size: 100%; block-size: 100%; }
.art--1 { --art-bg: radial-gradient(60% 50% at 50% 42%, oklch(0.62 0.05 60), transparent 70%), linear-gradient(160deg, oklch(0.84 0.03 70), oklch(0.7 0.04 50)); }
.art--2 { --art-bg: radial-gradient(55% 45% at 50% 45%, oklch(0.4 0.04 250), transparent 70%), linear-gradient(160deg, oklch(0.78 0.02 240), oklch(0.6 0.03 250)); }
.art--3 { --art-bg: radial-gradient(55% 45% at 50% 48%, oklch(0.55 0.08 150), transparent 70%), linear-gradient(160deg, oklch(0.86 0.03 140), oklch(0.68 0.05 150)); }
.art--4 { --art-bg: radial-gradient(55% 45% at 50% 45%, oklch(0.35 0.02 30), transparent 70%), linear-gradient(160deg, oklch(0.8 0.02 40), oklch(0.62 0.03 30)); }
.art--5 { --art-bg: radial-gradient(55% 45% at 50% 45%, oklch(0.68 0.1 30), transparent 70%), linear-gradient(160deg, oklch(0.9 0.03 50), oklch(0.75 0.06 40)); }
.art--6 { --art-bg: radial-gradient(55% 45% at 50% 45%, oklch(0.5 0.06 300), transparent 70%), linear-gradient(160deg, oklch(0.82 0.02 300), oklch(0.66 0.04 290)); }

/* ---- Review queue bar (y / n / s) ------------------------------------------------------------- */
.review-bar {
  position: sticky; inset-block-end: var(--space-4); z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--surface-overlay) 92%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg);
}
.review-bar__progress { display: flex; flex-direction: column; gap: 0.375rem; flex: 1; min-inline-size: 10rem; }
.review-bar__count { font-size: var(--text-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.review-bar__count b { color: var(--fg); font-weight: var(--weight-semibold); }
.review-bar__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* REQUESTS 137h: a finished queue ("Alles geprüft") shows no disabled decision buttons; progress and undo stay */
:is([data-queue], .focus-flow):has([data-queue-done]:not([hidden])) .review-bar__actions > [data-queue-decision] { display: none; }
.queue-item[hidden] { display: none; }
.queue-item { animation: sd-queue-in var(--dur-slow) var(--ease-out); }
@keyframes sd-queue-in { from { opacity: 0; translate: 0.75rem 0; } }
@media (prefers-reduced-motion: reduce) { .queue-item { animation: none; } }

/* ---- Field suggestion (AI / rule proposal next to a field) --------------------------------- */
.suggestion {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start;
  padding: var(--space-3); border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--special) 7%, var(--surface-raised));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--special) 26%, transparent);
  font-size: var(--text-sm);
}
.suggestion > .icon { color: var(--special); margin-block-start: 0.125rem; }
.suggestion__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--special); }
.suggestion__actions { display: flex; gap: var(--space-1); }

/* ---- Side by side (REQUESTS 71): one picture next to a list of things to choose from -----------------
   <div class="side-by-side">
     <div class="side-by-side__media"><img …></div>
     <div class="side-by-side__main stack"> … <ol class="pick-list"><li class="pick-card">…</li></ol></div>
   </div>
   The picture column is 10 to 22 rem; below 48 rem the picture sits on top. Modifier --sticky keeps the picture in view
   while a long list scrolls. */
.side-by-side { display: grid; grid-template-columns: minmax(10rem, 22rem) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.side-by-side__media img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line); }
.side-by-side__main { min-inline-size: 0; }
.side-by-side--sticky > .side-by-side__media { position: sticky; inset-block-start: calc(var(--topbar-h, 3.5rem) + var(--space-3)); }
@media (width < 48rem) {
  .side-by-side { grid-template-columns: minmax(0, 1fr); }
  .side-by-side--sticky > .side-by-side__media { position: static; }
  .side-by-side__media img { max-inline-size: 22rem; }
}

/* ---- Pick card: a checkable card (checkbox, thumbnail, text, meta) ---------------------------------
   <label class="pick-card"><input class="check" type="checkbox" checked> <img class="pick-card__thumb" …>
     <span class="pick-card__text"><span class="pick-card__title">…</span><span class="pick-card__sub">…</span></span>
     <span class="pick-card__meta">pill / kbd</span></label>
   Chosen = accent outline and tint; not chosen = flat, text stays at full contrast (no dimming). Partial: ui/pick-card. */
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pick-card {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer;
  background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast);
}
.pick-card:hover { box-shadow: 0 0 0 1px var(--line-strong); }
.pick-card:has(:checked) { background: color-mix(in oklab, var(--accent) 6%, var(--surface-raised)); box-shadow: 0 0 0 1.5px var(--accent); }
.pick-card:has(:focus-visible) { outline: var(--ring-width) solid var(--focus); outline-offset: 2px; }
.pick-card:has(:disabled) { cursor: not-allowed; }
.pick-card__thumb { display: block; inline-size: 4rem; block-size: 5rem; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.pick-card__thumb--none { box-shadow: inset 0 0 0 1px var(--line-soft); }
.pick-card__text { display: grid; gap: var(--space-1); min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--text-sm); }
.pick-card__sub { color: var(--fg-3); font-size: var(--text-xs); }
.pick-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
@media (width < 32rem) {
  .pick-card { grid-template-columns: auto auto minmax(0, 1fr); }
  .pick-card__meta { grid-column: 2 / -1; justify-content: flex-start; }
}

}

/* ---- css/layout.css */
@layer layout {
/* ==========================================================================
   Layout: app shell (rail + sheet), topbar, page, page header, primitives
   (stack, cluster, grid), split view, workbench, settings, focus flow,
   bare pages (auth, error).
   ========================================================================== */

/* ---- Shell --------------------------------------------------------------- */
.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-block-size: 100dvh;
  background: var(--canvas);
}
:root[data-rail="collapsed"] { --rail-w: var(--rail-w-collapsed); }

.skip-link {
  position: absolute; inset-inline-start: var(--space-3); inset-block-start: var(--space-3);
  z-index: 100; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--accent-solid); color: var(--on-accent); font-weight: var(--weight-semibold); text-decoration: none;
  translate: 0 -200%;
}
.skip-link:focus-visible { translate: 0 0; }
@media (pointer: coarse) { .skip-link { display: inline-flex; align-items: center; min-block-size: 2.5rem; } } /* R6: tap target */

/* ---- Rail (left dock) ------------------------------------------------------ */
.rail {
  position: sticky; inset-block-start: 0;
  block-size: 100dvh;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3) var(--space-2) var(--space-2) var(--space-3);
  overflow: hidden auto;
  overscroll-behavior: contain;
  color: var(--fg-2);
  z-index: var(--z-rail);
}
.rail__head { display: flex; align-items: center; gap: var(--space-2); block-size: 2.25rem; padding-inline: var(--space-1) 0; }
.rail__head .brand { flex: 1; min-inline-size: 0; }
.rail__search { margin-block: var(--space-2) var(--space-1); }
.rail__nav { display: flex; flex-direction: column; gap: var(--space-4); margin-block-start: var(--space-2); }
.rail__group { display: flex; flex-direction: column; gap: 1px; }
.rail__label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-2) var(--space-1);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3);
  white-space: nowrap;
}
.rail__link {
  position: relative;
  display: flex; align-items: center; gap: 0.625rem;
  block-size: var(--nav-item-h);
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--fg-2);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.rail__link .icon { color: var(--fg-3); transition: color var(--dur-fast) var(--ease-standard); }
.rail__link:hover { background: var(--surface-hover); color: var(--fg); }
.rail__link:hover .icon { color: var(--fg-2); }
.rail__link[aria-current="page"] {
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line), var(--highlight);
}
.rail__link[aria-current="page"] .icon { color: var(--accent); }
.rail__text { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.rail__badge {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: var(--text-2xs); font-weight: var(--weight-medium); color: var(--fg-3);
}
.rail__badge--crit::before, .rail__badge--warn::before {
  content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--crit);
}
.rail__badge--warn::before { background: var(--warn); }
.rail__foot { margin-block-start: auto; display: flex; flex-direction: column; gap: 1px; padding-block-start: var(--space-3); }

/* collapsed: icon rail */
:root[data-rail="collapsed"] .rail { padding-inline: var(--space-2); align-items: stretch; }
:root[data-rail="collapsed"] :is(.rail__text, .rail__badge, .rail__label, .rail .brand__name, .rail__search .search-trigger__text, .rail__search .kbd-group) { display: none; }
:root[data-rail="collapsed"] :is(.rail__link, .rail__search .search-trigger) { justify-content: center; padding-inline: 0; }
:root[data-rail="collapsed"] .rail__head { justify-content: center; padding: 0; }
:root[data-rail="collapsed"] .rail__head .brand { flex: none; }
:root[data-rail="collapsed"] .rail__head [data-rail-toggle] { display: none; }
:root[data-rail="collapsed"] .rail__label { display: block; block-size: 1px; padding: 0; margin: var(--space-1) var(--space-2); background: var(--line); }
:root[data-rail="collapsed"] .rail__foot [data-rail-toggle] .icon { rotate: 180deg; }

/* ---- Sheet (the raised work surface) ---------------------------------------- */
.sheet {
  position: relative;
  display: flex; flex-direction: column;
  min-inline-size: 0;
  block-size: calc(100dvh - 2 * var(--sheet-gap));
  margin: var(--sheet-gap) var(--sheet-gap) var(--sheet-gap) 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
  overflow: clip;
}

/* ---- Topbar ---------------------------------------------------------------- */
.topbar {
  flex: none;
  display: flex; align-items: center; gap: var(--space-2);
  block-size: var(--topbar-h);
  padding-inline: var(--space-3);
  border-block-end: 1px solid var(--line-soft);
  background: var(--surface);
  z-index: var(--z-sticky);
}
.topbar__start { display: flex; align-items: center; gap: var(--space-1); min-inline-size: 0; flex: 1; }
.topbar__end { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.topbar__divider { inline-size: 1px; block-size: 1.25rem; background: var(--line); margin-inline: var(--space-1); flex: none; }
.topbar__menu { display: none; }

/* ---- Page -------------------------------------------------------------------- */
.page { flex: 1; min-block-size: 0; overflow: auto; overscroll-behavior: contain; scroll-padding-block: var(--space-12); }
.page__inner {
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter) var(--space-16);
  display: flex; flex-direction: column; gap: var(--space-6);
}
.page--fill .page__inner { max-inline-size: none; min-block-size: 100%; padding-block-end: var(--space-6); }
.page--flush { overflow: hidden; display: flex; flex-direction: column; }
.page--flush > .page__inner { flex: 1; min-block-size: 0; inline-size: 100%; max-inline-size: none; margin: 0; padding: 0; gap: 0; }

.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3) var(--space-6);
}
.page-header__main { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
.page-header__eyebrow { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-3); }
.page-header__title { font-size: var(--text-2xl); }
.page-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--fg-3); font-size: var(--text-sm); }
.page-header__meta > * + *::before { content: "·"; margin-inline-end: var(--space-3); color: var(--fg-4); }
.page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.page-header + .tabs { margin-block-start: calc(-1 * var(--space-3)); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.section-head__title { font-size: var(--text-md); }
.section-head__meta { color: var(--fg-3); font-size: var(--text-sm); }

/* ---- Primitives --------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--gap)); }
.stack--2xs { --stack-gap: var(--space-1); }
.stack--xs { --stack-gap: var(--space-2); }
.stack--sm { --stack-gap: var(--space-3); }
.stack--lg { --stack-gap: var(--space-6); }
.stack--xl { --stack-gap: var(--space-10); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-2)); }
.cluster--xs { --cluster-gap: var(--space-1); }
.cluster--lg { --cluster-gap: var(--space-4); }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster--nowrap { flex-wrap: nowrap; }
.grid {
  display: grid; gap: var(--grid-gap, var(--gap));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
}
.grid--kpi { --grid-min: 11rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min)), 1fr)); }
.grid--sm { --grid-min: 12rem; }
.grid--lg { --grid-min: 22rem; }
.grid--tight { --grid-gap: var(--space-3); }

/* 12-column dashboard grid, collapses by container width */
.layout-12 { container-type: inline-size; }
.layout-12__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
@container (width < 62rem) {
  .col-8, .col-7, .col-5, .col-4 { grid-column: span 12; }
  .col-3 { grid-column: span 6; }
}
@container (width < 40rem) {
  .layout-12__grid > * { grid-column: span 12; }
}

/* ---- Split view: list | handle | detail --------------------------------------- */
.split {
  --split-list-w: 24rem;
  display: grid;
  grid-template-columns: minmax(15rem, var(--split-list-w)) auto minmax(0, 1fr);
  block-size: 100%;
  min-block-size: 0;
}
.split__list { display: flex; flex-direction: column; min-block-size: 0; min-inline-size: 0; background: var(--surface); }
.split__list-head { flex: none; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-block-end: 1px solid var(--line-soft); }
.split__list-body { flex: 1; min-block-size: 0; overflow: auto; padding: var(--space-1) var(--space-2) var(--space-4); }
.split__list-foot { flex: none; padding: var(--space-2) var(--space-3); border-block-start: 1px solid var(--line-soft); }
.split__handle {
  position: relative; inline-size: 1px; background: var(--line);
  cursor: col-resize; touch-action: none;
}
.split__handle::before { content: ""; position: absolute; inset-block: 0; inset-inline: -4px; }
.split__handle::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -1px; inline-size: 3px;
  background: var(--accent); opacity: 0; transition: opacity var(--dur) var(--ease-standard);
}
.split__handle:hover::after, .split__handle:focus-visible::after, .split__handle[data-dragging]::after { opacity: 1; }
.split__handle:focus-visible { outline: none; }
.split__detail { min-inline-size: 0; min-block-size: 0; overflow: auto; container-type: inline-size; background: var(--surface); }
.split__detail:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--ring-width) var(--focus); }
.split__detail-inner { max-inline-size: 60rem; margin-inline: auto; padding: var(--space-6) var(--gutter) var(--space-12); display: flex; flex-direction: column; gap: var(--space-6); }
.split__back { display: none; }

/* ---- Workbench: facets | content ---------------------------------------------- */
.workbench { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.workbench__aside { position: sticky; inset-block-start: 0; }
.workbench:has(> .workbench__aside[hidden]) { grid-template-columns: minmax(0, 1fr); }
.workbench__main { display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; }

/* ---- Settings: subnav | sections ------------------------------------------------- */
.settings { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.settings__nav { position: sticky; inset-block-start: 0; }
.settings__content { display: flex; flex-direction: column; gap: var(--space-8); min-inline-size: 0; max-inline-size: 56rem; }

/* ---- Focus flow (one product, review queue) --------------------------------------- */
.focus-flow { container-type: inline-size; }
.focus-flow__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-8); align-items: start; }
.focus-flow__media { position: sticky; inset-block-start: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.focus-flow__fields { display: flex; flex-direction: column; gap: var(--space-5); min-inline-size: 0; }
@container (width < 52rem) {
  .focus-flow__grid { grid-template-columns: minmax(0, 1fr); }
  .focus-flow__media { position: static; }
}

/* ---- Bare pages: auth, error -------------------------------------------------------- */
.bare {
  position: relative; isolation: isolate;
  min-block-size: 100dvh;
  display: grid; place-items: center;
  padding: var(--space-8) var(--space-4);
  background: var(--canvas);
  overflow: hidden;
}
.bare::before {
  content: ""; position: absolute; inset: -20% -10% auto; block-size: 70vh; z-index: -1;
  background:
    radial-gradient(40rem 22rem at 50% 30%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(30rem 18rem at 70% 10%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 70%);
  pointer-events: none;
}
.bare__foot { position: absolute; inset-block-end: var(--space-5); inset-inline: 0; display: flex; justify-content: center; gap: var(--space-4); font-size: var(--text-xs); color: var(--fg-3); }

/* ---- Responsive ------------------------------------------------------------------------ */
@media (width < 75rem) {
  .workbench { grid-template-columns: minmax(0, 1fr); }
  .workbench__aside { display: none; }
  .workbench__aside[data-open] { display: block; position: static; }
}
@media (width < 64rem) {
  .settings { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .settings__nav { position: static; }
}
/* Tablets (820 px with the rail open): the top bar keeps the shop name readable; the breadcrumbs
   repeat the page title and go, search becomes an icon button (R5: name and crumbs overlapped). */
@media (48rem <= width < 64rem) {
  .topbar .breadcrumbs, .topbar__divider, .topbar .search-trigger__text, .topbar .search-trigger .kbd-group { display: none; }
  .search-trigger--topbar { inline-size: auto; background: none; box-shadow: none; }
  .topbar .shop-switch { max-inline-size: 16rem; }
}
@media (width < 48rem) {
  :root { --sheet-gap: 0px; --topbar-h: 3.25rem; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; inset: 0 auto 0 0; inline-size: min(18rem, 86vw);
    background: var(--canvas); box-shadow: var(--shadow-xl);
    translate: -105% 0; visibility: hidden;
    transition: translate var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  }
  :root[data-nav="open"] .rail { translate: 0 0; visibility: visible; transition: translate var(--dur-slow) var(--ease-out), visibility 0s; }
  :root[data-nav="open"] .shell__scrim { opacity: 1; pointer-events: auto; }
  :root[data-rail="collapsed"] { --rail-w: 15rem; }
  .sheet { block-size: auto; min-block-size: 100dvh; margin: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .topbar { position: sticky; inset-block-start: 0; padding-inline: var(--space-2); }
  .topbar__menu { display: inline-flex; }
  .search-trigger--topbar { inline-size: auto; background: none; box-shadow: none; }
  .topbar .breadcrumbs, .topbar__divider, .topbar .shop-switch__meta, .topbar .search-trigger__text, .topbar .search-trigger .kbd-group, .topbar .avatar-stack { display: none; }
  .page { overflow: visible; }
  .page--flush { overflow: visible; }
  .split { grid-template-columns: minmax(0, 1fr); block-size: auto; }
  .split__handle { display: none; }
  .split[data-split-view="detail"] .split__list { display: none; }
  .split:not([data-split-view="detail"]) .split__detail { display: none; }
  .split__back { display: inline-flex; }
  .page-header { align-items: stretch; flex-direction: column; }
}
.shell__scrim {
  position: fixed; inset: 0; z-index: calc(var(--z-rail) - 1);
  background: var(--scrim); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-standard);
}
@media (width >= 48rem) { .shell__scrim { display: none; } }

}

/* ---- css/utilities.css */
@layer utilities {
/* Utilities: small, single-purpose, prefixed u-. Last normal layer before
   themes/print, so they win over components without !important. */
[hidden]:not([hidden="until-found"]) { display: none; }
.u-sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.u-num { font-variant-numeric: tabular-nums; }
.u-end { text-align: end; }
.u-mono { font-family: var(--font-mono); font-size: 0.92em; }
.u-muted { color: var(--fg-3); }
.u-subtle { color: var(--fg-2); }
.u-strong { font-weight: var(--weight-semibold); color: var(--fg); }
.u-xs { font-size: var(--text-xs); }
.u-sm { font-size: var(--text-sm); }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.u-nowrap { white-space: nowrap; }
.u-grow { flex: 1; min-inline-size: 0; }
.u-ms-auto { margin-inline-start: auto; }
.u-mt-0 { margin-block-start: 0; }
.u-w-full { inline-size: 100%; }
.u-ok { color: var(--ok); }
.u-warn { color: var(--warn); }
.u-crit { color: var(--crit); }
.u-accent { color: var(--accent); }
.u-print-only { display: none; }

}

/* ---- css/themes.css */
@layer themes {
/* ==========================================================================
   Extra themes. dark/light come from light-dark() in tokens.css; these two
   override the primitives with plain values. Layer "themes" sits above
   "tokens", so these always win, on :root or on any [data-theme] subtree.
   ========================================================================== */

/* High contrast: black ground, white ink, solid lines, yellow focus. 7:1+ text. */
[data-theme="contrast"] {
  color-scheme: dark;
  --canvas: oklch(0 0 0);
  --surface: oklch(0 0 0);
  --surface-raised: oklch(0.13 0 0);
  --surface-sunken: oklch(0 0 0);
  --surface-overlay: oklch(0.16 0 0);
  --surface-inverse: oklch(1 0 0);
  --surface-hover: oklch(1 0 0 / 0.12);
  --surface-active: oklch(1 0 0 / 0.2);
  --line-soft: oklch(1 0 0 / 0.38);
  --line: oklch(1 0 0 / 0.6);
  --line-strong: oklch(1 0 0 / 0.85);
  --field-line: oklch(0.88 0 0);
  --field-line-hover: oklch(1 0 0);
  --field-bg: oklch(0 0 0);
  --fg: oklch(1 0 0);
  --fg-2: oklch(0.95 0 0);
  --fg-3: oklch(0.88 0 0);
  --fg-4: oklch(0.72 0 0);
  --fg-on-inverse: oklch(0 0 0);
  --accent: oklch(from var(--accent-base) 0.86 min(c, 0.12) h);
  --accent-solid: oklch(from var(--accent-base) 0.86 min(c, 0.12) h);
  --accent-solid-hover: oklch(from var(--accent-base) 0.92 min(c, 0.09) h);
  --on-accent: oklch(0 0 0);
  --focus: oklch(0.92 0.18 100);
  --ok: oklch(0.88 0.15 155);
  --warn: oklch(0.9 0.15 90);
  --crit: oklch(0.82 0.13 20);
  --info: oklch(0.86 0.1 240);
  --special: oklch(0.86 0.1 300);
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 0 0 1px oklch(1 0 0);
  --shadow-xl: 0 0 0 2px oklch(1 0 0);
  --highlight: inset 0 0 0 0 transparent;
  --scrim: oklch(0 0 0 / 0.82);
  --ring-width: 3px;
  --accent-tint: oklch(from var(--accent-base) 0.86 min(c, 0.12) h / 0.2);
  --accent-tint-strong: oklch(from var(--accent-base) 0.86 min(c, 0.12) h / 0.3);
  --tooltip-bg: oklch(1 0 0);
  --tooltip-fg: oklch(0 0 0);
  --chart-grid: oklch(1 0 0 / 0.35);
}
[data-theme="contrast"] a:not([class]) { text-decoration-thickness: 2px; }

/* Paper: warm, calm, print-like. Serif display face for titles. */
[data-theme="paper"] {
  color-scheme: light;
  --font-display: "Iowan Old Style", "Charter", "Source Serif 4", "Source Serif Pro", Georgia, "Noto Serif", serif;
  --canvas: oklch(0.935 0.014 82);
  --surface: oklch(0.972 0.011 86);
  --surface-raised: oklch(0.988 0.008 88);
  --surface-sunken: oklch(0.952 0.013 84);
  --surface-overlay: oklch(0.99 0.007 88);
  --surface-inverse: oklch(0.26 0.02 60);
  --surface-hover: oklch(0.42 0.05 65 / 0.06);
  --surface-active: oklch(0.42 0.05 65 / 0.1);
  --line-soft: oklch(0.38 0.05 65 / 0.09);
  --line: oklch(0.38 0.05 65 / 0.15);
  --line-strong: oklch(0.38 0.05 65 / 0.24);
  --field-line: oklch(0.6 0.03 70);
  --field-line-hover: oklch(0.5 0.035 65);
  --field-bg: oklch(0.99 0.006 88);
  --fg: oklch(0.24 0.022 58);
  --fg-2: oklch(0.38 0.024 60);
  --fg-3: oklch(0.49 0.022 62);
  --fg-4: oklch(0.66 0.02 70);
  --fg-on-inverse: oklch(0.97 0.01 85);
  --accent: oklch(from var(--accent-base) 0.5 min(c, 0.17) h);
  --accent-solid: oklch(from var(--accent-base) 0.5 min(c, 0.17) h);
  --accent-solid-hover: oklch(from var(--accent-base) 0.45 min(c, 0.17) h);
  --focus: oklch(from var(--accent-base) 0.52 min(c, 0.17) h);
  --ok: oklch(0.48 0.11 150);
  --warn: oklch(0.53 0.12 65);
  --crit: oklch(0.51 0.17 28);
  --info: oklch(0.5 0.12 245);
  --special: oklch(0.5 0.15 310);
  --shadow-sm: 0 1px 2px oklch(0.35 0.05 60 / 0.07);
  --shadow-md: 0 1px 2px oklch(0.35 0.05 60 / 0.06), 0 6px 16px -6px oklch(0.35 0.05 60 / 0.14);
  --shadow-lg: 0 2px 6px oklch(0.35 0.05 60 / 0.06), 0 16px 40px -10px oklch(0.35 0.05 60 / 0.22);
  --shadow-xl: 0 4px 12px oklch(0.35 0.05 60 / 0.08), 0 32px 80px -16px oklch(0.35 0.05 60 / 0.3);
  --highlight: inset 0 1px 0 oklch(1 0 0 / 0.6);
  --scrim: oklch(0.3 0.03 60 / 0.3);
  --tooltip-bg: oklch(0.27 0.02 60);
  --tooltip-fg: oklch(0.97 0.01 85);
}

}

/* ---- css/print.css */
@layer print {
/* Print / PDF: reports and any page. Forces the light palette, drops the
   shell and interactive chrome, keeps tables readable across pages. */
@page { size: A4; margin: 16mm 14mm 18mm; }
@page {
  @bottom-right { content: "Seite " counter(page) " / " counter(pages); font: 8pt var(--font-sans); color: #666; }
}

@media print {
  :root, [data-theme] {
    color-scheme: light;
    --canvas: #fff; --surface: #fff; --surface-raised: #fff; --surface-sunken: #f6f6f7; --surface-overlay: #fff;
    --fg: #111; --fg-2: #333; --fg-3: #555; --fg-4: #888;
    --line: #d4d4d8; --line-soft: #e4e4e7; --line-strong: #a1a1aa;
    --shadow-sm: 0 0 #0000; --shadow-md: 0 0 #0000; --shadow-lg: 0 0 #0000; --shadow-xl: 0 0 #0000; --highlight: inset 0 0 0 0 transparent;
    --accent: oklch(from var(--accent-base) 0.45 min(c, 0.18) h);
    --ok: #15803d; --warn: #a16207; --crit: #b91c1c; --info: #1d4ed8;
  }
  html, body { background: #fff; font-size: 9.5pt; }
  .rail, .topbar, .shell__scrim, .toast-region, .bulkbar, .review-bar, .page-header__actions, .card__actions,
  .filterbar, .facets, .pagination, .btn, .tooltip, .menu, .popover, .no-print, .skip-link, .split__list, .split__handle { display: none; }
  .u-print-only { display: block; }
  .shell, .split, .workbench { display: block; }
  .sheet { margin: 0; block-size: auto; box-shadow: none; border-radius: 0; overflow: visible; }
  .page, .page--flush, .split__detail { overflow: visible; }
  .page__inner { padding: 0; max-inline-size: none; gap: 6mm; }
  .card, .kpi, .table-wrap, .settings-rows { box-shadow: 0 0 0 0.5pt var(--line); break-inside: avoid; }
  .table-wrap { overflow: visible; }
  .table thead { display: table-header-group; }
  .table thead th { position: static; background: #f4f4f5; color: #333; }
  .table tr { break-inside: avoid; }
  .table td { block-size: auto; padding-block: 1.6mm; }
  .pill { box-shadow: inset 0 0 0 0.5pt currentColor; background: none; }
  h1, h2, h3 { break-after: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: var(--fg-3); }
  .chart { break-inside: avoid; }
  * { animation: none; transition: none; }
}

/* report document (screen + print) */
.report { max-inline-size: 52rem; margin-inline: auto; padding: var(--space-8) var(--gutter) var(--space-16); display: flex; flex-direction: column; gap: var(--space-6); }
.report__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); padding-block-end: var(--space-4); border-block-end: 2px solid var(--fg); }
.report__meta { font-size: var(--text-xs); color: var(--fg-3); text-align: end; display: flex; flex-direction: column; gap: 0.125rem; }
.report__title { font-size: var(--text-2xl); }
.report__sub { color: var(--fg-3); font-size: var(--text-sm); }
.report__section { display: flex; flex-direction: column; gap: var(--space-3); break-inside: avoid-page; }
.report__foot { font-size: var(--text-xs); color: var(--fg-3); border-block-start: 1px solid var(--line); padding-block-start: var(--space-3); }
.report__toolbar { position: sticky; inset-block-start: var(--space-3); z-index: 2; display: flex; justify-content: flex-end; gap: var(--space-2); }
@media print { .report { padding: 0; max-inline-size: none; } .report__toolbar { display: none; } }

}

/* ---- charts/charts.css */
/* Shopdesk charts + data table. Components only; every colour is a theme token with a fallback.
   Tokens read (all optional): --fg --muted --bg --surface --surface-2 --border --accent --ok --warn --crit --series-1..8
   Prototype aliases (--text, --line, --surface-3) are accepted too. Motion only when prefers-reduced-motion is not "reduce". */
@layer components {
  .sdc, .sdt, .sdc-pop, .sdt-scope {
    color-scheme: inherit;
    --sdc-fg: var(--fg, var(--text, light-dark(#1a2030, #e6e9ee)));
    --sdc-muted: var(--muted, light-dark(#566073, #99a2ae));
    --sdc-bg: var(--bg, light-dark(#eceef3, #0d0f13));
    --sdc-surface: var(--surface, light-dark(#fafbfd, #15181e));
    --sdc-surface-2: var(--surface-2, light-dark(#f1f3f7, #1b1f27));
    --sdc-border: var(--border, var(--line, light-dark(#dadfe8, #2a303a)));
    --sdc-grid: color-mix(in oklab, var(--sdc-border) 70%, transparent);
    --sdc-accent: var(--accent, light-dark(#2563c9, #6ea8ff));
    --sdc-ok: var(--ok, light-dark(#047857, #3fcf9e));
    --sdc-warn: var(--warn, light-dark(#b45309, #f0a030));
    --sdc-crit: var(--crit, light-dark(#c4302b, #ff7b72));
    --sdc-s1: var(--series-1, light-dark(#1567e5, #8181f6));
    --sdc-s2: var(--series-2, light-dark(#946e00, #dcc82d));
    --sdc-s3: var(--series-3, light-dark(#920070, #d26aa7));
    --sdc-s4: var(--series-4, light-dark(#2b8a4b, #00a25b));
    --sdc-s5: var(--series-5, light-dark(#8b55b0, #a9e3c9));
    --sdc-s6: var(--series-6, light-dark(#744300, #8a9219));
    --sdc-s7: var(--series-7, light-dark(#68757a, #c9b8ff));
    --sdc-s8: var(--series-8, light-dark(#474f3c, #4aec87));
    --sdc-radius: var(--radius, 8px);
    font-family: inherit; color: var(--sdc-fg);
  }
  .sdc { position: relative; display: block; min-width: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
  .sdc.sdc-is-spark { display: inline-block; vertical-align: middle; }
  .sdc * { box-sizing: border-box; }
  .sdc-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block-end: .5rem; flex-wrap: wrap; }
  .sdc-head[hidden] { display: none; }
  .sdc-title { font-weight: 600; font-size: 14px; }
  .sdc-tools { display: flex; gap: .4rem; align-items: center; }
  /* REQUESTS 134c: inside a titled card (or with cfg.embedded) the chart title stays for screen readers only and the tools sit right, tight */
  .sdc--embedded .sdc-title, .card:has(.card__title) .sdc-title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sdc--embedded .sdc-head, .card:has(.card__title) .sdc-head { justify-content: flex-end; margin-block: calc(var(--space-2, .5rem) * -1) 0; }
  .sdc-head--moved { display: none; }
  .sdc-btn, .sdt-btn { appearance: none; font: inherit; font-size: 12px; line-height: 1.2; padding: .35rem .65rem; border: 1px solid var(--sdc-border); background: var(--sdc-surface-2); color: var(--sdc-fg); border-radius: 6px; cursor: pointer; list-style: none; white-space: nowrap; }
  .sdc-btn::-webkit-details-marker, .sdt-btn::-webkit-details-marker { display: none; }
  .sdc-btn:hover, .sdt-btn:hover { border-color: var(--sdc-accent); }
  .sdt-btn.primary { background: var(--sdc-accent); color: var(--on-accent, light-dark(#fff, #0b1020)); border-color: transparent; font-weight: 600; }
  .sdt-btn.danger { color: var(--sdc-crit); }
  .sdt-btn[aria-pressed="true"] { border-color: var(--sdc-accent); background: color-mix(in oklab, var(--sdc-accent) 14%, var(--sdc-surface)); }
  :where(.sdc, .sdt) :focus-visible { outline: 2px solid var(--sdc-accent); outline-offset: 2px; border-radius: 3px; }
  .sdc-menu, .sdt-menu { position: relative; }
  .sdc-menu-list, .sdt-menu-list { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 30; min-width: 11rem; display: flex; flex-direction: column; gap: .15rem; padding: .4rem; background: var(--sdc-surface); border: 1px solid var(--sdc-border); border-radius: var(--sdc-radius); box-shadow: 0 8px 24px color-mix(in oklab, #000 35%, transparent); max-height: 60vh; overflow: auto; }
  .sdc-menu-list button, .sdt-menu-list > button { text-align: start; background: none; border: 0; color: inherit; font: inherit; padding: .35rem .5rem; border-radius: 4px; cursor: pointer; }
  .sdc-menu-list button:hover, .sdt-menu-list > button:hover { background: var(--sdc-surface-2); }
  .sdt-menu-list label { display: flex; gap: .5rem; align-items: center; padding: .25rem .4rem; white-space: nowrap; }

  .sdc-stage { position: relative; outline-offset: 2px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .sdc-svg { display: block; overflow: visible; max-width: 100%; }
  .sdc-is-spark .sdc-svg { overflow: hidden; }
  .sdc-axis text, .sdc-grid text { fill: var(--sdc-muted); font-size: 12px; }
  .sdc-axis .tk { stroke: var(--sdc-border); }
  .sdc-axis-title { fill: var(--sdc-muted); font-size: 12px; }
  .sdc-grid line { stroke: var(--sdc-grid); stroke-width: 1; shape-rendering: crispEdges; }
  .sdc-grid line.zero { stroke: var(--sdc-border); }
  .sdc-line .ln { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .sdc-line.dashed .ln { stroke-dasharray: 5 4; stroke-width: 1.6; opacity: .85; }
  .sdc-line .area { fill: var(--c); fill-opacity: .14; stroke: none; }
  .sdc-line .dots circle { fill: var(--sdc-surface); stroke: var(--c); stroke-width: 1.6; }
  .sdc-bars rect { fill: var(--c); }
  .sdc-cross line { stroke: var(--sdc-muted); stroke-width: 1; stroke-dasharray: 3 3; }
  .sdc-cross circle { fill: var(--c); stroke: var(--sdc-surface); stroke-width: 2; }
  .sdc-cross circle.ring { fill: none; stroke: var(--sdc-fg); stroke-width: 2; }
  .sdc-brush { fill: color-mix(in oklab, var(--sdc-accent) 18%, transparent); stroke: var(--sdc-accent); stroke-width: 1; }
  .sdc-ann-band { fill: color-mix(in oklab, var(--sdc-accent) 6%, transparent); }
  .sdc-ann-band.tone-warn { fill: color-mix(in oklab, var(--sdc-warn) 7%, transparent); }
  .sdc-ann-band.tone-ok { fill: color-mix(in oklab, var(--sdc-ok) 7%, transparent); }
  .sdc-ann-band.tone-crit { fill: color-mix(in oklab, var(--sdc-crit) 7%, transparent); }
  .sdc-ann-line { stroke: var(--sdc-muted); stroke-dasharray: 2 3; }
  .sdc-ann-txt { fill: var(--sdc-fg); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--sdc-surface); stroke-width: 2.5px; stroke-linejoin: round; pointer-events: none; }

  /* markers: colour per kind */
  .mkr, .mkr-band, .mkr-line, .ic { --k: var(--sdc-muted); }
  .k-shop_switch { --k: var(--sdc-accent); } .k-maintenance { --k: var(--sdc-warn); } .k-campaign { --k: var(--sdc-s5); }
  .k-price_action { --k: var(--sdc-s3); } .k-event { --k: var(--sdc-s2); } .k-process { --k: var(--sdc-s1); } .k-other { --k: var(--sdc-muted); }
  .mkr-band { fill: color-mix(in oklab, var(--k) 5%, transparent); }
  .mkr-line { stroke: var(--k); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
  .mkr { cursor: pointer; } .mkr .hit { fill: transparent; }
  .mkr .ic { fill: var(--k); stroke: none; } .mkr .ic .pole { stroke: var(--k); fill: none; }
  .mkr.priv .ic { fill: none; stroke: var(--k); stroke-width: 1.4; }
  .mkr text { fill: var(--sdc-fg); font-size: 12px; }
  .mkr:hover .hit, .mkr:focus-visible .hit { fill: color-mix(in oklab, var(--k) 14%, transparent); }
  .mkr:focus-visible { outline: none; } .mkr:focus-visible .hit { stroke: var(--sdc-accent); stroke-width: 2; rx: 4; }
  .sdc-chip { cursor: pointer; } .sdc-chip rect { fill: var(--sdc-surface-2); stroke: var(--sdc-border); } .sdc-chip text { fill: var(--sdc-fg); font-size: 12px; font-weight: 600; }
  .sdc-chip:hover rect, .sdc-chip:focus-visible rect { stroke: var(--sdc-accent); } .sdc-chip:focus-visible { outline: none; }
  .sdc-pop { position: absolute; z-index: 20; width: max-content; max-width: min(320px, 90%); padding: .6rem .7rem; background: var(--sdc-surface); border: 1px solid var(--sdc-border); border-radius: var(--sdc-radius); box-shadow: 0 8px 24px color-mix(in oklab, #000 35%, transparent); font-size: 12.5px; display: flex; flex-direction: column; gap: .6rem; user-select: text; }
  .sdc-pop { max-height: min(320px, 80%); overflow: auto; }
  .sdc-pop[hidden] { display: none; } .sdc-pop.pinned { border-color: var(--sdc-accent); }
  .sdc-pop-h { display: flex; gap: .4rem; align-items: center; } .sdc-pop-h .ic { fill: var(--k); flex: none; }
  .sdc-pop-m { color: var(--sdc-muted); } .sdc-pop p { margin: .25rem 0 0; } .sdc-pop a { color: var(--sdc-accent); }

  .sdc-tip { position: absolute; z-index: 10; pointer-events: none; min-width: 9rem; max-width: 18rem; padding: .5rem .6rem; background: var(--sdc-surface); border: 1px solid var(--sdc-border); border-radius: var(--sdc-radius); box-shadow: 0 6px 20px color-mix(in oklab, #000 30%, transparent); font-size: 12.5px; line-height: 1.4; }
  .sdc-tip[hidden] { display: none; } .sdc-tip.pinned { border-color: var(--sdc-accent); }
  .sdc-tip-t { font-weight: 600; margin-block-end: .25rem; }
  .sdc-tip-r { display: flex; align-items: baseline; gap: .45rem; } .sdc-tip-r .n { color: var(--sdc-muted); flex: 1; } .sdc-tip-r b { font-weight: 600; text-align: end; }
  .sdc-tip-s { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--sdc-border); color: var(--sdc-muted); }
  .sdc-sw { display: inline-block; flex: none; width: .7rem; height: .7rem; border-radius: 2px; background: var(--c); align-self: center; }
  .sdc-sw.dash { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 6px); height: 3px; width: 1rem; border-radius: 0; }
  .sdc-sw.mk { background: var(--sdc-accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }

  .sdc-legend { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin-block-start: .5rem; }
  .sdc-legend:empty { display: none; }
  .sdc-leg { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem; font: inherit; font-size: 12.5px; color: var(--sdc-fg); background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
  .sdc-leg:hover { border-color: var(--sdc-border); } .sdc-leg.is-off { opacity: .5; } .sdc-leg.is-off span { text-decoration: line-through; } .sdc-leg small { color: var(--sdc-muted); }
  @media (pointer: coarse) { .sdc-leg, .sdc-btn, .sdt-btn { min-block-size: 2.5rem; } .sdc-btn, .sdt-btn { display: inline-flex; align-items: center; } } /* R5: legend and menu buttons are tap targets on touch screens */
  .sdc-leg-col { flex-direction: column; }

  .sdc-seg { fill: var(--c); cursor: default; transition: none; } .sdc-seg.on, .sdc-seg:hover { filter: brightness(1.12); } .sdc-seg[data-filter] { cursor: pointer; }
  .sdc-center-v { fill: var(--sdc-fg); font-size: 20px; font-weight: 700; } .sdc-center-l { fill: var(--sdc-muted); font-size: 12px; }
  .sdc-row .lab, .sdc-row .val { fill: var(--sdc-fg); font-size: 12.5px; } .sdc-row .val { font-weight: 600; } .sdc-row .sub { fill: var(--sdc-muted); font-size: 12px; }
  .sdc-row .track { fill: color-mix(in oklab, var(--sdc-border) 45%, transparent); } .sdc-row .bar { fill: var(--c); } .sdc-row .hit { fill: transparent; }
  .sdc-row.clickable { cursor: pointer; } .sdc-row.clickable:hover .hit, .sdc-row:focus-visible .hit { fill: color-mix(in oklab, var(--sdc-accent) 9%, transparent); }
  .sdc-row:focus-visible { outline: none; } .sdc-row:focus-visible .hit { stroke: var(--sdc-accent); stroke-width: 2; rx: 4; }
  .sdc-row.is-active .hit { fill: color-mix(in oklab, var(--sdc-accent) 14%, transparent); }
  .cell { fill: color-mix(in oklch, var(--sdc-accent) calc(6% + var(--t) * .84%), var(--sdc-surface-2)); } .cell.on { stroke: var(--sdc-fg); stroke-width: 2; }
  .hx, .hy { fill: var(--sdc-muted); font-size: 12px; }
  .pt { fill: color-mix(in oklab, var(--c) 70%, transparent); stroke: var(--c); stroke-width: 1.5; }
  .sdc-spark-line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .sdc-spark-area { fill-opacity: .15; } .sdc-spark { display: inline-block; vertical-align: middle; overflow: visible; }

  .sdc-state { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: .6rem; align-items: center; justify-content: center; text-align: center; padding: 1rem; background: color-mix(in oklab, var(--sdc-surface) 82%, transparent); color: var(--sdc-muted); border-radius: var(--sdc-radius); }
  .sdc-state[hidden] { display: none; } .sdc-state[role=alert] .sdc-state-text { color: var(--sdc-crit); }
  .sdc-skel { position: absolute; inset: 12% 4%; border-radius: var(--sdc-radius); background: linear-gradient(90deg, var(--sdc-surface-2), color-mix(in oklab, var(--sdc-border) 60%, var(--sdc-surface-2)), var(--sdc-surface-2)); background-size: 200% 100%; opacity: .6; }
  .sdc-sr-live, .sdc-sr-table, .sdt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .sdc-anim .sdc-line, .sdc-anim .sdc-bars, .sdc-anim .sdc-seg, .sdc-anim .sdc-row .bar { animation: sdc-in .5s ease-out both; }
    .sdc-skel { animation: sdc-shimmer 1.4s linear infinite; }
    .sdc-tip, .sdc-pop { animation: sdc-pop .12s ease-out; }
    @keyframes sdc-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes sdc-pop { from { opacity: 0; translate: 0 3px; } to { opacity: 1; translate: 0 0; } }
    @keyframes sdc-shimmer { to { background-position: -200% 0; } }
  }

  /* ------------------------------------------------------------------ data table */
  .sdt { display: flex; flex-direction: column; gap: .5rem; min-width: 0; font-size: 13px; font-variant-numeric: tabular-nums; position: relative; }
  .sdt-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  .sdt-grow { flex: 1; } .sdt-count { color: var(--sdc-muted); font-size: 12.5px; }
  .sdt-search input { font: inherit; font-size: 13px; width: 15rem; max-width: 100%; padding: .4rem .6rem; border: 1px solid var(--sdc-border); background: var(--sdc-surface); color: var(--sdc-fg); border-radius: 6px; }
  .sdt-search input:focus { outline: 2px solid var(--sdc-accent); outline-offset: 1px; }
  .sdt-sel { display: flex; gap: .4rem; align-items: center; font-size: 12.5px; color: var(--sdc-muted); } .sdt-sel select { font: inherit; padding: .3rem; background: var(--sdc-surface); color: var(--sdc-fg); border: 1px solid var(--sdc-border); border-radius: 6px; }
  .sdt-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .sdt-chips[hidden] { display: none; }
  .sdt-chip { display: inline-flex; align-items: center; gap: .1rem; padding: .15rem .15rem .15rem .6rem; border-radius: 99px; background: color-mix(in oklab, var(--sdc-accent) 14%, var(--sdc-surface)); border: 1px solid color-mix(in oklab, var(--sdc-accent) 40%, var(--sdc-border)); font-size: 12.5px; }
  .sdt-chip button { appearance: none; border: 0; background: none; color: inherit; font-size: 15px; line-height: 1; width: 1.6rem; height: 1.6rem; border-radius: 50%; cursor: pointer; } .sdt-chip button:hover { background: color-mix(in oklab, var(--sdc-fg) 12%, transparent); }
  .sdt-mode, .sdt-clear { appearance: none; background: none; border: 0; color: var(--sdc-muted); font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: .25rem; }
  .sdt-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--sdc-radius); background: color-mix(in oklab, var(--sdc-accent) 12%, var(--sdc-surface)); border: 1px solid color-mix(in oklab, var(--sdc-accent) 35%, var(--sdc-border)); position: sticky; top: 0; z-index: 6; }
  .sdt-bulk[hidden] { display: none; } .sdt-bulk-n { margin-inline-end: .5rem; }
  .sdt-scroll { overflow: auto; max-height: var(--sdt-max-h, 70vh); border: 1px solid var(--sdc-border); border-radius: var(--sdc-radius); background: var(--sdc-surface); overscroll-behavior: contain; }
  .sdt-scroll:focus-visible { outline: 2px solid var(--sdc-accent); outline-offset: 2px; }
  .sdt-table { width: 100%; border-collapse: separate; border-spacing: 0; }
  .sdt-table th, .sdt-table td { padding: 0 .75rem; height: var(--sdt-rh, 36px); text-align: start; border-bottom: 1px solid var(--sdc-border); }
  .sdt-table thead th { position: sticky; top: 0; z-index: 3; background: var(--sdc-surface-2); font-weight: 600; font-size: 12.5px; color: var(--sdc-muted); white-space: nowrap; }
  .sdt-table thead .sdt-fr th { top: var(--sdt-rh, 36px); display: none; padding-block: .25rem; height: auto; z-index: 2; }
  .sdt-showfilters thead .sdt-fr th { display: table-cell; }
  .sdt-fr input { width: 100%; min-width: 4rem; font: inherit; font-size: 12.5px; padding: .25rem .4rem; background: var(--sdc-surface); color: var(--sdc-fg); border: 1px solid var(--sdc-border); border-radius: 4px; }
  .sdt-table tfoot td { position: sticky; bottom: 0; background: var(--sdc-surface-2); font-weight: 600; border-top: 1px solid var(--sdc-border); border-bottom: 0; z-index: 2; }
  .sdt-agg-l { color: var(--sdc-muted); font-weight: 500; margin-inline-end: .25rem; }
  .a-right { text-align: end !important; } .a-center { text-align: center !important; }
  .sdt-sort { appearance: none; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: .4rem 0; display: inline-flex; align-items: center; gap: .3rem; } .sdt-sort:hover { color: var(--sdc-fg); } .sdt-sort i { font-style: normal; font-size: 9px; min-width: 1em; color: var(--sdc-accent); }
  th.a-right .sdt-sort { flex-direction: row-reverse; }
  .sdt-table tbody tr:hover { background: color-mix(in oklab, var(--sdc-fg) 4%, transparent); }
  .sdt-table tbody tr.is-selected { background: color-mix(in oklab, var(--sdc-accent) 12%, transparent); }
  .sdt-table tbody tr.is-active { box-shadow: inset 3px 0 0 var(--sdc-accent); background: color-mix(in oklab, var(--sdc-accent) 7%, transparent); }
  .sdt-scroll:focus-within tbody tr.is-active td:first-child { box-shadow: inset 0 0 0 0 transparent; }
  .sdt-table td.is-dirty { box-shadow: inset 3px 0 0 var(--sdc-warn); background: color-mix(in oklab, var(--sdc-warn) 10%, transparent); }
  .sdt-table td.is-editable { cursor: text; }
  .sdt-virtual td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28rem; }
  .sdt-virtual tr.sdt-sp td, .sdt-table tr.sdt-sp td { padding: 0; border: 0; }
  .sdt-sel-c, .sdt-exp-c { width: 2.25rem; padding-inline: .5rem !important; } .sdt-sel-c input { width: 1rem; height: 1rem; accent-color: var(--sdc-accent); }
  .sdt-x, .sdt-gtoggle { appearance: none; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; } .sdt-x i { font-style: normal; }
  tr.sdt-group td { background: var(--sdc-surface-2); font-weight: 600; } .sdt-gcount { color: var(--sdc-muted); font-weight: 400; margin-inline-start: .35rem; } .sdt-gsum { font-weight: 600; }
  tr.sdt-detail td { height: var(--sdt-dh, auto); padding: 0; background: color-mix(in oklab, var(--sdc-fg) 3%, var(--sdc-surface)); white-space: normal; } .sdt-detail-in { padding: .75rem 1rem; max-height: var(--sdt-dh); overflow: auto; }
  tr.sdt-empty td { text-align: center; color: var(--sdc-muted); padding: 2rem; }
  .sdt-tag { display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: 12px; border: 1px solid var(--sdc-border); background: var(--sdc-surface-2); }
  .sdt-tag[data-tone=ok] { color: var(--sdc-ok); border-color: color-mix(in oklab, var(--sdc-ok) 45%, var(--sdc-border)); } .sdt-tag[data-tone=warn] { color: var(--sdc-warn); border-color: color-mix(in oklab, var(--sdc-warn) 45%, var(--sdc-border)); } .sdt-tag[data-tone=crit] { color: var(--sdc-crit); border-color: color-mix(in oklab, var(--sdc-crit) 45%, var(--sdc-border)); }
  .sdt-edit { width: 100%; font: inherit; padding: .2rem .35rem; background: var(--sdc-surface); color: var(--sdc-fg); border: 1px solid var(--sdc-accent); border-radius: 4px; } .sdt-edit[aria-invalid=true] { border-color: var(--sdc-crit); }
  .sdt-edit-msg { display: block; font-size: 11.5px; color: var(--sdc-crit); line-height: 1.2; }
  .sdt-foot { display: flex; gap: .75rem; align-items: center; } .sdt-foot:empty { display: none; } .sdt-err { color: var(--sdc-crit); }
  .sdt-table.is-loading tbody { opacity: .6; }
  .sdt-views { display: flex; flex-direction: column; } .sdt-view { display: flex; } .sdt-view button { background: none; border: 0; color: inherit; font: inherit; padding: .3rem .5rem; cursor: pointer; border-radius: 4px; } .sdt-view button:first-child { flex: 1; text-align: start; } .sdt-view button:hover { background: var(--sdc-surface-2); }
  .sdt-vsave { display: flex; gap: .4rem; margin-top: .3rem; padding-top: .4rem; border-top: 1px solid var(--sdc-border); } .sdt-vsave input { flex: 1; min-width: 0; font: inherit; padding: .3rem; background: var(--sdc-surface); color: var(--sdc-fg); border: 1px solid var(--sdc-border); border-radius: 4px; }

  /* clickable filter tiles (anything with data-filter) */
  [data-filter] { cursor: pointer; }
  [data-filter].is-active { outline: 2px solid var(--accent, light-dark(#2563c9, #6ea8ff)); outline-offset: 1px; }
  [data-filter]:focus-visible { outline: 2px solid var(--accent, light-dark(#2563c9, #6ea8ff)); outline-offset: 2px; }
}


/* ---- compat.css */
/* Legacy bridge (OWNER: shell-design), @layer compat.
   The first scaffold had its own tokens and a few plain classes (card, btn primary,
   field + bare label/input, flash st-*, pill st-*, muted, hint, warn). Templates of
   other packages still use them (internal/auth, older modules). This file maps them
   onto the design system so those pages look right without edits.
   New markup should use the design-system classes and the ui/* partials (docs/UI-GUIDE.md). */
@layer compat {
  /* ---- old token names -> design tokens ---- */
  :root, [data-theme] {
    --bg: var(--canvas);
    --surface-2: var(--surface-sunken);
    --surface-3: var(--surface-active);
    --text: var(--fg);
    --muted: var(--fg-3);
    --faint: var(--fg-3);
    --border: var(--line);
    --radius: var(--radius-lg);
    --radius-s: var(--radius-md);
    --shadow: var(--shadow-sm);
    --shadow-pop: var(--shadow-lg);
    --pill-h: 1.375rem;
    --high: var(--warn);
    --med: var(--warn);
    --low: var(--info);
    --none: var(--fg-3);
    --violet: var(--special);
    /* charts library: series colours from the design tokens (series 1 = accent) */
    --series-1: var(--chart-1);
  }

  /* ---- text helpers ---- */
  .muted { color: var(--fg-3); }
  .hint { font-size: var(--text-xs); color: var(--fg-3); line-height: var(--lh-snug); }
  .warn { color: var(--warn-text); }
  .err, .error { color: var(--crit); }
  .ic { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.15em; }
  .ic:empty { inline-size: var(--icon-md); block-size: var(--icon-md); }

  /* ---- card without card__* children: padded box ---- */
  .card:not(:has(> .card__header, > .card__body, > .card__footer, > .table-wrap)) { padding: var(--pad); gap: var(--space-4); }
  .card > h1, .card > h2 { font-size: var(--text-lg); }
  /* REQUESTS 134b: opt-in. Only plain forms (no class), .acc-form and .form-stack are laid out as a column; forms with their own layout class (.cluster, .filterbar, .toolbar, module rows) keep it. */
  .card > form:is(:not([class]), .acc-form, .form-stack), .card form:is(:not([class]), .acc-form, .form-stack) { display: flex; flex-direction: column; gap: var(--space-3); }
  .card form.acc-inline, .card form.inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
  main.page h2:not([class]) { font-size: var(--text-md); margin-block-start: var(--space-2); }

  /* bare pages (login, 2FA, activation): a plain .card becomes the auth card */
  .bare > .card, .bare > section.card {
    inline-size: min(100%, 26rem);
    padding: var(--space-8) var(--space-6) var(--space-6);
    gap: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--line), var(--shadow-xl), var(--highlight);
  }
  .bare > .card > h1, .bare .acc-brand h1 { font-size: var(--text-xl); text-align: center; letter-spacing: var(--tracking-snug); }
  .bare .acc-brand { display: flex; flex-direction: column; align-items: center; justify-items: center; text-align: center; gap: var(--space-2); }
  .bare .acc-brand .muted, .bare .acc-brand p { font-size: var(--text-sm); }
  .bare .acc-logo { max-block-size: 2.75rem; inline-size: auto; }
  .bare .acc-brand:not(:has(.acc-logo))::before {
    content: ""; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 0.75rem;
    background: linear-gradient(140deg, var(--accent), color-mix(in oklab, var(--accent) 45%, var(--surface)));
    box-shadow: var(--shadow-md), inset 0 1px 0 oklch(1 0 0 / 0.25);
  }
  .bare .acc-foot, .bare .acc-small { text-align: center; font-size: var(--text-xs); color: var(--fg-3); }
  .bare .acc-dev { border-block-start: 1px solid var(--line); padding-block-start: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
  .bare details > summary { cursor: pointer; font-size: var(--text-sm); color: var(--fg-2); }

  /* ---- buttons ---- */
  .btn.primary {
    --btn-bg: var(--accent-solid); --btn-fg: var(--on-accent); --btn-icon: currentColor;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-solid), black 18%), 0 1px 2px oklch(0 0 0 / 0.18), inset 0 1px 0 oklch(1 0 0 / 0.2);
  }
  .btn.primary:hover { --btn-bg: var(--accent-solid-hover); }
  .btn.danger { --btn-bg: transparent; --btn-fg: var(--crit); --btn-icon: currentColor; box-shadow: 0 0 0 1px color-mix(in oklab, var(--crit) 40%, transparent); }
  .btn.danger:hover { --btn-bg: color-mix(in oklab, var(--crit) 10%, transparent); }
  .btn.small, .btn.sm { block-size: var(--ctl-h-sm); padding-inline: 0.5625rem; font-size: var(--text-xs); }
  .acc-wide { inline-size: 100%; }

  /* ---- fields: bare label + control inside .field, label-wrapped controls ---- */
  .field > label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg); }
  :is(.field, .card, .acc-form, form) :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="color"], [class]), select:not([class]), textarea:not([class])) {
    inline-size: 100%;
    block-size: var(--ctl-h);
    padding-inline: 0.625rem;
    border: 1px solid var(--field-line);
    border-radius: var(--radius-md);
    background: var(--field-bg);
    color: var(--fg);
    font-size: var(--text-sm);
    box-shadow: inset 0 1px 1px light-dark(oklch(0 0 0 / 0.03), oklch(0 0 0 / 0.15));
  }
  :is(.field, .card, .acc-form, form) textarea:not([class]) { block-size: auto; min-block-size: 5rem; padding-block: 0.5rem; }
  :is(.field, .card, .acc-form, form) :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [class]), select:not([class]), textarea:not([class])):focus {
    outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), 0 0 0 4px color-mix(in oklab, var(--focus) 22%, transparent); /* R5: same 2 px focus line as the kit fields */
  }
  /* screentest R5: plain fields used the browser's grey placeholder (#757575, 4.2:1 on the dark field) */
  :is(.field, .card, .acc-form, form) :is(input:not([class]), textarea:not([class]))::placeholder { color: var(--fg-3); opacity: 1; }
  .card form > label:not([class]), .acc-form > label:not([class]) { display: flex; flex-direction: column; gap: 0.375rem; font-size: var(--text-sm); font-weight: var(--weight-medium); }
  .card label:not([class]):has(> input[type="checkbox"]) { flex-direction: row; align-items: center; gap: var(--space-2); font-weight: var(--weight-regular); }
  fieldset:not([class]) { display: flex; flex-direction: column; gap: var(--space-2); }
  fieldset:not([class]) > legend { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-block-end: var(--space-1); }

  /* ---- flash messages and status pills (st-ok | st-warn | st-err | st-info) ---- */
  .flash {
    --tone: var(--info);
    display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-sm);
    background: color-mix(in oklab, var(--tone) 9%, var(--surface-raised));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 28%, transparent);
  }
  .st-ok { --tone: var(--ok); }
  .st-warn { --tone: var(--warn); }
  .st-err, .st-crit { --tone: var(--crit); }
  .st-info { --tone: var(--info); }
  .pill:is(.st-ok, .st-warn, .st-err, .st-crit, .st-info) { color: var(--fg); }

  /* ---- plain tables inside cards ---- */
  .card > table:not([class]), .card table.table:not(.table--sub) { inline-size: 100%; }
  table:not([class]) { inline-size: 100%; border-collapse: collapse; font-size: var(--table-fs); }
  table:not([class]) :is(th, td) { text-align: start; padding: 0.5rem var(--cell-px); border-block-end: 1px solid var(--line-soft); }
  table:not([class]) th { font-size: var(--text-xs); color: var(--fg-3); font-weight: var(--weight-medium); }
}

@layer compat {
  /* auth/admin templates bring their own <header class="acc-head"><h1>: the shell already
     renders .Title as the page header, so the duplicate heading is hidden (REQUESTS: use the
     header slots instead). */
  .page-header ~ .acc-head > h1 { display: none; }
  .page-header ~ .acc-head:has(> h1:only-child) { display: none; }

  /* plain selects and file inputs */
  :is(.field, .card, .acc-form, form) select:not([class]) {
    appearance: none; padding-inline-end: 2rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238a909b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 8 3.5-3.5L13.5 8M6.5 12l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1rem;
  }
  input[type="file"] { font-size: var(--text-sm); color: var(--fg-2); max-inline-size: 100%; }
  input[type="file"]::file-selector-button {
    margin-inline-end: var(--space-3); block-size: var(--ctl-h-sm); padding-inline: 0.625rem; border: 0; border-radius: var(--radius-sm);
    background: var(--surface-raised); color: var(--fg); font: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer;
    box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm);
  }
  .card > h2:first-child, .card > header > h2 { font-size: var(--text-md); }
}


/* ---- shell.css */
/* Shell additions (OWNER: shell-design), @layer shell. Only what the design kit
   (web/static/css, synced from tools/shopdesk-fe/design) does not cover:
   server-side integration bits (shop logos, accent dots, offline banner, module
   cards on the start page, link-segmented controls, charts container).
   Tokens only, no raw colours. */
@layer shell {
  /* ---- brand / shop logos ---- */
  img.brand__mark { inline-size: 1.5rem; block-size: 1.5rem; object-fit: contain; border-radius: var(--radius-sm); }
  .shop-logo--img { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
  .shop-logo--img img { object-fit: contain; }
  .shop-logo--neutral { background: var(--surface-sunken); color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--line); }
  .shop-logo--neutral .icon { inline-size: 0.875rem; block-size: 0.875rem; }
  .shop-accent { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--surface-overlay); }
  .rail__dev { padding: 0 var(--space-2) var(--space-2); }
  :root[data-rail="collapsed"] .rail__dev { display: none; }

  /* ---- topbar ---- */
  .topbar .presence { margin-inline-end: var(--space-1); }
  .topbar .presence .avatar-stack { --avatar-ring: var(--surface); }
  .avatar--more { background: var(--surface-sunken); color: var(--fg-2); font-size: 0.5625rem; box-shadow: 0 0 0 2px var(--surface); }
  .sd-offline { flex: none; }
  .sd-offline[hidden] { display: none; }

  /* ---- menus / popovers ---- */
  .menu__form { display: contents; }
  .menu__form .menu__item { inline-size: 100%; }
  .popover__hint { font-size: var(--text-xs); color: var(--fg-3); margin-block-start: var(--space-2); }
  .sd-theme-auto { margin-block-start: var(--space-2); inline-size: 100%; justify-content: flex-start; }
  .sd-theme-auto[aria-pressed="true"] .icon { color: var(--accent); }
  .jobs__empty { padding: var(--space-6) var(--space-4); text-align: center; font-size: var(--text-sm); }
  .jobs__empty[hidden] { display: none; }

  /* ---- segmented control made of links (server-side filters) ---- */
  .segmented > a {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    block-size: calc(var(--ctl-h) - 4px); padding-inline: 0.625rem; border-radius: 7px;
    color: var(--fg-3); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; text-decoration: none;
    transition: color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
  }
  .segmented > a:hover { color: var(--fg); }
  .segmented > a:is([aria-current="page"], [aria-current="true"]) { /* "true": quality tasks/trends, returns (screentest R2) */ background: var(--surface-raised); color: var(--fg); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm), var(--highlight); }
  .segmented--sm > a { block-size: calc(var(--ctl-h-sm) - 4px); font-size: var(--text-xs); padding-inline: 0.5rem; }

  /* ---- start page: module cards ---- */
  .module-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
  .module-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
    padding: var(--space-3); border-radius: var(--radius-md); color: inherit; text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--line-soft);
    transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  }
  .module-card:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--line); }
  .module-card__icon {
    display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius-md);
    background: var(--accent-tint); color: var(--accent);
  }
  .module-card__text { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; }
  .module-card__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .module-card__desc { font-size: var(--text-xs); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .module-card__go { color: var(--fg-4); transition: translate var(--dur-fast) var(--ease-out), color var(--dur-fast); }
  .module-card:hover .module-card__go { color: var(--accent); translate: 2px 0; }

  /* ---- error page inside the shell ---- */
  .error-page--shell { margin: auto; padding-block: var(--space-12); min-block-size: calc(100dvh - var(--topbar-h) - 12rem); justify-content: center; }
  .error-page--shell .error-page__code { font-size: clamp(4rem, 2.5rem + 6vw, 7rem); }

  /* ---- lists and tables ---- */
  .list-item__media--icon { display: grid; place-items: center; background: var(--surface-sunken); color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--line-soft); }
  .tone-icon--accent { color: var(--accent); background: var(--accent-tint); }
  .tone-icon--info { color: var(--info); background: color-mix(in oklab, var(--info) 10%, transparent); }
  .tone-icon--warn { color: var(--warn); background: color-mix(in oklab, var(--warn) 10%, transparent); }
  .tone-icon--special { color: var(--special); background: color-mix(in oklab, var(--special) 10%, transparent); }
  .split__more { padding: var(--space-2); }
  .cell-progress { justify-content: flex-end; }
  .cell-progress progress { inline-size: 5rem; }
  .cell-progress span { min-inline-size: 2.75rem; text-align: end; font-variant-numeric: tabular-nums; }
  pre.code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-xs); margin: 0; }

  /* ---- charts library container ---- */
  .sd-chart { min-block-size: 12rem; }
  .sd-chart--sm { min-block-size: 8rem; }

  /* ---- filter empty state inside a table wrapper ---- */
  .table-wrap > .empty { border-block-start: 1px solid var(--line-soft); }

  @media print {
    .sd-offline, .presence, .jobs-trigger, .sdc-toolbar { display: none; }
  }
}
@layer shell {
  .sd-secret-form { flex-wrap: wrap; justify-content: flex-start; }
  .sd-secret-form .input { inline-size: auto; flex: 1 1 12rem; }
}
@layer shell {
  .table .user-chip { white-space: nowrap; }
}
@layer shell {
  /* dialogs whose header has the title directly (no .dialog__titles wrapper) */
  .dialog__header > .dialog__title:first-child { flex: 1; }
}
@layer shell {
  .period { gap: var(--space-2); }
  .period__form .input[type="date"] { inline-size: 9.5rem; }
}
@layer shell {
  /* (chart title inside a titled card: now in the charts library CSS, REQUESTS 134c) */
  /* a long header-meta sentence wraps inside the title column; the actions stay top right */
  /* (row layout only: below 48rem the kit stacks the header as a column, where a basis would become a height) */
  @media (width >= 48rem) {
    .page-header__main { flex: 1 1 24rem; }
    .page-header__actions { flex: 0 1 auto; justify-content: flex-end; }
  }
  /* a card that has only a header (no body) keeps its bottom padding */
  .card > .card__header:last-child { padding-block-end: var(--pad); }
  /* phones: long segmented controls and link tabs scroll inside themselves, never the page */
  @media (max-width: 40rem) {
    .segmented, .tabs { max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
  }
  /* screentest B: the header stacks in a column on phones (layout.css), so the 24rem flex-basis
     above became a 384 px tall empty block between title and actions (Bilder, 400 px) */
  @media (width < 48rem) {
    .page-header__main, .page-header__actions { flex-basis: auto; }
    .page-header__actions { justify-content: flex-start; }
  }
  /* (KPI label wrap, .card__body.form-grid and the finished-queue rule moved into the kit: REQUESTS 134, 137) */
}
@layer shell {
  /* screentest R2: links inside data tables read as names, not as a column of heavy underlines
     (quality checks, findings); the underline stays as a faint hint and gets strong on hover/focus.
     Sort headers built as links (prices) never underline. */
  .table td a:not(.btn):not(.chip):not(.pill) { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in oklab, currentColor 22%, transparent); }
  .table td a:not(.btn):not(.chip):not(.pill):is(:hover, :focus-visible) { text-decoration-color: currentColor; }
  a.th-sort { text-decoration: none; }
}
@layer shell {
  /* screentest R2: on phones the header meta items stack; a wrapped line no longer starts with "·" */
  @media (width < 48rem) {
    .page-header__meta { flex-direction: column; align-items: flex-start; }
    .page-header__meta > * + *::before { content: none; }
  }
}
@layer shell {
  /* screentest R2: the jobs list fits 1440 px (the time column was cut): long job names wrap to two
     lines inside the name column, the progress bar is shorter */
  [data-table-id="jobs"] .cell-product { max-inline-size: 24rem; }
  [data-table-id="jobs"] .cell-product__name { white-space: normal; }
  [data-table-id="jobs"] .cell-progress progress { inline-size: 3.5rem; }
  [data-table-id="jobs"] td.num.muted { white-space: nowrap; }
  [data-table-id="jobs"] .table :is(th, td) { padding-inline: var(--space-2); }
  [data-table-id="jobs"] .table :is(th, td):first-child { padding-inline-start: var(--space-3); }
  /* the module column repeats the facet on the left: dropped first when the screen is narrow */
  @media (width < 100rem) { [data-table-id="jobs"] .table :is(th, td):nth-child(2) { display: none; } }
}
@layer shell {
  /* screentest R3: pdf.Chart.ScreenSVG carries a class instead of a style attribute (the CSP drops inline styles) */
  svg.chart-screen { display: block; inline-size: 100%; max-inline-size: 40rem; block-size: auto; }
  /* screentest R5: the print bars are 55 % transparent; on screen they kept only 2.6:1 against the card (light theme) */
  svg.chart-screen rect[fill-opacity="0.55"] { fill-opacity: 0.88; }
}
@layer shell {
  /* UX shell (docs/UX-SHELL.md): saved views toolbar and the j/k row cursor */
  .saved-views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
  .saved-views__select { max-inline-size: 16rem; }
  .saved-views__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); inline-size: 100%; padding-block: var(--space-1); }
  .saved-views__form[hidden] { display: none; }
  .saved-views__form .input { inline-size: min(100%, 18rem); }
  .saved-views__form .check-row { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
  .saved-views__form .check-row[hidden] { display: none; }
  [data-views-default][aria-pressed="true"] { color: var(--accent); }
  tr[data-kbd-cursor] { background: var(--accent-tint); outline: 2px solid var(--accent-line); outline-offset: -2px; }
}
@layer shell {
  /* wave2-B: phone cards: the row checkbox (lead cell) sat 20 px right of its 44 px hit area and was cut by the card edge,
     because `td:not([data-card="field"]) { display: block }` (kit data.css) beats the lead cell's grid. */
  @media (width <= 32.5rem) {
    .table[data-cards][data-cards] > tbody > tr > td[data-card="lead"] { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
  }
}
@layer shell {
  /* wave2-B: "dann" between two keys of the shortcut overlay was 11 px at 2.6:1 (dark) / 2.9:1 (light) */
  .kbd-group__then { font-size: var(--text-xs); color: var(--fg-3); }
}
@layer shell {
  /* wave2-C (REQUESTS 543): section index of long settings pages, sticky under the top bar */
  .settings-index { position: sticky; inset-block-start: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding-block: var(--space-2); background: var(--canvas); border-block-end: 1px solid var(--line); }
  .settings-index a { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); color: var(--fg-2); text-decoration: none; font-size: var(--text-sm); }
  .settings-index a:hover, .settings-index a:focus-visible { background: var(--surface-sunken); color: var(--fg); }
  .section-head { scroll-margin-block-start: 4rem; }
  /* empty state / info note inside a card (price import step 4) */
  .note-box { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--fg-2); margin: 0; }
}
/* German reading of a native date field in a non-German browser (ux.js dateHints) */
@layer shell { .date-hint { color: var(--fg-3); font-size: 0.75rem; white-space: nowrap; margin-inline-start: 0.35rem; } }


/* ---- realtime.css */
/* Optional default look of the realtime banner and avatars. Tokens only. */
@layer module {
  .rt-banner { display: flex; align-items: center; gap: .6em; padding: .5em .8em; border: 1px solid var(--line); border-radius: var(--radius-s);
    background: color-mix(in srgb, var(--med) 12%, var(--surface)); color: var(--text); }
  .rt-banner[hidden] { display: none; }
  .rt-banner-text { flex: 1; }
  .rt-banner-take { font: inherit; padding: .2em .8em; border: 1px solid var(--field-line); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text); cursor: pointer; }
  [data-rt-presence] { display: inline-flex; }
  [data-rt-presence] .rt-avatar + .rt-avatar { margin-inline-start: -.5em; }
  .rt-avatar { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; overflow: hidden;
    font-size: .8em; font-weight: 600; color: var(--text); border: 2px solid var(--surface);
    background: color-mix(in srgb, hsl(var(--rt-hue, 210) 60% 55%) 30%, var(--surface-2)); }
  .rt-avatar img { width: 100%; height: 100%; object-fit: cover; }
  [data-rt-state="locked"][data-rt-readonly] { opacity: .85; }
}


/* ---- nav.css */
/* Page switches (docs/PAGE-TRANSITIONS-2026-11-05.md). Cross-document view transition: the rail and the top bar keep
   their own layer (identical pictures, no movement), only the page content cross-fades, 90/140 ms. Without
   prefers-reduced-motion: no-preference there is no transition at all. Unlayered on purpose: @view-transition and
   the ::view-transition-* pseudo-elements cannot live in a cascade layer. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.rail { view-transition-name: sd-rail; }
.topbar { view-transition-name: sd-topbar; }
.page { view-transition-name: sd-page; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(sd-rail), ::view-transition-group(sd-topbar), ::view-transition-group(sd-page) { animation-duration: 0s; }
::view-transition-old(sd-rail), ::view-transition-new(sd-rail),
::view-transition-old(sd-topbar), ::view-transition-new(sd-topbar) { animation-duration: 0.12s; }
::view-transition-old(sd-page) { animation: sd-vt-out 0.09s ease-out both; }
::view-transition-new(sd-page) { animation: sd-vt-in 0.14s ease-out both; }
@keyframes sd-vt-out { to { opacity: 0; } }
@keyframes sd-vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* After an in-app link the script moves focus to <main> (a landmark, not a control): no ring around the whole page. */
main.page:focus, main.page:focus-visible { outline: none; }