:root, :where(.td-app[data-theme="dark"]) {
  --td-font-sans: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --td-font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
  --td-canvas: #080f1d;
  --td-list: #0d1728;
  --td-text-primary: #f2f6ff;
  --td-text-muted: #9eacc3;
  --td-text-on-strong: #fff;
  --td-text-on-bright: #07101f;
  --td-line: rgba(255, 255, 255, .10);
  --td-line-strong: rgba(255, 255, 255, .16);
  --td-primary: #5b8def;
  --td-primary-active: #316bd4;
  --td-success: #43c98d;
  --td-warning: #f1a14b;
  --td-danger: #e75869;
  /* Existing semantic hues, darkened only for small white text on solid fills. */
  --td-success-strong: color-mix(in srgb, var(--td-success) 60%, var(--td-text-on-bright));
  --td-warning-strong: color-mix(in srgb, var(--td-warning) 60%, var(--td-text-on-bright));
  --td-danger-strong: color-mix(in srgb, var(--td-danger) 80%, var(--td-text-on-bright));
  --td-primary-ink: var(--td-primary);
  --td-success-ink: var(--td-success);
  --td-warning-ink: var(--td-warning);
  --td-danger-ink: var(--td-danger);
  --td-radius-sm: 10px;
  --td-radius: 14px;
  --td-radius-lg: 18px;
  --td-space-1: 4px;
  --td-space-2: 8px;
  --td-space-3: 12px;
  --td-space-4: 16px;
  --td-space-5: 20px;
  --td-space-6: 24px;
  --td-type-meta: 11px;
  --td-type-label: 12px;
  --td-type-body: 14px;
  --td-type-title: 18px;
  --td-type-display: 28px;
  --td-highlight-rgb: 255 255 255;
  --td-shadow-rgb: 0 0 0;
  --td-overlay-rgb: 3 8 18;
  --td-icon-filter: brightness(0) invert(1);
  --td-icon-primary-filter: invert(56%) sepia(50%) saturate(711%) hue-rotate(187deg) brightness(97%) contrast(91%);
  --td-focus: 0 0 0 3px color-mix(in srgb, var(--td-primary) 28%, transparent);
  /* A quiet specular rim shared by both materials. Inset light stays inside
     the existing one-pixel edge: no overlay, layout shift or moving glow. */
  --td-glass-rim: inset 0 1px 0 rgb(var(--td-highlight-rgb) / .38), inset 0 0 0 1px rgb(var(--td-highlight-rgb) / .045), inset 0 10px 14px -14px rgb(var(--td-highlight-rgb) / .5);
  --td-shadow-card: var(--td-glass-rim), 0 18px 44px -28px rgb(var(--td-shadow-rgb) / .75);
  --td-shadow-popover: 0 18px 44px -20px rgb(var(--td-shadow-rgb) / .58);
  /* Two block paints only: a readable translucent block and an
     ultra-transparent block copied from the desktop activation card. */
  --td-block-rgb: 35 49 78;
  --td-block-opacity: .56;
  --td-ultra-surface: linear-gradient(145deg, rgba(72, 96, 139, .20), rgba(25, 38, 65, .14));
  --td-ultra-border: var(--td-glass-border);
  --td-ultra-shadow: var(--td-glass-rim), 0 24px 64px rgb(var(--td-shadow-rgb) / .28);
  --td-glass-border: color-mix(in srgb, rgb(var(--td-highlight-rgb) / .7) 52%, var(--td-primary) 16%);
  --td-glass-block:
    radial-gradient(140% 95% at 4% 0%, rgb(var(--td-highlight-rgb) / .17) 0%, transparent 48%),
    radial-gradient(120% 100% at 100% 100%, color-mix(in srgb, var(--td-primary) 11%, transparent) 0%, transparent 54%),
    linear-gradient(142deg, rgb(var(--td-highlight-rgb) / .09) 0%, transparent 58%),
    linear-gradient(rgb(var(--td-block-rgb) / var(--td-block-opacity)), rgb(var(--td-block-rgb) / var(--td-block-opacity)));
  --td-preset-dark:
    radial-gradient(1200px 720px at 5% -8%, rgba(91,141,239,.24), transparent 64%),
    radial-gradient(880px 620px at 104% 0%, rgba(168,85,247,.16), transparent 60%),
    linear-gradient(135deg, #0b1020 0%, #11182a 48%, #0a0b12 100%);
  --td-preset-light:
    radial-gradient(1050px 680px at 2% -10%, rgba(91,141,239,.30), transparent 62%),
    radial-gradient(920px 640px at 105% 2%, rgba(168,85,247,.20), transparent 62%),
    linear-gradient(135deg, #edf4ff 0%, #e3eefc 48%, #f5f8ff 100%);
  --td-wallpaper:
    radial-gradient(1200px 720px at 5% -8%, rgba(91,141,239,.24), transparent 64%),
    radial-gradient(880px 620px at 104% 0%, rgba(168,85,247,.16), transparent 60%),
    linear-gradient(135deg, #0b1020 0%, #11182a 48%, #0a0b12 100%);
}

html[data-theme="light"], .td-app[data-theme="light"] {
  --td-canvas: #e9f0fa;
  --td-list: #f1f5fb;
  --td-text-primary: #152238;
  --td-text-muted: #64738b;
  --td-primary-ink: var(--td-primary-active);
  --td-success-ink: var(--td-success-strong);
  --td-warning-ink: var(--td-warning-strong);
  --td-danger-ink: var(--td-danger-strong);
  --td-icon-filter: none;
  --td-line: rgba(255,255,255,.62);
  --td-line-strong: rgba(112,132,166,.22);
  --td-shadow-rgb: 42 71 115;
  --td-glass-rim: inset 0 1px 0 rgb(var(--td-highlight-rgb) / .9), inset 0 0 0 1px rgb(var(--td-highlight-rgb) / .16), inset 0 10px 14px -14px rgb(var(--td-highlight-rgb) / .65);
  --td-glass-border: color-mix(in srgb, rgb(var(--td-highlight-rgb) / .86) 48%, var(--td-line-strong));
  --td-shadow-card: var(--td-glass-rim), 0 18px 40px -30px rgb(var(--td-shadow-rgb) / .4);
  --td-shadow-popover: 0 18px 44px -20px rgb(var(--td-shadow-rgb) / .24);
  --td-block-rgb: 236 243 252;
  --td-block-opacity: .58;
  --td-ultra-surface: linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(204, 223, 248, .22) 52%, rgba(232, 218, 247, .16));
  --td-ultra-border: var(--td-glass-border);
  --td-ultra-shadow: var(--td-glass-rim), 0 24px 64px rgb(var(--td-shadow-rgb) / .18);
}

/* Exact curated workspace backgrounds from desktop ui/app.js: four presets
   from each of the four families. The same variables paint the full page and
   the gallery swatches, so previews cannot drift from the product. */
[data-liquid-bg="gallery-pulse-blue"], .td-background-option--gallery-pulse-blue { --td-preset-dark: linear-gradient(132deg, #173f8a 0%, #2c76cf 52%, #75dce2 100%); --td-preset-light: linear-gradient(132deg, #eaf2ff 0%, #b8d5ff 52%, #d5f6f4 100%); }
[data-liquid-bg="cyan-drift"], .td-background-option--cyan-drift { --td-preset-dark: linear-gradient(214deg, #0d3038 0%, #168c99 52%, #285bb4 100%); --td-preset-light: linear-gradient(214deg, #ecfcfb 0%, #b7f0ed 52%, #c4d6ff 100%); }
[data-liquid-bg="violet-haze"], .td-background-option--violet-haze { --td-preset-dark: linear-gradient(142deg, #21113f 0%, #7b52d7 52%, #ef8dbb 100%); --td-preset-light: linear-gradient(142deg, #fbf8ff 0%, #d9c6ff 52%, #f7c9de 100%); }
[data-liquid-bg="teal-rose"], .td-background-option--teal-rose { --td-preset-dark: linear-gradient(124deg, #092a25 0%, #178f81 52%, #e46c9f 100%); --td-preset-light: linear-gradient(124deg, #f2fffb 0%, #bceee2 52%, #f7cadb 100%); }
[data-liquid-bg="glacier-blue"], .td-background-option--glacier-blue { --td-preset-dark: radial-gradient(84% 96% at 18% 14%, rgba(82,145,232,.78) 0%, transparent 63%), radial-gradient(78% 90% at 84% 88%, rgba(103,213,225,.68) 0%, transparent 64%), linear-gradient(142deg, #07131f 0%, #0d2139 54%, #081323 100%); --td-preset-light: radial-gradient(84% 96% at 18% 14%, rgba(82,145,232,.38) 0%, transparent 63%), radial-gradient(78% 90% at 84% 88%, rgba(103,213,225,.34) 0%, transparent 64%), linear-gradient(142deg, #f4fbff 0%, #e0efff 54%, #f7fbff 100%); }
[data-liquid-bg="gallery-ink-wave"], .td-background-option--gallery-ink-wave { --td-preset-dark: radial-gradient(82% 98% at 86% 16%, rgba(105,133,229,.76) 0%, transparent 63%), radial-gradient(74% 84% at 8% 94%, rgba(165,193,255,.62) 0%, transparent 64%), linear-gradient(126deg, #0b1020 0%, #161c39 48%, #090f1d 100%); --td-preset-light: radial-gradient(82% 98% at 86% 16%, rgba(105,133,229,.36) 0%, transparent 63%), radial-gradient(74% 84% at 8% 94%, rgba(165,193,255,.30) 0%, transparent 64%), linear-gradient(126deg, #f5f7ff 0%, #e6ecfc 48%, #f9faff 100%); }
[data-liquid-bg="gallery-magma"], .td-background-option--gallery-magma { --td-preset-dark: radial-gradient(86% 98% at 86% 12%, rgba(238,127,78,.76) 0%, transparent 63%), radial-gradient(78% 88% at 10% 92%, rgba(211,88,169,.66) 0%, transparent 64%), linear-gradient(148deg, #1a0d19 0%, #32142b 56%, #160d1e 100%); --td-preset-light: radial-gradient(86% 98% at 86% 12%, rgba(238,127,78,.37) 0%, transparent 63%), radial-gradient(78% 88% at 10% 92%, rgba(211,88,169,.30) 0%, transparent 64%), linear-gradient(148deg, #fff8f6 0%, #faeaf4 56%, #fbf8ff 100%); }
[data-liquid-bg="gallery-aurora-pair"], .td-background-option--gallery-aurora-pair { --td-preset-dark: radial-gradient(88% 102% at 10% 10%, rgba(83,222,191,.70) 0%, transparent 63%), radial-gradient(80% 90% at 94% 96%, rgba(84,126,238,.68) 0%, transparent 64%), linear-gradient(138deg, #071a20 0%, #10313a 50%, #0a1527 100%); --td-preset-light: radial-gradient(88% 102% at 10% 10%, rgba(83,222,191,.33) 0%, transparent 63%), radial-gradient(80% 90% at 94% 96%, rgba(84,126,238,.32) 0%, transparent 64%), linear-gradient(138deg, #f2fffb 0%, #e0f5ef 50%, #f5f8ff 100%); }
[data-liquid-bg="gallery-halo"], .td-background-option--gallery-halo { --td-preset-dark: conic-gradient(from 22deg at 50% 50%, rgba(75,126,242,.78) 0deg, rgba(74,209,241,.68) 82deg, rgba(147,106,255,.72) 178deg, rgba(91,145,255,.62) 264deg, rgba(75,126,242,.78) 360deg), radial-gradient(circle at 50% 50%, rgba(220,237,255,.66) 0%, rgba(220,237,255,.16) 13%, transparent 34%), linear-gradient(142deg, #091225 0%, #102243 54%, #081222 100%); --td-preset-light: conic-gradient(from 22deg at 50% 50%, rgba(75,126,242,.38) 0deg, rgba(74,209,241,.31) 82deg, rgba(147,106,255,.34) 178deg, rgba(91,145,255,.28) 264deg, rgba(75,126,242,.38) 360deg), radial-gradient(circle at 50% 50%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.24) 13%, transparent 34%), linear-gradient(142deg, #f6f9ff 0%, #e6eeff 54%, #f8fbff 100%); }
[data-liquid-bg="gallery-spectral"], .td-background-option--gallery-spectral { --td-preset-dark: conic-gradient(from 212deg at 50% 50%, rgba(158,104,255,.74) 0deg, rgba(86,176,244,.67) 82deg, rgba(79,216,183,.64) 178deg, rgba(234,111,182,.61) 264deg, rgba(158,104,255,.74) 360deg), radial-gradient(circle at 50% 50%, rgba(242,236,255,.61) 0%, rgba(242,236,255,.14) 13%, transparent 34%), linear-gradient(142deg, #110d22 0%, #171b3c 54%, #0b1722 100%); --td-preset-light: conic-gradient(from 212deg at 50% 50%, rgba(158,104,255,.35) 0deg, rgba(86,176,244,.30) 82deg, rgba(79,216,183,.28) 178deg, rgba(234,111,182,.27) 264deg, rgba(158,104,255,.35) 360deg), radial-gradient(circle at 50% 50%, rgba(255,255,255,.74) 0%, rgba(255,255,255,.22) 13%, transparent 34%), linear-gradient(142deg, #fbf9ff 0%, #eeeaff 54%, #f4fcfb 100%); }
[data-liquid-bg="gallery-cobalt-orbit"], .td-background-option--gallery-cobalt-orbit { --td-preset-dark: conic-gradient(from 104deg at 50% 50%, rgba(53,119,238,.76) 0deg, rgba(80,211,242,.64) 82deg, rgba(108,146,255,.70) 178deg, rgba(43,82,198,.62) 264deg, rgba(53,119,238,.76) 360deg), radial-gradient(circle at 50% 50%, rgba(224,238,255,.64) 0%, rgba(224,238,255,.14) 13%, transparent 34%), linear-gradient(142deg, #07142a 0%, #0b2144 54%, #081528 100%); --td-preset-light: conic-gradient(from 104deg at 50% 50%, rgba(53,119,238,.36) 0deg, rgba(80,211,242,.29) 82deg, rgba(108,146,255,.32) 178deg, rgba(43,82,198,.27) 264deg, rgba(53,119,238,.36) 360deg), radial-gradient(circle at 50% 50%, rgba(255,255,255,.74) 0%, rgba(255,255,255,.22) 13%, transparent 34%), linear-gradient(142deg, #f5f9ff 0%, #e1edff 54%, #f8fbff 100%); }
[data-liquid-bg="gallery-rose-orbit"], .td-background-option--gallery-rose-orbit { --td-preset-dark: conic-gradient(from 286deg at 50% 50%, rgba(241,105,166,.70) 0deg, rgba(255,163,111,.62) 82deg, rgba(163,112,242,.68) 178deg, rgba(235,91,181,.58) 264deg, rgba(241,105,166,.70) 360deg), radial-gradient(circle at 50% 50%, rgba(255,235,246,.65) 0%, rgba(255,235,246,.14) 13%, transparent 34%), linear-gradient(142deg, #220e22 0%, #3a1637 54%, #191027 100%); --td-preset-light: conic-gradient(from 286deg at 50% 50%, rgba(241,105,166,.33) 0deg, rgba(255,163,111,.29) 82deg, rgba(163,112,242,.31) 178deg, rgba(235,91,181,.26) 264deg, rgba(241,105,166,.33) 360deg), radial-gradient(circle at 50% 50%, rgba(255,255,255,.76) 0%, rgba(255,255,255,.22) 13%, transparent 34%), linear-gradient(142deg, #fff8fc 0%, #fae8f4 54%, #f9f7ff 100%); }
[data-liquid-bg="gallery-frostbite"], .td-background-option--gallery-frostbite { --td-preset-dark: linear-gradient(132deg, #163d74 0%, #2b75c8 27%, #39c9cf 52%, #4d92e0 76%, #28357e 100%); --td-preset-light: linear-gradient(132deg, #eef8ff 0%, #b9d5ff 27%, #b4f0ef 52%, #bfd4ff 76%, #e3e9ff 100%); }
[data-liquid-bg="gallery-sunset-deep"], .td-background-option--gallery-sunset-deep { --td-preset-dark: linear-gradient(128deg, #61204c 0%, #d34d88 27%, #ff895f 52%, #a45be3 76%, #42204f 100%); --td-preset-light: linear-gradient(128deg, #fff7fb 0%, #f8b9d3 27%, #ffd0ad 52%, #d9c4ff 76%, #fbf5ff 100%); }
[data-liquid-bg="gallery-ocean-ribbon"], .td-background-option--gallery-ocean-ribbon { --td-preset-dark: linear-gradient(36deg, #102b58 0%, #1e61bc 27%, #39b9e6 52%, #56e0d1 76%, #193b7d 100%); --td-preset-light: linear-gradient(36deg, #edf5ff 0%, #b9d7ff 27%, #b7edff 52%, #bdf5e9 76%, #e3ecff 100%); }
[data-liquid-bg="gallery-cosmic-ribbon"], .td-background-option--gallery-cosmic-ribbon { --td-preset-dark: linear-gradient(38deg, #371866 0%, #7546d7 27%, #d563d9 52%, #f18fae 76%, #48216e 100%); --td-preset-light: linear-gradient(38deg, #f8f3ff 0%, #d9c6ff 27%, #f4c9f5 52%, #ffd0df 76%, #f7f4ff 100%); }
[data-liquid-bg] { --td-wallpaper: var(--td-preset-dark); }
html[data-theme="light"][data-liquid-bg], .td-app[data-theme="light"][data-liquid-bg], .td-story-stage[data-theme="light"][data-liquid-bg] { --td-wallpaper: var(--td-preset-light); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; background: var(--td-canvas); }
html[data-theme="light"] { color-scheme: light; }
.td-app[data-theme="light"] { color-scheme: light; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--td-canvas); color: var(--td-text-primary); font: 500 var(--td-type-body)/1.5 var(--td-font-sans); }
body.td-modal-open { overflow: hidden; }
html[data-td-modal-open] { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .52; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 0; box-shadow: var(--td-focus); }
.td-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Shell, sidebar and scrolling */
.td-card__content, .td-table__cell-content { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--td-space-3); }
.td-block.td-card[data-framed="false"] { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.td-card__content[data-layout="row"] { display: flex; flex-wrap: wrap; align-items: center; }
.td-card__content[data-layout="grid"] { --td-card-columns: 2; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(200px, calc((100% - (var(--td-card-columns) - 1) * var(--td-space-3)) / var(--td-card-columns)))), 1fr)); }
.td-card__content[data-columns="1"] { --td-card-columns: 1; }
.td-card__content[data-columns="3"] { --td-card-columns: 3; }
.td-card__content[data-columns="4"] { --td-card-columns: 4; }
.td-table__cell-content { gap: var(--td-space-1); }
.td-card__qr { display: block; width: min(100%,224px); height: auto; margin-inline: auto; }
.td-table__cell-content > .td-profile { min-width: 180px; }
.td-app { --td-sidebar-motion: 180ms; --td-sidebar-ease: cubic-bezier(.22,1,.36,1); container: td-workspace / inline-size; display: grid; align-content: start; width: 100%; min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 232px) minmax(0,1fr); gap: var(--td-space-3); min-height: 100vh; padding: var(--td-space-3); background: var(--td-wallpaper); transition: grid-template-columns var(--td-sidebar-motion) var(--td-sidebar-ease); }
/* Width must reflow the adjacent workspace; labels and icons never scale. */
.td-block.td-sidebar { --td-sidebar-motion: 180ms; --td-sidebar-ease: cubic-bezier(.22,1,.36,1); position: sticky; z-index: 30; top: var(--td-space-3); display: flex; width: 232px; min-width: 0; max-width: 100%; flex-direction: column; height: calc(100dvh - 2 * var(--td-space-3)); min-height: 0; max-height: calc(100dvh - 2 * var(--td-space-3)); gap: var(--td-space-3); overflow: hidden; padding: 16px 10px; border-radius: var(--td-radius); transition: width var(--td-sidebar-motion) var(--td-sidebar-ease); }
.td-app > .td-block.td-sidebar { width: 100%; }
.td-sidebar__brand { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 34px 32px; align-content: center; align-items: center; gap: 8px; min-height: 82px; margin: 0 0 4px; font-weight: 760; }
.td-sidebar__brand > .td-logo { width: calc(100% - 14px); max-width: none; margin-inline: 7px; grid-template-columns: 28px minmax(0,1fr); transition: gap var(--td-sidebar-motion) var(--td-sidebar-ease); }
.td-sidebar__brand .td-logo__mark { width: 28px; height: 28px; }
.td-sidebar__brand > .td-sidebar-toggle { margin-inline-start: 5px; }
/* Inline needs room for both the unchanged mark and the square toggle. */
.td-sidebar[data-header-layout="inline"], .td-app[data-sidebar-layout="inline"] { --td-sidebar-rail: 88px; --td-sidebar-target: 66px; --td-sidebar-icon-inset: 21px; }
.td-sidebar[data-header-layout="inline"] .td-sidebar__brand { grid-template-columns: minmax(28px,1fr) 32px; grid-template-rows: 1fr; gap: 4px; padding-inline: 1px; }
.td-sidebar[data-header-layout="inline"] .td-sidebar__brand > .td-logo { width: 100%; margin: 0; }
.td-sidebar[data-header-layout="inline"] .td-sidebar__brand > .td-sidebar-toggle { margin: 0; }
.td-sidebar__footer { display: grid; flex: 0 0 auto; gap: 7px; min-width: 0; }
.td-sidebar__nav { display: grid; align-content: start; justify-items: stretch; flex: 1 1 auto; min-height: 0; gap: 3px; overflow: hidden auto; scrollbar-width: thin; }
.td-sidebar__group { max-height: 24px; margin: 13px 0 4px; padding: 0 10px; color: var(--td-text-muted); opacity: 1; transform: translateX(0); font-size: 10px; font-weight: 750; letter-spacing: .28em; text-transform: uppercase; transition: max-height var(--td-sidebar-motion) var(--td-sidebar-ease), margin var(--td-sidebar-motion) var(--td-sidebar-ease), padding var(--td-sidebar-motion) var(--td-sidebar-ease), opacity 100ms ease-out, transform var(--td-sidebar-motion) var(--td-sidebar-ease); }
.td-logo { display: inline-grid; width: 100%; max-width: 100%; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 8px; min-width: 0; color: var(--td-text-primary); opacity: 1; transform: translateX(0); text-decoration: none; }
.td-logo__mark { display: block; width: 34px; height: 34px; object-fit: contain; }
.td-logo__name { overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; font-size: 15px; font-weight: 760; letter-spacing: 0; }
.td-logo__caption { overflow: hidden; color: var(--td-text-muted); text-overflow: ellipsis; overflow-wrap: anywhere; font-size: var(--td-type-meta); font-weight: 600; }
.td-logo[data-variant="mark"] { width: fit-content; grid-template-columns: auto; }
.td-logo[data-variant="wordmark"] { grid-template-columns: minmax(0, 1fr); }
.td-logo[data-variant="stacked"] { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--td-space-3); text-align: center; }
.td-logo[data-variant="stacked"] .td-logo__mark { width: 48px; height: 48px; }
.td-logo[data-variant="stacked"] .td-logo__name { font-size: var(--td-type-title); }
.td-sidebar :is(.td-logo__name, .td-logo__caption) { white-space: nowrap; }
.td-sidebar__brand { margin-inline-end: 0; gap: var(--td-space-1); }
.td-sidebar__brand .td-logo__caption { white-space: nowrap; line-height: 1.35; }
.td-logo__copy { display: grid; min-width: 0; gap: 2px; }.td-sidebar__product { overflow: hidden; color: var(--td-primary); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.td-block.td-sidebar-toggle { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; padding: 0; color: var(--td-text-muted); border-radius: var(--td-radius-sm); transition: color 150ms ease, border-color 150ms ease, background 150ms ease; }
.td-sidebar-toggle:hover { color: var(--td-text-primary); border-color: color-mix(in srgb, var(--td-primary) 46%, var(--td-ultra-border)); background: linear-gradient(color-mix(in srgb, var(--td-primary) 12%, transparent), color-mix(in srgb, var(--td-primary) 12%, transparent)), var(--td-ultra-surface); }
.td-nav-item, .td-sidebar .td-profile { display: flex; width: 100%; align-items: center; min-height: 42px; gap: 12px; padding: 0 6px; color: var(--td-text-muted); appearance: none; background: transparent; box-shadow: none; font: inherit; text-align: start; text-decoration: none; border: 1px solid transparent; border-radius: 12px; transition: color 100ms ease, background 100ms ease, border-color 100ms ease, box-shadow 100ms ease; }
/* Explicit endpoints keep 42px targets exact at fractional Windows scaling. */
.td-sidebar :is(.td-nav-item, .td-profile) { width: 210px; max-width: 100%; flex-shrink: 0; overflow: hidden; padding-inline: var(--td-sidebar-icon-inset, 9px); transition: width var(--td-sidebar-motion) var(--td-sidebar-ease), color 100ms ease, background 100ms ease, border-color 100ms ease, box-shadow 100ms ease; }
.td-sidebar .td-nav-label, .td-sidebar .td-profile__copy > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-nav-item > .td-nav-label { display: block; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; opacity: 1; transform: translateX(0); }
.td-nav-item > .td-badge { flex: 0 0 auto; margin-inline-start: auto; }
.td-nav-item:hover, .td-sidebar .td-profile:hover, .td-sidebar .td-profile[aria-expanded="true"] { color: var(--td-text-primary); background: var(--td-glass-block); border-color: transparent; filter: none; }
.td-nav-item:focus-visible, .td-sidebar .td-profile:focus-visible { box-shadow: var(--td-focus); }
.td-nav-item[aria-current="page"], .td-nav-item.is-active { color: var(--td-text-primary); background: color-mix(in srgb, var(--td-primary) 22%, var(--td-glass-block)); border-color: color-mix(in srgb, var(--td-primary) 54%, var(--td-line)); box-shadow: inset 3px 0 var(--td-primary); }
.td-nav-item[aria-disabled="true"] { pointer-events: none; opacity: .46; }
.td-nav-icon { flex: 0 0 22px; width: 22px; height: 22px; color: currentColor; }
.td-icon-image { display: block; width: 18px; height: 18px; max-width: none; flex: 0 0 auto; object-fit: contain; opacity: .92; filter: var(--td-icon-filter); }
.td-product-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; color: inherit; background: currentColor; -webkit-mask: var(--td-product-icon) center / contain no-repeat; mask: var(--td-product-icon) center / contain no-repeat; }
.td-product-icon--bell { --td-product-icon: url("assets/icons/bell.svg"); }.td-product-icon--moon { --td-product-icon: url("assets/icons/moon.svg"); }.td-product-icon--sun { --td-product-icon: url("assets/icons/sun.svg"); }.td-product-icon--shield { --td-product-icon: url("assets/icons/shield-check.svg"); }.td-product-icon--version { --td-product-icon: url("assets/icons/badge-check.svg"); }.td-product-icon--refresh { --td-product-icon: url("assets/icons/refresh-cw.svg"); }.td-product-icon--settings { --td-product-icon: url("assets/icons/settings.svg"); }.td-product-icon--power { --td-product-icon: url("assets/icons/power.svg"); }
.td-nav-icon .td-icon-image { width: 22px; height: 22px; }
.td-icon-image--primary, .td-stat-card__icon .td-icon-image, .td-clear-state__icon .td-icon-image { filter: var(--td-icon-primary-filter); }
.td-btn--icon .td-icon-image, .td-icon-btn .td-icon-image { width: 17px; height: 17px; }
.td-sidebar__spacer { display: none; }
.td-sidebar__brand { flex: 0 0 auto; }
.td-main { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--td-space-3); min-width: 0; max-height: calc(100dvh - 2 * var(--td-space-3)); overflow: auto; scroll-padding-block: var(--td-space-3); }
.td-page { width: min(1480px, 100%); min-height: 100%; margin: 0 auto; padding: 24px; }
.td-page-subtitle { margin: var(--td-space-1) 0 0; color: var(--td-text-muted); }
.td-stack { display: grid; gap: var(--td-space-4); }.td-grid { display: grid; gap: var(--td-space-4); }.td-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.td-scroll--demo { max-height: 180px; overflow: auto; }

/* Foundation reference objects ------------------------------------------------ */
.td-section-heading { display: grid; gap: 3px; margin-bottom: var(--td-space-4); }
.td-section-heading__eyebrow { margin: 0; color: var(--td-primary); font-size: var(--td-type-meta); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.td-section-heading__title { margin: 0; color: var(--td-text-primary); font-size: var(--td-type-title); line-height: 1.2; }
.td-section-heading__copy { max-width: 72ch; margin: 0; color: var(--td-text-muted); }
.td-color-groups { display: grid; gap: var(--td-space-4); }
.td-color-group { display: grid; gap: 8px; }
.td-color-group__title { margin: 0; color: var(--td-text-muted); font-size: var(--td-type-label); font-weight: 800; }
.td-color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.td-color-swatch { display: grid; gap: 7px; min-width: 0; padding: 8px; border: 1px solid var(--td-line); border-radius: var(--td-radius-sm); background: var(--td-glass-block); }
.td-color-swatch__sample { height: 38px; border: 1px solid rgb(var(--td-highlight-rgb) / .20); border-radius: 7px; box-shadow: inset 0 1px rgb(var(--td-highlight-rgb) / .24); }
.td-color-swatch__name, .td-color-swatch__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--td-type-meta); }
.td-color-swatch__name { color: var(--td-text-primary); font-weight: 800; }.td-color-swatch__value { color: var(--td-text-muted); font-family: var(--td-font-mono); }
.td-swatch--canvas { background: var(--td-canvas); }.td-swatch--list { background: var(--td-list); }.td-swatch--text-primary { background: var(--td-text-primary); }.td-swatch--text-muted { background: var(--td-text-muted); }.td-swatch--text-on-strong { background: var(--td-text-on-strong); }.td-swatch--text-on-bright { background: var(--td-text-on-bright); }
.td-swatch--primary { background: var(--td-primary); }.td-swatch--primary-active { background: var(--td-primary-active); }.td-swatch--success { background: var(--td-success); }.td-swatch--warning { background: var(--td-warning); }.td-swatch--danger { background: var(--td-danger); }
.td-type-list { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-glass-block); }
.td-type-sample { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: var(--td-space-3); min-height: 56px; padding: 10px 14px; border-bottom: 1px solid var(--td-line); }.td-type-sample:last-child { border-bottom: 0; }
.td-type-sample__meta { color: var(--td-text-muted); font: var(--td-type-meta)/1.3 var(--td-font-mono); }.td-type-sample__text { margin: 0; color: var(--td-text-primary); }.td-type-sample__size { color: var(--td-text-muted); font: var(--td-type-meta)/1.3 var(--td-font-mono); }
.td-type-sample--display .td-type-sample__text { font-size: var(--td-type-display); font-weight: 800; line-height: 1.1; }.td-type-sample--title .td-type-sample__text { font-size: var(--td-type-title); font-weight: 780; }.td-type-sample--body .td-type-sample__text { font-size: var(--td-type-body); }.td-type-sample--label .td-type-sample__text { font-size: var(--td-type-label); font-weight: 750; }.td-type-sample--meta .td-type-sample__text { color: var(--td-text-muted); font-size: var(--td-type-meta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.td-type-colours { display: flex; flex-wrap: wrap; gap: 8px; }.td-type-colour { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--td-line); border-radius: 8px; background: var(--td-glass-block); font-size: var(--td-type-label); font-weight: 800; }.td-type-colour--text { color: var(--td-text-primary); }.td-type-colour--muted { color: var(--td-text-muted); }.td-type-colour--primary { color: var(--td-primary); }.td-type-colour--success { color: var(--td-success); }.td-type-colour--warning { color: var(--td-warning); }.td-type-colour--danger { color: var(--td-danger); }
.td-spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--td-space-3); }
.td-spec { padding: 12px; border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-glass-block); }.td-spec__label { display: block; color: var(--td-text-muted); font-size: var(--td-type-meta); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.td-spec__value { display: block; margin-top: 5px; color: var(--td-text-primary); font: 700 var(--td-type-label)/1.3 var(--td-font-mono); }
.td-material-stage { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: var(--td-space-4); padding: 20px; overflow: hidden; border: 1px solid var(--td-glass-border); border-radius: var(--td-radius-lg); background: var(--td-wallpaper); }
.td-material-sample { display: grid; min-height: 144px; align-content: end; gap: 3px; padding: 14px; color: var(--td-text-primary); border-radius: var(--td-radius); }
.td-material-sample strong { font-size: var(--td-type-label); }.td-material-sample span { color: var(--td-text-muted); font-size: var(--td-type-meta); }
.td-stat-card { display: grid; gap: 8px; min-height: 156px; padding: var(--td-space-4); }.td-stat-card__icon { display: grid; width: 36px; height: 36px; place-items: center; color: var(--td-primary); border: 1px solid color-mix(in srgb, var(--td-primary) 40%, var(--td-line)); border-radius: 10px; background: color-mix(in srgb, var(--td-primary) 10%, transparent); }.td-stat-card__eyebrow { margin: 2px 0 0; color: var(--td-text-muted); font-size: var(--td-type-meta); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.td-stat-card__value { margin: 0; color: var(--td-text-primary); font-size: var(--td-type-display); font-weight: 800; line-height: 1; }.td-stat-card__copy { margin: 0; color: var(--td-text-muted); font-size: var(--td-type-label); }
.td-stat-card--warning .td-stat-card__icon { color: var(--td-warning); border-color: color-mix(in srgb, var(--td-warning) 40%, var(--td-line)); background: color-mix(in srgb, var(--td-warning) 10%, transparent); }.td-stat-card--danger .td-stat-card__icon { color: var(--td-danger); border-color: color-mix(in srgb, var(--td-danger) 40%, var(--td-line)); background: color-mix(in srgb, var(--td-danger) 10%, transparent); }.td-stat-card--empty .td-stat-card__value { color: var(--td-text-muted); }
.td-stat-card--success .td-stat-card__icon { color: var(--td-success); border-color: color-mix(in srgb, var(--td-success) 40%, var(--td-line)); background: color-mix(in srgb, var(--td-success) 10%, transparent); }
.td-clear-state { display: grid; min-height: 156px; place-items: center; align-content: center; gap: 10px; padding: var(--td-space-4); color: var(--td-text-muted); text-align: center; }.td-clear-state__icon { display: grid; width: 48px; height: 48px; place-items: center; color: var(--td-primary); }.td-clear-state__copy { margin: 0; font-size: var(--td-type-body); }
.td-chart-card { display: grid; gap: var(--td-space-3); min-height: 240px; padding: var(--td-space-4); }.td-chart-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--td-space-3); }.td-chart-card__title { margin: 0; color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 800; }.td-chart-card__legend { display: inline-flex; align-items: center; gap: 10px; color: var(--td-text-muted); font-size: var(--td-type-meta); }.td-chart-card__legend::before { width: 10px; height: 10px; border: 2px solid var(--td-success); border-radius: 50%; content: ""; }.td-chart { display: grid; height: 172px; grid-template-columns: repeat(14, minmax(6px, 1fr)); align-items: end; gap: 5px; padding: 12px 8px 24px; border-bottom: 1px solid var(--td-line); background-image: repeating-linear-gradient(to bottom, var(--td-line) 0 1px, transparent 1px 48px); }.td-chart__column { position: relative; display: flex; height: 100%; align-items: end; justify-content: center; }.td-chart__bar { width: min(18px, 70%); min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--td-success); }.td-chart__bar--zero { height: 2px; opacity: .32; }.td-chart__bar--one { height: 100%; }.td-chart__label { position: absolute; top: calc(100% + 7px); left: 50%; color: var(--td-text-muted); font-size: 9px; transform: translateX(-50%); }
.td-background-gallery, .td-background-family { display: grid; gap: var(--td-space-4); }.td-background-family { gap: 8px; }.td-background-family__title { margin: 0; color: var(--td-text-muted); font-size: var(--td-type-label); font-weight: 800; }.td-background-family__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--td-space-3); }
.td-background-option { --td-preview-wallpaper: var(--td-preset-dark); position: relative; display: grid; min-height: 94px; align-content: end; gap: 2px; padding: 12px; overflow: hidden; color: var(--td-text-on-strong); border: 1px solid var(--td-line-strong); border-radius: var(--td-radius); background: var(--td-preview-wallpaper); box-shadow: inset 0 -40px 42px -32px rgb(var(--td-shadow-rgb) / .88); text-align: left; }.td-background-option:hover { border-color: var(--td-primary); }.td-background-option.is-active { outline: 2px solid var(--td-primary); outline-offset: -2px; }.td-background-option__name { font-size: var(--td-type-label); font-weight: 800; }.td-background-option__id { opacity: .78; font: var(--td-type-meta)/1.2 var(--td-font-mono); }
html[data-theme="light"] .td-background-option { --td-preview-wallpaper: var(--td-preset-light); color: var(--td-text-primary); box-shadow: inset 0 -40px 42px -32px rgb(var(--td-highlight-rgb) / .88); }

/* Sidebar state and motion — the same object is used by product shells. */
.td-sidebar :is(.td-logo__copy, .td-nav-item > span:not(.td-nav-icon), .td-profile__copy) { visibility: visible; opacity: 1; transform: translateX(0); transition: opacity 90ms ease-out, transform 90ms ease-out, visibility 0s; }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] { grid-template-columns: var(--td-sidebar-rail, 64px) minmax(0, 1fr); }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar__brand > .td-logo { gap: 0; }
:is(.td-app[data-sidebar="collapsed"] .td-sidebar, .td-sidebar[data-sidebar="collapsed"]) :is(.td-logo__copy, .td-nav-item > span:not(.td-nav-icon), .td-profile__copy) { min-width: 0; visibility: hidden; opacity: 0; overflow: hidden; transform: translateX(-4px); pointer-events: none; transition-delay: 0s, 0s, 90ms; }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar__group { max-width: 0; max-height: 0; margin: 0; padding: 0; overflow: hidden; opacity: 0; transform: translateX(-4px); }:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-nav-item { width: var(--td-sidebar-target, 42px); min-height: 42px; justify-content: flex-start; padding: 0 var(--td-sidebar-icon-inset, 9px); gap: 0; border-radius: 12px; }:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar-toggle .td-icon-image { transform: rotate(180deg); }
/* Direction icons are local SVG assets. The sidebar keeps one 17px chevron
   and rotates that same glyph for the inverse state; menus/disclosures use the
   shared chevron classes below. Never substitute Unicode or a CSS arrow. */
.td-sidebar-toggle .td-icon-image { width: 17px; height: 17px; transition: transform var(--td-sidebar-motion) var(--td-sidebar-ease); }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar__footer { justify-items: stretch; gap: 7px; margin-right: 0; }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar-controls { display: grid; grid-template-columns: 1fr; width: 42px; gap: 7px; }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar-controls > .td-icon-btn,
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar-controls .td-theme-toggle,
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar-controls .td-lang-toggle {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  min-height: 42px;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
}
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar-controls .td-theme-toggle button,
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar-controls .td-lang-toggle button { position: absolute; inset: 0; display: grid; width: 100%; height: 100%; min-width: 0; place-items: center; padding: 0; border-radius: inherit; opacity: 0; transform: scale(.9); pointer-events: none; }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar-controls .td-theme-toggle,
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar-controls .td-lang-toggle { min-width: 42px; }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar-controls .td-control[data-control-variant="segments"] > button { position: absolute; inset: 0; display: grid; width: 100%; height: 100%; min-width: 0; place-items: center; padding: 0; border-radius: inherit; opacity: 0; pointer-events: none; }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar-controls .td-control[data-control-variant="segments"] > button.is-active { opacity: 1; pointer-events: auto; }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar-controls .td-theme-toggle button.is-active,
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-sidebar-controls .td-lang-toggle button.is-active { color: var(--td-text-muted); background: color-mix(in srgb, var(--td-primary) 14%, transparent); box-shadow: none; opacity: 1; transform: scale(1); pointer-events: auto; }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-profile-popover { width: 100%; }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-profile::before { display: none; }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-avatar { width: 32px; height: 32px; flex-basis: 32px; }
:is(.td-app, .td-sidebar)[data-sidebar="collapsed"] .td-profile-menu:not([popover]) { position: fixed; right: auto; bottom: 14px; left: 72px; width: min(232px, calc(100vw - 88px)); }

/* The same 9px scrollbar is used by the app shell, sidebar, tables and lists. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--td-text-muted) 52%, transparent) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--td-text-muted) 52%, transparent); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--td-primary) 58%, transparent); background-clip: padding-box; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* Surface, controls and form objects */
/* Exactly two block paints. Geometry is shared; the ultra modifier changes
   material transparency only. Semantic objects do not repaint themselves. */
.td-block { --td-block-material: var(--td-glass-block); --td-block-border: var(--td-glass-border); --td-block-shadow: var(--td-shadow-card); color: var(--td-text-primary); border: 1px solid var(--td-block-border); border-radius: var(--td-radius); background: var(--td-block-material); box-shadow: var(--td-block-shadow); backdrop-filter: blur(16px) saturate(1.26); -webkit-backdrop-filter: blur(16px) saturate(1.26); }
.td-block--ultra { --td-block-material: var(--td-ultra-surface); --td-block-border: var(--td-ultra-border); --td-block-shadow: var(--td-ultra-shadow); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); }
.td-block:focus-visible { box-shadow: var(--td-focus), var(--td-block-shadow); }
/* A sidebar action uses its enclosing block, not a second blurred plaque. */
.td-sidebar .td-block.td-profile { backdrop-filter: none; -webkit-backdrop-filter: none; }
.td-card { padding: var(--td-space-5); }
.td-card__title { margin: 0; font-size: var(--td-type-title); line-height: 1.2; }
.td-card__meta { display: block; margin: var(--td-space-2) 0 0; color: var(--td-text-muted); line-height: 1.55; }
.td-card__footer { margin-top: var(--td-space-3); padding-top: var(--td-space-3); color: var(--td-text-muted); border-top: 1px solid var(--td-line); font-size: var(--td-type-label); }
.td-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--td-space-4); margin-bottom: var(--td-space-4); }
.td-page-header h1, .td-page-header h2 { margin: 0; color: var(--td-text-primary); font-size: var(--td-type-title); line-height: 1.2; }
.td-page-header__actions, .td-control-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--td-space-2); }
.td-control-bar { margin-bottom: var(--td-space-3); padding: var(--td-space-3); }
.td-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; gap: var(--td-space-2); padding: 0 16px; color: var(--td-text-primary); border: 1px solid var(--td-line-strong); border-radius: var(--td-radius-sm); background: var(--td-glass-block); font-size: var(--td-type-label); font-weight: 760; line-height: 1; text-decoration: none; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.td-btn:hover:not(:disabled), .td-btn[data-state="hover"]:not(:disabled) { border-color: color-mix(in srgb, var(--td-primary) 62%, var(--td-line)); }
.td-btn:active:not(:disabled) { border-color: color-mix(in srgb, var(--td-primary-active) 74%, var(--td-line)); }
.td-btn.is-active, .td-btn[aria-pressed="true"] { border-color: color-mix(in srgb, var(--td-primary) 62%, var(--td-line)); background: color-mix(in srgb, var(--td-primary) 16%, transparent); }
.td-btn:disabled { color: var(--td-text-muted); border-color: var(--td-line); background: var(--td-ultra-surface); box-shadow: none; opacity: .56; cursor: not-allowed; transform: none; }
.td-btn--secondary { color: var(--td-text-primary); }
.td-btn--primary { color: var(--td-text-on-strong); border-color: var(--td-primary-active); background: linear-gradient(135deg, var(--td-primary-active), color-mix(in srgb, var(--td-primary-active) 94%, var(--td-text-on-bright))); }
.td-btn--primary:hover:not(:disabled), .td-btn--primary[data-state="hover"]:not(:disabled) { background: var(--td-primary-active); }
.td-btn--danger { color: var(--td-text-on-strong); border-color: var(--td-danger-strong); background: var(--td-danger-strong); }
.td-btn--primary .td-icon-image, .td-btn--danger .td-icon-image { opacity: 1; filter: brightness(0) invert(1); }
.td-btn--ghost { border-color: transparent; background: transparent; }
.td-btn--icon { width: 40px; padding: 0; }
.td-btn--compact { min-height: 32px; padding-inline: 10px; font-size: var(--td-type-meta); }
.td-btn--full { width: 100%; }
.td-btn.is-loading, .td-btn[aria-busy="true"] { cursor: wait; pointer-events: none; }
.td-btn.is-loading .td-icon-image, .td-btn[aria-busy="true"] .td-icon-image { animation: td-spin .8s linear infinite; }
.td-btn[aria-busy="true"] { opacity: 1; }
.td-btn--primary[aria-busy="true"] { color: var(--td-text-on-strong); border-color: var(--td-primary-active); background: var(--td-primary-active); }
.td-btn[aria-busy="true"]:not(:has(.td-icon-image)) { position: relative; color: transparent; }
.td-btn[aria-busy="true"]:not(:has(.td-icon-image))::before { position: absolute; top: calc(50% - 8px); left: calc(50% - 8px); width: 16px; height: 16px; border: 2px solid var(--td-text-primary); border-top-color: transparent; border-radius: 50%; content: ""; animation: td-spin .8s linear infinite; }
.td-btn--primary[aria-busy="true"]:not(:has(.td-icon-image))::before { border-color: var(--td-text-on-strong); border-top-color: transparent; }
:is(.td-icon-btn, .td-control)[aria-busy="true"] .td-icon-image { animation: td-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .td-btn[aria-busy="true"]::before, :is(.td-icon-btn, .td-control)[aria-busy="true"] .td-icon-image { animation: none; } }
@keyframes td-spin { to { transform: rotate(360deg); } }
.td-field { display: grid; min-width: 0; gap: var(--td-space-2); }
.td-field.td-block { padding: var(--td-space-3); }
.td-field__label, .td-field__help, .td-field__error { min-width: 0; overflow-wrap: anywhere; }
.td-field__label { color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 720; }
.td-field__help, .td-field__error { margin: 0; color: var(--td-text-muted); font-size: var(--td-type-label); }
.td-field__error { color: var(--td-danger-ink); }
.td-input, .td-select, .td-textarea { width: 100%; min-width: 0; min-height: 40px; padding: 0 12px; color: var(--td-text-primary); border: 1px solid var(--td-line); border-radius: var(--td-radius-sm); background: var(--td-glass-block); outline: none; transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease; }
.td-input, .td-select, .td-textarea { box-sizing: border-box; font: inherit; }
.td-select { color-scheme: dark; accent-color: var(--td-primary); }
html[data-theme="light"] .td-select { color-scheme: light; }
.td-select option { min-height: 36px; padding: 8px 12px; color: var(--td-text-primary); background: var(--td-list); }
.td-select option:checked { color: var(--td-text-on-strong); background: var(--td-primary-active); }
@supports (appearance: base-select) {
  .td-select:not([multiple]), .td-select:not([multiple])::picker(select) { appearance: base-select; }
  .td-select:not([multiple]) { align-items: center; gap: var(--td-space-2); padding-block: var(--td-space-2); }
  .td-select:not([multiple])::picker(select) { max-height: 280px; padding: var(--td-space-1); color: var(--td-text-primary); border: 1px solid var(--td-line-strong); border-radius: var(--td-radius-sm); background: var(--td-list); }
  .td-select:not([multiple])::picker(select) { inset: auto; margin: var(--td-space-2) 0; position-area: bottom span-right; position-try-order: normal; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline, --td-menu-below-edge, --td-menu-above-edge; max-width: calc(100vw - 32px); overflow: auto; }
  .td-select[data-placement="top"]::picker(select) { position-area: top span-right; }
  .td-select::picker-icon { width: 16px; height: 16px; color: currentColor; background: currentColor; mask: url("assets/icons/chevron-down.svg") center / contain no-repeat; content: ""; }
  .td-select:open::picker-icon { transform: rotate(180deg); }
  .td-select option { border-radius: var(--td-radius-sm); white-space: normal; overflow-wrap: anywhere; }
  .td-select option:hover { background: color-mix(in srgb, var(--td-primary) 16%, var(--td-list)); }
  .td-select option:checked { color: var(--td-text-on-strong); background: var(--td-primary-active); }
}
.td-textarea { min-height: 112px; padding-block: 10px; resize: vertical; }
.td-input[readonly], .td-textarea[readonly] { color: var(--td-text-muted); cursor: default; }.td-field.is-disabled { opacity: .56; }.td-input:disabled, .td-select:disabled, .td-textarea:disabled { color: var(--td-text-muted); cursor: not-allowed; opacity: .56; }
.td-input::placeholder, .td-textarea::placeholder { color: color-mix(in srgb, var(--td-text-muted) 86%, transparent); }
.td-input:hover, .td-select:hover, .td-textarea:hover { border-color: var(--td-line-strong); }
.td-input:focus, .td-select:focus, .td-select:open, .td-textarea:focus { border-color: var(--td-primary); box-shadow: var(--td-focus); }
.td-field.is-error .td-input, .td-field.is-error .td-select, .td-field.is-error .td-textarea { border-color: var(--td-danger); }
.td-switch { display: inline-flex; align-items: center; gap: var(--td-space-2); min-height: 32px; color: var(--td-text-primary); font-size: var(--td-type-label); }
.td-auth-card { display: grid; gap: var(--td-space-4); width: 100%; min-width: 0; margin: 0; padding: var(--td-space-5); }
.td-app[data-layout="centered"] { display: grid; grid-template-columns: minmax(0,1fr); place-items: center; align-content: center; padding: var(--td-space-4); }
.td-app[data-layout="centered"] > .td-main { width: min(100%,480px); height: auto; min-height: 0; max-height: none; margin: 0; overflow: visible; }
.td-auth-card__brand { display: grid; justify-items: center; gap: 8px; text-align: center; }.td-auth-card__brand .td-logo { justify-content: center; }.td-auth-card__brand .td-logo__mark { width: 42px; height: 42px; flex-basis: 42px; }.td-auth-card__caption { margin: 0; color: var(--td-text-muted); font-size: var(--td-type-meta); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.td-session-card { display: flex; align-items: center; justify-content: space-between; gap: var(--td-space-3); padding: 12px; }.td-session-card__identity { display: flex; align-items: center; min-width: 0; gap: 10px; }.td-session-card__name { display: block; overflow: hidden; color: var(--td-text-primary); text-overflow: ellipsis; white-space: nowrap; font-size: var(--td-type-label); font-weight: 800; }.td-session-card__meta { display: block; overflow: hidden; color: var(--td-text-muted); text-overflow: ellipsis; white-space: nowrap; font-size: var(--td-type-meta); }

/* Tabs, filters and data */
.td-tabs, .td-segment { display: inline-flex; max-width: 100%; gap: 3px; padding: 3px; overflow: auto hidden; border: 1px solid var(--td-line); border-radius: 12px; background: var(--td-glass-block); }
.td-tab, .td-segment__item { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 32px; gap: 7px; padding: 0 12px; color: var(--td-text-muted); border: 0; border-radius: 8px; background: transparent; font-size: var(--td-type-label); font-weight: 700; }
.td-tab:hover, .td-segment__item:hover { color: var(--td-text-primary); background: color-mix(in srgb, var(--td-primary) 10%, transparent); }
.td-tabs[data-tabs-owner] { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: var(--td-space-3); }
.td-tab[aria-selected="true"], .td-tab.is-active, .td-segment__item.is-active { color: var(--td-text-on-strong); background: var(--td-primary-active); }
.td-segment__item[aria-pressed="true"] { color: var(--td-text-on-strong); background: var(--td-primary-active); }
.td-tab[aria-selected="true"] .td-icon-image, .td-segment__item[aria-pressed="true"] .td-icon-image { opacity: 1; filter: brightness(0) invert(1); }
.td-tab:disabled, .td-tab[aria-disabled="true"], .td-segment__item:disabled, .td-segment__item[aria-disabled="true"] { opacity: .52; pointer-events: none; }
.td-tab__badge { display: inline-grid; min-width: 16px; height: 16px; place-items: center; padding: 0 4px; color: inherit; border-radius: 99px; background: color-mix(in srgb, currentColor 16%, transparent); font-size: 10px; font-weight: 800; line-height: 1; }
.td-table-wrap { overflow: auto; border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-glass-block); }
.td-table { width: 100%; min-width: 100%; border-collapse: collapse; font-size: var(--td-type-label); }
.td-table__viewport { overflow: auto; overscroll-behavior-inline: contain; }
.td-table__grid { width: 100%; min-width: 100%; border-collapse: collapse; }
.td-table__grid td { overflow-wrap: anywhere; }
.td-table-state[data-state="error"] { border-color: color-mix(in srgb, var(--td-danger) 44%, var(--td-line)); }
.td-table th, .td-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--td-line); }
.td-table th { color: var(--td-text-muted); font-size: var(--td-type-meta); letter-spacing: .08em; text-transform: uppercase; }
.td-table tbody tr:hover { background: color-mix(in srgb, var(--td-primary) 7%, transparent); }
.td-table--admin { min-width: 1040px; }.td-table--admin th, .td-table--admin td { padding: 12px 14px; white-space: nowrap; }.td-table--admin td:first-child, .td-table--admin th:first-child { width: 44px; }.td-table--admin input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--td-primary); }.td-table__key { display: inline-flex; max-width: 168px; overflow: hidden; padding: 4px 8px; color: var(--td-primary); text-overflow: ellipsis; white-space: nowrap; border-radius: 7px; background: color-mix(in srgb, var(--td-primary) 11%, transparent); font: 800 var(--td-type-label)/1.2 var(--td-font-mono); }.td-table__tier { display: inline-flex; min-height: 22px; align-items: center; padding: 0 8px; color: var(--td-text-muted); border-radius: 99px; background: color-mix(in srgb, var(--td-text-muted) 14%, transparent); font-size: var(--td-type-meta); font-weight: 800; letter-spacing: .08em; }
.td-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--td-space-3); margin-bottom: var(--td-space-3); }.td-table-toolbar__actions { display: flex; flex-wrap: wrap; gap: var(--td-space-2); }.td-table-toolbar .td-search { width: min(320px, 100%); }.td-table__sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; border: 0; background: transparent; font: inherit; font-weight: inherit; text-transform: inherit; }.td-table__sort .td-icon-image { width: 16px; height: 16px; }.td-table__sort[data-direction="ascending"] .td-chevron { transform: rotate(180deg); }.td-table-state { display: grid; min-height: 112px; place-items: center; align-content: center; gap: 7px; padding: var(--td-space-4); border-style: dashed; border-color: var(--td-line-strong); text-align: center; }.td-table-state__title { margin: 0; color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 800; }.td-table-state__copy { margin: 0; color: var(--td-text-muted); font-size: var(--td-type-label); }
.td-status { display: inline-flex; align-items: center; gap: 6px; color: var(--td-text-muted); font-size: var(--td-type-label); font-weight: 700; }
.td-status::before { width: 8px; height: 8px; border-radius: 50%; background: currentColor; content: ""; }
.td-status__description { color: var(--td-text-muted); font-size: var(--td-type-meta); font-weight: 600; }
.td-status--success { color: var(--td-success-ink); }.td-status--warning { color: var(--td-warning-ink); }.td-status--danger { color: var(--td-danger-ink); }.td-status--info { color: var(--td-primary-ink); }
.td-empty { display: grid; min-height: 240px; place-items: center; align-content: center; gap: var(--td-space-3); padding: 32px 24px; color: var(--td-text-muted); text-align: center; }
.td-empty__icon { display: grid; width: 52px; height: 52px; place-items: center; color: var(--td-primary); border: 1px solid color-mix(in srgb, var(--td-primary) 42%, var(--td-line)); border-radius: 16px; background: color-mix(in srgb, var(--td-primary) 10%, transparent); }
.td-empty__title { margin: 0; color: var(--td-text-primary); font-size: var(--td-type-title); }.td-empty__copy { max-width: 42ch; margin: 0; }

/* Dialog, notification and update objects */
.td-backdrop { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 24px; background: rgb(var(--td-overlay-rgb) / .30); }
html[data-theme="light"] .td-backdrop { background: rgb(var(--td-overlay-rgb) / .16); }
.td-backdrop[hidden], .td-menu[hidden], .td-profile-menu[hidden] { display: none !important; }
.td-dialog { width: min(560px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto; padding: var(--td-space-5); }
dialog.td-dialog { width: min(560px, calc(100vw - 32px)); }
dialog.td-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
dialog.td-dialog > .td-dialog__body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
dialog.td-dialog::backdrop, dialog.td-drawer::backdrop, dialog.td-command::backdrop { background: rgb(var(--td-overlay-rgb) / .30); }
/* Top-layer surfaces keep the glass edge, but never ghost the page through their body. */
dialog.td-block { background-color: var(--td-canvas); }
.td-dialog__body { margin-top: var(--td-space-3); }
.td-session-card { width: 100%; flex-wrap: wrap; align-items: flex-start; padding: var(--td-space-4); gap: var(--td-space-4); }
.td-session-card__identity { flex: 1 1 320px; }
.td-session-card__copy { display: grid; width: 100%; min-width: 0; gap: var(--td-space-1); }
.td-session-card__name, .td-session-card__meta { white-space: normal; overflow-wrap: anywhere; }
.td-session-card__facts { display: grid; gap: var(--td-space-2); margin: var(--td-space-3) 0 0; }
.td-session-card__fact { display: grid; grid-template-columns: minmax(100px, 150px) minmax(0, 1fr); gap: var(--td-space-3); font-size: var(--td-type-label); }
.td-session-card__fact dt { color: var(--td-text-muted); }
.td-session-card__fact dd { margin: 0; font-weight: 650; }
.td-session-card__fact > * { min-width: 0; overflow-wrap: anywhere; }
.td-session-card__actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: var(--td-space-3); }
.td-dialog--confirm { border-color: color-mix(in srgb, var(--td-primary) 52%, var(--td-line)); }.td-dialog--warning { border-color: color-mix(in srgb, var(--td-warning) 52%, var(--td-line)); }.td-dialog--danger { border-color: color-mix(in srgb, var(--td-danger) 52%, var(--td-line)); }
.td-dialog__symbol { display: grid; width: 40px; height: 40px; place-items: center; margin-bottom: var(--td-space-3); color: var(--td-primary); border: 1px solid color-mix(in srgb, var(--td-primary) 48%, var(--td-line)); border-radius: 12px; background: color-mix(in srgb, var(--td-primary) 12%, transparent); }.td-dialog__symbol--warning { color: var(--td-warning); border-color: color-mix(in srgb, var(--td-warning) 48%, var(--td-line)); background: color-mix(in srgb, var(--td-warning) 12%, transparent); }.td-dialog__symbol--danger { color: var(--td-danger); border-color: color-mix(in srgb, var(--td-danger) 48%, var(--td-line)); background: color-mix(in srgb, var(--td-danger) 12%, transparent); }
.td-dialog__header, .td-dialog__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--td-space-3); }.td-dialog__footer { justify-content: flex-end; margin-top: var(--td-space-5); }
.td-toast-stack { position: fixed; z-index: 70; right: 16px; bottom: 16px; display: grid; width: min(380px, calc(100vw - 32px)); gap: 8px; }
.td-toast { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; min-height: 56px; gap: 10px; padding: 10px 12px; }
:where(.td-alert, .td-toast, .td-update-banner) { --td-feedback-color: var(--td-primary); border-color: color-mix(in srgb, var(--td-feedback-color) 52%, var(--td-line)); }
:where(.td-alert--info, .td-toast--info, .td-update-banner[data-state="info"]) { --td-feedback-color: var(--td-primary); }
:where(.td-alert--success, .td-toast--success, .td-update-banner[data-state="success"]) { --td-feedback-color: var(--td-success); }
:where(.td-alert--warning, .td-toast--warning, .td-update-banner[data-state="warning"]) { --td-feedback-color: var(--td-warning); }
:where(.td-alert--danger, .td-toast--danger, .td-update-banner[data-state="error"]) { --td-feedback-color: var(--td-danger); }
.td-feedback__icon { --td-feedback-icon: url("assets/icons/info.svg"); display: block; width: 18px; height: 18px; flex: 0 0 18px; color: var(--td-feedback-color); background: currentColor; -webkit-mask: var(--td-feedback-icon) center / contain no-repeat; mask: var(--td-feedback-icon) center / contain no-repeat; }
.td-feedback__icon[data-icon="success"] { --td-feedback-icon: url("assets/icons/circle-check.svg"); }.td-feedback__icon[data-icon="warning"] { --td-feedback-icon: url("assets/icons/triangle-alert.svg"); }.td-feedback__icon[data-icon="danger"] { --td-feedback-icon: url("assets/icons/circle-alert.svg"); }
.td-feedback__content { min-width: 0; }.td-feedback__title { display: block; color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 800; line-height: 1.3; }.td-feedback__copy { margin: 2px 0 0; color: var(--td-text-muted); font-size: var(--td-type-label); line-height: 1.35; }.td-feedback__dismiss { width: 32px; height: 32px; align-self: center; }
.td-update-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--td-space-3); padding: 12px 14px; }

/* Composition helpers used by every product and the component reference ------ */
.td-section { margin-top: var(--td-space-6); }
.td-space-top { margin-top: var(--td-space-4); }
.td-action-row { display: flex; flex-wrap: wrap; gap: var(--td-space-2); }
.td-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--td-space-2); max-height: 640px; overflow: auto; padding: 2px; scrollbar-gutter: stable; }
.td-icon-tile { display: grid; min-width: 0; min-height: 76px; place-items: center; align-content: center; gap: 8px; padding: 10px; text-align: center; }
.td-icon-tile .td-icon-image { width: 24px; height: 24px; }
.td-icon-tile code { width: 100%; overflow: hidden; color: var(--td-text-muted); text-overflow: ellipsis; white-space: nowrap; font: var(--td-type-meta)/1.2 var(--td-font-mono); }
.td-icon-tile__value { max-width: 100%; overflow: hidden; color: var(--td-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.td-label-row { display: flex; justify-content: space-between; gap: var(--td-space-3); margin-bottom: 6px; }
.td-skeleton--short { width: 32%; }.td-skeleton--medium { width: 58%; }.td-skeleton--full { width: 100%; }.td-skeleton--half { width: 48%; }.td-skeleton--wide { width: 82%; }
.td-btn[data-state="focus"] { box-shadow: var(--td-focus); }
.td-secret { display: flex; min-width: 0; align-items: center; }
.td-badge--info { background: var(--td-primary-active); }
.td-spin { animation: td-spin .8s linear infinite; }
.td-chart-state-controls { max-width: 100%; overflow: auto hidden; }
.td-data-playground { display: grid; min-width: 0; gap: var(--td-space-3); }
.td-data-playground__controls { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); align-items: start; gap: var(--td-space-2); }
.td-data-playground__controls--families { grid-template-columns: repeat(5, minmax(138px, 1fr)); }
.td-data-playground__controls .td-field__help { min-height: 36px; }
.td-data-playground__workspace { display: grid; min-width: 0; grid-template-columns: minmax(280px, .82fr) minmax(360px, 1.18fr); align-items: start; gap: var(--td-space-3); }
.td-data-playground__inspector { display: grid; min-width: 0; gap: var(--td-space-2); }
.td-data-playground__inspector > .td-tabs { width: 100%; }
.td-data-playground__inspector > .td-tabs .td-tab { flex: 1 1 auto; }
.td-data-playground__preview, .td-data-playground__parameters, .td-data-playground__data, .td-data-playground__output, .td-data-playground__events { display: grid; min-width: 0; align-content: start; gap: var(--td-space-2); padding: var(--td-space-3); }
.td-data-playground__preview { position: sticky; top: calc(var(--td-space-3) + 64px); min-height: 360px; }
.td-data-playground__preview [data-runtime-preview] { display: grid; min-width: 0; min-height: 220px; place-items: center; overflow: auto; padding: var(--td-space-3); }
.td-data-playground__panel-heading, .td-data-playground__field-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--td-space-2); }
.td-data-playground__parameters { overflow: visible; }
.td-data-playground__fields { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--td-space-3); }
.td-data-playground__field { position: relative; min-width: 0; align-content: start; padding: 10px; border: 1px solid var(--td-line); border-radius: var(--td-radius-sm); background: color-mix(in srgb, var(--td-glass-block) 54%, transparent); }
.td-data-playground__field.is-error { border-color: var(--td-danger); }
.td-data-playground__field--structured { grid-column: 1 / -1; gap: var(--td-space-2); padding: var(--td-space-3); }
.td-data-playground__field-key { color: var(--td-text-muted); font: 600 var(--td-type-meta)/1.3 var(--td-font-mono); }
.td-data-playground__localized { display: grid; min-width: 0; gap: 6px; }
.td-data-playground__locale-field { display: grid; min-width: 0; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 6px; }
.td-data-playground__locale-field .td-badge { min-width: 30px; justify-content: center; }
.td-data-playground__switch { min-height: 40px; }
.td-data-playground__json-field { min-height: 112px; max-height: 220px; font-family: var(--td-font-mono); font-size: var(--td-type-label); line-height: 1.45; tab-size: 2; }
.td-data-playground__icon-preview { position: absolute; right: 20px; bottom: 20px; width: 20px; height: 20px; pointer-events: none; }
.td-data-builder__collection-meta, .td-data-builder__item-toolbar, .td-data-builder__nested-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--td-space-2); }
.td-data-builder__collection { display: grid; min-width: 0; gap: var(--td-space-2); }
.td-data-builder__empty { margin: 0; padding: var(--td-space-3); text-align: center; }
.td-data-builder__item { display: grid; min-width: 0; gap: var(--td-space-2); padding: var(--td-space-2); border: 1px solid var(--td-line); border-radius: var(--td-radius-sm); }
.td-data-builder__item-toolbar { min-height: 34px; padding-bottom: var(--td-space-1); border-bottom: 1px solid var(--td-line); }
.td-data-builder__item-toolbar > strong { color: var(--td-text-primary); font-size: var(--td-type-label); }
.td-data-builder__item-actions { flex-wrap: nowrap; gap: var(--td-space-1); }
.td-data-builder__item-actions .td-icon-btn { width: 32px; min-height: 32px; flex: 0 0 32px; }
.td-data-builder__object { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--td-space-2); }
.td-data-builder__nested-field { position: relative; min-width: 0; align-content: start; gap: 6px; }
.td-data-builder__nested-heading { min-height: 20px; }
.td-data-builder__nested-field .td-data-playground__locale-field { grid-template-columns: 30px minmax(0, 1fr); }
.td-data-builder__nested-field .td-badge { min-width: 28px; }
.td-data-builder__json { min-height: 92px; max-height: 180px; font-family: var(--td-font-mono); font-size: var(--td-type-meta); line-height: 1.4; }
.td-data-builder__icon-preview { position: absolute; right: 12px; bottom: 10px; width: 18px; height: 18px; pointer-events: none; }
.td-data-builder__field-adder { display: grid; min-width: 0; grid-column: 1 / -1; grid-template-columns: minmax(140px, 1fr) minmax(110px, .55fr) auto; align-items: center; gap: var(--td-space-2); padding-top: var(--td-space-2); border-top: 1px solid var(--td-line); }
.td-data-playground__editor { width: 100%; min-height: 260px; resize: vertical; font-family: var(--td-font-mono); font-size: var(--td-type-label); line-height: 1.55; tab-size: 2; }
.td-data-playground__output, .td-data-playground__events { max-height: 280px; overflow: auto; scrollbar-gutter: stable; }
.td-data-playground__output pre, .td-data-playground__events pre { min-width: max-content; margin: 0; color: var(--td-text-muted); font: var(--td-type-label)/1.55 var(--td-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.td-data-playground__error { min-height: 20px; margin: 0; color: var(--td-danger); font-size: var(--td-type-meta); font-weight: 700; }
.td-data-playground__a11y-summary { display: grid; min-height: 52px; align-content: center; gap: 2px; padding: var(--td-space-3); color: var(--td-text-primary); border: 1px solid var(--td-line); border-radius: var(--td-radius-sm); background: color-mix(in srgb, var(--td-glass-block) 54%, transparent); }.td-data-playground__a11y-summary strong { overflow-wrap: anywhere; font-size: var(--td-type-label); }
.td-data-playground__preview [data-runtime-preview] > .td-app { width: 100%; min-height: 260px; max-height: 420px; overflow: auto; border-radius: var(--td-radius-sm); }.td-component-state[data-state="loading"] { cursor: progress; }.td-component-state[data-state="error"] { border-color: color-mix(in srgb, var(--td-danger) 58%, var(--td-line)); }
@media (max-width: 1180px) { .td-data-playground__controls, .td-data-playground__controls--families { grid-template-columns: repeat(2, minmax(0, 1fr)); }.td-data-playground__controls .td-field__help { min-height: 0; } }
@media (max-width: 980px) { .td-data-playground__workspace { grid-template-columns: minmax(0, 1fr); }.td-data-playground__preview { position: static; min-height: 260px; }.td-data-playground__fields { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) { .td-data-builder__object, .td-data-builder__field-adder { grid-template-columns: minmax(0, 1fr); }.td-data-builder__field-adder .td-btn { width: 100%; }.td-data-builder__item-toolbar { align-items: flex-start; } }
@media (max-width: 560px) { .td-data-playground__controls { grid-template-columns: minmax(0, 1fr); }.td-data-playground__preview, .td-data-playground__editor { min-height: 200px; }.td-data-playground__preview [data-runtime-preview] { min-height: 160px; padding: var(--td-space-2); } }

/* Button groups, split actions and toolbars ---------------------------------- */
.td-button-group, .td-split-button { display: inline-flex; max-width: 100%; align-items: stretch; isolation: isolate; }
.td-button-group > :where(.td-btn, .td-icon-btn, .td-control), .td-split-button > :where(.td-btn, .td-icon-btn, .td-control) { position: relative; min-width: 0; border-radius: 0; }
.td-button-group > :where(.td-btn, .td-icon-btn, .td-control):first-child, .td-split-button > :where(.td-btn, .td-icon-btn, .td-control):first-child { border-start-start-radius: var(--td-radius-sm); border-end-start-radius: var(--td-radius-sm); }
.td-button-group > :where(.td-btn, .td-icon-btn, .td-control):last-child, .td-split-button > :where(.td-btn, .td-icon-btn, .td-control):last-child { border-start-end-radius: var(--td-radius-sm); border-end-end-radius: var(--td-radius-sm); }
.td-button-group > :where(.td-btn, .td-icon-btn, .td-control) + :where(.td-btn, .td-icon-btn, .td-control), .td-split-button > :where(.td-btn, .td-icon-btn, .td-control) + :where(.td-btn, .td-icon-btn, .td-control) { margin-inline-start: -1px; }
.td-button-group > :where(.td-btn, .td-icon-btn, .td-control):hover, .td-button-group > :where(.td-btn, .td-icon-btn, .td-control):focus-visible, .td-button-group > :where(.td-btn, .td-icon-btn, .td-control).is-active, .td-button-group > :where(.td-btn, .td-icon-btn, .td-control)[aria-pressed="true"], .td-split-button > :where(.td-btn, .td-icon-btn, .td-control):hover, .td-split-button > :where(.td-btn, .td-icon-btn, .td-control):focus-visible, .td-split-button > :where(.td-btn, .td-icon-btn, .td-control).is-active, .td-split-button > :where(.td-btn, .td-icon-btn, .td-control)[aria-pressed="true"] { z-index: 1; }
.td-button-group--vertical { flex-direction: column; }
.td-button-group--vertical > :where(.td-btn, .td-icon-btn, .td-control) { width: 100%; border-radius: 0; }
.td-button-group--vertical > :where(.td-btn, .td-icon-btn, .td-control):first-child { border-start-start-radius: var(--td-radius-sm); border-start-end-radius: var(--td-radius-sm); }
.td-button-group--vertical > :where(.td-btn, .td-icon-btn, .td-control):last-child { border-end-start-radius: var(--td-radius-sm); border-end-end-radius: var(--td-radius-sm); }
.td-button-group--vertical > :where(.td-btn, .td-icon-btn, .td-control) + :where(.td-btn, .td-icon-btn, .td-control) { margin-block-start: -1px; margin-inline-start: 0; }
.td-split-button__main { flex: 1 1 auto; justify-content: flex-start; }
.td-split-button > .td-split-button__toggle { width: 40px; flex: 0 0 40px; padding: 0; border-start-end-radius: var(--td-radius-sm); border-end-end-radius: var(--td-radius-sm); border-inline-start-color: color-mix(in srgb, var(--td-text-on-strong) 36%, transparent); }
.td-split-button__toggle[aria-expanded="true"] .td-icon-image { transform: rotate(180deg); }
.td-split-button__toggle .td-icon-image { transition: transform 140ms ease-out; }
.td-toolbar { display: flex; width: 100%; max-width: 100%; min-width: 0; min-height: 48px; flex-wrap: wrap; align-items: center; gap: var(--td-space-2); padding: var(--td-space-2); }
.td-toolbar > :is(.td-btn, .td-control, .td-toolbar__group) { flex: 1 1 auto; min-width: 0; }
.td-toolbar > .td-btn { flex: 1 1 auto; }
.td-toolbar--compact { min-height: 40px; gap: var(--td-space-1); }
.td-toolbar__group { display: flex; min-width: 0; align-items: center; gap: var(--td-space-1); }
.td-toolbar__label { color: var(--td-text-muted); font-size: var(--td-type-meta); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.td-toolbar__separator { width: 1px; height: 24px; flex: 0 0 1px; margin-inline: var(--td-space-1); background: var(--td-line); }
.td-toolbar__spacer { min-width: var(--td-space-2); flex: 1 1 auto; }
.td-toolbar[data-state="loading"] { cursor: wait; }

/* Slider, range and compact date/number/time controls ------------------------ */
.td-slider { --td-slider-value: 0%; display: grid; min-width: 0; gap: var(--td-space-2); }
.td-slider.td-block { padding: var(--td-space-3); }
.td-slider__track { position: relative; min-width: 0; height: 28px; }
.td-slider__track .td-range { position: relative; z-index: 1; height: 28px; }
.td-slider__fill { position: absolute; inset: 0 9px; width: calc(100% - 18px); height: 28px; pointer-events: none; }
.td-slider__fill::-webkit-meter-bar { height: 4px; border: 0; border-radius: 99px; background: var(--td-line-strong); }
.td-slider__fill::-webkit-meter-optimum-value { border-radius: inherit; background: var(--td-primary-active); }
.td-slider__track .td-range::-webkit-slider-runnable-track { background: transparent; }
.td-slider__value { flex: 0 0 auto; min-width: 4ch; padding: var(--td-space-1) var(--td-space-2); border-radius: var(--td-radius-sm); background: var(--td-list); text-align: center; font-variant-numeric: tabular-nums; }
.td-slider__header, .td-slider__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--td-space-3); }
.td-slider__label { color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 720; }
.td-slider__value, .td-slider__meta { color: var(--td-text-muted); font-size: var(--td-type-meta); }
.td-slider__header .td-slider__value { color: var(--td-text-primary); font-weight: 650; }
.td-range { width: 100%; height: 24px; margin: 0; padding: 0; appearance: none; cursor: pointer; accent-color: var(--td-primary); background: transparent; }
.td-range::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(to right, var(--td-primary-active) 0 var(--td-slider-value), var(--td-line-strong) var(--td-slider-value) 100%); }
.td-range::-moz-range-track { height: 4px; border-radius: 99px; background: var(--td-line-strong); }
.td-range::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--td-primary-active); }
.td-range::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; appearance: none; border: 3px solid var(--td-primary-active); border-radius: 50%; background: var(--td-text-on-strong); }
.td-range::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid var(--td-primary-active); border-radius: 50%; background: var(--td-text-on-strong); }
.td-range:focus-visible { box-shadow: none; }
.td-range:focus-visible::-webkit-slider-thumb { outline: 3px solid color-mix(in srgb, var(--td-primary) 28%, transparent); outline-offset: 2px; }
.td-range:focus-visible::-moz-range-thumb { outline: 3px solid color-mix(in srgb, var(--td-primary) 28%, transparent); outline-offset: 2px; }
.td-range:disabled { cursor: not-allowed; opacity: .52; }
.td-slider[data-state="error"] .td-range { accent-color: var(--td-danger); }
.td-slider[data-state="error"] .td-range::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--td-danger) 0 var(--td-slider-value), var(--td-line-strong) var(--td-slider-value) 100%); }
.td-slider[data-state="error"] .td-range::-moz-range-progress { background: var(--td-danger); }
.td-slider[data-state="error"] .td-range::-webkit-slider-thumb, .td-slider[data-state="error"] .td-range::-moz-range-thumb { border-color: var(--td-danger); }
.td-slider[data-state="error"] .td-slider__value { color: var(--td-danger); }
.td-number, .td-date, .td-time { display: flex; min-width: 0; align-items: stretch; }
.td-number { width: min(180px, 100%); }
.td-date { width: min(220px, 100%); }
.td-time { width: min(160px, 100%); }
.td-number > .td-input, .td-date > .td-input, .td-time > .td-input { min-width: 0; }
.td-number__input { appearance: textfield; text-align: end; font-variant-numeric: tabular-nums; }
.td-number__input::-webkit-inner-spin-button, .td-number__input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.td-date__input, .td-time__input { font-variant-numeric: tabular-nums; color-scheme: inherit; }
.td-number__stepper { display: grid; width: 32px; flex: 0 0 32px; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.td-number__step { display: grid; min-width: 0; min-height: 0; place-items: center; padding: 0; border-radius: 0; }
.td-number__step .td-icon-image { width: 14px; height: 14px; }
.td-datetime-row { display: flex; min-width: 0; flex-wrap: wrap; align-items: end; gap: var(--td-space-3); }

/* Combobox and listbox -------------------------------------------------------- */
.td-combobox { position: relative; display: grid; min-width: 0; border-radius: var(--td-radius-sm); anchor-name: --td-combobox; anchor-scope: --td-combobox; }
.td-combobox:focus-within { border-color: var(--td-primary); box-shadow: var(--td-focus), var(--td-block-shadow); }
.td-combobox__control { display: flex; min-width: 0; align-items: center; gap: var(--td-space-1); padding: var(--td-space-1); border-radius: inherit; }
.td-combobox__control > .td-combobox__input { width: 0; min-width: 0; min-height: 32px; flex: 1 1 0; padding-inline: var(--td-space-2); border: 0; border-radius: inherit; background: transparent; box-shadow: none; }
.td-combobox__search { flex: 0 0 auto; margin-inline-start: var(--td-space-2); opacity: .64; }
.td-combobox__control > .td-combobox__toggle { width: 32px; height: 32px; flex: 0 0 32px; }
.td-combobox__toggle .td-icon-image { width: 16px; height: 16px; transition: transform 140ms ease-out; }
.td-combobox__clear { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; padding: 0; color: var(--td-text-muted); border: 0; border-radius: 8px; background: transparent; }
.td-combobox__clear > .td-icon-image { width: 16px; height: 16px; }
.td-combobox__clear:hover { background: color-mix(in srgb, var(--td-primary) 12%, transparent); }
.td-combobox__control > :is(.td-combobox__clear, .td-combobox__toggle):focus-visible { box-shadow: none; }
.td-combobox[aria-disabled="true"] :disabled { opacity: 1; }
.td-combobox__control:has([aria-expanded="true"]) > .td-icon-btn .td-icon-image { transform: rotate(180deg); }
.td-combobox__select { width: 100%; min-height: 40px; justify-content: space-between; gap: var(--td-space-2); padding: 0 12px; color: var(--td-text-primary); text-align: left; cursor: pointer; }
.td-combobox__select:hover { border-color: var(--td-line-strong); }
.td-combobox__select:focus-visible, .td-combobox__select[aria-expanded="true"] { border-color: var(--td-primary); box-shadow: var(--td-focus); }
.td-combobox__value { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-combobox__select > .td-icon-image { flex: 0 0 auto; transition: transform 120ms ease; }
.td-combobox__select[aria-expanded="true"] > .td-icon-image { transform: rotate(180deg); }
.td-combobox__popup { position: absolute; z-index: 44; top: calc(100% + var(--td-space-2)); right: 0; left: 0; max-height: min(320px, 50vh); overflow: auto; padding: var(--td-space-1); overscroll-behavior: contain; }
.td-combobox__popup[hidden] { display: none; }
.td-combobox__popup .td-listbox__option { width: 100%; min-height: 36px; cursor: pointer; }
.td-listbox { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.td-listbox.td-block { padding: var(--td-space-1); }
.td-listbox.td-block > .td-listbox { min-height: 0; max-height: min(320px, 60dvh); grid-auto-rows: max-content; align-content: start; gap: 2px; overflow: auto; overscroll-behavior: contain; scroll-padding-block: var(--td-space-1); }
.td-listbox.td-block > .td-listbox > .td-listbox__option { display: flex; min-width: 0; line-height: 1.4; }
.td-listbox__option-copy { display: grid; min-width: 0; flex: 1 1 auto; gap: 2px; overflow-wrap: anywhere; }
.td-listbox__option > .td-icon-image { flex: 0 0 auto; }
.td-listbox__option > .td-listbox__check { visibility: hidden; margin-inline-start: auto; }
.td-listbox__option[aria-selected="true"] > .td-listbox__check { visibility: visible; }
.td-listbox.td-block .td-listbox__option.is-active { box-shadow: inset 0 0 0 1px var(--td-primary); }
.td-listbox.td-block .td-listbox__option[aria-selected="true"] { color: var(--td-text-primary); }
.td-listbox__group { padding: 8px 10px 5px; color: var(--td-text-muted); font-size: var(--td-type-meta); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.td-listbox__option { display: grid; width: 100%; min-height: 38px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--td-space-2); padding: 7px 10px; color: var(--td-text-primary); border: 0; background: transparent; border-radius: 8px; text-align: start; cursor: pointer; font-size: var(--td-type-label); }
.td-listbox__option:has(> .td-icon-image) { grid-template-columns: auto minmax(0, 1fr) auto; }
.td-listbox__option:hover, .td-listbox__option.is-active, .td-listbox__option[aria-selected="true"] { background: color-mix(in srgb, var(--td-primary) 12%, transparent); }
.td-listbox__option[aria-selected="true"] { color: color-mix(in srgb, var(--td-primary) 80%, var(--td-text-primary)); font-weight: 760; }
.td-listbox__option[aria-disabled="true"] { color: var(--td-text-muted); cursor: not-allowed; opacity: .52; pointer-events: none; }
.td-listbox__option-main { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.td-listbox__option-meta { color: var(--td-text-muted); font-size: var(--td-type-meta); font-weight: 500; }
.td-listbox__state { display: grid; min-height: 96px; place-items: center; padding: var(--td-space-3); color: var(--td-text-muted); text-align: center; font-size: var(--td-type-label); }
.td-combobox__popup > .td-listbox { gap: 2px; }
.td-combobox__popup .td-combobox__option { display: flex; padding: 9px 10px; line-height: 1.4; }
.td-combobox__option > .td-icon-image { flex: 0 0 auto; }
.td-combobox__option-copy { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; overflow-wrap: anywhere; }
.td-combobox__option-description { color: var(--td-text-muted); font-size: var(--td-type-meta); font-weight: 500; }
.td-combobox__option.is-active { box-shadow: inset 0 0 0 1px var(--td-primary); }
.td-combobox__option > .td-combobox__check { visibility: hidden; margin-inline-start: auto; }
.td-combobox__option[aria-selected="true"] > .td-combobox__check { visibility: visible; }
.td-combobox__empty { display: flex; min-height: 80px; align-items: center; gap: var(--td-space-3); text-align: start; }
.td-combobox__empty > .td-icon-image { flex: 0 0 auto; opacity: .64; }
.td-combobox__empty-copy { display: grid; min-width: 0; gap: var(--td-space-1); overflow-wrap: anywhere; }
.td-combobox__empty-title { color: var(--td-text-primary); font-weight: 650; }
.td-combobox__empty-description { color: var(--td-text-muted); }
.td-combobox__empty-description:empty { display: none; }
.td-listbox[data-state="loading"] { cursor: wait; }
.td-listbox[data-state="error"] .td-listbox__state { color: var(--td-danger); background: color-mix(in srgb, var(--td-danger) 10%, transparent); }

/* File input and dropzone ----------------------------------------------------- */
.td-file-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.td-dropzone { display: grid; min-height: 180px; place-items: center; align-content: center; gap: var(--td-space-2); padding: var(--td-space-5); border-style: dashed; text-align: center; cursor: pointer; }
.td-dropzone__icon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--td-primary); }
.td-dropzone__title { margin: 0; color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 800; }
.td-dropzone__copy { max-width: 46ch; margin: 0; color: var(--td-text-muted); font-size: var(--td-type-label); }
.td-dropzone:hover, .td-dropzone:focus-within, .td-dropzone.is-dragover { border-color: var(--td-primary); background: color-mix(in srgb, var(--td-primary) 10%, transparent); }
.td-dropzone[data-state="loading"] { cursor: wait; }
.td-dropzone[data-state="error"] { border-color: var(--td-danger); background: color-mix(in srgb, var(--td-danger) 10%, transparent); }
.td-dropzone[aria-disabled="true"] { cursor: not-allowed; opacity: .52; pointer-events: none; }
.td-file-list { display: grid; gap: var(--td-space-2); margin: 0; padding: 0; list-style: none; }
.td-file { display: grid; min-width: 0; min-height: 48px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--td-space-2); padding: 8px 10px; border-block-end: 1px solid var(--td-line); }
.td-file:last-child { border-block-end: 0; }
.td-file-picker.td-file, .td-file-picker.td-dropzone { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: var(--td-space-3); padding: var(--td-space-4); }
.td-file-picker > .td-btn { justify-self: start; }
.td-file-picker .td-file-list { width: 100%; }
.td-file-picker .td-file__name { white-space: normal; overflow-wrap: anywhere; }
.td-file-picker .td-file-list:empty, .td-file-picker > [role="status"]:empty { display: none; }
.td-file-picker:focus-within { border-color: var(--td-primary); }
.td-file__main { min-width: 0; }
.td-file__name, .td-file__meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-file__name { color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 720; }
.td-file__meta { color: var(--td-text-muted); font-size: var(--td-type-meta); }
.td-file[data-state="error"] { color: var(--td-danger); background: color-mix(in srgb, var(--td-danger) 8%, transparent); }

/* Tree and timeline ----------------------------------------------------------- */
.td-tree { display: grid; min-width: 0; margin: 0; padding: var(--td-space-1); list-style: none; }
.td-tree__group { display: grid; margin: 0; padding: 0 0 0 var(--td-space-4); list-style: none; }
.td-tree__group[hidden] { display: none; }
.td-tree__item { min-width: 0; }
.td-tree__row { display: grid; min-width: 0; min-height: 36px; grid-template-columns: 24px auto minmax(0, 1fr) auto; align-items: center; gap: var(--td-space-1); padding: 4px 8px 4px 4px; color: var(--td-text-primary); border-radius: 8px; cursor: default; }
.td-tree__row:hover, .td-tree__row.is-active, .td-tree__row[aria-selected="true"], .td-tree__row[data-selected="true"] { background: color-mix(in srgb, var(--td-primary) 11%, transparent); }
.td-tree__row[aria-selected="true"], .td-tree__row[data-selected="true"] { color: color-mix(in srgb, var(--td-primary) 80%, var(--td-text-primary)); }
.td-tree__row[aria-disabled="true"] { color: var(--td-text-muted); opacity: .52; pointer-events: none; }
.td-tree__toggle { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; background: transparent; }
.td-tree__toggle .td-chevron { width: 14px; height: 14px; transform: rotate(-90deg); }
.td-tree__row[aria-expanded="true"] .td-tree__toggle .td-chevron, .td-tree__row[data-expanded="true"] .td-tree__toggle .td-chevron { transform: rotate(0); }
.td-tree__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--td-type-label); }
.td-tree__meta { color: var(--td-text-muted); font-size: var(--td-type-meta); }
.td-tree[data-state="loading"] { cursor: wait; }
.td-tree[data-state="empty"] { min-height: 120px; place-items: center; align-content: center; color: var(--td-text-muted); }
.td-timeline { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.td-timeline.td-block, .td-steps.td-block { padding: var(--td-space-4); }
.td-timeline__item:last-child { padding-block-end: 0; }
.td-step__title { color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 700; }
.td-step__content > .td-step__title { color: var(--td-text-primary); font-size: var(--td-type-label); }
.td-timeline__item { position: relative; display: grid; min-width: 0; grid-template-columns: 24px minmax(0, 1fr); gap: var(--td-space-3); padding-block-end: var(--td-space-4); }
.td-timeline__item:not(:last-child)::before { position: absolute; top: 20px; bottom: 0; left: 11px; width: 2px; background: var(--td-line); content: ""; }
.td-timeline__marker { position: relative; z-index: 1; display: grid; width: 24px; height: 24px; place-items: center; color: var(--td-text-muted); border: 2px solid currentColor; border-radius: 50%; font-size: var(--td-type-meta); font-weight: 800; }
.td-timeline__item[data-state="current"] .td-timeline__marker { color: var(--td-primary); background: color-mix(in srgb, var(--td-primary) 14%, var(--td-list)); }
.td-timeline__item[data-state="complete"] .td-timeline__marker { color: var(--td-success); background: color-mix(in srgb, var(--td-success) 14%, var(--td-list)); }
.td-timeline__item[data-state="error"] .td-timeline__marker { color: var(--td-danger); background: color-mix(in srgb, var(--td-danger) 14%, var(--td-list)); }
.td-timeline__content { min-width: 0; padding-block-start: 2px; }
button.td-timeline__content, button.td-step__content { display: grid; width: 100%; gap: var(--td-space-1); padding: 0; color: inherit; border: 0; background: transparent; text-align: start; font: inherit; }
button.td-list__main { padding: 0; color: inherit; border: 0; background: transparent; text-align: start; font: inherit; }
.td-breadcrumbs button { padding: 0; color: inherit; border: 0; background: transparent; font: inherit; }
.td-breadcrumbs button:hover { color: var(--td-text-primary); }
.td-timeline__title { margin: 0; color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 800; }
.td-timeline__meta, .td-timeline__copy { margin: 3px 0 0; color: var(--td-text-muted); font-size: var(--td-type-label); }
.td-timeline__meta { font-size: var(--td-type-meta); }

/* Calendar and accordion ------------------------------------------------------ */
.td-calendar { display: grid; width: 100%; min-width: 0; gap: var(--td-space-3); padding: var(--td-space-3); }
.td-calendar__header { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: var(--td-space-2); }
.td-calendar__title { overflow: hidden; margin: 0; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: var(--td-type-label); font-weight: 800; }
.td-calendar__weekdays, .td-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(32px, 1fr)); gap: var(--td-space-1); }
.td-calendar__weekday { display: grid; min-height: 24px; place-items: center; color: var(--td-text-muted); font-size: var(--td-type-meta); font-weight: 800; }
.td-calendar__day { position: relative; display: grid; min-width: 32px; min-height: 36px; place-items: center; padding: 0; color: var(--td-text-primary); border: 0; border-radius: 9px; background: transparent; font-size: var(--td-type-label); font-variant-numeric: tabular-nums; }
.td-calendar__day:hover, .td-calendar__day:focus-visible { background: color-mix(in srgb, var(--td-primary) 11%, transparent); }
.td-calendar__day.is-today { color: var(--td-primary); outline: 1px solid color-mix(in srgb, var(--td-primary) 68%, transparent); outline-offset: -2px; font-weight: 800; }
.td-calendar__day.is-selected, .td-calendar__day[aria-selected="true"] { color: var(--td-text-on-strong); background: var(--td-primary-active); }
.td-calendar__day.is-in-range { background: color-mix(in srgb, var(--td-primary) 17%, transparent); border-radius: 4px; }
.td-calendar__day.is-outside { color: var(--td-text-muted); opacity: .58; }
.td-calendar__day:disabled, .td-calendar__day[aria-disabled="true"] { color: var(--td-text-muted); cursor: not-allowed; opacity: .38; pointer-events: none; }
.td-calendar[data-state="loading"] { cursor: wait; }
.td-calendar[data-state="empty"] .td-calendar__grid { min-height: 180px; place-items: center; }
.td-calendar[data-state="error"] { color: var(--td-danger); }
.td-accordion { display: grid; min-width: 0; overflow: hidden; }
.td-accordion__item + .td-accordion__item { border-block-start: 1px solid var(--td-line); }
.td-accordion__trigger { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: var(--td-space-3); padding: 0 var(--td-space-4); color: var(--td-text-primary); border: 0; background: transparent; text-align: start; font-size: var(--td-type-label); font-weight: 760; }
.td-accordion__trigger:hover { background: color-mix(in srgb, var(--td-primary) 9%, transparent); }
.td-accordion__trigger .td-chevron { flex: 0 0 auto; }
.td-accordion__trigger[aria-expanded="true"] .td-chevron { transform: rotate(180deg); }
.td-accordion__panel { padding: 0 var(--td-space-4) var(--td-space-4); color: var(--td-text-muted); font-size: var(--td-type-label); }
.td-accordion__panel[hidden] { display: none; }
.td-accordion__item[aria-disabled="true"] { opacity: .52; pointer-events: none; }

