/* ═══════════════════════════════════════════════════════════════════════
   tidepage — application chrome
   Self-contained: design tokens (from the tidepage design system) + the
   host editor chrome (toolbar, floating selection toolbar, popovers,
   Ask bar, immersive mode, toasts). The rendered artifact lives in the
   webview and is styled by its own CSS, not this file.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300..600&family=Martian+Mono:wght@400..600&family=Schibsted+Grotesk:wght@400..700&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Slate: cool graphite neutral ramp */
  --slate-50:#F5F8F7; --slate-100:#EAF0EE; --slate-200:#DCE4E1; --slate-300:#C3CFCB;
  --slate-400:#97A6A2; --slate-500:#66736F; --slate-600:#4A5754; --slate-700:#313D3A;
  --slate-800:#1D2725; --slate-900:#0F1614; --slate-950:#080D0C; --white:#FFFFFF;

  /* Tide: brand accent ramp (teal-green, not AI-blue) */
  --tide-50:#E4F6F2; --tide-100:#C5ECE6; --tide-200:#93DDD2; --tide-300:#4FCBBC;
  --tide-400:#1FB6A6; --tide-500:#0FA697; --tide-600:#0B8B7E; --tide-700:#097066;
  --tide-800:#06605A; --tide-900:#053F3B; --tide-bright:#2FD6C0;

  /* Semantic hues */
  --green-100:#D8F2E1; --green-500:#1F9D5C; --green-700:#137043;
  --amber-100:#FBE8C8; --amber-500:#D98A0B; --amber-700:#935C05;
  --red-100:#FBDFDA;   --red-500:#E0432E;   --red-700:#AE2B1B;
  --blue-100:#D7E6FA;  --blue-500:#2C72C9;  --blue-700:#1C4E94;

  /* Surfaces / text / borders (light) */
  --surface-page:var(--slate-100); --surface-card:var(--white); --surface-raised:var(--white);
  --surface-sunken:var(--slate-200); --surface-inset:var(--slate-50);
  --surface-hover:var(--slate-100); --surface-active:var(--slate-200);
  --text-primary:var(--slate-900); --text-secondary:var(--slate-600); --text-muted:var(--slate-500);
  --text-faint:var(--slate-400); --text-on-accent:#04201D; --text-link:var(--tide-700);
  --border-subtle:var(--slate-200); --border-default:var(--slate-300); --border-strong:var(--slate-400);

  /* Accent */
  --accent:var(--tide-500); --accent-hover:var(--tide-600); --accent-pressed:var(--tide-700);
  --accent-subtle:var(--tide-50); --accent-border:var(--tide-200); --accent-text:var(--tide-700);

  /* Highlight + status */
  --highlight-bg:var(--tide-50); --highlight-fg:var(--tide-700); --highlight-border:var(--tide-200);
  --success-bg:var(--green-100); --success-fg:var(--green-700); --success:var(--green-500);
  --warning-bg:var(--amber-100); --warning-fg:var(--amber-700); --warning:var(--amber-500);
  --danger-bg:var(--red-100);    --danger-fg:var(--red-700);    --danger:var(--red-500);
  --info-bg:var(--blue-100);     --info-fg:var(--blue-700);     --info:var(--blue-500);
  --focus-ring:color-mix(in srgb, var(--tide-500) 45%, transparent);
  --scrim:color-mix(in srgb, var(--slate-950) 48%, transparent);

  /* Type */
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-sans:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:16px;
  --text-lg:18px; --text-xl:22px; --text-2xl:28px;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --tracking-tight:-0.02em; --tracking-snug:-0.015em; --tracking-caps:0.05em;
  --wordmark-weight:300; --wordmark-tracking:-0.01em;

  /* Spacing / radii / sizing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px;
  --radius-xs:3px; --radius-sm:4px; --radius-md:6px; --radius-lg:9px; --radius-xl:13px; --radius-full:999px;
  --control-sm:28px; --control-md:36px; --control-lg:44px;
  --toolbar-height:52px;

  /* Responsive frame (design-package/tokens/breakpoints.css) — three tiers:
     desktop ≥1024px, tablet 768–1023px, phone <768px. A media query can't
     read a custom property, so the queries below repeat these literals; this
     block is the written source of the numbers. */
  --bp-tablet:768px; --bp-desktop:1024px;
  --drawer-width:320px; --appbar-height:52px; --tabbar-height:56px; --editor-bar:48px;
  --touch-row:56px; --sheet-row:52px; --sheet-radius:16px;
  /* 16px is the size below which a phone browser zooms into a focused field. */
  --field-touch:16px;
  --safe-top:env(safe-area-inset-top, 0px); --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px); --safe-left:env(safe-area-inset-left, 0px);

  /* Elevation */
  --shadow-xs:0 1px 1px color-mix(in srgb, var(--slate-950) 6%, transparent);
  --shadow-sm:0 1px 2px color-mix(in srgb, var(--slate-950) 8%, transparent), 0 1px 3px color-mix(in srgb, var(--slate-950) 6%, transparent);
  --shadow-md:0 2px 4px color-mix(in srgb, var(--slate-950) 7%, transparent), 0 6px 16px color-mix(in srgb, var(--slate-950) 10%, transparent);
  --shadow-pop:0 2px 6px color-mix(in srgb, var(--slate-950) 9%, transparent), 0 12px 32px color-mix(in srgb, var(--slate-950) 18%, transparent);
  --shadow-hairline:inset 0 0 0 1px color-mix(in srgb, var(--slate-950) 5%, transparent);
  --shadow-glow:0 4px 14px color-mix(in srgb, var(--tide-500) 30%, transparent), 0 1px 4px color-mix(in srgb, var(--tide-500) 22%, transparent);
  --ring:0 0 0 3px var(--focus-ring);

  /* Motion */
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:340ms;
  --ease-standard:cubic-bezier(0.2,0.6,0.2,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
  --transition-colors:color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

[data-theme="dark"] {
  --surface-page:var(--slate-950); --surface-card:var(--slate-900); --surface-raised:#18211F;
  --surface-sunken:#060A09; --surface-inset:#101715; --surface-hover:#18211F; --surface-active:#202B28;
  --text-primary:var(--slate-50); --text-secondary:var(--slate-300); --text-muted:var(--slate-400);
  --text-faint:var(--slate-600); --text-on-accent:#04201D; --text-link:var(--tide-300);
  --border-subtle:#202B28; --border-default:#2E3A37; --border-strong:#43504C;
  --accent:var(--tide-500); --accent-hover:var(--tide-400); --accent-pressed:var(--tide-300);
  --accent-subtle:color-mix(in srgb, var(--tide-500) 20%, transparent);
  --accent-border:color-mix(in srgb, var(--tide-400) 40%, transparent); --accent-text:var(--tide-300);
  --highlight-bg:color-mix(in srgb, var(--tide-500) 22%, transparent); --highlight-fg:var(--tide-300);
  --highlight-border:color-mix(in srgb, var(--tide-400) 50%, transparent);
  --success-bg:color-mix(in srgb, var(--green-500) 20%, transparent); --success-fg:#6FD79C;
  --warning-bg:color-mix(in srgb, var(--amber-500) 22%, transparent); --warning-fg:#E6B65C;
  --danger-bg:color-mix(in srgb, var(--red-500) 22%, transparent); --danger-fg:#ED8A79;
  --info-bg:color-mix(in srgb, var(--blue-500) 24%, transparent); --info-fg:#8FB8EC;
  --focus-ring:color-mix(in srgb, var(--tide-400) 55%, transparent);
  --scrim:color-mix(in srgb, #000 62%, transparent);
  --shadow-md:0 2px 6px color-mix(in srgb,#000 40%,transparent), 0 8px 20px color-mix(in srgb,#000 45%,transparent);
  --shadow-pop:0 4px 10px color-mix(in srgb,#000 50%,transparent), 0 16px 40px color-mix(in srgb,#000 65%,transparent);
  --shadow-hairline:inset 0 0 0 1px color-mix(in srgb,#fff 6%,transparent);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── Brand mark ─────────────────────────────────────────────────────── */
/* The horizon mark's ink strokes are currentColor; the live middle wave is
   the tide accent (brighter on dark). */
.tp-tide { stroke: var(--accent); }
[data-theme="dark"] .tp-tide { stroke: var(--tide-bright); }

/* ── Signature motion: save-state + waiting wave ────────────────────────
   The two (and only) functional animations in the product (BRAND_BRIEF §6).
   A standing wave whose amplitude swings through zero — crests oscillate up
   and down through the line — while work is unresolved (unsaved / waiting),
   and a flat solid line once it's safe (saved). Reduced-motion → static. */
.tp-wave { display: inline-flex; align-items: center; color: var(--accent); }
[data-theme="dark"] .tp-wave { color: var(--tide-bright); }
.tp-wave svg { display: block; overflow: visible; }
.tp-wave path, .tp-wave line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tp-wave--anim path { transform-box: fill-box; transform-origin: 50% 50%; animation: tp-amp 1.5s var(--ease-inout, ease-in-out) infinite; }
@keyframes tp-amp { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-1); } }
@media (prefers-reduced-motion: reduce) { .tp-wave--anim path { animation: none; } }
.tp-save { margin-left: var(--space-2); }

/* ── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--surface-card);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* ── App shell ──────────────────────────────────────────────────────── */
.app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--surface-card); overflow: hidden; }

/* ── Toolbar ────────────────────────────────────────────────────────── */
.bar {
  flex: none; display: flex; align-items: center; gap: var(--space-2);
  height: var(--toolbar-height); padding: 0 var(--space-3);
  background: color-mix(in srgb, var(--surface-card) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
/* The docked toolbar is the window's drag region (frameless window), and a
   stacking context above the webview so its tooltips/menus aren't painted under
   the document. */
.app > .bar { -webkit-app-region: drag; position: relative; z-index: 50; }
.app > .bar button, .app > .bar input, .app > .bar .seg, .app > .bar .menu, .app > .bar a { -webkit-app-region: no-drag; }
/* macOS keeps native traffic lights at top-left — inset the brand past them. */
.app[data-platform="mac"] > .bar { padding-left: 80px; }

/* Own window controls (Windows/Linux), flush into the top-right corner. */
.winctl { display: flex; align-self: stretch; margin-left: var(--space-1); margin-right: calc(-1 * var(--space-3)); -webkit-app-region: no-drag; }
.winctl__btn { width: 46px; height: var(--toolbar-height); border: none; background: transparent; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-colors); }
.winctl__btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.winctl__btn--close:hover { background: var(--danger); color: #fff; }
.winctl__btn svg { width: 15px; height: 15px; }
/* The bottom action bar is phone-tier chrome (M3). It ships in the markup on
   every tier so the renderer never has to build a DOM that depends on width —
   this is the line that keeps it off the desktop. */
.bar--actions { display: none; }
.bar__group { display: flex; align-items: center; gap: var(--space-1); }
.bar__spacer { flex: 1; }
.bar__divider { width: 1px; align-self: stretch; margin: 8px 4px; background: var(--border-default); }

.brand { display: inline-flex; align-items: center; gap: var(--space-2); padding-left: var(--space-1); }
.mark { width: 24px; height: 24px; flex: none; border-radius: 7px; display: inline-flex; }
.mark svg { width: 100%; height: 100%; display: block; }
.doc-title {
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text-primary);
  max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-left: var(--space-2);
}
/* Click-to-rename affordance (web): a subtle hover well, then a real input.
   Small positive margins on both sides keep the name clear of the brand mark
   and the save badge without the well overlapping either. */
.doc-title--editable { cursor: text; padding: 2px var(--space-2); margin: -2px var(--space-1); border-radius: var(--radius-md); transition: var(--transition-colors); }
.doc-title--editable:hover { background: var(--surface-hover); }
.doc-title--input {
  max-width: 32ch; min-width: 12ch; box-sizing: content-box;
  background: var(--surface-card); border: 1px solid var(--accent-border);
  border-radius: var(--radius-md); padding: 2px var(--space-2); margin: -2px var(--space-1);
  outline: none; box-shadow: var(--ring);
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  --_bg: var(--accent); --_fg: var(--text-on-accent); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-md); padding: 0 var(--space-4);
  font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap;
  border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg);
  border-radius: var(--radius-md); cursor: pointer; user-select: none;
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(0.5px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 16px; height: 16px; }
.btn--primary:hover { --_bg: var(--accent-hover); }
.btn--primary:active { --_bg: var(--accent-pressed); }
.btn--secondary { --_bg: var(--surface-card); --_fg: var(--text-primary); --_bd: var(--border-default); }
.btn--secondary:hover { --_bg: var(--surface-hover); --_bd: var(--border-strong); }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-md); height: var(--control-md);
  background: transparent; color: var(--text-secondary);
  border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; padding: 0;
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-standard);
}
.iconbtn:hover { background: var(--surface-hover); color: var(--text-primary); }
.iconbtn:active { background: var(--surface-active); transform: translateY(0.5px); }
.iconbtn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn--solid { background: var(--accent); color: var(--text-on-accent); }
.iconbtn--solid:hover { background: var(--accent-hover); color: var(--text-on-accent); }
.iconbtn--active { background: var(--accent-subtle); color: var(--accent-text); }

