/* Generated by tests/tools/build-theme-css.php from docs/design/handoff-d2/_ds/taraz-design-system-1e200da3-df31-47f6-8d48-b1e8e60399fa (Taraz 0.2, without tokens/fonts.css). Do not edit. */

/* ---- tokens/colors.css ---- */
/* Taraz colour tokens — compiled from tokens.json.
   Tier 1 (base): neutral-*, teal-*, green-*, amber-*, red-*, blue-*. Never consume directly.
   Tier 2 (semantic): bg-*, line-*, text-*, brand*, status, scrim, plaque, shadows. Light on :root / [data-theme="light"], dark on [data-theme="dark"].
   Brand: override --brand only; brand-hover/active/soft/text, on-brand and focus derive from it (tokens/brand.css). */
:root {
  --neutral-100: #ffffff;
  --neutral-98: #f7f9f9;
  --neutral-96: #f1f2f3;
  --neutral-92: #e3e5e6;
  --neutral-86: #d0d1d2;
  --neutral-76: #afb1b2;
  --neutral-72: #a3a5a6;
  --neutral-70: #9d9fa0;
  --neutral-62: #848688;
  --neutral-58: #787b7c;
  --neutral-52: #67696b;
  --neutral-46: #56585a;
  --neutral-35: #393b3c;
  --neutral-30: #2c2e2f;
  --neutral-27: #252728;
  --neutral-23: #1c1d1e;
  --neutral-20: #151617;
  --neutral-17: #0e1010;
  --teal-30: #113435;
  --teal-40: #005457;
  --teal-46: #006669;
  --teal-52: #00787c;
  --teal-78: #5ecbce;
  --teal-84: #7edde0;
  --teal-90: #a6edef;
  --teal-95: #dcf4f4;
  --green-30: #1a3520;
  --green-50: #2b7440;
  --green-76: #6fc884;
  --green-96: #e7f9ea;
  --amber-30: #3e290f;
  --amber-52: #925b0c;
  --amber-80: #f1af64;
  --amber-96: #fff0db;
  --red-30: #491f1b;
  --red-46: #9e2320;
  --red-52: #b6322d;
  --red-72: #ef7f74;
  --red-78: #fb988d;
  --red-96: #ffeeec;
  --blue-30: #182e4b;
  --blue-50: #2063b0;
  --blue-76: #85b4f0;
  --blue-96: #eaf3ff;

  --bg-canvas: var(--neutral-98);
  --bg-surface: var(--neutral-100);
  --bg-raised: var(--neutral-100);
  --bg-sunken: var(--neutral-96);
  --bg-hover: var(--neutral-96);
  --bg-active: var(--neutral-92);
  --bg-inverse: var(--neutral-23);
  --bg-inverse-hover: var(--neutral-30);
  --bg-inverse-active: var(--neutral-35);
  --on-inverse: var(--neutral-100);
  --line-subtle: var(--neutral-92);
  --line-default: var(--neutral-86);
  --line-control: var(--neutral-62);
  --text-primary: var(--neutral-23);
  --text-secondary: var(--neutral-46);
  --text-tertiary: var(--neutral-52);
  --text-disabled: var(--neutral-72);
  --brand: var(--teal-52);
  --brand-hover: var(--teal-46);
  --brand-active: var(--teal-40);
  --brand-soft: var(--teal-95);
  --brand-text: var(--teal-52);
  --on-brand: var(--neutral-100);
  --focus: var(--teal-52);
  --success: var(--green-50);
  --success-soft: var(--green-96);
  --warning: var(--amber-52);
  --warning-soft: var(--amber-96);
  --danger: var(--red-52);
  --danger-hover: var(--red-46);
  --danger-soft: var(--red-96);
  --on-danger: var(--neutral-100);
  --info: var(--blue-50);
  --info-soft: var(--blue-96);
  --on-info: var(--neutral-100);
  --scrim: #191e2066;
  --plaque: #ffffffb8;
  --shadow-raised: 0 1px 2px #191e200a, 0 8px 24px -8px #191e2014;
  --shadow-floating: 0 2px 4px #191e200f, 0 24px 60px -12px #191e202e;
  --shadow-overlay: 0 8px 16px #191e2014, 0 40px 96px -16px #191e2047;
}
[data-theme="light"] {
  --bg-canvas: var(--neutral-98);
  --bg-surface: var(--neutral-100);
  --bg-raised: var(--neutral-100);
  --bg-sunken: var(--neutral-96);
  --bg-hover: var(--neutral-96);
  --bg-active: var(--neutral-92);
  --bg-inverse: var(--neutral-23);
  --bg-inverse-hover: var(--neutral-30);
  --bg-inverse-active: var(--neutral-35);
  --on-inverse: var(--neutral-100);
  --line-subtle: var(--neutral-92);
  --line-default: var(--neutral-86);
  --line-control: var(--neutral-62);
  --text-primary: var(--neutral-23);
  --text-secondary: var(--neutral-46);
  --text-tertiary: var(--neutral-52);
  --text-disabled: var(--neutral-72);
  --brand: var(--teal-52);
  --brand-hover: var(--teal-46);
  --brand-active: var(--teal-40);
  --brand-soft: var(--teal-95);
  --brand-text: var(--teal-52);
  --on-brand: var(--neutral-100);
  --focus: var(--teal-52);
  --success: var(--green-50);
  --success-soft: var(--green-96);
  --warning: var(--amber-52);
  --warning-soft: var(--amber-96);
  --danger: var(--red-52);
  --danger-hover: var(--red-46);
  --danger-soft: var(--red-96);
  --on-danger: var(--neutral-100);
  --info: var(--blue-50);
  --info-soft: var(--blue-96);
  --on-info: var(--neutral-100);
  --scrim: #191e2066;
  --plaque: #ffffffb8;
  --shadow-raised: 0 1px 2px #191e200a, 0 8px 24px -8px #191e2014;
  --shadow-floating: 0 2px 4px #191e200f, 0 24px 60px -12px #191e202e;
  --shadow-overlay: 0 8px 16px #191e2014, 0 40px 96px -16px #191e2047;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg-canvas: var(--neutral-20);
  --bg-surface: var(--neutral-23);
  --bg-raised: var(--neutral-27);
  --bg-sunken: var(--neutral-17);
  --bg-hover: var(--neutral-30);
  --bg-active: var(--neutral-35);
  --bg-inverse: var(--neutral-98);
  --bg-inverse-hover: var(--neutral-92);
  --bg-inverse-active: var(--neutral-86);
  --on-inverse: var(--neutral-23);
  --line-subtle: var(--neutral-30);
  --line-default: var(--neutral-35);
  --line-control: var(--neutral-58);
  --text-primary: var(--neutral-98);
  --text-secondary: var(--neutral-76);
  --text-tertiary: var(--neutral-70);
  --text-disabled: var(--neutral-46);
  --brand: var(--teal-78);
  --brand-hover: var(--teal-84);
  --brand-active: var(--teal-90);
  --brand-soft: var(--teal-30);
  --brand-text: var(--teal-78);
  --on-brand: var(--neutral-23);
  --focus: var(--teal-78);
  --success: var(--green-76);
  --success-soft: var(--green-30);
  --warning: var(--amber-80);
  --warning-soft: var(--amber-30);
  --danger: var(--red-72);
  --danger-hover: var(--red-78);
  --danger-soft: var(--red-30);
  --on-danger: var(--neutral-23);
  --info: var(--blue-76);
  --info-soft: var(--blue-30);
  --on-info: var(--neutral-23);
  --scrim: #0d101299;
  --plaque: #191e20b8;
  --shadow-raised: 0 1px 2px #00000033;
  --shadow-floating: 0 2px 4px #00000059, 0 24px 60px -12px #000000a6;
  --shadow-overlay: 0 8px 16px #00000073, 0 40px 96px -16px #000000d9;
  color-scheme: dark;
}

