/* Twentyfirst UI · pro styles: fonts, tokens, components */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/geist-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/geist-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/geist-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Generated by scripts/tokens.ts from tokens.json: Pro tokens. Do not edit; run `pnpm tokens`. */
:where(:root) {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius: 2px;
  --radius-sm: var(--radius-1);
  --radius-md: calc((var(--radius) - 2px) * 1);
  --radius-lg: calc((var(--radius) - 2px) * 1.375);
  --radius-xl: calc((var(--radius) - 2px) * 1.875);
  --radius-pill: var(--radius-1);
  --radius-0: 0px;
  --radius-1: var(--radius);
  --radius-full: 9999px;
  --dur-fast: var(--duration-fast);
  --dur-base: var(--duration-base);
  --dur-enter: var(--duration-base);
  --dur-slow: var(--duration-base);
  --stagger-step: 0ms;
  --dur-exit: var(--duration-fast);
  --motion-time: 1;
  --motion-travel: 1;
  --motion-blur: 0px;
  --ease-out: var(--ease-standard);
  --ease-spring: var(--ease-standard);
  --ease-in-out: var(--ease-standard);
  --duration-fast: 90ms;
  --duration-base: 140ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --control-sm: 24px;
  --control-md: var(--control-dense);
  --control-lg: var(--control-comfy);
  --row-dense: 28px;
  --row-comfy: 36px;
  --control-dense: 28px;
  --control-comfy: 34px;
  --topbar-h: 44px;
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 52px;
  --subnav-w: var(--sidebar-w);
  --side-panel-w: 320px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 16px;
  --line-width: 1px;
  --z-sticky: 10;
  --z-overlay: 40;
  --z-palette: 60;
  --z-toast: 50;
  --type-display-family: var(--font-sans);
  --type-display-size: 28px;
  --type-display-line: 32px;
  --type-display-weight: 600;
  --type-display-tracking: -0.02em;
  --type-display-transform: none;
  --type-number-xl-family: var(--font-mono);
  --type-number-xl-size: 24px;
  --type-number-xl-line: 28px;
  --type-number-xl-weight: 500;
  --type-number-xl-tracking: -0.02em;
  --type-number-xl-transform: none;
  --type-h1-family: var(--font-sans);
  --type-h1-size: 28px;
  --type-h1-line: 32px;
  --type-h1-weight: 600;
  --type-h1-tracking: -0.02em;
  --type-h1-transform: none;
  --type-h2-family: var(--font-sans);
  --type-h2-size: 18px;
  --type-h2-line: 24px;
  --type-h2-weight: 600;
  --type-h2-tracking: -0.01em;
  --type-h2-transform: none;
  --type-h3-family: var(--font-sans);
  --type-h3-size: 14px;
  --type-h3-line: 20px;
  --type-h3-weight: 600;
  --type-h3-tracking: normal;
  --type-h3-transform: none;
  --type-body-family: var(--font-sans);
  --type-body-size: 14px;
  --type-body-line: 20px;
  --type-body-weight: 400;
  --type-body-tracking: normal;
  --type-body-transform: none;
  --type-body-long-family: var(--font-sans);
  --type-body-long-size: 14px;
  --type-body-long-line: 22px;
  --type-body-long-weight: 400;
  --type-body-long-tracking: normal;
  --type-body-long-transform: none;
  --type-body-sm-family: var(--font-sans);
  --type-body-sm-size: 13px;
  --type-body-sm-line: 18px;
  --type-body-sm-weight: 400;
  --type-body-sm-tracking: normal;
  --type-body-sm-transform: none;
  --type-label-family: var(--font-sans);
  --type-label-size: 12px;
  --type-label-line: 16px;
  --type-label-weight: 500;
  --type-label-tracking: normal;
  --type-label-transform: none;
  --type-small-family: var(--font-sans);
  --type-small-size: 12px;
  --type-small-line: 16px;
  --type-small-weight: 400;
  --type-small-tracking: normal;
  --type-small-transform: none;
  --type-caption-family: var(--font-mono);
  --type-caption-size: 11px;
  --type-caption-line: 16px;
  --type-caption-weight: 500;
  --type-caption-tracking: 0.08em;
  --type-caption-transform: uppercase;
  --type-micro-family: var(--font-mono);
  --type-micro-size: 10px;
  --type-micro-line: 12px;
  --type-micro-weight: 600;
  --type-micro-tracking: normal;
  --type-micro-transform: none;
  --type-code-family: var(--font-mono);
  --type-code-size: 13px;
  --type-code-line: 20px;
  --type-code-weight: 400;
  --type-code-tracking: normal;
  --type-code-transform: none;
  --type-heading-family: var(--font-sans);
  --type-heading-size: 18px;
  --type-heading-line: 24px;
  --type-heading-weight: 600;
  --type-heading-tracking: -0.01em;
  --type-heading-transform: none;
  --type-title-family: var(--font-sans);
  --type-title-size: 14px;
  --type-title-line: 20px;
  --type-title-weight: 600;
  --type-title-tracking: normal;
  --type-title-transform: none;
  --type-eyebrow-family: var(--font-mono);
  --type-eyebrow-size: 11px;
  --type-eyebrow-line: 16px;
  --type-eyebrow-weight: 500;
  --type-eyebrow-tracking: 0.08em;
  --type-eyebrow-transform: uppercase;
  --type-mono-family: var(--font-mono);
  --type-mono-size: 13px;
  --type-mono-line: 20px;
  --type-mono-weight: 400;
  --type-mono-tracking: normal;
  --type-mono-transform: none;
  --type-mono-sm-family: var(--font-mono);
  --type-mono-sm-size: 12px;
  --type-mono-sm-line: 16px;
  --type-mono-sm-weight: 400;
  --type-mono-sm-tracking: normal;
  --type-mono-sm-transform: none;
  --type-numeric-family: var(--font-mono);
  --type-numeric-size: 24px;
  --type-numeric-line: 28px;
  --type-numeric-weight: 500;
  --type-numeric-tracking: -0.02em;
  --type-numeric-transform: none;
  --density-control: var(--control-dense);
  --density-row: var(--row-dense);
  --density-pad-x: var(--space-3);
  --density-font-size: 13px;
  --density-line-height: 18px;
  --background: #09090b;
  --foreground: #ededf0;
  --card: #0e0e11;
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--foreground);
  --primary: #ededf0;
  --primary-foreground: #09090b;
  --primary-hover: color-mix(in oklab, var(--primary) 70%, #ffffff);
  --secondary: #16161a;
  --secondary-foreground: var(--foreground);
  --muted: #16161a;
  --muted-foreground: #a6a6b0;
  --accent: #16161a;
  --accent-foreground: var(--foreground);
  --destructive: #ef6f61;
  --destructive-foreground: var(--card);
  --border: #26262c;
  --input: #62626d;
  --ring: var(--foreground);
  --chart-1: var(--sky-ink);
  --chart-2: var(--mint-ink);
  --chart-3: var(--butter-ink);
  --chart-4: var(--lilac-ink);
  --chart-5: var(--blush-ink);
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--accent);
  --sidebar-accent-foreground: var(--accent-foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
  --canvas: var(--bg-000);
  --surface: var(--bg-100);
  --surface-sunken: var(--bg-200);
  --frame: var(--bg-100);
  --on-frame: var(--fg-100);
  --on-frame-muted: var(--fg-300);
  --ink: var(--fg-100);
  --ink-muted: var(--fg-200);
  --ink-subtle: var(--fg-300);
  --line: var(--line-200);
  --line-strong: var(--line-300);
  --sky: var(--info-bg);
  --sky-ink: var(--info);
  --mint: var(--ok-bg);
  --mint-ink: var(--ok);
  --lilac: var(--signal-bg);
  --lilac-ink: var(--signal);
  --butter: var(--warn-bg);
  --butter-ink: var(--warn);
  --blush: var(--danger-bg);
  --blush-ink: var(--danger);
  --focus: var(--ring);
  --count: var(--signal);
  --on-count: var(--bg-000);
  --on-frame-success: var(--ok);
  --on-frame-danger: var(--danger);
  --scrim: rgba(0,0,0,0.62);
  --scrim-strong: var(--scrim);
  --glass: color-mix(in srgb, var(--card) 72%, transparent);
  --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
  --glass-control: color-mix(in srgb, var(--foreground) 7%, transparent);
  --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
  --glass-hover: color-mix(in srgb, var(--foreground) 9%, transparent);
  --glass-border: color-mix(in srgb, var(--foreground) 14%, transparent);
  --glass-highlight: rgba(255, 255, 255, 0.07);
  --glass-sheen: transparent;
  --ambient-base: var(--background);
  --ambient-1: color-mix(in oklab, var(--chart-1) 30%, var(--background));
  --ambient-2: color-mix(in oklab, var(--chart-4) 26%, var(--background));
  --ambient-3: color-mix(in oklab, var(--chart-2) 22%, var(--background));
  --ambient-4: color-mix(in oklab, var(--foreground) 8%, var(--background));
  --ambient-scrim: rgba(9, 9, 11, 0.55);
  --bg-000: var(--background);
  --bg-100: var(--card);
  --bg-200: var(--muted);
  --bg-300: color-mix(in oklab, var(--foreground) 5%, var(--muted));
  --fg-100: var(--foreground);
  --fg-200: var(--muted-foreground);
  --fg-300: color-mix(in oklab, var(--muted-foreground) 90%, var(--background));
  --fg-400: color-mix(in oklab, var(--muted-foreground) 57%, var(--background));
  --line-100: color-mix(in oklab, var(--border) 52%, var(--card));
  --line-200: var(--border);
  --line-300: var(--input);
  --chart-grid: var(--line-100);
  --chart-sky: var(--fg-100);
  --chart-mint: color-mix(in oklab, var(--foreground) 48%, var(--card));
  --chart-lilac: var(--fg-300);
  --chart-butter: var(--fg-200);
  --chart-blush: var(--line-300);
  --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
  --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
  --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
  --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
  --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
  --ok: #5cc28f;
  --ok-bg: rgba(92,194,143,0.12);
  --info: #7aa7f5;
  --info-bg: rgba(122,167,245,0.12);
  --warn: #d9b44a;
  --warn-bg: rgba(217,180,74,0.12);
  --danger: var(--destructive);
  --danger-bg: rgba(239,111,97,0.12);
  --signal: #f2994a;
  --signal-bg: rgba(242,153,74,0.14);
  --idle: var(--fg-300);
  --diff-add: var(--ok);
  --diff-add-bg: var(--ok-bg);
  --diff-del: var(--danger);
  --diff-del-bg: var(--danger-bg);
  --paper: #ffffff;
  --paper-ink: #111114;
  --frame-hover: var(--bg-200);
  --frame-active: var(--bg-300);
  --frame-strong: var(--bg-300);
  --on-frame-strong: var(--fg-100);
  --on-frame-warn: var(--warn);
  --on-frame-signal: var(--signal);
  --ink-hover: var(--bg-200);
  --hairline: var(--line-200);
  --media-scrim: rgba(10, 10, 10, 0.6);
  --media-ink: #ffffff;
  --media-shadow: rgba(0, 0, 0, 0.3);
  --lightbox: rgba(8, 8, 8, 0.92);
  --lightbox-ink: rgba(255, 255, 255, 0.8);
  --paper-muted: #706f6a;
  --paper-subtle: #6b6a65;
  --serp-ink: #202124;
  --serp-muted: #4d5156;
  --serp-link: #1a0dab;
  --serp-chip: #f1f3f4;
  --shadow-card: none;
  --shadow-lift: none;
  --shadow-float: 0 16px 40px rgba(0,0,0,0.55);
  --shadow-overlay: 0 16px 40px rgba(0,0,0,0.55);
  --shadow-glass: 0 12px 32px rgba(0, 0, 0, 0.5);
  --button-radius: var(--radius-1);
  --field-radius: var(--radius-1);
  --badge-radius: var(--radius-1);
  --panel-bg: var(--bg-100);
  --panel-border: var(--line-200);
  --panel-radius: var(--radius-0);
  --panel-shadow: none;
  --panel-pad: var(--space-4);
  --panel-gap: 1px;
  --glass-filter: blur(16px) saturate(120%) brightness(0.8);
  --glass-tint: 40%;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :where([data-theme="system"]) {
    --background: #09090b;
    --foreground: #ededf0;
    --card: #0e0e11;
    --card-foreground: var(--foreground);
    --popover: var(--card);
    --popover-foreground: var(--foreground);
    --primary: #ededf0;
    --primary-foreground: #09090b;
    --primary-hover: color-mix(in oklab, var(--primary) 70%, #ffffff);
    --secondary: #16161a;
    --secondary-foreground: var(--foreground);
    --muted: #16161a;
    --muted-foreground: #a6a6b0;
    --accent: #16161a;
    --accent-foreground: var(--foreground);
    --destructive: #ef6f61;
    --destructive-foreground: var(--card);
    --border: #26262c;
    --input: #62626d;
    --ring: var(--foreground);
    --chart-1: var(--sky-ink);
    --chart-2: var(--mint-ink);
    --chart-3: var(--butter-ink);
    --chart-4: var(--lilac-ink);
    --chart-5: var(--blush-ink);
    --sidebar: var(--card);
    --sidebar-foreground: var(--foreground);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--primary-foreground);
    --sidebar-accent: var(--accent);
    --sidebar-accent-foreground: var(--accent-foreground);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--ring);
    --canvas: var(--bg-000);
    --surface: var(--bg-100);
    --surface-sunken: var(--bg-200);
    --frame: var(--bg-100);
    --on-frame: var(--fg-100);
    --on-frame-muted: var(--fg-300);
    --ink: var(--fg-100);
    --ink-muted: var(--fg-200);
    --ink-subtle: var(--fg-300);
    --line: var(--line-200);
    --line-strong: var(--line-300);
    --sky: var(--info-bg);
    --sky-ink: var(--info);
    --mint: var(--ok-bg);
    --mint-ink: var(--ok);
    --lilac: var(--signal-bg);
    --lilac-ink: var(--signal);
    --butter: var(--warn-bg);
    --butter-ink: var(--warn);
    --blush: var(--danger-bg);
    --blush-ink: var(--danger);
    --focus: var(--ring);
    --count: var(--signal);
    --on-count: var(--bg-000);
    --on-frame-success: var(--ok);
    --on-frame-danger: var(--danger);
    --scrim: rgba(0,0,0,0.62);
    --scrim-strong: var(--scrim);
    --glass: color-mix(in srgb, var(--card) 72%, transparent);
    --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
    --glass-control: color-mix(in srgb, var(--foreground) 7%, transparent);
    --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
    --glass-hover: color-mix(in srgb, var(--foreground) 9%, transparent);
    --glass-border: color-mix(in srgb, var(--foreground) 14%, transparent);
    --glass-highlight: rgba(255, 255, 255, 0.07);
    --glass-sheen: transparent;
    --ambient-base: var(--background);
    --ambient-1: color-mix(in oklab, var(--chart-1) 30%, var(--background));
    --ambient-2: color-mix(in oklab, var(--chart-4) 26%, var(--background));
    --ambient-3: color-mix(in oklab, var(--chart-2) 22%, var(--background));
    --ambient-4: color-mix(in oklab, var(--foreground) 8%, var(--background));
    --ambient-scrim: rgba(9, 9, 11, 0.55);
    --bg-000: var(--background);
    --bg-100: var(--card);
    --bg-200: var(--muted);
    --bg-300: color-mix(in oklab, var(--foreground) 5%, var(--muted));
    --fg-100: var(--foreground);
    --fg-200: var(--muted-foreground);
    --fg-300: color-mix(in oklab, var(--muted-foreground) 90%, var(--background));
    --fg-400: color-mix(in oklab, var(--muted-foreground) 57%, var(--background));
    --line-100: color-mix(in oklab, var(--border) 52%, var(--card));
    --line-200: var(--border);
    --line-300: var(--input);
    --chart-grid: var(--line-100);
    --chart-sky: var(--fg-100);
    --chart-mint: color-mix(in oklab, var(--foreground) 48%, var(--card));
    --chart-lilac: var(--fg-300);
    --chart-butter: var(--fg-200);
    --chart-blush: var(--line-300);
    --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
    --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
    --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
    --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
    --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
    --ok: #5cc28f;
    --ok-bg: rgba(92,194,143,0.12);
    --info: #7aa7f5;
    --info-bg: rgba(122,167,245,0.12);
    --warn: #d9b44a;
    --warn-bg: rgba(217,180,74,0.12);
    --danger: var(--destructive);
    --danger-bg: rgba(239,111,97,0.12);
    --signal: #f2994a;
    --signal-bg: rgba(242,153,74,0.14);
    --idle: var(--fg-300);
    --diff-add: var(--ok);
    --diff-add-bg: var(--ok-bg);
    --diff-del: var(--danger);
    --diff-del-bg: var(--danger-bg);
    --paper: #ffffff;
    --paper-ink: #111114;
    --frame-hover: var(--bg-200);
    --frame-active: var(--bg-300);
    --frame-strong: var(--bg-300);
    --on-frame-strong: var(--fg-100);
    --on-frame-warn: var(--warn);
    --on-frame-signal: var(--signal);
    --ink-hover: var(--bg-200);
    --hairline: var(--line-200);
    --media-scrim: rgba(10, 10, 10, 0.6);
    --media-ink: #ffffff;
    --media-shadow: rgba(0, 0, 0, 0.3);
    --lightbox: rgba(8, 8, 8, 0.92);
    --lightbox-ink: rgba(255, 255, 255, 0.8);
    --paper-muted: #706f6a;
    --paper-subtle: #6b6a65;
    --serp-ink: #202124;
    --serp-muted: #4d5156;
    --serp-link: #1a0dab;
    --serp-chip: #f1f3f4;
    --shadow-card: none;
    --shadow-lift: none;
    --shadow-float: 0 16px 40px rgba(0,0,0,0.55);
    --shadow-overlay: 0 16px 40px rgba(0,0,0,0.55);
    --shadow-glass: 0 12px 32px rgba(0, 0, 0, 0.5);
    --button-radius: var(--radius-1);
    --field-radius: var(--radius-1);
    --badge-radius: var(--radius-1);
    --panel-bg: var(--bg-100);
    --panel-border: var(--line-200);
    --panel-radius: var(--radius-0);
    --panel-shadow: none;
    --panel-pad: var(--space-4);
    --panel-gap: 1px;
    --glass-filter: blur(16px) saturate(120%) brightness(0.8);
    --glass-tint: 40%;
    color-scheme: dark;
  }
}
@media (prefers-color-scheme: light) {
  :where([data-theme="system"]) {
    --background: #f6f6f7;
    --foreground: #111114;
    --card: #ffffff;
    --card-foreground: var(--foreground);
    --popover: var(--card);
    --popover-foreground: var(--foreground);
    --primary: #111114;
    --primary-foreground: #ffffff;
    --primary-hover: color-mix(in oklab, var(--primary) 70%, #000000);
    --secondary: #f0f0f2;
    --secondary-foreground: var(--foreground);
    --muted: #f0f0f2;
    --muted-foreground: #4f4f58;
    --accent: #f0f0f2;
    --accent-foreground: var(--foreground);
    --destructive: #b0301f;
    --destructive-foreground: var(--card);
    --border: #dfdfe3;
    --input: #8a8a94;
    --ring: var(--foreground);
    --chart-1: var(--sky-ink);
    --chart-2: var(--mint-ink);
    --chart-3: var(--butter-ink);
    --chart-4: var(--lilac-ink);
    --chart-5: var(--blush-ink);
    --sidebar: var(--card);
    --sidebar-foreground: var(--foreground);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--primary-foreground);
    --sidebar-accent: var(--accent);
    --sidebar-accent-foreground: var(--accent-foreground);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--ring);
    --canvas: var(--bg-000);
    --surface: var(--bg-100);
    --surface-sunken: var(--bg-200);
    --frame: var(--bg-100);
    --on-frame: var(--fg-100);
    --on-frame-muted: var(--fg-300);
    --ink: var(--fg-100);
    --ink-muted: var(--fg-200);
    --ink-subtle: var(--fg-300);
    --line: var(--line-200);
    --line-strong: var(--line-300);
    --sky: var(--info-bg);
    --sky-ink: var(--info);
    --mint: var(--ok-bg);
    --mint-ink: var(--ok);
    --lilac: var(--signal-bg);
    --lilac-ink: var(--signal);
    --butter: var(--warn-bg);
    --butter-ink: var(--warn);
    --blush: var(--danger-bg);
    --blush-ink: var(--danger);
    --focus: var(--ring);
    --count: var(--signal);
    --on-count: var(--bg-000);
    --on-frame-success: var(--ok);
    --on-frame-danger: var(--danger);
    --scrim: rgba(17,17,20,0.36);
    --scrim-strong: var(--scrim);
    --glass: color-mix(in srgb, var(--card) 74%, transparent);
    --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
    --glass-control: color-mix(in srgb, var(--card) 55%, transparent);
    --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
    --glass-hover: color-mix(in srgb, var(--foreground) 7%, transparent);
    --glass-border: color-mix(in srgb, var(--foreground) 12%, transparent);
    --glass-highlight: rgba(255, 255, 255, 0.7);
    --glass-sheen: transparent;
    --ambient-base: var(--background);
    --ambient-1: color-mix(in oklab, var(--chart-1) 22%, var(--background));
    --ambient-2: color-mix(in oklab, var(--chart-4) 18%, var(--background));
    --ambient-3: color-mix(in oklab, var(--chart-2) 16%, var(--background));
    --ambient-4: color-mix(in oklab, var(--foreground) 6%, var(--background));
    --ambient-scrim: rgba(246, 246, 247, 0.4);
    --bg-000: var(--background);
    --bg-100: var(--card);
    --bg-200: var(--muted);
    --bg-300: color-mix(in oklab, var(--foreground) 3%, var(--muted));
    --fg-100: var(--foreground);
    --fg-200: var(--muted-foreground);
    --fg-300: color-mix(in oklab, var(--muted-foreground) 92%, var(--background));
    --fg-400: color-mix(in oklab, var(--muted-foreground) 47%, var(--background));
    --line-100: color-mix(in oklab, var(--border) 59%, var(--card));
    --line-200: var(--border);
    --line-300: var(--input);
    --chart-grid: var(--line-100);
    --chart-sky: var(--fg-100);
    --chart-mint: color-mix(in oklab, var(--foreground) 38%, var(--card));
    --chart-lilac: var(--fg-300);
    --chart-butter: var(--fg-200);
    --chart-blush: var(--line-300);
    --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
    --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
    --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
    --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
    --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
    --ok: #177447;
    --ok-bg: rgba(23,116,71,0.09);
    --info: #2856b0;
    --info-bg: rgba(40,86,176,0.08);
    --warn: #765600;
    --warn-bg: rgba(118,86,0,0.09);
    --danger: var(--destructive);
    --danger-bg: rgba(176,48,31,0.08);
    --signal: #9a4807;
    --signal-bg: rgba(154,72,7,0.09);
    --idle: var(--fg-300);
    --diff-add: var(--ok);
    --diff-add-bg: var(--ok-bg);
    --diff-del: var(--danger);
    --diff-del-bg: var(--danger-bg);
    --paper: #ffffff;
    --paper-ink: #111114;
    --frame-hover: var(--bg-200);
    --frame-active: var(--bg-300);
    --frame-strong: var(--bg-300);
    --on-frame-strong: var(--fg-100);
    --on-frame-warn: var(--warn);
    --on-frame-signal: var(--signal);
    --ink-hover: var(--bg-200);
    --hairline: var(--line-200);
    --media-scrim: rgba(10, 10, 10, 0.6);
    --media-ink: #ffffff;
    --media-shadow: rgba(0, 0, 0, 0.3);
    --lightbox: rgba(8, 8, 8, 0.92);
    --lightbox-ink: rgba(255, 255, 255, 0.8);
    --paper-muted: #706f6a;
    --paper-subtle: #6b6a65;
    --serp-ink: #202124;
    --serp-muted: #4d5156;
    --serp-link: #1a0dab;
    --serp-chip: #f1f3f4;
    --shadow-card: none;
    --shadow-lift: none;
    --shadow-float: 0 16px 40px rgba(17,17,20,0.12);
    --shadow-overlay: 0 16px 40px rgba(17,17,20,0.12);
    --shadow-glass: 0 8px 24px rgba(17, 17, 20, 0.1);
    --button-radius: var(--radius-1);
    --field-radius: var(--radius-1);
    --badge-radius: var(--radius-1);
    --panel-bg: var(--bg-100);
    --panel-border: var(--line-200);
    --panel-radius: var(--radius-0);
    --panel-shadow: none;
    --panel-pad: var(--space-4);
    --panel-gap: 1px;
    --glass-filter: blur(16px) saturate(130%) brightness(1.04);
    --glass-tint: 40%;
    color-scheme: light;
  }
}
:where([data-theme="dark"], .dark) {
  --background: #09090b;
  --foreground: #ededf0;
  --card: #0e0e11;
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--foreground);
  --primary: #ededf0;
  --primary-foreground: #09090b;
  --primary-hover: color-mix(in oklab, var(--primary) 70%, #ffffff);
  --secondary: #16161a;
  --secondary-foreground: var(--foreground);
  --muted: #16161a;
  --muted-foreground: #a6a6b0;
  --accent: #16161a;
  --accent-foreground: var(--foreground);
  --destructive: #ef6f61;
  --destructive-foreground: var(--card);
  --border: #26262c;
  --input: #62626d;
  --ring: var(--foreground);
  --chart-1: var(--sky-ink);
  --chart-2: var(--mint-ink);
  --chart-3: var(--butter-ink);
  --chart-4: var(--lilac-ink);
  --chart-5: var(--blush-ink);
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--accent);
  --sidebar-accent-foreground: var(--accent-foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
  --canvas: var(--bg-000);
  --surface: var(--bg-100);
  --surface-sunken: var(--bg-200);
  --frame: var(--bg-100);
  --on-frame: var(--fg-100);
  --on-frame-muted: var(--fg-300);
  --ink: var(--fg-100);
  --ink-muted: var(--fg-200);
  --ink-subtle: var(--fg-300);
  --line: var(--line-200);
  --line-strong: var(--line-300);
  --sky: var(--info-bg);
  --sky-ink: var(--info);
  --mint: var(--ok-bg);
  --mint-ink: var(--ok);
  --lilac: var(--signal-bg);
  --lilac-ink: var(--signal);
  --butter: var(--warn-bg);
  --butter-ink: var(--warn);
  --blush: var(--danger-bg);
  --blush-ink: var(--danger);
  --focus: var(--ring);
  --count: var(--signal);
  --on-count: var(--bg-000);
  --on-frame-success: var(--ok);
  --on-frame-danger: var(--danger);
  --scrim: rgba(0,0,0,0.62);
  --scrim-strong: var(--scrim);
  --glass: color-mix(in srgb, var(--card) 72%, transparent);
  --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
  --glass-control: color-mix(in srgb, var(--foreground) 7%, transparent);
  --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
  --glass-hover: color-mix(in srgb, var(--foreground) 9%, transparent);
  --glass-border: color-mix(in srgb, var(--foreground) 14%, transparent);
  --glass-highlight: rgba(255, 255, 255, 0.07);
  --glass-sheen: transparent;
  --ambient-base: var(--background);
  --ambient-1: color-mix(in oklab, var(--chart-1) 30%, var(--background));
  --ambient-2: color-mix(in oklab, var(--chart-4) 26%, var(--background));
  --ambient-3: color-mix(in oklab, var(--chart-2) 22%, var(--background));
  --ambient-4: color-mix(in oklab, var(--foreground) 8%, var(--background));
  --ambient-scrim: rgba(9, 9, 11, 0.55);
  --bg-000: var(--background);
  --bg-100: var(--card);
  --bg-200: var(--muted);
  --bg-300: color-mix(in oklab, var(--foreground) 5%, var(--muted));
  --fg-100: var(--foreground);
  --fg-200: var(--muted-foreground);
  --fg-300: color-mix(in oklab, var(--muted-foreground) 90%, var(--background));
  --fg-400: color-mix(in oklab, var(--muted-foreground) 57%, var(--background));
  --line-100: color-mix(in oklab, var(--border) 52%, var(--card));
  --line-200: var(--border);
  --line-300: var(--input);
  --chart-grid: var(--line-100);
  --chart-sky: var(--fg-100);
  --chart-mint: color-mix(in oklab, var(--foreground) 48%, var(--card));
  --chart-lilac: var(--fg-300);
  --chart-butter: var(--fg-200);
  --chart-blush: var(--line-300);
  --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
  --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
  --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
  --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
  --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
  --ok: #5cc28f;
  --ok-bg: rgba(92,194,143,0.12);
  --info: #7aa7f5;
  --info-bg: rgba(122,167,245,0.12);
  --warn: #d9b44a;
  --warn-bg: rgba(217,180,74,0.12);
  --danger: var(--destructive);
  --danger-bg: rgba(239,111,97,0.12);
  --signal: #f2994a;
  --signal-bg: rgba(242,153,74,0.14);
  --idle: var(--fg-300);
  --diff-add: var(--ok);
  --diff-add-bg: var(--ok-bg);
  --diff-del: var(--danger);
  --diff-del-bg: var(--danger-bg);
  --paper: #ffffff;
  --paper-ink: #111114;
  --frame-hover: var(--bg-200);
  --frame-active: var(--bg-300);
  --frame-strong: var(--bg-300);
  --on-frame-strong: var(--fg-100);
  --on-frame-warn: var(--warn);
  --on-frame-signal: var(--signal);
  --ink-hover: var(--bg-200);
  --hairline: var(--line-200);
  --media-scrim: rgba(10, 10, 10, 0.6);
  --media-ink: #ffffff;
  --media-shadow: rgba(0, 0, 0, 0.3);
  --lightbox: rgba(8, 8, 8, 0.92);
  --lightbox-ink: rgba(255, 255, 255, 0.8);
  --paper-muted: #706f6a;
  --paper-subtle: #6b6a65;
  --serp-ink: #202124;
  --serp-muted: #4d5156;
  --serp-link: #1a0dab;
  --serp-chip: #f1f3f4;
  --shadow-card: none;
  --shadow-lift: none;
  --shadow-float: 0 16px 40px rgba(0,0,0,0.55);
  --shadow-overlay: 0 16px 40px rgba(0,0,0,0.55);
  --shadow-glass: 0 12px 32px rgba(0, 0, 0, 0.5);
  --button-radius: var(--radius-1);
  --field-radius: var(--radius-1);
  --badge-radius: var(--radius-1);
  --panel-bg: var(--bg-100);
  --panel-border: var(--line-200);
  --panel-radius: var(--radius-0);
  --panel-shadow: none;
  --panel-pad: var(--space-4);
  --panel-gap: 1px;
  --glass-filter: blur(16px) saturate(120%) brightness(0.8);
  --glass-tint: 40%;
  color-scheme: dark;
}
:where([data-theme="light"], .light) {
  --background: #f6f6f7;
  --foreground: #111114;
  --card: #ffffff;
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--foreground);
  --primary: #111114;
  --primary-foreground: #ffffff;
  --primary-hover: color-mix(in oklab, var(--primary) 70%, #000000);
  --secondary: #f0f0f2;
  --secondary-foreground: var(--foreground);
  --muted: #f0f0f2;
  --muted-foreground: #4f4f58;
  --accent: #f0f0f2;
  --accent-foreground: var(--foreground);
  --destructive: #b0301f;
  --destructive-foreground: var(--card);
  --border: #dfdfe3;
  --input: #8a8a94;
  --ring: var(--foreground);
  --chart-1: var(--sky-ink);
  --chart-2: var(--mint-ink);
  --chart-3: var(--butter-ink);
  --chart-4: var(--lilac-ink);
  --chart-5: var(--blush-ink);
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--accent);
  --sidebar-accent-foreground: var(--accent-foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
  --canvas: var(--bg-000);
  --surface: var(--bg-100);
  --surface-sunken: var(--bg-200);
  --frame: var(--bg-100);
  --on-frame: var(--fg-100);
  --on-frame-muted: var(--fg-300);
  --ink: var(--fg-100);
  --ink-muted: var(--fg-200);
  --ink-subtle: var(--fg-300);
  --line: var(--line-200);
  --line-strong: var(--line-300);
  --sky: var(--info-bg);
  --sky-ink: var(--info);
  --mint: var(--ok-bg);
  --mint-ink: var(--ok);
  --lilac: var(--signal-bg);
  --lilac-ink: var(--signal);
  --butter: var(--warn-bg);
  --butter-ink: var(--warn);
  --blush: var(--danger-bg);
  --blush-ink: var(--danger);
  --focus: var(--ring);
  --count: var(--signal);
  --on-count: var(--bg-000);
  --on-frame-success: var(--ok);
  --on-frame-danger: var(--danger);
  --scrim: rgba(17,17,20,0.36);
  --scrim-strong: var(--scrim);
  --glass: color-mix(in srgb, var(--card) 74%, transparent);
  --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
  --glass-control: color-mix(in srgb, var(--card) 55%, transparent);
  --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
  --glass-hover: color-mix(in srgb, var(--foreground) 7%, transparent);
  --glass-border: color-mix(in srgb, var(--foreground) 12%, transparent);
  --glass-highlight: rgba(255, 255, 255, 0.7);
  --glass-sheen: transparent;
  --ambient-base: var(--background);
  --ambient-1: color-mix(in oklab, var(--chart-1) 22%, var(--background));
  --ambient-2: color-mix(in oklab, var(--chart-4) 18%, var(--background));
  --ambient-3: color-mix(in oklab, var(--chart-2) 16%, var(--background));
  --ambient-4: color-mix(in oklab, var(--foreground) 6%, var(--background));
  --ambient-scrim: rgba(246, 246, 247, 0.4);
  --bg-000: var(--background);
  --bg-100: var(--card);
  --bg-200: var(--muted);
  --bg-300: color-mix(in oklab, var(--foreground) 3%, var(--muted));
  --fg-100: var(--foreground);
  --fg-200: var(--muted-foreground);
  --fg-300: color-mix(in oklab, var(--muted-foreground) 92%, var(--background));
  --fg-400: color-mix(in oklab, var(--muted-foreground) 47%, var(--background));
  --line-100: color-mix(in oklab, var(--border) 59%, var(--card));
  --line-200: var(--border);
  --line-300: var(--input);
  --chart-grid: var(--line-100);
  --chart-sky: var(--fg-100);
  --chart-mint: color-mix(in oklab, var(--foreground) 38%, var(--card));
  --chart-lilac: var(--fg-300);
  --chart-butter: var(--fg-200);
  --chart-blush: var(--line-300);
  --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
  --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
  --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
  --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
  --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
  --ok: #177447;
  --ok-bg: rgba(23,116,71,0.09);
  --info: #2856b0;
  --info-bg: rgba(40,86,176,0.08);
  --warn: #765600;
  --warn-bg: rgba(118,86,0,0.09);
  --danger: var(--destructive);
  --danger-bg: rgba(176,48,31,0.08);
  --signal: #9a4807;
  --signal-bg: rgba(154,72,7,0.09);
  --idle: var(--fg-300);
  --diff-add: var(--ok);
  --diff-add-bg: var(--ok-bg);
  --diff-del: var(--danger);
  --diff-del-bg: var(--danger-bg);
  --paper: #ffffff;
  --paper-ink: #111114;
  --frame-hover: var(--bg-200);
  --frame-active: var(--bg-300);
  --frame-strong: var(--bg-300);
  --on-frame-strong: var(--fg-100);
  --on-frame-warn: var(--warn);
  --on-frame-signal: var(--signal);
  --ink-hover: var(--bg-200);
  --hairline: var(--line-200);
  --media-scrim: rgba(10, 10, 10, 0.6);
  --media-ink: #ffffff;
  --media-shadow: rgba(0, 0, 0, 0.3);
  --lightbox: rgba(8, 8, 8, 0.92);
  --lightbox-ink: rgba(255, 255, 255, 0.8);
  --paper-muted: #706f6a;
  --paper-subtle: #6b6a65;
  --serp-ink: #202124;
  --serp-muted: #4d5156;
  --serp-link: #1a0dab;
  --serp-chip: #f1f3f4;
  --shadow-card: none;
  --shadow-lift: none;
  --shadow-float: 0 16px 40px rgba(17,17,20,0.12);
  --shadow-overlay: 0 16px 40px rgba(17,17,20,0.12);
  --shadow-glass: 0 8px 24px rgba(17, 17, 20, 0.1);
  --button-radius: var(--radius-1);
  --field-radius: var(--radius-1);
  --badge-radius: var(--radius-1);
  --panel-bg: var(--bg-100);
  --panel-border: var(--line-200);
  --panel-radius: var(--radius-0);
  --panel-shadow: none;
  --panel-pad: var(--space-4);
  --panel-gap: 1px;
  --glass-filter: blur(16px) saturate(130%) brightness(1.04);
  --glass-tint: 40%;
  color-scheme: light;
}
@media (pointer: coarse) {
  :where(:root:not([data-density])) {
    --density-control: var(--control-comfy);
    --density-row: var(--row-comfy);
    --density-pad-x: var(--space-4);
    --density-font-size: 14px;
    --density-line-height: 20px;
  }
}
:where([data-density="compact"]) {
  --density-control: var(--control-dense);
  --density-row: var(--row-dense);
  --density-pad-x: var(--space-3);
  --density-font-size: 13px;
  --density-line-height: 18px;
}
:where([data-density="comfortable"]) {
  --density-control: var(--control-comfy);
  --density-row: var(--row-comfy);
  --density-pad-x: var(--space-4);
  --density-font-size: 14px;
  --density-line-height: 20px;
}
:where([data-motion="expressive"]) {
  --dur-enter: 360ms;
  --dur-slow: 560ms;
  --dur-exit: 140ms;
  --stagger-step: 45ms;
  --motion-time: 1;
  --motion-travel: 0.8;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-blur: 0px;
}
:where([data-motion="off"]) {
  --duration-fast: 0ms;
  --duration-base: 0ms;
  --dur-fast: 0ms;
  --dur-base: 0ms;
  --dur-enter: 0ms;
  --dur-slow: 0ms;
  --dur-exit: 0ms;
  --stagger-step: 0ms;
  --motion-time: 0;
  --motion-travel: 0;
  --motion-blur: 0px;
}
@media (prefers-reduced-motion: reduce) {
  :where(:root, [data-motion], [data-theme]) {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-enter: 0ms;
    --dur-slow: 0ms;
    --dur-exit: 0ms;
    --stagger-step: 0ms;
    --motion-time: 0;
    --motion-travel: 0;
    --motion-blur: 0px;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :where(:root, [data-theme], .dark, .light) {
    --glass: var(--glass-strong);
  }
}
@media (prefers-contrast: more) {
  :where(:root, [data-theme], .dark, .light) {
    --glass: var(--glass-strong);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :where(:root, [data-theme], .dark, .light) {
    --glass: var(--card);
    --glass-strong: var(--popover);
    --glass-sheen: transparent;
    --glass-filter: none;
  }
}
@media (forced-colors: active) {
  :where(:root, [data-theme], .dark, .light) {
    --glass: var(--card);
    --glass-strong: var(--popover);
    --glass-sheen: transparent;
    --glass-filter: none;
  }
}

/* 01-foundation.css */
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
/* Halo components, ported from reference/halo/source/halo.css (ha- → tf-). Every value comes from the tokens. */
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
/* Boxes are sized like in the reference, whatever the host page sets globally (e.g. a
   border-box reset): content-box unless a component says otherwise, and border-box for form
   controls, as browsers do by default */
:is([class^="tf-"], [class*=" tf-"]):where(:not(button, input, select, textarea)) {
  box-sizing: content-box;
}
:is([class^="tf-"], [class*=" tf-"]):where(button, input, select, textarea) {
  box-sizing: border-box;
}
.tf-pad {
  padding: var(--space-5);
}
.tf-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.tf-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tf-grid {
  display: grid;
  gap: var(--space-4);
}
.tf-ico {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
}
:where(
  .tf-btn,
  .tf-iconbtn,
  .tf-chip,
  .tf-tab,
  .tf-input,
  .tf-switch,
  .tf-dock-btn,
  .tf-rail-btn,
  .tf-nav-item,
  .tf-card
):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Button */
.tf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--density-control);
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 0;
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.12s ease,
    background-color 0.12s ease;
}
.tf-btn:active {
  transform: none;
}
.tf-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.tf-btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.tf-btn-secondary {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.tf-btn-soft {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.tf-btn-ghost {
  background: transparent;
  color: var(--ink);
}
.tf-btn-ghost:hover,
.tf-btn-soft:hover {
  background: var(--line);
}
.tf-btn-danger {
  background: var(--blush);
  color: var(--ink);
}
.tf-btn-sm {
  height: var(--control-sm);
  padding: 0 16px;
}

/* IconButton */
.tf-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: var(--density-control);
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.12s ease,
    background-color 0.12s ease;
}
.tf-iconbtn:active {
  transform: none;
}
.tf-iconbtn-soft {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.tf-iconbtn-soft:hover {
  background: var(--line);
}
.tf-iconbtn-solid {
  background: var(--primary);
  color: var(--primary-foreground);
}
.tf-iconbtn-outline {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.tf-iconbtn-sm {
  width: 32px;
  height: var(--control-sm);
}
.tf-iconbtn-sm .tf-ico {
  width: 14px;
  height: 14px;
}
.tf-iconbtn-lg {
  width: 48px;
  height: 48px;
}

/* Chip (filter) */
.tf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-sm);
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-chip:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-chip[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
}
.tf-chip-count {
  font-weight: 600;
  opacity: 0.7;
}

/* Badge (status) */
.tf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font: 500 12px/16px var(--font-sans);
  color: var(--ink);
  background: var(--surface-sunken);
}
.tf-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}
.tf-badge-success {
  background: var(--mint);
}
.tf-badge-success .tf-badge-dot {
  color: var(--mint-ink);
}
.tf-badge-info {
  background: var(--sky);
}
.tf-badge-info .tf-badge-dot {
  color: var(--sky-ink);
}
.tf-badge-warning {
  background: var(--butter);
}
.tf-badge-warning .tf-badge-dot {
  color: var(--butter-ink);
}
.tf-badge-danger {
  background: var(--blush);
}
.tf-badge-danger .tf-badge-dot {
  color: var(--blush-ink);
}
.tf-badge-highlight {
  background: var(--lilac);
}
.tf-badge-highlight .tf-badge-dot {
  color: var(--lilac-ink);
}
.tf-badge-neutral .tf-badge-dot {
  color: var(--ink-muted);
}