/* ── Segmented control (Edit / Preview) ─────────────────────────────── */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--surface-sunken); border-radius: var(--radius-md); }
.seg__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 28px; padding: 0 var(--space-3); border: none; background: transparent;
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted);
  border-radius: calc(var(--radius-md) - 3px); cursor: pointer; white-space: nowrap;
  transition: var(--transition-colors);
}
.seg__btn:hover { color: var(--text-primary); }
.seg__btn svg { width: 15px; height: 15px; }
/* The active segment must read clearly against the sunken track in *both*
   themes. In dark mode the card surface is nearly the track colour and the
   light-theme shadow vanishes on near-black, so lift it onto the raised
   surface and add a hairline edge to define it. (#58) */
.seg__btn--active {
  background: var(--surface-raised); color: var(--text-primary);
  font-weight: var(--weight-semibold); box-shadow: var(--shadow-sm), var(--shadow-hairline);
}

/* ── Badge (save state) ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1;
  padding: 4px 8px; border-radius: var(--radius-full); white-space: nowrap;
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--neutral { background: var(--surface-sunken); color: var(--text-secondary); }
.badge--warning { background: var(--warning-bg); color: var(--warning-fg); }
.badge--success { background: var(--success-bg); color: var(--success-fg); }

/* ── Avatar ─────────────────────────────────────────────────────────── */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--tide-100); color: var(--tide-700);
  font-size: 11px; font-weight: var(--weight-semibold); user-select: none; box-shadow: var(--shadow-hairline);
}
[data-theme="dark"] .avatar { background: color-mix(in srgb, var(--tide-500) 30%, transparent); color: var(--tide-100); }

/* ── Menu (overflow) ────────────────────────────────────────────────── */
.menu { position: relative; display: inline-flex; }
.menu__pop {
  position: absolute; z-index: 80; min-width: 210px; top: calc(100% + 6px); right: 0;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: var(--space-1); display: flex; flex-direction: column; gap: 1px;
  animation: menu-in var(--dur-fast) var(--ease-out); transform-origin: top right;
}
/* Rendered at the app level so it floats above the webview (top/right set inline). */
.menu__pop--fixed { position: fixed; z-index: 90; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
.menu__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  border: none; background: transparent; cursor: pointer; text-align: left;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--text-primary); font-family: inherit; transition: var(--transition-colors);
}
.menu__item:hover { background: var(--surface-hover); }
.menu__item svg { width: 16px; height: 16px; color: var(--text-secondary); flex: none; }
.menu__item--danger, .menu__item--danger svg { color: var(--danger-fg); }
.menu__label { flex: 1; }
.menu__shortcut { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.menu__divider { height: 1px; background: var(--border-subtle); margin: var(--space-1) 0; }
.menu__section {
  font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted);
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.menu__item--on { color: var(--accent-text); }
.menu__item--on .menu__label::after { content: " ✓"; color: var(--accent-text); }

/* ── Document area (full-bleed webview) ─────────────────────────────── */
.doc { flex: 1; min-height: 0; position: relative; background: var(--surface-card); }
.doc webview, .doc #artifact { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Notice banner (e.g. an unsupported/script-rendered document) */
.banner {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--info-bg); color: var(--info-fg);
  border-bottom: 1px solid color-mix(in srgb, var(--info-fg) 25%, transparent);
  font-size: var(--text-sm); line-height: 1.4;
  animation: toast-in var(--dur-base) var(--ease-out);
}
.banner__icon { display: inline-flex; flex: none; }
.banner__msg { flex: 1; }
.banner__action {
  flex: none; padding: 5px 12px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--radius-sm); background: var(--surface-card); color: var(--accent-text);
  font-size: var(--text-xs); font-weight: 600; cursor: pointer; transition: var(--transition-colors);
}
.banner__action:hover { background: var(--accent-subtle); }
.banner__close { border: none; background: transparent; color: inherit; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); display: inline-flex; }
.banner__close:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