/* ---- tokens/brand.css ---- */
/* Brand derivations: one token in (--brand), everything else out.
   Literal values in colors.css remain the fallback where relative colour syntax is unsupported.
   Avoid a brand with OKLCH lightness between 0.56 and 0.66 — no text reaches 4.5:1 on it. */
:root { --tz-plaque-on-inverse: #ffffff1f; --tz-grid: #191e2014; }
[data-theme="light"] { --tz-plaque-on-inverse: #ffffff1f; --tz-grid: #191e2014; }
[data-theme="dark"] { --tz-plaque-on-inverse: #0000001f; --tz-grid: #f7f9f914; }
@supports (color: oklch(from red l c h)) {
  :root, [data-theme="light"] {
    --brand-hover:  oklch(from var(--brand) calc(l - 0.06) c h);
    --brand-active: oklch(from var(--brand) calc(l - 0.12) c h);
    --brand-soft:   oklch(from var(--brand) 0.95 calc(c * 0.3) h);
    --brand-text:   oklch(from var(--brand) min(l, 0.52) c h);
    --focus:        var(--brand-text);
    --on-brand:     oklch(from var(--brand) clamp(0.12, (0.62 - l) * 1000, 1) 0.01 h);
  }
  [data-theme="dark"] {
    --brand-hover:  oklch(from var(--brand) calc(l + 0.05) c h);
    --brand-active: oklch(from var(--brand) calc(l + 0.10) c h);
    --brand-soft:   oklch(from var(--brand) 0.30 calc(c * 0.4) h);
    --brand-text:   oklch(from var(--brand) max(l, 0.74) c h);
    --focus:        var(--brand-text);
    --on-brand:     oklch(from var(--brand) clamp(0.12, (0.62 - l) * 1000, 1) 0.01 h);
  }
}

/* ---- tokens/typography.css ---- */
/* One stack: Instrument Sans covers Latin, digits and Latin punctuation; Vazirmatn covers Persian. Geist Mono for code.
   Persian tracking is always 0 (see .tz-root[dir="rtl"] in components/taraz.css). */
:root {
  --font-sans: "Instrument Sans Variable", "Vazirmatn Variable", system-ui, sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;
  --type-display-size: 40px; /* @kind font */ --type-display-line: 48px; /* @kind font */ --type-display-weight: 500; /* @kind font */ --type-display-track: -0.02em; /* @kind font */
  --type-title-size: 28px; /* @kind font */ --type-title-line: 36px; /* @kind font */ --type-title-weight: 600; /* @kind font */ --type-title-track: -0.01em; /* @kind font */
  --type-heading-size: 20px; /* @kind font */ --type-heading-line: 28px; /* @kind font */ --type-heading-weight: 600; /* @kind font */
  --type-body-size: 16px; /* @kind font */ --type-body-line: 24px; /* @kind font */ --type-body-weight: 400; /* @kind font */
  --type-body-strong-weight: 500; /* @kind font */
  --type-paragraph-line: 28px; /* @kind font */ --type-paragraph-measure: 68ch; /* @kind font */
  --type-label-size: 14px; /* @kind font */ --type-label-line: 20px; /* @kind font */ --type-label-weight: 500; /* @kind font */
  --type-caption-size: 12px; /* @kind font */ --type-caption-line: 16px; /* @kind font */ --type-caption-weight: 500; /* @kind font */
  --type-eyebrow-size: 12px; /* @kind font */ --type-eyebrow-line: 16px; /* @kind font */ --type-eyebrow-weight: 600; /* @kind font */ --type-eyebrow-track: 0.06em; /* @kind font */
  --type-mono-size: 13px; /* @kind font */ --type-mono-line: 20px; /* @kind font */
  --type-numeric-size: 16px; /* @kind font */ --type-numeric-line: 24px; /* @kind font */ --type-numeric-weight: 500; /* @kind font */
}

/* ---- tokens/spacing.css ---- */
/* 8px grid. Names are the pixel value. space-4 and space-12 are for inside controls only — never between elements. */
:root {
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  /* radius: role decides, not size. nested = max(outer − gap, own radius) */
  --radius-frame: 24px;
  --radius-control: 12px;
  --radius-indicator: 4px;
  --radius-full: 999px;
  /* sizes */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-plaque: 24px;
  --thumb: 20px;
  --touch: 40px;
  --track: 4px;
  --opacity-disabled: 0.5; /* @kind other */
  --z-raised: 1; /* @kind other */
  --z-floating: 10; /* @kind other */
  --z-overlay: 20; /* @kind other */
  --z-toast: 30; /* @kind other */
}

/* ---- tokens/motion.css ---- */
/* Four durations, three curves, two travels. No overshoot. Nothing longer than 400ms or further than 8px. */
:root {
  --duration-press: 80ms; /* @kind other */
  --duration-hover: 160ms; /* @kind other */
  --duration-expand: 240ms; /* @kind other */
  --duration-page: 400ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-enter: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --travel-sm: 4px;
  --travel-md: 8px;
  --scale-press: 0.98; /* @kind other */
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-press: 0ms; /* @kind other */ --duration-hover: 100ms; /* @kind other */ --duration-expand: 0ms; /* @kind other */ --duration-page: 100ms; /* @kind other */ --travel-sm: 0px; --travel-md: 0px; --scale-press: 1; /* @kind other */ }
}

/* ---- tokens/components.css ---- */
/* Tier 3 (component): role tokens that the component styles read. Declared on :root and on every [data-theme]
   scope so a locally themed panel re-resolves them. Point these at other semantic tokens to restyle a role —
   never at raw values. */
:root {
  --frame-pad: var(--space-24);
  --frame-radius: var(--radius-frame);
  --frame-bg: var(--bg-surface);
  --frame-line: var(--line-subtle);
  --selection-bg: var(--bg-raised);
  --selection-line: var(--line-default);
  --selection-shadow: var(--shadow-raised);
  --selection-radius: var(--radius-control);
  --button-primary-bg: var(--bg-inverse);
  --button-primary-bg-hover: var(--bg-inverse-hover);
  --button-primary-bg-active: var(--bg-inverse-active);
  --button-primary-fg: var(--on-inverse);
  --button-secondary-bg: var(--bg-surface);
  --button-secondary-line: var(--line-control);
  --field-bg: var(--bg-surface);
  --field-line: var(--line-control);
  --field-sunken-bg: var(--bg-sunken);
  --field-sunken-line: var(--line-subtle);
  --slider-track-bg: var(--line-default);
  --slider-fill: var(--brand);
  --slider-thumb-bg: var(--bg-surface);
  --slider-thumb-line: var(--line-control);
  --tabs-underline: var(--brand);
  --focus-ring: 2px solid var(--focus);
  --focus-offset: 2px;
}
[data-theme] {
  --frame-bg: var(--bg-surface);
  --frame-line: var(--line-subtle);
  --selection-bg: var(--bg-raised);
  --selection-line: var(--line-default);
  --selection-shadow: var(--shadow-raised);
  --button-primary-bg: var(--bg-inverse);
  --button-primary-bg-hover: var(--bg-inverse-hover);
  --button-primary-bg-active: var(--bg-inverse-active);
  --button-primary-fg: var(--on-inverse);
  --button-secondary-bg: var(--bg-surface);
  --button-secondary-line: var(--line-control);
  --field-bg: var(--bg-surface);
  --field-line: var(--line-control);
  --field-sunken-bg: var(--bg-sunken);
  --field-sunken-line: var(--line-subtle);
  --slider-track-bg: var(--line-default);
  --slider-fill: var(--brand);
  --slider-thumb-bg: var(--bg-surface);
  --slider-thumb-line: var(--line-control);
  --tabs-underline: var(--brand);
  --focus-ring: 2px solid var(--focus);
}

/* ---- components/taraz.css ---- */
/* تراز — component styles (from components/bundle.css in the source repo)
   Component styles. Every value comes from tokens.css (--name); the fallbacks in var() only matter
   when a token is missing. Prefix: .tz-  */

/* ---------- base ---------- */
.tz-root, .tz-root * , .tz-root *::before, .tz-root *::after { box-sizing: border-box; }
.tz-root {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 16px; line-height: 24px; font-weight: 400;
  color: var(--text-primary); background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
.tz-root button, .tz-root input { font-family: inherit; }
.tz-num { font-variant-numeric: tabular-nums; }

/* ---------- type ---------- */
.tz-display { font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: var(--type-display-track); }
.tz-title   { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: var(--type-title-track); }
.tz-heading { font-size: 20px; line-height: 28px; font-weight: 600; }
.tz-body    { font-size: 16px; line-height: 24px; font-weight: 400; }
.tz-body-strong { font-size: 16px; line-height: 24px; font-weight: 500; }
.tz-paragraph { font-size: 16px; line-height: 28px; font-weight: 400; max-width: 68ch; }
.tz-label   { font-size: 14px; line-height: 20px; font-weight: 500; }
.tz-caption { font-size: 12px; line-height: 16px; font-weight: 500; }
.tz-eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--type-eyebrow-track); text-transform: uppercase; color: var(--brand-text); }
.tz-mono    { font-family: var(--font-mono, monospace); font-size: 13px; line-height: 20px; font-weight: 400; }
.tz-numeric { font-size: 16px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tz-secondary { color: var(--text-secondary); }
.tz-tertiary  { color: var(--text-tertiary); }
.tz-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tz-clamp-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- icons ---------- */
.tz-icon { display: inline-block; width: var(--icon-md); height: var(--icon-md); flex: none; vertical-align: middle; }
.tz-icon svg { display: block; width: 100%; height: 100%; }
.tz-icon--sm { width: var(--icon-sm); height: var(--icon-sm); } .tz-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.tz-plaque-icon { display: inline-grid; place-items: center; width: var(--icon-plaque, 24px); height: var(--icon-plaque, 24px);
  border-radius: var(--radius-indicator, 4px); background: var(--bg-sunken); color: var(--text-secondary); flex: none; }
.tz-plaque-icon .tz-icon { width: 16px; height: 16px; }
[dir="rtl"] .tz-icon--flip svg { transform: scaleX(-1); }

/* spinner: a ring, 2px, currentColor */
.tz-spinner { display: inline-block; width: var(--icon-md); height: var(--icon-md); border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent; animation: tz-spin 0.8s linear infinite; flex: none; }
@keyframes tz-spin { to { transform: rotate(360deg); } }
[dir="rtl"] .tz-spinner { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
  .tz-spinner { animation: tz-pulse 1.2s ease-in-out infinite; border-inline-end-color: currentColor; }
  @keyframes tz-pulse { 50% { opacity: 0.35; } }
}

/* ---------- focus: one rule, everywhere ---------- */
.tz-root :focus-visible, .tz-focus:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.tz-root :focus:not(:focus-visible) { outline: none; }

/* ---------- Button ---------- */
.tz-btn {
  position: relative; display: inline-grid; align-items: center; justify-items: center;
  height: var(--control-md); min-width: var(--control-md); padding: 0 var(--space-16);
  border-radius: var(--radius-control, 12px); border: 1px solid transparent;
  font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0;
  color: var(--text-primary); background: transparent;
  cursor: pointer; user-select: none; white-space: nowrap; text-decoration: none; vertical-align: middle;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color var(--duration-hover, 160ms) var(--ease-standard),
              border-color     var(--duration-hover, 160ms) var(--ease-standard),
              color            var(--duration-hover, 160ms) var(--ease-standard),
              transform        var(--duration-press, 80ms)  var(--ease-standard);
}
.tz-btn > * { grid-area: 1 / 1; min-width: 0; max-width: 100%; }
.tz-btn__body { display: inline-flex; align-items: center; gap: var(--space-8, 8px); min-width: 0;
  transition: opacity var(--duration-hover, 160ms) var(--ease-standard); }
.tz-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tz-btn__spin { opacity: 0; transition: opacity var(--duration-hover, 160ms) var(--ease-standard); pointer-events: none; }
.tz-btn[aria-busy="true"] .tz-btn__body { opacity: 0; }
.tz-btn[aria-busy="true"] .tz-btn__spin { opacity: 1; }
.tz-btn[aria-busy="true"] { pointer-events: none; }
.tz-btn:active:not(:disabled), .tz-btn.is-pressed { transform: scale(var(--scale-press, 0.98)); }
.tz-btn:disabled { cursor: not-allowed; }
.tz-btn--sm { height: var(--control-sm); min-width: var(--control-sm); padding: 0 var(--space-12); font-size: 14px; line-height: 20px; }
.tz-btn--lg { height: var(--control-lg); min-width: var(--control-lg); padding: 0 var(--space-24); }
.tz-btn--full { display: grid; width: 100%; }
.tz-btn--icon { padding: 0; width: var(--control-md); } .tz-btn--icon.tz-btn--sm { width: var(--control-sm); } .tz-btn--icon.tz-btn--lg { width: var(--control-lg); }
.tz-btn--plaque { padding-inline-start: var(--space-8, 8px); }
.tz-btn--plaque.tz-btn--lg { padding-inline-start: var(--space-12, 12px); }
.tz-btn .tz-plaque-icon { background: var(--bg-sunken); color: var(--text-secondary); }

.tz-btn--primary { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.tz-btn--primary:hover:not(:disabled), .tz-btn--primary.is-hover { background: var(--button-primary-bg-hover); }
.tz-btn--primary:active:not(:disabled), .tz-btn--primary.is-pressed { background: var(--button-primary-bg-active); }
.tz-btn--primary .tz-plaque-icon { background: var(--tz-plaque-on-inverse); color: inherit; }

.tz-btn--secondary { background: var(--button-secondary-bg); border-color: var(--button-secondary-line); }
.tz-btn--secondary:hover:not(:disabled), .tz-btn--secondary.is-hover { background: var(--bg-hover); }
.tz-btn--secondary:active:not(:disabled), .tz-btn--secondary.is-pressed { background: var(--bg-active); }

.tz-btn--ghost { color: var(--text-primary); }
.tz-btn--ghost:hover:not(:disabled), .tz-btn--ghost.is-hover { background: var(--bg-hover); }
.tz-btn--ghost:active:not(:disabled), .tz-btn--ghost.is-pressed { background: var(--bg-active); }

.tz-btn--brand { background: var(--brand); color: var(--on-brand); }
.tz-btn--brand:hover:not(:disabled), .tz-btn--brand.is-hover { background: var(--brand-hover); }
.tz-btn--brand:active:not(:disabled), .tz-btn--brand.is-pressed { background: var(--brand-active); }
.tz-btn--brand .tz-plaque-icon { background: var(--tz-plaque-on-inverse); color: inherit; }

.tz-btn--danger { background: var(--danger); color: var(--on-danger); }
.tz-btn--danger:hover:not(:disabled), .tz-btn--danger.is-hover { background: var(--danger-hover); }
.tz-btn--danger .tz-plaque-icon { background: var(--tz-plaque-on-inverse); color: inherit; }

.tz-btn:disabled, .tz-btn.is-disabled { background: var(--bg-sunken); color: var(--text-disabled); border-color: transparent; }
.tz-btn--secondary:disabled { border-color: var(--line-subtle); background: var(--bg-surface); }
.tz-btn--ghost:disabled { background: transparent; }
.tz-btn:disabled .tz-plaque-icon { background: var(--bg-active); color: var(--text-disabled); }
/* end icon: directional glyphs mirror in RTL; :dir() follows the nearest dir, so an LTR island stays unmirrored */
.tz-btn__end.tz-icon--mirror:dir(rtl) svg { transform: scaleX(-1); }
/* selected = the selection pill (same weight as variant hover so it wins on hover) */
.tz-btn--selected, .tz-btn--selected:hover:not(:disabled), .tz-btn--selected.is-hover { background: var(--selection-bg); border-color: var(--selection-line); box-shadow: var(--selection-shadow); color: var(--text-primary); }
/* disclosure chevron turns when the button controls an open region */
.tz-btn__end[data-glyph="chevron-down"] svg { transition: transform var(--duration-expand, 240ms) var(--ease-standard); }
.tz-btn[aria-expanded="true"] .tz-btn__end[data-glyph="chevron-down"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .tz-btn__end[data-glyph="chevron-down"] svg { transition-duration: 1ms; } }

/* link */
.tz-link { color: var(--brand-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); border-radius: 4px;
  transition: text-decoration-color var(--duration-hover, 160ms) var(--ease-standard); }
.tz-link:hover { text-decoration-color: currentColor; }

/* ---------- Field (text input) ---------- */
.tz-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8, 8px); min-width: 0; }
.tz-field__label { display: flex; justify-content: space-between; gap: var(--space-8, 8px); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-primary); }
.tz-field__optional { color: var(--text-tertiary); font-weight: 400; }
.tz-field__box { position: relative; display: flex; align-items: center; gap: var(--space-8, 8px);
  height: var(--control-md); padding: 0 var(--space-16); border-radius: var(--radius-control, 12px);
  border: 1px solid var(--field-line); background: var(--field-bg); color: var(--text-primary);
  transition: border-color var(--duration-hover, 160ms) var(--ease-standard), background-color var(--duration-hover, 160ms) var(--ease-standard); }
