/* TaskBlink Data, the new UI's design tokens and shared components (DESIGN-BRIEF sections 1 and 2,
   BUILD-PLAN package A1). Loaded by app.html and find.html before every package's own css.
   Tokens are the brief's exact values (tests/test_tb_css.py reads them out of the brief and compares).
   Every control is a 44 px target: a smaller visible control carries a 44 x 44 hit area (::after). */

/* ------------------------------------------------------------------ *
 * Tokens (light; every artboard is light)
 * ------------------------------------------------------------------ */
:root {
  /* 1.2 Color */
  --bg: #FFFFFF;
  --bg-soft: #F5F6FB;
  --surface: #FFFFFF;
  --surface-2: #F4F5FB;
  --surface-3: #ECEEF6;
  --line: #E6E8F2;
  --line-strong: #D3D7E6;
  --ink: #0E1230;
  --ink-2: #566079;
  --ink-3: #656C85;
  --ink-4: #9097AD;
  --brand: #EF06C0;
  --brand-strong: #D1049F;
  --brand-text: #B8068F;
  --brand-ink: #9C0579;
  --brand-deep: #6E0050;
  --brand-tint: #FDEAF8;
  --brand-line: #F6C6EA;
  --brand-disabled: #F2C2E4;
  --good: #0B6E43;
  --good-tint: #E7F6EE;
  --warn: #8A5A00;
  --warn-tint: #FFF3D6;
  --bad: #B42318;
  --bad-tint: #FDECEA;
  --bad-fill: #B42318;      /* the filled danger button: white on it in both schemes (like the primary) */
  --star: #F5C451;
  --glass: rgba(14,18,48,.72);
  --scrim: rgba(14,18,48,.56);
  --scrim-modal: rgba(14,18,48,.40);
  --on-brand: #FFFFFF;
  --on-glass: #FFFFFF;
  --topbar-bg: rgba(255,255,255,.86);

  /* 1.3 Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --pill: 999px;

  /* 1.4 Shadows */
  --sh-card: 0 1px 2px rgba(14,18,48,.06), 0 1px 1px rgba(14,18,48,.04);
  --sh-card-hover: 0 16px 40px -14px rgba(239,6,192,.28), 0 2px 6px rgba(14,18,48,.06);
  --sh-search: 0 12px 40px -12px rgba(239,6,192,.22);
  --sh-search-focus: 0 0 0 3px rgba(239,6,192,.14), 0 16px 48px -12px rgba(239,6,192,.30);
  --sh-pop: 0 18px 48px -16px rgba(14,18,48,.28), 0 0 0 1px rgba(14,18,48,.06);
  --sh-modal: 0 32px 80px -24px rgba(14,18,48,.35);
  --sh-primary: 0 2px 0 #6E0050, 0 8px 24px -10px rgba(239,6,192,.55);
  --sh-primary-hover: 0 3px 0 #6E0050, 0 10px 28px -8px rgba(239,6,192,.6);
  --ring-brand: 0 0 0 2px #EF06C0, 0 0 0 6px rgba(239,6,192,.20);

  /* 1.5 Space and layout */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 80px;
  --glow-top: radial-gradient(1200px 600px at 50% -10%, rgba(239,6,192,.08), transparent 60%);
  --container: 1248px;
  --gutter: 16px;
  --topbar-h: 64px;
  --hit: 44px;
  --sheet-w: 640px;

  /* 1.1 Fonts */
  --font: Geist, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /* 1.6 Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --t-hover: 120ms;
  --t-chip: 200ms;
  --t-block: 300ms;
  --t-height: 360ms;
  --t-card: 500ms;
  --t-stagger: 60ms;
  --t-glide: 400ms;
  --t-exit: 280ms;
  --t-blink: 120ms;
  --t-shimmer: 1.6s;
  --rise: 8px;
  --lift: 3px;

  /* Classic token names (site.css), so enrich.css and blinker.css still work if ever mounted */
  --magenta: var(--brand);
  --magenta-2: #E22EFA;
  --muted: var(--ink-3);
  --muted-text: var(--ink-3);
  --card: var(--surface);
  --accent-deep: var(--brand-strong);
  --accent-deep-2: #A61FD0;
  --accent-text: var(--brand-text);
  --accent-soft: var(--brand-tint);
  --accent-soft-2: var(--brand-line);
  --ok: var(--good);
  --ok-soft: var(--good-tint);
  --warn-soft: var(--warn-tint);
  --bad-soft: var(--bad-tint);
  --info: #3450D0;
  --info-soft: #EAEEFD;
  --violet: #6A3BD6;
  --violet-soft: #F0EAFD;
  --neutral: var(--ink-2);
  --neutral-soft: var(--bg-soft);
  --shadow-sm: var(--sh-card);
  --shadow: var(--sh-pop);
  --shadow-lg: var(--sh-modal);
  --radius: var(--r-lg);
  --radius-sm: var(--r-md);
  --font-head: var(--font);
  --font-body: var(--font);

  color-scheme: light;
}