/* Empty state when no file is open */
.empty-state {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); color: var(--text-muted); text-align: center; padding: var(--space-6);
}
.empty-state .mark { width: 56px; height: 56px; }
.empty-state h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--text-primary); letter-spacing: -0.02em; }
.empty-state p { margin: 0; font-size: var(--text-sm); max-width: 42ch; line-height: 1.5; }
.empty-state .eyebrow { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent-text); }

/* ── Floating selection toolbar (replaces the side panel) ───────────── */
.seltools {
  position: fixed; z-index: 80; display: flex; align-items: center; gap: 2px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 4px;
  animation: seltools-pop var(--dur-fast) var(--ease-out);
}
@keyframes seltools-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.seltools__kind { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 0 6px; white-space: nowrap; }
.seltools__div { width: 1px; align-self: stretch; background: var(--border-default); margin: 2px; }
.tool {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px;
  border: none; background: transparent; color: var(--text-secondary); cursor: pointer;
  border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; transition: var(--transition-colors);
}
.tool:hover { background: var(--surface-hover); color: var(--text-primary); }
.tool--on { background: var(--accent-subtle); color: var(--accent-text); }
.tool--accent { color: var(--accent-text); }
.tool--accent:hover { background: var(--accent-subtle); }
.tool--danger:hover { background: var(--danger-bg); color: var(--danger-fg); }
.tool svg { width: 16px; height: 16px; }
.tool__fmt { width: 30px; padding: 0; justify-content: center; font-size: var(--text-md); }

/* ── Popovers (text / font / colour / style) ────────────────────────── */
.pop {
  position: fixed; z-index: 85; min-width: 200px; max-width: 280px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: var(--space-3);
  animation: menu-in var(--dur-fast) var(--ease-out);
}
.pop__title { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); margin: 0 0 var(--space-2); }
.pop__title:not(:first-child) { margin-top: var(--space-3); }
.pop__hint { font-size: var(--text-2xs); color: var(--text-faint); margin-top: var(--space-2); line-height: 1.4; }
.pop__input { width: 100%; height: 32px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-sm); padding: 0 var(--space-2); margin-bottom: var(--space-2); }
.pop__input:focus-visible { outline: none; box-shadow: var(--ring); }
.pop__btn { width: 100%; justify-content: center; margin-bottom: var(--space-2); }
.pop__row { display: flex; gap: var(--space-2); }

/* ── Deck filmstrip (§8.4): manage slides of a <deck-stage> deck ─────── */
.filmstrip {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 70; display: flex; align-items: center; gap: var(--space-2);
  max-width: min(90vw, 900px); overflow-x: auto; padding: var(--space-2);
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
}
.filmchip {
  position: relative; display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: 34px; padding: 0 10px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--surface-card); cursor: pointer;
  color: var(--text-secondary); font-size: var(--text-sm); transition: var(--transition-colors);
}
.filmchip:hover { background: var(--surface-hover); }
.filmchip--on { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-text); }
.filmchip--drop { box-shadow: -2px 0 0 0 var(--accent); }
.filmchip__n { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-faint); }
.filmchip__label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filmchip__act { display: none; width: 22px; height: 22px; border: none; background: transparent; border-radius: var(--radius-xs); color: var(--text-muted); cursor: pointer; }
.filmchip:hover .filmchip__act { display: inline-flex; align-items: center; justify-content: center; }
.filmchip__act:hover { background: var(--surface-active); color: var(--text-primary); }
.filmchip__act--danger:hover { background: var(--danger-bg); color: var(--danger-fg); }
.filmstrip__add { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: transparent; color: var(--accent-text); cursor: pointer; }
.filmstrip__add:hover { background: var(--accent-subtle); }
.pop__hint kbd { font-family: var(--font-mono); background: var(--surface-sunken); border-radius: var(--radius-xs); padding: 0 4px; color: var(--text-secondary); }

/* ── Share dialog (#222) ──────────────────────────────────────────────────
   A centred modal: who has standing access, what the link admits, and the
   special-purpose links under Advanced. Follows docs/mockups/share-dialog.html.
   One control height (--share-ctl) across every row, so selects, inputs and
   buttons share a baseline instead of stair-stepping. */
.share-scrim { position: fixed; inset: 0; z-index: 84; background: var(--scrim); animation: menu-in var(--dur-fast) var(--ease-out); }
.share-dlg {
  --share-ctl: 34px;
  position: fixed; z-index: 85; left: 50%; top: 62px; transform: translateX(-50%);
  display: flex; flex-direction: column;
  /* dvh: on a phone the browser's own toolbars eat into 100vh, which would
     push the dialog's footer buttons under them. */
  width: 566px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 96px);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); overflow: hidden;
  animation: menu-in var(--dur-fast) var(--ease-out);
}
.share-dlg__head { display: flex; align-items: center; gap: var(--space-2); padding: 15px 18px 13px; flex: none; }
.share-dlg__title { flex: 1; min-width: 0; margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-dlg__title span { color: var(--text-muted); font-weight: 400; }
.share-dlg__content { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.share-sec { padding: 4px 18px 14px; }
.share-label { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-faint); margin: 0 0 4px; }
.share-empty { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; padding: 2px 0; }

/* invite row */
.share-invite { display: flex; align-items: center; gap: var(--space-2); padding: 0 18px 12px; flex: none; }
.share-invite__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); height: var(--share-ctl); padding: 0 11px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-inset); }
/* The wrapper carries the focus ring, so the inner input must not draw its own —
   the global :focus-visible rule uses box-shadow, which `outline: 0` can't
   suppress, and two rings nested one inside the other read as a double outline. */
.share-invite__field:focus-within { box-shadow: var(--ring); }
.share-invite__input:focus-visible { box-shadow: none; }
.share-invite__ic { display: inline-flex; color: var(--text-muted); flex: none; }
.share-invite__input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary); }
.share-invite__input::placeholder { color: var(--text-faint); }
.share-invite__send { flex: none; height: var(--share-ctl); padding: 0 var(--space-3); }

/* The role control — borderless until hovered, like the mockup's rolebtn. A
   button + styled menu, not a <select>: a native popup can't carry the one line
   of consequence each rung needs, and can't be themed. */