.tz-field__box:hover { border-color: var(--text-tertiary); }
.tz-field__box:focus-within { border-color: var(--line-default); outline: 2px solid var(--focus); outline-offset: 2px; }
.tz-field--sm .tz-field__box { height: var(--control-sm); padding: 0 var(--space-12); }
.tz-field--lg .tz-field__box { height: var(--control-lg); }
.tz-field--sunken .tz-field__box { background: var(--field-sunken-bg); border-color: var(--field-sunken-line); }
.tz-field--sunken .tz-field__box:hover { border-color: var(--line-default); }
.tz-field--sunken .tz-field__box:focus-within { background: var(--bg-surface); border-color: var(--line-default); }
.tz-field__input { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: inherit;
  font-size: 16px; line-height: 24px; font-family: inherit; outline: none; }
.tz-field--sm .tz-field__input { font-size: 14px; line-height: 20px; }
.tz-field__input::placeholder { color: var(--text-tertiary); opacity: 1; }
.tz-field__input[dir="ltr"] { text-align: left; }
.tz-field__input[type="number"], .tz-field__input.tz-num { font-variant-numeric: tabular-nums; }
.tz-field__input::-webkit-outer-spin-button, .tz-field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tz-field__input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.tz-field__adorn { display: inline-flex; align-items: center; color: var(--text-tertiary); flex: none; font-size: 14px; line-height: 20px; }
.tz-field__adorn .tz-icon { width: var(--icon-md, 20px); height: var(--icon-md, 20px); }
.tz-field--sm .tz-field__adorn .tz-icon { width: 16px; height: 16px; }
.tz-field__help { display: flex; align-items: flex-start; gap: var(--space-4, 4px); min-height: 20px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.tz-field__help .tz-icon { width: 16px; height: 16px; margin-top: 2px; }
.tz-field--error .tz-field__box { border-color: var(--danger); }
.tz-field--error .tz-field__box:focus-within { border-color: var(--danger); outline-color: var(--danger); }
.tz-field--error .tz-field__help { color: var(--danger); }
.tz-field--success .tz-field__help { color: var(--success); }
.tz-field--disabled .tz-field__box { background: var(--bg-sunken); border-color: var(--line-subtle); color: var(--text-disabled); }
.tz-field--disabled .tz-field__label { color: var(--text-disabled); }
.tz-field--disabled .tz-field__input { cursor: not-allowed; }
.tz-field--disabled .tz-field__input::placeholder { color: var(--text-disabled); }
.tz-field--disabled .tz-field__box:hover { border-color: var(--line-subtle); }

/* ---------- Slider ---------- */
.tz-slider { display: grid; gap: var(--space-8, 8px); min-width: 0; }
.tz-slider__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16, 16px); font-size: 14px; line-height: 20px; font-weight: 500; }
.tz-slider__value { display: inline-grid; color: var(--text-secondary); font-weight: 500; text-align: end; flex: none; }
.tz-slider__value > * { grid-area: 1 / 1; }
.tz-slider__sizer { visibility: hidden; }
.tz-slider__rail { position: relative; height: var(--touch, 40px); display: flex; align-items: center; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.tz-slider__track { position: relative; width: 100%; height: var(--track); border-radius: var(--radius-indicator, 4px); background: var(--slider-track-bg); overflow: visible; }
.tz-slider__fill { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: calc(var(--p) * 1%); border-radius: inherit; background: var(--slider-fill); }
.tz-slider__thumb { position: absolute; top: 50%; inset-inline-start: calc(var(--p) * 1%); width: var(--thumb); height: var(--thumb);
  transform: translate(-50%, -50%); border-radius: var(--radius-full, 999px);
  background: var(--slider-thumb-bg); border: 1px solid var(--slider-thumb-line); box-shadow: var(--shadow-raised);
  cursor: grab; outline-offset: 2px;
  transition: border-color var(--duration-hover, 160ms) var(--ease-standard), box-shadow var(--duration-hover, 160ms) var(--ease-standard); }
[dir="rtl"] .tz-slider__thumb { transform: translate(50%, -50%); }
.tz-slider__thumb::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: var(--touch, 40px); height: var(--touch, 40px); transform: translate(-50%, -50%); border-radius: 50%; }
.tz-slider__rail:hover .tz-slider__thumb, .tz-slider.is-dragging .tz-slider__thumb { border-color: var(--brand-text); }
.tz-slider.is-dragging .tz-slider__thumb { cursor: grabbing; }
.tz-slider__bubble { position: absolute; bottom: calc(50% + var(--thumb) / 2 + var(--space-4, 4px)); inset-inline-start: calc(var(--p) * 1%);
  transform: translate(-50%, var(--travel-sm, 4px)); height: 24px; padding: 0 var(--space-8, 8px); border-radius: var(--radius-control, 12px);
  background: var(--selection-bg); color: var(--text-primary); border: 1px solid var(--selection-line); font-size: 12px; line-height: 22px; font-weight: 500;
  white-space: nowrap; box-shadow: var(--shadow-floating); opacity: 0; pointer-events: none;
  transition: opacity var(--duration-hover, 160ms) var(--ease-standard), transform var(--duration-hover, 160ms) var(--ease-standard); }