/* Dark mode (DESIGN-BRIEF 1.2: defined for the build, not drawn). bg, surface, line, ink, ink-2, ink-3,
   brand-text, good, warn and bad are the brief's; the rest are derived to keep 4.5:1 on surface. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0E22;
    --surface: #151936;
    --bg-soft: #11152D;
    --surface-2: #1B2042;
    --surface-3: #232850;
    --line: #262B4D;
    --line-strong: #363C66;
    --ink: #F2F3FA;
    --ink-2: #B4B9CE;
    --ink-3: #9096AE;
    --ink-4: #5E6587;
    --brand: #EF06C0;
    --brand-strong: #D1049F;
    --brand-text: #FF6BDD;
    --brand-ink: #FF9BE6;
    --brand-deep: #6E0050;
    --brand-tint: #3A0E34;
    --brand-line: #6E1F61;
    --brand-disabled: #4A1A42;
    --good: #4ADE9A;
    --good-tint: #0F2E22;
    --warn: #F5C451;
    --warn-tint: #2E2410;
    --bad: #FF8A7A;
    --bad-tint: #3A1714;
    --glass: rgba(6,8,22,.72);
    --scrim: rgba(3,4,12,.64);
    --scrim-modal: rgba(3,4,12,.56);
    --topbar-bg: rgba(11,14,34,.86);
    --sh-card: 0 1px 2px rgba(0,0,0,.40), 0 1px 1px rgba(0,0,0,.30);
    --sh-card-hover: 0 16px 40px -14px rgba(239,6,192,.32), 0 2px 6px rgba(0,0,0,.40);
    --sh-search: 0 12px 40px -12px rgba(239,6,192,.30);
    --sh-search-focus: 0 0 0 3px rgba(239,6,192,.24), 0 16px 48px -12px rgba(239,6,192,.40);
    --sh-pop: 0 18px 48px -16px rgba(0,0,0,.70), 0 0 0 1px rgba(255,255,255,.06);
    --sh-modal: 0 32px 80px -24px rgba(0,0,0,.80);
    --glow-top: radial-gradient(1200px 600px at 50% -10%, rgba(239,6,192,.14), transparent 60%);
    --info: #93A6FF;
    --info-soft: rgba(147,166,255,.14);
    --violet: #B89DFF;
    --violet-soft: rgba(184,157,255,.14);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--glow-top);
  background-repeat: no-repeat;
  background-size: 100% 1000px;
  color: var(--ink);
  font: 400 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.tb-lock { overflow: hidden; }
img, svg { display: inline-block; vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-text); }
a:hover { color: var(--brand-ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--brand-tint); color: var(--ink); }

.tb-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tb-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.tb-page { min-height: calc(100vh - var(--topbar-h)); }
.tb-icon { flex: none; display: inline-block; vertical-align: middle; }
.tb-icon--fill { fill: currentColor; }
.tb-icon--spinner { animation: tb-spin .8s linear infinite; color: var(--brand); }
.tb-mono, .tb-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* A number that changes, inside a sentence: Mono 600 ("Found 50 plumbers ... in 14.2s") */
.tb-num { font-weight: 600; }

/* The page frame around every view: the skip link, the boot line, the view itself */
.tb-skip {
  position: absolute; left: var(--gutter); top: -64px; z-index: 200; display: inline-flex; align-items: center;
  height: 44px; padding: 0 16px; border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  box-shadow: var(--sh-pop); font: 600 14px/1 var(--font); text-decoration: none;
}
.tb-skip:focus, .tb-skip:focus-visible { top: 10px; outline: none; box-shadow: var(--sh-pop), var(--ring-brand); }
.tb-view { display: block; min-height: calc(100vh - var(--topbar-h)); }
.tb-view:focus { outline: none; }
.tb-boot { min-height: 50vh; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font: 400 14px/1.5 var(--font); }
.tb-boot p { margin: 0; }
.tb-noscript { margin: 80px auto; max-width: 480px; padding: 0 var(--gutter); text-align: center; color: var(--ink-2); }

/* ------------------------------------------------------------------ *
 * Type (1.1)
 * ------------------------------------------------------------------ */