.share-role {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 var(--space-1) 0 var(--space-2);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--text-secondary);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 550;
  cursor: pointer; transition: var(--transition-colors); white-space: nowrap;
}
.share-role:hover, .share-role.is-open { background: var(--surface-raised); border-color: var(--border-default); color: var(--text-primary); }
.share-role:focus-visible { outline: none; box-shadow: var(--ring); }
.share-role__chev { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; color: var(--text-faint); flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.share-role.is-open .share-role__chev { transform: rotate(180deg); }
/* A fixed role: same box, so the role column stays a column — no affordance. */
.share-role--static { cursor: default; color: var(--text-muted); }
.share-role--static:hover { background: transparent; border-color: transparent; color: var(--text-muted); }
.share-role--static .share-role__chev { visibility: hidden; }

/* The picker menu — the app's menu component, with a consequence per option. */
.share-menu { min-width: 268px; max-width: 320px; }
.share-menu__item { align-items: flex-start; gap: var(--space-2); }
.share-menu__item.is-blocked { opacity: 1; cursor: not-allowed; }
.share-menu__item.is-blocked .share-menu__title { color: var(--text-faint); }
.share-menu__main { min-width: 0; }
.share-menu__title { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.share-menu__sub { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 2px; line-height: 1.45; white-space: normal; }
.share-menu__warn { display: inline-flex; color: var(--warning-fg); }
.share-menu__item--on .share-menu__title { color: var(--accent-text); }
.share-menu__item--on .share-menu__title::after { content: "✓"; margin-left: auto; padding-left: var(--space-2); color: var(--accent-text); }
.share-menu__item.menu__item--danger .share-menu__title { color: var(--danger-fg); }

/* one person (or domain / workspace) with standing access */
.share-row { display: flex; align-items: center; gap: 11px; padding: 7px 8px 7px 10px; margin: 0 -8px 0 -10px; border-radius: var(--radius-md); }
.share-row:hover { background: var(--surface-hover); }
.share-row__av { flex: none; }
/* A group, or someone with no tidepage account yet: muted rather than branded,
   so the list shows at a glance who is actually signed up. Semantic tokens, not
   raw palette steps — the mockup is light-only, the app also runs dark. */
.share-row__av.avatar--org,
.share-row__av--guest { background: var(--surface-sunken); color: var(--text-muted); box-shadow: var(--shadow-hairline); }
.share-row__main { flex: 1; min-width: 0; }
.share-row__name { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: 550; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-row__name em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.share-row__meta { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-via { display: flex; align-items: center; gap: 6px; margin: -2px 0 4px 49px; font-size: var(--text-2xs); color: var(--text-faint); }
.share-via__ic { display: inline-flex; }

/* general access — what holding the link alone gets you */
.share-gen { display: flex; align-items: center; gap: 11px; padding: 8px 8px 8px 10px; margin: 0 -8px 0 -10px; border-radius: var(--radius-md); }
.share-gen__tile { flex: none; width: 28px; height: 28px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-muted); box-shadow: var(--shadow-hairline); }
.share-gen__tile--warn { background: var(--warning-bg); color: var(--warning-fg); }
.share-gen__main { flex: 1; min-width: 0; }
.share-gen__title { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: 550; color: var(--text-primary); }
.share-gen__warn { display: inline-flex; color: var(--warning-fg); }
.share-gen__sub { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 1px; line-height: 1.45; }
.share-note { font-size: var(--text-2xs); color: var(--text-muted); margin: 0; padding: 6px 10px 0; line-height: 1.45; }

/* footer: copy the primary link · Advanced */
.share-dlg__foot { display: flex; align-items: center; gap: var(--space-2); padding: 11px 18px; margin-top: auto; border-top: 1px solid var(--border-subtle); background: var(--surface-inset); flex: none; }
.share-dlg__foot .btn { height: var(--share-ctl); padding: 0 var(--space-3); gap: 6px; }
.share-adv__toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: var(--share-ctl); padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 550; cursor: pointer; transition: var(--transition-colors); }
.share-adv__toggle:hover { background: var(--surface-raised); border-color: var(--border-default); color: var(--text-primary); }
.share-adv__chev { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; color: var(--text-faint); transition: transform var(--dur-fast) var(--ease-out); }
.share-adv__toggle.is-open .share-adv__chev { transform: rotate(180deg); }

/* Advanced — the per-URL properties, collapsed by default */
.share-adv { padding: 12px 18px 14px; border-top: 1px solid var(--border-subtle); background: var(--surface-inset); flex: none; }
.share-adv.hide { display: none; }
.share-slink { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-subtle); }
.share-slink:first-of-type { border-top: 0; }
.share-slink__ic { display: inline-flex; color: var(--text-muted); flex: none; }
.share-slink__main { flex: 1; min-width: 0; }
.share-slink__title { font-size: var(--text-xs); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-slink__meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-slink__revoke { flex: none; }
.btn--sm { height: 28px; padding: 0 var(--space-2); font-size: var(--text-xs); }
.iconbtn--danger:hover { background: var(--danger-bg); color: var(--danger-fg); }

/* Create a special-purpose link. Version and expiry are the reasons one exists,
   so they're labelled fields at the top rather than an afterthought. */
.share-create { border-top: 1px solid var(--border-subtle); margin-top: 4px; padding-top: 11px; }
.share-create__title { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); margin: 0 0 var(--space-2); }
.share-form { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px var(--space-3); }
.share-form__label { font-size: var(--text-2xs); color: var(--text-muted); }
.share-form__cell { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Bordered here (unlike the borderless role picker) — these are form fields, and
   a shared min-width keeps the three of them a column rather than three widths. */
.share-form__pick { min-width: 224px; max-width: 100%; height: 30px; justify-content: space-between; border-color: var(--border-default); background: var(--surface-card); color: var(--text-primary); }
.share-form__pick .share-role__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-form__hint { font-size: var(--text-2xs); color: var(--text-faint); }
.share-create__emails { width: 100%; height: 30px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-sm); padding: 0 11px; }
.share-create__emails::placeholder { color: var(--text-faint); }
.share-create__emails:focus-visible { outline: none; box-shadow: var(--ring); }
.share-create__emails.hide { display: none; }
.share-create__go { margin-top: var(--space-3); gap: 6px; }

.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch { width: 24px; height: 24px; border-radius: var(--radius-full); border: 2px solid transparent; cursor: pointer; box-shadow: var(--shadow-hairline); padding: 0; }
.swatch--on { border-color: var(--text-primary); }

.optlist { display: flex; flex-direction: column; gap: 2px; }
.opt {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left;
  padding: var(--space-2) var(--space-3); border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-primary); transition: var(--transition-colors);
}
.opt:hover { background: var(--surface-hover); }
.opt--on { background: var(--accent-subtle); color: var(--accent-text); }
.opt--reset { color: var(--danger-fg); }
.opt--reset:hover { background: var(--danger-bg); }
.seg-row { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.seg-row .opt { width: auto; flex: 1 0 auto; justify-content: center; padding: 6px 10px; border: 1px solid var(--border-subtle); }
.seg-row .opt--on { border-color: var(--accent-border); }

/* Style picker option: a WYSIWYG preview of the selected text in the candidate
   style (issue #54). No raw class name — pure "what my text will look like". */
.styleopt { position: relative; display: block; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 4px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-card); cursor: pointer; overflow: hidden; transition: var(--transition-colors); }
.styleopt:last-of-type { margin-bottom: 0; }
.styleopt:hover { border-color: var(--accent-border); background: var(--surface-hover); }
.styleopt--on { border-color: var(--accent-border); background: var(--accent-subtle); }
.styleopt__text { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.styleopt--on .styleopt__text { padding-right: 16px; }
.styleopt__check { position: absolute; top: 7px; right: 9px; color: var(--accent-text); font-size: var(--text-xs); }
/* "More options… / ← Back to looks" — the escape hatch to atomic class toggles. */
.styleopt-more { display: block; width: 100%; margin-top: 4px; padding: 6px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: var(--text-xs); text-align: center; cursor: pointer; transition: var(--transition-colors); }
.styleopt-more:hover { background: var(--surface-hover); color: var(--text-primary); }

/* ── Ask bar (preview; bottom-right corner, collapses to a pill) ──────────
   Anchored in the corner so it clears the bottom-center slide controls of
   Claude Design presentations. Collapses to a compact pill and grows leftward
   out of the corner when approached. */
.ask {
  position: fixed; bottom: 24px; right: 24px; z-index: 60;
  width: min(480px, calc(100% - 48px)); max-width: calc(100% - 48px);
  display: flex; align-items: center; gap: var(--space-2); padding: 7px 7px 7px var(--space-4);
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full); box-shadow: var(--shadow-pop); overflow: hidden;
  transition: width var(--dur-base) var(--ease-out), box-shadow var(--dur-fast) var(--ease-standard);
}
.ask--collapsed { width: 142px; padding: 7px var(--space-4); cursor: pointer; box-shadow: var(--shadow-md); }
.ask__spark { width: 18px; height: 18px; color: var(--accent); flex: none; display: inline-flex; }
.ask__label { display: none; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.ask--collapsed .ask__label { display: inline; }
.ask--collapsed .ask__input, .ask--collapsed .ask__badge, .ask--collapsed .ask__send { display: none; }
.ask__input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-primary); }
.ask__input::placeholder { color: var(--text-muted); }
.ask__send { width: 34px; height: 34px; flex: none; border: none; border-radius: var(--radius-full); background: var(--accent); color: var(--text-on-accent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-colors); }
.ask__send:hover { background: var(--accent-hover); }
.ask__send svg { width: 18px; height: 18px; }
.ask__badge { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-faint); flex: none; padding-right: var(--space-1); }

/* Font-size stepper (popover) */
.stepper { display: flex; align-items: center; gap: var(--space-2); }
.stepper__btn { width: 30px; height: 30px; flex: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-secondary); cursor: pointer; font-size: 16px; line-height: 1; transition: var(--transition-colors); }
.stepper__btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.stepper__input { flex: 1; min-width: 0; height: 30px; text-align: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-primary); font-size: var(--text-sm); font-family: var(--font-mono); }
.stepper__input:focus-visible { outline: none; box-shadow: var(--ring); }

