/*!
 * ecd.css v1.0.0 (2026-10-09)
 * ECD UI design system: tokens, scoped base styles, components, print.
 *
 * Project:  ECD UI design system (design-system repo)
 * Source:   design-system/skill/ecd-ui/assets/ecd.css
 * Copies:   Apps keep a copy at /css/ecd.css. Do NOT edit copies; change the
 *           source, bump VERSION, and record the change in CHANGELOG.md.
 * Semver:   Class and token names are a public API. Rename/remove = MAJOR,
 *           new token/class = MINOR, value tweak = PATCH.
 * Scope:    Only --ecd-* custom properties are global. Every other rule applies
 *           inside an element carrying data-ecd-mode="productive|expressive".
 * Credits:  Rules distilled from Vercel Web Interface Guidelines (MIT),
 *           IBM Carbon, USWDS, Material, and Oxide (ideas only, MPL-2.0).
 *           See skill/ecd-ui/references/sources.md.
 */

/* ── 1. Tokens (global, productive values as the fallback) ─────────────── */
:root {
  /* Brand (ECD web palette) */
  --ecd-slate: #0E2421;        /* Dark Slate Green: text, primary, header */
  --ecd-oyster: #6E7C7A;       /* Oyster Gray: borders, icons, large muted text */
  --ecd-gray: #EBE9EA;         /* Light Gray: chrome, table head, toolbars */
  --ecd-pink: #F94A9E;         /* Hot Pink: rationed accent, never text on white */

  /* Surfaces */
  --ecd-surface: #FFFFFF;
  --ecd-surface-subtle: #F6F5F5;
  --ecd-surface-muted: var(--ecd-gray);
  --ecd-surface-inverse: var(--ecd-slate);

  /* Content (text) */
  --ecd-text: var(--ecd-slate);
  --ecd-text-secondary: #556361;   /* AA on white and on --ecd-gray */
  --ecd-text-tertiary: var(--ecd-oyster);  /* large text, icons, disabled */
  --ecd-text-inverse: #FFFFFF;

  /* Strokes */
  --ecd-border: #D9D6D7;           /* dividers, table lines (decorative) */
  --ecd-border-strong: var(--ecd-oyster);  /* input boundaries, 3:1+ */

  /* Actions + accent */
  --ecd-primary: var(--ecd-slate);
  --ecd-primary-hover: #1F3D39;
  --ecd-accent: var(--ecd-pink);
  --ecd-accent-hover: #FA67AE;
  --ecd-accent-strong: #C8287A;    /* pink that passes AA as text */
  --ecd-accent-bg: #FFF0F7;        /* selected row tint */
  --ecd-focus: var(--ecd-pink);

  /* Status: text / background pairs, all AA */
  --ecd-success: #067647;  --ecd-success-bg: #E6F4EC;
  --ecd-warning: #93370D;  --ecd-warning-bg: #FEF3E2;
  --ecd-danger:  #B42318;  --ecd-danger-bg:  #FDECEA;  --ecd-danger-hover: #912018;
  --ecd-info:    #1F4E8C;  --ecd-info-bg:    #E8F0FA;

  /* Type */
  --ecd-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ecd-font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  --ecd-font-body: var(--ecd-font-ui);
  --ecd-font-heading: var(--ecd-font-ui);
  --ecd-font-display: Georgia, "Times New Roman", serif;
  --ecd-text-xs: 0.75rem;   /* 12 */
  --ecd-text-sm: 0.875rem;  /* 14 */
  --ecd-text-md: 1rem;      /* 16 */
  --ecd-text-lg: 1.125rem;  /* 18 */
  --ecd-text-xl: 1.5rem;    /* 24 */
  --ecd-text-2xl: 1.875rem; /* 30 */
  --ecd-text-3xl: 2.25rem;  /* 36, expressive only */

  /* Space (4px scale) */
  --ecd-space-1: 0.25rem; --ecd-space-2: 0.5rem; --ecd-space-3: 0.75rem;
  --ecd-space-4: 1rem;    --ecd-space-5: 1.25rem; --ecd-space-6: 1.5rem;
  --ecd-space-8: 2rem;    --ecd-space-10: 2.5rem; --ecd-space-12: 3rem;

  /* Shape + depth */
  --ecd-radius-sm: 2px; --ecd-radius: 4px; --ecd-radius-lg: 6px;
  --ecd-shadow: 0 0 0 1px rgb(14 36 33 / 0.06), 0 1px 2px rgb(14 36 33 / 0.08);
  --ecd-shadow-lg: 0 0 0 1px rgb(14 36 33 / 0.08), 0 8px 24px rgb(14 36 33 / 0.16);

  /* Layout */
  --ecd-content-max: 72rem;
  --ecd-form-max: 40rem;
  --ecd-touch: 44px;

  /* Density (productive defaults) */
  --ecd-body-size: var(--ecd-text-sm);
  --ecd-line: 1.45;
  --ecd-control-h: 36px;
  --ecd-control-h-compact: 32px;
  --ecd-control-px: var(--ecd-space-3);
  --ecd-row-h: 36px;
  --ecd-cell-py: var(--ecd-space-2);
  --ecd-cell-px: var(--ecd-space-3);
  --ecd-gap-group: var(--ecd-space-2);    /* related items */
  --ecd-gap-section: var(--ecd-space-4);  /* separate groups */
  --ecd-h1: var(--ecd-text-xl);
  --ecd-h2: var(--ecd-text-lg);
  --ecd-h3: var(--ecd-text-md);
  --ecd-motion: 150ms;
}