/* Tint icon (round coloured mark) */
.tf-tinticon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: var(--control-sm);
  border-radius: var(--radius-pill);
  flex: none;
}
.tf-tinticon .tf-ico {
  width: 15px;
  height: 15px;
}
.tf-t-sky {
  background: var(--sky);
  color: var(--sky-ink);
}
.tf-t-mint {
  background: var(--mint);
  color: var(--mint-ink);
}
.tf-t-lilac {
  background: var(--lilac);
  color: var(--lilac-ink);
}
.tf-t-butter {
  background: var(--butter);
  color: var(--butter-ink);
}
.tf-t-blush {
  background: var(--blush);
  color: var(--blush-ink);
}
.tf-t-plain {
  background: var(--surface-sunken);
  color: var(--ink);
}
.tf-t-ink {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Avatar */
.tf-avatar {
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-1);
  background: var(--av, var(--lilac));
  font: 600 12px/1 var(--font-sans);
  color: var(--ink);
  overflow: hidden;
  flex: none;
}
.tf-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tf-avatar-stack {
  display: inline-flex;
}
.tf-avatar-stack .tf-avatar {
  box-shadow: 0 0 0 2px var(--surface);
}
.tf-avatar-stack .tf-avatar + .tf-avatar {
  margin-left: -8px;
}

/* Inputs */
.tf-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tf-field-label {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink);
}
.tf-field-hint {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-field-error {
  font: 500 12px/16px var(--font-sans);
  color: var(--blush-ink);
}
.tf-input {
  height: var(--density-control);
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 500 14px/20px var(--font-sans);
  width: 100%;
  box-sizing: border-box;
}
.tf-input::placeholder {
  color: var(--ink-subtle);
}
.tf-input {
  transition:
    box-shadow var(--dur-fast, 0.12s) ease,
    background-color var(--dur-fast, 0.12s) ease;
}
.tf-input:hover:not(:disabled):not(:focus) {
  box-shadow: inset 0 0 0 1px var(--ink-muted);
}
.tf-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.tf-input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tf-search:hover {
  background: var(--line);
}
.tf-input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--blush-ink);
}
textarea.tf-input {
  height: auto;
  min-height: 96px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  resize: vertical;
}
select.tf-input {
  appearance: none;
  padding-right: 40px;
  /* the reference's chevron (8×4 px, 1.5px stroke, 18px from the edge) drawn with two gradient lines */
  background-image:
    linear-gradient(
      45deg,
      transparent calc(50% - 0.8px),
      var(--ink-subtle) calc(50% - 0.8px),
      var(--ink-subtle) calc(50% + 0.8px),
      transparent calc(50% + 0.8px)
    ),
    linear-gradient(
      -45deg,
      transparent calc(50% - 0.8px),
      var(--ink-subtle) calc(50% - 0.8px),
      var(--ink-subtle) calc(50% + 0.8px),
      transparent calc(50% + 0.8px)
    );
  background-size:
    5px 5px,
    5px 5px;
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 18px) 50%;
  background-repeat: no-repeat;
}
.tf-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--density-control);
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  min-width: min(220px, 100%);
  box-sizing: border-box;
}
.tf-search input {
  border: 0;
  background: transparent;
  outline: none;
  font: 500 14px/20px var(--font-sans);
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.tf-search input::placeholder {
  color: var(--ink-subtle);
}
.tf-search:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-kbd {
  font: 500 11px/1 var(--font-sans);
  color: var(--ink-muted);
  background: var(--surface);
  padding: 4px 6px;
  border-radius: var(--radius-1);
}

/* Checkbox & Switch */
.tf-check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 500 14px/20px var(--font-sans);
  cursor: pointer;
}
.tf-switch {
  appearance: none;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  position: relative;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.tf-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-1);
  background: var(--surface);
  transition: transform 0.15s ease;
}
.tf-switch:checked {
  background: var(--primary);
}
.tf-switch:checked::after {
  transform: translateX(16px);
  background: var(--primary-foreground);
}

/* Tabs (segmented) */
.tf-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.tf-tab {
  height: var(--control-sm);
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
}
.tf-tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-tabs-block {
  display: flex;
}
.tf-tabs-block .tf-tab {
  flex: 1 1 0;
}

/* StatTile */
.tf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 84px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--ink);
  position: relative;
  box-sizing: border-box;
}
.tf-stat-value {
  font: 600 24px/28px var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tf-stat-label {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink);
  opacity: 0.78;
}
.tf-stat-delta {
  font: 500 11px/14px var(--font-sans);
  margin-top: 0;
}
.tf-stat-placeholder {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  background-image: none;
}
.tf-stat-placeholder {
  border: 1.5px dashed var(--line-strong);
  box-shadow: none;
}
.tf-bg-sky {
  --tint: var(--sky);
  background: var(--sky);
}
.tf-bg-mint {
  --tint: var(--mint);
  background: var(--mint);
}
.tf-bg-lilac {
  --tint: var(--lilac);
  background: var(--lilac);
}
.tf-bg-butter {
  --tint: var(--butter);
  background: var(--butter);
}
.tf-bg-blush {
  --tint: var(--blush);
  background: var(--blush);
}
.tf-bg-surface {
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}

/* Card */
.tf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
  color: var(--ink);
  min-height: 168px;
  box-sizing: border-box;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
.tf-card-interactive {
  cursor: pointer;
}
.tf-card-interactive:hover {
  box-shadow: 0 0 0 var(--line-width) var(--line-strong);
  transform: none;
}
.tf-card-title {
  font: 600 14px/20px var(--font-sans);
  letter-spacing: -0.01em;
  margin: 0;
  padding-right: 40px;
}
.tf-card-desc {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
  margin: 0;
}
.tf-card.tf-bg-sky .tf-card-desc,
.tf-card.tf-bg-mint .tf-card-desc,
.tf-card.tf-bg-lilac .tf-card-desc,
.tf-card.tf-bg-butter .tf-card-desc,
.tf-card.tf-bg-blush .tf-card-desc {
  color: var(--ink);
  opacity: 0.78;
}
.tf-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-card-corner {
  position: absolute;
  top: 16px;
  right: 16px;
}
.tf-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* EventCard */
.tf-event {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  color: var(--ink);
}
.tf-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 13px/18px var(--font-sans);
}
.tf-event-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tf-event-date {
  font-weight: 500;
  opacity: 0.78;
}
.tf-event-body {
  font: 500 13px/18px var(--font-sans);
  margin: 0;
}
.tf-event-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--density-control);
  padding: 0 4px 0 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font: 500 12px/16px var(--font-sans);
}
.tf-event-bar .tf-row {
  gap: 4px;
}

/* Panel */
.tf-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.tf-panel-title {
  font: 600 18px/24px var(--font-sans);
  letter-spacing: -0.01em;
  margin: 0;
}
.tf-panel-sub {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  margin: 4px 0 0;
}

/* PageHeader */
.tf-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.tf-header-title {
  font: 600 22px/28px var(--font-sans);
  letter-spacing: -0.015em;
  margin: 0;
}
.tf-header-sub {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
  margin: 4px 0 0;
}

/* TopBar */
.tf-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--topbar-h);
  padding: 0 var(--space-6);
  background: var(--frame);
  color: var(--on-frame);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.tf-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 var(--font-sans);
  letter-spacing: -0.02em;
}
.tf-brand-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--on-frame-success);
}
.tf-brand-tag {
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-frame-muted);
}
.tf-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
  /* many areas scroll inside the bar instead of pushing the profile out of the frame */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tf-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--density-control);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--on-frame-muted);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
  position: relative;
}
.tf-nav-item:hover {
  color: var(--on-frame);
}
.tf-nav-item[aria-current="page"] {
  background: var(--frame-active);
  color: var(--on-frame);
}
.tf-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--density-control);
  padding: 0 12px 0 4px;
}
.tf-user-name {
  font: 500 13px/18px var(--font-sans);
}
.tf-user-mail {
  font: 500 11px/14px var(--font-sans);
  color: var(--on-frame-muted);
}

/* SideRail */
.tf-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  width: 44px;
}
.tf-rail-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.tf-rail-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: var(--density-control);
  border-radius: var(--radius-1);
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.tf-rail-btn:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
/* expanded: names next to the icons (the sheet's first column follows the rail's width) */
.tf-rail {
  transition: width var(--dur-base) var(--ease-out);
}
.tf-rail.expanded {
  width: 200px;
}
.tf-rail.expanded .tf-rail-group {
  align-items: stretch;
}
.tf-rail.expanded .tf-rail-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
}
.tf-rail-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 13px/18px var(--font-sans);
}
.tf-rail.expanded .tf-dotcount {
  position: static;
  margin-left: auto;
}
.tf-rail-btn[aria-current="page"] {
  background: var(--primary);
  color: var(--primary-foreground);
}
.tf-dotcount {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  background: var(--count);
  color: var(--on-count);
  font: 600 10px/16px var(--font-sans);
  text-align: center;
}

/* Dock */
.tf-dock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-pill);
  background: var(--frame);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
}
.tf-dock-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: var(--density-control);
  border-radius: var(--radius-1);
  border: 0;
  cursor: pointer;
  color: var(--ink);
  transition: transform 0.12s ease;
}
.tf-dock-btn:hover {
  transform: none;
}
.tf-dock-btn.tf-t-plain {
  background: var(--frame-active);
  color: var(--on-frame);
}

/* Table */
.tf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: 500 13px/18px var(--font-sans);
  overflow-wrap: normal;
}
.tf-table th {
  text-align: left;
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.tf-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  height: 52px;
}
.tf-table tr:last-child td {
  border-bottom: 0;
}
.tf-table tbody tr:hover td {
  background: var(--canvas);
}
.tf-table .tf-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Progress */
.tf-progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}
.tf-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}
.tf-progress-sky > span {
  background: var(--sky-ink);
}
.tf-progress-mint > span {
  background: var(--mint-ink);
}
.tf-progress-butter > span {
  background: var(--butter-ink);
}

/* Toast */
.tf-toast {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--frame);
  color: var(--on-frame);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
  font: 500 13px/18px var(--font-sans);
}

/* EmptyState */
.tf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--line-strong);
  text-align: center;
}
.tf-empty-title {
  font: 600 14px/20px var(--font-sans);
  margin: 0;
}
.tf-empty-text {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
  margin: 0;
  max-width: 320px;
}

/* Shell */
.tf-shell {
  background: var(--frame);
  border-radius: var(--radius-xl);
  padding: 0 8px 8px;
}
.tf-shell .tf-topbar {
  padding: 0 var(--space-6);
}
/* AppShell with navigation="sidebar": the labelled sidebar on the frame, the sheet beside it */
.tf-shell.tf-shell-sidebar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  padding: 8px;
}
.tf-shell-tools {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.tf-sheet.tf-sheet-norail {
  grid-template-columns: minmax(0, 1fr) 300px;
}
.tf-sheet.tf-sheet-norail.tf-sheet-2 {
  grid-template-columns: minmax(0, 1fr);
}
.tf-sheet {
  display: grid;
  grid-template-columns: auto 1fr 300px;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--canvas);
  border-radius: 0;
  position: relative;
}

/* ───────────── Motion ───────────── */
@keyframes tf-rise {
  from {
    opacity: 0;
    transform: translateY(calc(14px * var(--motion-travel))) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tf-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes tf-drop {
  from {
    opacity: 0;
    transform: translateY(calc(-10px * var(--motion-travel)));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tf-slide-in {
  from {
    opacity: 0;
    transform: translateX(calc(24px * var(--motion-travel)));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tf-slide-up {
  from {
    opacity: 0;
    transform: translate(calc(0px * var(--motion-travel)), calc(28px * var(--motion-travel)))
      scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tf-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes tf-grow-y {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes tf-grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes tf-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes tf-shimmer {
  from {
    background-position: -320px 0;
  }
  to {
    background-position: 320px 0;
  }
}
@keyframes tf-pulse {
  0% {
    box-shadow: 0 0 0 0 currentColor;
  }
  70% {
    box-shadow: 0 0 0 6px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.tf-in {
  --enter-delay: var(--d, 0ms);
  animation: tf-rise var(--dur-enter) var(--ease-out) both;
  animation-delay: var(--enter-delay);
}
.tf-stagger > * {
  animation: tf-rise var(--dur-enter) var(--ease-out) both;
}
.tf-stagger > :nth-child(1) {
  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 0);
  animation-delay: var(--enter-delay);
}
.tf-stagger > :nth-child(2) {
  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 1);
  animation-delay: var(--enter-delay);
}
.tf-stagger > :nth-child(3) {
  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 2);
  animation-delay: var(--enter-delay);
}
.tf-stagger > :nth-child(4) {
  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 3);
  animation-delay: var(--enter-delay);
}
.tf-stagger > :nth-child(5) {
  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 4);
  animation-delay: var(--enter-delay);
}
.tf-stagger > :nth-child(6) {
  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 5);
  animation-delay: var(--enter-delay);
}
.tf-stagger > :nth-child(7) {
  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 6);
  animation-delay: var(--enter-delay);
}
.tf-stagger > :nth-child(8) {
  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 7);
  animation-delay: var(--enter-delay);
}
.tf-stagger > :nth-child(9) {
  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 8);
  animation-delay: var(--enter-delay);
}
.tf-stagger > :nth-child(10) {
  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 9);
  animation-delay: var(--enter-delay);
}
.tf-stagger > :nth-child(11) {
  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 10);
  animation-delay: var(--enter-delay);
}
.tf-stagger > :nth-child(n + 12) {
  --enter-delay: calc(var(--base, 0ms) + var(--stagger-step) * 11);
  animation-delay: var(--enter-delay);
}
.tf-topbar {
  animation: tf-drop var(--dur-enter) var(--ease-out) both;
}
.tf-sheet {
  animation: tf-fade var(--dur-enter) var(--ease-out) both;
}
.tf-panel.tf-side {
  animation: tf-slide-in var(--dur-enter) var(--ease-out) both;
  animation-delay: calc(160ms * var(--motion-time));
}
.tf-dock {
  animation: tf-slide-up var(--dur-enter) var(--ease-spring) both;
  animation-delay: calc(420ms * var(--motion-time));
}
.tf-dock .tf-dock-btn {
  animation: tf-pop var(--dur-base) var(--ease-spring) both;
}
.tf-dock .tf-dock-btn:nth-child(1) {
  animation-delay: calc(520ms * var(--motion-time));
}
.tf-dock .tf-dock-btn:nth-child(2) {
  animation-delay: calc(570ms * var(--motion-time));
}
.tf-dock .tf-dock-btn:nth-child(3) {
  animation-delay: calc(620ms * var(--motion-time));
}
.tf-dock .tf-dock-btn:nth-child(4) {
  animation-delay: calc(670ms * var(--motion-time));
}
.tf-dock .tf-dock-btn:nth-child(5) {
  animation-delay: calc(720ms * var(--motion-time));
}
.tf-dock .tf-dock-btn:nth-child(n + 6) {
  animation-delay: calc(770ms * var(--motion-time));
}
.tf-rail-btn {
  animation: tf-pop var(--dur-base) var(--ease-spring) both;
}
.tf-toast {
  animation: tf-slide-up var(--dur-base) var(--ease-spring) both;
}
.tf-badge-pop {
  animation: tf-pop var(--dur-base) var(--ease-spring) both;
}
.tf-badge-live .tf-badge-dot {
  animation: tf-pulse 1.8s ease-out infinite;
}
.tf-card,
.tf-btn,
.tf-iconbtn,
.tf-chip,
.tf-tab,
.tf-nav-item,
.tf-rail-btn,
.tf-dock-btn,
.tf-row-item {
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}
.tf-card {
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.tf-card-interactive:active {
  transform: none;
}
.tf-progress > span {
  transform-origin: left;
  animation: tf-grow-x var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--enter-delay, 0ms) + calc(200ms * var(--motion-time)));
}

/* Sliding tab indicator */
.tf-tabs {
  position: relative;
}
.tf-tab {
  position: relative;
  z-index: 1;
  transition: color var(--dur-base) var(--ease-in-out);
}
.tf-tab[aria-selected="true"] {
  background: transparent;
  box-shadow: none;
}
.tf-tabs-ind {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
  transition:
    transform var(--dur-base) var(--ease-in-out),
    width var(--dur-base) var(--ease-in-out);
}
.tf-switch,
.tf-switch::after {
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-in-out);
}

/* Skeleton */
.tf-skel {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(
      90deg,
      var(--surface-sunken) 0,
      var(--line) 40%,
      var(--surface-sunken) 80%
    )
    var(--surface-sunken);
  background-size: 640px 100%;
  animation: tf-shimmer 1.3s linear infinite;
}
.tf-skel-text {
  height: 12px;
  border-radius: var(--radius-pill);
}
.tf-skel-title {
  height: 18px;
  width: 60%;
  border-radius: var(--radius-pill);
}
.tf-skel-circle {
  border-radius: var(--radius-1);
}

/* Charts */
.tf-chart {
  display: block;
  width: 100%;
  overflow: visible;
}
.tf-chart text {
  font: 500 11px var(--font-sans);
  fill: var(--ink-muted);
}
.tf-chart .grid {
  stroke: var(--line);
  stroke-width: 1;
}
.tf-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: tf-grow-y var(--dur-slow) var(--ease-out) both;
  animation-delay: var(--enter-delay, 0ms);
}
.tf-bar-ink {
  fill: var(--primary);
}
.tf-bar-sky {
  fill: var(--chart-sky);
}
.tf-bar-mint {
  fill: var(--chart-mint);
}
.tf-bar-lilac {
  fill: var(--chart-lilac);
}
.tf-bar-butter {
  fill: var(--chart-butter);
}
.tf-bar-blush {
  fill: var(--chart-blush);
}
.tf-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tf-draw var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(var(--enter-delay, 0ms) + calc(150ms * var(--motion-time)));
}
.tf-line-ink {
  stroke: var(--primary);
}
.tf-line-sky {
  stroke: var(--chart-1);
}
.tf-line-mint {
  stroke: var(--chart-2);
}
.tf-line-lilac {
  stroke: var(--chart-4);
}
.tf-line-butter {
  stroke: var(--chart-3);
}
.tf-line-blush {
  stroke: var(--chart-5);
}
.tf-area {
  opacity: 0;
  animation: tf-fade var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(var(--enter-delay, 0ms) + calc(500ms * var(--motion-time)));
}
.tf-area-sky {
  fill: var(--sky);
}
.tf-area-mint {
  fill: var(--mint);
}
.tf-area-lilac {
  fill: var(--lilac);
}
.tf-area-butter {
  fill: var(--butter);
}
.tf-area-ink {
  fill: var(--surface-sunken);
}
.tf-dotpt {
  fill: var(--surface);
  stroke-width: 2.5;
  animation: tf-pop var(--dur-base) var(--ease-spring) both;
  animation-delay: calc(var(--enter-delay, 0ms) + calc(900ms * var(--motion-time)));
  transform-box: fill-box;
  transform-origin: center;
}
.tf-arc {
  fill: none;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}
.tf-arc-track {
  fill: none;
  stroke: var(--surface-sunken);
}
.tf-arc-ink {
  stroke: var(--primary);
}
.tf-arc-sky {
  stroke: var(--sky-ink);
}
.tf-arc-mint {
  stroke: var(--mint-ink);
}
.tf-arc-lilac {
  stroke: var(--lilac-ink);
}
.tf-arc-butter {
  stroke: var(--butter-ink);
}
.tf-arc-blush {
  stroke: var(--blush-ink);
}
.tf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-1);
  margin-right: 6px;
  vertical-align: -1px;
}
.tf-ring {
  position: relative;
  display: inline-grid;
  place-items: center;
}
.tf-ring-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font: 600 14px/1 var(--font-sans);
  color: var(--ink);
}
.tf-ring-label small {
  display: block;
  font: 500 11px/14px var(--font-sans);
  color: var(--ink-muted);
  margin-top: 4px;
}

/* Timeline */
.tf-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tf-tl-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  position: relative;
  padding-bottom: 16px;
}
.tf-tl-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 14.5px;
  top: 32px;
  bottom: 2px;
  width: 1.5px;
  background: var(--line);
}
.tf-tl-text {
  font: 500 13px/18px var(--font-sans);
  margin: 4px 0 2px;
}
.tf-tl-text b {
  font-weight: 600;
}
.tf-tl-time {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}

/* ListRow */
.tf-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-row-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--ink);
  width: 100%;
  font: inherit;
}
.tf-row-item:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
a.tf-row-item {
  text-decoration: none;
}
.tf-row-text {
  min-width: 0;
}
/* not interactive: no hover, no pointer */
.tf-row-item.static {
  cursor: default;
}
.tf-row-item.static:hover {
  background: transparent;
  color: var(--ink);
}
/* own buttons: the title is the link or button and its hit area stretches over the row */
.tf-row-item.has-hit {
  position: relative;
}
.tf-row-item.has-hit:hover {
  background: transparent;
  color: var(--ink);
}
.tf-row-item.has-hit:has(.tf-row-hit:hover) {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-row-item.has-hit:has(.tf-row-hit:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-row-hit {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
.tf-row-hit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.tf-row-item.has-actions {
  grid-template-columns: auto 1fr auto auto;
}
.tf-row-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tf-row-item[aria-current="true"] {
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-row-title {
  font: 600 14px/20px var(--font-sans);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tf-row-sub {
  display: block;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* titleLines / subtitleLines: wrap, then end in an ellipsis after that many lines */
.tf-row-sub.clamp,
.tf-row-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines, 2);
  line-clamp: var(--lines, 2);
  white-space: normal;
  overflow: hidden;
  min-width: 0;
}
.tf-row-title.clamp {
  align-items: flex-start;
}
.tf-row-meta {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.tf-unread {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--sky-ink);
  flex: none;
}

/* Kanban */
.tf-kanban {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  min-width: 0;
}
.tf-kanban-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 4px 16px;
  font: 600 14px/20px var(--font-sans);
}
.tf-kanban-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font: 600 11px/1 var(--font-sans);
  color: var(--ink-muted);
}
.tf-kanban .tf-card {
  min-height: 0;
  padding: 16px;
  gap: 12px;
  border-radius: 0;
}
.tf-kanban .tf-card-title {
  font-size: 14px;
  line-height: 19px;
}
.tf-kanban-add {
  border: 1.5px dashed var(--line-strong);
  background: transparent;
  border-radius: 0;
  height: var(--density-control);
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tf-kanban-add:hover {
  color: var(--ink);
  background: var(--surface);
}

/* Modal */
.tf-modal-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  min-height: 100%;
  box-sizing: border-box;
}
.tf-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-strong);
  backdrop-filter: blur(3px);
  border-radius: inherit;
  animation: tf-fade var(--dur-base) var(--ease-out) both;
}
.tf-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: tf-pop var(--dur-base) var(--ease-spring) both;
  box-sizing: border-box;
}
.tf-modal-title {
  font: 600 18px/24px var(--font-sans);
  margin: 0;
}
.tf-modal-text {
  font: 500 14px/20px var(--font-sans);
  color: var(--ink-muted);
  margin: 0;
}
.tf-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.tf-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* Menu */
.tf-menu {
  display: inline-flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
  animation: tf-pop var(--dur-base) var(--ease-spring) both;
  transform-origin: top right;
}
.tf-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--density-control);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
  text-align: left;
}
.tf-menu-item:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-menu-item.danger {
  color: var(--blush-ink);
}
.tf-menu-item kbd {
  margin-left: auto;
  font: 500 11px/1 var(--font-sans);
  color: var(--ink-muted);
}
.tf-menu-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 12px;
}

/* Pagination & Breadcrumb */
.tf-pager {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tf-page {
  min-width: 32px;
  height: var(--control-sm);
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
}
a.tf-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}
.tf-page:hover {
  background: var(--accent);
  color: var(--ink);
}
.tf-page[aria-current="page"] {
  background: var(--primary);
  color: var(--primary-foreground);
}
.tf-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
/* links and buttons get a 24px target without moving the text */
.tf-crumb {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 0 4px;
  /* the target grows to 24px around the 18px line without moving the text */
  margin: -3px -4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.tf-crumb,
button.tf-crumb {
  cursor: pointer;
}
a.tf-crumb:hover,
button.tf-crumb:hover {
  color: var(--ink);
}
.tf-crumb:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
}
.tf-crumbs [aria-current] {
  color: var(--ink);
}

/* FileRow */
.tf-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.tf-file-name {
  font: 600 13px/18px var(--font-sans);
}
.tf-file-meta {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}

/* Page helpers */
.tf-replay {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 var(--line-width) var(--line-strong);
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
}
.tf-sheet-2 {
  grid-template-columns: auto 1fr;
}
.tf-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}
.tf-main-dock {
  padding-bottom: 96px;
}
.tf-dock-float {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .tf-line {
    stroke-dashoffset: 0;
  }
}

/* the same for an app that turns motion off: data-motion="off" */
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}
[data-motion="off"] .tf-line {
  stroke-dashoffset: 0;
}

/* ───────── Refinements ───────── */
.tf-nav-label {
  white-space: nowrap;
}
.tf-nav-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--count);
  color: var(--on-count);
  font: 600 11px/20px var(--font-sans);
  text-align: center;
}
@media (max-width: 1180px) {
  .tf-nav-label {
    display: none;
  }
  .tf-nav-item {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
}
/* the TopBar measured that the labels do not fit: icons only, at any width */
.tf-nav.tight .tf-nav-label {
  display: none;
}
.tf-nav.tight .tf-nav-item {
  position: relative;
  width: 36px;
  padding: 0;
  justify-content: center;
}
.tf-nav.tight .tf-nav-item .tf-nav-count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
}
.tf-main {
  animation: none;
}
.tf-area {
  opacity: 0;
  animation: tf-area-in var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(var(--enter-delay, 0ms) + calc(500ms * var(--motion-time)));
}
@keyframes tf-area-in {
  to {
    opacity: 0.55;
  }
}
.tf-chart text {
  font-variant-numeric: tabular-nums;
}
.tf-card-title {
  text-wrap: balance;
}
.tf-card-foot {
  flex-wrap: wrap;
  row-gap: 8px;
}
.tf-card-foot > .tf-row {
  margin-left: auto;
  flex-wrap: nowrap;
  gap: 4px;
}
.tf-row-meta {
  white-space: nowrap;
}
.tf-btn,
.tf-chip,
.tf-iconbtn,
.tf-tab,
.tf-nav-item,
.tf-dock-btn,
.tf-rail-btn,
.tf-page {
  -webkit-tap-highlight-color: transparent;
}
.tf-iconbtn[disabled] {
  opacity: 0.35;
  cursor: default;
}
.tf-tabs-ind {
  will-change: transform;
}
.tf-panel-title,
.tf-header-title {
  text-wrap: balance;
}
.tf-kanban-add:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-panel .tf-row-item[aria-current="true"],
.tf-row-item[aria-current="true"] {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ───────── Overflow safety + user button ───────── */
.tf-panel,
.tf-card,
.tf-event,
.tf-kanban,
.tf-stat,
.tf-main,
.tf-grid > *,
.tf-stagger > * {
  min-width: 0;
}
.tf-panel,
.tf-card {
  overflow-wrap: anywhere;
}
.tf-chart-wrap {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.tf-chart-wrap .tf-chart {
  display: block;
  max-width: 100%;
  height: auto;
}
.tf-donut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.tf-donut-legend {
  flex: 1 1 150px;
  min-width: 0;
}
.tf-donut > .tf-ring {
  flex: none;
}
.tf-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--density-control);
  padding: 0 12px 0 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--on-frame);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.tf-user:hover,
.tf-user[aria-expanded="true"] {
  background: var(--frame-hover);
}
.tf-user:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-user-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 200px;
}
/* a long name or address ends in an ellipsis instead of pushing the nav out (title has it whole) */
.tf-user-name,
.tf-user-mail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-user {
  min-width: 0;
  flex-shrink: 1;
}

/* Checkbox: real box + SVG check (no pseudo-elements on the input) */
.tf-checkbox {
  position: relative;
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: none;
}
.tf-checkbox input {
  position: absolute;
  /* the box keeps its size; the hit area is at least 24px (WCAG 2.2 target size) */
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: max(24px, 100%);
  height: max(24px, 100%);
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tf-checkbox-box {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: var(--radius-1);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--primary-foreground);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.tf-checkbox-box svg {
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-spring);
}
.tf-checkbox input:checked + .tf-checkbox-box {
  background: var(--primary);
  border-color: var(--primary);
}
.tf-checkbox input:checked + .tf-checkbox-box svg {
  opacity: 1;
  transform: none;
}
.tf-checkbox input:hover:not(:checked) + .tf-checkbox-box {
  border-color: var(--ink-muted);
}
.tf-checkbox input:focus-visible + .tf-checkbox-box {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-checkbox input:disabled + .tf-checkbox-box {
  opacity: 0.45;
}

/* TopBar extra slot (search, notifications) */
.tf-topbar-extra {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tf-topbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--density-control);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--frame-hover);
  color: var(--on-frame-muted);
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.tf-topbtn:hover,
.tf-topbtn[aria-expanded="true"] {
  background: var(--frame-active);
  color: var(--on-frame);
}
.tf-topbtn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-topbtn.icon {
  width: 36px;
  padding: 0;
  justify-content: center;
}
.tf-topbtn kbd {
  font: 500 11px/1 var(--font-sans);
  padding: 3px 6px;
  border-radius: var(--radius-1);
  background: var(--frame-active);
  color: var(--on-frame);
}
.tf-topbtn .tf-nav-count {
  position: absolute;
  top: 2px;
  right: 0;
}

