/* ============================================================
   Trackloom Design System — trackloom-system.css
   Single source of truth for tokens, typography, and components.
   Load this file before any page-specific CSS.
   ============================================================

   Navigation contract (V1):

   .tl-nav       Canonical public marketing nav. Used on every
                 logged-out page: /, /how-it-works, /pricing,
                 /upgrade, /about, /voice-studio, /integrations.
                 Items: How It Works | Pricing | About
                        + Sign in (ghost) + Get Started (primary).
                 Mobile hamburger driven by frontend/nav-toggle.js.

   .studio-header  Product-context nav for /studio only. Shows
                   usage counter, plan badge, and module switcher.
                   Intentionally different — Studio is a workspace,
                   not a marketing page.

   .upgrade-nav    Legacy. Targeted for retirement in Pass 2;
                   upgrade.html / pricing should adopt .tl-nav so
                   pricing matches the rest of the marketing set.

   Do not introduce a fourth nav variant. If a new public page
   needs navigation, use .tl-nav.
   ============================================================ */

/* ── Fonts ────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600;700&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
/* Source of truth for token decisions (V1):
   --------------------------------------------------------------
   trackloom-system.css is the canonical home for design tokens.
   New code should reference the names defined in this :root block.

   shared.css carries three older token namespaces from earlier
   product iterations:
     1. Legacy aliases: --bg, --surface, --surface2/3, --text,
        --text-muted, --text-dim, --accent (Oxide Red brand),
        --accent2 (gold), --highlight (lime).
     2. Design Tokens: --color-primary, --surface-1..4,
        --text-primary..tertiary, --space-1..12, --font-size-*.
     3. DESIGN.md canonical aliases: --primary, --secondary,
        --card, --muted-foreground, --surface-raised (mirror of
        the names below).

   ALL VALUES MATCH across the namespaces. The duplication is
   semantic chaos, not visual chaos. We intentionally avoid a
   wholesale rename — too many consumers across ~6,300 lines of
   shared.css. Instead:

     - New code in this file uses the names below.
     - Legacy code in shared.css continues to use its aliases.
     - --accent in this file is reserved for shared.css's Oxide
       Red brand value. We use --surface-accent for the dark gray
       hover surface that earlier versions called --accent.
     - When touching legacy code, prefer migrating to the
       canonical name (e.g. --accent → --primary for brand red).

   See navigation contract above for nav-specific decisions. */
:root {
  /* Color — surfaces */
  --background: #080A0D;
  --foreground: #F0EDE8;
  --card: #0F1218;
  --card-foreground: #F0EDE8;
  --surface-raised: #141921;
  --surface-soft: #1A2030;

  /* Color — brand */
  --primary: #7B5EA7;
  --primary-foreground: #fff;
  --secondary: #7B5EA7;
  --secondary-foreground: #fff;

  /* Color — UI */
  --muted: #1A2028;
  --muted-foreground: #BDB8B0;
  --surface-accent: #1A2030;
  --surface-accent-foreground: #F0EDE8;
  --border: #1B2130;
  --border-bright: #252E3F;
  --input: #080A0D;
  --ring: rgba(123, 94, 167, 0.5);
  --accent-hi: #9B7EC9;
  --accent-glow: rgba(123, 94, 167, 0.14);

  /* Color — semantic */
  --success: #4E7A5F;
  --warning: #8A6A32;
  --error: #8A3A38;
  --info: #5A7490;

  /* Typography */
  --font-display: 'Instrument Sans', system-ui, sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Geist Mono', monospace;

  /* Spacing — 8px base scale */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border radius */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* Nav height */
  --nav-height: 56px;
  --studio-nav-height: 56px;
}

/* ── Base Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Typography Utilities ─────────────────────────────────── */
.tl-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.03;
}

.tl-mono { font-family: var(--font-mono); }

/* ── Button System ────────────────────────────────────────── */
.tl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 40px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--foreground);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.tl-btn:hover { background: var(--surface-accent); border-color: var(--muted-foreground); }
.tl-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.tl-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Primary — Midnight Violet */
.tl-btn--primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.tl-btn--primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }

/* Ghost — transparent */
.tl-btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--muted-foreground);
}
.tl-btn--ghost:hover { background: var(--surface-accent); color: var(--foreground); border-color: var(--muted-foreground); }

/* Danger */
.tl-btn--danger {
  background: var(--error);
  color: #fff;
  border-color: var(--error);
}

/* Sizes */
.tl-btn--sm { height: 32px; padding: 0 var(--space-sm); font-size: 0.8125rem; }
.tl-btn--lg { height: 48px; padding: 0 var(--space-xl); font-size: 1rem; font-weight: 600; }
.tl-btn--full { width: 100%; }