[dir="rtl"] .tz-slider__bubble { transform: translate(50%, var(--travel-sm, 4px)); }
.tz-slider.is-dragging .tz-slider__bubble, .tz-slider__thumb:focus-visible + .tz-slider__bubble { opacity: 1; transform: translate(-50%, 0); }
[dir="rtl"] .tz-slider.is-dragging .tz-slider__bubble, [dir="rtl"] .tz-slider__thumb:focus-visible + .tz-slider__bubble { transform: translate(50%, 0); }
.tz-slider--disabled { pointer-events: none; }
.tz-slider--disabled .tz-slider__fill { background: var(--text-disabled); }
.tz-slider--disabled .tz-slider__thumb { background: var(--bg-sunken); border-color: var(--line-subtle); box-shadow: none; }
.tz-slider--disabled .tz-slider__head, .tz-slider--disabled .tz-slider__value { color: var(--text-disabled); }
.tz-slider__marks { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
/* variant: bar (media) — a thick track that is itself the handle; the thumb appears on hover */
.tz-slider--bar .tz-slider__track { height: 8px; }
.tz-slider--bar .tz-slider__track { background: var(--bg-active); }
.tz-slider--bar .tz-slider__thumb { opacity: 0; transition: opacity var(--duration-hover, 160ms) var(--ease-standard), border-color var(--duration-hover, 160ms) var(--ease-standard); }
.tz-slider--bar .tz-slider__rail:hover .tz-slider__thumb, .tz-slider--bar.is-dragging .tz-slider__thumb, .tz-slider--bar .tz-slider__thumb:focus-visible { opacity: 1; }

/* ---------- Card ---------- */
.tz-card { position: relative; display: flex; flex-direction: column; gap: var(--space-16, 16px);
  padding: var(--frame-pad); border-radius: var(--frame-radius, 24px); border: 1px solid var(--frame-line); background: var(--frame-bg); color: var(--text-primary); min-width: 0;
  transition: border-color var(--duration-hover, 160ms) var(--ease-standard), background-color var(--duration-hover, 160ms) var(--ease-standard); }
.tz-card--raised { background: var(--bg-raised); box-shadow: var(--shadow-raised); }
[data-theme="dark"] .tz-card--raised { border-color: var(--line-default); }
.tz-card--sunken { background: var(--bg-sunken); border-color: transparent; }
.tz-card--interactive { cursor: pointer; }
.tz-card--interactive:hover { border-color: var(--line-default); }
.tz-card--interactive:active { background: var(--bg-hover); }
.tz-card--ambient { background: linear-gradient(to bottom, color-mix(in oklch, var(--tz-ambient, var(--brand)) 16%, var(--bg-surface)), var(--bg-surface) 70%);
  border-color: color-mix(in oklch, var(--tz-ambient, var(--brand)) 28%, var(--line-subtle)); }
.tz-card__head { display: grid; gap: var(--space-8, 8px); }
.tz-card__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.tz-card__desc { margin: 0; color: var(--text-secondary); }
.tz-card__body { min-width: 0; }
.tz-card__foot { display: flex; flex-wrap: wrap; gap: var(--space-8, 8px); align-items: center; margin-top: auto; }
.tz-card__foot--end { justify-content: flex-end; }
/* media: nested radius = max(frame − inset, control). Inset media keeps 12; bleed media is concentric (23 = 24 − 1px border). */
.tz-card__media { position: relative; overflow: hidden; background: var(--bg-sunken); border-radius: max(calc(var(--radius-frame, 24px) - var(--frame-pad)), var(--radius-control, 12px)); }
.tz-card__media > img, .tz-card__media > svg, .tz-card__media > canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.tz-card__media--bleed { margin: calc(var(--frame-pad) * -1) calc(var(--frame-pad) * -1) 0; border-radius: calc(var(--radius-frame, 24px) - 1px) calc(var(--radius-frame, 24px) - 1px) 0 0; }
.tz-card__media--ratio { aspect-ratio: 16 / 9; }
/* row layout: media beside content, as tall as the card. The card is the container; .tz-card__layout re-lays its children.
   Container sizes are content-box: 480px card − 2×24 padding − 2×1 border = 430px. */
.tz-card--row, .tz-card--cq { container: tz-card / inline-size; }
.tz-card--row { display: block; }
.tz-card__layout { display: flex; flex-direction: row; align-items: stretch; gap: var(--space-24, 24px); }
.tz-card__layout > .tz-card__media { flex: 0 0 auto; width: 160px; align-self: stretch; }
.tz-card__layout > .tz-card__media--bleed { margin: calc(var(--frame-pad) * -1) 0; margin-inline-start: calc(var(--frame-pad) * -1); border-radius: 0;
  border-start-start-radius: calc(var(--radius-frame, 24px) - 1px); border-end-start-radius: calc(var(--radius-frame, 24px) - 1px); }
.tz-card--row .tz-card__content { display: flex; flex-direction: column; gap: var(--space-16, 16px); min-width: 0; flex: 1 1 auto; }
@container tz-card (max-width: 429px) {
  .tz-card__layout { flex-direction: column; gap: var(--space-16, 16px); }
  .tz-card__layout > .tz-card__media { width: auto; aspect-ratio: 16 / 9; }
  .tz-card__layout > .tz-card__media--bleed { margin: calc(var(--frame-pad) * -1) calc(var(--frame-pad) * -1) 0;
    border-radius: calc(var(--radius-frame, 24px) - 1px) calc(var(--radius-frame, 24px) - 1px) 0 0; }
}
@container tz-card (max-width: 229px) { .tz-card__foot > .tz-btn { flex: 1 1 100%; } }
/* the plaque: anything that sits on media or an effect */
.tz-plaque { display: inline-flex; align-items: center; gap: var(--space-4, 4px); height: 24px; padding: 0 var(--space-8, 8px); border-radius: var(--radius-control, 12px);
  background: var(--plaque); color: var(--text-primary); border: 1px solid var(--line-subtle); font-size: 12px; line-height: 16px; font-weight: 600;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tz-plaque--mono { font-family: var(--font-mono, monospace); font-weight: 400; font-size: 12px; }
.tz-card__media .tz-plaque { position: absolute; top: var(--space-8, 8px); inset-inline-start: var(--space-8, 8px); }
/* badge / chip */
.tz-badge { display: inline-flex; align-items: center; gap: var(--space-4, 4px); height: 24px; padding: 0 var(--space-8, 8px); border-radius: var(--radius-full, 999px);
  font-size: 12px; line-height: 16px; font-weight: 500; background: var(--bg-sunken); color: var(--text-secondary); border: 1px solid transparent; }
.tz-badge--outline { background: transparent; border-color: var(--line-default); }
.tz-badge--success { background: var(--success-soft); color: var(--success); }
.tz-badge--warning { background: var(--warning-soft); color: var(--warning); }
.tz-badge--danger { background: var(--danger-soft); color: var(--danger); }
.tz-badge--info { background: var(--info-soft); color: var(--info); }
.tz-badge--brand { background: var(--brand-soft); color: var(--brand-text); }
.tz-badge .tz-icon { width: 12px; height: 12px; }
/* divider */
.tz-divider { height: 1px; background: var(--line-subtle); margin: 0; border: 0; }

/* ---------- Tabs ---------- */
.tz-tabs { display: grid; gap: var(--space-16, 16px); min-width: 0; }
.tz-tabs__list { position: relative; display: flex; gap: var(--space-8, 8px); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tz-tabs__list::-webkit-scrollbar { display: none; }
.tz-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--space-8, 8px);
  height: var(--control-md); padding: 0 var(--space-16, 16px); border-radius: var(--radius-control, 12px); border: 1px solid transparent; background: transparent;
  color: var(--text-secondary); font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; cursor: pointer; flex: none;
  transition: color var(--duration-hover, 160ms) var(--ease-standard), background-color var(--duration-hover, 160ms) var(--ease-standard); }
.tz-tab:hover { color: var(--text-primary); }
.tz-tab[aria-selected="true"] { color: var(--text-primary); }
.tz-tab:disabled { color: var(--text-disabled); cursor: not-allowed; }
.tz-tab .tz-plaque-icon { transition: background-color var(--duration-hover, 160ms) var(--ease-standard), color var(--duration-hover, 160ms) var(--ease-standard); }
.tz-tab[aria-selected="true"] .tz-plaque-icon { background: var(--brand-soft); color: var(--brand-text); }
.tz-tabs--sm .tz-tab { height: var(--control-sm); font-size: 14px; line-height: 20px; padding: 0 var(--space-12, 12px); }
.tz-tabs__indicator { position: absolute; top: 0; left: 0; height: var(--control-md, 40px); width: 0; border-radius: var(--radius-control, 12px); z-index: 0; pointer-events: none;
  transform: translateX(var(--x, 0px)); width: var(--w, 0px);
  transition: transform var(--duration-expand, 240ms) var(--ease-standard), width var(--duration-expand, 240ms) var(--ease-standard); }
.tz-tabs--sm .tz-tabs__indicator { height: var(--control-sm, 32px); }
.tz-tabs--no-anim .tz-tabs__indicator { transition: none; }
/* pill (default): the active tab is a raised surface */
.tz-tabs--pill .tz-tab:hover:not([aria-selected="true"]):not(:disabled) { background: var(--bg-hover); }
.tz-tabs--pill .tz-tabs__indicator { background: var(--selection-bg); border: 1px solid var(--selection-line); box-shadow: var(--selection-shadow); border-radius: var(--selection-radius); }
/* underline */
.tz-tabs--underline .tz-tabs__list { gap: var(--space-24, 24px); box-shadow: inset 0 -1px 0 var(--line-subtle); }
.tz-tabs--underline .tz-tab { padding: 0; border-radius: var(--radius-indicator, 4px); }
.tz-tabs--underline .tz-tabs__indicator { top: auto; bottom: 0; height: 2px; border-radius: var(--radius-indicator, 4px); background: var(--tabs-underline); }
/* text */
.tz-tabs--text .tz-tabs__list { gap: var(--space-24, 24px); }
.tz-tabs--text .tz-tab { padding: 0; color: var(--text-tertiary); border-radius: var(--radius-indicator, 4px); }
.tz-tabs--text .tz-tab:hover { color: var(--text-secondary); }
.tz-tabs--text .tz-tab[aria-selected="true"] { color: var(--text-primary); }
.tz-tabs--text .tz-tabs__indicator { display: none; }
/* sunken group: a container behind the pills */
.tz-tabs--group .tz-tabs__list { padding: var(--space-4, 4px); background: var(--bg-sunken); border-radius: calc(var(--radius-control, 12px) + var(--space-4, 4px)); align-self: start; }
.tz-tabs--group .tz-tab { height: var(--control-sm); font-size: 14px; line-height: 20px; padding: 0 var(--space-12, 12px); }
.tz-tabs--group .tz-tabs__indicator { height: 32px; background: var(--bg-surface); border: 1px solid var(--line-subtle); box-shadow: var(--shadow-raised); }
.tz-tabs__panels { display: grid; min-width: 0; align-items: start; }
.tz-tabs__panel { min-width: 0; grid-area: 1 / 1; }
.tz-tabs__panel.is-active { animation: tz-fade var(--duration-hover, 160ms) var(--ease-standard); }
.tz-tabs__panel[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
@keyframes tz-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Accordion ---------- */
.tz-acc { display: block; min-width: 0; }
.tz-acc__item { border-top: 1px solid var(--line-subtle); }
.tz-acc__item:first-child { border-top: 0; }
.tz-acc__trigger { display: flex; align-items: center; gap: var(--space-16, 16px); width: calc(100% + var(--space-16, 16px)); margin: 0 calc(var(--space-8, 8px) * -1);
  min-height: 56px; padding: var(--space-16, 16px) var(--space-8, 8px); border: 0; border-radius: var(--radius-control, 12px); background: transparent; color: var(--text-primary);
  font-size: 16px; line-height: 24px; font-weight: 500; text-align: start; cursor: pointer;
  transition: background-color var(--duration-hover, 160ms) var(--ease-standard); }
.tz-acc__trigger:hover { background: var(--bg-hover); }
.tz-acc__trigger:active { background: var(--bg-active); }
.tz-acc__trigger:disabled { color: var(--text-disabled); cursor: not-allowed; background: transparent; }
.tz-acc__title { flex: 1 1 auto; min-width: 0; }
.tz-acc__meta { color: var(--text-tertiary); font-size: 14px; line-height: 20px; font-weight: 400; flex: none; }
.tz-acc__chevron { color: var(--text-tertiary); transition: transform var(--duration-expand, 240ms) var(--ease-standard), color var(--duration-hover, 160ms) var(--ease-standard); }
.tz-acc__item.is-open .tz-acc__chevron { transform: rotate(180deg); color: var(--text-primary); }
.tz-acc__plus { color: var(--text-tertiary); transition: transform var(--duration-expand, 240ms) var(--ease-standard); }
.tz-acc__item.is-open .tz-acc__plus { transform: rotate(45deg); }
.tz-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-expand, 240ms) var(--ease-standard); }
.tz-acc__item.is-open .tz-acc__panel { grid-template-rows: 1fr; }
.tz-acc__inner { min-height: 0; overflow: hidden; }
.tz-acc__content { padding: 0 var(--space-8, 8px) var(--space-24, 24px); margin: 0 calc(var(--space-8, 8px) * -1); color: var(--text-secondary);
  opacity: 0; transition: opacity var(--duration-hover, 160ms) var(--ease-standard); }