/* ───────── Workspace building blocks (from the Halo Workspace demo) ───────── */
/* Side nav: the pages of the current area plus its main create action */
.tf-subnav {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: tf-fade var(--dur-enter) var(--ease-out) both;
}
.tf-subnav-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tf-subnav-eyebrow {
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 12px;
}
.tf-subnav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--density-control);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-foreground);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.tf-subnav-action:active {
  transform: none;
}
.tf-subnav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tf-subnav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--density-control);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
  text-align: left;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.tf-subnav-item:hover {
  background: var(--accent);
  color: var(--ink);
}
.tf-subnav-item[aria-current="page"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-subnav-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-subnav-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--count);
  color: var(--on-count);
  font: 600 11px/20px var(--font-sans);
  text-align: center;
}
.tf-subnav-labels {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.tf-subnav-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-subnav-tag i {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-1);
}
.tf-subnav-item:focus-visible,
.tf-subnav-action:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Notifications */
.tf-notes {
  position: absolute;
  top: 64px;
  right: 32px;
  z-index: 55;
  width: min(380px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
  animation: tf-pop var(--dur-base) var(--ease-spring) both;
  transform-origin: top right;
}
.tf-notes-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
}
.tf-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tf-note:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-note.unread {
  background: color-mix(in srgb, var(--sky) 35%, transparent);
}
.tf-note-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tf-note-text b {
  font: 600 13px/18px var(--font-sans);
}
.tf-note-text span {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-note-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Command palette */
.tf-palette-wrap {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: calc(env(safe-area-inset-top, 0px) + 12vh) max(16px, env(safe-area-inset-right, 0px))
    24px max(16px, env(safe-area-inset-left, 0px));
  background: var(--scrim-strong);
  backdrop-filter: blur(3px);
  animation: tf-fade var(--dur-base) var(--ease-out) both;
}
.tf-palette {
  width: min(620px, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
  overflow: hidden;
  animation: tf-pop var(--dur-base) var(--ease-spring) both;
  transform-origin: top center;
}
.tf-palette-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-muted);
}
.tf-palette-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: 500 14px/20px var(--font-sans);
  color: var(--ink);
}
.tf-palette-input input::placeholder {
  color: var(--ink-subtle);
  font-weight: 500;
}
.tf-palette kbd {
  font: 500 11px/1 var(--font-sans);
  padding: 4px 6px;
  border-radius: var(--radius-1);
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.tf-palette-list {
  overflow-y: auto;
  padding: 8px;
  flex: 1;
  min-height: 0;
}
.tf-palette-group {
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 12px 12px 4px;
}
.tf-palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tf-palette-item[aria-selected="true"] {
  background: var(--accent);
}
.tf-palette-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tf-palette-label b {
  font: 500 14px/20px var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-palette-label span {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-palette-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-muted);
  font: 500 13px/20px var(--font-sans);
}
.tf-palette-foot {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-palette-foot kbd {
  margin-right: 2px;
}

.tf-drawer-wrap {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: var(--scrim);
  animation: tf-fade var(--dur-base) var(--ease-out) both;
}
.tf-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 100%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) max(24px, env(safe-area-inset-right, 0px))
    calc(env(safe-area-inset-bottom, 0px) + 24px) 24px;
  background: var(--canvas);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
  overflow-y: auto;
  animation: tf-drawer-in var(--dur-enter) var(--ease-out) both;
}
@keyframes tf-drawer-in {
  from {
    transform: translateX(calc(40px * var(--motion-travel)));
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.tf-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tf-flow-node {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-bottom: 16px;
}
.tf-flow-node:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 42px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
.tf-flow-node.done:not(:last-child)::before {
  background: var(--mint-ink);
  transition: background-color var(--dur-base);
}
.tf-flow-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: var(--density-control);
  border-radius: var(--radius-1);
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base);
}
.tf-flow-node.active .tf-flow-icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 4px var(--surface),
    0 0 0 6px var(--focus);
}
.tf-flow-node.wait .tf-flow-icon {
  box-shadow:
    0 0 0 4px var(--surface),
    0 0 0 6px var(--butter-ink);
}
.tf-flow-node.done .tf-flow-icon {
  background: var(--mint);
  color: var(--mint-ink);
}
.tf-flow-card {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  min-width: 0;
}
.tf-flow-node.active .tf-flow-card {
  background: var(--sky);
}
.tf-flow-node.wait .tf-flow-card {
  background: var(--butter);
}
.tf-flow-kind {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tf-flow-live {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  animation: tf-fade 0.8s ease-in-out infinite alternate;
}
.tf-flow-live.wait {
  animation: none;
}
.tf-flow-text {
  font: 500 14px/20px var(--font-sans);
  margin-top: 2px;
}
.tf-flow-tools {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--dur-fast);
  position: absolute;
  right: 8px;
  top: 12px;
}
.tf-flow-node:hover .tf-flow-tools,
.tf-flow-node:focus-within .tf-flow-tools {
  opacity: 1;
}

.tf-perm th,
.tf-perm td {
  text-align: center;
}
.tf-perm th:first-child,
.tf-perm td:first-child {
  text-align: left;
}
.tf-perm-cell {
  min-width: 64px;
  height: var(--control-sm);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out);
}
.tf-perm-cell:active {
  transform: none;
}
.tf-perm-cell:disabled {
  cursor: default;
  opacity: 0.75;
}
.tf-perm-cell.lv0 {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink-muted);
}
.tf-perm-cell.lv1 {
  background: var(--sky);
}
.tf-perm-cell.lv2 {
  background: var(--mint);
}
.tf-perm-cell.lv3 {
  background: var(--lilac);
}
.tf-perm-cell:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.tf-filecard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 8px 12px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  min-width: 0;
}
.tf-filecard:hover {
  transform: none;
  box-shadow: 0 0 0 var(--line-width) var(--line-strong);
}
.tf-filecard:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: 0;
  overflow: hidden;
}
.tf-filecard-name {
  font: 600 13px/18px var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-filecard-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-t-doc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 62%;
  height: 80%;
  padding: 10% 9%;
  box-sizing: border-box;
  border-radius: var(--radius-1);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-t-doc b {
  font: 600 8px/10px var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-t-doc i {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.tf-t-sheet {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 72%;
  padding: 8px;
  border-radius: var(--radius-1);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-t-sheet > span {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.tf-t-sheet i {
  height: 8px;
  border-radius: 2px;
  background: var(--mint-ink);
}
.tf-t-art {
  position: relative;
  width: 100%;
  height: 100%;
}
.tf-t-art i {
  position: absolute;
  border-radius: var(--radius-1);
}
.tf-t-art i:nth-child(1) {
  width: 46%;
  aspect-ratio: 1;
  left: 12%;
  top: 18%;
  background: var(--surface);
}
.tf-t-art i:nth-child(2) {
  width: 30%;
  aspect-ratio: 1;
  right: 14%;
  bottom: 14%;
  background: var(--frame);
}
.tf-t-art i:nth-child(3) {
  width: 40%;
  height: 16%;
  right: 10%;
  top: 16%;
  border-radius: var(--radius-1);
  background: var(--lilac-ink);
  opacity: 0.7;
}
.tf-t-art.fig i:nth-child(1) {
  border-radius: var(--radius-1);
}
.tf-t-zip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: var(--radius-1);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
  font: 500 10px/12px var(--font-mono);
}
.tf-t-zip span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tf-wizard {
  position: relative;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  width: min(860px, 100%);
  min-height: 480px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
  overflow: hidden;
  animation: tf-pop var(--dur-base) var(--ease-spring) both;
}
.tf-wizard-rail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: var(--frame);
  color: var(--on-frame);
}
.tf-wizard-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-wizard-step {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--on-frame-muted);
  font: 500 13px/18px var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.tf-wizard-step > span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--radius-1);
  background: var(--frame-active);
  font: 600 11px/1 var(--font-sans);
}
.tf-wizard-step.cur {
  background: var(--frame-active);
  color: var(--on-frame);
}
.tf-wizard-step.ok > span {
  background: var(--count);
  color: var(--on-count);
}
.tf-wizard-step:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-wizard-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 32px 32px;
  min-width: 0;
}
.tf-wizard-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: tf-slide-in var(--dur-enter) var(--ease-out) both;
}

.tf-paper {
  /* documents stay on white paper in both themes: text tokens follow the paper */
  --ink: var(--paper-ink);
  --ink-muted: var(--paper-muted);
  --ink-subtle: var(--paper-subtle);
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 var(--line-width) var(--line-strong);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font: 500 13px/18px var(--font-sans);
}
.tf-paper-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.tf-paper-kind {
  font: 600 18px/24px var(--font-sans);
  letter-spacing: -0.01em;
}
.tf-paper-small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  margin-top: 4px;
}
.tf-paper-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
}
.tf-paper-meta div,
.tf-paper-lines div,
.tf-paper-totals div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tf-paper-meta span {
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tf-paper-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tf-paper-lines div,
.tf-paper-totals div {
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}
.tf-paper-lines b,
.tf-paper-totals b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tf-paper-totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: auto;
  width: min(100%, 260px);
}
.tf-paper-totals .grand {
  padding-top: 12px;
  margin-top: 4px;
  border-top: 2px solid var(--ink);
  font-size: 14px;
}

.tf-tx {
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-tx.unmatched {
  box-shadow:
    0 0 0 var(--line-width) var(--line),
    inset 0 0 0 1.5px var(--line-strong);
}
.tf-tx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.tf-tx-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tf-tx-text span {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-tx-amt {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tf-tx-amt.in {
  color: var(--mint-ink);
}
.tf-tx-suggest {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 16px 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--butter);
  font: 500 13px/18px var(--font-sans);
}

.tf-notes {
  position: relative;
  top: auto;
  right: auto;
}
.tf-notes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 160px;
  text-align: center;
}
.tf-palette-wrap.inline,
.tf-drawer-wrap.inline {
  position: absolute;
}
.tf-scroll {
  overflow-x: auto;
  min-width: 0;
}
.tf-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.tf-flow-tools {
  display: flex;
  gap: 4px;
}
@media (max-width: 760px) {
  .tf-wizard {
    grid-template-columns: minmax(0, 1fr);
  }
  .tf-wizard-rail ol {
    flex-direction: row;
    overflow-x: auto;
  }
  .tf-wizard-step {
    width: auto;
    flex: none;
  }
}
@media (max-width: 1040px) {
  .tf-subnav-label,
  .tf-subnav-eyebrow,
  .tf-subnav-action span {
    display: none;
  }
  .tf-subnav-item,
  .tf-subnav-action {
    justify-content: center;
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-1);
  }
  .tf-subnav-item {
    position: relative;
  }
  .tf-subnav-count {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
    padding: 0 4px;
  }
}

/* ───────── Spacing system ─────────
   Layout:   24 between page sections · 16 between cards in a grid · 12 between stacked items in a card · 8 inline · 4 tight groups
   Inset:    panel 24 · card 20 · compact card / tile 16 · flush panel 8 (its rows and cells bring 16, so content still starts at 24)
   Controls: 32 sm / 40 md (36 in the top bar); padding-x 16 sm / 20 md; icon-to-label 8
   Nesting:  inner radius = outer radius − padding (concentric corners)
   Micro:    2 / 6 only inside badges, kbd and tags */
.tf-panel-flush {
  padding: var(--space-2);
  gap: var(--space-2);
}
.tf-panel-list {
  gap: var(--space-1);
}
.tf-panel-flush > .tf-tabs {
  margin: var(--space-1);
}

/* 02-forms-overlays-data.css */
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
/* ════════ Kit 2: forms, overlays, data table, more charts ════════ */
/* Field states */
.tf-req {
  color: var(--blush-ink);
}
.tf-opt {
  font-weight: 500;
  color: var(--ink-subtle);
}
.tf-field-error,
.tf-field-success {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tf-field-success {
  font: 500 12px/16px var(--font-sans);
  color: var(--mint-ink);
}
.tf-inputwrap {
  position: relative;
  display: block;
}
.tf-inputwrap.has-icon .tf-input {
  padding-left: 40px;
}
.tf-inputwrap.has-suffix .tf-input {
  padding-right: 40px;
}
.tf-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
}
.tf-input-suffix {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  pointer-events: none;
}
/* an interactive control at the end (reveal password, clear, copy) */
.tf-input-action {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
}
.tf-inputwrap.has-action .tf-input {
  padding-right: 44px;
}
.tf-inputwrap.has-action.has-suffix .tf-input {
  padding-right: 72px;
}
.tf-inputwrap.has-action .tf-input-suffix {
  right: 44px;
}
.tf-input-suffix.err {
  color: var(--blush-ink);
}
.tf-input-suffix.ok {
  color: var(--mint-ink);
}
.tf-input.is-valid {
  box-shadow: inset 0 0 0 1px var(--mint-ink);
}
.tf-btn-danger-solid {
  background: var(--destructive);
  color: var(--destructive-foreground);
}
.tf-btn-danger-solid:hover {
  filter: brightness(1.08);
}
.tf-linkbtn {
  border: 0;
  background: none;
  padding: 0 4px;
  height: var(--control-sm);
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.tf-linkbtn:hover {
  color: var(--ink);
}
.tf-linkbtn.on-frame {
  color: var(--on-frame-muted);
}
.tf-linkbtn.on-frame:hover {
  color: var(--on-frame);
}
.tf-linkbtn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Radio & segmented */
.tf-radiogroup {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tf-radiogroup > legend {
  padding: 0;
  margin-bottom: 8px;
}
.tf-radiogroup-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tf-radio {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.tf-radio input {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}
.tf-radio-dot {
  flex: none;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  display: grid;
  place-items: center;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.tf-radio-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--primary-foreground);
  transform: scale(0);
  transition: transform var(--dur-base) var(--ease-spring);
}
.tf-radio.on .tf-radio-dot {
  background: var(--primary);
  border-color: var(--primary);
}
.tf-radio.on .tf-radio-dot::after {
  transform: scale(1);
}
.tf-radio:hover:not(.on) .tf-radio-dot {
  border-color: var(--ink-muted);
}
.tf-radio input:focus-visible + .tf-radio-dot {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-radio.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tf-radio-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tf-radio-text b {
  font: 500 14px/20px var(--font-sans);
  color: var(--ink);
}
.tf-radio-text small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-radiogroup.cards .tf-radiogroup-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.tf-radiogroup.cards .tf-radio {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.tf-radiogroup.cards .tf-radio.on {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.tf-radiogroup.cards .tf-radio-text b {
  font-weight: 500;
}
.tf-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  max-width: 100%;
}
.tf-seg.block {
  display: flex;
}
.tf-seg.block .tf-seg-item {
  flex: 1 1 0;
}
.tf-seg-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--control-sm);
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.tf-seg-item input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.tf-seg-item:hover:not(.on) {
  color: var(--ink);
}
.tf-seg-item.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-seg-item:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-seg.sm .tf-seg-item {
  height: 24px;
  padding: 0 12px;
  font-size: 12px;
}

/* Popover, tooltip */
.tf-pop-anchor {
  position: relative;
  display: inline-flex;
  min-width: 0;
}
.tf-pop-anchor.block {
  display: flex;
  flex-direction: column;
}
.tf-popover {
  position: absolute;
  z-index: 70;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  color: var(--ink);
  box-shadow:
    var(--shadow-float), 0 0 0 var(--line-width) var(--line),
    0 0 0 1px var(--line);
  animation: tf-pop var(--dur-base) var(--ease-spring) both;
  transform-origin: top left;
}
.tf-popover.tf-pop-end {
  left: auto;
  right: 0;
  transform-origin: top right;
}
.tf-popover.top {
  top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom left;
}
.tf-popover.flush {
  padding: 0;
  background: none;
  box-shadow: none;
}
.tf-popover.flush > .tf-menu {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}
.tf-menu-static {
  animation: none;
}
.tf-menu-label {
  padding: 8px 12px 4px;
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
label.tf-menu-item {
  cursor: pointer;
}
.tf-tip-anchor {
  position: relative;
  display: inline-flex;
}
.tf-tooltip {
  position: absolute;
  z-index: 90;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-1);
  background: var(--frame);
  color: var(--on-frame);
  font: 500 12px/16px var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
  animation: tf-tip-in var(--dur-fast) var(--ease-out) both;
}
.tf-tooltip kbd {
  font: 500 11px/1 var(--font-sans);
  color: var(--on-frame-muted);
}
.tf-tooltip.tf-tip-bottom {
  bottom: auto;
  top: calc(100% + 8px);
}
.tf-tooltip.tf-tip-right {
  left: calc(100% + 8px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}
.tf-tooltip.tf-tip-left {
  left: auto;
  right: calc(100% + 8px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}
@keyframes tf-tip-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Combobox, tags, options */
.tf-combo {
  position: relative;
}
.tf-combo-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: var(--density-control);
  box-sizing: border-box;
  padding: 4px 40px 4px 16px;
  border-radius: var(--radius-1);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  cursor: text;
  position: relative;
  transition: box-shadow var(--dur-fast) ease;
}
.tf-combo-box:hover {
  box-shadow: inset 0 0 0 1px var(--ink-muted);
}
.tf-combo.open .tf-combo-box,
.tf-combo-box:focus-within {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.tf-combo.invalid .tf-combo-box {
  box-shadow: inset 0 0 0 2px var(--blush-ink);
}
.tf-combo-box:has(.tf-token) {
  padding-left: 4px;
}
.tf-tags {
  padding-right: 16px;
}
.tf-combo-input {
  flex: 1 1 80px;
  min-width: 60px;
  height: var(--control-sm);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: 500 14px/20px var(--font-sans);
  padding: 0;
}
.tf-combo-input::placeholder {
  color: var(--ph, var(--ink-subtle));
}
.tf-combo-box:has(.tf-token) .tf-combo-input {
  padding-left: 8px;
}
.tf-combo-chev {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  display: inline-flex;
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.tf-combo.open .tf-combo-chev {
  transform: translateY(-50%) rotate(180deg);
}
.tf-token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--control-sm);
  padding: 0 4px 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font: 500 13px/18px var(--font-sans);
  color: var(--ink);
  max-width: 100%;
}
.tf-token button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0;
}
.tf-token button:hover {
  background: var(--line);
  color: var(--ink);
}
.tf-token button:focus-visible {
  outline: 2px solid var(--focus);
}
.tf-combo-pop {
  left: 0;
  right: 0;
  padding: 8px;
  max-height: 288px;
  overflow: auto;
}
.tf-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--density-control);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font: 500 14px/20px var(--font-sans);
  cursor: pointer;
}
.tf-option.active {
  background: var(--accent);
}
.tf-option-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.tf-option-text small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-option-check {
  color: var(--ink);
  flex: none;
}
.tf-combo-empty {
  padding: 12px;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}

/* Date picker */
.tf-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.tf-picker .tf-ico {
  color: var(--ink-muted);
  flex: none;
}
.tf-picker span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-picker.empty span {
  color: var(--ink-subtle);
}
.tf-dp {
  display: flex;
  gap: 16px;
}
.tf-dp-presets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 132px;
  flex: none;
  padding-right: 16px;
  border-right: 1px solid var(--line);
}
.tf-dp-preset {
  height: var(--control-sm);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
}
.tf-dp-preset:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-dp-preset.on {
  background: var(--primary);
  color: var(--primary-foreground);
}
.tf-cal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tf-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tf-cal-head b {
  font: 600 14px/20px var(--font-sans);
}
.tf-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 4px;
}
.tf-cal-wd {
  text-align: center;
  font: 500 11px/14px var(--font-sans);
  color: var(--ink-muted);
  padding-bottom: 4px;
}
.tf-cal-day {
  position: relative;
  height: var(--density-control);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
.tf-cal-day:hover:not(.sel):not(:disabled) {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-cal-day.out {
  color: var(--ink-subtle);
}
.tf-cal-day.today::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: var(--radius-full);
  background: currentColor;
}
.tf-cal-day.inrange {
  background: var(--surface-sunken);
  border-radius: 0;
}
.tf-cal-day.sel {
  background: var(--primary);
  color: var(--primary-foreground);
}
.tf-cal-day.sel.start {
  border-radius: var(--radius-1) 0 0 var(--radius-1);
}
.tf-cal-day.sel.end {
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
}
.tf-cal-day.sel.start.end {
  border-radius: var(--radius-pill);
}
.tf-cal-day:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.tf-cal-day:focus-visible,
.tf-dp-preset:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  z-index: 1;
}

/* Number, slider, OTP, upload */
.tf-number {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--density-control);
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  width: max-content;
}
.tf-number:focus-within {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.tf-number-input {
  width: 56px;
  border: 0;
  outline: none;
  background: transparent;
  text-align: center;
  font: 500 14px/20px var(--font-sans);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tf-number-unit {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
  margin: 0 4px 0 -8px;
}
.tf-slider {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 32px;
}
.tf-slider-track {
  position: relative;
  height: 20px;
}
.tf-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.tf-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-1);
  background: linear-gradient(
    to right,
    var(--primary) var(--pct),
    var(--surface-sunken) var(--pct)
  );
}
.tf-slider input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-1);
  background: linear-gradient(
    to right,
    var(--primary) var(--pct),
    var(--surface-sunken) var(--pct)
  );
}
.tf-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: var(--radius-1);
  background: var(--surface);
  box-shadow:
    0 0 0 2px var(--primary),
    0 0 0 var(--line-width) var(--line);
  transition: transform var(--dur-fast) var(--ease-out);
}
.tf-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-1);
  background: var(--surface);
  box-shadow:
    0 0 0 2px var(--primary),
    0 0 0 var(--line-width) var(--line);
}
.tf-slider input[type="range"]:active::-webkit-slider-thumb {
  transform: none;
}
.tf-slider input[type="range"]:focus-visible {
  outline: none;
}
.tf-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 2px var(--primary),
    0 0 0 5px var(--focus);
}
.tf-slider-val {
  position: absolute;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: var(--radius-1);
  background: var(--frame);
  color: var(--on-frame);
  font: 600 12px/16px var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.tf-slider-marks {
  display: flex;
  justify-content: space-between;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-otp {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tf-otp-cell {
  width: 48px;
  flex: 0 1 48px;
  min-width: 0;
  height: 56px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  text-align: center;
  font: 600 18px/24px var(--font-sans);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  caret-color: var(--ink);
}
.tf-otp-cell:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.tf-otp.invalid .tf-otp-cell {
  box-shadow: inset 0 0 0 2px var(--blush-ink);
  animation: tf-shake 0.32s ease;
}
.tf-otp-sep {
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--line-strong);
}
@keyframes tf-shake {
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}
.tf-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--line-strong);
  background: var(--canvas);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease;
}
.tf-drop.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tf-drop b {
  font: 500 14px/20px var(--font-sans);
  margin-top: 4px;
}
.tf-drop span {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-drop:hover {
  border-color: var(--ink-muted);
}
.tf-drop.over {
  border-color: var(--mint-ink);
  background: var(--mint);
}
.tf-drop:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.tf-upload-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-upload-text b {
  font: 500 13px/18px var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-upload-text > span:not(.tf-progress) {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-upload .tf-progress {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.tf-upload .tf-progress span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.16s linear;
}

/* Alert, confirm, toaster */
.tf-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-radius: var(--radius-md);
  background: var(--sky);
  color: var(--ink);
}
.tf-alert-success {
  background: var(--mint);
}
.tf-alert-warning {
  background: var(--butter);
}
.tf-alert-danger {
  background: var(--blush);
}
.tf-alert-highlight {
  background: var(--lilac);
}
.tf-alert-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  border-radius: var(--radius-1);
  background: var(--surface);
  color: var(--sky-ink);
}
.tf-alert-success .tf-alert-icon {
  color: var(--mint-ink);
}
.tf-alert-warning .tf-alert-icon {
  color: var(--butter-ink);
}
.tf-alert-danger .tf-alert-icon {
  color: var(--blush-ink);
}
.tf-alert-highlight .tf-alert-icon {
  color: var(--lilac-ink);
}
.tf-alert-body {
  /* when the alert is too narrow for text and actions, the actions move to their own line */
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}
.tf-alert-body b {
  font: 500 14px/20px var(--font-sans);
}
.tf-alert-body span {
  font: 500 13px/18px var(--font-sans);
}
.tf-alert-actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin-left: auto;
}
.tf-alert .tf-iconbtn-ghost {
  background: transparent;
  color: var(--ink);
}
.tf-alert .tf-iconbtn-ghost:hover {
  background: var(--ink-hover);
}
.tf-iconbtn-ghost {
  background: transparent;
  color: var(--ink);
}
.tf-iconbtn-ghost:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-overlay {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 24px;
}
.tf-overlay .tf-backdrop {
  position: fixed;
  border-radius: 0;
}
.tf-confirm {
  max-width: 400px;
}
.tf-toaster {
  position: fixed;
  z-index: 95;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.tf-toaster.top {
  bottom: auto;
  top: 24px;
  flex-direction: column;
}
.tf-toast-x {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  max-width: 100%;
  padding: 8px 8px 8px 8px;
}
.tf-toast-text {
  min-width: 0;
  padding-right: 4px;
}
.tf-toast-action {
  white-space: nowrap;
  flex: none;
  height: var(--control-sm);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--frame-active);
  color: var(--on-frame);
  font: 600 13px/18px var(--font-sans);
  cursor: pointer;
}
.tf-toast-action:hover {
  background: var(--frame-strong);
}
.tf-toast-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: var(--control-sm);
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--on-frame-muted);
  cursor: pointer;
  padding: 0;
}
.tf-toast-close:hover {
  color: var(--on-frame);
  background: var(--frame-hover);
}
.tf-toast-action:focus-visible,
.tf-toast-close:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-toast-timer {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--on-frame-success);
  transform-origin: left;
  animation: tf-timer linear forwards;
  opacity: 0.7;
}
@keyframes tf-timer {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Filter bar, data table, bulk bar */
.tf-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tf-filterbar-right {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.tf-filterchip {
  display: inline-flex;
  align-items: center;
  height: var(--control-sm);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-foreground);
  font: 500 13px/18px var(--font-sans);
}
.tf-filterchip > button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  height: var(--control-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 16px;
  border-radius: var(--radius-pill);
}
.tf-filterchip > button b {
  font-weight: 600;
}
.tf-filterchip > button.x {
  width: 32px;
  padding: 0;
  justify-content: center;
  opacity: 0.7;
}
.tf-filterchip > button.x:hover {
  opacity: 1;
}
.tf-filterchip > button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-chip-dashed {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  box-shadow: none;
  outline: 1.5px dashed var(--line-strong);
  outline-offset: -1.5px;
  color: var(--ink-muted);
}
.tf-chip-dashed:hover {
  color: var(--ink);
  background: transparent;
  outline-color: var(--ink-muted);
}
.tf-dt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tf-dt-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 0 16px;
}
.tf-dt-toolbar > :last-child {
  margin-left: auto;
}
.tf-dt-scroll {
  overflow: auto;
  min-width: 0;
}
.tf-dt-scroll.sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--line);
  border-bottom: 0;
}
.tf-dt-table td,
.tf-dt-table th {
  white-space: nowrap;
}
.tf-dt-sel {
  width: 20px;
  padding-right: 0 !important;
}
.tf-dt-exp {
  width: 32px;
  padding-left: 4px !important;
  padding-right: 0 !important;
}
.tf-dt-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-1);
}
.tf-dt-sort:hover,
.tf-dt-sort.on {
  color: var(--ink);
}
.tf-dt-sort:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-dt-arrow {
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast);
}
.tf-dt-arrow.up {
  transform: rotate(180deg);
}
.tf-dt-arrow.idle {
  opacity: 0;
}
.tf-dt-sort:hover .tf-dt-arrow.idle {
  opacity: 0.5;
}
.tf-num .tf-dt-sort {
  flex-direction: row-reverse;
}
.tf-dt-table tr.selected td {
  background: var(--canvas);
}
.tf-dt-table tr.expanded td {
  border-bottom-color: transparent;
}
.tf-dt-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0;
}
.tf-dt-toggle:hover {
  background: var(--accent);
  color: var(--ink);
}
.tf-dt-toggle .tf-ico {
  transition: transform var(--dur-base) var(--ease-out);
}
.tf-dt-toggle.open .tf-ico {
  transform: rotate(90deg);
}
.tf-dt-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-dt-detail td {
  padding-top: 0 !important;
  height: auto !important;
  white-space: normal !important;
}
.tf-dt-detail-in {
  margin-left: 52px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--canvas);
}
.tf-dt-empty {
  text-align: center;
  color: var(--ink-muted);
  height: 96px !important;
  white-space: normal !important;
}
.tf-checkbox-box.ind {
  background: var(--primary);
  border-color: var(--primary);
}
.tf-checkbox-box.ind svg {
  opacity: 1;
  transform: none;
}
.tf-bulkbar {
  position: sticky;
  bottom: 8px;
  z-index: 3;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  padding: 4px 4px 4px 20px;
  border-radius: var(--radius-pill);
  background: var(--frame);
  color: var(--on-frame);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
  font: 500 13px/18px var(--font-sans);
  animation: tf-slide-up var(--dur-base) var(--ease-spring) both;
  margin-bottom: 8px;
}
.tf-bulkbar > b {
  white-space: nowrap;
}
.tf-bulkbar-actions {
  display: flex;
  gap: 4px;
  margin-left: 8px;
  overflow-x: auto;
}
.tf-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-sm);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--frame-active);
  color: var(--on-frame);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
}
.tf-bulk-btn:hover {
  background: var(--frame-strong);
}
.tf-bulk-btn.danger {
  color: var(--on-frame-danger);
}
.tf-bulk-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Charts: stacked bar, area, heatmap, funnel, gauge */
.tf-sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-1);
  margin-right: 8px;
  vertical-align: -1px;
  flex: none;
}
.tf-sw-ink,
.tf-sf-ink {
  background: var(--primary);
  fill: var(--primary);
}
.tf-sw-sky,
.tf-sf-sky {
  background: var(--chart-1);
  fill: var(--chart-1);
}
.tf-sw-mint,
.tf-sf-mint {
  background: var(--chart-2);
  fill: var(--chart-2);
}
.tf-sw-lilac,
.tf-sf-lilac {
  background: var(--chart-4);
  fill: var(--chart-4);
}
.tf-sw-butter,
.tf-sf-butter {
  background: var(--chart-3);
  fill: var(--chart-3);
}
.tf-sw-blush,
.tf-sf-blush {
  background: var(--chart-5);
  fill: var(--chart-5);
}
.tf-sw-light-sky,
.tf-sf-light-sky {
  background: var(--sky);
  fill: var(--sky);
}
.tf-sw-light-mint,
.tf-sf-light-mint {
  background: var(--mint);
  fill: var(--mint);
}
.tf-sw-light-butter,
.tf-sf-light-butter {
  background: var(--butter);
  fill: var(--butter);
}
.tf-sw-light-lilac,
.tf-sf-light-lilac {
  background: var(--lilac);
  fill: var(--lilac);
}
.tf-seg-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: tf-grow-y var(--dur-slow) var(--ease-out) both;
  animation-delay: var(--enter-delay, 0ms);
  transition: opacity var(--dur-fast);
}
.tf-chart g.dim .tf-seg-bar {
  opacity: 0.35;
}
.tf-chart-hover {
  position: relative;
  overflow: visible;
}
.tf-chart-hover .tf-legend {
  margin-top: 12px;
}
.tf-chart-tip {
  position: absolute;
  z-index: 5;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--frame);
  color: var(--on-frame);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
  pointer-events: none;
  font: 500 12px/16px var(--font-sans);
}
.tf-chart-tip b {
  font: 600 12px/16px var(--font-sans);
  margin-bottom: 4px;
}
.tf-chart-tip span {
  display: flex;
  align-items: center;
}
.tf-chart-tip em {
  margin-left: auto;
  padding-left: 16px;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tf-area2 {
  opacity: 0;
  animation: tf-area2-in var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(var(--enter-delay, 0ms) + calc(400ms * var(--motion-time)));
}
@keyframes tf-area2-in {
  to {
    opacity: 1;
  }
}
.tf-af-ink {
  fill: var(--surface-sunken);
}
.tf-af-sky {
  fill: var(--sky);
}
.tf-af-mint {
  fill: var(--mint);
}
.tf-af-lilac {
  fill: var(--lilac);
}
.tf-af-butter {
  fill: var(--butter);
}
.tf-af-blush {
  fill: var(--blush);
}
.tf-crosshair {
  stroke: var(--ink-muted);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.tf-hoverpt {
  fill: var(--surface);
  stroke-width: 2.5;
}
.tf-heat-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.tf-heat {
  display: grid;
  gap: 4px;
  align-items: center;
}
.tf-heat-col {
  font: 500 11px/14px var(--font-sans);
  color: var(--ink-muted);
  text-align: center;
  white-space: nowrap;
}
.tf-heat-row {
  font: 500 11px/14px var(--font-sans);
  color: var(--ink-muted);
  padding-right: 8px;
  white-space: nowrap;
}
.tf-heat-cell {
  display: block;
  height: 20px;
  border-radius: var(--radius-1);
  background: var(--surface-sunken);
  animation: tf-fade var(--dur-base) var(--ease-out) both;
  transition: box-shadow var(--dur-fast);
}
.tf-heat-cell.l1 {
  background: color-mix(in srgb, var(--mint-ink) 25%, var(--surface));
}
.tf-heat-cell.l2 {
  background: color-mix(in srgb, var(--mint-ink) 50%, var(--surface));
}
.tf-heat-cell.l3 {
  background: color-mix(in srgb, var(--mint-ink) 75%, var(--surface));
}
.tf-heat-cell.l4 {
  background: var(--mint-ink);
}
.tf-heat-cell.hov {
  box-shadow: 0 0 0 2px var(--ink);
}
.tf-heat-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  min-height: 16px;
}
.tf-heat-scale {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tf-heat-scale .tf-heat-cell {
  width: 12px;
  height: 12px;
  min-height: 0;
  border-radius: var(--radius-1);
  animation: none;
}
.tf-funnel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tf-funnel-row {
  display: grid;
  grid-template-columns: minmax(96px, 160px) minmax(0, 1fr) 56px;
  gap: 16px;
  align-items: center;
}
.tf-funnel-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tf-funnel-label b {
  font: 500 13px/18px var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-funnel-label span {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.tf-funnel-track {
  position: relative;
  height: var(--control-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
}
.tf-funnel-bar {
  display: block;
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width var(--dur-slow) var(--ease-out);
}
.tf-funnel-track em {
  position: absolute;
  right: 12px;
  font: 600 12px/16px var(--font-sans);
  font-style: normal;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tf-funnel-conv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.tf-funnel-bar.tf-sf-sky {
  background: var(--sky);
}
.tf-funnel-bar.tf-sf-mint {
  background: var(--mint);
}
.tf-funnel-bar.tf-sf-lilac {
  background: var(--lilac);
}
.tf-funnel-bar.tf-sf-butter {
  background: var(--butter);
}
.tf-gauge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
.tf-gauge svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.tf-gauge-arc {
  fill: none;
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}
.tf-gauge path.tf-arc-track {
  fill: none;
}
.tf-gauge .tf-arc-ink,
.tf-gauge .tf-arc-sky,
.tf-gauge .tf-arc-mint,
.tf-gauge .tf-arc-lilac,
.tf-gauge .tf-arc-butter,
.tf-gauge .tf-arc-blush {
  transform: none;
}
.tf-gauge-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tf-gauge-label b {
  font: 600 22px/28px var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tf-gauge-label span {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-gauge-range {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  font: 500 11px/14px var(--font-sans);
  color: var(--ink-muted);
}
@media (prefers-reduced-motion: reduce) {
  .tf-seg-bar,
  .tf-area2,
  .tf-heat-cell,
  .tf-tooltip,
  .tf-popover {
    animation: none !important;
    opacity: 1;
  }
  .tf-toast-timer {
    display: none;
  }
}
/* the same for an app that turns motion off: data-motion="off" */
[data-motion="off"] .tf-seg-bar,
[data-motion="off"] .tf-area2,
[data-motion="off"] .tf-heat-cell,
[data-motion="off"] .tf-tooltip,
[data-motion="off"] .tf-popover {
  animation: none !important;
  opacity: 1;
}
[data-motion="off"] .tf-toast-timer {
  display: none;
}
@media (max-width: 640px) {
  .tf-dp {
    flex-direction: column;
  }
  .tf-dp-presets {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
  }
  .tf-funnel-row {
    grid-template-columns: minmax(0, 1fr) 48px;
  }
  .tf-funnel-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .tf-toaster {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
  }
}
/* An open popover lifts its section above later siblings (entrance animations create stacking contexts) */
:where(.tf-in, .tf-panel, .tf-card, .tf-stagger > *, .tf-grid > *, .tf-dt):has(
  .tf-popover,
  .tf-tooltip,
  .tf-chart-tip
) {
  position: relative;
  z-index: 40;
}

/* 03-chat-commerce-system.css */
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
/* ════════ Kit 3: AI chat & agents, e-commerce, system screens ════════ */
/* Rich text & code */
.tf-rt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font: 500 14px/20px var(--font-sans);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.tf-rt p,
.tf-rt ul,
.tf-rt ol {
  margin: 0;
}
.tf-rt ul,
.tf-rt ol {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-rt li::marker {
  color: var(--ink-muted);
}
.tf-rt .tf-rt-h {
  font: 600 14px/20px var(--font-sans);
}
.tf-rt a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.tf-rt-plain {
  margin: 0;
  font: 500 14px/20px var(--font-sans);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tf-icode {
  font: 500 13px/20px var(--font-mono);
  padding: 2px 6px;
  border-radius: var(--radius-1);
  background: var(--surface-sunken);
}
.tf-caret {
  display: inline-block;
  width: 8px;
  height: 16px;
  margin-left: 2px;
  border-radius: 2px;
  background: var(--ink);
  vertical-align: -3px;
  animation: tf-blink 1s steps(2) infinite;
}
@keyframes tf-blink {
  50% {
    opacity: 0;
  }
}
.tf-code {
  border-radius: var(--radius-md);
  background: var(--frame);
  color: var(--on-frame);
  overflow: hidden;
  min-width: 0;
}
.tf-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--density-control);
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--frame-hover);
  font: 500 12px/16px var(--font-sans);
  color: var(--on-frame-muted);
}
.tf-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--on-frame-muted);
  font: 500 12px/16px var(--font-sans);
  cursor: pointer;
}
.tf-code-copy:hover {
  background: var(--frame-hover);
  color: var(--on-frame);
}
.tf-code-copy:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-code pre {
  margin: 0;
  padding: 12px 16px 16px;
  overflow-x: auto;
  font: 500 13px/20px var(--font-mono);
}
.tf-code .tk-k {
  color: var(--on-frame-signal);
}
.tf-code .tk-s {
  color: var(--on-frame-success);
}
.tf-code .tk-n {
  color: var(--on-frame-warn);
}
.tf-code .tk-c {
  color: var(--on-frame-muted);
  font-style: italic;
}

/* Messages */
.tf-msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
  animation: tf-rise var(--dur-base) var(--ease-out) both;
}
.tf-msg.me {
  flex-direction: row-reverse;
}
.tf-msg-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: min(720px, 100%);
  flex: 0 1 auto;
}
.tf-msg.ai .tf-msg-col {
  flex: 1 1 auto;
}
.tf-msg.me .tf-msg-col {
  align-items: flex-end;
  max-width: min(560px, 85%);
}
.tf-msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--control-sm);
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-msg-meta b {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink);
}
.tf-msg.me .tf-msg-meta {
  display: none;
}
.tf-msg-model {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-weight: 500;
}
.tf-msg.me .tf-bubble {
  padding: 8px 16px;
  border-radius: var(--radius-1) var(--radius-1) var(--radius-1) var(--radius-1);
  background: var(--primary);
  color: var(--primary-foreground);
}
.tf-msg.me .tf-bubble .tf-rt-plain {
  color: var(--primary-foreground);
}
.tf-msg.ai .tf-bubble {
  padding: 4px 0 0;
}
.tf-msg-system {
  display: flex;
  justify-content: center;
}
.tf-msg-system span {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-msg-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: -8px;
}
.tf-msg-act {
  display: grid;
  place-items: center;
  width: 32px;
  height: var(--control-sm);
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0;
}
.tf-msg-act:hover {
  background: var(--accent);
  color: var(--ink);
}
.tf-msg-act.on {
  color: var(--ink);
  background: var(--surface-sunken);
}
.tf-msg-act:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-msg-usage {
  margin-left: 8px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
}
.tf-msg-sources,
.tf-msg-attach,
.tf-composer-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tf-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* grows with a long title (two lines at most) instead of spilling over */
  min-height: var(--control-sm);
  box-sizing: border-box;
  padding: 4px 12px 4px 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink);
  text-decoration: none;
  font: 500 12px/16px var(--font-sans);
  max-width: min(260px, 100%);
}
.tf-source-title {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.tf-source > .tf-ico,
.tf-source-n {
  flex: none;
}
.tf-source:hover {
  background: var(--line);
}
.tf-source:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-source-n {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: var(--radius-1);
  background: var(--surface);
  font: 600 11px/1 var(--font-sans);
}
.tf-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-sm);
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font: 500 12px/16px var(--font-sans);
  color: var(--ink);
  max-width: 260px;
}
.tf-attach-chip small {
  font-weight: 500;
  color: var(--ink-muted);
}
.tf-attach-chip button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: -8px;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0;
}
.tf-attach-chip button:hover {
  background: var(--line);
  color: var(--ink);
}
.tf-typing {
  display: inline-flex;
  gap: 4px;
  padding: 12px 0;
}
.tf-typing i {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--ink-muted);
  animation: tf-dot 1.2s ease-in-out infinite;
}
.tf-typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.tf-typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes tf-dot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
.tf-agentmark {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-1);
  position: relative;
}
.tf-agentmark.live::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--mint-ink);
  box-shadow: 0 0 0 2px var(--surface);
  animation: tf-pulse 1.8s ease-out infinite;
}

