/* OwnTongue brand layer — hand-ported from the design system at
   .claude/skills/OwnTongue Design System/ (issue #55). One file, linked by
   every surface: self-hosted fonts, tokens, base, and the .ot-* component
   classes hand-ported from the DS React components. There is no generator:
   when the DS source changes, port the change here by hand (and vice versa) —
   the DS dir is the design reference, this file is what production serves. */

/* ════ Self-hosted webfonts ════════════════════════════════════════════════
   One variable-font file per family/subset (the per-weight files Google served
   were byte-identical), declared with a font-weight RANGE so every weight on a
   page shares one download and one cache entry. latin + latin-ext only; other
   scripts use the system fallback stacks by design — see spec §3.2. No italic
   faces: nothing renders italics today (browsers synthesize oblique if legal
   prose ever gains an <em>). ════ */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/brand/fonts/source-sans-3-latin.woff2) format('woff2');
  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: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/brand/fonts/source-sans-3-latin-ext.woff2) format('woff2');
  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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/brand/fonts/source-serif-4-latin.woff2) format('woff2');
  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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/brand/fonts/source-serif-4-latin-ext.woff2) format('woff2');
  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: 'Source Code Pro';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(/brand/fonts/source-code-pro-latin.woff2) format('woff2');
  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: 'Source Code Pro';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(/brand/fonts/source-code-pro-latin-ext.woff2) format('woff2');
  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;
}

/* OwnTongue — color tokens.
   "Paper & ink": warm neutral surfaces, a dignified ink-indigo brand, a single ochre
   "welcome" accent. Content/viewer screens use a pure-black canvas so nothing competes
   with the live captions. Warm neutrals (not cool blue-grays) are what move this from
   generic-SaaS to hospitable + trustworthy. */

:root {
  /* ── Warm paper neutrals ─────────────────────────────────────────────── */
  --paper-0:   #ffffff;
  --paper-50:  #faf8f4;
  --paper-100: #f4f1ea;
  --paper-150: #ece7dd;
  --paper-200: #e0dacd;
  --paper-300: #cdc5b4;
  --stone-400: #b3aa97;
  --stone-500: #8a8270;
  --stone-600: #6c6556;
  --ink-700:   #4b463b;
  --ink-800:   #2c2820;
  --ink-900:   #1b1813;

  /* ── Brand: ink-indigo ───────────────────────────────────────────────── */
  --brand-50:  #eef2f9;
  --brand-100: #dce4f1;
  --brand-200: #b9c8e2;
  --brand-300: #8da7d0;
  --brand-400: #5a7cb5;
  --brand-500: #3a63a3;
  --brand-600: #2f5288;  /* primary action */
  --brand-700: #264272;  /* hover */
  --brand-800: #1d3358;  /* active / deep headings */
  --brand-900: #152744;  /* deepest */

  /* ── Accent: ochre "welcome" ─────────────────────────────────────────── */
  --ochre-50:  #fbf3e8;
  --ochre-100: #f6e6cf;
  --ochre-200: #eccc9f;
  --ochre-300: #e0ad6f;
  --ochre-400: #d4904a;
  --ochre-500: #c2762f;  /* accent */
  --ochre-600: #a5601f;  /* accent text on light */
  --ochre-700: #824a18;

  /* ── Semantic hues ───────────────────────────────────────────────────── */
  --success-100: #e3efe7;
  --success-500: #3f7d54;
  --success-700: #2c5a3c;
  --warning-100: #f7ebd2;
  --warning-500: #bb8722;
  --warning-700: #8a6217;
  --danger-100:  #f6e2dd;
  --danger-500:  #b3402f;
  --danger-700:  #8a2e20;

  /* ── Content (viewer / live-caption) canvas ──────────────────────────── */
  --content-bg:        #000000;
  --content-fg:        #ffffff;
  --content-dim:       #cfcfcf;
  --content-muted:     #8b8b8b;
  --content-highlight: #f5b942;  /* active line — warm amber, on-brand */

  /* ════════ SEMANTIC ALIASES ════════════════════════════════════════════ */

  /* Surfaces */
  --bg-page:        var(--paper-50);
  --bg-sunken:      var(--paper-100);
  --surface-card:   var(--paper-0);
  --surface-raised: var(--paper-0);
  --surface-tint:   var(--brand-50);
  --surface-accent-tint: var(--ochre-50);

  /* Borders */
  --border-subtle:  var(--paper-150);
  --border-default: var(--paper-200);
  --border-strong:  var(--paper-300);

  /* Text */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted:     var(--stone-600);
  --text-faint:     var(--stone-500);
  --text-on-brand:  #ffffff;
  --text-on-accent: #ffffff;
  --text-link:      var(--brand-600);
  --text-brand:     var(--brand-700);

  /* Actions */
  --action-primary:        var(--brand-600);
  --action-primary-hover:  var(--brand-700);
  --action-primary-active: var(--brand-800);
  --accent:                var(--ochre-500);
  --accent-hover:          var(--ochre-600);

  /* States — rgba fallbacks first (brand-600 @38%, ink-900 @55%). Custom
     properties accept any value at declaration time, so a color-mix() string
     would be stored and then fail invalid-at-computed-value at the USE site on
     older browsers (Safari < 16.2, WebView < 111) — silently killing the focus
     ring. The color-mix() forms apply only where supported. [deviation from DS
     colors.css, which declares color-mix() unconditionally] */
  --focus-ring:     rgba(47, 82, 136, 0.38);
  --overlay-scrim:  rgba(27, 24, 19, 0.55);
}