.tb-display { margin: 0; font: 600 56px/1.05 var(--font); letter-spacing: -0.03em; color: var(--ink); }
.tb-question { margin: 0; font: 600 36px/1.2 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.tb-h1 { margin: 0; font: 600 32px/1.15 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.tb-h2 { margin: 0; font: 600 22px/1.25 var(--font); letter-spacing: -0.01em; color: var(--ink); }
.tb-h3 { margin: 0; font: 600 17px/1.25 var(--font); letter-spacing: -0.01em; color: var(--ink); }
.tb-body-l { margin: 0; font: 400 16px/1.55 var(--font); color: var(--ink-2); }
.tb-answer { font: 500 28px/1.3 var(--font); letter-spacing: -0.01em; color: var(--ink); }
.tb-body { font: 400 14px/1.5 var(--font); color: var(--ink-2); }
.tb-small { font: 400 13px/1.45 var(--font); color: var(--ink-2); }
.tb-fact { font: 500 12.5px/18px var(--font); color: var(--ink); }
.tb-caption { font: 500 12px/1.4 var(--font); color: var(--ink-3); }
.tb-label { font: 600 11px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.tb-meta { font: 400 12.5px/1.45 var(--font); color: var(--ink-3); }
.tb-em { font-style: normal; color: var(--brand); }
.tb-link { color: var(--brand-text); font-weight: 500; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; }
.tb-link:hover { color: var(--brand-ink); text-decoration: underline; }
.tb-kbd {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px;
  background: var(--bg-soft); border: 1px solid var(--line); font: 600 11px/1.2 var(--font-mono); color: var(--ink-2);
}

/* ------------------------------------------------------------------ *
 * Buttons (2.3)
 * ------------------------------------------------------------------ */
.tb-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; min-height: 44px; min-width: 44px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--ink);
  font: 600 14px/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.tb-btn:hover { text-decoration: none; }
.tb-btn:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.tb-btn:disabled, .tb-btn[aria-disabled="true"] { cursor: not-allowed; }
.tb-btn .tb-icon { width: 16px; height: 16px; }

.tb-btn--primary { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand); box-shadow: var(--sh-primary); }
.tb-btn--primary:hover:not(:disabled) { color: var(--on-brand); transform: translateY(-1px); box-shadow: var(--sh-primary-hover); }
.tb-btn--primary:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 0 0 var(--brand-deep), 0 8px 24px -10px rgba(239,6,192,.55); }
.tb-btn--primary:focus-visible { box-shadow: var(--sh-primary), var(--ring-brand); }
.tb-btn--primary:disabled, .tb-btn--primary[aria-disabled="true"] { background: var(--brand-disabled); border-color: var(--brand-disabled); color: var(--brand-ink); box-shadow: none; transform: none; }

.tb-btn--lg { height: 52px; min-height: 52px; padding: 0 24px 0 20px; border-radius: 12px; font-size: 16px; }
.tb-btn--lg .tb-icon { width: 18px; height: 18px; }
.tb-btn--ok { height: 48px; min-height: 48px; padding: 0 22px; font-size: 16px; }
.tb-btn--ok .tb-icon { width: 18px; height: 18px; }
.tb-btn--block { width: 100%; }

.tb-btn--secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.tb-btn--secondary:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.tb-btn--secondary .tb-icon { color: var(--ink-2); }
.tb-btn--secondary:disabled { color: var(--ink-3); }

/* Compact: a size (36 tall inside a 44 hit area); combine with --secondary or --ai */
.tb-btn--compact { height: 36px; min-height: 36px; padding: 0 12px; gap: 6px; font-size: 13px; }
.tb-btn--compact::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%);
}

.tb-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); font-weight: 500; }
.tb-btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }

.tb-btn--ai { padding: 0 18px; background: var(--brand-tint); border-color: var(--brand-line); color: var(--brand-ink); }
.tb-btn--ai .tb-icon { color: var(--brand); }
.tb-btn--ai:hover:not(:disabled) { border-color: var(--brand-text); color: var(--brand-ink); }
.tb-btn--ai.tb-btn--compact { padding: 0 12px; }

.tb-btn--icon { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; color: var(--ink-3); background: transparent; }
.tb-btn--icon:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.tb-btn--icon .tb-icon { width: 18px; height: 18px; }
.tb-btn--icon:disabled .tb-icon { color: var(--ink-4); }

/* The G mark of "Continue with Google": the ink stroke G (TB.icon('g', 18)) in a 26 px white circle,
   never Google's colors (DESIGN-BRIEF 1.7, SignUpSheet) */