/* Tool calls, reasoning, approvals */
.tf-tool {
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  min-width: 0;
}
.tf-tool-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--density-control);
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 13px/18px var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.tf-tool-head:hover {
  background: var(--canvas);
}
.tf-tool-head:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.tf-tool-head b {
  font-weight: 500;
  white-space: nowrap;
}
.tf-tool-sum {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-muted);
}
.tf-tool-time {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
}
.tf-tool-kind {
  color: var(--ink-muted);
  flex: none;
}
.tf-tool-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-1);
  background: var(--mint);
  color: var(--mint-ink);
}
.tf-tool.is-error .tf-tool-ico {
  background: var(--blush);
  color: var(--blush-ink);
}
.tf-tool.is-waiting .tf-tool-ico {
  background: var(--butter);
  color: var(--butter-ink);
}
.tf-tool.is-running .tf-tool-ico {
  background: var(--sky);
  color: var(--sky-ink);
}
.tf-tool-chev {
  flex: none;
  color: var(--ink-muted);
  transition: transform var(--dur-base) var(--ease-out);
}
.tf-tool.open .tf-tool-chev,
.tf-reason.open .tf-tool-chev {
  transform: rotate(180deg);
}
.tf-tool-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 12px 12px;
}
.tf-tool-label {
  display: block;
  margin-bottom: 4px;
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tf-tool-body pre {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--canvas);
  font: 500 12px/18px var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow: auto;
}
.tf-tool-body pre.err {
  color: var(--blush-ink);
}
.tf-spin {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: tf-spin 0.8s linear infinite;
}
@keyframes tf-spin {
  to {
    transform: rotate(360deg);
  }
}
.tf-reason {
  min-width: 0;
}
.tf-reason-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-sm);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font: 500 12px/16px var(--font-sans);
  cursor: pointer;
}
.tf-reason-head:hover {
  color: var(--ink);
}
.tf-reason.live .tf-reason-head {
  background: linear-gradient(90deg, var(--surface-sunken), var(--line), var(--surface-sunken));
  background-size: 200% 100%;
  animation: tf-shimmer 1.6s linear infinite;
}
.tf-reason-head:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-reason-body {
  margin: 8px 0 0 16px;
  padding-left: 16px;
  border-left: 2px solid var(--line);
  font: 500 13px/20px var(--font-sans);
  color: var(--ink-muted);
}
.tf-reason-body ol {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-approval {
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--butter-ink);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.tf-approval.is-approved {
  box-shadow: inset 0 0 0 1px var(--line);
}
.tf-approval.is-denied {
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0.8;
}
.tf-approval-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.tf-approval-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-approval-text b {
  font: 500 14px/20px var(--font-sans);
}
.tf-approval-text span {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-approval-body {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--canvas);
  font: 500 13px/20px var(--font-sans);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tf-approval-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tf-approval-note {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}

/* Starters, composer, model picker */
.tf-starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.tf-starter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition:
    box-shadow var(--dur-fast),
    transform var(--dur-fast);
}
.tf-starter:hover {
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transform: none;
}
.tf-starter:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-starter b {
  font: 500 14px/20px var(--font-sans);
  margin-top: 4px;
}
.tf-starter span:not(.tf-tinticon) {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 8px 16px;
  border-radius: var(--radius-1);
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px var(--line-strong),
    0 0 0 var(--line-width) var(--line);
  transition: box-shadow var(--dur-fast) ease;
}
.tf-composer:focus-within {
  box-shadow:
    inset 0 0 0 2px var(--ink),
    0 0 0 var(--line-width) var(--line);
}
.tf-composer-input {
  width: 100%;
  min-height: 24px;
  max-height: 200px;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  padding: 4px 0;
  font: 500 14px/20px var(--font-sans);
  color: var(--ink);
  box-sizing: border-box;
}
.tf-composer-input::placeholder {
  color: var(--ink-subtle);
}
.tf-composer-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.tf-composer-tool {
  display: grid;
  place-items: center;
  width: 32px;
  height: var(--control-sm);
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0;
}
.tf-composer-tool:hover {
  background: var(--accent);
  color: var(--ink);
}
.tf-composer-tool:focus-within,
.tf-composer-tool:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-composer-hint {
  flex: 1;
  min-width: 0;
  text-align: right;
  padding: 0 8px;
  font: 500 11px/14px var(--font-sans);
  color: var(--ink-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: var(--density-control);
  border: 0;
  border-radius: var(--radius-1);
  background: var(--primary);
  color: var(--primary-foreground);
  cursor: pointer;
  padding: 0;
  transition:
    transform var(--dur-fast),
    opacity var(--dur-fast);
}
.tf-send:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.tf-send:not(:disabled):active {
  transform: none;
}
.tf-send:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-stop-sq {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-1);
  background: currentColor;
}
.tf-composer-cmds {
  left: 8px;
  right: 8px;
  padding: 8px;
}
.tf-model-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--control-sm);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink);
  font: 500 12px/16px var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
}
.tf-model-btn:hover {
  background: var(--line);
}
.tf-model-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-model-item {
  height: auto;
  min-height: 48px;
}
.tf-model-item .tf-option-text b {
  font: 500 13px/18px var(--font-sans);
}

/* Agent status, trace, usage */
.tf-agentstatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tf-agentstatus-step {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-trace {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tf-trace-head {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) 3fr;
  gap: 16px;
  padding: 0 12px 8px;
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
}
.tf-trace-row {
  border-bottom: 1px solid var(--line);
}
.tf-trace-row:last-of-type {
  border-bottom: 0;
}
.tf-trace-main {
  display: grid;
  grid-template-columns: 24px minmax(156px, 2fr) 3fr;
  gap: 0 12px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.tf-trace-main:hover {
  background: var(--canvas);
}
.tf-trace-main:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.tf-trace-ico {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-1);
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.tf-trace-ico.k-model {
  background: var(--lilac);
  color: var(--lilac-ink);
}
.tf-trace-ico.k-tool {
  background: var(--sky);
  color: var(--sky-ink);
}
.tf-trace-ico.k-search,
.tf-trace-ico.k-memory {
  background: var(--mint);
  color: var(--mint-ink);
}
.tf-trace-ico.k-approval {
  background: var(--butter);
  color: var(--butter-ink);
}
.tf-trace-ico.k-error {
  background: var(--blush);
  color: var(--blush-ink);
}
.tf-trace-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tf-trace-label b {
  font: 500 13px/18px var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-trace-label small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-trace-bar {
  position: relative;
  height: 24px;
  display: block;
  border-radius: var(--radius-1);
  background: var(--canvas);
}
.tf-trace-bar i {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: var(--radius-1);
  background: var(--ink-muted);
  min-width: 4px;
}
.tf-trace-row.is-error .tf-trace-bar i {
  background: var(--blush-ink);
}
.tf-trace-row.is-running .tf-trace-bar i {
  background: var(--sky-ink);
  animation: tf-pulse 1.4s ease-in-out infinite;
}
.tf-trace-bar em {
  position: absolute;
  right: 8px;
  top: 4px;
  font: 500 11px/16px var(--font-sans);
  font-style: normal;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.tf-trace-detail {
  margin: 0 12px 12px 48px;
}
.tf-trace-detail pre {
  margin: 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--canvas);
  font: 500 12px/18px var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 240px;
  overflow: auto;
}
.tf-trace-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 12px;
  border-top: 1px solid var(--line);
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-trace-foot b {
  color: var(--ink);
  font-weight: 600;
}
.tf-usage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tf-usage-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-usage-top b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tf-usage-track {
  display: block;
  height: 6px;
  border-radius: var(--radius-1);
  background: var(--surface-sunken);
  overflow: hidden;
}
.tf-usage-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-1);
  transition: width var(--dur-slow) var(--ease-out);
}
.tf-usage-fill.tf-sf-mint {
  background: var(--mint-ink);
}
.tf-usage-fill.tf-sf-butter {
  background: var(--butter-ink);
}
.tf-usage-fill.tf-sf-blush {
  background: var(--blush-ink);
}
.tf-usage small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}