/* Drawer, sheet and command palette ------------------------------------------ */
.td-drawer-layer, .td-command-layer { position: fixed; z-index: 90; inset: 0; display: grid; background: rgb(var(--td-overlay-rgb) / .30); }
.td-drawer-layer[hidden], .td-command-layer[hidden] { display: none; }
.td-drawer-layer { justify-items: end; }
.td-drawer { display: grid; width: min(480px, calc(100vw - 2 * var(--td-space-3))); min-width: 0; max-width: 100%; height: calc(100dvh - 2 * var(--td-space-3)); min-height: 0; max-height: calc(100dvh - 2 * var(--td-space-3)); margin: var(--td-space-3); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: var(--td-radius); }
.td-drawer--start { justify-self: start; }
/* Both render paths float with the sidebar's insets and rounded perimeter. */
dialog.td-drawer { position: fixed; inset: var(--td-space-3) var(--td-space-3) var(--td-space-3) auto; margin: 0; padding: 0; }
dialog.td-drawer--start { inset: var(--td-space-3) auto var(--td-space-3) var(--td-space-3); }
.td-drawer__header, .td-drawer__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--td-space-3); padding: var(--td-space-4); }
.td-drawer__header { border-block-end: 1px solid var(--td-line); }
.td-drawer__footer { justify-content: flex-end; border-block-start: 1px solid var(--td-line); }
.td-drawer__title { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: var(--td-type-title); line-height: 1.3; }
.td-drawer__body { min-width: 0; min-height: 0; overflow: auto; overflow-wrap: anywhere; padding: var(--td-space-4); scrollbar-gutter: stable; }
:is(.td-drawer__header, .td-dialog__header) > .td-icon-btn { flex: 0 0 40px; align-self: flex-start; }
:is(.td-drawer__footer, .td-dialog__footer) { flex-wrap: wrap; }
:is(.td-drawer__footer, .td-dialog__footer) > .td-btn { min-width: 0; max-width: 100%; flex: 0 1 auto; }
.td-drawer__footer > .td-btn { flex: 1 1 auto; }
.td-dialog__header > strong, .td-dialog__body { min-width: 0; overflow-wrap: anywhere; }
.td-sheet { align-self: end; width: 100%; height: auto; min-height: 0; max-height: min(88vh, 760px); margin: 0; border-radius: var(--td-radius-lg) var(--td-radius-lg) 0 0; }
.td-drawer-layer[data-state="closed"] { visibility: hidden; pointer-events: none; }
.td-drawer-layer[data-state="closed"] .td-drawer { transform: translateX(100%); }
.td-drawer-layer[data-state="closed"] .td-drawer--start { transform: translateX(-100%); }
.td-drawer-layer[data-state="closed"] .td-sheet { transform: translateY(100%); }
.td-drawer, .td-sheet { transition: transform 180ms cubic-bezier(.22,1,.36,1); }
.td-command-layer { place-items: start center; padding: min(12vh, 96px) var(--td-space-4) var(--td-space-4); }
.td-command-palette { display: grid; width: min(680px, 100%); max-height: min(680px, calc(100vh - 32px)); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.td-command { width: min(680px, calc(100vw - 32px)); margin: min(12vh, 96px) auto; padding: var(--td-space-3); gap: var(--td-space-2); grid-template-rows: none; overflow: auto; }
.td-command-palette__search { display: flex; min-width: 0; align-items: center; padding: var(--td-space-2); border-block-end: 1px solid var(--td-line); }
.td-command-palette__search .td-input { min-width: 0; border: 0; background: transparent; box-shadow: none; }
.td-command-palette__results { min-height: 0; overflow: auto; padding: var(--td-space-1); scrollbar-gutter: stable; }
.td-command-palette__group { padding: 8px 10px 5px; color: var(--td-text-muted); font-size: var(--td-type-meta); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.td-command-palette__item { display: grid; width: 100%; min-height: 42px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--td-space-2); padding: 6px 10px; color: var(--td-text-primary); border: 0; background: transparent; border-radius: 9px; text-align: start; }
.td-command-palette__item:hover, .td-command-palette__item.is-active, .td-command-palette__item[aria-selected="true"] { background: color-mix(in srgb, var(--td-primary) 12%, transparent); }
.td-command-palette__item[aria-disabled="true"] { color: var(--td-text-muted); opacity: .52; pointer-events: none; }
.td-command-palette__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--td-type-label); }
.td-command-palette__shortcut { color: var(--td-text-muted); font: 700 var(--td-type-meta)/1 var(--td-font-mono); }
.td-command-palette__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--td-space-3); padding: 8px 12px; color: var(--td-text-muted); border-block-start: 1px solid var(--td-line); font-size: var(--td-type-meta); }
.td-command-palette[data-state="loading"] { cursor: wait; }
.td-command-palette[data-state="empty"] .td-command-palette__results { display: grid; min-height: 140px; place-items: center; color: var(--td-text-muted); }
.td-command-palette[data-state="error"] .td-command-palette__results { color: var(--td-danger); background: color-mix(in srgb, var(--td-danger) 9%, transparent); }