/* ── 2. Modes ───────────────────────────────────────────────────────────── */
[data-ecd-mode="expressive"] {
  --ecd-font-body: "Anek Latin", var(--ecd-font-ui);
  --ecd-font-heading: "Anek Latin", var(--ecd-font-ui);
  --ecd-font-display: "Antic Didone", Georgia, serif;
  --ecd-body-size: var(--ecd-text-md);
  --ecd-line: 1.55;
  --ecd-control-h: 44px;
  --ecd-control-px: var(--ecd-space-4);
  --ecd-row-h: 48px;
  --ecd-cell-py: var(--ecd-space-3);
  --ecd-cell-px: var(--ecd-space-4);
  --ecd-gap-group: var(--ecd-space-3);
  --ecd-gap-section: var(--ecd-space-8);
  --ecd-h1: var(--ecd-text-3xl);
  --ecd-h2: var(--ecd-text-xl);
  --ecd-h3: var(--ecd-text-lg);
}

/* ── 3. Scoped base (zero specificity via :where, so apps can override) ── */
:where([data-ecd-mode]) {
  font-family: var(--ecd-font-body);
  font-size: var(--ecd-body-size);
  line-height: var(--ecd-line);
  color: var(--ecd-text);
  background: var(--ecd-surface);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
:where([data-ecd-mode]) :where(*, *::before, *::after) { box-sizing: border-box; }
:where([data-ecd-mode]) :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
:where([data-ecd-mode]) :where(h1, h2, h3, h4) {
  font-family: var(--ecd-font-heading); font-weight: 600; line-height: 1.25; text-wrap: balance;
}
:where([data-ecd-mode="expressive"]) :where(h1, h2, h3, h4) { font-weight: 500; }
:where([data-ecd-mode]) :where(h1) { font-size: var(--ecd-h1); }
:where([data-ecd-mode]) :where(h2) { font-size: var(--ecd-h2); }
:where([data-ecd-mode]) :where(h3, h4) { font-size: var(--ecd-h3); }
:where([data-ecd-mode]) :where(a) { color: var(--ecd-text); text-decoration: underline; text-underline-offset: 2px; }
:where([data-ecd-mode]) :where(a:hover) { color: var(--ecd-accent-strong); }
:where([data-ecd-mode]) :where(img, svg) { display: block; max-width: 100%; }
:where([data-ecd-mode]) :where(code, kbd) { font-family: var(--ecd-font-mono); font-size: 0.9em; }
:where([data-ecd-mode]) :where(:focus-visible) { outline: 2px solid var(--ecd-focus); outline-offset: 2px; }
:where([data-ecd-mode]) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where([data-ecd-mode]) :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--ecd-primary); width: 18px; height: 18px; margin: 0;
}