@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --focus-ring:    color-mix(in srgb, var(--brand-600) 38%, transparent);
    --overlay-scrim: color-mix(in srgb, var(--ink-900) 55%, transparent);
  }
}

/* OwnTongue — typography tokens.
   Source Serif 4 carries display/headlines (editorial trust, civic + sacred neutral);
   Source Sans 3 carries UI and body (warm humanist clarity); Source Code Pro is reserved
   for join codes and technical mono. */

:root {
  /* ── Families ────────────────────────────────────────────────────────── */
  --font-serif: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;
  --font-sans:  'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'Source Code Pro', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  /* Role aliases */
  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);
  --font-ui:      var(--font-sans);

  /* ── Type scale (1.0rem = 16px base) ─────────────────────────────────── */
  --text-xs:   0.75rem;   /* 12 — legal, captions */
  --text-sm:   0.875rem;  /* 14 — secondary UI */
  --text-base: 1rem;      /* 16 — body */
  --text-md:   1.0625rem; /* 17 — comfortable reading */
  --text-lg:   1.25rem;   /* 20 — lead / subhead */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  1.875rem;  /* 30 */
  --text-3xl:  2.375rem;  /* 38 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  3.75rem;   /* 60 — hero */

  /* ── Weights ─────────────────────────────────────────────────────────── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Line heights ────────────────────────────────────────────────────── */
  --leading-tight:   1.12;  /* display */
  --leading-snug:    1.28;  /* headings */
  --leading-normal:  1.5;   /* UI */
  --leading-relaxed: 1.65;  /* body prose */

  /* ── Letter spacing ──────────────────────────────────────────────────── */
  --tracking-tight:  -0.02em;  /* large display */
  --tracking-snug:   -0.01em;  /* headings */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* eyebrows / uppercase labels */
  --tracking-wider:  0.12em;   /* join-code mono */
}

/* OwnTongue — spacing, radii, shadows, motion.
   Tight, crisp radii and soft warm-tinted shadows keep the system feeling considered and
   institutional rather than bouncy/consumer. */