/* General chart canvas, legend, tooltip and states --------------------------- */
.td-chart-card__body { position: relative; min-width: 0; min-height: 220px; }
.td-chart-canvas { position: relative; display: block; width: 100%; min-height: 220px; overflow: hidden; aspect-ratio: 16 / 7; }
.td-chart-canvas > :where(canvas, svg) { display: block; width: 100%; height: 100%; }
.td-chart-legend { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--td-space-3); color: var(--td-text-muted); font-size: var(--td-type-meta); }
.td-chart-legend__item { display: inline-flex; min-width: 0; align-items: center; gap: 6px; }
.td-chart-legend__swatch { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--td-primary); }
.td-chart-legend__swatch--success { background: var(--td-success); }
.td-chart-legend__swatch--warning { background: var(--td-warning); }
.td-chart-legend__swatch--danger { background: var(--td-danger); }
.td-chart-tooltip { position: absolute; z-index: 4; top: var(--td-chart-tooltip-y, 0); left: var(--td-chart-tooltip-x, 0); display: grid; min-width: 132px; gap: 4px; padding: 8px 10px; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); font-size: var(--td-type-meta); }
.td-chart-tooltip[hidden] { display: none; }
.td-chart-tooltip__label { color: var(--td-text-muted); }
.td-chart-tooltip__value { color: var(--td-text-primary); font: 800 var(--td-type-label)/1.2 var(--td-font-mono); }
.td-chart-state { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--td-space-2); padding: var(--td-space-4); color: var(--td-text-muted); text-align: center; }
.td-chart-state[hidden] { display: none; }
.td-chart-state__title { margin: 0; color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 800; }
.td-chart-state__copy { max-width: 42ch; margin: 0; font-size: var(--td-type-label); }
.td-chart-card[data-state="loading"] { cursor: wait; }
.td-chart-card[data-state="loading"] .td-chart-canvas { opacity: .42; }
.td-chart-card[data-state="empty"] .td-chart-canvas { opacity: .24; }
.td-chart-card[data-state="error"] .td-chart-state { color: var(--td-danger); background: color-mix(in srgb, var(--td-danger) 9%, transparent); }