.tz-acc__item.is-open .tz-acc__content { opacity: 1; transition-delay: calc(var(--duration-expand, 240ms) - var(--duration-hover, 160ms)); }
.tz-acc__content > :first-child { margin-top: 0; } .tz-acc__content > :last-child { margin-bottom: 0; }
/* variant: outlined items, each its own control-radius box */
.tz-acc--outlined { display: grid; gap: var(--space-8, 8px); }
.tz-acc--outlined .tz-acc__item { border: 1px solid var(--line-subtle); border-radius: var(--radius-control, 12px); background: var(--bg-surface);
  transition: border-color var(--duration-hover, 160ms) var(--ease-standard); }
.tz-acc--outlined .tz-acc__item.is-open { border-color: var(--line-default); }
.tz-acc--outlined .tz-acc__trigger { width: 100%; margin: 0; padding: var(--space-16, 16px); border-radius: var(--radius-control, 12px); }
.tz-acc--outlined .tz-acc__content { padding: 0 var(--space-16, 16px) var(--space-16, 16px); margin: 0; }
/* variant: contained in a sunken panel */
.tz-acc--sunken { background: var(--bg-sunken); border-radius: var(--radius-frame, 24px); padding: var(--space-8, 8px) var(--space-24, 24px); }

/* ---------- layout helpers ---------- */
.tz-stack { display: grid; gap: var(--space-16, 16px); }
.tz-stack--8 { gap: var(--space-8, 8px); } .tz-stack--24 { gap: var(--space-24, 24px); } .tz-stack--32 { gap: var(--space-32, 32px); }
.tz-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8, 8px); }
.tz-row--16 { gap: var(--space-16, 16px); } .tz-row--24 { gap: var(--space-24, 24px); }
.tz-grid { display: grid; gap: var(--space-24, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.tz-grid--start { align-items: start; }
/* aligned: cards in one row share rows (subgrid) so titles, bodies and footers line up whatever the text length */
.tz-grid--aligned { align-items: stretch; }
.tz-grid--aligned > .tz-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: var(--space-16, 16px); }
.tz-grid--aligned > .tz-card > .tz-card__media { grid-row: 1; }
.tz-grid--aligned > .tz-card > .tz-card__head { grid-row: 2; }
.tz-grid--aligned > .tz-card > .tz-card__body { grid-row: 3; }
.tz-grid--aligned > .tz-card > .tz-card__foot { grid-row: 4; margin-top: 0; align-self: end; }
.tz-grid--aligned > .tz-card--no-media { grid-row: 2 / span 3; }
.tz-grid--aligned > .tz-card--no-media > .tz-card__head { grid-row: 1; }
.tz-grid--aligned > .tz-card--no-media > .tz-card__body { grid-row: 2; }
.tz-grid--aligned > .tz-card--no-media > .tz-card__foot { grid-row: 3; }
/* a field beside a button: the button aligns to the input box, not the label or help line */
.tz-field-row { container: tz-field-row / inline-size; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8, 8px); }
.tz-field-row > :first-child { flex: 1 1 0; min-width: 0; }
.tz-field-row > :last-child { flex: none; margin: 0; }
.tz-field-row:has(.tz-field__label) > :last-child { margin-top: calc(20px + var(--space-8, 8px)); } /* label line + gap */
@container tz-field-row (max-width: 319px) {
  .tz-field-row > :first-child, .tz-field-row > :last-child, .tz-field-row:has(.tz-field__label) > :last-child { flex-basis: 100%; margin-top: 0; }
  .tz-field-row > :last-child .tz-btn, .tz-field-row > .tz-btn:last-child { width: 100%; }
}
.tz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .tz-grid--2, .tz-grid--3 { grid-template-columns: minmax(0, 1fr); } }
.tz-panel { padding: var(--frame-pad); border-radius: var(--frame-radius); border: 1px solid var(--frame-line); background: var(--frame-bg); color: var(--text-primary); }
.tz-message { display: flex; gap: var(--space-8, 8px); align-items: flex-start; padding: var(--space-12, 12px) var(--space-16, 16px); border-radius: var(--radius-control, 12px);
  font-size: 14px; line-height: 20px; border: 1px solid transparent; }