.tb-gmark {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: #FFFFFF; color: #0E1230;
}
.tb-btn .tb-gmark .tb-icon, .tb-gmark .tb-icon { width: 18px; height: 18px; stroke-width: 2.25; color: #0E1230; }
.tb-btn--danger { background: var(--bad-fill); border-color: var(--bad-fill); color: #FFFFFF; }
.tb-btn--danger:hover:not(:disabled) { color: #FFFFFF; filter: brightness(1.05); }

.tb-btn.is-busy { color: transparent !important; pointer-events: none; }
.tb-btn.is-busy::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; border: 2px solid currentColor; border-color: var(--on-brand) var(--on-brand) var(--on-brand) transparent;
  animation: tb-spin .8s linear infinite;
}
.tb-btn--secondary.is-busy::before, .tb-btn--ghost.is-busy::before, .tb-btn--ai.is-busy::before, .tb-btn--icon.is-busy::before {
  border-color: var(--brand) var(--brand) var(--brand) transparent;
}

/* ------------------------------------------------------------------ *
 * Segmented control and switch (2.3)
 * ------------------------------------------------------------------ */
.tb-seg {
  display: inline-flex; align-items: center; gap: 2px; height: 52px; padding: 4px;
  border-radius: 12px; background: var(--bg-soft);
}
.tb-seg__btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2); font: 500 13px/1 var(--font); cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-chip) var(--ease), color var(--t-chip) var(--ease), box-shadow var(--t-chip) var(--ease);
}
.tb-seg__btn:hover { color: var(--ink); }
.tb-seg__btn[aria-pressed="true"], .tb-seg__btn[aria-checked="true"], .tb-seg__btn[aria-selected="true"], .tb-seg__btn.is-on {
  background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--sh-card);
}
.tb-seg__btn:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.tb-seg__btn--long { padding: 0 14px; }
/* Compact (Filters, Add credits or actions): a 36 track whose segments stay 44 tall buttons */
.tb-seg--compact { height: 36px; padding: 0 4px; border-radius: var(--r-md); }
.tb-seg--compact .tb-seg__btn { height: 44px; min-height: 44px; margin: -4px 0; padding: 0; background: transparent; box-shadow: none; }
.tb-seg--compact .tb-seg__pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-xs);
  transition: background-color var(--t-chip) var(--ease), box-shadow var(--t-chip) var(--ease);
}
.tb-seg--compact .tb-seg__btn[aria-pressed="true"], .tb-seg--compact .tb-seg__btn[aria-checked="true"], .tb-seg--compact .tb-seg__btn.is-on { background: transparent; box-shadow: none; }
.tb-seg--compact .tb-seg__btn[aria-pressed="true"] .tb-seg__pill, .tb-seg--compact .tb-seg__btn[aria-checked="true"] .tb-seg__pill,
.tb-seg--compact .tb-seg__btn.is-on .tb-seg__pill { background: var(--surface); box-shadow: var(--sh-card); }

.tb-switch {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px;
  cursor: pointer; color: var(--ink); font: 500 14px/1.35 var(--font);
}
.tb-switch__input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.tb-switch__track {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--pill); background: var(--line-strong);
  transition: background-color var(--t-chip) var(--ease);
}
.tb-switch__track::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(14,18,48,.20); transition: transform var(--t-chip) var(--ease);
}
.tb-switch__input:checked + .tb-switch__track { background: var(--brand-strong); }
.tb-switch__input:checked + .tb-switch__track::after { transform: translateX(18px); }
.tb-switch__input:focus-visible + .tb-switch__track { box-shadow: var(--ring-brand); }
.tb-switch__input:disabled + .tb-switch__track { opacity: .5; }

/* Checkbox well with its 44 hit area (cards, table rows, select all) */
.tb-check { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; flex: none; cursor: pointer; }
.tb-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tb-check__box {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; color: transparent;
  transition: background-color var(--t-chip) var(--ease), border-color var(--t-chip) var(--ease);
}
.tb-check input:checked + .tb-check__box, .tb-check input:indeterminate + .tb-check__box { background: var(--brand-strong); border-color: var(--brand-strong); color: #FFFFFF; }
.tb-check input:focus-visible + .tb-check__box { box-shadow: var(--ring-brand); }

/* ------------------------------------------------------------------ *
 * Pills, chips and badges (2.4, all radius 999)
 * ------------------------------------------------------------------ */
.tb-pill {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--pill);
  font: 600 11.5px/22px var(--font); white-space: nowrap; background: var(--bg-soft); color: var(--ink-2);
}
.tb-pill .tb-icon { width: 12px; height: 12px; }
.tb-pill--good { background: var(--good-tint); color: var(--good); }
.tb-pill--warn { background: var(--warn-tint); color: var(--warn); }
.tb-pill--bad { background: var(--bad-tint); color: var(--bad); }
.tb-pill--brand { background: var(--brand-tint); color: var(--brand-ink); }
.tb-pill--brand .tb-icon--spinner { color: var(--brand); }

.tb-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--pill);
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-2); font: 500 12px/1 var(--font); white-space: nowrap;
}
.tb-chip--lg { height: 32px; padding: 0 14px; font-size: 13px; }
a.tb-chip, button.tb-chip { position: relative; cursor: pointer; text-decoration: none; }
a.tb-chip:hover, button.tb-chip:hover { background: var(--surface-2); color: var(--ink); }
a.tb-chip::after, button.tb-chip::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%);
}