/* Commerce */
.tf-art {
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  aspect-ratio: 1;
  width: 100%;
  box-sizing: border-box;
  color: var(--ink);
  overflow: hidden;
  flex: none;
}
.tf-art svg {
  width: 62%;
  height: auto;
  opacity: 0.85;
}
.tf-art.tf-bg-sky {
  background: var(--sky);
}
.tf-art.tf-bg-mint {
  background: var(--mint);
}
.tf-art.tf-bg-lilac {
  background: var(--lilac);
}
.tf-art.tf-bg-butter {
  background: var(--butter);
}
.tf-art.tf-bg-blush {
  background: var(--blush);
}
.tf-art.tf-bg-plain {
  background: var(--surface-sunken);
}
.tf-price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-variant-numeric: tabular-nums;
}
.tf-price b {
  font: 600 14px/20px var(--font-sans);
  color: var(--ink);
}
.tf-price s {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-price-save {
  font: 600 12px/16px var(--font-sans);
  color: var(--blush-ink);
}
.tf-price-lg b {
  font: 600 22px/28px var(--font-sans);
  letter-spacing: -0.02em;
}
.tf-price-lg s {
  font-size: 14px;
  line-height: 22px;
}
.tf-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-rating b {
  color: var(--ink);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.tf-stars {
  display: inline-flex;
}
.tf-star {
  position: relative;
  display: inline-flex;
  color: var(--line-strong);
}
.tf-star-fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--butter-ink);
  display: inline-flex;
}
.tf-star .tf-ico,
.tf-star-fill .tf-ico {
  fill: currentColor;
  stroke-width: 1.5;
  flex: none;
}
.tf-product {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 8px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  min-width: 0;
}
.tf-product:hover {
  transform: none;
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-product-media {
  position: relative;
}
.tf-product-media .tf-art {
  border-radius: 0;
  aspect-ratio: 4 / 3.4;
}
.tf-product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
}
.tf-product-badge .tf-badge {
  background: var(--surface);
}
.tf-product-wish {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: var(--density-control);
  border: 0;
  border-radius: var(--radius-1);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-product-wish.on {
  color: var(--blush-ink);
}
.tf-product-wish.on .tf-ico {
  fill: currentColor;
}
.tf-product-wish:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-product-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px;
  min-width: 0;
}
.tf-product-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tf-product-name {
  font: 500 14px/20px var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-product-meta {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  min-height: var(--control-sm);
}
.tf-variants {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tf-variants > legend {
  padding: 0;
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
}
.tf-variants-cur {
  font-weight: 500;
  color: var(--ink-muted);
}
.tf-variants-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tf-variant {
  position: relative;
  height: var(--density-control);
  min-width: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
}
.tf-variant:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px var(--ink-muted);
}
.tf-variant.on {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.tf-variant.off {
  color: var(--ink-subtle);
  cursor: not-allowed;
  background: repeating-linear-gradient(135deg, transparent 0 6px, var(--surface-sunken) 6px 7px);
}
.tf-variant:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-variants-row.colors .tf-variant {
  width: 40px;
  min-width: 0;
  padding: 0;
  display: grid;
  place-items: center;
}
.tf-swatch {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-1);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.tf-variants-row.colors .tf-variant.off .tf-swatch {
  opacity: 0.35;
}
.tf-cartline {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.tf-cartline:last-child {
  border-bottom: 0;
}
.tf-cartline-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tf-cartline-text b {
  font: 500 14px/20px var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-cartline-text span {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-cartline-note {
  color: var(--butter-ink) !important;
  font-weight: 500 !important;
}
.tf-cartline-total {
  font: 600 14px/20px var(--font-sans);
  font-variant-numeric: tabular-nums;
  min-width: 72px;
  text-align: right;
}
.tf-number-sm {
  height: var(--density-control);
}
.tf-number-sm .tf-number-input {
  width: 32px;
  display: inline-block;
  text-align: center;
}
.tf-summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.tf-summary-title {
  font: 600 14px/20px var(--font-sans);
}
.tf-summary-line {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.tf-summary-thumb {
  position: relative;
  display: block;
}
.tf-summary-thumb i {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  box-sizing: border-box;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-foreground);
  font: 600 11px/20px var(--font-sans);
  font-style: normal;
  text-align: center;
}
.tf-summary-name {
  display: flex;
  flex-direction: column;
  font: 500 13px/18px var(--font-sans);
  min-width: 0;
}
.tf-summary-name small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-summary-line > b {
  font: 500 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.tf-freeship {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--canvas);
  font: 500 13px/18px var(--font-sans);
}
.tf-coupon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.tf-coupon-on {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--density-control);
  padding: 0 8px 0 16px;
  border-radius: var(--radius-pill);
  background: var(--mint);
  font: 500 13px/18px var(--font-sans);
}
.tf-coupon-on .tf-linkbtn {
  margin-left: auto;
  color: var(--ink);
}
.tf-summary-rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tf-summary-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 500 14px/20px var(--font-sans);
}
.tf-summary-rows dt {
  color: var(--ink-muted);
}
.tf-summary-rows dd {
  margin: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tf-summary-rows .save dd {
  color: var(--mint-ink);
}
.tf-summary-rows .total {
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.tf-summary-rows .total dt {
  color: var(--ink);
  font-weight: 600;
}
.tf-summary-rows .total dd {
  font: 600 18px/24px var(--font-sans);
}
.tf-summary-rows .vat {
  font-size: 12px;
  line-height: 16px;
}
.tf-summary-rows .vat dd {
  font-weight: 500;
  color: var(--ink-muted);
}
.tf-csteps {
  /* one row at every width: steps shrink to their numbers instead of wrapping */
  container: tf-csteps / inline-size;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-csteps li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tf-cstep-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-csteps li + li::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: var(--line-strong);
}
.tf-csteps li.done + li::before,
.tf-csteps li.done::before {
  background: var(--primary);
}
.tf-csteps button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-sm);
  padding: 0 12px 0 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
}
.tf-csteps button:disabled {
  cursor: default;
}
.tf-csteps button {
  min-width: 0;
  max-width: 100%;
}
.tf-csteps.compact li:not(.cur) .tf-cstep-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tf-csteps.compact li:not(.cur) button {
  padding: 0 4px;
}
.tf-csteps.compact li + li::before {
  width: 12px;
}
@container tf-csteps (max-width: 560px) {
  .tf-csteps li:not(.cur) .tf-cstep-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tf-csteps li:not(.cur) button {
    padding: 0 4px;
  }
  .tf-csteps li + li::before {
    width: 12px;
  }
}
.tf-csteps li.cur button {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-csteps li.done button {
  color: var(--ink);
}
.tf-csteps li.done button:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-csteps button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-cstep-n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-1);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font: 600 11px/1 var(--font-sans);
}
.tf-csteps li.cur .tf-cstep-n,
.tf-csteps li.done .tf-cstep-n {
  background: var(--primary);
  color: var(--primary-foreground);
}
.tf-otl {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.tf-otl-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  min-width: 0;
}
.tf-otl-step::before {
  content: "";
  position: absolute;
  top: 11px;
  right: 50%;
  width: calc(100% + 8px);
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.tf-otl-step:first-child::before {
  display: none;
}
.tf-otl-step.done::before {
  background: var(--primary);
}
.tf-otl-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  color: var(--primary-foreground);
  margin-bottom: 4px;
}
.tf-otl-step.done .tf-otl-dot {
  background: var(--primary);
  box-shadow: none;
}
.tf-otl-step.cur .tf-otl-dot {
  box-shadow: 0 0 0 4px var(--sky);
}
.tf-otl-step b {
  font: 500 12px/16px var(--font-sans);
}
.tf-otl-step small {
  font: 500 11px/14px var(--font-sans);
  color: var(--ink-muted);
}
.tf-otl.cancelled .tf-otl-step {
  opacity: 0.45;
}
.tf-otl-cancel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* System screens, plans, auth */
.tf-status-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 24px;
}
.tf-status-art {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}
.tf-status-code {
  font: 600 120px/1 var(--font-sans);
  letter-spacing: -0.04em;
  color: var(--line);
  user-select: none;
}
.tf-status-art .tf-tinticon {
  position: absolute;
  box-shadow: 0 0 0 8px var(--canvas);
}
.tf-status-art:not(:has(.tf-status-code)) .tf-tinticon {
  position: static;
}
.tf-status-screen h1 {
  margin: 0;
  font: 600 22px/28px var(--font-sans);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.tf-status-screen p {
  margin: 0;
  font: 500 14px/20px var(--font-sans);
  color: var(--ink-muted);
  text-wrap: pretty;
}
.tf-status-ref {
  font: 500 12px/16px var(--font-mono);
  color: var(--ink-subtle);
}
.tf-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.tf-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tf-plan.featured {
  background: var(--frame);
  color: var(--on-frame);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
}
.tf-plan.featured .tf-plan-head span:not(.tf-badge),
.tf-plan.featured .tf-plan-price span,
.tf-plan.featured .tf-plan-price s,
.tf-plan.featured .tf-plan-feats li.no {
  color: var(--on-frame-muted);
}
.tf-plan.featured .tf-btn-primary {
  background: var(--count);
  color: var(--on-count);
}
.tf-plan-flag {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--count);
  color: var(--on-count);
  font: 600 11px/14px var(--font-sans);
}
.tf-plan-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-plan.featured .tf-plan-head {
  padding-right: 104px;
}
.tf-plan-head b {
  font: 600 18px/24px var(--font-sans);
}
.tf-plan-head span:not(.tf-badge) {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
/* "Current plan" next to the name, and the note under the price */
.tf-plan-head .tf-plan-current {
  align-self: flex-start;
}
.tf-plan-note {
  margin: -4px 0 0;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
a.tf-plan-cta {
  text-decoration: none;
}
.tf-plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.tf-plan-price b {
  font: 600 28px/32px var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tf-plan-price span {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-plan-price s {
  font: 500 14px/20px var(--font-sans);
  color: var(--ink-subtle);
}
.tf-plan-cta {
  width: 100%;
}
.tf-plan-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font: 500 13px/18px var(--font-sans);
}
.tf-plan-feats li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.tf-plan-feats .tf-ico {
  margin-top: 2px;
  flex: none;
  color: var(--mint-ink);
}
.tf-plan.featured .tf-plan-feats .tf-ico {
  color: var(--on-frame-success);
}
.tf-plan-feats li.no {
  color: var(--ink-subtle);
}
.tf-plan-feats li.no .tf-ico {
  color: var(--ink-subtle);
}
.tf-auth {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 32px;
  box-sizing: border-box;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
}
.tf-auth-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tf-auth-title {
  margin: 0;
  font: 600 22px/28px var(--font-sans);
  letter-spacing: -0.015em;
}
.tf-auth-text {
  margin: 0;
  font: 500 14px/20px var(--font-sans);
  color: var(--ink-muted);
}
.tf-auth-foot {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
  text-align: center;
}
.tf-brand-word {
  font: 600 18px/24px var(--font-sans);
  letter-spacing: -0.02em;
}
@media (max-width: 640px) {
  .tf-trace-head {
    display: none;
  }
  .tf-trace-main {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .tf-trace-bar {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
  .tf-cartline {
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }
  .tf-cartline-total {
    grid-column: 2 / -1;
    text-align: left;
  }
  .tf-otl small {
    display: none;
  }
  .tf-status-code {
    font-size: 88px;
  }
  .tf-composer-hint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tf-msg,
  .tf-caret,
  .tf-typing i,
  .tf-spin,
  .tf-reason.live .tf-reason-head {
    animation: none !important;
  }
}
/* the same for an app that turns motion off: data-motion="off" */
[data-motion="off"] .tf-msg,
[data-motion="off"] .tf-caret,
[data-motion="off"] .tf-typing i,
[data-motion="off"] .tf-spin,
[data-motion="off"] .tf-reason.live .tf-reason-head {
  animation: none !important;
}

/* 04-status-agents-operations.css */
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
/* ════════ Kit 4: status shapes, approvals A–D, foundations, agent & operations ════════ */
/* Status = shape + colour: ok dot · running pulsing dot · signal diamond · warn triangle · danger square · idle ring */
.tf-shape {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  background: currentColor;
}
.tf-shape-dot,
.tf-shape-pulse {
  border-radius: var(--radius-full);
}
.tf-shape-pulse {
  animation: tf-pulse 1.8s ease-out infinite;
}
.tf-shape-diamond {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border-radius: 1px;
}
.tf-shape-triangle {
  width: 0;
  height: 0;
  background: none;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid currentColor;
}
.tf-shape-square {
  border-radius: 2px;
}
.tf-shape-ring {
  background: none;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.tf-st-ok {
  color: var(--ok);
}
.tf-st-running {
  color: var(--info);
}
.tf-st-signal {
  color: var(--signal);
}
.tf-st-warn {
  color: var(--warn);
}
.tf-st-danger {
  color: var(--danger);
}
.tf-st-idle {
  color: var(--idle);
}
.tf-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink);
  white-space: nowrap;
}
.tf-status.sm {
  font-size: 12px;
  line-height: 16px;
  gap: 6px;
}
/* Badge dots take the same shapes */
.tf-badge-dot {
  width: 6px;
  height: 6px;
}
.tf-badge-highlight .tf-badge-dot {
  border-radius: 1px;
  transform: rotate(45deg);
  width: 6px;
  height: 6px;
}
.tf-badge-warning .tf-badge-dot {
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid currentColor;
}
.tf-badge-danger .tf-badge-dot {
  border-radius: 1.5px;
}
.tf-badge-neutral .tf-badge-dot {
  background: none;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Approval A–D */
.tf-approval {
  padding: 0;
  gap: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.tf-approval:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-approval-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 16px;
  background: var(--signal-bg);
  color: var(--signal);
}
.tf-approval-top > b {
  font: 600 13px/18px var(--font-sans);
  color: var(--ink);
}
.tf-approval-who {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink);
}
.tf-approval-age {
  margin-left: auto;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tf-family {
  background: var(--surface) !important;
  gap: 4px;
}
.tf-approval-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 0;
}
.tf-approval-title {
  margin: 0;
  font: 600 15px/20px var(--font-sans);
  color: var(--ink);
}
.tf-approval-reason {
  margin: 0;
  font: 500 13px/20px var(--font-sans);
  color: var(--ink-muted);
}
.tf-approval-body {
  margin-top: 4px;
}
.tf-approval-opts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
}
.tf-approval-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--density-control);
  padding: 0 12px 0 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink);
  font: 500 13px/18px var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.tf-approval-opt:hover {
  background: var(--line);
}
.tf-approval-opt.primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.tf-approval-opt.primary:hover {
  filter: brightness(1.12);
}
.tf-approval-opt > span {
  flex: 1;
}
.tf-approval-opt kbd {
  display: grid;
  place-items: center;
  width: 32px;
  height: var(--control-sm);
  border-radius: var(--radius-1);
  background: var(--surface);
  color: var(--ink);
  font: 600 12px/1 var(--font-mono);
  flex: none;
}
.tf-approval-opt.primary kbd {
  background: var(--frame-strong);
  color: var(--primary-foreground);
}
.tf-approval-opt:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-approval-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 4px 44px;
}
.tf-approval-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-approval-foot > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tf-approval-trace {
  margin-left: auto;
}
.tf-approval.compact .tf-approval-opts {
  flex-direction: row;
  flex-wrap: wrap;
}
.tf-approval.compact .tf-approval-opts > div {
  flex: 1 1 200px;
}
.tf-approval.tf-approval-done {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: left;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  box-shadow: none;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-approval-done b {
  color: var(--ink);
  font-weight: 600;
}
.tf-approval-done.yes .tf-shape {
  color: var(--ok);
}
.tf-approval-done.no .tf-shape {
  color: var(--idle);
}
.tf-approval-done-what {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 160px;
}
.tf-approval-done-by {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.tf-approval-done-note {
  flex-basis: 100%;
  color: var(--ink);
}
.tf-inbox {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-inbox-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--signal);
  text-align: left;
  cursor: pointer;
}
.tf-inbox-row:hover {
  background: var(--canvas);
}
.tf-inbox-row.on {
  background: var(--surface-sunken);
}
.tf-inbox-row:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.tf-inbox-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--ink);
}
.tf-inbox-text b {
  font: 500 14px/20px var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-inbox-text small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-inbox-age {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.tf-inbox-age.warn {
  color: var(--warn);
}

/* Foundations */
.tf-kbds {
  display: inline-flex;
  gap: 4px;
}
.tf-kbd2 {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: var(--radius-1);
  background: var(--surface-sunken);
  box-shadow: inset 0 -1px 0 var(--line-strong);
  color: var(--ink);
  font: 500 12px/1 var(--font-sans);
}
.tf-kv {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.tf-kv > div {
  display: grid;
  grid-template-columns: minmax(96px, 40%) minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font: 500 13px/18px var(--font-sans);
}
.tf-kv > div:last-child {
  border-bottom: 0;
}
.tf-kv.dense > div {
  padding: 8px 0;
}
.tf-kv dt {
  color: var(--ink-muted);
}
.tf-kv dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  min-width: 0;
}
.tf-kv-empty {
  color: var(--ink-subtle);
}
.tf-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
.tf-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  border: 2px solid var(--line-strong);
  border-top-color: var(--ink);
  animation: tf-spin 0.8s linear infinite;
  flex: none;
}
.tf-spinner.lg {
  width: 24px;
  height: 24px;
  border-width: 2.5px;
}
.tf-collapse {
  border-bottom: 1px solid var(--line);
}
.tf-collapse-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: 500 14px/20px var(--font-sans);
}
.tf-collapse-head:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}
.tf-collapse-chev {
  color: var(--ink-muted);
  transition: transform var(--dur-base) var(--ease-out);
}
.tf-collapse.open .tf-collapse-chev {
  transform: rotate(90deg);
}
.tf-collapse-meta {
  margin-left: auto;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-collapse-body {
  padding: 0 0 16px 22px;
}
.tf-ctx {
  position: relative;
}
.tf-ctx-menu {
  position: absolute;
  z-index: 70;
}
.tf-split {
  display: grid;
  grid-template-columns: var(--split) 1px minmax(0, 1fr);
  min-height: 0;
}
.tf-split-a,
.tf-split-b {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}
.tf-split-handle {
  position: relative;
  background: var(--line);
  cursor: col-resize;
}
.tf-split-handle::before {
  content: "";
  position: absolute;
  inset: 0 -4px;
}
.tf-split-handle:hover,
.tf-split-handle:focus-visible {
  background: var(--focus);
  outline: none;
}
.tf-tree,
.tf-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tf-tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--density-control);
  padding-right: 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink);
}
.tf-tree-row:hover {
  background: var(--canvas);
}
.tf-tree-row.on {
  background: var(--surface-sunken);
  font-weight: 500;
}
.tf-tree-row:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.tf-tree-chev {
  color: var(--ink-muted);
  transition: transform var(--dur-base) var(--ease-out);
  flex: none;
}
.tf-tree-chev.open {
  transform: rotate(90deg);
}
.tf-tree-sp {
  width: 13px;
  flex: none;
}
.tf-tree-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-tree-meta {
  font: 500 12px/16px var(--font-mono);
  color: var(--ink-muted);
}
.tf-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: var(--radius-sm);
  cursor: text;
}
.tf-inline:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-inline:focus-visible {
  outline: 2px solid var(--focus);
}
.tf-inline-ico {
  opacity: 0;
  color: var(--ink-muted);
}
.tf-inline:hover .tf-inline-ico,
.tf-inline:focus-visible .tf-inline-ico {
  opacity: 1;
}
.tf-inline.right {
  justify-content: flex-end;
}
.tf-inline-input {
  height: var(--control-sm);
  padding: 0 12px;
  font-size: 13px;
}
.tf-log {
  border-radius: var(--radius-md);
  background: var(--frame);
  color: var(--on-frame);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tf-log pre {
  margin: 0;
  padding: 12px 0;
  overflow: auto;
  font: 500 12px/20px var(--font-mono);
  flex: 1;
}
.tf-log-line {
  display: block;
  padding: 0 16px 0 0;
  white-space: pre;
}
.tf-log-line i {
  display: inline-block;
  width: 40px;
  padding-right: 12px;
  text-align: right;
  font-style: normal;
  color: var(--on-frame-muted);
  opacity: 0.6;
  user-select: none;
}
.tf-log-line em {
  font-style: normal;
  color: var(--on-frame-muted);
  margin-right: 12px;
}
.tf-log-line.lv-ok {
  color: var(--on-frame-success);
}
.tf-log-line.lv-err {
  color: var(--on-frame-danger);
}
.tf-log-line.lv-warn {
  color: var(--on-frame-warn);
}
.tf-log-line.lv-hl {
  color: var(--on-frame-strong);
  font-weight: 600;
}
.tf-log-line.fresh {
  animation: tf-log-in var(--dur-slow) var(--ease-out);
}
@keyframes tf-log-in {
  from {
    background: var(--frame-active);
  }
  to {
    background: transparent;
  }
}
.tf-secret {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 4px 4px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.tf-secret-val {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.tf-secret-meta {
  font: 500 12px/16px var(--font-sans);
  white-space: nowrap;
}
.tf-money {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tf-money-input {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  padding-right: 40px !important;
}
.tf-money-vat {
  width: auto;
  flex: none;
  padding-right: 36px;
}
.tf-settings {
  display: flex;
  flex-direction: column;
}
.tf-settings-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 1.6fr);
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.tf-settings-row:first-child {
  padding-top: 0;
}
.tf-settings-row:last-child {
  border-bottom: 0;
}
.tf-settings-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-settings-label b {
  font: 500 14px/20px var(--font-sans);
}
.tf-settings-label span {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-settings-ctl {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.tf-settings-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 24px;
}
.tf-shortcuts {
  max-width: 760px;
}
.tf-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 32px;
}
.tf-shortcuts-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-shortcuts-group .tf-menu-label {
  padding: 0 0 4px;
}
.tf-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--control-sm);
  font: 500 13px/18px var(--font-sans);
}
.tf-statcell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  min-width: 0;
}
.tf-statcell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tf-statcell-label {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-statcell-mid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.tf-statcell-value {
  display: block;
  font: 600 22px/28px var(--font-sans);
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tf-statcell-spark {
  flex: 0 1 88px;
  min-width: 48px;
}
.tf-statcell-spark svg {
  max-width: 100%;
  height: auto;
}
.tf-delta {
  margin-top: 4px;
  font: 500 12px/16px var(--font-sans);
}
.tf-delta.good {
  color: var(--ok);
}
.tf-delta.bad {
  color: var(--danger);
}
.tf-uptime {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tf-uptime-bar {
  display: flex;
  gap: 2px;
  height: 28px;
}
.tf-uptime-bar i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--surface-sunken);
  transition: transform var(--dur-fast);
}
.tf-uptime-bar i:hover {
  transform: scaleY(1.15);
}
.tf-uptime-bar i.st-ok {
  background: var(--ok);
}
.tf-uptime-bar i.st-warn {
  background: var(--warn);
}
.tf-uptime-bar i.st-danger {
  background: var(--danger);
}
.tf-uptime-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-uptime-foot b {
  color: var(--ink);
}
.tf-meter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Agents */
.tf-agentcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  min-width: 0;
}
.tf-agentcard.click {
  cursor: pointer;
  transition: box-shadow var(--dur-fast);
}
.tf-agentcard.click:hover {
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-agentcard.click:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-agentcard-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tf-agentcard-top .tf-option-text {
  flex: 1;
  padding: 0;
}
.tf-agentdetails {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tf-agentdetails-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 16px;
  text-align: center;
}
.tf-agentdetails-id > b {
  font: 600 14px/20px var(--font-sans);
  margin-top: 4px;
}
.tf-chatlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.tf-chatlist-scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  min-height: 0;
}
.tf-chatlist-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tf-chatlist-group .tf-menu-label {
  display: flex;
  align-items: center;
  padding: 4px 12px;
}
.tf-chatrow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.tf-chatrow:hover {
  background: var(--canvas);
}
.tf-chatrow.on {
  background: var(--surface-sunken);
}
.tf-chatrow:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.tf-chatrow-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tf-chatrow-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.tf-chatrow-top b {
  font: 500 14px/20px var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-chatrow-top small {
  font: 500 11px/14px var(--font-sans);
  color: var(--ink-muted);
  white-space: nowrap;
  padding-top: 4px;
}
.tf-chatrow-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tf-chatrow-pin {
  color: var(--ink-subtle);
}
.tf-chatws {
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
  align-items: stretch;
}
.tf-chatws.with-details {
  grid-template-columns: 304px minmax(0, 1fr) 304px;
}
.tf-chatws > div {
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tf-chatws-thread {
  padding: 24px !important;
}
.tf-hits {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-hit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.tf-hit:hover {
  background: var(--canvas);
}
.tf-hit-top {
  display: flex;
  justify-content: space-between;
  font: 500 13px/18px var(--font-sans);
}
.tf-hit-top small {
  font-weight: 500;
  color: var(--ink-muted);
}
.tf-hit-text {
  font: 500 13px/20px var(--font-sans);
  color: var(--ink-muted);
}
.tf-hit mark {
  background: var(--butter);
  color: var(--ink);
  border-radius: var(--radius-1);
  padding: 0 2px;
}
.tf-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-thinking .tf-typing {
  padding: 0;
}
.tf-feedback {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tf-feedback-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  max-width: 480px;
}
.tf-feedback-done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ok);
}
.tf-activity {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tf-activity-group .tf-menu-label {
  padding: 0 0 8px;
}
.tf-activity ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tf-activity-item {
  display: grid;
  grid-template-columns: 48px 16px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-bottom: 16px;
  position: relative;
}
.tf-activity-item:not(:last-child) .tf-activity-spine::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 16px;
  bottom: -16px;
  width: 2px;
  background: var(--line);
}
.tf-activity-spine {
  position: relative;
  display: grid;
  place-items: center;
  height: 18px;
}
.tf-activity-time {
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-muted);
  text-align: right;
}
.tf-activity-text {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-activity-text b {
  color: var(--ink);
  font-weight: 500;
}
.tf-briefing {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tf-briefing-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tf-briefing-head .tf-option-text {
  padding: 0;
}
.tf-briefing-text {
  margin: 0;
  font: 500 14px/20px var(--font-sans);
}
.tf-briefing-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--density-control);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--canvas);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: 500 13px/18px var(--font-sans);
}
.tf-briefing-item > span:not(.tf-shape) {
  flex: 1;
}
.tf-briefing-item:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-briefing-sugg {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 500 13px/20px var(--font-sans);
}
.tf-budgetstop {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tf-memory {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tf-memitem {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--canvas);
}
.tf-memitem p {
  margin: 0;
  font: 500 14px/20px var(--font-sans);
}
.tf-memitem-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-diff {
  border-radius: var(--radius-md);
  background: var(--canvas);
  overflow: hidden;
}
.tf-diff-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.tf-diff-head .tf-option-text {
  padding: 0;
}
.tf-diff-body {
  margin: 0;
  padding: 12px 0;
  font: 500 12px/20px var(--font-mono);
  overflow-x: auto;
}
.tf-diff-body span {
  display: block;
  padding-right: 16px;
  white-space: pre-wrap;
}
.tf-diff-body i {
  display: inline-block;
  width: 32px;
  text-align: center;
  font-style: normal;
  color: var(--ink-muted);
}
.tf-diff-body .add {
  background: var(--diff-add-bg);
}
.tf-diff-body .add i {
  color: var(--diff-add);
}
.tf-diff-body .del {
  background: var(--diff-del-bg);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--diff-del) 50%, transparent);
}
.tf-diff-body .del i {
  color: var(--diff-del);
}
.tf-triggers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
}
.tf-trigger:hover {
  background: var(--canvas);
}
.tf-trigger .tf-option-text {
  flex: 1;
  padding: 0;
}
.tf-trigger.off .tf-option-text b {
  color: var(--ink-muted);
}
.tf-trigger-next {
  font: 500 12px/16px var(--font-mono);
  color: var(--ink-muted);
  white-space: nowrap;
}
.tf-sched {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(0, 1fr));
  grid-template-rows: auto calc(var(--rows) * var(--row-h));
  column-gap: 4px;
  min-width: 640px;
}
.tf-sched-day {
  text-align: center;
  padding-bottom: 8px;
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tf-sched-times {
  display: flex;
  flex-direction: column;
}
.tf-sched-times span {
  height: var(--row-h);
  font: 500 11px/14px var(--font-mono);
  color: var(--ink-muted);
  transform: translateY(-7px);
}
.tf-sched-col {
  position: relative;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(
    to bottom,
    var(--canvas) 0 calc(var(--row-h) - 1px),
    var(--line) calc(var(--row-h) - 1px) var(--row-h)
  );
}
.tf-sched-ev {
  position: absolute;
  left: 2px;
  right: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--radius-1);
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  color: var(--ink);
}
.tf-sched-ev b {
  font: 500 11px/14px var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-sched-ev small {
  font: 500 11px/14px var(--font-sans);
  color: var(--ink-muted);
}
.tf-sched-ev.self {
  box-shadow: inset 0 0 0 1.5px var(--signal);
}
.tf-sched-ev:focus-visible {
  outline: 2px solid var(--focus);
}
.tf-org {
  overflow-x: auto;
  padding-bottom: 8px;
}
.tf-org ul {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 24px 0 0;
  list-style: none;
  position: relative;
}
.tf-org > ul {
  padding-top: 0;
}
.tf-org li {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.tf-org ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 12px;
  width: 2px;
  background: var(--line);
}
.tf-org ul ul > li::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
}
.tf-org ul ul > li:first-child::before {
  left: 50%;
}
.tf-org ul ul > li:last-child::before {
  right: 50%;
}
.tf-org ul ul > li:only-child::before {
  display: none;
}
.tf-org ul ul > li::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  height: 12px;
  width: 2px;
  background: var(--line);
}
.tf-org-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  white-space: nowrap;
}
.tf-org-node.root {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.tf-org-node .tf-option-text {
  padding: 0;
}
.tf-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px;
  border-radius: var(--radius-xl);
  background: var(--frame);
  color: var(--on-frame);
  text-align: center;
}
.tf-voice-name {
  font: 600 18px/24px var(--font-sans);
  margin-top: 8px;
}
.tf-voice-state {
  font: 500 13px/18px var(--font-sans);
  color: var(--on-frame-muted);
}
.tf-voice-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
}
.tf-voice-wave i {
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: var(--on-frame);
  opacity: 0.8;
  animation: tf-wave 1.1s ease-in-out infinite;
}
.tf-voice.is-thinking .tf-voice-wave i {
  animation-duration: 2.2s;
  opacity: 0.4;
}
.tf-voice.is-idle .tf-voice-wave i {
  animation: none;
  opacity: 0.3;
}
@keyframes tf-wave {
  0%,
  100% {
    height: 8px;
  }
  50% {
    height: var(--density-control);
  }
}
.tf-voice-transcript {
  margin: 0;
  max-width: 480px;
  font: 500 14px/20px var(--font-sans);
  color: var(--on-frame);
}
.tf-voice-end {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius-1);
  background: var(--blush-ink);
  color: var(--surface);
  cursor: pointer;
}
.tf-voice-end:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Operations */
.tf-conn {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tf-conn .tf-option-text {
  flex: 1;
  padding: 0;
}
.tf-conn-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: var(--density-control);
  border-radius: var(--radius-1);
  background: var(--surface-sunken);
  color: var(--ink);
  flex: none;
  overflow: hidden;
}
.tf-conn-ico img,
.tf-conn-ico svg {
  max-width: 24px;
  max-height: 24px;
}
.tf-connbanner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-sm);
  padding: 4px 16px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink);
  background: var(--warn-bg);
}
.tf-connbanner .tf-shape {
  color: var(--warn);
}
.tf-connbanner.offline {
  background: var(--danger-bg);
}
.tf-connbanner.offline .tf-shape {
  color: var(--danger);
}
.tf-connbanner .tf-linkbtn {
  height: 24px;
  color: var(--ink);
  text-decoration: underline;
}
.tf-server {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  min-width: 0;
}
.tf-server-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tf-server-top .tf-option-text {
  flex: 1;
  padding: 0;
}
.tf-server-foot {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-pipeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(120px, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}
.tf-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 16px;
  border-radius: var(--radius-md);
  background: var(--canvas);
}
.tf-stage b {
  font: 500 13px/18px var(--font-sans);
  margin-top: 4px;
}
.tf-stage small {
  font-size: 12px;
  color: var(--ink-muted);
}
.tf-stage::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 3px;
  border-radius: 2px;
  background: transparent;
}
.tf-stage.st-running::after {
  background: var(--info);
  animation: tf-pulse 1.4s ease-in-out infinite;
}
.tf-stage.st-danger::after {
  background: var(--danger);
}
.tf-stage.st-done::after,
.tf-stage.st-ok::after {
  background: var(--ok);
}
.tf-stage.st-signal::after {
  background: var(--signal);
}
.tf-stage .tf-shape {
  color: var(--idle);
}
.tf-stage.st-done .tf-shape,
.tf-stage.st-ok .tf-shape {
  color: var(--ok);
}
.tf-stage.st-running .tf-shape {
  color: var(--info);
}
.tf-stage.st-danger .tf-shape {
  color: var(--danger);
}
.tf-stage.st-signal .tf-shape {
  color: var(--signal);
}
.tf-trunc {
  display: inline-block;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.tf-domains {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-domainrow {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 96px 120px;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.tf-domainrow:hover {
  background: var(--canvas);
}
.tf-domainrow .tf-option-text {
  padding: 0;
}
.tf-domainrow-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tf-domainrow-cell small {
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tf-scroll-x {
  overflow-x: auto;
  min-width: 0;
}
.tf-mailauth-cell {
  border: 0;
  background: none;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tf-mailauth-cell:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-neg {
  color: var(--danger);
}
.tf-pnl tr.section td {
  padding-top: 24px;
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 0;
  height: auto;
}
.tf-pnl tr.subtotal td {
  font-weight: 600;
  border-top: 1px solid var(--line-strong);
}
.tf-pnl tr.total td {
  font: 600 15px/20px var(--font-sans);
  border-top: 2px solid var(--ink);
}
.tf-receipt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tf-receipt-src {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tf-receipt-src .tf-option-text {
  padding: 0;
}
.tf-receipt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.tf-receipt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--canvas);
}
.tf-receipt-field small {
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tf-receipt-field b {
  font: 500 14px/20px var(--font-sans);
}
.tf-conf {
  font: 500 11px/14px var(--font-sans);
  color: var(--ok);
}
.tf-conf.low {
  color: var(--warn);
}
.tf-receipt-sugg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--signal-bg);
  font: 500 13px/18px var(--font-sans);
}
.tf-receipt-sugg .tf-shape {
  color: var(--signal);
}

/* Mail */
.tf-acct {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  max-width: 100%;
}
.tf-acct .tf-option-text {
  padding: 0;
  min-width: 0;
}
.tf-acct:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-acct-list {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow: auto;
}
.tf-acct-list .tf-option {
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
}
.tf-acct-list .tf-option.on {
  background: var(--surface-sunken);
}
.tf-inboxlist {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tf-mailrow {
  display: flex;
  gap: 12px;
  padding: 12px 16px 12px 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.tf-mailrow:hover {
  background: var(--canvas);
}
.tf-mailrow.on {
  background: var(--surface-sunken);
}
.tf-mailrow:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.tf-mailrow-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: var(--radius-full);
  flex: none;
}
.tf-mailrow.unread .tf-mailrow-dot {
  background: var(--info);
}
.tf-mailrow-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tf-mailrow-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.tf-mailrow-top b {
  font: 500 14px/20px var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-mailrow.unread .tf-mailrow-top b {
  font-weight: 600;
}
.tf-mailrow-top small {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.tf-mailrow-subject {
  font: 500 13px/18px var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-mailrow-snippet {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tf-mailrow-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-muted);
}
.tf-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tf-thread-subject {
  margin: 0 0 8px;
  font: 600 18px/24px var(--font-sans);
}
.tf-threadmsg {
  border-radius: var(--radius-md);
  background: var(--canvas);
}
.tf-threadmsg.open {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tf-threadmsg.agent {
  box-shadow: inset 3px 0 0 var(--signal);
}
.tf-threadmsg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.tf-threadmsg-head .tf-option-text {
  flex: 1;
  padding: 0;
  min-width: 0;
}
.tf-threadmsg-head small {
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-threadmsg-note {
  font-weight: 500;
  color: var(--signal);
}
.tf-threadmsg-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 16px 60px;
  font: 500 14px/20px var(--font-sans);
  white-space: pre-wrap;
}
.tf-sig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
.tf-sig-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tf-paper {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-sig-paper {
  padding: 20px;
  font: 500 13px/20px var(--font-sans);
}
.tf-sig-paper p {
  margin: 0 0 8px;
  color: var(--paper-muted);
}
.tf-sig-paper small {
  display: block;
  margin-top: 8px;
  color: var(--paper-subtle);
}
.tf-attprev {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr);
  gap: 24px;
}
.tf-attprev-doc {
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  padding: 16px;
  min-height: 360px;
  overflow: auto;
}

/* App chrome */
.tf-tabbar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--frame);
  border-radius: var(--radius-1) var(--radius-1) 0 0;
}
.tf-tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  border: 0;
  background: none;
  color: var(--on-frame-muted);
  font: 500 11px/14px var(--font-sans);
  cursor: pointer;
  border-radius: var(--radius-1);
}
.tf-tabbar-item {
  min-width: 0;
}
.tf-tabbar-label {
  max-width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-tabbar-item.on {
  color: var(--on-frame);
  background: var(--frame-hover);
}
.tf-tabbar-item:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.tf-tabbar-ico {
  position: relative;
  display: inline-flex;
}
.tf-tabbar-ico .tf-dotcount {
  top: -6px;
  right: -10px;
  box-shadow: 0 0 0 2px var(--frame);
}
.tf-push {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: var(--radius-1);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
}
.tf-push-top {
  display: flex;
  justify-content: space-between;
  font: 500 11px/14px var(--font-sans);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tf-push b {
  font: 600 14px/20px var(--font-sans);
}
.tf-push p {
  margin: 0;
  font: 500 13px/18px var(--font-sans);
}
.tf-push-actions {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  margin-top: 8px;
}
.tf-push-actions button {
  min-height: var(--density-control);
  border: 0;
  border-radius: var(--radius-1);
  background: var(--surface-sunken);
  color: var(--ink);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
}
.tf-prsum {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tf-prsum-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tf-prsum-head .tf-option-text {
  flex: 1;
  padding: 0;
}
.tf-prsum-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-prsum-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--density-control);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  background: var(--canvas);
}
.tf-prsum-list .tf-option-text {
  padding: 0;
}
.tf-prsum-op {
  width: 16px;
  text-align: center;
  font: 600 14px/1 var(--font-mono);
}
.op-add .tf-prsum-op {
  color: var(--ok);
}
.op-remove .tf-prsum-op {
  color: var(--danger);
}
.op-change .tf-prsum-op {
  color: var(--warn);
}
.tf-modules {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-module {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
}
.tf-module:hover {
  background: var(--canvas);
}
.tf-module > .tf-option-text {
  flex: 1;
  padding: 0;
}
.tf-module-v {
  font-weight: 500;
  color: var(--ink-muted);
  font-size: 12px;
}
.tf-module-adds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  max-width: 40%;
}
.tf-module-lock {
  color: var(--ink-muted);
  display: inline-grid;
  place-items: center;
  width: 40px;
}
@media (max-width: 900px) {
  .tf-chatws,
  .tf-chatws.with-details {
    grid-template-columns: minmax(0, 1fr);
  }
  .tf-chatws-details {
    display: none !important;
  }
  .tf-settings-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .tf-sig,
  .tf-attprev {
    grid-template-columns: minmax(0, 1fr);
  }
  .tf-domainrow {
    grid-template-columns: 12px minmax(0, 1fr) auto;
  }
  .tf-domainrow-cell:last-child {
    display: none;
  }
  .tf-inbox-row {
    grid-template-columns: 12px minmax(0, 1fr) auto;
  }
  .tf-inbox-row .tf-family {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tf-shape-pulse,
  .tf-voice-wave i,
  .tf-stage.st-running::after,
  .tf-log-line.fresh {
    animation: none !important;
  }
}
/* the same for an app that turns motion off: data-motion="off" */
[data-motion="off"] .tf-shape-pulse,
[data-motion="off"] .tf-voice-wave i,
[data-motion="off"] .tf-stage.st-running::after,
[data-motion="off"] .tf-log-line.fresh {
  animation: none !important;
}
.tf-approval-mail {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--canvas);
  font: 500 13px/20px var(--font-sans);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tf-approval-body > .tf-approval-mail {
  padding: 0;
  background: none;
}

/* 05-admin-real-estate.css */
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
/* ════════ Kit 5: admin and real-estate components ════════ */
.tf-mono {
  font-family: var(--font-mono);
}

/* Range slider */
.tf-range {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tf-range-track {
  position: relative;
  height: 20px;
}
.tf-range-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.tf-range-track > span {
  position: absolute;
  top: 8px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--primary);
}
.tf-range-track input {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.tf-range-track input::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-1);
  background: var(--surface);
  box-shadow:
    inset 0 0 0 2px var(--primary),
    0 0 0 var(--line-width) var(--line);
  cursor: grab;
}
.tf-range-track input::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-1);
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--primary);
  cursor: grab;
}
.tf-range-track input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-range-inputs {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.tf-range-num {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.tf-range-num small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-range-num .tf-input {
  font-variant-numeric: tabular-nums;
  padding-right: 40px;
}
.tf-range-num > span {
  position: absolute;
  right: 16px;
  bottom: 11px;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-range-dash {
  padding-bottom: 10px;
  color: var(--ink-muted);
}
/* in a narrow column (a filter sidebar) the number fields give their padding to the digits */
.tf-range {
  container: tf-range / inline-size;
}
@container tf-range (max-width: 280px) {
  .tf-range-inputs {
    gap: 4px;
  }
  .tf-range-num .tf-input {
    padding-left: 10px;
    padding-right: 24px;
  }
  .tf-range-num > span {
    right: 10px;
  }
}
.tf-range-vals {
  display: flex;
  justify-content: space-between;
  font: 500 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
}

/* Bar list */
.tf-barlist {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-barlist-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--density-control);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tf-barlist-row.is-btn {
  cursor: pointer;
}
.tf-barlist-row.is-btn:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-barlist-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: var(--radius-sm);
  background: var(--sky);
  opacity: 0.7;
}
.tf-barlist-label,
.tf-barlist-val {
  position: relative;
  font: 500 13px/18px var(--font-sans);
}
.tf-barlist-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-barlist-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.tf-barlist-val small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  min-width: 40px;
  text-align: right;
}

/* Status select */
.tf-statussel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--control-sm);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink);
  font: 500 12px/16px var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
}
.tf-statussel.sm {
  min-height: 28px;
  padding: 0 10px;
}
.tf-statussel:hover {
  background: var(--line);
}
.tf-statussel:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-menu-item.on {
  background: var(--surface-sunken);
}

/* Tile picker */
.tf-tiles {
  display: grid;
  gap: 12px;
}
.tf-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.tf-tile:hover {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.tf-tile.on {
  box-shadow: inset 0 0 0 2px var(--primary);
}
.tf-tile:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-tile:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tf-tile-art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tf-tile-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tf-tile-label {
  display: flex;
  flex-direction: column;
  padding: 0 4px 4px;
  font: 500 13px/18px var(--font-sans);
}
.tf-tile-label small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
/* layout="list": compact rows */
.tf-tiles.list {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.tf-tiles.list .tf-tile {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 44px 8px 8px;
}
.tf-tiles.list .tf-tile-art {
  flex: none;
  width: 40px;
  height: var(--density-control);
  aspect-ratio: auto;
}
.tf-tiles.list .tf-tile-label {
  min-width: 0;
  padding: 0;
}
.tf-tiles.list .tf-tile-check {
  top: 50%;
  translate: 0 -50%;
}
.tf-tile-check {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-1);
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Live feed */
.tf-livefeed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.tf-livefeed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.tf-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 12px/16px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ok);
}
.tf-live-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: tf-live 1.6s var(--ease-out) infinite;
}
.tf-live.off {
  color: var(--ink-muted);
}
.tf-live.off .tf-live-dot {
  animation: none;
}
@keyframes tf-live {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent);
  }
  100% {
    box-shadow: 0 0 0 8px transparent;
  }
}
.tf-livefeed-new {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  background: var(--count);
  color: var(--on-count);
  font: 600 12px/16px var(--font-sans);
  cursor: pointer;
}
.tf-livefeed-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 420px;
  overflow: auto;
}
.tf-livefeed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
}
.tf-livefeed-row.fresh {
  animation: tf-fresh 2.4s var(--ease-out);
}
@keyframes tf-fresh {
  0% {
    background: var(--surface-sunken);
    transform: translateY(calc(-4px * var(--motion-travel)));
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: none;
  }
  100% {
    background: transparent;
  }
}
.tf-livefeed-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font: 500 13px/18px var(--font-sans);
}
.tf-livefeed-text b {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-livefeed-text small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-livefeed-amt {
  font: 600 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--ok);
}
.tf-livefeed-amt.neg {
  color: var(--danger);
}
.tf-livefeed-time {
  font: 500 12px/16px var(--font-mono);
  color: var(--ink-muted);
  min-width: 56px;
  text-align: right;
}

/* Map */
.tf-map {
  position: relative;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  overflow: hidden;
  isolation: isolate;
}
.tf-map > :first-child:not(button) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tf-map-grid line {
  stroke: var(--line);
  stroke-width: 0.15;
  vector-effect: non-scaling-stroke;
}
.tf-map-pin,
.tf-map-bubble {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0;
  cursor: pointer;
  z-index: 1;
}
.tf-map-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 var(--line-width) var(--line);
  font: 600 12px/16px var(--font-sans);
  white-space: nowrap;
}
.tf-map-pin.on,
.tf-map-bubble.on {
  z-index: 2;
  box-shadow:
    0 0 0 2px var(--ink),
    0 0 0 var(--line-width) var(--line-strong);
}
.tf-map-bubble {
  border-radius: var(--radius-1);
  opacity: 0.85;
  box-shadow: 0 0 0 2px var(--surface);
}
.tf-map-bubble.pulse::after,
.tf-map-pin.pulse::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--sky-ink);
  animation: tf-ping 1.8s var(--ease-out) infinite;
}
@keyframes tf-ping {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent);
  }
  100% {
    box-shadow: 0 0 0 14px transparent;
  }
}
.tf-map-pin:focus-visible,
.tf-map-bubble:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-map-pop {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, calc(-100% - 22px));
  min-width: 160px;
  max-width: 260px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line-strong);
}
.tf-map-pop .tf-option-text {
  padding: 0;
}
.tf-map-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
  font: 500 12px/16px var(--font-sans);
}
.tf-map-ctl {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Rich text editor */
.tf-rte {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  overflow: hidden;
}
.tf-rte:focus-within {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.tf-rte.invalid {
  box-shadow: inset 0 0 0 2px var(--danger);
}
.tf-rte-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}
.tf-rte-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: var(--control-sm);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.tf-rte-btn:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-rte-btn:focus-visible,
.tf-rte-var:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.tf-rte-sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--line);
}
.tf-rte-var {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-sm);
  margin-left: auto;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink);
  font: 500 12px/16px var(--font-sans);
  cursor: pointer;
}
.tf-rte-var {
  font-family: var(--font-mono);
}
.tf-rte-var span {
  font-family: var(--font-sans);
}
.tf-rte-area {
  padding: 16px;
  outline: 0;
  font: 500 14px/20px var(--font-sans);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.tf-rte-area:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-subtle);
}
.tf-rte-area h3 {
  margin: 8px 0 4px;
  font: 600 17px/24px var(--font-sans);
}
.tf-rte-area blockquote {
  margin: 8px 0;
  padding-left: 12px;
  border-left: 3px solid var(--line-strong);
  color: var(--ink-muted);
}
.tf-rte-area a {
  color: var(--sky-ink);
}
.tf-rte-area ul,
.tf-rte-area ol {
  margin: 4px 0;
  padding-left: 24px;
}
.tf-rte-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-rte-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.tf-rte-count.over {
  color: var(--danger);
  font-weight: 600;
}
.tf-menu code {
  font: 500 11px/16px var(--font-mono);
  color: var(--ink-muted);
}