/* ── Immersive chrome ───────────────────────────────────────────────── */
.app[data-chrome="immersive"] > .bar { display: none; }
/* Floating toolbar + reveal handles belong to immersive mode only. */
.app:not([data-chrome="immersive"]) .float,
.app:not([data-chrome="immersive"]) .handle { display: none; }
.float { position: fixed; left: 50%; z-index: 75; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.float--top { top: 14px; transform: translate(-50%, -160%); opacity: 0; pointer-events: none; }
.float--top.is-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.float .bar { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); height: auto; padding: var(--space-1); background: var(--surface-raised); }
.handle { position: fixed; left: 50%; transform: translateX(-50%); z-index: 74; border: none; cursor: pointer; background: var(--surface-raised); box-shadow: var(--shadow-md); color: var(--text-muted); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-standard); }
/* When the toolbar slides in, the grip fades so the two read as one morph. */
.handle.is-hidden { opacity: 0; pointer-events: none; }
.handle--top { top: 0; width: 96px; height: 22px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); display: grid; place-items: center; }
.handle--top .handle__grip { width: 34px; height: 4px; border-radius: var(--radius-full); background: var(--border-strong); transition: var(--transition-colors); }
.handle--top:hover .handle__grip { background: var(--accent); }

/* ── Review drawer (comments / change requests) ─────────────────────── */
.iconbtn--badged { position: relative; }
.count-badge {
  position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: var(--radius-full); background: var(--accent);
  color: var(--text-on-accent); font-size: 9px; font-weight: 700; line-height: 15px;
  text-align: center; box-shadow: 0 0 0 2px var(--surface-card);
}
.review {
  position: fixed; top: var(--toolbar-height); right: 0; bottom: 0; width: 324px; z-index: 70;
  display: flex; flex-direction: column; background: var(--surface-card);
  border-left: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg);
  animation: review-in var(--dur-base) var(--ease-out);
}
.app[data-chrome="immersive"] .review { top: 0; }
@keyframes review-in { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.review__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.review__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
.review__filter { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.review__tab { flex: 1; padding: 5px 6px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: var(--transition-colors); }
.review__tab:hover { background: var(--surface-hover); color: var(--text-primary); }
.review__tab--on { background: var(--accent-subtle); color: var(--accent-text); }
.review__list { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.review__empty { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; padding: var(--space-4) var(--space-2); text-align: center; }

.comment { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-3); background: var(--surface-card); box-shadow: var(--shadow-xs); transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.comment--resolved { opacity: 0.62; }
.comment--flash { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--accent-subtle); }
.comment__top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.comment__num { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-full); background: var(--accent); color: #fff; font-size: var(--text-2xs); font-weight: 700; }
.comment__num--off { background: var(--surface-sunken); color: var(--text-muted); }
.chip-assignee { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-2xs); font-weight: 600; }
.chip-assignee svg { width: 12px; height: 12px; }
.chip-assignee--claude { background: var(--accent-subtle); color: var(--accent-text); }
.chip-assignee--author { background: var(--surface-sunken); color: var(--text-secondary); }
.chip-orphan { margin-left: auto; font-size: var(--text-2xs); font-weight: 600; color: var(--warning-fg); background: var(--warning-bg); padding: 2px 8px; border-radius: var(--radius-full); }
.chip-dynamic { margin-left: auto; font-size: var(--text-2xs); font-weight: 600; color: var(--accent-text); background: var(--accent-subtle); padding: 2px 8px; border-radius: var(--radius-full); }
.comment__body { font-size: var(--text-sm); color: var(--text-primary); line-height: 1.45; }
.comment__quote { display: block; width: 100%; text-align: left; margin-top: var(--space-2); padding: 6px 8px; border: none; border-left: 2px solid var(--accent-border); background: var(--surface-inset); color: var(--text-secondary); font-size: var(--text-xs); border-radius: var(--radius-xs); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: var(--transition-colors); }
.comment__quote:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }
.comment__quote:disabled { cursor: default; opacity: 0.7; }
.comment__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.comment__action { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: var(--transition-colors); }
.comment__action:hover { background: var(--surface-hover); color: var(--text-primary); }
.comment__action--danger { margin-left: auto; }
.comment__action--danger:hover { background: var(--danger-bg); color: var(--danger-fg); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* Comment composer (popover) */
.composer__input { width: 100%; resize: vertical; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-sm); padding: var(--space-2); }
.composer__input:focus-visible { outline: none; box-shadow: var(--ring); }
.composer__add { width: 100%; margin-top: var(--space-3); }

/* ── HTML inspector ("view source") ─────────────────────────────────── */
.inspector {
  position: fixed; top: var(--toolbar-height); right: 0; bottom: 0; width: 384px; max-width: 92vw; z-index: 72;
  display: flex; flex-direction: column; background: var(--surface-card);
  border-left: 1px solid var(--border-subtle); box-shadow: var(--shadow-pop);
  animation: review-in var(--dur-base) var(--ease-out);
}
.app[data-chrome="immersive"] .inspector { top: 0; }
.inspector__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.inspector__title { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
.inspector__title svg { width: 16px; height: 16px; color: var(--text-muted); }
.inspector__tabs { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.inspector__tab { flex: 1; padding: 5px 6px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: var(--transition-colors); }
.inspector__tab:hover { background: var(--surface-hover); color: var(--text-primary); }
.inspector__tab--on { background: var(--accent-subtle); color: var(--accent-text); }
.inspector__body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }

/* Adjust tab — friendly controls */
.adjust { display: flex; flex-direction: column; gap: var(--space-4); }
.adjust__empty { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; padding: var(--space-5) var(--space-2); text-align: center; }
.adjust__group { display: flex; flex-direction: column; gap: var(--space-2); }
.adjust__gtitle { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); }
.adjust__row { display: flex; align-items: center; gap: var(--space-2); min-height: 30px; }
.adjust__row--block { flex-direction: column; align-items: stretch; gap: 6px; }
.adjust__rowhead { display: flex; align-items: center; gap: var(--space-2); }
.adjust__label { width: 62px; flex: none; font-size: var(--text-xs); color: var(--text-secondary); }
.adjust__slider { flex: 1; min-width: 0; accent-color: var(--accent); height: 4px; }
.adjust__num { width: 56px; flex: none; height: 28px; text-align: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); }
.adjust__num:focus-visible { outline: none; box-shadow: var(--ring); }
.adjust__unit { flex: none; height: 28px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-secondary); font-size: var(--text-xs); padding: 0 2px; }
.adjust__swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1; }
.adjust__cur { width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); flex: none; margin-right: 2px; }
.adjust__sw { width: 22px; height: 22px; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--border-default); cursor: pointer; }
.adjust__sw--custom { overflow: hidden; background: conic-gradient(red, magenta, blue, cyan, lime, yellow, red); }
.adjust__sw--none { position: relative; background: var(--surface-card); }
.adjust__sw--none::after { content: ""; position: absolute; inset: 1px; background: linear-gradient(to top right, transparent 44%, var(--danger) 45%, var(--danger) 55%, transparent 56%); }
.adjust__expand { align-self: flex-start; background: none; border: none; color: var(--accent-text); font-size: var(--text-2xs); cursor: pointer; padding: 0; }
.adjust__sides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.adjust__side { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.adjust__side span { font-size: var(--text-2xs); color: var(--text-faint); font-family: var(--font-mono); }
.adjust__side input { width: 100%; height: 26px; text-align: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-2xs); }
.adjust__side input:focus-visible { outline: none; box-shadow: var(--ring); }
.adjust__status { padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.inspector__empty { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.55; padding: var(--space-6) var(--space-2); text-align: center; }

.inspector__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; font-family: var(--font-mono); font-size: var(--text-2xs); }
.crumb { padding: 2px 6px; border-radius: var(--radius-xs); color: var(--text-muted); background: transparent; border: none; cursor: pointer; font: inherit; transition: var(--transition-colors); }
.crumb:hover { background: var(--surface-hover); color: var(--text-primary); }
.crumb--current { color: var(--accent-text); background: var(--accent-subtle); cursor: default; }
.crumb__sep { color: var(--text-faint); }

.code-field { border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-sunken); transition: var(--transition-colors); }
.code-field.is-focus { box-shadow: var(--ring); border-color: var(--accent-border); }
.code-field.is-error { border-color: color-mix(in srgb, var(--danger) 55%, transparent); box-shadow: 0 0 0 2px var(--danger-bg); }
.code-field__edit {
  margin: 0; padding: var(--space-3); min-height: 70px;
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.65; letter-spacing: 0; tab-size: 2;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  color: var(--text-secondary); caret-color: var(--accent); outline: none;
}
.code-field__edit::selection { background: var(--accent-subtle); }

.tok-punct { color: var(--text-faint); }
.tok-tag { color: var(--accent-text); font-weight: 600; }
.tok-attr { color: var(--info-fg); }
.tok-string, .tok-value { color: var(--success-fg); }