:root {
  /* ── Spacing (4px base) ──────────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 6rem;     /* 96 */

  /* ── Radii (crisp — editorial, not bubbly) ───────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   3px;
  --radius-lg:   4px;
  --radius-xl:   6px;
  --radius-pill: 999px;  /* reserved for genuinely capsule things: switch track, dots */

  /* ── Shadows (warm-tinted, low) ──────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(38, 33, 24, 0.06);
  --shadow-sm: 0 1px 3px rgba(38, 33, 24, 0.08), 0 1px 2px rgba(38, 33, 24, 0.05);
  --shadow-md: 0 2px 8px rgba(38, 33, 24, 0.08), 0 1px 3px rgba(38, 33, 24, 0.06);
  --shadow-lg: 0 8px 28px rgba(38, 33, 24, 0.12), 0 2px 8px rgba(38, 33, 24, 0.06);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  760px;
  --container-lg:  1040px;
  --container-xl:  1200px;
  --header-height: 56px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --duration-fast: 120ms;  /* @kind other */
  --duration-base: 180ms;  /* @kind other */
  --duration-slow: 300ms;  /* @kind other */

  /* ── Elevation order ─────────────────────────────────────────────────── */
  --z-header:  100;  /* @kind other */
  --z-overlay: 200;  /* @kind other */
  --z-modal:   300;  /* @kind other */
  --z-toast:   400;  /* @kind other */
}

/* OwnTongue — base element defaults.
   Light, opt-in foundation: sets the page in warm paper + ink, wires the type families,
   and gives links/selection/focus a consistent brand treatment. Components and kits
   layer on top of this. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

::selection {
  background: var(--ochre-200);
  color: var(--ink-900);
}

:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* Eyebrow / overline label — a recurring brand device */
.ot-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ochre-600);
}