/* ── Form Primitives ──────────────────────────────────────── */
.tl-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.01em;
}

.tl-input,
.tl-textarea {
  display: block;
  width: 100%;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: var(--space-sm) var(--space-md);
  transition: border-color 0.15s ease;
  resize: vertical;
}

.tl-input:focus,
.tl-textarea:focus {
  outline: none;
  border-color: var(--ring);
}

.tl-input::placeholder,
.tl-textarea::placeholder { color: var(--muted-foreground); }

.tl-textarea { line-height: 1.6; min-height: 100px; }

.tl-field { display: flex; flex-direction: column; gap: var(--space-xs); }

/* ── Card ─────────────────────────────────────────────────── */
.tl-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.tl-card--raised {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
}

/* Accented left border — for recipe output */
.tl-card--accent-left {
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ── Badge ────────────────────────────────────────────────── */
.tl-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--surface-accent);
  color: var(--surface-accent-foreground);
  border: 1px solid var(--border);
}

/* Plan badge variants */
.tl-badge--plan-free { background: var(--muted); color: var(--muted-foreground); }
.tl-badge--plan-studio { background: color-mix(in srgb, var(--secondary) 20%, transparent); color: var(--secondary); border-color: color-mix(in srgb, var(--secondary) 40%, transparent); }

/* Usage badge */
.tl-badge--usage {
  background: transparent;
  color: var(--muted-foreground);
  border-color: var(--border);
  cursor: pointer;
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.75rem;
  font-weight: 400;
  transition: color 0.15s, border-color 0.15s;
}
.tl-badge--usage:hover { color: var(--foreground); border-color: var(--muted-foreground); }
.tl-badge--usage-exhausted { color: var(--error); border-color: var(--error); }

/* ── Chip (selectable tag) ────────────────────────────────── */
.tl-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
}

.tl-chip:hover { border-color: var(--muted-foreground); color: var(--foreground); }
.tl-chip.is-selected,
.tl-chip[aria-selected="true"] {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border-color: var(--primary);
  color: var(--foreground);
}

/* Chip grid */
.tl-chip-grid { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* ── Section Wrapper ──────────────────────────────────────── */
.tl-section {
  padding: var(--space-3xl) var(--space-lg);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.tl-section--tight { padding: var(--space-2xl) var(--space-lg); }
.tl-section--flush { padding-left: 0; padding-right: 0; }

/* ── Divider ──────────────────────────────────────────────── */
.tl-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-lg) 0;
}

/* ── Public Nav (.tl-nav) ─────────────────────────────────── */
.tl-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--background) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.tl-nav {
  display: flex;
  align-items: center;
  height: var(--nav-height);
  padding: 0 var(--space-xl);
  max-width: 1440px;
  margin: 0 auto;
  gap: var(--space-xl);
}

.tl-nav__brand {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.tl-nav__brand:hover { color: var(--foreground); }

.tl-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex: 1;
}

.tl-nav__link {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
  padding: 6px 0;
}
.tl-nav__link:hover { color: var(--foreground); }
.tl-nav__link.is-active { color: var(--foreground); }
.tl-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--primary);
  border-radius: 1px;
}

.tl-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Hamburger (mobile) */
.tl-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}
.tl-nav__hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--foreground);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.tl-nav__hamburger[aria-expanded="true"] .tl-nav__hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tl-nav__hamburger[aria-expanded="true"] .tl-nav__hamburger-bar:nth-child(2) { opacity: 0; }
.tl-nav__hamburger[aria-expanded="true"] .tl-nav__hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .tl-nav { padding: 0 var(--space-md); }
  .tl-nav__links { display: none; }
  .tl-nav__actions { display: none; }
  .tl-nav__hamburger { display: flex; }

  .tl-nav__links.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: var(--nav-height);
    left: 0; right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    gap: var(--space-md);
    z-index: 99;
  }
  .tl-nav__links.is-open + .tl-nav__actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 var(--space-lg) var(--space-lg);
    gap: var(--space-sm);
    position: absolute;
    top: calc(var(--nav-height) + 3 * (var(--space-md) + 1.2rem) + var(--space-md));
    left: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    z-index: 99;
  }
}

/* ── Studio App Nav (.tl-studio-nav) ─────────────────────── */
.tl-studio-nav {
  display: flex;
  align-items: center;
  height: var(--studio-nav-height);
  padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
  gap: var(--space-md);
}

.tl-studio-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  flex-shrink: 0;
}

.tl-studio-nav__wordmark {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.02em;
}

.tl-studio-nav__product-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.tl-studio-nav__spacer { flex: 1; }