/* Email preview */
.tf-mailprev {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.tf-mailprev-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tf-mailprev-inbox {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 280px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.tf-mailprev-inbox .tf-option-text {
  padding: 0;
}
.tf-mailprev-subj {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-mailprev-subj b {
  color: var(--ink);
  font-weight: 500;
}
.tf-mailprev-stage {
  display: flex;
  justify-content: center;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--canvas);
}
.tf-mailprev-frame {
  width: 100%;
  max-width: 640px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 0 0 var(--line-width) var(--line);
  overflow: hidden;
  transition: max-width var(--dur-base) var(--ease-out);
}
.tf-mailprev-stage.mobile .tf-mailprev-frame {
  max-width: 375px;
  border-radius: var(--radius-1);
  box-shadow:
    0 0 0 8px var(--frame),
    0 0 0 var(--line-width) var(--line-strong);
}
.tf-mailprev-frame iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  background: var(--paper);
}
.tf-mailprev-body {
  padding: 24px;
  font: 500 14px/20px var(--font-sans);
}
.tf-mailprev-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

/* Search ad preview */
.tf-adprev {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.tf-adprev-card {
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--serp-ink);
  box-shadow: 0 0 0 var(--line-width) var(--line);
  font-family: Arial, var(--font-sans);
}
.tf-adprev-card.mobile {
  max-width: 380px;
  border-radius: var(--radius-1);
}
.tf-adprev-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tf-adprev-top .tf-option-text {
  padding: 0;
}
.tf-adprev-top b {
  font:
    400 14px/20px Arial,
    var(--font-sans);
  color: var(--serp-ink);
}
.tf-adprev-top small {
  font:
    400 12px/18px Arial,
    var(--font-sans);
  color: var(--serp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-adprev-fav {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-1);
  background: var(--serp-chip);
  font:
    600 12px/1 Arial,
    var(--font-sans);
  color: var(--serp-ink);
}
.tf-adprev-tag {
  margin-left: auto;
  font:
    600 12px/16px Arial,
    var(--font-sans);
  color: var(--serp-ink);
}
.tf-adprev-hl {
  display: block;
  margin: 8px 0 4px;
  font:
    400 18px/24px Arial,
    var(--font-sans);
  color: var(--serp-link);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.tf-adprev-card.mobile .tf-adprev-hl {
  font-size: 18px;
  line-height: 24px;
}
.tf-adprev-desc {
  margin: 0;
  font:
    400 14px/20px Arial,
    var(--font-sans);
  color: var(--serp-muted);
}
.tf-adprev-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font:
    400 14px/20px Arial,
    var(--font-sans);
  color: var(--serp-link);
}

/* Balance card */
.tf-balance {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
  min-width: 0;
}
.tf-balance-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tf-balance-head .tf-option-text {
  padding: 0;
}
.tf-balance-head b {
  font: 600 14px/20px var(--font-sans);
}
.tf-balance-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.tf-balance-amt {
  font: 600 22px/28px var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tf-balance.is-danger .tf-balance-amt {
  color: var(--danger);
}
.tf-balance-meta {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}

/* Service monitor, runs, backups, blocks */
.tf-svcmon,
.tf-runs,
.tf-backups,
.tf-blocks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-svcmon-row,
.tf-backups-row,
.tf-blocks-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 4px 16px;
  border-radius: var(--radius-md);
}
.tf-svcmon-row:hover,
.tf-backups-row:hover,
.tf-blocks-row:hover {
  background: var(--canvas);
}
.tf-svcmon-row .tf-option-text,
.tf-backups-row .tf-option-text,
.tf-blocks-row .tf-option-text {
  flex: 1;
  padding: 0;
}
.tf-svcmon-row b,
.tf-backups-row b,
.tf-blocks-row b,
.tf-runs-main b {
  font: 500 13px/18px var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-svcmon-hist {
  display: flex;
  gap: 2px;
}
.tf-svcmon-hist i {
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.85;
}
.tf-svcmon-hist i.tf-st-none {
  color: var(--line);
}
.tf-svcmon-num {
  min-width: 64px;
  text-align: right;
  font: 500 12px/16px var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tf-svcmon-num.bad {
  color: var(--danger);
}
.tf-svcmon-time,
.tf-blocks-meta {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  white-space: nowrap;
}
.tf-runs-row {
  border-radius: var(--radius-md);
}
.tf-runs-row.open {
  background: var(--canvas);
}
.tf-runs-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 4px 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink);
  text-align: left;
  font: inherit;
}
button.tf-runs-main[aria-expanded] {
  cursor: pointer;
}
button.tf-runs-main[aria-expanded]:hover {
  background: var(--canvas);
}
.tf-runs-main:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.tf-runs-main .tf-option-text {
  flex: 1;
  padding: 0;
}
.tf-runs-counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 12px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-runs-counts b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tf-runs-counts .tf-tone-danger b {
  color: var(--danger);
}
.tf-runs-counts .tf-tone-success b {
  color: var(--ok);
}
.tf-runs-detail {
  padding: 0 16px 16px 36px;
}
.tf-backups-size {
  font: 500 12px/16px var(--font-mono);
  color: var(--ink-muted);
}
.tf-backups-foot {
  padding: 8px 16px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-blocks-row > .tf-ico {
  color: var(--danger);
}

/* Webhook */
.tf-hook {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tf-hook-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.tf-hook-head .tf-option-text {
  padding: 0;
}
.tf-hook-url {
  font: 500 13px/18px var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-hook-rate {
  font: 600 12px/16px var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.tf-hook-dl {
  display: flex;
  flex-direction: column;
}
.tf-hook-dl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--density-control);
  border-bottom: 1px solid var(--line);
  font: 500 12px/16px var(--font-sans);
}
.tf-hook-dl-row:last-child {
  border-bottom: 0;
}
.tf-hook-dl-row .tf-mono {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-hook-code {
  min-width: 40px;
  padding: 2px 6px;
  border-radius: var(--radius-1);
  text-align: center;
  font: 600 11px/16px var(--font-mono);
}
.tf-hook-code.ok {
  background: var(--ok-bg);
  color: var(--ok);
}
.tf-hook-code.bad {
  background: var(--danger-bg);
  color: var(--danger);
}
.tf-hook-dl-time {
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Review */
.tf-review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-review.is-pending {
  box-shadow:
    inset 3px 0 0 var(--signal),
    0 0 0 var(--line-width) var(--line);
}
.tf-review.is-hidden {
  opacity: 0.72;
}
.tf-review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.tf-review-head .tf-option-text {
  padding: 0;
  min-width: 160px;
}
.tf-review-ver {
  font-weight: 500;
  color: var(--ok);
}
.tf-review-title {
  font: 600 15px/20px var(--font-sans);
}
.tf-review-text {
  margin: 0;
  font: 500 14px/20px var(--font-sans);
}
.tf-review-text mark {
  background: var(--butter);
  color: var(--butter-ink);
  border-radius: var(--radius-1);
  padding: 0 2px;
}
.tf-review-reply {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--canvas);
  font: 500 13px/20px var(--font-sans);
}
.tf-review-reply small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Coupon */
.tf-coupon {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
  overflow: hidden;
}
.tf-coupon.off {
  box-shadow: inset 0 0 0 1px var(--line);
}
.tf-coupon-val {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 16px;
  background: var(--mint);
  color: var(--mint-ink);
  border-right: 2px dashed var(--surface);
  position: relative;
}
.tf-coupon-val b {
  font: 600 24px/28px var(--font-sans);
  letter-spacing: -0.02em;
}
.tf-coupon-val small {
  font: 500 12px/16px var(--font-sans);
}
.tf-coupon.off .tf-coupon-val {
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.tf-coupon-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
}
.tf-coupon > .tf-pop-anchor {
  padding: 12px 12px 0 0;
}
.tf-coupon-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: 600 13px/18px var(--font-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.tf-coupon-code:hover {
  background: var(--canvas);
}
.tf-coupon-text,
.tf-coupon-foot {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}

/* Locale field and switchers */
.tf-locfield {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tf-locfield-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.tf-locfield-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-muted);
  font: 600 12px/16px var(--font-sans);
  cursor: pointer;
}
.tf-locfield-tab:hover {
  background: var(--accent);
  color: var(--ink);
}
.tf-locfield-tab.on {
  background: var(--primary);
  color: var(--primary-foreground);
}
.tf-locfield-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-locfield-miss {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--warn);
}
.tf-locfield-done {
  margin-left: auto;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-locsw,
.tf-wssw {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--density-control);
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
  max-width: 100%;
}
.tf-locsw:focus-visible,
.tf-wssw:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-locsw.on-frame,
.tf-wssw.on-frame {
  background: var(--frame-hover);
  color: var(--on-frame);
}
.tf-locsw-cur {
  padding-left: 8px;
  border-left: 1px solid var(--line-strong);
  color: var(--ink-muted);
}
.tf-locsw.on-frame .tf-locsw-cur {
  color: var(--on-frame-muted);
  border-color: var(--frame-strong);
}
.tf-wssw {
  padding: 4px 14px 4px 4px;
  min-height: 44px;
}
.tf-wssw .tf-option-text {
  padding: 0;
  text-align: left;
}
.tf-wssw .tf-option-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-wssw.on-frame .tf-option-text small {
  color: var(--on-frame-muted);
}
.tf-wssw-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: var(--density-control);
  flex: none;
  border-radius: var(--radius-1);
  font: 600 14px/1 var(--font-sans);
}
.tf-wssw-mark.sm {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.tf-menu-item .tf-option-text {
  padding: 0;
}

/* Export, 2FA */
.tf-export {
  max-width: 480px;
}
.tf-export-cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 16px;
  max-height: 200px;
  overflow: auto;
  padding: 4px 0;
}
.tf-2fa {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tf-2fa-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-2fa-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-2fa-steps li span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-1);
  background: var(--surface-sunken);
  font: 600 12px/1 var(--font-sans);
}
.tf-2fa-steps li.on {
  color: var(--ink);
}
.tf-2fa-steps li.on span {
  background: var(--primary);
  color: var(--primary-foreground);
}
.tf-2fa-steps li.done span {
  background: var(--ok-bg);
  color: var(--ok);
}
.tf-2fa-scan {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}
.tf-2fa-qr {
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  flex: none;
  padding: 12px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* QrCode: dark modules on paper, in every theme (scanners expect dark on light) */
.tf-qr {
  display: block;
  width: 100%;
  height: auto;
  color: var(--paper-ink);
}
.tf-qr-bg {
  fill: var(--paper);
}
.tf-2fa-qr > * {
  max-width: 100%;
  max-height: 100%;
}
.tf-2fa-scan > .tf-col {
  flex: 1 1 220px;
}
.tf-2fa-key {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--ink);
  font: 500 13px/18px var(--font-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: left;
  overflow-wrap: anywhere;
}
.tf-2fa-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--canvas);
}
.tf-2fa-codes code {
  font: 500 13px/20px var(--font-mono);
  letter-spacing: 0.04em;
}

/* Image variants, gallery, before/after */
.tf-imgvar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.tf-imgvar-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  border-radius: var(--radius-md);
  background: repeating-conic-gradient(var(--surface-sunken) 0 25%, var(--surface) 0 50%) 0 0 / 16px
    16px;
  overflow: hidden;
  transition: aspect-ratio var(--dur-base) var(--ease-out);
}
.tf-imgvar-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tf-imgvar-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.tf-imgvar-tag {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font: 600 12px/16px var(--font-sans);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-imgvar-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-imgvar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.tf-imgvar-item:hover {
  background: var(--canvas);
}
.tf-imgvar-item.on {
  background: var(--surface-sunken);
}
.tf-imgvar-item:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.tf-imgvar-item .tf-option-text {
  padding: 0;
}
.tf-imgvar-item b {
  font: 500 13px/18px var(--font-sans);
}
.tf-imgvar-thumb {
  display: grid;
  place-items: center;
  width: 44px;
  max-height: 44px;
  aspect-ratio: 1;
  flex: none;
  border-radius: var(--radius-1);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  overflow: hidden;
}
.tf-imgvar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tf-gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tf-gallery-stage,
.tf-lightbox-stage {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunken);
}
.tf-gallery-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tf-gallery-ph {
  display: grid;
  place-items: center;
}
.tf-gallery-prev,
.tf-gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface) !important;
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-gallery-prev {
  left: 12px;
}
.tf-gallery-next {
  right: 12px;
}
.tf-gallery-full {
  position: absolute;
  right: 12px;
  top: 12px;
  background: var(--surface) !important;
}
.tf-gallery-count,
.tf-gallery-badge {
  position: absolute;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--media-scrim);
  color: var(--media-ink);
  font: 600 12px/16px var(--font-sans);
}
.tf-gallery-count {
  right: 12px;
}
.tf-gallery-badge {
  left: 12px;
}
.tf-gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.tf-gallery-thumbs button {
  flex: none;
  width: 72px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
  cursor: pointer;
  opacity: 0.6;
}
.tf-gallery-thumbs button.on {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--primary);
}
.tf-gallery-thumbs button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 16px;
  background: var(--lightbox);
}
.tf-lightbox-stage {
  width: min(1100px, 100%);
  aspect-ratio: 3 / 2;
  max-height: calc(100vh - 140px);
  background: none;
}
.tf-lightbox-stage .tf-gallery-img {
  object-fit: contain;
}
.tf-lightbox-close {
  position: absolute;
  right: 16px;
  top: 16px;
  background: var(--frame-active) !important;
  color: var(--media-ink) !important;
}
.tf-lightbox-cap {
  color: var(--lightbox-ink);
  font: 500 13px/18px var(--font-sans);
}
.tf-ba {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunken);
  /* sideways drags move the divider; the page still scrolls up and down over it */
  touch-action: pan-y;
  user-select: none;
  cursor: ew-resize;
}
.tf-ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: grid;
  place-items: center;
}
.tf-ba-before {
  position: absolute;
  inset: 0;
}
.tf-ba-tag {
  position: absolute;
  top: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--media-scrim);
  color: var(--media-ink);
  font: 600 12px/16px var(--font-sans);
}
.tf-ba-tag.left {
  left: 12px;
}
.tf-ba-tag.right {
  right: 12px;
}
.tf-ba-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--media-ink);
  box-shadow: 0 0 8px var(--media-shadow);
}
.tf-ba-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: var(--density-control);
  border-radius: var(--radius-1);
  background: var(--media-ink);
  color: var(--paper-ink);
  box-shadow: 0 0 0 var(--line-width) var(--line-strong);
  cursor: ew-resize;
}
.tf-ba-knob:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Listing */
.tf-listing {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
  overflow: hidden;
  min-width: 0;
  cursor: default;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.tf-listing[class*="tf-listing"]:hover {
  box-shadow: 0 0 0 var(--line-width) var(--line-strong);
}
.tf-listing.selected {
  box-shadow:
    inset 0 0 0 2px var(--primary),
    0 0 0 var(--line-width) var(--line);
}
.tf-listing.row {
  flex-direction: row;
}
.tf-listing-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-sunken);
  flex: none;
}
.tf-listing.row .tf-listing-media {
  width: 240px;
  aspect-ratio: auto;
  min-height: 160px;
}
.tf-listing-media img,
.tf-listing-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: grid;
  place-items: center;
}
.tf-listing-new {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-foreground);
  font: 600 12px/16px var(--font-sans);
}
.tf-listing-photos {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--media-scrim);
  color: var(--media-ink);
  font: 600 11px/14px var(--font-sans);
}
.tf-listing-sel {
  position: absolute;
  right: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: var(--control-sm);
  border-radius: var(--radius-1);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-listing-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px 16px;
}
.tf-listing-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tf-listing-price {
  font: 600 18px/24px var(--font-sans);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.tf-listing-price small {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-listing-ppsqm {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-listing-wish {
  margin-left: auto;
}
.tf-listing-wish.on {
  color: var(--danger);
}
.tf-listing-title {
  font: 500 14px/20px var(--font-sans);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tf-listing.unread .tf-listing-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: var(--radius-full);
  background: var(--info);
  vertical-align: 2px;
}
.tf-listing-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-listing-facts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tf-listing-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.tf-listing-src {
  padding: 2px 8px;
  border-radius: var(--radius-1);
  background: var(--surface-sunken);
  font: 600 11px/16px var(--font-sans);
}
.tf-listing-flag {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-1);
  background: var(--ok-bg);
  color: var(--ok);
}
.tf-listing-age {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
@media (max-width: 640px) {
  .tf-listing.row {
    flex-direction: column;
  }
  .tf-listing.row .tf-listing-media {
    width: auto;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

/* Results toolbar, saved search */
.tf-results {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.tf-results .tf-option-text {
  padding: 0;
}
.tf-results .tf-option-text b {
  font: 600 15px/20px var(--font-sans);
}
.tf-results-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-results-sort .tf-input {
  height: var(--control-sm);
  width: auto;
  padding: 0 32px 0 12px;
  font-size: 13px;
}
.tf-saved {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tf-saved.off {
  opacity: 0.7;
}
.tf-saved-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tf-saved-head .tf-option-text {
  padding: 0;
}
.tf-saved-crit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tf-saved-chip {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font: 500 12px/16px var(--font-sans);
}

/* Valuation, energy */
.tf-valuation {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tf-valuation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tf-valuation-val {
  font: 600 24px/38px var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tf-valuation-sub {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-valuation-range {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 4px;
}
.tf-valuation-bar {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--mint), var(--sky) 50%, var(--butter));
}
.tf-valuation-mark {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-1);
  background: var(--surface);
  box-shadow:
    inset 0 0 0 4px var(--ink),
    0 0 0 var(--line-width) var(--line);
}
.tf-valuation-ask {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: var(--danger);
  border-radius: 1px;
}
.tf-valuation-ends {
  display: flex;
  justify-content: space-between;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.tf-valuation-diff {
  font: 500 13px/18px var(--font-sans);
}
.tf-valuation-diff.bad {
  color: var(--danger);
}
.tf-valuation-diff.good {
  color: var(--ok);
}
.tf-energy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tf-energy-scale {
  display: grid;
  gap: 2px;
}
.tf-energy-c {
  display: grid;
  place-items: center;
  height: 28px;
  /* inactive classes are faded towards the surface; the text keeps full contrast */
  background: color-mix(
    in srgb,
    color-mix(in srgb, var(--mint) calc((1 - var(--e)) * 100%), var(--blush)) 55%,
    var(--surface)
  );
  color: var(--ink);
  font: 600 11px/1 var(--font-sans);
}
.tf-energy-c:first-child {
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}
.tf-energy-c:last-child {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}
.tf-energy-c.on {
  background: color-mix(in srgb, var(--mint) calc((1 - var(--e)) * 100%), var(--blush));
  transform: scaleY(1.25);
  border-radius: var(--radius-1);
  box-shadow: 0 0 0 2px var(--ink);
  font-size: 13px;
  z-index: 1;
}
.tf-energy-meta {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}

/* Launcher, cookie consent, announcement, colour field */
.tf-launch {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.tf-launch.inline {
  position: relative;
  right: auto;
  bottom: auto;
}
.tf-launch-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: var(--radius-1);
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
  cursor: pointer;
}
.tf-launch-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.tf-launch-btn .tf-nav-count {
  position: absolute;
  top: -2px;
  right: -2px;
}
.tf-launch-panel {
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
  overflow: hidden;
  animation: tf-pop var(--dur-base) var(--ease-spring) both;
  transform-origin: bottom right;
}
.tf-launch-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.tf-launch-head .tf-option-text {
  padding: 0;
}
.tf-launch-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tf-launch-foot {
  padding: 12px;
  border-top: 1px solid var(--line);
}
.tf-cookie {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 75;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(440px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 20px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
}
.tf-cookie.inline {
  position: relative;
  left: auto;
  bottom: auto;
}
.tf-cookie-cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-cookie-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--canvas);
}
.tf-cookie-cat .tf-option-text {
  padding: 0;
}
.tf-cookie-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.tf-cookie-actions .tf-btn {
  flex: 1 1 auto;
}
.tf-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--density-control);
  padding: 8px 48px;
  position: relative;
  font: 500 13px/18px var(--font-sans);
  text-align: center;
}
.tf-announce a {
  color: inherit;
  font-weight: 600;
}
.tf-announce-x {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-1);
  background: none;
  color: inherit;
  cursor: pointer;
}
.tf-announce-x:hover {
  background: var(--ink-hover);
}
.tf-colorf {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tf-colorf-sw {
  position: relative;
  width: 40px;
  height: var(--density-control);
  flex: none;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--hairline);
  cursor: pointer;
  overflow: hidden;
}
.tf-colorf-sw input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.tf-colorf-sw:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-colorf .tf-input {
  flex: 1;
  min-width: 0;
  text-transform: lowercase;
}
.tf-colorf-ratio {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font: 600 12px/16px var(--font-sans);
  white-space: nowrap;
}
.tf-colorf-ratio.ok {
  background: var(--ok-bg);
  color: var(--ok);
}
.tf-colorf-ratio.warn {
  background: var(--warn-bg);
  color: var(--warn);
}
.tf-colorf-ratio.bad {
  background: var(--danger-bg);
  color: var(--danger);
}

@media (max-width: 900px) {
  .tf-imgvar {
    grid-template-columns: 1fr;
  }
  .tf-svcmon-hist,
  .tf-svcmon-time {
    display: none;
  }
  .tf-runs-counts {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tf-live-dot,
  .tf-map-bubble.pulse::after,
  .tf-map-pin.pulse::after,
  .tf-livefeed-row.fresh {
    animation: none;
  }
}
/* the same for an app that turns motion off: data-motion="off" */
[data-motion="off"] .tf-live-dot,
[data-motion="off"] .tf-map-bubble.pulse::after,
[data-motion="off"] .tf-map-pin.pulse::after,
[data-motion="off"] .tf-livefeed-row.fresh {
  animation: none;
}
.tf-map-world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tf-map-world path {
  stroke: var(--line-strong);
  stroke-width: 3px;
  stroke-linecap: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.tf-tile-art:not([class*="tf-t-"]) {
  background: var(--surface-sunken);
}
.tf-gallery-stage > .tf-gallery-img,
.tf-lightbox-stage > .tf-gallery-img {
  position: absolute;
  inset: 0;
}
.tf-gallery-ph {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tf-rte-btn.on {
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.tf-rte-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tf-rte-area p {
  margin: 0 0 8px;
}
.tf-rte-area p:last-child {
  margin-bottom: 0;
}
.tf-rte-area:has(> p:only-child > br:only-child)::before {
  content: attr(data-placeholder);
  position: absolute;
  color: var(--ink-subtle);
  pointer-events: none;
}
.tf-rte-area {
  position: relative;
}

/* 05-primitives.css */
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
/* General-purpose primitives (Accordion, Separator, AspectRatio, Label, Toggle, ToggleGroup,
   ButtonGroup, ScrollArea, HoverCard, Carousel). Halo look; Pro derives from this file. */

/* Accordion */
.tf-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tf-accordion-item {
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-accordion-h {
  margin: 0;
  font: inherit;
}
.tf-accordion-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--ink);
  font: 500 14px/20px var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.tf-accordion-head:hover {
  color: var(--ink);
}
.tf-accordion-head:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-accordion-head:disabled {
  cursor: default;
  opacity: 0.5;
}
.tf-accordion-title {
  flex: 1;
  min-width: 0;
}
.tf-accordion-meta {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-accordion-chev {
  flex: none;
  color: var(--ink-muted);
  transition: transform var(--dur-base) var(--ease-out);
}
.tf-accordion-item.open .tf-accordion-chev {
  transform: rotate(180deg);
}
.tf-accordion-body {
  padding: 0 20px 20px;
  font: 500 14px/20px var(--font-sans);
  color: var(--ink-muted);
  animation: tf-fade var(--dur-base) var(--ease-out) both;
}
.tf-accordion.flush {
  gap: 0;
}
.tf-accordion.flush .tf-accordion-item {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}
.tf-accordion.flush .tf-accordion-item:last-child {
  border-bottom: 0;
}
.tf-accordion.flush .tf-accordion-head {
  padding: 0;
  border-radius: var(--radius-sm);
}
.tf-accordion.flush .tf-accordion-body {
  padding: 0 0 16px;
}

/* Separator */
.tf-sep {
  flex: none;
  height: 1px;
  width: 100%;
  background: var(--line);
}
.tf-sep.vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  min-height: 16px;
}
.tf-sep.labelled {
  display: flex;
  align-items: center;
  gap: 12px;
  height: auto;
  background: none;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-sep.labelled::before,
.tf-sep.labelled::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* AspectRatio */
.tf-aspect {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.tf-aspect > img,
.tf-aspect > video,
.tf-aspect > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Label */
.tf-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.tf-label-req {
  color: var(--blush-ink);
}
.tf-label-hint {
  font-weight: 500;
  color: var(--ink-muted);
}

/* Toggle and ToggleGroup */
.tf-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--density-control);
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.tf-toggle.icon {
  width: 40px;
  padding: 0;
}
.tf-toggle.sm {
  height: var(--control-sm);
  padding: 0 12px;
}
.tf-toggle.sm.icon {
  width: 32px;
  padding: 0;
}
.tf-toggle:hover:not(:disabled) {
  background: var(--accent);
  color: var(--ink);
}
.tf-toggle[aria-pressed="true"] {
  background: var(--surface-sunken);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.tf-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-toggle:disabled {
  opacity: 0.45;
  cursor: default;
}
.tf-togglegroup {
  display: inline-flex;
  flex-wrap: wrap;
  width: fit-content;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  max-width: 100%;
}
.tf-togglegroup .tf-toggle {
  height: var(--control-sm);
}
.tf-togglegroup.block {
  display: flex;
  flex-wrap: nowrap;
  width: auto;
}
.tf-togglegroup.block .tf-toggle {
  flex: 1 1 0;
}
.tf-togglegroup .tf-toggle.icon {
  width: 32px;
}
.tf-togglegroup.sm .tf-toggle {
  height: 24px;
  padding: 0 10px;
}
.tf-togglegroup.sm .tf-toggle.icon {
  width: 24px;
  padding: 0;
}
.tf-togglegroup .tf-toggle:hover:not(:disabled) {
  background: var(--surface);
}
.tf-togglegroup .tf-toggle[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}

/* ButtonGroup: attached buttons, one outline */
.tf-btngroup {
  display: inline-flex;
  align-items: stretch;
  gap: 1px;
  max-width: 100%;
}
.tf-btngroup > .tf-btn,
.tf-btngroup > .tf-iconbtn,
.tf-btngroup > .tf-pop-anchor > .tf-btn,
.tf-btngroup > .tf-pop-anchor > .tf-iconbtn {
  border-radius: 0;
}
.tf-btngroup > :first-child,
.tf-btngroup > .tf-pop-anchor:first-child > * {
  border-top-left-radius: var(--radius-pill);
  border-bottom-left-radius: var(--radius-pill);
}
.tf-btngroup > :last-child,
.tf-btngroup > .tf-pop-anchor:last-child > * {
  border-top-right-radius: var(--radius-pill);
  border-bottom-right-radius: var(--radius-pill);
}
.tf-btngroup > .tf-iconbtn:last-child,
.tf-btngroup > .tf-pop-anchor:last-child > .tf-iconbtn {
  width: 40px;
}
.tf-btngroup.vertical {
  flex-direction: column;
  align-items: stretch;
}
.tf-btngroup.vertical > * {
  border-radius: 0;
}
.tf-btngroup.vertical > :first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.tf-btngroup.vertical > :last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ScrollArea: themed thin scrollbars */
.tf-scrollarea {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  overscroll-behavior: contain;
}
.tf-scrollarea.vertical {
  overflow-x: hidden;
}
.tf-scrollarea.horizontal {
  overflow-y: hidden;
}
.tf-scrollarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-scrollarea::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.tf-scrollarea::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}
.tf-scrollarea::-webkit-scrollbar-track {
  background: transparent;
}

/* HoverCard */
.tf-hovercard-anchor {
  position: relative;
  display: inline-flex;
}
.tf-hovercard {
  position: absolute;
  z-index: 70;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  color: var(--ink);
  box-shadow:
    var(--shadow-float), 0 0 0 var(--line-width) var(--line),
    0 0 0 1px var(--line);
  animation: tf-fade var(--dur-base) var(--ease-out) both;
}
.tf-hovercard.tf-hc-top {
  top: auto;
  bottom: calc(100% + 8px);
}
.tf-hovercard.tf-hc-start {
  left: 0;
  transform: none;
}
.tf-hovercard.tf-hc-end {
  left: auto;
  right: 0;
  transform: none;
}

/* Carousel */
.tf-carousel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.tf-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per, 1) - 1) * 16px) / var(--per, 1));
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.tf-carousel-track::-webkit-scrollbar {
  display: none;
}
.tf-carousel-track:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}
.tf-carousel-slide {
  min-width: 0;
  scroll-snap-align: start;
}
.tf-carousel-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.tf-carousel-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tf-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--line-strong);
  cursor: pointer;
  transition:
    width var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.tf-carousel-dot[aria-current="true"] {
  width: 20px;
  background: var(--primary);
}
.tf-carousel-dot:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .tf-carousel-track {
    grid-auto-columns: 86%;
  }
}

/* Form */
.tf-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* SelectMenu: a styled select */
.tf-selectmenu {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.tf-selectmenu.sm {
  height: var(--control-sm);
  padding: 0 12px;
  font-size: 13px;
}
.tf-selectmenu.empty .tf-selectmenu-value {
  color: var(--ink-subtle);
}
.tf-selectmenu-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-selectmenu-chev {
  flex: none;
  color: var(--ink-subtle);
  transition: transform var(--dur-base) var(--ease-out);
}
.tf-selectmenu[aria-expanded="true"] .tf-selectmenu-chev {
  transform: rotate(180deg);
}
.tf-selectmenu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow:
    var(--shadow-float), 0 0 0 var(--line-width) var(--line),
    0 0 0 1px var(--line);
  outline: none;
}
/* the list is as wide as its field */
.tf-pop-anchor.block > .tf-popover:has(> .tf-selectmenu-list) {
  right: 0;
  min-width: 0;
}
.tf-selectmenu-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--density-control);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: 500 14px/20px var(--font-sans);
  cursor: pointer;
}
.tf-selectmenu-opt .tf-option-text {
  padding: 0;
}
.tf-selectmenu-opt.active {
  background: var(--accent);
}
.tf-selectmenu-opt[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}
.tf-selectmenu-check {
  margin-left: auto;
  flex: none;
}
.tf-selectmenu-list:focus-visible .tf-selectmenu-opt.active {
  box-shadow: inset 0 0 0 2px var(--focus);
}

/* Menu: checkbox and radio marks, submenus, disabled items */
.tf-menu-item:disabled {
  opacity: 0.45;
  cursor: default;
}
.tf-menu-item:focus-visible {
  outline: none;
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--focus);
  color: var(--accent-foreground);
}
.tf-menu-text {
  flex: 1;
  min-width: 0;
}
.tf-menu-mark {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
}
.tf-menu-mark.radio i {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}
.tf-menu-subchev {
  margin-left: auto;
  color: var(--ink-muted);
}
.tf-menu-subwrap {
  position: relative;
  display: flex;
  flex-direction: column;
}
.tf-menu-sub {
  position: absolute;
  z-index: 1;
  top: -6px;
  left: calc(100% + 4px);
}

/* Tabs with panels */
.tf-tabset {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.tf-tabpanel:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* Menubar */
.tf-menubar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
  max-width: 100%;
}
.tf-menubar-item {
  position: relative;
}
.tf-menubar-btn {
  height: var(--control-sm);
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 500 13px/18px var(--font-sans);
  cursor: pointer;
}
.tf-menubar-btn:hover,
.tf-menubar-btn[aria-expanded="true"] {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-menubar-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-menubar-menu {
  position: absolute;
  z-index: 70;
  top: calc(100% + 8px);
  left: 0;
}

/* NavigationMenu */
.tf-navmenu {
  position: relative;
  max-width: 100%;
}
.tf-navmenu-list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-navmenu-item {
  position: relative;
}
.tf-navmenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--density-control);
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 500 14px/20px var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.tf-navmenu-trigger:hover,
.tf-navmenu-trigger[aria-expanded="true"] {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-navmenu-trigger:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-navmenu-chev {
  color: var(--ink-muted);
  transition: transform var(--dur-base) var(--ease-out);
}
.tf-navmenu-trigger[aria-expanded="true"] .tf-navmenu-chev {
  transform: rotate(180deg);
}
.tf-navmenu-panel {
  position: absolute;
  z-index: 70;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 24px));
  padding: 8px;
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow:
    var(--shadow-float), 0 0 0 var(--line-width) var(--line),
    0 0 0 1px var(--line);
  animation: tf-drop var(--dur-base) var(--ease-out) both;
}
.tf-navmenu-panel.with-feature {
  grid-template-columns: 200px minmax(0, 1fr);
  width: min(600px, calc(100vw - 24px));
}
.tf-navmenu-feature {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-height: 180px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--sky);
}
.tf-navmenu-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-navmenu-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
}
.tf-navmenu-link > .tf-ico {
  margin-top: 2px;
  flex: none;
}
.tf-navmenu-link .tf-option-text {
  padding: 0;
}
.tf-navmenu-link:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.tf-navmenu-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* Sidebar: floating (a card), attached (flush with the screen's edge) or on the AppShell frame */
.tf-sidebar {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 12px;
  width: 248px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
  color: var(--ink);
  transition: width var(--dur-base) var(--ease-out);
}
.tf-sidebar.collapsed {
  width: 64px;
}
.tf-sidebar.attached {
  align-self: stretch;
  min-height: 100%;
  border-radius: 0;
  box-shadow: none;
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
}
.tf-sidebar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--density-control);
  padding: 0 4px;
}
.tf-sidebar-body {
  display: flex;
  flex-direction: column;
  /* groups sit clearly apart; a label sits close to its own items */
  gap: 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.tf-sidebar ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-sidebar-grouphead {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 0 4px 0 12px;
}
.tf-sidebar-grouplabel {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-muted);
}
button.tf-sidebar-grouplabel {
  cursor: pointer;
}
button.tf-sidebar-grouplabel:hover {
  color: var(--ink);
}
button.tf-sidebar-grouplabel:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-sidebar-grouplabel[aria-expanded="false"] .tf-sidebar-chev {
  transform: rotate(-90deg);
}
.tf-sidebar-groupaction {
  flex: none;
  margin-left: auto;
}
.tf-sidebar-li {
  position: relative;
}
.tf-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: var(--density-control);
  padding: 0 12px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font: 500 13px/18px var(--font-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
/* Filter options (Sidebar as="aside"): a checkbox or radio mark, the label and a count */
.tf-sidebar-option {
  position: relative;
}
.tf-sidebar-option.disabled {
  opacity: 0.45;
  cursor: default;
}
.tf-sidebar-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.tf-sidebar-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: var(--radius-1);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--primary-foreground);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.tf-sidebar-mark.radio {
  border-radius: var(--radius-full);
}
.tf-sidebar-mark svg {
  opacity: 0;
}
.tf-sidebar-input:checked + .tf-sidebar-mark {
  background: var(--primary);
  border-color: var(--primary);
}
.tf-sidebar-input:checked + .tf-sidebar-mark.radio {
  box-shadow: inset 0 0 0 3px var(--surface);
}
.tf-sidebar-input:checked + .tf-sidebar-mark svg {
  opacity: 1;
}
.tf-sidebar-input:focus-visible + .tf-sidebar-mark {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-sidebar-option:has(.tf-sidebar-input:checked) {
  color: var(--ink);
}
/* free content in a group (sliders, date fields, chips) */
.tf-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 12px 0;
  min-width: 0;
}
.tf-sidebar-groupbody {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tf-sidebar-item:hover,
.tf-sidebar-item.flying {
  background: var(--sidebar-accent);
  color: var(--ink);
}
.tf-sidebar-item[aria-current="page"] {
  background: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
}
.tf-sidebar-item.has-current {
  color: var(--ink);
}
.tf-sidebar-item:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-sidebar-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tf-sidebar-item:disabled:hover {
  background: transparent;
  color: var(--ink-muted);
}
.tf-sidebar-item.nested {
  height: var(--control-sm);
  padding-left: 40px;
}
.tf-sidebar-sub {
  margin-top: 2px !important;
}
.tf-sidebar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-sidebar-chev {
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.tf-sidebar-item[aria-expanded="true"] .tf-sidebar-chev {
  transform: rotate(180deg);
}
.tf-sidebar-ext {
  flex: none;
  opacity: 0.7;
}
.tf-sidebar-count {
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--count);
  color: var(--on-count);
  font: 600 11px/20px var(--font-sans);
  text-align: center;
}
.tf-sidebar-badge {
  flex: none;
  height: 20px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--count);
  color: var(--on-count);
  font: 600 10px/20px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tf-sidebar-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--count);
}
.tf-sidebar-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* the "…" menu of an item shows on hover and focus */
.tf-sidebar-li.with-actions > .tf-sidebar-item {
  padding-right: 40px;
}
.tf-sidebar-more {
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.tf-sidebar-li:hover > .tf-sidebar-more,
.tf-sidebar-more:focus-visible,
.tf-sidebar-more[aria-expanded="true"] {
  opacity: 1;
}
.tf-sidebar-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--sidebar-border);
}
.tf-sidebar-foot > :not(.tf-sidebar-toggle) {
  flex: 1;
  min-width: 0;
}
.tf-sidebar-toggle {
  flex: none;
  margin-left: auto;
}
.tf-sidebar-head .tf-pop-anchor,
.tf-sidebar-foot .tf-pop-anchor {
  display: block;
  min-width: 0;
}
.tf-sidebar-head .tf-wssw {
  width: 100%;
}
.tf-sidebar-head .tf-wssw .tf-option-text {
  flex: 1;
  min-width: 0;
}

/* collapsed: icons only; labels stay the accessible names, tooltips and flyouts show them */
.tf-sidebar.collapsed .tf-sidebar-body {
  gap: 12px;
}
.tf-sidebar.collapsed .tf-sidebar-label,
.tf-sidebar.collapsed .tf-sidebar-chev,
.tf-sidebar.collapsed .tf-sidebar-ext,
.tf-sidebar.collapsed .tf-sidebar-grouphead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tf-sidebar.collapsed .tf-sidebar-group + .tf-sidebar-group {
  padding-top: 12px;
  border-top: 1px solid var(--sidebar-border);
}
.tf-sidebar.collapsed .tf-sidebar-item {
  position: relative;
  justify-content: center;
  padding: 0;
}
.tf-sidebar.collapsed .tf-sidebar-item.has-current {
  background: var(--sidebar-accent);
}
.tf-sidebar.collapsed .tf-sidebar-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
}
.tf-sidebar.collapsed .tf-sidebar-dot,
.tf-sidebar.collapsed .tf-sidebar-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
}
.tf-sidebar.collapsed .tf-sidebar-head {
  justify-content: center;
  padding: 0;
}
.tf-sidebar.collapsed .tf-sidebar-foot {
  flex-direction: column;
}
.tf-sidebar.collapsed .tf-sidebar-foot > :not(.tf-sidebar-toggle) {
  flex: none;
}
.tf-sidebar.collapsed .tf-sidebar-toggle {
  margin-left: 0;
}

/* tooltips, flyouts and item menus float in the portal, so the scrolling body does not clip them */
.tf-sidebar-layer {
  position: fixed;
  z-index: var(--z-palette);
}
.tf-sidebar-tip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--frame);
  color: var(--on-frame);
  font: 500 12px/16px var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
  animation: tf-fade var(--dur-fast) var(--ease-out) both;
}
.tf-sidebar-tipcount {
  color: var(--on-frame-muted);
}
.tf-sidebar-flyout {
  min-width: 200px;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
  animation: tf-fade var(--dur-fast) var(--ease-out) both;
}
.tf-sidebar-flyout ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-sidebar-flytitle {
  padding: 6px 12px 8px;
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tf-sidebar-flyout .tf-sidebar-item.nested {
  padding-left: 12px;
}

/* on the AppShell frame */
.tf-sidebar.shell {
  align-self: stretch;
  padding: 16px 8px 8px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--on-frame);
}
.tf-sidebar.shell .tf-sidebar-item,
.tf-sidebar.shell .tf-sidebar-grouplabel {
  color: var(--on-frame-muted);
}
.tf-sidebar.shell .tf-sidebar-item:hover,
.tf-sidebar.shell .tf-sidebar-item.flying,
.tf-sidebar.shell.collapsed .tf-sidebar-item.has-current {
  background: var(--frame-hover);
  color: var(--on-frame);
}
.tf-sidebar.shell .tf-sidebar-item.has-current,
.tf-sidebar.shell button.tf-sidebar-grouplabel:hover {
  color: var(--on-frame);
}
.tf-sidebar.shell .tf-sidebar-item[aria-current="page"] {
  background: var(--frame-active);
  color: var(--on-frame);
}
.tf-sidebar.shell .tf-sidebar-item:disabled:hover {
  background: transparent;
  color: var(--on-frame-muted);
}
.tf-sidebar.shell .tf-sidebar-foot,
.tf-sidebar.shell.collapsed .tf-sidebar-group + .tf-sidebar-group {
  border-color: var(--frame-hover);
}
.tf-sidebar.shell .tf-iconbtn-ghost {
  color: var(--on-frame-muted);
}
.tf-sidebar.shell .tf-iconbtn-ghost:hover {
  background: var(--frame-hover);
  color: var(--on-frame);
}
.tf-sidebar.shell .tf-sidebar-head {
  min-height: 44px;
}

/* UserMenu: the signed-in person, opening their account menu */
.tf-usermenu {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 4px 8px 4px 4px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tf-usermenu.compact {
  width: auto;
  padding: 4px;
}
.tf-usermenu:hover,
.tf-usermenu[aria-expanded="true"] {
  background: var(--sidebar-accent);
}
.tf-usermenu:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-usermenu-avatar {
  display: inline-flex;
  flex: none;
}
.tf-usermenu-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.tf-usermenu-name {
  font: 500 13px/18px var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-usermenu-mail {
  font: 500 11px/14px var(--font-sans);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-sidebar.shell .tf-usermenu {
  color: var(--on-frame);
}
.tf-sidebar.shell .tf-usermenu:hover,
.tf-sidebar.shell .tf-usermenu[aria-expanded="true"] {
  background: var(--frame-hover);
}
.tf-sidebar.shell .tf-usermenu-mail {
  color: var(--on-frame-muted);
}
.tf-wssw.compact {
  padding: 4px;
}

/* the bar that opens the sidebar as a drawer on phones */
.tf-sidebar-bar,
.tf-sidebar-scrim {
  display: none;
}
@media (max-width: 760px) {
  .tf-sidebar-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 6px 12px 6px 6px;
    box-sizing: border-box;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 0 0 var(--line-width) var(--line);
    color: var(--ink);
  }
  .tf-sidebar-bar.attached {
    border-radius: 0;
    box-shadow: none;
    background: var(--sidebar);
    border-bottom: 1px solid var(--sidebar-border);
  }
  .tf-sidebar-bar.shell {
    min-height: 56px;
    padding: 8px 8px 8px 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: var(--on-frame);
  }
  .tf-sidebar-bar.shell .tf-iconbtn-ghost {
    color: var(--on-frame);
  }
  .tf-sidebar-bar > :not(.tf-iconbtn) {
    min-width: 0;
  }
  .tf-sidebar,
  .tf-sidebar.attached,
  .tf-sidebar.shell {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-overlay);
    width: min(300px, 86vw);
    min-height: 0;
    padding: 12px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
    transform: translateX(-105%);
    visibility: hidden;
    transition:
      transform var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
  }
  .tf-sidebar.shell {
    background: var(--frame);
  }
  .tf-sidebar.attached {
    background: var(--sidebar);
  }
  .tf-sidebar.open {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .tf-sidebar-toggle {
    display: none;
  }
  .tf-sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--scrim-strong);
    animation: tf-fade var(--dur-base) var(--ease-out) both;
  }
}

@media (max-width: 760px) {
  .tf-navmenu-panel.with-feature {
    grid-template-columns: minmax(0, 1fr);
  }
  .tf-navmenu-feature {
    min-height: 0;
  }
  .tf-navmenu-list {
    flex-wrap: wrap;
  }
  .tf-menubar {
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
  }
}