/* ════ Component classes (ported from components/core + components/product) ════ */
/* ── Alert (core) ── */
.ot-alert{
  display:flex;gap:.75rem;font-family:var(--font-sans);font-size:var(--text-sm);
  line-height:var(--leading-snug);border:1px solid;border-radius:var(--radius-md);
  padding:.85rem 1rem;
}
.ot-alert__body{display:flex;flex-direction:column;gap:.15rem}
.ot-alert__title{font-weight:var(--weight-semibold)}
.ot-alert__icon{flex-shrink:0;margin-top:.05rem}
.ot-alert--info{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-800)}
.ot-alert--success{background:var(--success-100);border-color:#bcd9c6;color:var(--success-700)}
.ot-alert--warning{background:var(--warning-100);border-color:#e7d4a3;color:var(--warning-700)}
.ot-alert--danger{background:var(--danger-100);border-color:#e7c0b6;color:var(--danger-700)}

/* ── Badge (core) ── */
.ot-badge{
  display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-sans);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;
  padding:.25rem .5rem;border-radius:var(--radius-sm);white-space:nowrap;
}
.ot-badge--neutral{background:var(--paper-150);color:var(--text-secondary)}
.ot-badge--brand{background:var(--brand-100);color:var(--brand-800)}
.ot-badge--accent{background:var(--ochre-100);color:var(--ochre-700)}
.ot-badge--success{background:var(--success-100);color:var(--success-700)}
.ot-badge--warning{background:var(--warning-100);color:var(--warning-700)}
.ot-badge--danger{background:var(--danger-100);color:var(--danger-700)}
.ot-badge--solid{background:var(--brand-600);color:#fff}
.ot-badge__dot{width:.45rem;height:.45rem;border-radius:50%;background:currentColor}

/* ── Button (core) ── */
.ot-btn{
  font-family:var(--font-sans);font-weight:var(--weight-semibold);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;
  text-decoration:none;white-space:nowrap;line-height:1;
  transition:background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.ot-btn:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}
.ot-btn--sm{font-size:var(--text-sm);padding:.45rem .85rem}
.ot-btn--md{font-size:var(--text-base);padding:.6rem 1.2rem}
.ot-btn--lg{font-size:var(--text-md);padding:.75rem 1.6rem}
.ot-btn--block{width:100%}
.ot-btn[disabled],.ot-btn[aria-disabled="true"]{cursor:not-allowed;opacity:.55}

.ot-btn--primary{background:var(--action-primary);color:var(--text-on-brand)}
.ot-btn--primary:hover:not([disabled]){background:var(--action-primary-hover);text-decoration:none}
.ot-btn--primary:active:not([disabled]){background:var(--action-primary-active)}

.ot-btn--secondary{background:var(--paper-100);color:var(--text-primary);border-color:var(--border-default)}
.ot-btn--secondary:hover:not([disabled]){background:var(--paper-150);border-color:var(--border-strong);text-decoration:none}

.ot-btn--ghost{background:transparent;color:var(--text-brand);border-color:var(--border-default)}
.ot-btn--ghost:hover:not([disabled]){background:var(--brand-50);border-color:var(--brand-300);text-decoration:none}

.ot-btn--accent{background:var(--accent);color:var(--text-on-accent)}
.ot-btn--accent:hover:not([disabled]){background:var(--accent-hover);text-decoration:none}

.ot-btn--danger{background:var(--danger-500);color:#fff}
.ot-btn--danger:hover:not([disabled]){background:var(--danger-700);text-decoration:none}

/* ── Card (core) ── */
.ot-card{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:var(--space-5);
}
.ot-card--flat{box-shadow:none}
.ot-card--raised{box-shadow:var(--shadow-lg)}
.ot-card--featured{border-color:var(--brand-600);box-shadow:var(--shadow-lg)}
.ot-card--tint{background:var(--surface-tint);border-color:var(--brand-100)}
.ot-card__eyebrow{
  font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-faint);
  margin:0 0 var(--space-3);
}
.ot-card__title{
  font-family:var(--font-serif);font-size:var(--text-lg);font-weight:var(--weight-semibold);
  color:var(--text-primary);margin:0 0 var(--space-2);
}

/* ── IconButton (core) ── */
.ot-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;
  color:var(--text-secondary);background:transparent;
  transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);
}
.ot-iconbtn--sm{width:32px;height:32px}
.ot-iconbtn--md{width:40px;height:40px}
.ot-iconbtn:hover:not([disabled]){background:var(--paper-100);color:var(--text-primary)}
.ot-iconbtn:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}
.ot-iconbtn[disabled]{opacity:.5;cursor:not-allowed}
.ot-iconbtn--solid{background:var(--brand-600);color:#fff}
.ot-iconbtn--solid:hover:not([disabled]){background:var(--brand-700);color:#fff}
.ot-iconbtn--outline{border-color:var(--border-default)}
.ot-iconbtn--outline:hover:not([disabled]){border-color:var(--border-strong);background:var(--paper-100)}

/* ── Input (core) ── */
.ot-field{display:flex;flex-direction:column;gap:.35rem;font-family:var(--font-sans)}
.ot-field__label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-secondary)}
.ot-field__hint{font-size:var(--text-xs);color:var(--text-muted)}
.ot-field__err{font-size:var(--text-xs);color:var(--danger-700)}
.ot-input{
  font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-primary);
  background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:var(--radius-sm);padding:.6rem .75rem;width:100%;
  transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);
}
.ot-input::placeholder{color:var(--text-faint)}
.ot-input:hover:not(:disabled){border-color:var(--border-strong)}
.ot-input:focus{outline:none;border-color:var(--brand-600);box-shadow:var(--shadow-focus)}
.ot-input:disabled{background:var(--paper-100);color:var(--text-faint);cursor:not-allowed}
.ot-input--err{border-color:var(--danger-500)}
.ot-input--err:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger-500) 30%,transparent)}

/* ── Meter (core) ── */
.ot-meter{font-family:var(--font-sans)}
.ot-meter__head{display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--text-sm);color:var(--text-muted);margin-bottom:.4rem}
.ot-meter__used{font-weight:var(--weight-semibold);color:var(--text-primary)}
.ot-meter__track{height:6px;background:var(--paper-150);border-radius:var(--radius-pill);overflow:hidden}
.ot-meter__fill{height:100%;background:var(--brand-600);border-radius:var(--radius-pill);
  transition:width var(--duration-slow) var(--ease-out)}
.ot-meter__fill--warn{background:var(--warning-500)}
.ot-meter__fill--over{background:var(--danger-500)}