.tz-message .tz-icon { width: 20px; height: 20px; flex: none; }
.tz-message--success { background: var(--success-soft); color: var(--success); }
.tz-message--danger { background: var(--danger-soft); color: var(--danger); }
.tz-message--warning { background: var(--warning-soft); color: var(--warning); }
.tz-message--info { background: var(--info-soft); color: var(--info); }
.tz-message--neutral { background: var(--bg-sunken); color: var(--text-secondary); }
/* decorative surface: grain + one soft light. Text never sits on it without a plaque. Falls back to flat on small screens. */
.tz-decor { position: relative; overflow: hidden; background: var(--bg-sunken); isolation: isolate; }
.tz-decor::before { content: ""; position: absolute; inset: -20%; background:
  radial-gradient(40% 50% at 30% 30%, color-mix(in oklch, var(--brand) 35%, transparent), transparent 70%),
  radial-gradient(35% 45% at 75% 70%, color-mix(in oklch, var(--brand) 20%, transparent), transparent 70%);
  filter: blur(24px); z-index: -1; }
.tz-decor::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px; }
@media (max-width: 480px), (prefers-reduced-transparency: reduce) { .tz-decor::before { filter: none; } .tz-decor::after { display: none; } }

/* ---------- Spec overlay: makes the grid, paddings and radii measurable ---------- */
.tz-spec .tz-stage-inner { background-image: linear-gradient(to right, var(--tz-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--tz-grid) 1px, transparent 1px);
  background-size: 8px 8px; background-position: 0 0; }