/* Text inputs, selects, textareas */
:where([data-ecd-mode]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"]), select, textarea) {
  width: 100%;
  min-height: var(--ecd-control-h);
  padding: 0 var(--ecd-control-px);
  border: 1px solid var(--ecd-border-strong);
  border-radius: var(--ecd-radius);
  background: var(--ecd-surface);
}
:where([data-ecd-mode]) :where(textarea) { padding-block: var(--ecd-space-2); min-height: 6rem; resize: vertical; }
:where([data-ecd-mode]) :where(input, select, textarea):where([aria-invalid="true"]) { border-color: var(--ecd-danger); }
:where([data-ecd-mode]) :where(input, select, textarea):where(:disabled) { background: var(--ecd-surface-subtle); color: var(--ecd-text-tertiary); cursor: not-allowed; }
:where([data-ecd-mode]) :where(::placeholder) { color: var(--ecd-text-tertiary); opacity: 1; }

/* ── 4. Layout ──────────────────────────────────────────────────────────── */
:where([data-ecd-mode]) .ecd-skip-link { position: absolute; left: -9999px; }
:where([data-ecd-mode]) .ecd-skip-link:focus { left: var(--ecd-space-2); top: var(--ecd-space-2); z-index: 100; padding: var(--ecd-space-2) var(--ecd-space-3); background: var(--ecd-surface); }
:where([data-ecd-mode]) .ecd-header {
  display: flex; align-items: center; gap: var(--ecd-space-6);
  min-height: 56px; padding: 0 var(--ecd-space-4);
  background: var(--ecd-surface-inverse); color: var(--ecd-text-inverse);
}
:where([data-ecd-mode]) .ecd-header__logo { height: 24px; width: auto; }
:where([data-ecd-mode]) .ecd-header__nav { display: flex; flex: 1; min-width: 0; gap: var(--ecd-space-1); overflow-x: auto; scrollbar-width: none; }
:where([data-ecd-mode]) .ecd-header__nav a {
  display: inline-flex; align-items: center; min-height: var(--ecd-touch);
  padding: 0 var(--ecd-space-3); color: var(--ecd-gray); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
:where([data-ecd-mode]) .ecd-header__nav a:hover { color: var(--ecd-text-inverse); }
:where([data-ecd-mode]) .ecd-header__nav a[aria-current="page"] { color: var(--ecd-text-inverse); border-bottom-color: var(--ecd-accent); }
:where([data-ecd-mode]) .ecd-main { padding: var(--ecd-space-6) var(--ecd-space-4); }
:where([data-ecd-mode]) .ecd-container { max-width: var(--ecd-content-max); margin-inline: auto; }
:where([data-ecd-mode]) .ecd-narrow { max-width: var(--ecd-form-max); }
:where([data-ecd-mode]) .ecd-stack { display: flex; flex-direction: column; gap: var(--ecd-gap-section); }
:where([data-ecd-mode]) .ecd-stack--tight { gap: var(--ecd-gap-group); }
:where([data-ecd-mode]) .ecd-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecd-gap-group); }
:where([data-ecd-mode]) .ecd-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ecd-gap-section); }
:where([data-ecd-mode]) .ecd-muted { color: var(--ecd-text-secondary); }
:where([data-ecd-mode]) .ecd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where([data-ecd-mode]) .ecd-eyebrow { font-size: var(--ecd-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ecd-text-secondary); }
:where([data-ecd-mode]) .ecd-quote { font-family: var(--ecd-font-display); font-size: var(--ecd-text-xl); line-height: 1.35; }