.tl-studio-nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Backend status dot */
.tl-studio-nav__status {
  font-size: 10px;
  color: var(--success);
  cursor: pointer;
  line-height: 1;
}
.tl-studio-nav__status--error { color: var(--error); }

/* Account avatar */
.tl-studio-nav__account {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--surface-accent);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.tl-studio-nav__account:hover { background: var(--surface-soft); border-color: var(--muted-foreground); }

/* Account dropdown */
.tl-account-menu {
  position: absolute;
  top: calc(var(--studio-nav-height) - 4px);
  right: var(--space-lg);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xs);
  min-width: 160px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.tl-account-menu[hidden] { display: none; }

.tl-account-menu__item {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.tl-account-menu__item:hover { background: var(--surface-accent); color: var(--foreground); }
.tl-account-menu__divider { border: none; border-top: 1px solid var(--border); margin: var(--space-xs) 0; }

/* ── Studio Workspace Layout ──────────────────────────────── */
.tl-studio-workspace {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - var(--studio-nav-height));
}

.tl-studio-control {
  width: 440px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.tl-studio-output {
  flex: 1;
  min-width: 520px;
  overflow-y: auto;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (max-width: 1023px) and (min-width: 768px) {
  .tl-studio-control { width: 380px; }
}

@media (max-width: 767px) {
  .tl-studio-workspace { flex-direction: column; height: auto; overflow: visible; }
  .tl-studio-control,
  .tl-studio-output { width: 100%; min-width: 0; height: auto; overflow: visible; }
  .tl-studio-control { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── Step System ──────────────────────────────────────────── */
.tl-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  flex: 1;
}

.tl-step[hidden] { display: none; }

.tl-step__header { display: flex; flex-direction: column; gap: var(--space-xs); }

.tl-step__number {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

.tl-step__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.01em;
  outline: none;
}

.tl-step__body { display: flex; flex-direction: column; gap: var(--space-md); flex: 1; }

.tl-step__nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.tl-step__nav .tl-btn--ghost { margin-right: auto; }

/* Progress dots */
.tl-step-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.tl-step-progress__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border);
  transition: background 0.2s, width 0.2s;
}
.tl-step-progress__dot.is-active { background: var(--primary); width: 20px; }
.tl-step-progress__dot.is-done { background: var(--success); }

/* ── Mode Toggle (Simple / Producer) ─────────────────────── */
.tl-mode-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--muted);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}

.tl-mode-toggle__btn {
  height: 28px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.tl-mode-toggle__btn.is-active { background: var(--surface-raised); color: var(--foreground); }
.tl-mode-toggle__btn[data-locked]::after { content: ' ↑'; font-size: 0.625rem; color: var(--secondary); }

/* ── Recipe Output Card ───────────────────────────────────── */
.tl-recipe-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  overflow: hidden;
}

.tl-recipe-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.tl-recipe-card__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.tl-recipe-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  margin-top: 2px;
}

.tl-recipe-card__actions { display: flex; gap: var(--space-xs); }

.tl-recipe-card__body { padding: var(--space-lg); }

.tl-recipe-card__field { margin-bottom: var(--space-md); }
.tl-recipe-card__field:last-child { margin-bottom: 0; }

.tl-recipe-card__field-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: var(--space-xs);
}

.tl-recipe-card__field-value {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--foreground);
  line-height: 1.6;
}

/* ── Collapsible ──────────────────────────────────────────── */
.tl-collapsible__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.tl-collapsible__trigger:hover { color: var(--foreground); }
.tl-collapsible__trigger-icon { transition: transform 0.2s; font-size: 0.75rem; }
.tl-collapsible__trigger[aria-expanded="true"] .tl-collapsible__trigger-icon { transform: rotate(180deg); }

.tl-collapsible__body { display: none; padding: var(--space-md) 0 var(--space-lg); }
.tl-collapsible__body.is-open { display: block; }

/* ── Upsell Modal ─────────────────────────────────────────── */
.tl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-md);
}
.tl-modal-overlay[hidden] { display: none; }

.tl-modal {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  max-width: 480px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

.tl-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
}

.tl-modal__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: var(--space-md);
}

.tl-modal__body { color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.6; }

.tl-modal__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

/* ── Sign-In Page Layout ──────────────────────────────────── */
.tl-signin-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.tl-signin-body {
  display: flex;
  flex: 1;
  min-height: calc(100vh - var(--nav-height));
}