/* Icon filters and incremental grid ------------------------------------------ */
.td-icon-filter-bar { display: grid; min-width: 0; grid-template-columns: minmax(220px, 1fr) auto; align-items: center; gap: var(--td-space-3); }
.td-icon-filters { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--td-space-2); }
.td-icon-filter { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; padding-inline: 10px; color: var(--td-text-muted); border-radius: 99px; font-size: var(--td-type-meta); font-weight: 760; }
.td-icon-filter:hover, .td-icon-filter.is-active, .td-icon-filter[aria-pressed="true"] { color: var(--td-text-primary); background: color-mix(in srgb, var(--td-primary) 12%, transparent); }
.td-icon-filter.is-active, .td-icon-filter[aria-pressed="true"] { color: color-mix(in srgb, var(--td-primary) 80%, var(--td-text-primary)); }
.td-icon-grid--incremental { max-height: none; overflow: visible; align-content: start; }
.td-icon-grid[data-state="loading"] { cursor: wait; }
.td-icon-grid[data-state="loading"] .td-icon-tile { opacity: .5; }
.td-icon-grid[data-state="empty"], .td-icon-grid[data-state="error"] { min-height: 180px; place-items: center; align-content: center; color: var(--td-text-muted); }
.td-icon-grid[data-state="error"] { color: var(--td-danger); }
.td-icon-grid__sentinel, .td-icon-grid__status { display: grid; grid-column: 1 / -1; min-height: 44px; place-items: center; color: var(--td-text-muted); font-size: var(--td-type-label); }
.td-icon-grid__sentinel[hidden], .td-icon-grid__status[hidden] { display: none; }