/* ── 5. Buttons ─────────────────────────────────────────────────────────── */
:where([data-ecd-mode]) .ecd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ecd-space-2);
  min-height: var(--ecd-control-h); padding: 0 var(--ecd-control-px);
  border: 1px solid var(--ecd-border-strong); border-radius: var(--ecd-radius);
  background: var(--ecd-surface); color: var(--ecd-text);
  font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--ecd-motion) ease, border-color var(--ecd-motion) ease;
  touch-action: manipulation;
}
:where([data-ecd-mode]) .ecd-btn:hover { background: var(--ecd-surface-subtle); color: var(--ecd-text); }
:where([data-ecd-mode]) .ecd-btn:active { transform: scale(0.98); }
:where([data-ecd-mode]) .ecd-btn--primary { background: var(--ecd-primary); border-color: var(--ecd-primary); color: var(--ecd-text-inverse); }
:where([data-ecd-mode]) .ecd-btn--primary:hover { background: var(--ecd-primary-hover); color: var(--ecd-text-inverse); }
:where([data-ecd-mode]) .ecd-btn--accent { background: var(--ecd-accent); border-color: var(--ecd-accent); color: var(--ecd-slate); }
:where([data-ecd-mode]) .ecd-btn--accent:hover { background: var(--ecd-accent-hover); color: var(--ecd-slate); }
:where([data-ecd-mode]) .ecd-btn--danger { background: var(--ecd-danger); border-color: var(--ecd-danger); color: var(--ecd-text-inverse); }
:where([data-ecd-mode]) .ecd-btn--danger:hover { background: var(--ecd-danger-hover); color: var(--ecd-text-inverse); }
:where([data-ecd-mode]) .ecd-btn--ghost { background: transparent; border-color: transparent; }
:where([data-ecd-mode]) .ecd-btn--compact { min-height: var(--ecd-control-h-compact); padding: 0 var(--ecd-space-2); font-size: var(--ecd-text-sm); }
:where([data-ecd-mode]) .ecd-btn--icon { width: var(--ecd-control-h); padding: 0; }
:where([data-ecd-mode]) .ecd-btn:disabled, :where([data-ecd-mode]) .ecd-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
:where([data-ecd-mode]) .ecd-btn[aria-busy="true"] { pointer-events: none; }
:where([data-ecd-mode]) .ecd-btn[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ecd-spin 0.7s linear infinite;
}
@keyframes ecd-spin { to { transform: rotate(360deg); } }