.tb-filterchip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: var(--pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  font: 500 13px/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-chip) var(--ease), border-color var(--t-chip) var(--ease), color var(--t-chip) var(--ease);
}
.tb-filterchip::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%);
}
.tb-filterchip .tb-icon { width: 14px; height: 14px; }
.tb-filterchip__check { display: none; }
.tb-filterchip:hover { border-color: var(--brand-line); color: var(--ink); }
.tb-filterchip[aria-pressed="true"], .tb-filterchip[aria-checked="true"], .tb-filterchip.is-on {
  background: var(--brand-tint); border-color: var(--brand-line); color: var(--brand-ink);
}
.tb-filterchip[aria-pressed="true"] .tb-filterchip__check, .tb-filterchip[aria-checked="true"] .tb-filterchip__check,
.tb-filterchip.is-on .tb-filterchip__check { display: inline-block; }

.tb-tagchip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; max-width: 100%;
  padding: 0 4px 0 12px; border-radius: var(--pill); background: var(--brand-tint); border: 1px solid var(--brand-line);
  color: var(--brand-ink); font: 600 13px/1 var(--font); white-space: nowrap;
}
.tb-tagchip__icon { width: 14px; height: 14px; flex: none; }
.tb-tagchip__words {
  /* the words open the sentence popover: a 44 tall hit area inside the 32 tall chip (margin -6) */
  display: inline-block; height: 44px; margin: -6px 0; padding: 0; min-width: 0; max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none;
  color: inherit; font: inherit; line-height: 44px; cursor: pointer;
}
.tb-tagchip__x {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--brand-ink); cursor: pointer;
}
.tb-tagchip__x::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%);
}
.tb-tagchip__x:hover { background: rgba(156,5,121,.10); }
.tb-tagchip__x .tb-icon { width: 14px; height: 14px; }

.tb-glass {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: var(--pill);
  background: var(--glass); color: var(--on-glass); font: 600 12px/1 var(--font); white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tb-glass .tb-icon { width: 13px; height: 13px; }
.tb-glass .tb-icon--star { fill: var(--star); stroke: var(--star); }

/* ------------------------------------------------------------------ *
 * Inputs
 * ------------------------------------------------------------------ */
.tb-input, .tb-select, .tb-textarea {
  display: block; width: 100%; height: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font: 400 14px/1.4 var(--font);
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.tb-textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
.tb-select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.tb-input::placeholder, .tb-textarea::placeholder { color: var(--ink-3); opacity: 1; }
.tb-input:hover, .tb-select:hover, .tb-textarea:hover { border-color: var(--ink-4); }
.tb-input:focus, .tb-select:focus, .tb-textarea:focus { outline: none; border-color: var(--brand-text); box-shadow: var(--sh-search-focus); }
.tb-input[aria-invalid="true"] { border-color: var(--bad); }
.tb-field { display: flex; flex-direction: column; gap: 6px; }
.tb-field__label { font: 600 13px/1.3 var(--font); color: var(--ink); }
.tb-field__help { font: 400 12.5px/1.45 var(--font); color: var(--ink-3); }
.tb-field__error { font: 500 12.5px/1.45 var(--font); color: var(--bad); }

/* ------------------------------------------------------------------ *
 * Overlays: scrim, sheet, modal, popover, toast (2.11, 2.13)
 * ------------------------------------------------------------------ */
.tb-layer { position: fixed; inset: 0; z-index: 80; }
.tb-layer--modal { z-index: 90; display: flex; align-items: center; justify-content: center; padding: var(--gutter); }
.tb-scrim { position: absolute; inset: 0; background: var(--scrim-modal); animation: tb-fade-in var(--t-block) var(--ease); }
.tb-scrim--modal { background: var(--scrim-modal); }
.tb-scrim--coach { background: var(--scrim); }

.tb-sheet {
  position: absolute; top: var(--topbar-h); right: 0; bottom: 0; width: min(var(--sheet-w), 100vw);
  display: flex; flex-direction: column; background: var(--surface); color: var(--ink);
  border-radius: var(--r-xl) 0 0 var(--r-xl); box-shadow: var(--sh-modal);
  animation: tb-sheet-in var(--t-block) var(--ease);
}
.tb-sheet:focus { outline: none; }
.tb-sheet__grab { display: none; }
.tb-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 16px 0 28px; }
.tb-sheet__title { margin: 6px 0 0; font: 600 22px/1.25 var(--font); letter-spacing: -0.01em; color: var(--ink); }
.tb-sheet__close { margin: -4px 0 0; }
.tb-sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 28px 28px; display: flex; flex-direction: column; gap: 20px; }
.tb-sheet__foot {
  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 16px 28px; border-top: 1px solid var(--line); background: var(--surface); border-radius: 0 0 0 var(--r-xl);
}

.tb-modal {
  position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--surface); color: var(--ink);
  border-radius: var(--r-2xl); box-shadow: var(--sh-modal); animation: tb-pop-in var(--t-block) var(--ease);
}
.tb-modal:focus { outline: none; }
.tb-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: -6px -10px 0 0; }
.tb-modal__title { margin: 6px 0 0; font: 600 22px/1.25 var(--font); letter-spacing: -0.01em; color: var(--ink); }
.tb-modal__body { display: flex; flex-direction: column; gap: 12px; color: var(--ink-2); font: 400 14px/1.5 var(--font); }
.tb-modal__text { margin: 0; }
.tb-modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.tb-pop {
  position: fixed; z-index: 95; width: 320px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto;
  padding: 16px; background: var(--surface); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-pop);
  animation: tb-pop-in var(--t-chip) var(--ease);
}
.tb-pop:focus { outline: none; }