.tz-spec [data-spec] { position: relative; }
.tz-spec [data-spec]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  border: 0 solid color-mix(in srgb, var(--brand) 16%, transparent); border-width: 0; outline: 1px dashed var(--brand-text); outline-offset: -1px; }
.tz-spec [data-spec]::before { content: attr(data-spec); position: absolute; top: -8px; inset-inline-end: 8px; z-index: 6; pointer-events: none;
  font-family: var(--font-mono, monospace); font-size: 10px; line-height: 16px; padding: 0 4px; border-radius: 4px; background: var(--brand-text); color: var(--on-brand); white-space: nowrap; direction: ltr; }
.tz-spec .tz-card[data-spec]::after { border-width: var(--frame-pad); }
.tz-spec .tz-btn[data-spec]::after, .tz-spec .tz-tab[data-spec]::after { border-width: 0 var(--space-16); }
.tz-spec .tz-field__box[data-spec]::after { border-width: 0 var(--space-16); }
.tz-spec .tz-acc__trigger[data-spec]::after { border-width: var(--space-16) var(--space-8); }
.tz-spec .tz-btn > * { z-index: 1; }

/* forced states for static galleries (mirror :hover / :focus-visible / :active) */
.tz-btn.is-focus, .tz-tab.is-focus, .tz-acc__trigger.is-focus, .tz-slider__thumb.is-focus, .tz-card.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.tz-field.is-focus .tz-field__box { border-color: var(--line-default); outline: 2px solid var(--focus); outline-offset: 2px; }
.tz-field--sunken.is-focus .tz-field__box { background: var(--bg-surface); }
.tz-field--error.is-focus .tz-field__box { border-color: var(--danger); outline-color: var(--danger); }
.tz-field.is-hover .tz-field__box { border-color: var(--text-tertiary); }
.tz-field--sunken.is-hover .tz-field__box { border-color: var(--line-default); }
.tz-slider.is-hover .tz-slider__thumb { border-color: var(--brand-text); }
.tz-slider.is-focus .tz-slider__bubble { opacity: 1; transform: translate(-50%, 0); }
.tz-slider.is-focus .tz-slider__thumb { outline: 2px solid var(--focus); outline-offset: 2px; }
[dir="rtl"] .tz-slider.is-focus .tz-slider__bubble { transform: translate(50%, 0); }
.tz-tab.is-hover { color: var(--text-primary); }
.tz-tabs--pill .tz-tab.is-hover:not([aria-selected="true"]) { background: var(--bg-hover); }
.tz-acc__trigger.is-hover { background: var(--bg-hover); }
.tz-card.is-hover { border-color: var(--line-default); }
.tz-acc__trigger:disabled .tz-acc__chevron, .tz-acc__trigger:disabled .tz-acc__plus { color: var(--text-disabled); }
.tz-spec .tz-btn[data-spec]::before, .tz-spec .tz-tab[data-spec]::before { opacity: 0; transition: opacity var(--duration-hover, 160ms) var(--ease-standard); }
.tz-spec .tz-btn[data-spec]:hover::before, .tz-spec .tz-tab[data-spec]:hover::before { opacity: 1; }