/* ── Select (core) ── */
.ot-select-wrap{position:relative;display:inline-flex;width:100%}
.ot-select{
  appearance:none;font-family:var(--font-sans);font-size:var(--text-base);
  color:var(--text-primary);background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius-sm);
  padding:.6rem 2.25rem .6rem .75rem;width:100%;cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);
}
.ot-select:hover:not(:disabled){border-color:var(--border-strong)}
.ot-select:focus{outline:none;border-color:var(--brand-600);box-shadow:var(--shadow-focus)}
.ot-select:disabled{background:var(--paper-100);color:var(--text-faint);cursor:not-allowed}
.ot-select-wrap::after{
  content:"";position:absolute;right:.85rem;top:50%;width:.5rem;height:.5rem;
  border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:translateY(-65%) rotate(45deg);pointer-events:none;
}

/* ── Switch (core) ── */
.ot-switch{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--font-sans);cursor:pointer}
.ot-switch input{position:absolute;opacity:0;width:0;height:0}
.ot-switch__track{
  position:relative;width:42px;height:24px;flex-shrink:0;border-radius:var(--radius-pill);
  background:var(--paper-300);transition:background var(--duration-base) var(--ease-standard);
}
.ot-switch__track::before{
  content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-xs);transition:transform var(--duration-base) var(--ease-out);
}
.ot-switch input:checked + .ot-switch__track{background:var(--brand-600)}
.ot-switch input:checked + .ot-switch__track::before{transform:translateX(18px)}
.ot-switch input:focus-visible + .ot-switch__track{outline:2px solid var(--brand-600);outline-offset:2px}
.ot-switch input:disabled + .ot-switch__track{opacity:.55;cursor:not-allowed}
.ot-switch__label{font-size:var(--text-sm);color:var(--text-primary)}

/* ── AppHeader (product) ── */
.ot-appheader{
  display:flex;align-items:center;gap:1.25rem;height:var(--header-height);
  padding:0 1.5rem;background:var(--surface-card);border-bottom:1px solid var(--border-default);
  font-family:var(--font-sans);
}
.ot-appheader__brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;margin-right:.5rem}
.ot-appheader__wm{font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:-.01em}
.ot-appheader__wm .a{color:var(--text-primary)}
.ot-appheader__wm .b{color:var(--brand-700)}
.ot-appheader__nav{display:flex;gap:1.25rem;align-items:center}
.ot-appheader__nav a{font-size:var(--text-sm);color:var(--text-muted);text-decoration:none}
.ot-appheader__nav a:hover{color:var(--text-primary);text-decoration:underline}
.ot-appheader__nav a.active{color:var(--text-primary);font-weight:var(--weight-semibold)}
.ot-appheader__right{margin-left:auto;display:flex;align-items:center;gap:1rem}
.ot-appheader__right a{font-size:var(--text-sm);color:var(--text-faint);text-decoration:none}
.ot-appheader__right a:hover{color:var(--danger-500)}