.tb-toasts {
  position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px);
  pointer-events: none;
}
.tb-toast {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 8px 0 18px; border-radius: var(--pill);
  background: var(--ink); color: var(--bg); font: 500 13px/1.35 var(--font); box-shadow: var(--sh-pop);
  pointer-events: auto; animation: tb-rise-in var(--t-block) var(--ease);
}
.tb-toast__text { padding: 12px 10px 12px 0; }
.tb-toast__action {
  display: inline-flex; align-items: center; height: 44px; padding: 0 10px; border: 0; background: transparent;
  color: var(--bg); font: 600 13px/1 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tb-toast__action:hover { color: var(--bg); }

.tb-offline {
  position: fixed; left: 50%; top: calc(var(--topbar-h) + 12px); z-index: 99; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: var(--pill);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-pop);
  color: var(--ink-2); font: 500 13px/1 var(--font);
}
.tb-offline::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--brand); border-right-color: transparent; animation: tb-spin .8s linear infinite;
}

/* A hover or focus tooltip: <span class="tb-has-tip">trigger<span class="tb-tooltip" role="tooltip">words</span></span> */
.tb-has-tip { position: relative; display: inline-flex; }
.tb-tooltip {
  position: absolute; left: 50%; top: calc(100% + 8px); z-index: 60; transform: translate(-50%, 4px);
  width: max-content; max-width: 280px; padding: 8px 12px; border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-2); font: 400 13px/1.45 var(--font); white-space: normal; text-align: left;
  box-shadow: var(--sh-pop); opacity: 0; pointer-events: none;
  transition: opacity var(--t-chip) var(--ease), transform var(--t-chip) var(--ease);
}
.tb-has-tip:hover > .tb-tooltip, .tb-has-tip:focus-within > .tb-tooltip { opacity: 1; transform: translate(-50%, 0); }
/* For a trigger near the right edge (the meter): the tooltip ends where the trigger ends */
.tb-tooltip--end { left: auto; right: 0; transform: translate(0, 4px); }
.tb-has-tip:hover > .tb-tooltip--end, .tb-has-tip:focus-within > .tb-tooltip--end { transform: none; }
/* No hover on touch screens: a tooltip never sits off screen there */
@media (hover: none) { .tb-tooltip { display: none; } }

/* ------------------------------------------------------------------ *
 * Loading: skeleton, shimmer, spinner, progress
 * ------------------------------------------------------------------ */
.tb-skel {
  display: block; border-radius: var(--r-sm); background-color: var(--bg-soft);
  background-image: linear-gradient(90deg, var(--bg-soft) 0%, var(--surface-3) 50%, var(--bg-soft) 100%);
  background-size: 200% 100%; animation: tb-shimmer var(--t-shimmer) linear infinite;
}
.tb-shimmer {
  color: transparent; border-radius: var(--r-xs);
  background-image: linear-gradient(90deg, var(--bg-soft) 0%, var(--surface-3) 50%, var(--bg-soft) 100%);
  background-size: 200% 100%; animation: tb-shimmer var(--t-shimmer) linear infinite;
}
.tb-shimmer--text { color: var(--ink-3); background: none; animation: tb-text-shimmer var(--t-shimmer) ease-in-out infinite; }
.tb-spinner {
  display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--brand-line); border-top-color: var(--brand); animation: tb-spin .8s linear infinite;
}
.tb-progress { position: relative; height: 4px; background: var(--bg-soft); overflow: hidden; }
.tb-progress__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--brand); transition: width var(--t-glide) var(--ease); }

/* ------------------------------------------------------------------ *
 * Top bar (2.1) and the page frame
 * ------------------------------------------------------------------ */