/* Drawer (sheet) sides */
.tf-drawer.side-left {
  right: auto;
  left: 0;
  animation-name: tf-sheet-left;
}
.tf-drawer.side-top,
.tf-drawer.side-bottom {
  left: 0;
  right: 0;
  width: 100%;
  max-height: min(80%, 640px);
}
.tf-drawer.side-top {
  bottom: auto;
  animation-name: tf-sheet-top;
}
.tf-drawer.side-bottom {
  top: auto;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  animation-name: tf-sheet-bottom;
}
@keyframes tf-sheet-left {
  from {
    opacity: 0;
    transform: translateX(calc(-24px * var(--motion-travel)));
  }
}
@keyframes tf-sheet-top {
  from {
    opacity: 0;
    transform: translateY(calc(-24px * var(--motion-travel)));
  }
}
@keyframes tf-sheet-bottom {
  from {
    opacity: 0;
    transform: translateY(calc(24px * var(--motion-travel)));
  }
}

/* ResizablePanels */
.tf-panels {
  display: grid;
  min-width: 0;
  min-height: 0;
}
.tf-panels.vertical {
  height: 100%;
}
.tf-panels-pane {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}
.tf-panels-handle {
  position: relative;
  display: grid;
  place-items: center;
  cursor: col-resize;
  touch-action: none;
}
.tf-panels-handle::before {
  content: "";
  width: 1px;
  height: 100%;
  background: var(--line);
}
.tf-panels-handle::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}
.tf-panels.vertical > .tf-panels-handle {
  cursor: row-resize;
}
.tf-panels.vertical > .tf-panels-handle::before {
  width: 100%;
  height: 1px;
}
.tf-panels.vertical > .tf-panels-handle::after {
  width: 28px;
  height: 4px;
}
.tf-panels-handle:hover::before,
.tf-panels-handle:focus-visible::before {
  background: var(--focus);
}
.tf-panels-handle:focus-visible {
  outline: none;
}
.tf-panels-handle:focus-visible::after {
  background: var(--focus);
}

/* Buttons rendered as links (asChild) */
a.tf-btn,
a.tf-iconbtn {
  box-sizing: border-box;
  text-decoration: none;
}

/* 06-responsive.css */
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
/* ───────────── Mobile first ─────────────
   Every component works from a 320px wide container up. The reference describes the desktop
   look; this layer adds the small-screen behaviour on top of it, so ≥ 1181px stays exactly the
   reference while narrower screens reflow.

   Breakpoints: phone ≤ 760px · tablet 761–1180px · desktop ≥ 1181px (plus 480px for the
   narrowest phones). The app shell measures its own width (container queries); everything else
   the viewport. The Pro CSS is derived from this file like from all
   other Halo files, so both kits reflow the same way. */

/* Layout grid: one column on phones, the given columns from tablets up.
   --cols     columns on desktop (e.g. `repeat(3, minmax(0, 1fr))`)
   --cols-md  columns on tablets (default: --cols)
   --cols-sm  columns on phones (default: one column) */
.tf-grid {
  grid-template-columns: var(--cols-sm, minmax(0, 1fr));
}
@media (min-width: 761px) {
  .tf-grid {
    grid-template-columns: var(--cols-md, var(--cols, minmax(0, 1fr)));
  }
}
@media (min-width: 1181px) {
  .tf-grid {
    grid-template-columns: var(--cols, minmax(0, 1fr));
  }
}

/* Sheet with a page nav (SubNav) on the left and an optional aside on the right */
.tf-sheet-nav {
  grid-template-columns: 208px minmax(0, 1fr);
  align-items: start;
}
.tf-sheet-nav.tf-sheet-aside {
  grid-template-columns: 208px minmax(0, 1fr) 304px;
}

/* The shell reflows by its own width (container queries), not by the screen's: an app shell
   embedded in a narrower area, or a preview in the docs, gets the layout that fits it. */
.tf-shell {
  container: tf-shell / inline-size;
}
/* Grids inside a shell follow the shell's width too */
.tf-shell .tf-grid {
  grid-template-columns: var(--cols-sm, minmax(0, 1fr));
}
@container tf-shell (min-width: 761px) {
  .tf-shell .tf-grid {
    grid-template-columns: var(--cols-md, var(--cols, minmax(0, 1fr)));
  }
}
@container tf-shell (min-width: 1181px) {
  .tf-shell .tf-grid {
    grid-template-columns: var(--cols, minmax(0, 1fr));
  }
}