/* ── LanguagePicker (product) ── */
.ot-langpick{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-sans)}
.ot-langpick__label{font-size:var(--text-sm)}
.ot-langpick__dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--success-500);flex-shrink:0}
.ot-langpick__dot--pulse{animation:ot-lp-pulse 1.5s ease-in-out infinite}
@keyframes ot-lp-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
@media (prefers-reduced-motion: reduce){
  .ot-langpick__dot--pulse{animation:none}
}
.ot-langpick select{
  appearance:none;font-family:var(--font-sans);font-size:var(--text-sm);
  border-radius:var(--radius-sm);padding:.35rem 1.8rem .35rem .6rem;cursor:pointer;
  background-repeat:no-repeat;background-position:right .55rem center;background-size:.5rem;
}
/* Light theme (operator surfaces) */
.ot-langpick--light .ot-langpick__label{color:var(--text-muted)}
.ot-langpick--light select{color:var(--text-primary);background-color:var(--surface-card);
  border:1px solid var(--border-default);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236c6556' stroke-width='2' fill='none'/%3E%3C/svg%3E")}
/* Dark theme (viewer canvas) */
.ot-langpick--dark .ot-langpick__label{color:#ccc}
.ot-langpick--dark select{color:#eee;background-color:rgba(0,0,0,.6);
  border:1px solid #444;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23bbb' stroke-width='2' fill='none'/%3E%3C/svg%3E")}
.ot-langpick select:focus{outline:2px solid var(--brand-500);outline-offset:1px}

/* ── PlanCard (product) ── */
.ot-plan{
  display:flex;flex-direction:column;background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:var(--space-5);font-family:var(--font-sans);
}
.ot-plan--featured{border-color:var(--brand-600);box-shadow:var(--shadow-lg)}
/* Badge hugs the left edge instead of stretching in the flex column
   (hand-authored — not in the DS PlanCard source; shared by site + app). */
.ot-plan .ot-badge{align-self:flex-start}
.ot-plan__name{font-family:var(--font-serif);font-size:var(--text-xl);font-weight:var(--weight-semibold);
  color:var(--text-primary);margin:.4rem 0 0}
.ot-plan__price{font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--text-primary);
  margin:.25rem 0 .15rem;letter-spacing:-.01em}
.ot-plan__price span{font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--text-faint)}
.ot-plan__blurb{font-size:var(--text-sm);color:var(--text-muted);margin:0 0 1rem}
.ot-plan__features{list-style:none;margin:.5rem 0 1.25rem;padding:0;flex:1;display:flex;flex-direction:column;gap:.4rem}
.ot-plan__features li{font-size:var(--text-sm);color:var(--text-secondary);padding-left:1.5rem;position:relative;line-height:var(--leading-snug)}
.ot-plan__features li::before{content:"";position:absolute;left:0;top:.35em;width:.7rem;height:.4rem;
  border-left:2px solid var(--brand-600);border-bottom:2px solid var(--brand-600);transform:rotate(-45deg)}

/* ── SessionCode (product) ── */
.ot-sescode{
  display:flex;flex-direction:column;gap:.6rem;background:var(--success-100);
  border:1px solid #bcd9c6;border-radius:var(--radius-lg);padding:var(--space-5);font-family:var(--font-sans);
}
.ot-sescode__row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.ot-sescode__label{font-size:var(--text-sm);color:var(--success-700);font-weight:var(--weight-semibold)}
.ot-sescode__code{font-family:var(--font-mono);font-size:2.25rem;font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wider);color:var(--ink-900);line-height:1}
.ot-sescode__url{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--success-700);word-break:break-all}
.ot-sescode__copy{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-sans);
  font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--success-700);
  background:transparent;border:1px solid #bcd9c6;border-radius:var(--radius-sm);padding:.4rem .7rem;cursor:pointer}
.ot-sescode__copy:hover{background:#fff}

/* ════ Shared app patterns (hand-authored — NOT ported from the DS source) ════
   Page-level layouts the DS has no component for, consolidated here so the app
   pages stop carrying drifted page-local copies. */

/* ── Auth page: centered single-card layout (login, login-check-email,
      subscribe-success). Apply .ot-authpage to <body>. Pages may override
      .ot-authcard's max-width locally where genuinely needed. ── */
.ot-authpage{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:var(--space-5) var(--space-4);
}
.ot-authpage__mark{width:44px;height:44px;margin-bottom:var(--space-4)}
.ot-authcard{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  padding:var(--space-7);width:100%;max-width:420px;
}
.ot-authcard h1{font-size:var(--text-xl);text-align:center;margin:0 0 var(--space-2)}
.ot-authcard--center{text-align:center}

/* ── App page scaffold (home, account): container + page head + error line ── */
.ot-page{max-width:var(--container-md);margin:var(--space-6) auto;padding:0 var(--space-4)}
.ot-page__head{margin-bottom:var(--space-5)}
.ot-page__head h1{font-size:var(--text-2xl);margin:0 0 var(--space-1)}
.ot-page__sub{font-family:var(--font-sans);color:var(--text-muted);font-size:var(--text-sm);margin:0}
.ot-page__error{font-family:var(--font-sans);color:var(--danger-700);font-size:var(--text-sm);
  text-align:center;margin-top:var(--space-4);display:none}