/* Shared extended-state contract --------------------------------------------- */
.td-component-state { display: grid; min-height: 120px; place-items: center; align-content: center; gap: var(--td-space-2); padding: var(--td-space-4); color: var(--td-text-muted); text-align: center; }
.td-component-state__title { margin: 0; color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 800; }
.td-component-state__copy { max-width: 46ch; margin: 0; font-size: var(--td-type-label); }
.td-component-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--td-space-2); margin-block-start: var(--td-space-1); }
.td-component-state[data-state="loading"] { cursor: wait; }
.td-component-state[data-state="error"] { color: var(--td-danger); background: color-mix(in srgb, var(--td-danger) 9%, transparent); }
:where(.td-number, .td-date, .td-time, .td-combobox)[data-state="error"] :where(.td-input, .td-combobox__control) { border-color: var(--td-danger); }
:where(.td-number, .td-date, .td-time, .td-combobox)[aria-disabled="true"] { cursor: not-allowed; opacity: .52; pointer-events: none; }

/* Reduced motion and responsive shell */
.td-motion-enter { animation: td-enter .18s ease-out both; }@keyframes td-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 820px) {
  .td-app { grid-template-columns: 64px minmax(0,1fr); }
  .td-app[data-sidebar-layout], .td-app .td-sidebar { --td-sidebar-rail: 64px; --td-sidebar-target: 42px; --td-sidebar-icon-inset: 9px; }
  .td-app .td-sidebar { gap: 10px; padding: 16px 10px; }
  .td-app .td-sidebar :is(.td-logo__copy, .td-sidebar__group, .td-sidebar-toggle, .td-nav-item > span:not(.td-nav-icon), .td-profile__copy) { display: none; }
  .td-app .td-sidebar[data-header-layout] .td-sidebar__brand { grid-template: 34px / minmax(0,1fr); min-height: 42px; padding: 0; gap: 0; }
  .td-app .td-sidebar[data-header-layout] .td-sidebar__brand > .td-logo { width: 28px; margin-inline: auto; gap: 0; }
  .td-app .td-sidebar__footer { margin-right: 0; }
  .td-app .td-sidebar :is(.td-nav-item, .td-profile) { width: 42px; min-height: 42px; justify-content: center; padding: 0; gap: 0; border-radius: 12px; }
  .td-app .td-sidebar :is(.td-nav-icon, .td-nav-icon .td-icon-image) { width: 22px; height: 22px; }
  .td-page { padding: 16px; }
}
@media (max-width: 560px) {
  .td-app { display: block; }
  .td-app .td-sidebar[data-sidebar] { position: sticky; z-index: 20; top: var(--td-space-3); flex-direction: row; width: 100%; height: auto; min-height: auto; max-height: none; margin-bottom: var(--td-space-3); padding: 8px; overflow: auto hidden; }
  .td-app .td-sidebar__nav { display: flex; }
  .td-app :is(.td-sidebar__spacer, .td-sidebar__footer) { display: none; }
  .td-app .td-sidebar__brand { flex: 0 0 42px; width: 42px; margin: 0; }
  .td-app .td-nav-item { width: 40px; flex: 0 0 40px; }
  .td-main { max-height: none; }.td-card { padding: 16px; }.td-card[id], section[id] { scroll-margin-top: 64px; }
}