.inspector__status { min-height: 16px; font-size: var(--text-2xs); line-height: 1.4; }
.inspector__status--ok { color: var(--text-faint); }
.inspector__status--err { color: var(--danger-fg); }
.inspector__actions { display: flex; gap: var(--space-2); }
.inspector__actions .btn { flex: 1; justify-content: center; }
.inspector__hint { margin: 0; font-size: var(--text-2xs); color: var(--text-faint); line-height: 1.55; }
.inspector__hint code { font-family: var(--font-mono); background: var(--surface-sunken); border-radius: var(--radius-xs); padding: 0 4px; color: var(--text-secondary); }
.inspector__hint kbd { font-family: var(--font-mono); background: var(--surface-sunken); border-radius: var(--radius-xs); padding: 0 4px; color: var(--text-secondary); }

/* ── Toasts ─────────────────────────────────────────────────────────── */
.toast-layer { position: fixed; bottom: 20px; right: 20px; z-index: 95; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; }
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: var(--space-3) var(--space-4); min-width: 260px; max-width: 400px;
  animation: toast-in var(--dur-base) var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast__icon { width: 18px; height: 18px; flex: none; margin-top: 1px; display: inline-flex; }
.toast__icon svg { width: 18px; height: 18px; }
.toast--success .toast__icon { color: var(--success-fg); }
.toast--danger .toast__icon { color: var(--danger-fg); }
.toast--info .toast__icon { color: var(--info-fg); }
.toast--neutral .toast__icon { color: var(--text-secondary); }
.toast__body { flex: 1; font-size: var(--text-sm); color: var(--text-primary); line-height: 1.4; }

/* ── Tooltip (CSS-only, title-driven via data attr) ─────────────────── */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; translate: -50% 0;
  background: var(--slate-900); color: var(--slate-50); font-size: var(--text-xs); font-weight: 500;
  padding: 5px 8px; border-radius: var(--radius-sm); white-space: nowrap; box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); z-index: 90;
}
[data-theme="dark"] .tip::after { background: var(--slate-100); color: var(--slate-950); }
.tip:hover::after { opacity: 1; }
.tip--bottom::after { bottom: auto; top: calc(100% + 7px); }
/* Toolbar sits at the window's top edge — show its tooltips below the buttons. */
.bar .tip::after { bottom: auto; top: calc(100% + 7px); }

/* ── review view (web; spec §4.4) ─────────────────────────────────────── */
.rv-body { margin: 0; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; background: var(--surface-page); color: var(--text-primary); }
.rv-top { display: flex; align-items: center; gap: var(--space-3); height: var(--toolbar-height); padding: 0 var(--space-4); background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); flex: none; z-index: 5; }
.rv-back { border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-secondary); border-radius: var(--radius-md); padding: 6px 11px; font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.rv-back:hover { background: var(--surface-hover); color: var(--text-primary); }
.rv-title { font-weight: 600; font-size: var(--text-md); }
.rv-reviewing { display: inline-flex; align-items: center; gap: 7px; background: var(--warning-bg); color: var(--warning-fg); padding: 4px 11px; border-radius: var(--radius-full); font-weight: 600; font-size: var(--text-xs); }
.rv-reviewing::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.rv-top .rv-seg { margin-left: auto; }
.rv-seg { display: inline-flex; background: var(--surface-inset); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.rv-seg button { border: 0; background: transparent; color: var(--text-secondary); padding: 6px 12px; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.rv-seg button[aria-pressed="true"] { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-sm); }

.rv-stage { position: relative; flex: 1; overflow: hidden; }
.rv-framewrap { position: absolute; inset: 0 264px 0 0; background: var(--surface-inset); }
.rv-frame { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.rv-ba { position: absolute; inset: 0; }
.rv-ba__before, .rv-ba__after { position: absolute; inset: 0; }
.rv-ba__after { background: #fff; }
.rv-ba__divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--accent); z-index: 5; cursor: ew-resize; }
.rv-ba__divider::after { content: "⇆"; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 13px; box-shadow: var(--shadow-md); }
.rv-ba__tag { position: absolute; top: 12px; z-index: 6; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.6); padding: 3px 9px; border-radius: var(--radius-full); }
.rv-ba__tag--l { left: 12px; } .rv-ba__tag--r { right: 12px; }