/* ── 6. Forms ───────────────────────────────────────────────────────────── */
:where([data-ecd-mode]) .ecd-field { display: flex; flex-direction: column; gap: var(--ecd-space-1); }
:where([data-ecd-mode]) .ecd-label { font-weight: 600; }
:where([data-ecd-mode]) .ecd-required { color: var(--ecd-danger); }
:where([data-ecd-mode]) .ecd-help { font-size: var(--ecd-text-xs); color: var(--ecd-text-secondary); }
:where([data-ecd-mode]) .ecd-error { font-size: var(--ecd-text-xs); color: var(--ecd-danger); font-weight: 600; }
:where([data-ecd-mode]) .ecd-check { display: inline-flex; align-items: center; gap: var(--ecd-space-2); min-height: var(--ecd-control-h); cursor: pointer; }
:where([data-ecd-mode]) .ecd-form-grid { display: grid; gap: var(--ecd-gap-section); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
:where([data-ecd-mode]) .ecd-form-actions { display: flex; flex-wrap: wrap; gap: var(--ecd-gap-group); padding-top: var(--ecd-space-2); }

/* ── 7. Tables ──────────────────────────────────────────────────────────── */
:where([data-ecd-mode]) .ecd-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ecd-gap-group);
  padding: var(--ecd-space-2) var(--ecd-space-3); background: var(--ecd-surface-muted);
  border: 1px solid var(--ecd-border); border-bottom: 0; border-radius: var(--ecd-radius-lg) var(--ecd-radius-lg) 0 0;
}
:where([data-ecd-mode]) .ecd-toolbar :where(input, select) { width: auto; }
:where([data-ecd-mode]) .ecd-toolbar input[type="search"] { width: 18rem; max-width: 100%; }
:where([data-ecd-mode]) .ecd-table-wrap {
  overflow-x: auto; border: 1px solid var(--ecd-border); border-radius: var(--ecd-radius-lg);
  background: var(--ecd-surface); -webkit-overflow-scrolling: touch;
}
:where([data-ecd-mode]) .ecd-toolbar + .ecd-table-wrap { border-top-left-radius: 0; border-top-right-radius: 0; }
:where([data-ecd-mode]) .ecd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
:where([data-ecd-mode]) .ecd-table :where(th, td) {
  height: var(--ecd-row-h); padding: var(--ecd-cell-py) var(--ecd-cell-px);
  text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ecd-border); white-space: nowrap;
}
:where([data-ecd-mode]) .ecd-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--ecd-surface-muted);
  font-size: var(--ecd-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ecd-text-secondary);
}
:where([data-ecd-mode]) .ecd-table tbody tr:hover { background: var(--ecd-surface-subtle); }
:where([data-ecd-mode]) .ecd-table tbody tr[aria-selected="true"] { background: var(--ecd-accent-bg); box-shadow: inset 3px 0 0 var(--ecd-accent); }
:where([data-ecd-mode]) .ecd-table tbody tr:last-child :where(th, td) { border-bottom: 0; }
:where([data-ecd-mode]) .ecd-table .ecd-num { text-align: right; }
:where([data-ecd-mode]) .ecd-table .ecd-wrap { white-space: normal; min-width: 16rem; }
:where([data-ecd-mode]) .ecd-truncate { display: block; max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where([data-ecd-mode]) .ecd-row-actions { width: 1%; text-align: right; }
:where([data-ecd-mode]) .ecd-sort {
  all: unset; display: inline-flex; align-items: center; gap: var(--ecd-space-1); cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
:where([data-ecd-mode]) .ecd-sort::after { content: "↕"; opacity: 0.45; }
:where([data-ecd-mode]) th[aria-sort="ascending"] .ecd-sort::after { content: "↑"; opacity: 1; }
:where([data-ecd-mode]) th[aria-sort="descending"] .ecd-sort::after { content: "↓"; opacity: 1; }
:where([data-ecd-mode]) .ecd-sort:focus-visible { outline: 2px solid var(--ecd-focus); outline-offset: 2px; }
:where([data-ecd-mode]) .ecd-table--compact { --ecd-row-h: 32px; --ecd-cell-py: var(--ecd-space-1); }
:where([data-ecd-mode]) .ecd-table--pin-first :where(th, td):first-child { position: sticky; left: 0; z-index: 2; background: var(--ecd-surface); box-shadow: 1px 0 0 var(--ecd-border); }
:where([data-ecd-mode]) .ecd-table--pin-first thead th:first-child { z-index: 3; background: var(--ecd-surface-muted); }
:where([data-ecd-mode]) .ecd-table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ecd-gap-group); padding-top: var(--ecd-space-2); color: var(--ecd-text-secondary); }