/* Sidebar utilities, profile and breadcrumbs -------------------------------- */
.td-sidebar-controls { display: grid; grid-template-columns: 42px minmax(72px,1fr) minmax(72px,1fr); gap: 7px; width: 100%; }
.td-icon-btn { display: inline-grid; width: 40px; height: 40px; place-items: center; padding: 0; color: var(--td-text-muted); border-radius: var(--td-radius-sm); }
.td-sidebar-controls > .td-icon-btn { width: 42px; height: 42px; }
.td-icon-btn:hover:not(:disabled), .td-icon-btn.is-active { color: var(--td-text-primary); border-color: color-mix(in srgb, var(--td-primary) 55%, var(--td-line)); background: linear-gradient(color-mix(in srgb, var(--td-primary) 14%, transparent), color-mix(in srgb, var(--td-primary) 14%, transparent)), var(--td-ultra-surface); }
.td-control { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; gap: var(--td-space-2); padding: 0 10px; color: var(--td-text-muted); background: transparent; box-shadow: none; }
.td-control[data-control-variant="icon"] { width: 40px; padding: 0; }
.td-control[data-control-variant="label"] { color: var(--td-text-muted); font-size: var(--td-type-meta); font-weight: 800; }
.td-control[data-control-variant="segments"] { position: relative; display: inline-grid; grid-template-columns: repeat(2, minmax(30px, 1fr)); min-width: 72px; min-height: 40px; padding: 3px; border-radius: 12px; }
.td-control[data-control-variant="segments"] > button { min-width: 30px; padding: 0 8px; color: inherit; border: 0; border-radius: 8px; background: transparent; font-size: var(--td-type-meta); font-weight: 800; }
.td-control[data-control-variant="segments"] > button.is-active { color: color-mix(in srgb, var(--td-primary) 76%, var(--td-text-primary)); background: transparent; box-shadow: none; }
.td-control[data-control-density="compact"] { min-height: 32px; padding: var(--td-space-1) var(--td-space-2); }
.td-control[data-control-density="compact"][data-control-variant="icon"] { width: 32px; height: 32px; padding: 0; }
.td-control[data-control-variant="segments"] { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--td-space-1); }
.td-control[data-control-variant="segments"] > button { min-height: 30px; overflow-wrap: anywhere; }
.td-theme-toggle, .td-lang-toggle { display: inline-grid; grid-template-columns: repeat(2, minmax(30px, 1fr)); min-width: 72px; height: 42px; min-height: 42px; gap: 2px; overflow: hidden; padding: 3px; box-sizing: border-box; border-radius: 12px; }
.td-theme-toggle button, .td-lang-toggle button { display: grid; min-width: 30px; min-height: 0; height: 100%; place-items: center; padding: 0 8px; box-sizing: border-box; color: var(--td-text-muted); border: 0; border-radius: 8px; background: transparent; font-size: var(--td-type-meta); font-weight: 800; line-height: 1; }
.td-theme-toggle button.is-active, .td-lang-toggle button.is-active { color: color-mix(in srgb, var(--td-primary) 76%, var(--td-text-primary)); background: color-mix(in srgb, var(--td-primary) 18%, transparent); box-shadow: inset 0 1px 0 rgb(var(--td-highlight-rgb) / .10); }
.td-theme-toggle button.is-active .td-icon-image { filter: var(--td-icon-primary-filter); }
.td-theme-label-toggle { display: inline-flex; align-items: center; min-height: 32px; gap: 7px; padding: 0 10px; color: var(--td-text-muted); border: 1px solid var(--td-line); border-radius: 8px; background: var(--td-glass-block); font-size: var(--td-type-meta); font-weight: 800; }.td-theme-label-toggle:hover { color: var(--td-text-primary); border-color: var(--td-line-strong); background: color-mix(in srgb, var(--td-primary) 8%, var(--td-glass-block)); }
.td-profile-popover { position: relative; display: grid; width: 100%; gap: 7px; }
.td-profile { position: relative; display: flex; align-items: center; width: 100%; min-height: 46px; gap: 9px; overflow: hidden; padding: 7px 10px; border-radius: 13px; text-align: left; transition: border-color 100ms ease, filter 100ms ease; }
.td-profile:hover, .td-profile[aria-expanded="true"] { border-color: color-mix(in srgb, var(--td-primary) 46%, var(--td-glass-border)); filter: brightness(1.04); }
.td-avatar { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; overflow: hidden; color: var(--td-text-on-strong); border-radius: 50%; background: var(--td-primary-active); font-size: var(--td-type-label); font-weight: 800; }
.td-avatar .td-icon-image { width: 18px; height: 18px; opacity: 1; filter: brightness(0) invert(1); }
.td-avatar .td-icon-image[width="16"] { width: 16px; height: 16px; }
.td-avatar .td-icon-image[width="20"] { width: 20px; height: 20px; }
.td-avatar .td-icon-image[width="22"] { width: 22px; height: 22px; }
.td-avatar .td-icon-image[width="24"] { width: 24px; height: 24px; }
.td-nav-item > .td-nav-icon { width: 22px; height: 22px; flex: 0 0 22px; }
.td-avatar__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.td-profile[data-state="compact"] { width: 42px; min-height: 42px; padding: 0; justify-content: center; }
.td-sidebar[data-sidebar="collapsed"] { width: var(--td-sidebar-rail, 64px); padding: 16px 10px; scrollbar-gutter: auto; }
.td-sidebar .td-profile { height: 42px; padding-block: 0; }
.td-sidebar .td-profile:has(.td-avatar:not([data-avatar-kind="icon"])) { padding-inline: calc(var(--td-sidebar-icon-inset, 9px) - 5px); }
.td-sidebar .td-profile__name { font-size: var(--td-type-body); font-weight: 650; line-height: 1.3; }
.td-sidebar .td-profile__meta { line-height: 1.3; }
.td-sidebar .td-profile .td-avatar[data-avatar-kind="icon"] { width: 22px; height: 22px; flex-basis: 22px; color: inherit; border-radius: 0; background: transparent; }
.td-sidebar .td-profile .td-avatar[data-avatar-kind="icon"] .td-icon-image { width: 22px; height: 22px; filter: var(--td-icon-filter); }
.td-sidebar[data-sidebar="collapsed"] .td-profile { width: var(--td-sidebar-target, 42px); gap: 0; }
.td-profile-menu[popover] { width: min(320px, calc(100vw - 32px)); }
.td-profile-menu__fact:has(.td-menu__copy) { display: flex; gap: var(--td-space-2); padding: var(--td-space-2); border-bottom: 1px solid var(--td-line); border-radius: 0; }
.td-menu__body { display: grid; gap: var(--td-space-1); min-width: 0; }
.td-menu__copy { display: grid; min-width: 0; flex: 1 1 auto; gap: 3px; }
.td-menu__copy > * { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.td-menu__label { font-weight: 650; }
:is(.td-menu__item, .td-profile-menu__item, .td-command-palette__item):has(.td-menu__copy) { width: 100%; min-width: 0; gap: var(--td-space-2); padding: var(--td-space-2); }
.td-choice:not(.td-switch) { align-items: flex-start; padding-block: var(--td-space-1); cursor: pointer; }
.td-choice:not(.td-switch) input { appearance: none; margin-top: 1px; border: 1px solid var(--td-line-strong); border-radius: 6px; background: var(--td-list); cursor: inherit; }
.td-choice:not(.td-switch) input:checked, .td-choice:not(.td-switch) input:indeterminate { border-color: var(--td-primary-active); background-color: var(--td-primary-active); }
.td-choice:not(.td-switch) input::after { display: block; width: 100%; height: 100%; background: var(--td-text-on-strong); mask: url("assets/icons/check.svg") center / 16px no-repeat; content: ""; opacity: 0; }
.td-choice:not(.td-switch) input:checked::after, .td-choice:not(.td-switch) input:indeterminate::after { opacity: 1; }
.td-choice:not(.td-switch) input:indeterminate::after { mask-image: url("assets/icons/minus.svg"); }
.td-choice:not(.td-switch) input[type="radio"] { border-radius: 50%; }
.td-choice:not(.td-switch) input[type="radio"]::after { mask-image: url("assets/icons/circle-small.svg"); }
.td-choice > span:not(.td-switch__track) { min-width: 0; overflow-wrap: anywhere; line-height: 22px; }
.td-input-group { align-items: center; padding: var(--td-space-1); gap: var(--td-space-1); }
.td-input-group > .td-input { flex: 1 1 0; width: 0; padding-inline: var(--td-space-2); }
.td-input-group > :is(.td-icon-btn, .td-input-group__action) { flex: 0 0 36px; width: 36px; height: 36px; margin: 0; }
.td-input-group > .td-input-group__icon { flex-basis: 28px; width: 28px; }
.td-search input::-webkit-search-cancel-button { appearance: none; }
.td-pagination { max-width: 100%; padding: var(--td-space-2); }
.td-pagination__item { flex: 0 0 32px; }
.td-btn, .td-control { max-width: 100%; min-width: 0; }
.td-btn { padding-block: var(--td-space-2); line-height: 1.35; }
.td-btn > span, .td-control > span { min-width: 0; overflow-wrap: anywhere; }
.td-table td:has(> .td-icon-btn) { white-space: nowrap; }
.td-table td > .td-icon-btn + .td-icon-btn { margin-inline-start: var(--td-space-2); }
.td-steps { margin: 0; list-style: none; }
.td-profile__copy { display: grid; min-width: 0; flex: 1 1 auto; width: 100%; opacity: 1; transform: translateX(0); }.td-profile__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--td-type-label); font-weight: 760; }.td-profile__meta { overflow: hidden; color: var(--td-text-muted); text-overflow: ellipsis; white-space: nowrap; font-size: var(--td-type-meta); }
.td-profile-menu { position: fixed; z-index: 55; right: auto; bottom: 62px; left: 14px; display: grid; width: min(204px, calc(100vw - 28px)); gap: 7px; overflow: hidden; padding: 10px; border-radius: var(--td-radius); }
.td-profile-menu__fact { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; min-height: 44px; gap: 8px; padding: 4px 10px 4px 6px; border-radius: 11px; }.td-profile-menu__fact-icon { display: grid; width: 32px; height: 32px; place-items: center; color: var(--td-primary); border-radius: 10px; background: color-mix(in srgb, var(--td-primary) 15%, transparent); }.td-profile-menu__fact strong { font-size: var(--td-type-label); }.td-profile-menu__fact code { color: var(--td-text-muted); font: var(--td-type-meta)/1 var(--td-font-mono); }
.td-profile-menu__actions { display: grid; padding-top: 4px; border-top: 1px solid var(--td-line); }.td-profile-menu__item { display: flex; align-items: center; min-height: 38px; gap: 10px; padding: 0 10px; color: var(--td-text-primary); border: 0; border-radius: 9px; background: transparent; cursor: pointer; text-align: left; text-decoration: none; font-size: var(--td-type-label); }.td-profile-menu__item:hover { background: color-mix(in srgb, var(--td-primary) 10%, transparent); }.td-profile-menu__item--danger { color: var(--td-danger); }
.td-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 var(--td-space-2); color: var(--td-text-muted); font-size: var(--td-type-label); }.td-breadcrumbs a { color: inherit; text-decoration: none; }.td-breadcrumbs a:hover { color: var(--td-text-primary); }.td-breadcrumbs [aria-current="page"] { color: var(--td-text-primary); font-weight: 700; }.td-breadcrumbs__sep { opacity: .58; }