.tb-topbar {
  position: sticky; top: 0; z-index: 50; height: var(--topbar-h);
  background: var(--topbar-bg); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
}
.tb-topbar__in { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.tb-topbar__end { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 10px; }
.tb-logo { grid-column: 1; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; height: 44px; text-decoration: none; color: var(--ink); }
.tb-logo:hover { color: var(--ink); }
.tb-logo__mark {
  width: 24px; height: 24px; flex: none; border-radius: 7px; background: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px -4px rgba(0,0,0,.55);
}
.tb-logo__mark img { display: block; width: 84%; height: auto; }
.tb-logo__words { display: inline-flex; align-items: baseline; gap: 5px; letter-spacing: -0.01em; font: 700 16px/1 var(--font); color: var(--ink); }
.tb-logo__words span { font-weight: 500; color: var(--ink-3); }
.tb-nav { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 4px; }
.tb-nav__link {
  position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 14px;
  font: 500 14px/1 var(--font); color: var(--ink-2); text-decoration: none;
}
.tb-nav__link:hover { color: var(--ink); }
.tb-nav__link[aria-current="page"] { color: var(--ink); }
.tb-nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--brand);
}
.tb-meter {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--pill);
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-2); font: 500 12.5px/1 var(--font-mono); white-space: nowrap;
}
.tb-meter-link { display: inline-flex; align-items: center; height: 44px; text-decoration: none; }
.tb-avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink);
  font: 600 13px/36px var(--font); text-align: center; overflow: hidden;
}
.tb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tb-avatar-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.tb-topbar__link { display: inline-flex; align-items: center; height: 44px; font: 500 14px/1 var(--font); color: var(--ink-2); text-decoration: none; }
.tb-topbar__link:hover { color: var(--ink); }
/* Signed out (Main, AnonResults): "How it works" and "Pricing" 24 apart, then a quiet Sign in, a
   secondary at height 40 in a 44 hit area. No nav, no meter, no avatar. */
.tb-topbar__end--out { gap: 24px; }
.tb-topbar__signin { height: 40px; min-height: 40px; padding: 0 16px; }
.tb-topbar__signin::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%);
}
/* Onboarding: no nav, no meter; the signed-in email (13 ink-2) and a ghost Sign out */
.tb-topbar__email { font: 400 13px/1.3 var(--font); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }

/* The phone top bar's center: the view's title and its tag (Phone artboard, brief 2.20); hidden on desktop */
.tb-topbar__title { display: none; grid-column: 2; grid-row: 1; }

/* The avatar menu and any list of actions in a popover (AccountMenu artboard: 320 wide, padding 8; rows
   44 tall, radius 10, an 18 px icon in ink-3, 14/500 ink; quiet rows 13/500 ink-2). Use it as
   TB.ui.popover(anchor, html, {className: 'tb-menu', width: 320, align: 'end'}). */
.tb-pop.tb-menu { padding: 8px; }
.tb-menu { display: flex; flex-direction: column; }
.tb-menu__head { display: flex; align-items: flex-start; gap: 12px; padding: 12px; }
.tb-menu__head .tb-avatar { width: 40px; height: 40px; font-size: 14px; line-height: 40px; }
.tb-menu__name { display: block; font: 600 14px/1.4 var(--font); color: var(--ink); }
.tb-menu__line { display: block; font: 400 12.5px/1.4 var(--font); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.tb-menu__section { padding: 12px; }
.tb-menu__sep { height: 1px; margin: 4px 0; border: 0; background: var(--line); }
.tb-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tb-menu__item {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink); cursor: pointer;
  font: 500 14px/1 var(--font); text-align: left; text-decoration: none;
  transition: background-color var(--t-hover) var(--ease);
}
.tb-menu__item:hover, .tb-menu__item[aria-current="page"] { background: var(--surface-2); color: var(--ink); }
.tb-menu__item:focus-visible { outline: none; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--brand); }
.tb-menu__item .tb-icon { width: 18px; height: 18px; color: var(--ink-3); }
.tb-menu__item .tb-icon--chevron-right { width: 16px; height: 16px; margin-left: auto; color: var(--ink-4); }
.tb-menu__words { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-menu__item--quiet { gap: 6px; font-size: 13px; color: var(--ink-2); }
.tb-menu__item--quiet .tb-icon { width: 14px; height: 14px; }

/* The signed-out footer (Main): a hairline, 80 tall, links 13/500 ink-3 in 44 hit areas, 20 apart */
.tb-foot {
  width: calc(100% - 2 * var(--gutter)); max-width: var(--container); min-height: 80px; margin: 56px auto 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 20px;
  border-top: 1px solid var(--line); color: var(--ink-3); font: 400 13px/1.4 var(--font);
}
.tb-foot nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0 20px; }
.tb-foot a { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; font: 500 13px/1 var(--font); color: var(--ink-3); text-decoration: none; }
.tb-foot a:hover { color: var(--ink); }
.tb-foot p { margin: 0; display: flex; align-items: center; gap: 4px; }
.tb-foot a.tb-foot__cta { font-weight: 600; color: var(--brand-text); }
.tb-foot a.tb-foot__cta:hover { color: var(--brand-ink); }