.tl-signin-brand {
  flex: 0 0 40%;
  background: var(--surface-raised);
  border-right: 1px solid var(--border);
  padding: var(--space-3xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tl-signin-form-col {
  flex: 1;
  padding: var(--space-3xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 480px;
}

.tl-signin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-xl);
}

.tl-signin-tab {
  flex: 1;
  height: 40px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.tl-signin-tab.is-active { color: var(--foreground); border-bottom-color: var(--primary); }

.tl-signin-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}
.tl-signin-divider::before,
.tl-signin-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

@media (max-width: 768px) {
  .tl-signin-body { flex-direction: column; }
  .tl-signin-brand { flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--border); padding: var(--space-2xl) var(--space-lg); }
  .tl-signin-form-col { padding: var(--space-xl) var(--space-lg); max-width: none; }
}

/* ── Hero (Homepage) ──────────────────────────────────────── */
.tl-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3xl) var(--space-xl);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.tl-hero__kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-lg);
}

.tl-hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--foreground);
  max-width: 12ch;
  margin-bottom: var(--space-lg);
}

.tl-hero__lede {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--muted-foreground);
  max-width: 44ch;
  line-height: 1.6;
  margin-bottom: var(--space-2xl);
}

.tl-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .tl-hero { padding: var(--space-2xl) var(--space-md); min-height: auto; padding-top: calc(var(--space-3xl) + var(--nav-height)); }
  .tl-hero__actions { flex-direction: column; align-items: flex-start; }
}

/* ── Footer ───────────────────────────────────────────────── */
.tl-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-2xl) var(--space-xl);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.tl-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.tl-footer__brand {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--muted-foreground);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.tl-footer__links {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.tl-footer__link {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.15s;
}
.tl-footer__link:hover { color: var(--foreground); }

.tl-footer__copy {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* ── Status Banner ────────────────────────────────────────── */
.tl-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--foreground);
  font-size: 0.875rem;
  line-height: 1.5;
}

.tl-banner__icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.tl-banner__body { flex: 1; min-width: 0; }

.tl-banner__title {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--foreground);
}

.tl-banner__text {
  display: block;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}

.tl-banner__actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
  align-items: center;
}

.tl-banner--info     { border-color: color-mix(in srgb, var(--info)    35%, transparent); background: color-mix(in srgb, var(--info)    10%, var(--surface-raised)); }
.tl-banner--warning  { border-color: color-mix(in srgb, var(--warning) 35%, transparent); background: color-mix(in srgb, var(--warning) 12%, var(--surface-raised)); }
.tl-banner--success  { border-color: color-mix(in srgb, var(--success) 35%, transparent); background: color-mix(in srgb, var(--success) 12%, var(--surface-raised)); }
.tl-banner--error    { border-color: color-mix(in srgb, var(--error)   35%, transparent); background: color-mix(in srgb, var(--error)   12%, var(--surface-raised)); }
.tl-banner--upsell   { border-color: color-mix(in srgb, var(--secondary) 40%, transparent); background: color-mix(in srgb, var(--secondary) 10%, var(--surface-raised)); }

/* ── Empty State ──────────────────────────────────────────── */
.tl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-raised) 50%, transparent);
  min-height: 280px;
}

.tl-empty__glyph {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  font-size: 1.5rem;
}

.tl-empty__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.01em;
  margin: 0;
}

.tl-empty__text {
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 38ch;
  margin: 0;
}

.tl-empty__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Tab Group ────────────────────────────────────────────── */
.tl-tabs {
  display: flex;
  gap: 2px;
  background: var(--muted);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.tl-tabs__tab {
  flex: 1;
  height: 32px;
  padding: 0 var(--space-md);
  border-radius: calc(var(--radius-sm) - 2px);
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.tl-tabs__tab:hover { color: var(--foreground); }
.tl-tabs__tab.is-active {
  background: var(--surface-raised);
  color: var(--foreground);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ── Output Payoff Panel ──────────────────────────────────── */
.tl-output {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tl-output__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}

.tl-output__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tl-output__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.tl-output__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.01em;
}

.tl-output__actions { display: flex; gap: var(--space-xs); }

.tl-output__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.tl-output__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tl-output__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.tl-output__section-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.tl-output__copy-btn {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tl-output__copy-btn:hover { color: var(--foreground); border-color: var(--muted-foreground); background: var(--surface-raised); }
.tl-output__copy-btn.is-copied { color: var(--success); border-color: var(--success); }

.tl-output__value {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--foreground);
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  white-space: pre-wrap;
  word-break: break-word;
}

.tl-output__value--avoid {
  border-color: color-mix(in srgb, var(--error) 30%, var(--border));
  background: color-mix(in srgb, var(--error) 6%, var(--input));
}

/* ── Stat Row (Studio status bar) ─────────────────────────── */
.tl-stat-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.tl-stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.tl-stat__value {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.01em;
}

.tl-stat__divider {
  width: 1px;
  height: 14px;
  background: var(--border);
}