/* Search, input groups, choices and disclosure -------------------------------- */
.td-input-group { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--td-line); border-radius: var(--td-radius-sm); background: var(--td-glass-block); }.td-input-group:focus-within { border-color: var(--td-primary); box-shadow: var(--td-focus); }.td-input-group .td-input { min-width: 0; border: 0; box-shadow: none; background: transparent; }.td-input-group__icon { display: grid; width: 40px; flex: 0 0 40px; place-items: center; color: var(--td-text-muted); }.td-input-group__action { margin: 3px; }
.td-search { display: flex; min-width: 0; }.td-search .td-input { padding-left: 0; }.td-search .td-input-group__icon { flex: 0 0 40px; }
.td-choice { display: inline-flex; align-items: center; min-height: 32px; gap: 8px; color: var(--td-text-primary); font-size: var(--td-type-label); }.td-choice input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; accent-color: var(--td-primary); }.td-switch { cursor: pointer; }.td-switch input { position: absolute; opacity: 0; pointer-events: none; }.td-switch__track { position: relative; width: 36px; height: 20px; flex: 0 0 36px; border: 1px solid var(--td-line-strong); border-radius: 99px; background: var(--td-list); transition: background .15s ease, border-color .15s ease; }.td-switch__track::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--td-text-muted); content: ""; transition: transform .15s ease, background .15s ease; }.td-switch input:checked + .td-switch__track { border-color: var(--td-primary); background: var(--td-primary-active); }.td-switch input:checked + .td-switch__track::after { transform: translateX(16px); background: var(--td-text-on-strong); }.td-switch input:focus-visible + .td-switch__track { box-shadow: var(--td-focus); }.td-switch input:disabled + .td-switch__track { opacity: .52; }
.td-disclosure { overflow: hidden; border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-glass-block); }.td-disclosure > summary { display: flex; align-items: center; min-height: 44px; gap: 10px; padding: 0 14px; color: var(--td-text-primary); cursor: pointer; font-size: var(--td-type-label); font-weight: 750; list-style: none; }.td-disclosure > summary::-webkit-details-marker { display: none; }.td-disclosure__chevron { width: 16px; height: 16px; margin-left: auto; transition: transform 180ms cubic-bezier(.22,1,.36,1); }.td-disclosure[open] .td-disclosure__chevron { transform: rotate(180deg); }.td-disclosure__body { padding: 12px 14px 14px; color: var(--td-text-muted); border-top: 1px solid var(--td-line); }

/* Popover, menu, tooltip and contextual actions -------------------------------- */
.td-card:has(.td-menu:not([hidden])) { position: relative; z-index: 50; }.td-popover { position: relative; display: inline-flex; width: max-content; max-width: 100%; }.td-menu { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; display: grid; min-width: 200px; padding: 6px; }.td-menu[hidden] { display: none; }.td-menu__item { display: flex; align-items: center; min-height: 36px; gap: 8px; padding: 0 9px; color: inherit; border: 0; border-radius: 8px; background: transparent; text-align: left; text-decoration: none; font-size: var(--td-type-label); }.td-menu__item:hover, .td-menu__item:focus-visible { background: var(--td-glass-block); }.td-menu__item--danger { color: var(--td-danger); }.td-menu__separator { height: 1px; margin: 5px; background: var(--td-line); }.td-chevron { width: 15px; height: 15px; transition: transform 180ms cubic-bezier(.22,1,.36,1); }[aria-expanded="true"] > .td-chevron { transform: rotate(180deg); }
.td-notification-menu { position: fixed; z-index: 55; top: auto; right: auto; bottom: 72px; left: 216px; width: min(300px, calc(100vw - 32px)); }.td-notification-menu__header { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 8px; color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 800; }.td-notification-menu__item { display: grid; width: 100%; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 9px; padding: 9px; color: inherit; border: 0; border-radius: 8px; background: transparent; text-align: left; }.td-notification-menu__item:hover, .td-notification-menu__item:focus-visible { background: var(--td-glass-block); }.td-notification-menu__item + .td-notification-menu__item { border-top: 1px solid var(--td-line); }.td-notification-menu__copy { min-width: 0; }.td-notification-menu__title, .td-notification-menu__meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.td-notification-menu__title { color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 760; }.td-notification-menu__meta { margin-top: 2px; color: var(--td-text-muted); font-size: var(--td-type-meta); }
.td-notification-menu__item:has(.td-feedback__icon[data-icon="success"]) { --td-feedback-color: var(--td-success); }.td-notification-menu__item:has(.td-feedback__icon[data-icon="warning"]) { --td-feedback-color: var(--td-warning); }.td-notification-menu__item:has(.td-feedback__icon[data-icon="danger"]) { --td-feedback-color: var(--td-danger); }
.td-icon-btn:has(.td-tooltip), .td-btn:has(.td-tooltip) { position: relative; }.td-tooltip { position: absolute; z-index: 80; bottom: calc(100% + 7px); left: 50%; width: max-content; max-width: 220px; padding: 6px 8px; font-size: var(--td-type-meta); line-height: 1.25; opacity: 0; pointer-events: none; transform: translate(-50%, 3px); transition: opacity .12s ease, transform .12s ease; }.td-icon-btn:hover .td-tooltip, .td-icon-btn:focus-visible .td-tooltip, .td-btn:hover .td-tooltip, .td-btn:focus-visible .td-tooltip { opacity: 1; transform: translate(-50%, 0); }

/* Chips, badges, alerts and progress ------------------------------------------ */
.td-progress { --td-feedback-color: var(--td-primary-ink); --td-progress-fill: var(--td-primary-active); display: grid; width: 100%; min-width: 0; gap: var(--td-space-2); }
.td-progress__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--td-space-1) var(--td-space-3); }
.td-progress__label { min-width: 0; flex: 1 1 12ch; overflow-wrap: anywhere; font-size: var(--td-type-label); }
.td-progress__value { color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-progress__bar { display: block; appearance: none; width: 100%; height: 8px; min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--td-text-muted) 18%, transparent); color: var(--td-progress-fill); }
.td-progress__bar::-webkit-progress-bar { border-radius: inherit; background: color-mix(in srgb, var(--td-text-muted) 18%, transparent); }
.td-progress__bar::-webkit-progress-value { border-radius: 99px; background: var(--td-progress-fill); transition: width 180ms ease; }
.td-progress__bar::-moz-progress-bar { border-radius: 99px; background: var(--td-progress-fill); }
.td-progress__track { position: relative; min-width: 0; overflow: hidden; height: 8px; border-radius: 99px; }
.td-progress__indeterminate { position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: inherit; background: var(--td-progress-fill); animation: td-progress-indeterminate 1s ease-in-out infinite alternate; }
.td-progress__bar:indeterminate::-webkit-progress-bar { background: transparent; }
.td-progress__bar:indeterminate::-moz-progress-bar { background: transparent; }
.td-progress__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--td-space-1) var(--td-space-3); font-size: var(--td-type-meta); }
.td-progress__status { display: inline-flex; min-width: 0; align-items: center; gap: 6px; color: var(--td-text-primary); font-weight: 650; }
.td-progress__status .td-feedback__icon { width: 16px; height: 16px; flex-basis: 16px; align-self: flex-start; margin-top: 1px; }
.td-progress__description { min-width: 0; margin: 0; color: var(--td-text-muted); overflow-wrap: anywhere; }
.td-progress[data-state="idle"] { --td-feedback-color: var(--td-text-muted); --td-progress-fill: var(--td-text-muted); }
.td-progress[data-state="success"] { --td-feedback-color: var(--td-success-ink); --td-progress-fill: var(--td-success); }
.td-progress[data-state="warning"] { --td-feedback-color: var(--td-warning-ink); --td-progress-fill: var(--td-warning); }
.td-progress[data-state="danger"] { --td-feedback-color: var(--td-danger-ink); --td-progress-fill: var(--td-danger); }
.td-chip { display: inline-flex; align-items: center; min-height: 26px; gap: 6px; padding: 0 9px; color: var(--td-text-muted); border: 1px solid var(--td-line); border-radius: 99px; background: var(--td-glass-block); font-size: var(--td-type-meta); font-weight: 760; }.td-chip--primary { color: color-mix(in srgb, var(--td-primary) 78%, var(--td-text-primary)); border-color: color-mix(in srgb, var(--td-primary) 46%, var(--td-line)); background: color-mix(in srgb, var(--td-primary) 12%, transparent); }.td-chip__remove { display: grid; width: 20px; height: 20px; place-items: center; margin-right: -5px; padding: 0; color: inherit; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }.td-chip__remove:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.td-badge { display: inline-flex; min-width: 20px; min-height: 20px; align-items: center; justify-content: center; gap: var(--td-space-1); padding: 3px 6px; vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--td-text-on-strong); border-radius: 99px; background: var(--td-primary-active); box-shadow: inset 0 1px 0 rgb(var(--td-highlight-rgb) / .18); font-size: 10px; font-weight: 800; line-height: 14px; }.td-badge--success { color: var(--td-text-on-strong); background: var(--td-success-strong); }.td-badge--warning { color: var(--td-text-on-strong); background: var(--td-warning-strong); }.td-badge--danger { color: var(--td-text-on-strong); background: var(--td-danger-strong); }
.td-alert { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; min-height: 56px; gap: 10px; padding: 10px 12px; }.td-alert__title { margin: 0 0 2px; font-size: var(--td-type-label); font-weight: 800; }.td-alert__copy { margin: 0; color: var(--td-text-muted); font-size: var(--td-type-label); }
.td-skeleton { position: relative; width: 100%; height: 12px; min-height: 12px; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--td-text-muted) 13%, transparent); }
.td-skeleton::after { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 10%, color-mix(in srgb, var(--td-text-primary) 10%, transparent) 48%, transparent 86%); content: ""; transform: translateX(-100%); animation: td-skeleton-shimmer 1.35s ease-in-out infinite; }
.td-skeleton-stack { display: grid; width: 100%; gap: 8px; }
.td-loading { display: inline-flex; min-width: 0; align-items: center; justify-content: center; gap: var(--td-space-2); }.td-loading .td-icon-image { width: 18px; height: 18px; flex: 0 0 18px; }
.td-loading-state { display: grid; min-width: 0; min-height: 96px; grid-template-columns: 24px minmax(0, 1fr); align-items: center; align-content: center; gap: 8px 10px; padding: var(--td-space-3); }.td-loading-state__indicator { display: grid; width: 24px; height: 24px; place-items: center; color: var(--td-primary); }.td-loading-state__indicator .td-icon-image { width: 18px; height: 18px; filter: var(--td-icon-primary-filter); }.td-loading-state__body { min-width: 0; }.td-loading-state__title { margin: 0; color: var(--td-text-primary); font-size: var(--td-type-label); font-weight: 800; }.td-loading-state__copy { margin: 2px 0 0; color: var(--td-text-muted); font-size: var(--td-type-meta); }.td-loading-state .td-progress { grid-column: 1 / -1; width: 100%; }
@keyframes td-progress-indeterminate { from { transform: translateX(0); } to { transform: translateX(163%); } }
@keyframes td-skeleton-shimmer { to { transform: translateX(100%); } }

/* Lists, pagination, steps and update flow ------------------------------------ */
.td-list { display: grid; margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-glass-block); }.td-list.td-scroll { overflow: auto; scrollbar-gutter: stable; }.td-list__item { display: flex; align-items: center; min-height: 52px; gap: var(--td-space-3); padding: 10px 14px; border-bottom: 1px solid var(--td-line); }.td-list__item:last-child { border-bottom: 0; }.td-list__item:hover { background: color-mix(in srgb, var(--td-primary) 7%, transparent); }.td-list__main { min-width: 0; flex: 1; }.td-list__title, .td-list__meta { display: block; }.td-list__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--td-type-label); font-weight: 760; }.td-list__meta { overflow: hidden; color: var(--td-text-muted); text-overflow: ellipsis; white-space: nowrap; font-size: var(--td-type-meta); }
.td-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }.td-pagination__item { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; color: var(--td-text-muted); border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: var(--td-type-label); }.td-pagination__item:hover { border-color: var(--td-line); background: var(--td-glass-block); }.td-pagination__item[aria-current="page"] { color: var(--td-text-on-strong); border-color: var(--td-primary-active); background: var(--td-primary-active); }.td-pagination__item:disabled, .td-pagination__item[aria-disabled="true"] { opacity: .52; pointer-events: none; }
.td-steps { display: grid; gap: 10px; }.td-step { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 10px; color: var(--td-text-muted); font-size: var(--td-type-label); }.td-step__content { display: grid; min-width: 0; gap: 3px; line-height: 1.35; }.td-step__content > :not(strong) { color: var(--td-text-muted); font-size: var(--td-type-meta); }.td-step__dot { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--td-line-strong); border-radius: 50%; background: var(--td-glass-block); font-size: var(--td-type-meta); font-weight: 800; }.td-step.is-current { color: var(--td-text-primary); }.td-step.is-current .td-step__dot { color: var(--td-text-on-strong); border-color: var(--td-primary); background: var(--td-primary-active); }.td-step.is-complete .td-step__dot { color: var(--td-text-on-bright); border-color: var(--td-success); background: var(--td-success); }.td-step.is-error .td-step__dot { color: var(--td-text-on-bright); border-color: var(--td-danger); background: var(--td-danger); }
.td-update__log { max-height: 180px; overflow: auto; padding: 10px; color: var(--td-text-muted); border: 1px solid var(--td-line); border-radius: var(--td-radius-sm); background: color-mix(in srgb, var(--td-canvas) 82%, transparent); font: 12px/1.5 var(--td-font-mono); }