.rv-rail { position: absolute; top: 0; right: 0; bottom: 0; width: 264px; background: var(--surface-card); border-left: 1px solid var(--border-subtle); padding: var(--space-4) var(--space-3); overflow: auto; }
.rv-rail h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); margin: 4px 4px var(--space-3); }
.rv-empty { color: var(--text-muted); font-size: var(--text-sm); padding: 0 4px; }
.rv-item { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 9px; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; padding: 9px 8px; border-radius: var(--radius-md); margin-bottom: 3px; color: var(--text-primary); cursor: pointer; }
.rv-item:hover { background: var(--surface-hover); }
.rv-item.is-sel { background: var(--surface-hover); border-color: var(--border-default); }
.rv-item.is-rejected { opacity: .6; }
.rv-item__txt { min-width: 0; display: flex; flex-direction: column; }
.rv-item__k { font-weight: 600; font-size: var(--text-sm); }
.rv-item__s { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-item__state { font-size: 10px; font-weight: 700; color: var(--danger-fg); text-transform: uppercase; }
.rv-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); }
.rv-item[data-kind="modified"] .rv-dot, .rv-card[data-kind="modified"] .rv-dot { background: #2563eb; }
.rv-item[data-kind="added"] .rv-dot, .rv-card[data-kind="added"] .rv-dot { background: #16a34a; }
.rv-item[data-kind="removed"] .rv-dot, .rv-card[data-kind="removed"] .rv-dot { background: #dc2626; }
.rv-item[data-kind="restyled"] .rv-dot, .rv-card[data-kind="restyled"] .rv-dot { background: #9333ea; }

.rv-card { position: absolute; z-index: 8; width: 300px; right: 300px; top: 90px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); display: none; overflow: hidden; }
.rv-card.show { display: block; }
.rv-card__head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border-subtle); }
.rv-card__k { font-weight: 700; font-size: var(--text-sm); }
.rv-card__step { margin-left: auto; font-size: var(--text-xs); color: var(--text-muted); }
.rv-card__body { padding: 12px 14px; font-size: var(--text-sm); color: var(--text-secondary); }
.rv-card__actions { display: flex; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--border-subtle); }
.rv-cbtn { flex: 1; border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-primary); padding: 7px 12px; border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.rv-cbtn--rej:hover, .rv-cbtn--rej.is-on { border-color: var(--danger); color: var(--danger-fg); background: var(--danger-bg); }
.rv-cbtn--acc.is-on { border-color: var(--success, #16a34a); }

.rv-bar { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); background: var(--surface-card); border-top: 1px solid var(--border-subtle); flex: none; }
.rv-count { font-weight: 650; font-size: var(--text-sm); }
.rv-progress { font-size: var(--text-xs); color: var(--text-muted); }
.rv-sep { width: 1px; height: 22px; background: var(--border-subtle); }
.rv-nav { display: flex; gap: 4px; }
.rv-nav button { width: 30px; height: 30px; border: 1px solid var(--border-default); background: var(--surface-card); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; }
.rv-nav button:hover { background: var(--surface-hover); }
.rv-bar .rv-btn { margin-left: 0; border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-primary); padding: 8px 14px; border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.rv-bar .rv-btn:first-of-type { margin-left: auto; }
.rv-btn--apply { background: var(--accent); border-color: var(--accent) !important; color: #fff; }
.rv-btn--apply:hover { filter: brightness(.96); }

/* ── version-history panel (hosted web) ───────────────────────────────────
   Owns its own row geometry. It used to borrow the share panel's classes, which
   meant a share redesign silently restyled version history. */
.ver-pop { width: 340px; }
.ver-pop__body { display: flex; flex-direction: column; gap: var(--space-2); }
.ver-empty { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; padding: 2px 0 var(--space-1); }
.ver-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head actions" "meta actions"; align-items: center; gap: 4px 8px; padding: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
.ver-row__head { grid-area: head; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ver-row__ic { display: inline-flex; color: var(--text-muted); flex: none; }
.ver-row__text { font-size: var(--text-xs); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ver-row__meta { grid-area: meta; font-size: var(--text-2xs); color: var(--text-muted); }
.ver-row__actions { grid-area: actions; display: flex; gap: 2px; }
.ver-row.is-cmp { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-md); }
.ver-badge { margin-left: 8px; font-size: var(--text-2xs); font-weight: 700; color: var(--text-muted); background: var(--surface-inset); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 1px 7px; text-transform: uppercase; letter-spacing: .03em; }
.ver-badge--head { color: var(--success-fg, #15803d); background: var(--success-bg, #e9f7ee); border-color: transparent; }

/* ══ The editor on a phone — mobile M3 (#235) ═══════════════════════════════
   The desktop bar puts eleven controls on one row. At 390px that row clips
   after undo/redo, and everything past it — Edit/Preview, review, versions,
   share — is simply unreachable; the audit that opened this work (concept §1)
   found exactly that. So the chrome splits in two: a 48px top bar and a bottom
   action bar in the thumb zone (`docs/mockups/mobile-editor.png`). The document
   between them stays full-bleed, which it already was.

   Everything here is phone-tier only; the desktop chrome above is untouched by
   construction rather than by care. The literal repeats `--bp-tablet` because a
   media query can't read a custom property. */
@media (max-width: 767px) {
  /* ── Top bar ─────────────────────────────────────────────────────────── */
  .app > .bar:not(.bar--actions) {
    height: calc(var(--editor-bar) + var(--safe-top)); padding: var(--safe-top) 6px 0 6px;
    gap: 2px; backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--surface-card);
  }
  .app > .bar:not(.bar--actions) .iconbtn {
    width: var(--control-lg); height: var(--control-lg); flex: none;
  }
  /* The title takes the middle and truncates; the save wave sits with it, so
     "is my work safe" is answered without opening anything. */
  .e-title {
    flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
    gap: var(--space-2);
  }
  .e-title .doc-title {
    margin: 0; max-width: none; min-width: 0; font-size: var(--text-base);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .e-title .doc-title--input { max-width: none; width: 100%; font-size: var(--field-touch); }

  /* ── Bottom action bar ───────────────────────────────────────────────── */
  .bar--actions {
    display: flex; height: auto; gap: var(--space-1);
    padding: var(--space-2) 10px calc(var(--safe-bottom) + var(--space-3));
    border-bottom: 0; border-top: 1px solid var(--border-subtle);
    background: var(--surface-card); backdrop-filter: none; -webkit-backdrop-filter: none;
    position: relative; z-index: 50;
  }
  .bar--actions .iconbtn { width: var(--control-lg); height: var(--control-lg); flex: none; }
  .bar--actions .seg { padding: 3px; }
  .bar--actions .seg__btn { height: 34px; padding: 0 14px; font-size: var(--text-sm); font-weight: 600; }

  /* ── Immersive: the grip is the tap that brings the chrome back ───────── */
  /* Both bars leave, rather than the top one leaving and the bottom one
     staying — half a chrome is not immersive, it's a bug that looks like one. */
  .app[data-chrome="immersive"] > .bar,
  .app[data-chrome="immersive"] > .bar--actions {
    display: flex; position: absolute; left: 0; right: 0;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .app[data-chrome="immersive"] > .bar:not(.bar--actions) { top: 0; bottom: auto; transform: translateY(-100%); }
  .app[data-chrome="immersive"] > .bar--actions { bottom: 0; top: auto; transform: translateY(100%); }
  .app[data-chrome="immersive"][data-reveal="on"] > .bar,
  .app[data-chrome="immersive"][data-reveal="on"] > .bar--actions { transform: none; }
  /* The floating copy of the toolbar is a desktop idea (it exists so the mouse
     has something to approach). The phone reveals the real bars in place. */
  .app .float { display: none; }
  /* …which makes the grip the only way back, so it has to be a real target. */
  .handle--top { height: var(--control-lg); width: 120px; align-items: center; }
  .handle--top.is-hidden { opacity: 1; pointer-events: auto; }

  /* ── Menus and panels dock to the bottom edge ─────────────────────────── */
  /* Same rule as the workspace (#234): a popup anchored next to its trigger is
     a mouse idea. These are the editor's own surfaces getting the same posture,
     including the pull-down (`sheet-drag.ts`) that comes with it. */
  .menu__scrim { position: fixed; inset: 0; z-index: 89; background: var(--scrim); }
  .menu__pop--sheet {
    position: fixed; z-index: 90; inset: auto 0 0 0; width: 100%; min-width: 0;
    max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 0 calc(var(--safe-bottom) + 22px);
    border: 0; border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    transform-origin: bottom center; touch-action: pan-y;
  }
  .menu__grab { display: block; width: 36px; height: 4px; margin: 8px auto 6px; border-radius: 2px; background: var(--border-default); }
  .menu__pop--sheet .menu__item {
    min-height: var(--sheet-row); padding: 6px 18px; gap: 14px;
    border-radius: 0; font-size: var(--text-base); font-weight: 500;
  }
  .menu__pop--sheet .menu__item svg { width: 20px; height: 20px; }

  /* Comments: the 324px right drawer becomes a sheet you can read with one
     hand. Half height, because the point of a comment is the thing it's
     attached to — a full-screen list hides what you are commenting on. */
  .review {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 62dvh;
    border-left: 0; border-top: 1px solid var(--border-subtle);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    padding-bottom: calc(var(--safe-bottom) + var(--space-2));
    animation: sheet-in var(--dur-base) var(--ease-out);
    touch-action: pan-y; overscroll-behavior: contain;
  }
  .app[data-chrome="immersive"] .review { top: auto; }
  .review::before {
    content: ""; display: block; flex: none; width: 36px; height: 4px;
    margin: 8px auto 2px; border-radius: 2px; background: var(--border-default);
  }
  .review__head { padding: var(--space-2) var(--space-4); }
  .review__head .iconbtn { width: var(--control-lg); height: var(--control-lg); }
  .review__tab { min-height: 38px; font-size: var(--text-sm); }
  .comment__action { min-height: var(--control-lg); padding: 0 var(--space-3); font-size: var(--text-sm); }
  @keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }

  /* Version history and the share dialog: same treatment, same reason. */
  .pop.ver-pop, .share-dlg {
    position: fixed; inset: auto 0 0 0; width: 100%; max-width: none;
    max-height: 80dvh; transform: none;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    padding-bottom: calc(var(--safe-bottom) + var(--space-3));
    animation: sheet-in var(--dur-base) var(--ease-out);
    touch-action: pan-y; overscroll-behavior: contain;
  }
  .share-dlg { top: auto; padding-bottom: 0; }
  .share-dlg__foot { padding-bottom: calc(var(--safe-bottom) + 11px); }
  .share-dlg__foot .btn, .ver-row__actions .iconbtn { min-height: var(--control-lg); }
  .ver-row { grid-template-columns: 1fr auto; padding: var(--space-3) var(--space-2); }

  /* The Ask pill would sit on top of the action bar otherwise. */
  .ask { bottom: calc(var(--safe-bottom) + 84px); right: var(--space-3); }

  /* Text fields: 16px or the browser zooms the page as they take focus (§10.4). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea, select, .pop__input, .composer__input, .doc-title--input {
    font-size: var(--field-touch);
  }

  /* ── The selection inspector (M4 / #236) ──────────────────────────────
     One slim row on the bottom edge, and at most one control above it. The
     first cut was a sheet with three tabs and every desktop control in it,
     which left a twenty-pixel sliver of the page you were editing (§10.6) —
     so the ceiling here is the point of the design, not a detail of it:
     the bar is one 44px row, a panel is at most 30dvh, and together they may
     never take more than about a third of the screen. */
  .seltools { display: none; }        /* the floating bar is a mouse shape */
  .selbar {
    position: fixed; left: 0; right: 0; z-index: 78;
    bottom: calc(var(--kb-inset, 0px));
    display: flex; align-items: center; gap: var(--space-1);
    padding: 5px var(--space-2) calc(var(--safe-bottom) + 5px);
    background: var(--surface-card); border-top: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
  }
  /* The tag you're on. Tapping it offers the containers around it — the climb
     an Alt-click does on a desktop, which a phone has no way to perform. */
  .selbar__what {
    flex: none; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-height: var(--control-lg); padding: 0 var(--space-2);
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-inset); color: var(--text-secondary);
    font-family: var(--font-mono); font-size: var(--text-xs); cursor: pointer;
  }
  .selbar__what.has-path::after { content: " ⌃"; color: var(--text-faint); }
  .selbar__what.is-on { border-color: var(--accent-border); color: var(--accent-text); background: var(--accent-subtle); }
  .selbar__what:disabled { cursor: default; }
  /* The actions scroll rather than shrink: five of them plus the chip and the
     way out don't fit 360px, and a squashed 30px button is not a target. */
  .selbar__row {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  }
  .selbar__row::-webkit-scrollbar { display: none; }
  .selbar__act {
    flex: none; display: grid; place-items: center;
    width: var(--control-lg); height: var(--control-lg);
    border: 0; border-radius: var(--radius-md); background: none;
    color: var(--text-secondary); cursor: pointer; scroll-snap-align: start;
  }
  .selbar__act:active { background: var(--surface-hover); }
  .selbar__act.is-on { background: var(--accent-subtle); color: var(--accent-text); }
  .selbar__act.is-danger { color: var(--danger-fg); }
  .selbar__done {
    flex: none; display: grid; place-items: center;
    width: var(--control-lg); height: var(--control-lg);
    border: 0; border-radius: var(--radius-md);
    background: var(--accent); color: var(--text-on-accent); cursor: pointer;
  }

  /* One control, above the bar. Short by rule: the document keeps the screen. */
  .selpanel {
    position: fixed; left: 0; right: 0; z-index: 77;
    bottom: calc(var(--kb-inset, 0px) + var(--safe-bottom) + var(--control-lg) + 11px);
    display: flex; flex-direction: column; max-height: 30dvh;
    background: var(--surface-card); border-top: 1px solid var(--border-subtle);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    box-shadow: var(--shadow-lg);
    animation: sheet-in var(--dur-base) var(--ease-out);
    touch-action: pan-y; overscroll-behavior: contain;
  }
  .selpanel__grab { display: block; flex: none; width: 36px; height: 4px; margin: 8px auto 2px; border-radius: 2px; background: var(--border-default); }
  .selpanel__body {
    position: static; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    max-width: none; min-width: 0; border: 0; border-radius: 0; box-shadow: none;
    padding: var(--space-2) var(--space-4) var(--space-3); animation: none;
  }
  /* The desktop controls that suit a thumb, at a thumb's size. */
  .selpanel__body .swatch { width: 40px; height: 40px; border-width: 3px; }
  .selpanel__body .swatches { gap: var(--space-3); }
  .selpanel__body .opt { min-height: var(--control-lg); }
  .selpanel__body .btn, .selpanel__body .pop__btn { min-height: var(--control-lg); }
  .selpanel__body .pop__input, .selpanel__body .composer__input { font-size: var(--field-touch); min-height: var(--control-lg); }

  /* Size: buttons, and a value that is text rather than a field — tapping a
     number to type it summons a keyboard over the page you're sizing. */
  .phsize { display: flex; align-items: center; gap: var(--space-2); }
  .phsize__btn {
    flex: none; width: var(--control-lg); height: var(--control-lg);
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-card); color: var(--text-primary);
    font-size: var(--text-lg); font-weight: 600; cursor: pointer;
  }
  .phsize__value {
    flex: 1; text-align: center; font-family: var(--font-mono);
    font-size: var(--text-md); color: var(--text-primary);
  }

  /* The climb, as rows big enough to hit. */
  .phpath { display: flex; flex-direction: column; }
  .phpath__row {
    display: flex; align-items: baseline; gap: var(--space-3);
    min-height: var(--control-lg); padding: 0 2px; border: 0; background: none;
    text-align: left; cursor: pointer; color: var(--text-primary);
  }
  .phpath__row.is-here { color: var(--text-muted); cursor: default; }
  .phpath__tag { font-family: var(--font-mono); font-size: var(--text-base); font-weight: 700; }
  .phpath__note { font-size: var(--text-xs); color: var(--text-muted); }

  .phrow { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
  .phrow__half { flex: 1; justify-content: center; min-height: var(--control-lg); }
  .phrow__wide { width: 100%; justify-content: center; min-height: var(--control-lg); }
  .phrow__danger { border: 1px solid var(--border-default); color: var(--danger-fg); background: var(--surface-card); }
  .phnote { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2); }

  /* ── The filmstrip: slides on a phone ─────────────────────────────────── */
  .filmstrip {
    left: 0; right: 0; width: auto; max-width: none; border-radius: 0;
    bottom: calc(var(--safe-bottom) + 84px);
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    max-width: 100%;
  }
  .filmstrip::-webkit-scrollbar { display: none; }
  .filmchip { min-height: var(--control-lg); scroll-snap-align: start; flex: none; }
  /* Its per-slide actions are hover-revealed on a desktop, which is nothing on
     glass — a long press picks the slide up instead, and these stay visible. */
  .filmchip__act { display: inline-flex; width: var(--control-lg); height: var(--control-lg); }
  .filmchip--moving { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-subtle); }
  .filmstrip__add { min-width: var(--control-lg); min-height: var(--control-lg); }

  /* The Ask pill expands on a tap; there is no pointer to approach it. */
  .ask { bottom: calc(var(--safe-bottom) + var(--kb-inset, 0px) + 84px); left: var(--space-3); right: var(--space-3); width: auto; }
  .ask:not(.ask--collapsed) { min-height: var(--control-lg); }
  .ask--collapsed { width: auto; min-height: var(--control-lg); }
  .ask__input { font-size: var(--field-touch); }
  .ask__send { width: var(--control-lg); height: var(--control-lg); }

  /* ── The review page (a review round, on a phone) ─────────────────────── */
  /* The rail is a 264px column beside the document and the change card floats
     over it: at 390px that leaves ~120px of page. Both become one bottom sheet
     — the change you're on, with the list a tap away — and the decision
     buttons move into a bar under the thumb. */
  .rv-top { height: calc(var(--editor-bar) + var(--safe-top)); padding: var(--safe-top) var(--space-2) 0; gap: var(--space-2); }
  .rv-top .rv-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-base); }
  .rv-top .rv-reviewing { display: none; } /* the bar below says it, with counts */
  .rv-back { min-height: var(--control-lg); display: inline-flex; align-items: center; }
  .rv-top .rv-seg { margin-left: 0; }
  .rv-seg button { min-height: 38px; padding: 0 10px; font-size: var(--text-xs); }
  .rv-framewrap { inset: 0; } /* the document gets the whole stage back */
  /* The stage stacks its sheet at the bottom in normal flow, so the list and the
     card meet exactly — an absolute rail offset by an assumed card height opens
     a slit between them the moment the card is one line taller. */
  .rv-stage { display: flex; flex-direction: column; justify-content: flex-end; }
  .rv-rail {
    position: static; width: 100%; height: 46dvh; flex: none;
    border-left: 0; border-top: 1px solid var(--border-subtle);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    box-shadow: var(--shadow-lg); padding: var(--space-2) var(--space-3) var(--space-3);
    z-index: 9; touch-action: pan-y; overscroll-behavior: contain;
  }
  .rv-rail::before {
    content: ""; display: block; width: 36px; height: 4px; margin: 2px auto 8px;
    border-radius: 2px; background: var(--border-default);
  }
  .rv-item { min-height: var(--control-lg); }
  /* The card floats beside the rail on a desktop; here there is no beside. It
     docks under the list as the foot of the same sheet — the change you're on
     and its two decisions, with the rest of them scrolling above it. The list
     gives back the height the card takes, so the two together are one surface
     of a fixed size rather than a stack that grows off the screen. */
  .rv-stage:has(.rv-card.show) .rv-rail { height: 30dvh; border-bottom: 1px solid var(--border-subtle); }
  .rv-card {
    position: static; width: 100%; flex: none; z-index: 10;
    border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
    box-shadow: none;
  }
  .rv-card__actions { gap: var(--space-2); }
  .rv-cbtn { min-height: var(--control-lg); flex: 1; }
  /* Two rows, deliberately: where you are and the walk on one, the decisions on
     the other. Left to wrap on its own it made four, and a decision bar that
     eats a third of the screen leaves nothing to decide about. */
  .rv-bar {
    padding: var(--space-2) var(--space-3) calc(var(--safe-bottom) + var(--space-3));
    gap: var(--space-2); flex-wrap: wrap; row-gap: var(--space-2);
  }
  .rv-bar .rv-sep { display: none; }
  .rv-count { flex: 0 1 auto; }
  .rv-progress { flex: 1 1 auto; min-width: 0; }
  .rv-nav { flex: none; margin-left: auto; }
  .rv-nav button { width: var(--control-lg); height: var(--control-lg); }
  .rv-bar .rv-btn { flex: 1 1 40%; justify-content: center; min-height: var(--control-lg); }
  .rv-bar .rv-btn:first-of-type { margin-left: 0; }
  .rv-count, .rv-progress { font-size: var(--text-xs); }
}