/* Receipts, status and the context nudge (2.13; Results, ReturnAnswer, OutOfCredits) */
.tb-receipt { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.tb-receipt > .tb-icon { width: 18px; height: 18px; color: var(--good); }
.tb-receipt__main { margin: 0; font: 400 14px/18px var(--font); color: var(--ink); }
.tb-receipt__main strong { font-weight: 600; }
.tb-receipt__sub { margin: 1px 0 0; font: 400 12.5px/16px var(--font); color: var(--ink-3); }
.tb-status { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-status__words { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1.4 var(--font); color: var(--ink-2); }
.tb-status__words .tb-num { color: var(--ink); }
.tb-timer {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--pill);
  background: var(--brand-tint); border: 1px solid var(--brand-line); color: var(--brand-ink);
  font: 600 12.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tb-timer::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px rgba(239,6,192,.6); }
.tb-nudge {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 8px 4px 16px;
  border-radius: var(--r-md); background: var(--brand-tint); border: 1px solid var(--brand-line);
  color: var(--ink); font: 400 13.5px/1.4 var(--font);
}
.tb-nudge::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.tb-nudge__text { flex: 1; min-width: 0; }
.tb-nudge__text strong { font-weight: 600; }
.tb-nudge__link {
  position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 10px; border: 0; background: none;
  color: var(--brand-ink); font: 600 14px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.tb-nudge__link:hover { color: var(--brand-ink); text-decoration: underline; }

.tb-notfound { padding-top: 80px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* Phone: one 358 column, a 16 px gutter, sheets rise from the bottom. The top bar is 56 tall: the 28 px
   mark, the view's title in the center and the avatar (no nav, no meter, as on the Phone artboard). */
@media (max-width: 640px) {
  :root { --topbar-h: 56px; }
  .tb-topbar__in { grid-template-columns: 44px minmax(0, 1fr) minmax(44px, auto); gap: 8px; padding: 0 12px 0 8px; }
  .tb-logo { width: 44px; justify-content: center; }
  .tb-logo__mark { width: 28px; height: 28px; border-radius: var(--r-sm); }
  .tb-logo__words, .tb-nav, .tb-meter-link { display: none; }
  .tb-topbar__end { gap: 0; }
  .tb-topbar__title {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0;
    height: 44px; padding: 0 8px; border: 0; background: none; color: var(--ink); cursor: pointer; justify-self: center;
  }
  .tb-topbar__title-main { font: 600 15px/1.2 var(--font); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
  .tb-topbar__title-tag {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    font: 600 12px/1.2 var(--font); color: var(--brand-text); white-space: nowrap;
  }
  .tb-topbar__title-tag .tb-icon { width: 12px; height: 12px; }
  .tb-topbar__title-sub { font: 400 12px/1.2 var(--font); color: var(--ink-3); white-space: nowrap; }
  /* Signed out on a phone (PhoneSignUp): only a plain "Sign in", 13/600 ink */
  .tb-topbar__end--out { gap: 0; }
  .tb-topbar__end--out .tb-topbar__link, .tb-topbar__email { display: none; }
  .tb-topbar__signin { height: 44px; min-height: 44px; padding: 0 8px; border-color: transparent; background: transparent; box-shadow: none; font-size: 13px; }
  .tb-foot { flex-direction: column; align-items: flex-start; justify-content: center; padding: 12px 0 20px; }
  .tb-display { font-size: 36px; }
  .tb-question { font-size: 28px; }
  .tb-h1 { font-size: 26px; }
  .tb-sheet {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0; animation-name: tb-sheet-up;
  }
  .tb-sheet__grab { display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: var(--pill); background: var(--line-strong); flex: none; }
  .tb-sheet__head { padding: 10px 8px 0 16px; }
  .tb-sheet__body { padding: 16px 16px 20px; }
  .tb-sheet__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 0; }
  .tb-modal { padding: 20px; border-radius: var(--r-xl); }
  .tb-toasts { bottom: 16px; }
}

/* ------------------------------------------------------------------ *
 * Motion (1.6)
 * ------------------------------------------------------------------ */
@keyframes tb-spin { to { transform: rotate(360deg); } }
@keyframes tb-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes tb-text-shimmer { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes tb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tb-rise-in { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@keyframes tb-pop-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tb-sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tb-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tb-card-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tb-glide-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes tb-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tb-flash { from { background-color: var(--brand-tint); } }

/* Reduced motion: opacity only, no height animation, no glide, no movement */
@media (prefers-reduced-motion: reduce) {
  :root { --rise: 0px; --lift: 0px; --t-height: 0ms; }
  html { scroll-behavior: auto !important; }
  .tb-btn, .tb-seg__btn, .tb-filterchip, .tb-switch__track::after, .tb-tooltip, .tb-progress__fill {
    transition-property: opacity, color, background-color, border-color, box-shadow !important;
  }
  .tb-btn--primary:hover:not(:disabled), .tb-btn--primary:active:not(:disabled) { transform: none; }
  .tb-skel, .tb-shimmer, .tb-shimmer--text { animation: none; }
  .tb-icon--spinner, .tb-spinner, .tb-btn.is-busy::before, .tb-offline::before { animation-duration: 2.4s; }
  @keyframes tb-rise-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tb-pop-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tb-sheet-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tb-sheet-up { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tb-card-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tb-glide-in { from { opacity: 0; } to { opacity: 1; } }
}