/* Shared state contract: geometry stays constant; states change semantic
   affordance only and never introduce another surface recipe. */
:where(.td-list, .td-table-wrap, .td-table-state, .td-chart-card, .td-session-card, .td-empty)[data-state="loading"] { cursor: wait; }
:where(.td-list, .td-table-wrap, .td-table-state, .td-chart-card, .td-session-card, .td-empty)[data-state="empty"] { border-style: dashed; }
:where(.td-list, .td-table-wrap, .td-table-state, .td-chart-card, .td-session-card, .td-empty)[data-state="error"] { border-color: color-mix(in srgb, var(--td-danger) 58%, var(--td-line)); }
.td-session-card[data-state="active"] { border-color: color-mix(in srgb, var(--td-success) 52%, var(--td-line)); }.td-session-card[data-state="expired"] { border-color: color-mix(in srgb, var(--td-danger) 52%, var(--td-line)); }

/* Compact/mobile variants of complete objects -------------------------------- */
.td-menu--open, .td-profile-menu--open { animation: td-enter .18s ease-out both; }.td-menu--closing, .td-profile-menu--closing { animation: td-exit .14s ease-in both; pointer-events: none; }@keyframes td-exit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } }
@media (max-width: 820px) { .td-color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.td-background-family__grid, .td-spec-grid, .td-material-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .td-sidebar-controls { display: none; }.td-dialog { padding: 16px; }.td-page-header { align-items: stretch; flex-direction: column; }.td-toast-stack { right: 8px; bottom: 8px; width: calc(100vw - 16px); }.td-grid--2, .td-spec-grid, .td-material-stage { grid-template-columns: 1fr; }.td-color-grid, .td-background-family__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.td-type-sample { grid-template-columns: 72px minmax(0, 1fr); }.td-type-sample__size { display: none; } }
/* Extended kit responsive and motion contract -------------------------------- */
@media (max-width: 980px) {
  .td-icon-filter-bar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .td-toolbar { align-items: stretch; }
  .td-toolbar__group { max-width: 100%; overflow: auto hidden; }
  .td-toolbar__separator { display: none; }
  .td-calendar { min-width: 0; }
  .td-drawer { width: min(440px, calc(100vw - 2 * var(--td-space-3))); }
  .td-chart-canvas { min-height: 190px; aspect-ratio: 4 / 2; }
}

@media (max-width: 560px) {
  .td-button-group--responsive, .td-split-button--responsive { display: flex; width: 100%; }
  .td-button-group--responsive > :where(.td-btn, .td-icon-btn, .td-control) { flex: 1 1 0; }
  .td-toolbar { min-height: 44px; padding: var(--td-space-1); }
  .td-toolbar__spacer { display: none; }
  .td-number, .td-date, .td-time { width: 100%; }
  .td-datetime-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .td-combobox__popup { position: fixed; z-index: 96; top: auto; right: 8px; bottom: 8px; left: 8px; max-height: min(60vh, 420px); }
  .td-dropzone { min-height: 148px; padding: var(--td-space-4); }
  .td-tree__group { padding-inline-start: var(--td-space-3); }
  .td-tree__row { grid-template-columns: 24px auto minmax(0, 1fr); }
  .td-tree__meta { display: none; }
  .td-timeline__item { gap: var(--td-space-2); }
  .td-calendar { gap: var(--td-space-2); padding: var(--td-space-2); }
  .td-calendar__weekdays, .td-calendar__grid { gap: 2px; }
  .td-calendar__day { min-width: 30px; min-height: 34px; }
  .td-accordion__trigger { padding-inline: var(--td-space-3); }
  .td-accordion__panel { padding: 0 var(--td-space-3) var(--td-space-3); }
  .td-drawer-layer { justify-items: stretch; }
  .td-drawer { width: calc(100vw - 2 * var(--td-space-3)); }
  .td-sheet { max-height: 92vh; border-radius: var(--td-radius-lg) var(--td-radius-lg) 0 0; }
  .td-command-layer { padding: 8px; }
  .td-command-palette { align-self: start; max-height: calc(100vh - 16px); }
  .td-command-palette__footer { display: none; }
  .td-chart-card__body, .td-chart-canvas { min-height: 180px; }
  .td-chart-canvas { aspect-ratio: auto; }
  .td-chart-tooltip { max-width: calc(100% - 16px); }
  .td-icon-filters { flex-wrap: nowrap; overflow: auto hidden; }
  .td-icon-filter { flex: 0 0 auto; }
  .td-icon-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .td-drawer, .td-sheet, .td-tree__toggle .td-chevron,
  .td-accordion__trigger .td-chevron { transition: none; }
  .td-btn.is-loading .td-icon-image,
  .td-btn[aria-busy="true"] .td-icon-image { animation: none; }
}

/* Content roots fill their parent in any layout, not just the Storybook preview.
   Compact actions, labels, avatars, the sidebar rail and anchored overlays keep intrinsic sizing. */
:is(.td-card, .td-stat-card, .td-field, .td-input, .td-textarea, .td-select, .td-input-group,
    .td-search, .td-combobox, .td-listbox, .td-slider, .td-file-picker, .td-dropzone,
    .td-table, .td-table-wrap, .td-table-state, .td-list, .td-tree, .td-timeline, .td-steps,
    .td-calendar, .td-empty, .td-loading-state, .td-alert, .td-toast, .td-disclosure, .td-accordion,
    .td-chart-card, .td-chart-wrap, .td-chart-canvas, .td-auth-card, .td-session-card, .td-icon-tile,
    .td-breadcrumbs, .td-pagination) { width: 100%; min-width: 0; max-width: 100%; }
:is(.td-card, .td-stat-card, .td-auth-card, .td-table-state, .td-empty, .td-loading-state,
    .td-alert, .td-toast, .td-disclosure, .td-accordion) { overflow-wrap: anywhere; }
:is(.td-card, .td-stat-card, .td-auth-card, .td-disclosure, .td-accordion) > * { min-width: 0; max-width: 100%; }
:is(.td-empty, .td-loading-state, .td-alert, .td-toast) { --td-feedback-color: var(--td-primary); --td-feedback-ink: var(--td-primary-ink); border-color: color-mix(in srgb, var(--td-feedback-color) 38%, var(--td-glass-border)); }
:is(.td-empty, .td-loading-state)[data-state="success"], :is(.td-alert, .td-toast)[data-variant="success"] { --td-feedback-color: var(--td-success); --td-feedback-ink: var(--td-success-ink); }
:is(.td-empty, .td-loading-state)[data-state="warning"], :is(.td-alert, .td-toast)[data-variant="warning"] { --td-feedback-color: var(--td-warning); --td-feedback-ink: var(--td-warning-ink); }
:is(.td-empty, .td-loading-state)[data-state="error"], :is(.td-alert, .td-toast)[data-variant="danger"] { --td-feedback-color: var(--td-danger); --td-feedback-ink: var(--td-danger-ink); }
.td-empty[data-state="empty"] { --td-feedback-color: var(--td-text-muted); --td-feedback-ink: var(--td-text-muted); }
.td-feedback__icon[data-icon="loading"] { --td-feedback-icon: url("assets/icons/loader-circle.svg"); }
.td-feedback__icon[data-icon="idle"] { --td-feedback-icon: url("assets/icons/clock.svg"); }
.td-feedback__symbol { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; color: var(--td-feedback-ink); border: 1px solid color-mix(in srgb, var(--td-feedback-color) 24%, transparent); border-radius: var(--td-radius-sm); background: color-mix(in srgb, var(--td-feedback-color) 10%, transparent); }
.td-feedback__symbol .td-feedback__icon { width: 22px; height: 22px; color: inherit; }
.td-empty { padding: clamp(20px, 5%, 40px); gap: var(--td-space-3); }
.td-empty > .td-feedback__symbol { width: 48px; height: 48px; border-radius: var(--td-radius); }
.td-empty > .td-feedback__content { max-width: 60ch; }
.td-empty .td-feedback__title { font-size: var(--td-type-title); }
.td-empty .td-feedback__copy { margin-top: var(--td-space-2); line-height: 1.5; }
.td-empty .td-feedback__actions { justify-content: center; max-width: 100%; }
.td-loading-state { grid-template-columns: 40px minmax(0, 1fr); gap: var(--td-space-3); padding: var(--td-space-4); }
.td-loading-state > .td-feedback__actions { grid-column: 1 / -1; }
.td-loading-state__value { display: block; margin-top: var(--td-space-1); color: var(--td-text-primary); font-size: var(--td-type-meta); font-weight: 650; font-variant-numeric: tabular-nums; }
:is(.td-alert, .td-toast) { align-items: start; gap: var(--td-space-3); padding: var(--td-space-3); }
:is(.td-alert, .td-toast) > .td-feedback__icon { color: var(--td-feedback-ink); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .td-progress__indeterminate { animation: none; transform: translateX(81%); }
  .td-progress__bar::-webkit-progress-value { transition: none; }
}

/* Embedded workspaces respond to their own column, not the window behind it. */
@container td-workspace (max-width: 560px) {
  .td-app[data-sidebar] > :is(.td-block.td-sidebar, .td-main) { grid-column: 1 / -1; height: auto; min-height: 0; max-height: none; }
  .td-app > .td-sidebar[data-sidebar] { position: relative; top: auto; flex-direction: row; align-items: center; width: 100%; gap: var(--td-space-2); padding: var(--td-space-2); overflow: auto hidden; }
  .td-app .td-sidebar__nav, .td-app .td-sidebar__footer { display: flex; flex: 0 0 auto; gap: var(--td-space-2); }
  .td-app .td-sidebar :is(.td-sidebar__spacer, .td-sidebar__group, .td-sidebar-toggle, .td-logo__copy, .td-profile__copy, .td-nav-label, .td-nav-item > .td-badge) { display: none; }
  .td-app .td-sidebar[data-header-layout] .td-sidebar__brand { display: grid; grid-template: 34px / 28px; min-height: 40px; width: 28px; flex: 0 0 28px; margin: 0; padding: 0; gap: 0; }
  .td-app .td-sidebar[data-header-layout] .td-sidebar__brand > .td-logo { width: 28px; grid-template-columns: 28px; margin: 0; gap: 0; }
  .td-app .td-sidebar :is(.td-nav-item, .td-profile) { width: 40px; min-height: 40px; flex: 0 0 40px; justify-content: center; padding: 0; gap: 0; }
}

/* Isolated component workbench. Geometry belongs to the canonical sheet too.
   Storybook chrome is third-party tooling, never a product component recipe. */
.td-story-stage { min-height: 100vh; padding: var(--td-space-6); background: var(--td-wallpaper); }
.td-story-stage[data-view-mode="docs"] { min-height: 480px; }
/* Docs chrome stays neutral; its wide property table scrolls independently. */
#storybook-docs .sbdocs-content { min-width: 0; }
#storybook-docs .docblock-argstable { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 560px) {
  #storybook-docs .sbdocs-wrapper { padding: var(--td-space-6) var(--td-space-3); }
}
.td-story-surface { width: 100%; min-width: 0; margin: 0; padding: var(--td-space-6); }
.td-story-surface > * { min-width: 0; max-width: 100%; }
.td-story-surface > .td-app, .td-story-surface .td-story-demo > .td-app { min-height: 480px; height: 560px; overflow: auto; }
.td-story-surface .td-app > :is(.td-sidebar, .td-main) { height: 100%; min-height: 0; max-height: 100%; }
.td-story-surface > .td-sidebar { min-height: 480px; max-height: 600px; width: 232px; }
.td-story-demo { display: grid; gap: var(--td-space-4); min-width: 0; align-content: start; justify-items: start; }
.td-story-demo > :where(.td-field, .td-input, .td-input-group, .td-search, .td-select, .td-textarea, .td-combobox, .td-slider) { width: 100%; }
.td-story-demo > :where(.td-app, .td-chart-card, .td-chart-wrap, .td-table-wrap, .td-table, .td-toolbar, .td-list, .td-loading-state, .td-toast, .td-alert) { width: 100%; }
.td-story-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--td-space-3); }
.td-story-stack { display: grid; gap: var(--td-space-4); min-width: 0; width: 100%; }
.td-story-help { margin: 0; color: var(--td-text-muted); font-size: var(--td-type-label); max-width: 72ch; }
.td-story-title { margin: 0; font-size: var(--td-type-title); }
.td-story-code { margin: 0; padding: var(--td-space-4); max-width: 100%; overflow: auto; font: var(--td-type-label)/1.6 var(--td-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.td-story-surface .td-chart-canvas { width: 100%; min-width: 0; }
.td-chart-canvas[data-chart-tooltip-role] { cursor: crosshair; }
.td-story-host { display: grid; width: 100%; min-width: 0; justify-items: start; align-content: start; gap: var(--td-space-3); }
.td-story-target { width: 100%; min-width: 0; }
.td-story-feedback { width: 100%; min-width: 0; }
.td-is-spinning { animation: td-spin 800ms linear infinite; }
@media (prefers-reduced-motion: reduce) { .td-is-spinning { animation: none; } }
.td-story-editor { width: 100%; }
.td-story-editor > .td-disclosure__summary { padding: var(--td-space-3); cursor: pointer; }
.td-story-editor > .td-story-stack { padding: var(--td-space-3); }
:is(.td-story-host, .td-story-target) > :where(.td-profile, .td-app) { width: 100%; }
:is(.td-story-host, .td-story-target) > .td-app { min-height: 480px; height: 560px; overflow: auto; }
:is(.td-story-host, .td-story-target) > .td-sidebar { position: relative; top: auto; width: 232px; max-width: 100%; height: 560px; min-height: 0; max-height: 560px; }
:is(.td-story-host, .td-story-target) > .td-sidebar[data-sidebar="collapsed"] { width: var(--td-sidebar-rail, 64px); }
:is(.td-story-host, .td-story-target) > .td-profile[data-state="compact"] { width: 42px; }
:is(.td-story-host, .td-story-target) > .td-app > :is(.td-sidebar, .td-main) { height: 100%; min-height: 0; max-height: 100%; }
@media (max-width: 560px) {
  .td-story-surface .td-app > :is(.td-sidebar, .td-main),
  :is(.td-story-host, .td-story-target) > .td-app > :is(.td-sidebar, .td-main) { height: auto; max-height: none; }
}
.td-story-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: var(--td-space-2); width: 100%; }
.td-story-icon-grid > .td-icon-tile { width: 100%; min-width: 0; }
.td-story-icon-tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--td-space-3); }
.td-story-icon-tools > .td-field { flex: 1 1 160px; min-width: 0; }
.td-story-docs { max-width: 76ch; }
.td-story-docs h2 { margin: var(--td-space-5) 0 var(--td-space-2); font-size: var(--td-type-title); line-height: 1.3; }
.td-story-docs p { margin: var(--td-space-2) 0; }
.td-story-docs pre { overflow: auto; max-width: 100%; }
.td-story-chart { min-width: 0; width: 100%; }
.td-story-overlay { min-height: 320px; width: 100%; }
.td-story-overlay[data-placement="top"] { padding-top: 250px; }
.td-story-overlay > .td-story-editor { margin-top: 200px; }
.td-story-overlay[data-story-component="td-combobox"] { min-height: 384px; }
.td-story-overlay[data-story-component="td-combobox"][data-placement="top"] { padding-top: 336px; }
.td-story-overlay[data-story-component="td-combobox"] > .td-story-editor { margin-top: 336px; }
.td-feedback__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--td-space-2); }
:is(.td-alert, .td-toast):not(:has(> .td-icon-image, > .td-feedback__icon)) { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 600px) {
  :is(.td-alert, .td-toast) > .td-feedback__actions { grid-column: 2 / -1; }
  :is(.td-alert, .td-toast):not(:has(> .td-icon-image, > .td-feedback__icon)) > .td-feedback__actions { grid-column: 1 / -1; }
}
/* showPopover({ source }) supplies the implicit anchor. Reset UA centering;
   geometry stays in the canon, never in per-instance inline styles. */
:is(.td-menu, .td-notification-menu, .td-profile-menu, .td-popover, .td-tooltip, .td-combobox__popup)[popover] {
  position: fixed;
  inset: auto;
  display: grid;
  margin: var(--td-space-2) 0;
  position-area: bottom span-right;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline, --td-menu-below-edge, --td-menu-above-edge;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
:is(.td-menu, .td-notification-menu, .td-profile-menu, .td-popover, .td-tooltip, .td-combobox__popup)[popover][data-placement="top"] { position-area: top span-right; }
:is(.td-menu, .td-notification-menu, .td-profile-menu, .td-popover, .td-tooltip)[popover][data-placement="left"] { position-area: left; margin: 0 var(--td-space-2); }
:is(.td-menu, .td-notification-menu, .td-profile-menu, .td-popover, .td-tooltip)[popover][data-placement="right"] { position-area: right; margin: 0 var(--td-space-2); }
.td-tooltip[popover] { max-width: min(280px, calc(100vw - 32px)); opacity: 1; transform: none; }
.td-popover[popover] { gap: var(--td-space-2); padding: var(--td-space-3); }
.td-split-button > .td-menu[popover] { position-area: bottom span-left; justify-self: end; }
.td-split-button > .td-menu[popover][data-placement="top"] { position-area: top span-left; }
/* A scoped explicit anchor also survives empty content and multiple instances. */
.td-combobox > .td-combobox__popup[popover] { position-anchor: --td-combobox; width: anchor-size(width); min-width: 0; max-height: min(320px, calc(100dvh - 32px)); position-try-fallbacks: flip-block, --td-combobox-below, --td-combobox-above; }
@position-try --td-combobox-below { position-area: bottom span-right; min-height: min(80px, 30dvh); max-height: min(320px, calc(100% - 16px)); }
@position-try --td-combobox-above { position-area: top span-right; min-height: min(80px, 30dvh); max-height: min(320px, calc(100% - 16px)); }
@position-try --td-menu-below-edge { position-area: bottom span-all; justify-self: center; margin-inline: var(--td-space-3); min-height: min(96px, 30dvh); max-height: calc(100% - 16px); }
@position-try --td-menu-above-edge { position-area: top span-all; justify-self: center; margin-inline: var(--td-space-3); min-height: min(96px, 30dvh); max-height: calc(100% - 16px); }
@media (max-width: 640px) {
  .td-story-stage { padding: var(--td-space-3); }
  .td-story-surface { padding: var(--td-space-3); }
}