/* Persian tracking is always 0 */
[dir="rtl"] .tz-display, [dir="rtl"].tz-display, [dir="rtl"] .tz-title, [dir="rtl"].tz-title, [dir="rtl"] .tz-eyebrow, [dir="rtl"].tz-eyebrow { letter-spacing: 0; text-transform: none; }
/* small controls take icon-sm */
.tz-btn--sm .tz-icon, .tz-btn--sm .tz-spinner, .tz-field--sm .tz-icon, .tz-tabs--sm .tz-tab .tz-icon { width: var(--icon-sm); height: var(--icon-sm); }
/* one-line atoms; group tabs hug their content */
.tz-badge, .tz-plaque { white-space: nowrap; flex: none; }
.tz-tabs--group .tz-tabs__list { justify-self: start; }
/* read-only: readable (text-primary), selectable, focusable; visibly neither editable nor disabled */
.tz-field--readonly .tz-field__box, .tz-field--readonly.tz-field--sunken .tz-field__box { background: transparent; border-color: var(--line-subtle); }
.tz-field--readonly .tz-field__box:hover, .tz-field--readonly.tz-field--sunken .tz-field__box:hover { border-color: var(--line-subtle); }
.tz-field--readonly .tz-field__box:focus-within, .tz-field--readonly.tz-field--sunken .tz-field__box:focus-within { background: transparent; border-color: var(--line-default); }
.tz-field--readonly .tz-field__input { cursor: default; }
.tz-slider--readonly .tz-slider__rail { cursor: default; }
.tz-slider--readonly .tz-slider__fill { background: var(--text-secondary); }
.tz-slider--readonly .tz-slider__thumb, .tz-slider--readonly .tz-slider__rail:hover .tz-slider__thumb { cursor: default; border-color: var(--line-default); box-shadow: none; }
.tz-slider--readonly .tz-slider__value { color: var(--text-primary); }