/* ── 8. Status + feedback ───────────────────────────────────────────────── */
:where([data-ecd-mode]) .ecd-badge {
  display: inline-flex; align-items: center; gap: var(--ecd-space-1); padding: 2px var(--ecd-space-2);
  border-radius: var(--ecd-radius-sm); font-size: var(--ecd-text-xs); font-weight: 600; line-height: 1.4;
  background: var(--ecd-surface-muted); color: var(--ecd-text);
}
:where([data-ecd-mode]) .ecd-badge--success { background: var(--ecd-success-bg); color: var(--ecd-success); }
:where([data-ecd-mode]) .ecd-badge--warning { background: var(--ecd-warning-bg); color: var(--ecd-warning); }
:where([data-ecd-mode]) .ecd-badge--danger  { background: var(--ecd-danger-bg);  color: var(--ecd-danger); }
:where([data-ecd-mode]) .ecd-badge--info    { background: var(--ecd-info-bg);    color: var(--ecd-info); }
:where([data-ecd-mode]) .ecd-alert {
  display: flex; gap: var(--ecd-space-3); padding: var(--ecd-space-3) var(--ecd-space-4);
  border: 1px solid currentColor; border-left-width: 4px; border-radius: var(--ecd-radius);
  background: var(--ecd-info-bg); color: var(--ecd-info);
}
:where([data-ecd-mode]) .ecd-alert > * { color: var(--ecd-text); }
:where([data-ecd-mode]) .ecd-alert strong { color: inherit; }
:where([data-ecd-mode]) .ecd-alert--success { background: var(--ecd-success-bg); color: var(--ecd-success); }
:where([data-ecd-mode]) .ecd-alert--warning { background: var(--ecd-warning-bg); color: var(--ecd-warning); }
:where([data-ecd-mode]) .ecd-alert--danger  { background: var(--ecd-danger-bg);  color: var(--ecd-danger); }
:where([data-ecd-mode]) .ecd-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--ecd-space-2);
  padding: var(--ecd-space-10) var(--ecd-space-4); text-align: center; color: var(--ecd-text-secondary);
}
:where([data-ecd-mode]) .ecd-empty strong { color: var(--ecd-text); font-size: var(--ecd-text-md); }
:where([data-ecd-mode]) .ecd-skeleton {
  display: block; height: 0.8em; width: 70%; border-radius: var(--ecd-radius-sm);
  background: linear-gradient(90deg, var(--ecd-surface-muted) 25%, var(--ecd-surface-subtle) 50%, var(--ecd-surface-muted) 75%);
  background-size: 200% 100%; animation: ecd-shimmer 1.2s linear infinite;
}
@keyframes ecd-shimmer { to { background-position: -200% 0; } }
:where([data-ecd-mode]) .ecd-toast {
  position: fixed; right: var(--ecd-space-4); bottom: var(--ecd-space-4); z-index: 50; max-width: 24rem;
  padding: var(--ecd-space-3) var(--ecd-space-4); border-radius: var(--ecd-radius);
  background: var(--ecd-surface-inverse); color: var(--ecd-text-inverse); box-shadow: var(--ecd-shadow-lg);
}
:where([data-ecd-mode]) .ecd-dialog {
  max-width: min(28rem, calc(100vw - 2rem)); padding: var(--ecd-space-6); border: 0;
  border-radius: var(--ecd-radius-lg); box-shadow: var(--ecd-shadow-lg); color: var(--ecd-text);
}
:where([data-ecd-mode]) .ecd-dialog::backdrop { background: rgb(14 36 33 / 0.5); }
:where([data-ecd-mode]) .ecd-panel { padding: var(--ecd-space-4); border: 1px solid var(--ecd-border); border-radius: var(--ecd-radius-lg); background: var(--ecd-surface); }

/* ── 9. Touch, small screens, motion ────────────────────────────────────── */
@media (pointer: coarse) {
  :where([data-ecd-mode]) { --ecd-control-h: var(--ecd-touch); --ecd-control-h-compact: var(--ecd-touch); }
  :where([data-ecd-mode]) .ecd-sort { min-height: var(--ecd-touch); }
}
@media (max-width: 640px), (pointer: coarse) {
  /* 16px inputs stop iOS zoom-on-focus */
  :where([data-ecd-mode]) :where(input, select, textarea) { font-size: 1rem; }
}
@media (max-width: 640px) {
  :where([data-ecd-mode]) .ecd-main { padding: var(--ecd-space-4) var(--ecd-space-3); }
  :where([data-ecd-mode]) .ecd-form-grid { grid-template-columns: 1fr; }
  :where([data-ecd-mode]) .ecd-header { gap: var(--ecd-space-3); }
}
@media (prefers-reduced-motion: reduce) {
  :where([data-ecd-mode]) :where(*, *::before, *::after) { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── 10. Print (supported renderer: Chromium) ───────────────────────────── */
@media print {
  @page { size: Letter; margin: 0.6in; }
  :where([data-ecd-mode]) { background: var(--ecd-surface); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  :where([data-ecd-mode]) :where(.ecd-header, .ecd-skip-link, .ecd-toolbar, .ecd-toast, .ecd-no-print, .ecd-row-actions) { display: none !important; }
  :where([data-ecd-mode]) .ecd-main { padding: 0; }
  :where([data-ecd-mode]) .ecd-table-wrap { overflow: visible; border: 0; }
  :where([data-ecd-mode]) .ecd-table thead { display: table-header-group; }
  :where([data-ecd-mode]) .ecd-table thead th { position: static; }
  :where([data-ecd-mode]) .ecd-table tr { break-inside: avoid; }
  :where([data-ecd-mode]) :where(h1, h2, h3) { break-after: avoid; }
}