/* Tablet: asides move below the main column, nav labels and the page nav shrink to icons */
@container tf-shell (max-width: 1180px) {
  .tf-sheet:not(.tf-sheet-2):not(.tf-sheet-nav) {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .tf-sheet-nav.tf-sheet-aside {
    grid-template-columns: 208px minmax(0, 1fr);
  }
  .tf-sheet > .tf-main ~ :not(.tf-dock-float) {
    grid-column: 2;
  }
  /* with the sidebar there is no rail column: asides go below the main column */
  .tf-sheet.tf-sheet-norail:not(.tf-sheet-2) {
    grid-template-columns: minmax(0, 1fr);
  }
  .tf-sheet-norail > .tf-main ~ :not(.tf-dock-float) {
    grid-column: 1;
  }
  /* the dock floats over the end of the sheet, not of the main column (asides follow it) */
  .tf-main-dock {
    padding-bottom: 0;
  }
  .tf-sheet:has(> .tf-dock-float) {
    padding-bottom: 104px;
  }
  .tf-nav-label {
    display: none;
  }
  .tf-nav-item {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
  /* with the labels gone, a count becomes a badge on the icon */
  .tf-nav-item .tf-nav-count {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
  }
}
@container tf-shell (max-width: 1040px) {
  .tf-sheet-nav,
  .tf-sheet-nav.tf-sheet-aside {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .tf-subnav-eyebrow {
    display: none;
  }
  /* icon-only, but the label stays the button's accessible name */
  .tf-subnav-label,
  .tf-subnav-action span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tf-subnav-item,
  .tf-subnav-action {
    justify-content: center;
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-1);
  }
  .tf-subnav-item {
    position: relative;
  }
  .tf-subnav-count {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
    padding: 0 4px;
  }
}

/* Phone: the shell becomes one column; rail and page nav turn into scrolling rows */
@container tf-shell (max-width: 760px) {
  .tf-topbar,
  .tf-shell .tf-topbar {
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .tf-brand-tag,
  .tf-user-text,
  .tf-user > .tf-ico {
    display: none;
  }
  .tf-user {
    padding: 0 4px;
  }
  .tf-nav {
    flex: 1;
    margin: 0;
  }
  .tf-topbar-extra {
    gap: 4px;
  }
  .tf-topbtn {
    justify-content: center;
    gap: 0;
    min-width: 36px;
    padding: 0;
    font-size: 0;
  }
  .tf-topbtn kbd {
    display: none;
  }
  .tf-sheet,
  .tf-sheet-2,
  .tf-sheet:not(.tf-sheet-2):not(.tf-sheet-nav),
  .tf-sheet-nav,
  .tf-sheet-nav.tf-sheet-aside {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3);
    border-radius: 0;
  }
  .tf-sheet > .tf-main ~ :not(.tf-dock-float) {
    grid-column: auto;
  }
  .tf-sheet:has(> .tf-dock-float) {
    padding-bottom: var(--space-3);
  }
  .tf-rail {
    width: auto;
    flex-direction: row;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tf-rail-group {
    flex-direction: row;
  }
  /* on phones the rail is a row of icons, expanded or not */
  .tf-rail.expanded {
    width: auto;
  }
  .tf-rail.expanded .tf-rail-btn {
    display: grid;
    width: 40px;
    padding: 0;
  }
  .tf-rail.expanded .tf-rail-label {
    display: none;
  }
  .tf-rail.expanded .tf-dotcount {
    position: absolute;
  }
  .tf-main {
    gap: var(--space-4);
  }
  /* the dock stays at the bottom of the screen while the page scrolls */
  .tf-main-dock {
    padding-bottom: 0;
  }
  .tf-dock-float {
    position: sticky;
    left: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index: var(--z-sticky);
    justify-self: center;
    max-width: 100%;
    transform: none;
  }
  .tf-dock {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  /* SubNav: a scrolling row of labelled pills above the content */
  .tf-subnav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tf-subnav-head,
  .tf-subnav-list {
    flex-direction: row;
    flex: none;
  }
  .tf-subnav-list {
    gap: 4px;
  }
  .tf-subnav-label {
    display: inline;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
  .tf-subnav-item {
    width: auto;
    height: var(--density-control);
    padding: 0 14px;
    gap: 8px;
    border-radius: var(--radius-pill);
  }
  .tf-subnav-action {
    width: 36px;
    height: var(--density-control);
    flex: none;
  }
  .tf-subnav-count {
    position: static;
  }
  .tf-subnav-labels {
    display: none;
  }
}

@media (max-width: 760px) {
  .tf-shell {
    padding: 0 4px 4px;
    border-radius: var(--radius-lg);
  }
}

/* Popover width comes from the component (`width` prop) so phones can override it */
.tf-popover {
  width: var(--pop-w, auto);
}

/* Fixed sizes never exceed their container */
.tf-skel {
  max-width: 100%;
}

/* Tables scroll inside their own box instead of widening the page */
.tf-table-scroll {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
/* Table stack: narrow boxes show every row as a card, each cell with its column label */
.tf-table-stackbox {
  container: tf-table / inline-size;
}
@container tf-table (max-width: 600px) {
  .tf-table.stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tf-table.stack,
  .tf-table.stack tbody,
  .tf-table.stack tr {
    display: block;
  }
  .tf-table.stack tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }
  .tf-table.stack tr:last-child {
    border-bottom: 0;
  }
  .tf-table.stack td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: auto;
    min-height: var(--control-sm);
    padding: 4px 0;
    border-bottom: 0;
    text-align: right;
    white-space: normal;
  }
  .tf-table.stack td::before {
    content: attr(data-label);
    flex: none;
    max-width: 50%;
    text-align: left;
    font: 500 11px/14px var(--font-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .tf-table.stack tbody tr:hover td {
    background: transparent;
  }
}

/* ── Phone: components ── */
@media (max-width: 760px) {
  /* surfaces get a little tighter */
  .tf-panel {
    padding: var(--space-5);
  }
  .tf-header-title {
    font-size: 24px;
    line-height: 30px;
  }
  .tf-stat-value {
    font-size: 26px;
    line-height: 32px;
  }
  .tf-table th,
  .tf-table td {
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
  }

  /* fields shrink with their container */
  .tf-field {
    min-width: 0;
    max-width: 100%;
  }
  .tf-otp {
    gap: 6px;
  }
  .tf-otp-cell {
    height: 52px;
  }

  /* segmented controls and tabs scroll sideways when the labels do not fit (block ones shrink) */
  .tf-seg:not(.block),
  .tf-tabs:not(.tf-tabs-block) {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tf-seg:not(.block) .tf-seg-item,
  .tf-tabs:not(.tf-tabs-block) .tf-tab {
    flex: none;
  }
  .tf-seg,
  .tf-tabs {
    min-width: 0;
  }
  .tf-model-btn {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tf-status {
    min-width: 0;
    white-space: normal;
  }
  .tf-blocks-row,
  .tf-runs-main,
  .tf-conn-act,
  .tf-hook-dl-row,
  .tf-rating {
    flex-wrap: wrap;
  }
  .tf-header > * {
    min-width: 0;
    max-width: 100%;
  }

  /* overlays: dialogs become bottom sheets, popovers stay inside the screen */
  .tf-overlay {
    place-items: end stretch;
    padding: 0;
  }
  .tf-overlay > .tf-modal {
    max-width: none;
    max-height: calc(100% - 24px);
    overflow-y: auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  }
  .tf-modal-wrap {
    padding: var(--space-3);
  }
  .tf-palette-wrap {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    padding-left: 8px;
    padding-right: 8px;
  }
  .tf-palette {
    max-height: calc(100% - 16px);
  }
  .tf-toaster {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    transform: none;
  }
  .tf-notes {
    left: 8px;
    right: 8px;
    width: auto;
  }
  .tf-cookie {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
  .tf-launch:not(.inline) {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .tf-launch:not(.inline) .tf-launch-panel {
    width: 100%;
  }
  .tf-popover {
    max-width: calc(100vw - 24px);
  }
  /* a popover under a full-width field takes the field's width */
  .tf-pop-anchor.block > .tf-popover {
    right: 0;
    width: auto;
    min-width: 0;
  }
  .tf-tab,
  .tf-seg-item {
    white-space: nowrap;
  }

  /* rows wrap instead of pushing their actions out */
  .tf-secret {
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 8px 8px 8px 16px;
    border-radius: var(--radius-lg);
  }
  .tf-secret-val {
    flex-basis: 120px;
  }
  .tf-secret > .tf-row {
    margin-left: auto;
  }
  .tf-uptime-bar {
    gap: 1px;
  }
  .tf-uptime-bar i {
    min-width: 1px;
  }
  .tf-imgvar {
    grid-template-columns: minmax(0, 1fr);
  }
  .tf-imgvar-stage {
    min-height: 0;
  }
  .tf-tabbar-item {
    min-width: 0;
  }
}

/* Narrow phones: surfaces get the compact inset */
@media (max-width: 480px) {
  .tf-panel {
    padding: var(--space-4);
  }
  .tf-card {
    padding: var(--space-4);
  }
}

/* Touch screens: text fields use 16px so mobile browsers do not zoom in on focus */
@media (pointer: coarse) {
  :is(
    .tf-input,
    .tf-search input,
    .tf-combo-input,
    .tf-number-input,
    .tf-composer-input,
    .tf-inline-input,
    .tf-palette-input input
  ):not([type="checkbox"], [type="radio"]) {
    /* max() keeps the Pro derivation (16px → 14px) from shrinking it */
    font-size: max(16px, 1em);
  }
}

/* AppShell with a sidebar on phones: the sidebar's bar on top of the frame, the sheet below */
@media (max-width: 760px) {
  .tf-shell.tf-shell-sidebar {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 8px 8px;
  }
}

/* Fluid at every width: segmented controls, tabs and toggle groups never push past their
   container. When space runs short the items shrink and their labels end in an ellipsis. */
.tf-tabs {
  max-width: 100%;
  box-sizing: border-box;
}
.tf-seg-item,
.tf-tab,
.tf-togglegroup .tf-toggle {
  min-width: 0;
}
.tf-seg-label,
.tf-tab,
.tf-toggle-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* key hints mean nothing on touch screens */
@media (pointer: coarse) {
  .tf-search .tf-kbd {
    display: none;
  }
}

/* Fluid actions: an action row measures itself, so its buttons answer to the box it sits in (a
   thin card, a side panel, a phone) instead of the window. When the row is narrow it wraps and
   its buttons share the full width; when it is very narrow each button takes a line. The rows are
   the kit's own footers and action bars, and plain `.tf-row`s of buttons placed directly in a
   column box (panel, card, dialog, form …), where they always span the box. */
:is(
  .tf-modal-foot,
  .tf-card-foot,
  .tf-approval-foot,
  .tf-review-actions,
  .tf-cookie-actions,
  .tf-push-actions,
  .tf-insight-actions,
  .tf-journal-foot,
  :is(.tf-panel, .tf-card, .tf-modal, .tf-drawer, .tf-popover, .tf-form, .tf-col)
    > .tf-row:not(:has(> :not(.tf-btn, .tf-iconbtn)))
) {
  container: tf-actions / inline-size;
  flex-wrap: wrap;
}
@container tf-actions (max-width: 400px) {
  .tf-btn {
    flex: 1 1 auto;
  }
}
@container tf-actions (max-width: 240px) {
  .tf-btn {
    flex-basis: 100%;
  }
}

/* 07-polish.css */
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
/* ───────────── Polish ─────────────
   Small consistency fixes found by auditing every preview in both kits and themes. Zero
   specificity (`:where`), so every component rule still wins; derived into Pro like the rest. */

/* Text inside kit components never falls back to browser defaults: form controls inherit the
   kit font, code uses the kit mono font, and bold stays on the scale (no "bolder" stacking to
   900 inside an already bold line). */
:where(button, input, select, textarea):where([class*="tf-"]),
:where([class*="tf-"]) :where(button, input, select, textarea) {
  font: inherit;
}
:where([class*="tf-"]) :where(code, kbd, samp, pre) {
  font-family: var(--font-mono);
}
:where([class*="tf-"]) :where(b, strong) {
  font-weight: 600;
}

/* Icon-only buttons carry no browser padding (1px 6px), so their icon box is the button box */
:where(
  .tf-dock-btn,
  .tf-rail-btn,
  .tf-kanban-add,
  .tf-cal-day,
  .tf-map-bubble,
  .tf-rte-btn,
  .tf-subnav-action,
  .tf-tabbar-item,
  .tf-voice-end,
  .tf-launch-btn,
  .tf-announce-x,
  .tf-number-input button,
  .tf-otp-cell,
  .tf-search input
) {
  padding: 0;
}

/* <small> inside a line is sized by the kit, not by the browser's "smaller" */
.tf-hit-top small {
  font-size: 12px;
}
.tf-push-top small {
  font-size: inherit;
}

/* Tab and segment labels never break inside a word; a segmented control that does not fit
   scrolls instead of spilling out of its card */
.tf-tab,
.tf-seg-item {
  white-space: nowrap;
}
.tf-seg,
.tf-tabs {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Pipeline steps wrap onto a second row instead of being cut off in a narrow panel */
.tf-pipeline {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* Plain links inside components (passed in by the app) look like the kit's links, not the
   browser's blue */
:where([class*="tf-"]) a:not([class]) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Text areas grow with the layout, not by a native drag handle */
textarea.tf-input,
.tf-composer-input {
  resize: none;
}

/* Row items are full-width; sized as border-box whether they are a button or a div */
.tf-row-item {
  box-sizing: border-box;
}

/* A stat cell's corner icon does not push its value down: every value in a row starts at the
   same height, with or without an icon */
.tf-statcell-top > :not(.tf-statcell-label) {
  margin-block: -8px;
}

/* Page numbers and the "…" gap centre their text the same way (a span is not a button) */
.tf-page {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
}

/* Stacked avatars overlap less, so the initials of the covered avatar stay readable */
.tf-avatar-stack .tf-avatar + .tf-avatar {
  margin-left: -4px;
}

/* Map bubbles carry data: a stronger tint that stays visible on the dark map as well */
.tf-map-bubble.tf-t-sky {
  background: color-mix(in srgb, var(--sky-ink) 35%, var(--sky));
}
.tf-map-bubble.tf-t-mint {
  background: color-mix(in srgb, var(--mint-ink) 35%, var(--mint));
}
.tf-map-bubble.tf-t-lilac {
  background: color-mix(in srgb, var(--lilac-ink) 35%, var(--lilac));
}
.tf-map-bubble.tf-t-butter {
  background: color-mix(in srgb, var(--butter-ink) 35%, var(--butter));
}
.tf-map-bubble.tf-t-blush {
  background: color-mix(in srgb, var(--blush-ink) 35%, var(--blush));
}

/* Colour swatches keep a visible edge, so black on a dark card (or white on light) still shows */
.tf-swatch {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Every status shape takes the same 8px box, so labels after a dot, diamond or triangle line up */
.tf-shape-diamond {
  width: 8px;
  height: 8px;
  transform: rotate(45deg) scale(0.875);
}
.tf-shape-triangle {
  border-left-width: 4px;
  border-right-width: 4px;
  border-bottom-width: 7px;
  margin-bottom: 1px;
}

/* Invoice number block: right-aligned at the right edge, also when it wraps under the sender */
.tf-paper-id {
  margin-left: auto;
  text-align: right;
}

/* A segmented control is as wide as its options (it does not stretch its track in a column or
   grid cell); the block variant fills the row on purpose */
.tf-seg:not(.block),
.tf-tabs:not(.tf-tabs-block) {
  width: fit-content;
}

/* The reference hides the page-nav labels on narrow screens with display: none, which also
   removes the buttons' names; keep them for assistive tech */
@media (max-width: 1040px) {
  .tf-subnav-label,
  .tf-subnav-action span {
    display: inline;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 760px) {
  .tf-subnav-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

/* Width-capped surfaces with padding stay inside their container */
.tf-push,
.tf-seg,
.tf-tabs {
  box-sizing: border-box;
}

/* 08-glass.css */
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
/* Glass: translucent surfaces for UI that floats over content (maps, 3D scenes, video, photos).
 *
 * A glass surface shows a blurred, colour-lifted view of what is behind it, with a light edge on
 * top. What sits on it reads the glass tokens too (inputs, chips, tab tracks, hover highlights,
 * nested cards), so the surface stays one piece of glass instead of opaque blocks on glass.
 *
 * - `.tf-glass` (the `surface="glass"` prop) makes one surface glass.
 * - `[data-surface="glass"]` (`<UIProvider surface="glass">`) makes every top-level surface and
 *   every floating layer inside it glass. Surfaces nested in a surface stay clear instead of
 *   stacking glass on glass; `.tf-solid` (`surface="solid"`) opts one surface out.
 *
 * Floating layers (menus, popovers, dialogs, drawers) use the stronger `--glass-strong` fill: they
 * carry more text. The fills are opaque enough for 4.5:1 body text over any backdrop; reduced
 * transparency, high contrast and forced colours fall back to solid surfaces.
 */

/* the surface itself */
.tf-glass:not(.tf-solid),
[data-surface="glass"]
  :is(
    .tf-panel,
    .tf-card,
    .tf-stat,
    .tf-dock,
    .tf-sidebar:not(.shell),
    .tf-map-legend,
    .tf-map-ctl,
    .tf-map-pop,
    .tf-vital,
    .tf-journal,
    .tf-goal,
    .tf-insight,
    .tf-consent-item,
    .tf-nw,
    .tf-policy
  ):not(
    :is(
        .tf-panel,
        .tf-card,
        .tf-stat,
        .tf-dock,
        .tf-sidebar,
        .tf-popover,
        .tf-menu,
        .tf-hovercard,
        .tf-selectmenu-list,
        .tf-navmenu-panel,
        .tf-palette,
        .tf-modal,
        .tf-drawer,
        .tf-vital,
        .tf-journal,
        .tf-goal,
        .tf-insight,
        .tf-consent-item,
        .tf-nw,
        .tf-policy,
        .tf-glass
      )
      *
  ):not(.tf-solid),
[data-surface="glass"]
  :is(
    .tf-popover,
    .tf-menu:not(.tf-menu-static),
    .tf-hovercard,
    .tf-selectmenu-list,
    .tf-navmenu-panel,
    .tf-palette,
    .tf-modal,
    .tf-drawer
  ):not(.tf-solid) {
  --glass-fill: var(--glass);
  background:
    linear-gradient(to bottom, var(--glass-sheen), transparent 56px) border-box,
    linear-gradient(var(--glass-tinted), var(--glass-tinted)) border-box,
    var(--glass-fill);
  --glass-tinted: color-mix(in srgb, var(--tint, transparent) var(--glass-tint), transparent);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border-color: var(--glass-border);
  box-shadow:
    inset 0 1px 0 0 var(--glass-highlight),
    inset 0 0 0 1px var(--glass-border),
    var(--shadow-glass);
  color: var(--foreground);
  /* what sits on the glass */
  --surface: var(--glass-control);
  --secondary: var(--glass-control);
  --bg-100: var(--glass-control);
  --surface-sunken: var(--glass-well);
  --muted: var(--glass-well);
  --canvas: var(--glass-well);
  --bg-200: var(--glass-well);
  --accent: var(--glass-hover);
  --bg-300: var(--glass-hover);
  /* the faintest text steps up one shade: glass gives up some contrast to what is behind */
  --ink-subtle: var(--muted-foreground);
  --fg-300: var(--muted-foreground);
}

/* floating layers carry more text: a stronger fill */
:is(
  .tf-popover,
  .tf-menu,
  .tf-hovercard,
  .tf-selectmenu-list,
  .tf-navmenu-panel,
  .tf-palette,
  .tf-modal,
  .tf-drawer
).tf-glass,
[data-surface="glass"]
  :is(
    .tf-popover,
    .tf-menu:not(.tf-menu-static),
    .tf-hovercard,
    .tf-selectmenu-list,
    .tf-navmenu-panel,
    .tf-palette,
    .tf-modal,
    .tf-drawer
  ):not(.tf-solid) {
  --glass-fill: var(--glass-strong);
}

/* Controls floating on their own (not on a surface) become small glass pills: a search field or
   zoom buttons over a map */
[data-surface="glass"]
  :is(
    .tf-search,
    .tf-seg,
    .tf-btngroup,
    .tf-iconbtn-soft,
    .tf-iconbtn-outline,
    .tf-btn-secondary,
    .tf-chip:not([aria-pressed="true"])
  ):not(
    :is(
        .tf-panel,
        .tf-card,
        .tf-dock,
        .tf-popover,
        .tf-menu,
        .tf-hovercard,
        .tf-selectmenu-list,
        .tf-navmenu-panel,
        .tf-palette,
        .tf-modal,
        .tf-drawer,
        .tf-glass,
        .tf-insight,
        .tf-policy,
        .tf-consent-item,
        .tf-journal,
        .tf-btngroup,
        .tf-map-ctl,
        .tf-topbar
      )
      *
  ):not(.tf-solid) {
  background:
    linear-gradient(to bottom, var(--glass-sheen), transparent) border-box,
    var(--glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow:
    inset 0 1px 0 0 var(--glass-highlight),
    inset 0 0 0 1px var(--glass-border),
    var(--shadow-glass);
  color: var(--foreground);
  --surface: var(--glass-control);
  --secondary: var(--glass-control);
  --surface-sunken: var(--glass-well);
  --bg-200: var(--glass-well);
  --accent: var(--glass-hover);
  --bg-300: var(--glass-hover);
}
[data-surface="glass"]
  :is(.tf-iconbtn-soft, .tf-iconbtn-outline, .tf-btn-secondary, .tf-chip):not(
    :is(
        .tf-panel,
        .tf-card,
        .tf-dock,
        .tf-popover,
        .tf-menu,
        .tf-modal,
        .tf-drawer,
        .tf-insight,
        .tf-policy,
        .tf-consent-item,
        .tf-journal,
        .tf-glass
      )
      *
  ):not(.tf-solid):not([aria-pressed="true"]):hover {
  background:
    linear-gradient(var(--glass-hover), var(--glass-hover)) border-box,
    var(--glass);
}

/* AppShell on glass: the same layout as the solid shell, the frame turned to glass. Top bar and
   rail sit on it without a fill of their own, the sheet clears so the backdrop shows through,
   and everything drawn on the frame (nav, user, rail) reads the glass colours */
[data-surface="glass"] .tf-shell {
  background:
    linear-gradient(to bottom, var(--glass-sheen), transparent 56px) border-box,
    var(--glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow:
    inset 0 1px 0 0 var(--glass-highlight),
    inset 0 0 0 1px var(--glass-border),
    var(--shadow-glass);
  --frame: var(--glass);
  --frame-hover: var(--glass-hover);
  --frame-active: var(--glass-hover);
  --frame-strong: var(--glass-control);
  --on-frame: var(--foreground);
  --on-frame-muted: var(--muted-foreground);
}
[data-surface="glass"] .tf-shell .tf-sheet {
  background: transparent;
}
[data-surface="glass"] .tf-shell .tf-topbar {
  background: transparent;
}

/* switch knobs stay solid on glass */
.tf-glass .tf-switch::after,
[data-surface="glass"] .tf-switch::after {
  background: var(--card);
}

/* Reduced transparency, more contrast, forced colours and browsers without backdrop blur switch
   the glass tokens themselves (see tokens.css). Forced colours drop shadows, so glass keeps an
   edge there. */
@media (forced-colors: active) {
  .tf-glass,
  [data-surface="glass"]
    :is(
      .tf-panel,
      .tf-card,
      .tf-stat,
      .tf-dock,
      .tf-sidebar:not(.shell),
      .tf-map-legend,
      .tf-map-ctl,
      .tf-map-pop,
      .tf-vital,
      .tf-journal,
      .tf-goal,
      .tf-insight,
      .tf-consent-item,
      .tf-nw,
      .tf-policy
    ) {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
}

/* FloatingLayout: UI along the edges of a full-bleed background */
.tf-floating {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  container: tf-floating / inline-size;
}
.tf-floating-bg {
  position: absolute;
  inset: 0;
}
.tf-floating-bg > * {
  width: 100%;
  height: 100%;
}
.tf-floating-ui {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(0, var(--floating-start, 320px)) minmax(0, 1fr)
    minmax(0, var(--floating-end, 340px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top top top"
    "start controls end"
    "bottom bottom bottom";
  gap: var(--space-4);
  padding: var(--space-4);
  overflow-y: auto;
  /* the background stays usable between the slots */
  pointer-events: none;
}
.tf-floating-ui > * {
  pointer-events: auto;
  min-width: 0;
}
.tf-floating-top {
  grid-area: top;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.tf-floating-start {
  grid-area: start;
  align-self: start;
}
.tf-floating-end {
  grid-area: end;
  align-self: start;
}
.tf-floating-bottom {
  grid-area: bottom;
  justify-self: center;
}
/* background controls and source notes: the free corner, clear of the panels and the dock */
.tf-floating-ui > .tf-floating-controls {
  grid-area: controls;
  align-self: end;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  pointer-events: none;
}
.tf-floating-controls > * {
  pointer-events: auto;
}
.tf-floating-attribution {
  max-width: 100%;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-muted);
  font: 500 11px/16px var(--font-sans);
  overflow-wrap: anywhere;
}
.tf-floating-handle {
  display: none;
}
.tf-floating-ui > :is(.tf-floating-top, .tf-floating-bottom) {
  pointer-events: none;
}
.tf-floating-ui > :is(.tf-floating-top, .tf-floating-bottom) > * {
  pointer-events: auto;
}
@container tf-floating (max-width: 720px) {
  /* on a phone the layout grows with its slots and the background fills behind them */
  .tf-floating-ui {
    position: relative;
    /* the padding counts into the height it inherits, so the bottom slot stays inside */
    box-sizing: border-box;
    min-height: inherit;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(120px, 1fr) auto auto;
    grid-template-areas:
      "top"
      "start"
      "."
      "end"
      "bottom";
    gap: var(--space-3);
    padding: var(--space-3);
  }
  .tf-floating-ui > .tf-floating-controls {
    grid-area: auto;
    grid-row: 3;
  }
  /* the end slot as a bottom sheet over the background: a peek, or most of the height */
  .tf-floating.has-sheet .tf-floating-ui {
    grid-template-rows: auto auto minmax(120px, 1fr) auto;
    grid-template-areas:
      "top"
      "start"
      "."
      "bottom";
    padding-bottom: calc(var(--space-3) + 96px);
  }
  .tf-floating.has-sheet .tf-floating-end {
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 0;
    z-index: 2;
    max-height: 96px;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--surface);
    box-shadow: 0 0 0 var(--line-width) var(--line);
    transition: max-height var(--dur-base) var(--ease-out);
  }
  [data-surface="glass"].tf-floating.has-sheet .tf-floating-end {
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
  }
  .tf-floating.has-sheet.sheet-full .tf-floating-end {
    max-height: 75%;
    overflow-y: auto;
  }
  .tf-floating.has-sheet .tf-floating-handle {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .tf-floating.has-sheet .tf-floating-handle::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 10px auto;
    border-radius: var(--radius-pill);
    background: var(--line-strong);
  }
  .tf-floating.has-sheet .tf-floating-handle:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }
}

/* in a glass layout the attribution is glass too */
[data-surface="glass"] .tf-floating-attribution {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}

/* 09-motion.css */
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
/* Motion: leaving layers, reveal on scroll, page transitions, the expressive level.
 *
 * Levels come from `data-motion` (tokens.css): "standard", "expressive" (longer, staggered page
 * entrances, more travel) and "off". The reader's reduced-motion setting always means off. Only
 * transform, opacity and (expressive Halo) a short blur move; everything else stays put.
 */

/* ── Leaving: layers animate out for --dur-exit, then unmount (usePresence) ── */
@keyframes tf-out {
  to {
    opacity: 0;
    translate: 0 calc(6px * var(--motion-travel));
    scale: 0.98;
  }
}
@keyframes tf-out-fade {
  to {
    opacity: 0;
  }
}
@keyframes tf-out-right {
  to {
    opacity: 0;
    translate: calc(40px * var(--motion-travel)) 0;
  }
}
@keyframes tf-out-left {
  to {
    opacity: 0;
    translate: calc(-40px * var(--motion-travel)) 0;
  }
}
@keyframes tf-out-up {
  to {
    opacity: 0;
    translate: 0 calc(-40px * var(--motion-travel));
  }
}
@keyframes tf-out-down {
  to {
    opacity: 0;
    translate: 0 calc(16px * var(--motion-travel));
  }
}
[data-closing] {
  pointer-events: none;
}
.tf-popover[data-closing],
.tf-hovercard[data-closing],
.tf-modal-wrap[data-closing] .tf-modal,
.tf-overlay[data-closing] :is(.tf-modal, .tf-confirm),
.tf-palette-wrap[data-closing] .tf-palette {
  animation: tf-out var(--dur-exit) var(--ease-in-out) forwards;
}
.tf-tooltip[data-closing],
.tf-modal-wrap[data-closing] .tf-backdrop,
.tf-overlay[data-closing] .tf-backdrop,
.tf-palette-wrap[data-closing],
.tf-drawer-wrap[data-closing] {
  animation: tf-out-fade var(--dur-exit) var(--ease-in-out) forwards;
}
.tf-drawer-wrap[data-closing] .tf-drawer {
  animation: tf-out-right var(--dur-exit) var(--ease-in-out) forwards;
}
.tf-drawer-wrap[data-closing] .tf-drawer.side-left {
  animation-name: tf-out-left;
}
.tf-drawer-wrap[data-closing] .tf-drawer.side-top {
  animation-name: tf-out-up;
}
.tf-drawer-wrap[data-closing] .tf-drawer.side-bottom,
.tf-toast[data-closing] {
  animation: tf-out-down var(--dur-exit) var(--ease-in-out) forwards;
}

/* ── Reveal: a Stagger below the fold waits until it scrolls into view ── */
.tf-stagger[data-reveal="waiting"] > *,
.tf-stagger[data-reveal="waiting"] > * * {
  animation-play-state: paused;
}

/* ── Page transitions (startViewTransition, Next.js and React view transitions) ── */
@keyframes tf-vt-out {
  to {
    opacity: 0;
    translate: 0 calc(-6px * var(--motion-travel));
  }
}
@keyframes tf-vt-in {
  from {
    opacity: 0;
    translate: 0 calc(10px * var(--motion-travel));
  }
}
:root::view-transition-old(root) {
  animation: tf-vt-out var(--dur-base) var(--ease-in-out) both;
}
:root::view-transition-new(root) {
  animation: tf-vt-in var(--dur-enter) var(--ease-out) both;
}

/* ── Expressive: things come into focus as they rise (Halo; Pro keeps a blur of 0) ── */
@keyframes tf-focus-in {
  from {
    filter: blur(var(--motion-blur));
  }
  to {
    filter: none;
  }
}
[data-motion="expressive"] :is(.tf-stagger > *, .tf-in) {
  animation-name: tf-rise, tf-focus-in;
}
[data-motion="expressive"] .tf-topbar {
  animation-name: tf-drop, tf-focus-in;
}

/* 10-ambient.css */
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
/* Ambient: a calm, living background for glass UI. Soft colour fields from the kit (pastels in
 * Halo, a faint aurora in Pro) drift slowly; a photo or video can take their place under a scrim.
 * The drift only moves (transform), stops with motion off and pauses off screen.
 */
:where(:has(> .tf-ambient:not(.fixed))) {
  position: relative;
  isolation: isolate;
}
.tf-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ambient-base);
  pointer-events: none;
}
.tf-ambient.fixed {
  position: fixed;
}
.tf-ambient-field {
  position: absolute;
  width: 75%;
  aspect-ratio: 1;
  border-radius: var(--radius-1);
  background: radial-gradient(closest-side, var(--field), transparent);
  animation: tf-ambient-drift 34s var(--ease-in-out) infinite alternate;
}
.tf-ambient-field:nth-child(1) {
  top: -30%;
  left: -15%;
}
.tf-ambient-field:nth-child(2) {
  top: -10%;
  right: -25%;
  animation-duration: 41s;
  animation-direction: alternate-reverse;
}
.tf-ambient-field:nth-child(3) {
  bottom: -35%;
  left: 10%;
  animation-duration: 47s;
}
.tf-ambient-field:nth-child(4) {
  bottom: -25%;
  right: -10%;
  animation-duration: 38s;
  animation-direction: alternate-reverse;
}
.tf-ambient-field:nth-child(n + 5) {
  top: 20%;
  left: 30%;
  width: 55%;
  animation-duration: 52s;
}
@keyframes tf-ambient-drift {
  to {
    translate: 12% 9%;
    scale: 1.15;
  }
}
.tf-ambient.still .tf-ambient-field,
.tf-ambient[data-paused] .tf-ambient-field {
  animation-play-state: paused;
}
.tf-ambient-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tf-ambient.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ambient-scrim);
}
@media (prefers-reduced-motion: reduce) {
  .tf-ambient-field {
    animation: none;
  }
}
[data-motion="off"] .tf-ambient-field {
  animation: none;
}

/* 11-life.css */
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
/* Life: habits, mood, vitals, activity rings, sleep, medication, journal, goals, insights, consent */

/* HabitTracker */
.tf-habits {
  container: tf-habits / inline-size;
  display: grid;
  gap: 4px;
  min-width: 0;
}
.tf-habit-days,
.tf-habit-marks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 24px;
  gap: 6px;
}
.tf-habit-days {
  justify-self: end;
  padding-right: 12px;
  font: 500 11px/16px var(--font-sans);
  color: var(--ink-muted);
  text-align: center;
}
.tf-habit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
}
.tf-habit:hover {
  background: var(--surface-sunken);
}
.tf-habit-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tf-habit-text b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 14px/20px var(--font-sans);
}
.tf-habit-text small {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-habit-streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--butter-ink);
}
.tf-habit-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--primary-foreground);
}
.tf-habit-mark.done {
  border-color: var(--mint-ink);
  background: var(--mint-ink);
}
/* missed: an empty ring with a small cross; no entry: a faint dashed ring */
.tf-habit-mark.missed {
  color: var(--ink-subtle);
}
.tf-habit-mark:not(.done):not(.missed) {
  border-style: dashed;
  border-color: var(--line);
}
.tf-habit-mark.today {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--line-strong);
}
/* narrow: the marks go under the name, the day labels line up with them */
@container tf-habits (max-width: 400px) {
  .tf-habit {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 8px;
  }
  .tf-habit-marks {
    grid-column: 1 / -1;
  }
  .tf-habit-days {
    justify-self: start;
    padding: 0 0 0 12px;
  }
}
@container tf-habits (max-width: 240px) {
  .tf-habit-days,
  .tf-habit-marks {
    gap: 2px;
  }
}
button.tf-habit-mark {
  cursor: pointer;
}
button.tf-habit-mark:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* MoodPicker */
.tf-mood {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.tf-mood-q {
  padding: 0;
  margin-bottom: 12px;
  font: 500 14px/20px var(--font-sans);
}
.tf-mood-scale {
  container: tf-mood / inline-size;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.tf-mood-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 72px;
  padding: 8px 4px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font: 500 12px/16px var(--font-sans);
  cursor: pointer;
}
/* the picked level keeps the tint its tf-t-* class gives it */
.tf-mood-opt:not(.on) {
  background: var(--surface-sunken);
}
.tf-mood.compact .tf-mood-opt {
  min-height: 48px;
}
.tf-mood-opt span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* narrow: tighter cells so every word still fits */
@container tf-mood (max-width: 300px) {
  .tf-mood-opt {
    padding: 8px 2px;
    font-size: 11px;
  }
}
.tf-mood-opt input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.tf-mood-opt:hover {
  color: var(--ink);
}
.tf-mood-opt.on {
  box-shadow: inset 0 0 0 2px currentColor;
}
.tf-mood-opt:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* VitalTile */
.tf-vital {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-vital-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tf-vital-head .tf-badge {
  flex: none;
  white-space: nowrap;
}
.tf-vital-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-vital-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.tf-vital-value {
  font: 600 22px/28px var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tf-vital-value small {
  margin-left: 4px;
  font: 500 13px/18px var(--font-sans);
  letter-spacing: 0;
  color: var(--ink-muted);
}
.tf-vital-band {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.tf-vital-normal {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--radius-pill);
  background: var(--mint);
}
.tf-vital-dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 3px solid var(--surface);
  border-radius: var(--radius-full);
  background: var(--mint-ink);
  translate: -50% -50%;
}
.tf-vital.is-low .tf-vital-dot,
.tf-vital.is-high .tf-vital-dot {
  background: var(--butter-ink);
}
.tf-vital-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}

/* ActivityRings */
.tf-rings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.tf-rings svg {
  flex: none;
}
.tf-rings-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-rings-legend li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}
.tf-rings-key {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-1);
}
.tf-rings-name {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-rings-legend b {
  grid-column: 2;
  font: 600 14px/20px var(--font-sans);
  font-variant-numeric: tabular-nums;
}

/* SleepChart */
.tf-sleep {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.tf-sleep-chart {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tf-sleep-lane {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.tf-sleep-name {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-sleep-track {
  position: relative;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.tf-sleep-seg {
  position: absolute;
  top: 2px;
  bottom: 2px;
  min-width: 2px;
  border-radius: var(--radius-sm);
}
.tf-sleep-axis {
  display: flex;
  justify-content: space-between;
  margin-left: 64px;
  font: 500 11px/16px var(--font-sans);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.tf-sleep-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.tf-sleep-sum b {
  font: 600 14px/20px var(--font-sans);
}
.tf-sleep-sum ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-sleep-sum li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-sleep-sum li span:last-child {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* MedicationList */
.tf-meds {
  container: tf-meds / inline-size;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-med {
  display: grid;
  grid-template-columns: 48px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
}
.tf-med.is-due {
  background: var(--surface-sunken);
}
.tf-med-time {
  font: 500 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.tf-med-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tf-med-text b {
  font: 500 14px/20px var(--font-sans);
  overflow-wrap: break-word;
}
.tf-med-text small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-med.is-taken .tf-med-text b {
  color: var(--ink-muted);
}
.tf-med-act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* narrow: time, name and status; the icon gives way */
@container tf-meds (max-width: 400px) {
  .tf-med {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }
  .tf-med > .tf-tinticon {
    display: none;
  }
}

/* JournalEntry */
.tf-journal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-journal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-journal-mood {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.tf-journal-title {
  margin: 0;
  font: 600 14px/20px var(--font-sans);
}
.tf-journal-body {
  font: 500 14px/20px var(--font-sans);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.tf-journal-body p {
  margin: 0 0 8px;
}
.tf-journal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
}
.tf-journal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* GoalCard */
.tf-goal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
/* narrow: the icon steps aside so the title keeps whole words */
@container tf-goal (max-width: 280px) {
  .tf-goal-head > .tf-tinticon {
    display: none;
  }
}
.tf-goal-head {
  container: tf-goal / inline-size;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tf-goal-head .tf-option-text {
  flex: 1;
  padding: 0;
}
.tf-goal-head b {
  font: 600 14px/20px var(--font-sans);
}
.tf-goal-pct {
  font: 600 18px/24px var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.tf-goal-bar {
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.tf-goal-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
}
.tf-goal-meta,
.tf-goal-note {
  margin: 0;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-goal-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 13px/18px var(--font-sans);
}
.tf-goal-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tf-goal-steps li.done {
  color: var(--ink-muted);
}
.tf-goal-step {
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-1);
  color: var(--primary-foreground);
}
.tf-goal-steps li.done .tf-goal-step {
  border-color: var(--primary);
  background: var(--primary);
}

/* InsightCard */
.tf-insight {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 16px 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow:
    0 0 0 var(--line-width) var(--line),
    inset 3px 0 0 var(--sky-ink);
  /* on glass the card takes a faint wash of its tone */
  --tint: var(--sky);
}
.tf-insight.is-success {
  --tint: var(--mint);
  box-shadow:
    0 0 0 var(--line-width) var(--line),
    inset 3px 0 0 var(--mint-ink);
}
.tf-insight.is-warning {
  --tint: var(--butter);
  box-shadow:
    0 0 0 var(--line-width) var(--line),
    inset 3px 0 0 var(--butter-ink);
}
.tf-insight.is-highlight {
  --tint: var(--lilac);
  box-shadow:
    0 0 0 var(--line-width) var(--line),
    inset 3px 0 0 var(--lilac-ink);
}
.tf-insight-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.tf-insight-titles {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.tf-insight-titles small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-insight-titles b {
  font: 600 15px/20px var(--font-sans);
  overflow-wrap: anywhere;
}
.tf-insight-body {
  font: 500 14px/20px var(--font-sans);
  color: var(--ink);
}
.tf-insight-why button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: 500 12px/16px var(--font-sans);
  cursor: pointer;
}
.tf-insight-why button:hover {
  color: var(--ink);
}
.tf-insight-why button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.tf-insight-why button[aria-expanded="true"] .tf-insight-chev {
  rotate: 180deg;
}
.tf-insight-whytext {
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-insight-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ConsentList */
.tf-consent {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.tf-consent-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-consent-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.tf-consent-head .tf-option-text {
  flex: 1;
  min-width: 140px;
  padding: 0;
}
.tf-consent-purpose {
  margin: 0;
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-consent-scopes {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-consent-scopes li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.tf-consent-scopes .tf-option-text {
  min-width: 0;
  padding: 0;
}
.tf-consent-req {
  flex: none;
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}

/* 12-household.css */
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
/* Life: budgets, subscriptions, net worth, deadlines, policies, coverage, claims, documents */

/* BudgetList */
.tf-budgets,
.tf-subs ul,
.tf-deadlines,
.tf-docs,
.tf-claim-steps,
.tf-nw-side ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-budgets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tf-budget {
  container: tf-budget / inline-size;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
button.tf-budget {
  cursor: pointer;
}
button.tf-budget:hover {
  background: var(--accent);
}
button.tf-budget:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-budget-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tf-budget-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 12px;
}
/* narrow: the icon steps aside so the category keeps its name */
@container tf-budget (max-width: 300px) {
  .tf-budget > .tf-tinticon {
    display: none;
  }
}
.tf-budget-top b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 14px/20px var(--font-sans);
}
.tf-budget-nums {
  flex: none;
  font: 600 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.tf-budget-nums small {
  font-weight: 500;
  color: var(--ink-muted);
}
.tf-budget-bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.tf-budget-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
}
.tf-budget-left {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-budget-left.over {
  color: var(--blush-ink);
  font-weight: 500;
}

/* SubscriptionList */
.tf-subs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tf-subs ul {
  container: tf-subs / inline-size;
  display: flex;
  flex-direction: column;
}
.tf-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.tf-sub:last-child {
  border-bottom: 0;
}
.tf-sub-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.tf-sub-text b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 14px/20px var(--font-sans);
}
.tf-sub-text small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-sub-amount {
  flex: none;
  font: 600 14px/20px var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tf-sub-amount small {
  margin-left: 2px;
  font-weight: 500;
  color: var(--ink-muted);
}
/* narrow: amount and trial badge go under the name, the menu stays at the end */
@container tf-subs (max-width: 380px) {
  .tf-sub {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
  }
  .tf-sub > :first-child {
    grid-row: 1 / span 2;
    align-self: start;
  }
  .tf-sub > .tf-sub-text,
  .tf-sub > .tf-badge,
  .tf-sub > .tf-sub-amount {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
  .tf-sub > :last-child:not(.tf-sub-amount) {
    grid-column: 3;
    grid-row: 1;
  }
}
.tf-sub.is-cancelled .tf-sub-text b,
.tf-sub.is-cancelled .tf-sub-amount {
  color: var(--ink-muted);
  text-decoration: line-through;
}
.tf-subs-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-subs-total b {
  color: var(--ink);
  font: 600 15px/20px var(--font-sans);
}

/* NetWorthCard */
.tf-nw {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-nw-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.tf-nw-head > :first-child {
  flex: 1 1 200px;
}
.tf-nw-head > :last-child:not(:first-child) {
  flex: none;
  max-width: 45%;
}
.tf-nw-title {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-nw-total {
  font: 600 24px/38px var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tf-nw-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 12px/16px var(--font-sans);
  color: var(--mint-ink);
}
.tf-nw-change.down {
  color: var(--blush-ink);
}
.tf-nw-change.down .tf-ico {
  rotate: 180deg;
}
.tf-nw-change span {
  font-weight: 500;
  color: var(--ink-muted);
}
.tf-nw-sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.tf-nw-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tf-nw-sidehead {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-nw-sidehead b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tf-nw-side li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font: 500 13px/18px var(--font-sans);
}
.tf-nw-side li span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ink-muted);
}
.tf-nw-side li span:last-child {
  font-variant-numeric: tabular-nums;
}

/* DeadlineList */
.tf-deadlines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tf-deadline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
}
.tf-deadline.is-overdue {
  background: var(--blush);
}
.tf-deadline.is-soon {
  background: var(--surface-sunken);
}
.tf-deadline-date {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: 40px;
  padding: 4px 0;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tf-deadline-date b {
  font: 600 14px/20px var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.tf-deadline-date small {
  font: 500 10px/12px var(--font-sans);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tf-deadline-text {
  display: flex;
  flex: 1 1 160px;
  flex-direction: column;
  min-width: 0;
}
.tf-deadline-text b {
  font: 500 14px/20px var(--font-sans);
  overflow-wrap: break-word;
}
.tf-deadline-text small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-deadline-amount {
  font: 600 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.tf-deadline.is-done .tf-deadline-text b {
  color: var(--ink-muted);
  text-decoration: line-through;
}
.tf-deadline-done {
  color: var(--mint-ink);
}

/* PolicyCard */
.tf-policy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-policy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.tf-policy-head .tf-option-text {
  flex: 1;
  min-width: 120px;
  padding: 0;
}
.tf-policy-head b {
  font: 600 15px/20px var(--font-sans);
}
.tf-policy-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin: 0;
}
.tf-policy-facts div {
  min-width: 0;
}
.tf-policy-facts dt {
  font: 500 11px/14px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tf-policy-facts dd {
  margin: 2px 0 0;
  font: 600 15px/20px var(--font-sans);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.tf-policy-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-policy-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* CoverageMatrix */
.tf-coverage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.tf-coverage-sum {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.tf-coverage-box {
  container: tf-coverage / inline-size;
}
.tf-coverage-table {
  width: 100%;
  border-collapse: collapse;
}
.tf-coverage-table th,
.tf-coverage-table td {
  padding: 10px 8px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.tf-coverage-table th {
  font-weight: inherit;
}
.tf-coverage-table th b {
  display: block;
  font: 500 14px/20px var(--font-sans);
}
.tf-coverage-table th small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-coverage-table td:nth-child(2) {
  white-space: nowrap;
}
.tf-coverage-note {
  font: 500 13px/18px var(--font-sans);
  color: var(--ink-muted);
}
.tf-coverage-table tr.is-none th b {
  color: var(--blush-ink);
}
/* narrow: each risk becomes a block, its status top right, the note underneath */
@container tf-coverage (max-width: 440px) {
  .tf-coverage-table,
  .tf-coverage-table tbody {
    display: block;
  }
  .tf-coverage-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 10px 4px;
    border-top: 1px solid var(--line);
  }
  .tf-coverage-table th,
  .tf-coverage-table td {
    padding: 0;
    border-top: 0;
  }
  .tf-coverage-table td.tf-coverage-note {
    grid-column: 1 / -1;
  }
}

/* ClaimTimeline */
.tf-claim {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.tf-claim-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tf-claim-head .tf-option-text {
  padding: 0;
}
.tf-claim-head b {
  font: 600 15px/20px var(--font-sans);
}
.tf-claim-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font: 600 18px/24px var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.tf-claim-amount small {
  font: 500 11px/14px var(--font-sans);
  color: var(--ink-muted);
}
.tf-claim-steps {
  display: flex;
  flex-direction: column;
}
.tf-claim-steps li {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
}
.tf-claim-steps li:last-child {
  padding-bottom: 0;
}
.tf-claim-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 9px;
  width: 2px;
  background: var(--line);
}
.tf-claim-steps li.is-done:not(:last-child)::before {
  background: var(--mint-ink);
}
.tf-claim-dot {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--primary-foreground);
}
.tf-claim-steps li.is-done .tf-claim-dot {
  border-color: var(--mint-ink);
  background: var(--mint-ink);
}
.tf-claim-steps li.is-current .tf-claim-dot {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--accent);
}
.tf-claim-steps li.is-failed .tf-claim-dot {
  border-color: var(--blush-ink);
  background: var(--blush-ink);
}
.tf-claim-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tf-claim-text b {
  font: 500 14px/20px var(--font-sans);
}
.tf-claim-steps li.is-todo .tf-claim-text b {
  color: var(--ink-muted);
  font-weight: 500;
}
.tf-claim-text small {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}

/* DocumentList */
.tf-docs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tf-doc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
button.tf-doc {
  cursor: pointer;
}
button.tf-doc:hover {
  background: var(--accent);
}
button.tf-doc:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.tf-doc-text {
  display: flex;
  flex: 1 1 160px;
  flex-direction: column;
  min-width: 0;
}
.tf-doc-text b {
  font: 500 14px/20px var(--font-sans);
  overflow-wrap: break-word;
}
.tf-doc-text small,
.tf-doc-valid {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}

/* 90-pro-look.css */
/* Pro look ("Clean Dark Pro", reference/pro): monochrome surfaces on a visible 1px hairline grid,
   square corners (2px on controls), Geist and Geist Mono, colour only for state, dense by default.
   Loaded after the derived structure (01–05), so these rules win. Same classes as Halo, no new ones. */

body {
  font-size: var(--density-font-size);
  line-height: var(--density-line-height);
  font-weight: 400;
  font-feature-settings: "ss01", "cv11";
}
:where(
  .tf-btn,
  .tf-iconbtn,
  .tf-chip,
  .tf-tab,
  .tf-input,
  .tf-switch,
  .tf-dock-btn,
  .tf-rail-btn,
  .tf-nav-item,
  .tf-card
):focus-visible {
  outline-offset: 1px;
}

/* Buttons: secondary by default look, primary is the inverted surface */
.tf-btn {
  gap: var(--space-2);
  padding: 0 var(--space-3);
  font: 500 var(--density-font-size)/1 var(--font-sans);
  border: var(--line-width) solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
.tf-btn:hover {
  background: var(--bg-200);
}
.tf-btn:active {
  background: var(--bg-300);
  transform: none;
}
.tf-btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.tf-btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.tf-btn-secondary {
  box-shadow: none;
}
.tf-btn-soft {
  background: var(--bg-200);
  border-color: var(--line);
}
.tf-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-muted);
}
.tf-btn-ghost:hover,
.tf-btn-soft:hover {
  background: var(--bg-200);
  color: var(--ink);
}
.tf-btn-danger {
  background: var(--surface);
  color: var(--danger);
}
.tf-btn-danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
}
.tf-btn-sm {
  height: var(--control-sm);
  padding: 0 var(--space-2);
  font-size: 12px;
}
.tf-btn[disabled] {
  opacity: 1;
  color: var(--fg-400);
  background: var(--surface);
  border-color: var(--line);
}

.tf-iconbtn {
  border: var(--line-width) solid transparent;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.tf-iconbtn:active {
  transform: none;
}
.tf-iconbtn-soft {
  background: transparent;
  color: var(--ink-muted);
}
.tf-iconbtn-soft:hover {
  background: var(--bg-200);
  color: var(--ink);
}
.tf-iconbtn-outline {
  box-shadow: none;
  border-color: var(--line-strong);
}
.tf-iconbtn-sm {
  width: var(--control-sm);
  height: var(--control-sm);
}
.tf-iconbtn-lg {
  width: var(--control-comfy);
  height: var(--control-comfy);
}

/* Chips and badges: 2px, hairline, compact */
.tf-chip {
  height: var(--control-sm);
  padding: 0 var(--space-2);
  font: 500 12px/1 var(--font-sans);
  box-shadow: none;
  border: var(--line-width) solid var(--line);
  color: var(--ink-muted);
}
.tf-chip:hover {
  background: var(--bg-200);
  color: var(--ink);
}
.tf-chip[aria-pressed="true"] {
  background: var(--bg-300);
  color: var(--ink);
  border-color: var(--line-strong);
}
.tf-chip-count {
  font-family: var(--font-mono);
  font-weight: 500;
}
.tf-badge {
  height: 20px;
  padding: 0 6px;
  gap: var(--space-1);
  font: 500 11px/1 var(--font-sans);
  color: var(--ink-muted);
  background: var(--bg-200);
  border: var(--line-width) solid var(--line);
}
.tf-badge-success,
.tf-badge-info,
.tf-badge-warning,
.tf-badge-danger,
.tf-badge-highlight {
  border-color: transparent;
}
.tf-badge-success {
  color: var(--ok);
}
.tf-badge-info {
  color: var(--info);
}
.tf-badge-warning {
  color: var(--warn);
}
.tf-badge-danger {
  color: var(--danger);
}
.tf-badge-highlight {
  color: var(--signal);
}
.tf-badge-success .tf-badge-dot,
.tf-badge-info .tf-badge-dot,
.tf-badge-warning .tf-badge-dot,
.tf-badge-danger .tf-badge-dot,
.tf-badge-highlight .tf-badge-dot {
  color: inherit;
}

.tf-tinticon {
  width: 24px;
  height: 24px;
}
.tf-tinticon .tf-ico {
  width: var(--icon-sm);
  height: var(--icon-sm);
}
.tf-avatar {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.02em;
  background: var(--bg-300);
  border: var(--line-width) solid var(--line);
  box-sizing: border-box;
}
.tf-avatar-stack .tf-avatar {
  box-shadow: 0 0 0 1px var(--surface);
}
.tf-avatar-stack .tf-avatar + .tf-avatar {
  margin-left: -4px;
}
.tf-kbd {
  font: 500 11px/1 var(--font-mono);
  color: var(--fg-300);
  background: var(--bg-200);
  border: var(--line-width) solid var(--line);
  padding: 3px 4px;
}

/* Form controls: wells on bg-000 with a 3:1 border, 1px focus ring */
.tf-field {
  gap: var(--space-1);
}
.tf-field-label {
  font: 500 12px/16px var(--font-sans);
  color: var(--ink-muted);
}
.tf-field-hint {
  color: var(--fg-300);
}
.tf-field-error {
  font-weight: 500;
  color: var(--danger);
}
.tf-input {
  padding: 0 var(--space-2);
  background: var(--canvas);
  box-shadow: none;
  border: var(--line-width) solid var(--line-strong);
  font: 400 var(--density-font-size)/var(--density-line-height) var(--font-sans);
}
.tf-input::placeholder {
  color: var(--fg-400);
}
.tf-input:hover:not(:disabled):not(:focus) {
  box-shadow: none;
  border-color: var(--fg-300);
}
.tf-input:focus {
  box-shadow: 0 0 0 1px var(--focus);
  border-color: var(--focus);
}
.tf-input[aria-invalid="true"] {
  box-shadow: none;
  border-color: var(--danger);
}
textarea.tf-input {
  padding: var(--space-2);
  min-height: 72px;
}
select.tf-input {
  padding-right: 28px;
  background-position:
    calc(100% - 14px) 52%,
    calc(100% - 9px) 52%;
}
.tf-search {
  height: var(--density-control);
  padding: 0 var(--space-2);
  background: var(--canvas);
  border: var(--line-width) solid var(--line);
  color: var(--fg-300);
  box-sizing: border-box;
}
.tf-search input {
  font: 400 var(--density-font-size)/var(--density-line-height) var(--font-sans);
}
.tf-check {
  gap: var(--space-2);
  font: 400 var(--density-font-size)/var(--density-line-height) var(--font-sans);
}
.tf-switch {
  width: 28px;
  height: 16px;
  background: var(--bg-300);
  border: var(--line-width) solid var(--line-strong);
  box-sizing: border-box;
}
.tf-switch::after {
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background: var(--fg-300);
}
.tf-switch:checked {
  border-color: var(--primary);
}
.tf-switch:checked::after {
  transform: translateX(12px);
}

/* Tabs and segmented: one boxed group, selected segment raised to bg-300 */
.tf-tabs,
.tf-seg {
  gap: 0;
  padding: 0;
  background: var(--surface);
  border: var(--line-width) solid var(--line-strong);
  overflow: hidden;
}
.tf-tab,
.tf-seg-item {
  height: calc(var(--density-control) - 2px);
  padding: 0 var(--space-3);
  font: 500 12px/1 var(--font-sans);
  color: var(--fg-300);
  border-radius: 0;
}
.tf-tab + .tf-tab,
.tf-seg-item + .tf-seg-item {
  border-left: var(--line-width) solid var(--line);
}
.tf-tab:hover,
.tf-seg-item:hover:not(.on) {
  color: var(--ink);
}
.tf-tab[aria-selected="true"],
.tf-seg-item.on {
  background: var(--bg-300);
  color: var(--ink);
  box-shadow: none;
}
.tf-tabs-ind {
  display: none;
}
.tf-seg.sm .tf-seg-item {
  height: calc(var(--control-sm) - 2px);
}

/* Surfaces: cells of the hairline grid, no lift */
.tf-card,
.tf-panel,
.tf-stat,
.tf-event {
  border-radius: 0;
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-card {
  padding: var(--space-4);
  gap: var(--space-2);
  min-height: 0;
}
.tf-card-interactive:hover {
  box-shadow: 0 0 0 var(--line-width) var(--line-strong);
  background: var(--bg-200);
}
.tf-card-title {
  font-weight: 600;
  letter-spacing: 0;
}
.tf-card-meta {
  font-family: var(--font-mono);
  color: var(--fg-300);
}
.tf-card-corner {
  top: var(--space-3);
  right: var(--space-3);
}
.tf-panel {
  padding: var(--space-4);
  gap: var(--space-3);
}
.tf-panel-title {
  font: 600 14px/20px var(--font-sans);
  letter-spacing: 0;
}
.tf-stat {
  align-items: flex-start;
  text-align: left;
  padding: var(--space-4);
  min-height: 0;
  background: var(--surface);
}
.tf-stat-value,
.tf-statcell-value {
  font: 500 24px/28px var(--font-mono);
  letter-spacing: -0.02em;
}
.tf-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-300);
  opacity: 1;
  order: -1;
}
.tf-stat-placeholder {
  border: 0;
  box-shadow: 0 0 0 var(--line-width) var(--line-strong);
}
.tf-bg-surface {
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-event-bar {
  border-radius: var(--radius-1);
}
.tf-header-title {
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Shell: top bar, rail and sheet touch on hairlines */
.tf-shell {
  background: var(--line);
  padding: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: var(--line-width);
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
/* with the sidebar, the sidebar and the sheet sit side by side on the same hairline */
.tf-shell.tf-shell-sidebar {
  padding: 0;
  gap: var(--line-width);
}
.tf-shell-sidebar > .tf-sidebar.shell {
  border-radius: 0;
}
.tf-topbar,
.tf-shell .tf-topbar {
  border-radius: 0;
  padding: 0 var(--space-3);
  gap: var(--space-3);
}
.tf-brand {
  font: 600 14px/1 var(--font-sans);
  letter-spacing: -0.01em;
}
.tf-brand-tag {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.tf-nav {
  gap: 1px;
  margin: 0 0 0 var(--space-4);
}
.tf-nav-item {
  height: var(--row-dense);
  padding: 0 var(--space-2);
  font: 400 var(--density-font-size)/1 var(--font-sans);
  color: var(--ink-muted);
  border-radius: var(--radius-1);
}
.tf-nav-item:hover {
  background: var(--bg-200);
  color: var(--ink);
}
.tf-nav-item[aria-current="page"] {
  background: var(--bg-300);
  color: var(--ink);
}
.tf-user {
  height: var(--row-dense);
}
.tf-user-name {
  font-weight: 500;
}
.tf-sheet {
  border-radius: 0;
  gap: var(--space-4);
  padding: var(--space-4);
}
.tf-rail-btn {
  width: var(--density-control);
  height: var(--density-control);
  color: var(--ink-muted);
}
.tf-rail-btn:hover {
  background: var(--bg-200);
  color: var(--ink);
}
.tf-rail-btn[aria-current="page"] {
  background: var(--bg-300);
  color: var(--ink);
}
.tf-dotcount,
.tf-nav-count {
  font-family: var(--font-mono);
  font-weight: 500;
  border-radius: var(--radius-1);
}
/* Pro's buttons are smaller than Halo's: badges sit on the corner instead of over the icon */
.tf-topbtn .tf-nav-count,
.tf-rail-btn .tf-dotcount {
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
}
.tf-dock {
  border-radius: 0;
  padding: var(--space-1);
  gap: var(--space-1);
  background: var(--surface);
}
.tf-dock-btn {
  width: var(--density-control);
  height: var(--density-control);
}
.tf-dock-btn:hover {
  transform: none;
  filter: brightness(1.1);
}

/* Tables: mono eyebrow headers, dense rows, hover raises to bg-200 */
.tf-table {
  font: 400 var(--density-font-size)/var(--density-line-height) var(--font-sans);
}
.tf-table th {
  font: 500 11px/16px var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--fg-300);
  padding: 0 var(--density-pad-x);
  height: var(--density-row);
  border-bottom-color: var(--line);
}
.tf-table td {
  padding: 0 var(--density-pad-x);
  height: var(--density-row);
  border-bottom-color: var(--line-100);
  color: var(--ink-muted);
}
.tf-table tbody tr:hover td {
  background: var(--bg-200);
}
.tf-table .tf-num {
  font-family: var(--font-mono);
}

.tf-progress {
  height: 4px;
  border-radius: 0;
  background: var(--bg-300);
}
.tf-progress > span {
  border-radius: 0;
}
.tf-progress-sky > span {
  background: var(--info);
}
.tf-progress-mint > span {
  background: var(--ok);
}
.tf-progress-butter > span {
  background: var(--warn);
}

/* Floating layers: bg-100, hairline border, overlay shadow, square */
.tf-menu,
.tf-popover,
.tf-modal {
  border-radius: 0;
  box-shadow:
    var(--shadow-overlay),
    0 0 0 var(--line-width) var(--line);
}
.tf-menu {
  padding: var(--space-1);
}
.tf-menu-item {
  height: var(--row-dense);
  padding: 0 var(--space-2);
  gap: var(--space-2);
  border-radius: var(--radius-1);
  font: 400 13px/1 var(--font-sans);
}
.tf-menu-item:hover {
  background: var(--bg-300);
}
.tf-menu-item.danger {
  color: var(--danger);
}
.tf-menu-item kbd {
  font: 400 12px/1 var(--font-mono);
  color: var(--fg-300);
}
.tf-menu-sep {
  margin: var(--space-1) calc(var(--space-1) * -1);
}
.tf-menu-label {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fg-300);
}
.tf-modal {
  padding: var(--space-5);
}
.tf-modal-title {
  font: 600 18px/24px var(--font-sans);
  letter-spacing: -0.01em;
}
.tf-tooltip {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius-1);
  font-size: 12px;
  line-height: 16px;
  padding: 4px 8px;
}
.tf-tooltip kbd {
  color: var(--primary-foreground);
  background: transparent;
  border: var(--line-width) solid var(--primary-foreground);
}
.tf-toast {
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow:
    var(--shadow-overlay),
    0 0 0 var(--line-width) var(--line);
  font: 400 13px/18px var(--font-sans);
}
.tf-alert {
  border-radius: 0;
}
.tf-empty {
  border-radius: 0;
  border: 0;
  box-shadow: none;
  align-items: flex-start;
  text-align: left;
  padding: var(--space-12) var(--space-6);
}
.tf-empty-title {
  font-weight: 600;
}

/* Colour only for state (reference/pro): Halo's decorative tints (icon tiles, tinted cards and
   tiles, placeholders, dock buttons, avatars) are monochrome in Pro. Badges, alerts, status
   shapes and thresholds keep their state colours. */
.tf-t-sky,
.tf-t-mint,
.tf-t-lilac,
.tf-t-butter,
.tf-t-blush {
  background: var(--bg-200);
  color: var(--fg-100);
}
.tf-bg-sky,
.tf-bg-mint,
.tf-bg-lilac,
.tf-bg-butter,
.tf-bg-blush,
.tf-art[class*="tf-bg-"] {
  background: var(--bg-200);
}
.tf-avatar {
  --av: var(--bg-300);
  background: var(--av);
}

/* Charts are flat: square bars and segment ends, no rounded caps */
.tf-chart rect {
  rx: 0;
  ry: 0;
}
.tf-gauge-arc {
  stroke-linecap: butt;
}

/* The key chip on the primary approval option inverts with its row (readable in both themes) */
.tf-approval-opt.primary kbd {
  background: var(--primary-foreground);
  color: var(--primary);
}

/* The 404/500 art: the icon tile keeps its size, so it covers the middle digit as in Halo */
.tf-status-art .tf-tinticon {
  width: 56px;
  height: 56px;
  box-shadow: 0 0 0 8px var(--surface);
}

/* Unit next to a range input: centred on Pro's density-sized field */
.tf-range-num > span {
  right: var(--space-2);
  bottom: calc((var(--density-control) - 18px) / 2);
}

/* Map bubbles are data: monochrome like charts, strong enough to read over the dot map */
.tf-map-bubble[class*="tf-t-"] {
  background: color-mix(in srgb, var(--chart-sky) 45%, transparent);
  color: var(--fg-100);
}

/* In-flow cards sit on hairlines, not shadows; the featured plan gets the stronger hairline */
.tf-auth {
  box-shadow: 0 0 0 var(--line-width) var(--line);
}
.tf-plan.featured {
  box-shadow: 0 0 0 var(--line-width) var(--line-strong);
}

/* Chat workspace panes are cells of the hairline grid */
.tf-chatws > div {
  box-shadow: 0 0 0 var(--line-width) var(--line);
}

/* Primitives in Pro: dense rows, square selections on the hairline grid */
.tf-accordion-head {
  min-height: 44px;
  padding: 0 var(--space-3);
  font: 500 var(--density-font-size) / var(--density-line-height) var(--font-sans);
}
.tf-accordion-body {
  padding: 0 var(--space-3) var(--space-3);
  font: 400 var(--density-font-size) / 20px var(--font-sans);
}
.tf-toggle[aria-pressed="true"] {
  background: var(--bg-300);
  box-shadow: inset 0 0 0 var(--line-width) var(--line-strong);
}
.tf-togglegroup {
  padding: 2px;
  gap: 2px;
  background: var(--bg-000);
  box-shadow: inset 0 0 0 var(--line-width) var(--line);
}
.tf-togglegroup .tf-toggle[aria-pressed="true"] {
  background: var(--bg-300);
  box-shadow: none;
}
.tf-hovercard {
  padding: var(--space-3);
}
.tf-carousel-dot[aria-current="true"] {
  width: 16px;
}

/* Navigation menu feature card: monochrome like other decorative surfaces */
.tf-navmenu-feature {
  background: var(--bg-200);
}

/* Control scale in Pro: md 28, sm 24 — tracks (menubar, small toggle group) included */
.tf-menubar {
  padding: 2px;
}
.tf-togglegroup.sm .tf-toggle {
  height: 20px;
}
.tf-togglegroup.sm .tf-toggle.icon {
  width: 20px;
}