/* Alpha Studio: editor chrome.
   Starwisp Design System v19, General layer (Liquid Glass), with the Alpha brand layer on top
   (data-brand="alpha", the default). Every value comes from the token blocks below.

   Surfaces
   - Top bar, crop bar, preview bar: Standard preset, Clear material, capsule shadow.
   - Library and inspector: Standard preset, Regular material (the sidebar and editor tier).
   - Menus and tooltips: Popover preset, Opaque material.
   - Dialogs: Regular glass with the 70% light tint, radius 28, over a flat scrim.
   - Toast: Regular glass capsule. Pages, tiles, cards, rows and inputs: solid. */

@font-face {
  font-family: "Prata";
  src: url("../fonts/prata-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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: "Prata";
  src: url("../fonts/prata-vietnamese.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Starwisp AI layer faces (SIL OFL 1.1, Latin subsets from the design system). Browsers fetch them only when
   Interface style is Starwisp AI. */
@font-face { font-family: "Quicksand"; src: url("../fonts/quicksand-var.woff2") format("woff2"); font-weight: 300 700;  font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito";    src: url("../fonts/nunito-var.woff2")    format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

/* ───────────── Tokens: General layer (foundations.md, components.md, overlays.md) ───────────── */
:root {
  color-scheme: light dark;
  --bg: #f5f5f7;  --surface: #ffffff;
  --text-primary: rgba(0, 0, 0, 0.92);
  --text-secondary: #6e6e73;
  --text-tertiary: #a1a1a6;
  --icon: var(--text-primary);
  --caret: var(--text-primary);
  --fill-subtle: rgba(0, 0, 0, 0.06);
  --selected-fill: rgba(0, 0, 0, 0.08);

  --accent: #0071e3;  --accent-hover: #005CBA;  --accent-soft: rgba(0, 113, 227, 0.10);
  --accent-fill: #0071e3;  --accent-fill-hover: #005CBA;  --on-accent-fill: #ffffff;
  --accent-on-tint: #0055B3;
  --link: #0055B3;
  --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);

  --danger: #d70015;  --success: #34c759;  --warning: #ff9500;
  --danger-text: #d70015;  --success-text: #1c7c3a;
  --danger-fill: #d70015;  --on-danger-fill: #ffffff;

  --glass-standard-light: rgba(255, 255, 255, 0.12);  --glass-standard-dark: rgba(28, 28, 32, 0.14);  --glass-standard-filter: saturate(160%) blur(22px);
  --glass-popover-light:  rgba(255, 255, 255, 0.12);  --glass-popover-dark:  rgba(28, 28, 32, 0.14);  --glass-popover-filter:  saturate(160%) blur(22px);
  --glass-medium-light:   rgba(255, 255, 255, 0.12);  --glass-medium-dark:   rgba(28, 28, 32, 0.14);  --glass-medium-filter:   saturate(160%) blur(8px);
  --glass-clear-light:    rgba(255, 255, 255, 0.12);  --glass-clear-dark:    rgba(28, 28, 32, 0.14);  --glass-clear-filter:    saturate(160%) blur(3px);
  --glass-dialog-light:   rgba(255, 255, 255, 0.70);
  --glass-border-light: rgba(0, 0, 0, 0.05);       --glass-border-light-strong: rgba(0, 0, 0, 0.12);
  --glass-border-dark: rgba(255, 255, 255, 0.08);  --glass-border-dark-strong: rgba(255, 255, 255, 0.15);
  --glass-border-clear: rgba(255, 255, 255, 0.40);
  --glass-specular: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.54), inset -1px -1px 0 rgba(255, 255, 255, 0.27);
  --glass-capsule-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  --glass-shadow-standard: 0 10px 40px rgba(0, 0, 0, 0.10);
  --glass-shadow-popover: 0 2px 4px rgba(0, 0, 0, 0.15), 0 8px 15px 6px rgba(0, 0, 0, 0.18);

  --modal-bg: rgba(255, 255, 255, 0.97);
  --scrim: rgba(0, 0, 0, 0.45);
  --sheet-solid: #f5f5f7;
  --ease: cubic-bezier(.4, 0, .6, 1);  --ease-spring: cubic-bezier(.22, 1, .36, 1);

  /* components.md */
  --edge: var(--glass-border-light);  --edge-strong: var(--glass-border-light-strong);
  --film: rgba(255, 255, 255, 0.07);  --film-hover: rgba(255, 255, 255, 0.12);
  --tint-neutral: rgba(120, 120, 128, 0.22); --tint-accent: rgba(0, 113, 227, 0.22);
  --tint-danger: rgba(255, 59, 48, 0.22);    --tint-success: rgba(52, 199, 89, 0.22);
  --thumb: rgba(255, 255, 255, 0.85);
  --thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  --switch-off: rgba(120, 120, 128, 0.32);  --switch-knob: #ffffff;
  --knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  --icon-size-sm: 16px;  --icon-size-toolbar: 21px;  --icon-size-tile: 28px;
  --control-outline: rgba(0, 0, 0, 0.45);
  --glass-thumb-blur: 0.5px;
  --glass-thumb-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15), 0 1px 5px rgba(0, 0, 0, 0.09);
  --glass-thumb-width: 40px;  --glass-thumb-height: 24px;  --glass-thumb-press-scale: 1.5;  --glass-slider-track-height: 6px;
  --glass-press-grow: 4px; --glass-press-reduced-scale: 1.02; --glass-glow-peak: 0.15; --glass-glow-flat: 0.08; --glass-glow-peak-reduced: 0.10; --glass-glow-flat-reduced: 0.06;
  --gi-glow-rgb: 255 255 255; --gi-blend: normal; --gi-ink-rgb: 0 0 0; --gi-glow-peak: var(--glass-glow-peak); --gi-glow-flat: var(--glass-glow-flat);
  --menu-hover: rgba(0, 0, 0, 0.06);  --menu-rule: rgba(0, 0, 0, 0.08);
  --nav-hover: rgba(0, 0, 0, 0.04);
  --toast-min-height: 44px; --toast-max-width: 420px;

  /* Editor canvas */
  --page-edge: rgba(0, 0, 0, 0.12);
  --select: #0071e3;
  --select-soft: rgba(0, 113, 227, 0.08);
  --handle-fill: #ffffff;
  --on-select: #ffffff;
  --guide: #FD5109;
  --guide-margin: rgba(253, 81, 9, 0.35);
  --guide-column: rgba(253, 81, 9, 0.07);
  --preview-page: #F8F7F3;
  --preview-dark: #2C2C2E;
  --brand-marker: var(--accent);
  --brand-label: var(--text-secondary);

  /* Type (General) */
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    var(--font-rounded);
  --font-display: var(--font-rounded);
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-size-3xs: 10px; --font-size-2xs: 11px; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-md: 15px;
  --font-size-base: 17px; --font-size-lg: 19px; --font-size-xl: 22px; --font-size-2xl: 28px; --font-size-3xl: 34px;
  --font-size-4xl: 44px; --font-size-5xl: clamp(2.2rem, 5vw, 56px); --font-size-6xl: clamp(3rem, 6vw, 68px);
  --fw-read: 400; --fw-small: 400; --fw-tap: 600; --fw-caps: 600; --fw-title: 700; --fw-hero: 700;
  --leading-tight: 1.05; --leading-snug: 1.15; --leading-normal: 1.3; --leading-relaxed: 1.5; --leading-loose: 1.65;
  --tracking-tighter: -0.02em; --tracking-tight: -0.015em; --tracking-snug: -0.01em; --tracking-normal: -0.003em; --tracking-wide: 0.08em;
  --tracking-display: var(--tracking-tighter);

  /* Spacing and radius */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; --space-20: 80px;
  --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;

  /* Editor layout */
  --bar-h: 56px;
  --lib-w: 344px;
  --insp-w: 304px;
  --chrome-top: calc(var(--space-4) + var(--bar-h) + var(--space-4));
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme$="dark"] {
  color-scheme: dark;
  --bg: #1c1c1e;  --surface: #2c2c2e;
  --fill-subtle: rgba(255, 255, 255, 0.08);  --selected-fill: rgba(255, 255, 255, 0.10);
  --text-primary: #ffffff;  --text-secondary: #a1a1a6;  --text-tertiary: #86868b;
  --accent: #3D9BFF;  --accent-hover: #66B0FF;  --accent-soft: rgba(61, 155, 255, 0.18);
  --accent-on-tint: #66B0FF;  --link: #3D9BFF;
  --danger-text: #ff6961;  --success-text: #5fe08a;
  --glass-border-clear: rgba(255, 255, 255, 0.18);
  --glass-specular: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.30), inset -1px -1px 0 rgba(255, 255, 255, 0.12);
  --glass-capsule-shadow: 0 10px 40px rgba(0, 0, 0, 0.40);
  --modal-bg: rgba(34, 34, 38, 0.97);  --scrim: rgba(0, 0, 0, 0.50);
  --sheet-solid: #1c1c1e;
  --edge: var(--glass-border-dark);  --edge-strong: var(--glass-border-dark-strong);
  --film: rgba(255, 255, 255, 0.05);  --film-hover: rgba(255, 255, 255, 0.09);
  --thumb: rgba(255, 255, 255, 0.20);
  --control-outline: rgba(255, 255, 255, 0.45);
  --glass-thumb-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15), 0 1px 5px rgba(0, 0, 0, 0.2);
  --gi-ink-rgb: 255 255 255;
  --menu-hover: rgba(255, 255, 255, 0.08);  --menu-rule: rgba(255, 255, 255, 0.10);
  --nav-hover: rgba(255, 255, 255, 0.06);
  --page-edge: rgba(255, 255, 255, 0.14);
  --select: #3D9BFF;
  --select-soft: rgba(61, 155, 255, 0.12);
}
/* The same dark values for any moment the root has no data-theme (no script yet, or a host viewer in
   "system" mode). An explicit light choice still wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1c1c1e;  --surface: #2c2c2e;
    --fill-subtle: rgba(255, 255, 255, 0.08);  --selected-fill: rgba(255, 255, 255, 0.10);
    --text-primary: #ffffff;  --text-secondary: #a1a1a6;  --text-tertiary: #86868b;
    --accent: #3D9BFF;  --accent-hover: #66B0FF;  --accent-soft: rgba(61, 155, 255, 0.18);
    --accent-on-tint: #66B0FF;  --link: #3D9BFF;
    --danger-text: #ff6961;  --success-text: #5fe08a;
    --glass-border-clear: rgba(255, 255, 255, 0.18);
    --glass-specular: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.30), inset -1px -1px 0 rgba(255, 255, 255, 0.12);
    --glass-capsule-shadow: 0 10px 40px rgba(0, 0, 0, 0.40);
    --modal-bg: rgba(34, 34, 38, 0.97);  --scrim: rgba(0, 0, 0, 0.50);
    --sheet-solid: #1c1c1e;
    --edge: var(--glass-border-dark);  --edge-strong: var(--glass-border-dark-strong);
    --film: rgba(255, 255, 255, 0.05);  --film-hover: rgba(255, 255, 255, 0.09);
    --thumb: rgba(255, 255, 255, 0.20);
    --control-outline: rgba(255, 255, 255, 0.45);
    --glass-thumb-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15), 0 1px 5px rgba(0, 0, 0, 0.2);
    --gi-ink-rgb: 255 255 255;
    --menu-hover: rgba(255, 255, 255, 0.08);  --menu-rule: rgba(255, 255, 255, 0.10);
    --nav-hover: rgba(255, 255, 255, 0.06);
    --page-edge: rgba(255, 255, 255, 0.14);
    --select: #3D9BFF;
    --select-soft: rgba(61, 155, 255, 0.12);
  }
}

/* ───────────── Alpha brand layer (default) ─────────────
   Like the Starwisp layer: changes fonts, weights, ink, label and marker colours and the solid primary
   fill (Dark Gray in light, Alpha Red in dark). Leaves glass, spacing, radius, motion, links and the
   focus ring as General defines them. */
:root[data-brand="alpha"] {
  --font-body:    "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Prata", "Iowan Old Style", Georgia, serif;
  --fw-read: 400; --fw-small: 400; --fw-tap: 500; --fw-caps: 500; --fw-title: 400; --fw-hero: 400;
  --tracking-display: -0.01em;
  --brand-label: #776E56;                    /* Archive Brown, sampled from the identity sheet: 4.6:1 on #f5f5f7 */
  --brand-marker: #FD5109;                   /* Alpha Red: markers and rules only, never small text */
}
:root[data-brand="alpha"]:not([data-theme$="dark"]) {
  --text-primary: #111111;  --icon: #111111;
  --accent-fill: #111111;  --accent-fill-hover: #3A3A3A;  --on-accent-fill: #ffffff;   /* 18.9:1 */
}
:root[data-brand="alpha"][data-theme$="dark"] {
  --text-primary: #ffffff;  --icon: #ffffff;
  --brand-label: #CFC6AE;                    /* 8.2:1 on #2c2c2e */
  --accent-fill: #FD5109;  --accent-fill-hover: #FF6F33;  --on-accent-fill: #111111;   /* Dark Gray on Red: 5.8:1 */
}
@media (prefers-color-scheme: dark) {
  :root[data-brand="alpha"]:not([data-theme="light"]) {
    --text-primary: #ffffff;  --icon: #ffffff;  --brand-label: #CFC6AE;
    --accent-fill: #FD5109;  --accent-fill-hover: #FF6F33;  --on-accent-fill: #111111;
  }
}

/* ───────────── Starwisp AI layer (Interface style → Starwisp AI) ─────────────
   From Starwisp-layer.md (v19): Quicksand for text, Nunito for titles, navy ink, brand-blue labels and navy
   primaries in light; white ink, sky labels and brand-blue primaries in dark. Glass, spacing, radius, motion,
   links and the focus ring stay as General defines them. Pages keep the Alpha identity in either style. */
:root[data-brand="starwisp"] {
  --brand-ink:  #0A1A3F;
  --brand-blue: #274E93;
  --brand-sky:  #8FABD9;
  --brand-label: var(--brand-blue);          /* ALL-CAPS labels and selected-state text: 7.4:1 on #f5f5f7 */
  --font-body:    "Quicksand", ui-rounded, system-ui, sans-serif;
  --font-display: "Nunito", "Quicksand", ui-rounded, system-ui, sans-serif;
  --fw-read: 400; --fw-small: 500; --fw-tap: 600; --fw-caps: 700; --fw-title: 600; --fw-hero: 300;
}
:root[data-brand="starwisp"]:not([data-theme$="dark"]) {
  --text-primary: #0A1A3F;  --icon: #0A1A3F;
  --text-secondary: rgba(10, 26, 63, 0.62);  /* M1: 4.7:1 on #f5f5f7 */
  --accent-fill: #0A1A3F;  --accent-fill-hover: #1E2F5C;  --on-accent-fill: #ffffff;   /* 17.0:1 */
}
:root[data-brand="starwisp"][data-theme$="dark"] {
  --brand-label: var(--brand-sky);           /* 6.0:1 on #2c2c2e */
  --accent-fill: #274E93;  --accent-fill-hover: #2F5BA8;  --on-accent-fill: #ffffff;   /* 8.1:1 */
}
:root[data-brand="starwisp"] .label { color: var(--brand-label); }
:root[data-brand="starwisp"] .chip[aria-pressed="true"],
:root[data-brand="starwisp"] .btn[aria-pressed="true"],
:root[data-brand="starwisp"] .rail-btn[aria-selected="true"] { color: var(--brand-label); }
:root[data-brand="starwisp"] .rail-btn[aria-selected="true"] .icon { color: var(--brand-label); }
:root[data-brand="starwisp"][data-theme$="dark"] .seg { --thumb: rgba(255, 255, 255, 0.12); }   /* calmer pill behind the ink label */

/* ───────────── Base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, p, figure, blockquote, pre, hr { margin: 0; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--fw-read);
  font-synthesis: none;
  font-size: var(--font-size-md);            /* desktop UI column: body 15 */
  line-height: var(--leading-loose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-title); text-wrap: balance; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button, strong, b { font-weight: var(--fw-tap); }
em, i { font-style: normal; font-weight: var(--fw-tap); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.link, a.link { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-fill); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ───────────── Glass (::before material, ::after highlight) ───────────── */
.glass {
  --g-tint:   var(--glass-medium-light);
  --g-filter: var(--glass-medium-filter);
  --g-edge:   var(--glass-border-clear);
  position: relative;
  overflow: hidden;
  border: 0.5px solid var(--g-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow-standard);
}
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: var(--g-tint);
  backdrop-filter: var(--g-filter);
  -webkit-backdrop-filter: var(--g-filter);
}
.glass::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  box-shadow: var(--glass-specular);
}
.glass > * { position: relative; z-index: 1; }
[data-theme$="dark"] .glass { --g-tint: var(--glass-medium-dark); }
.glass[data-material="opaque"] { --g-tint: var(--glass-standard-light); --g-filter: var(--glass-standard-filter); }
.glass[data-material="clear"]  { --g-tint: var(--glass-clear-light);    --g-filter: var(--glass-clear-filter); }
[data-theme$="dark"] .glass[data-material="opaque"] { --g-tint: var(--glass-standard-dark); }
[data-theme$="dark"] .glass[data-material="clear"]  { --g-tint: var(--glass-clear-dark); }
/* The lens (refraction) on floating capsules, Chromium only: js/lens.js sets --g-lensf and data-lens */
.glass[data-lens="on"]::before { -webkit-backdrop-filter: var(--g-lensf); backdrop-filter: var(--g-lensf); }
.glass-popover {
  --g-tint: var(--glass-popover-light); --g-filter: var(--glass-popover-filter); --g-edge: var(--glass-border-light-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--glass-shadow-popover);
}
[data-theme$="dark"] .glass-popover { --g-tint: var(--glass-popover-dark); --g-edge: var(--glass-border-dark-strong); }
.modal:not(.is-full), .sheet:not(.is-full) { --g-tint: var(--glass-dialog-light); }
[data-theme$="dark"] .modal:not(.is-full), [data-theme$="dark"] .sheet:not(.is-full) { --g-tint: var(--glass-medium-dark); }
.glass.is-full { --g-tint: var(--sheet-solid); --g-filter: none; --g-edge: var(--glass-border-light); box-shadow: none; }
[data-theme$="dark"] .glass.is-full { --g-edge: var(--glass-border-dark); }
.glass.is-full::after { display: none; }
.capsule-shadow { box-shadow: var(--glass-capsule-shadow); }

.surface { background: var(--surface); border: 0.5px solid var(--glass-border-light); border-radius: var(--radius-lg); }
[data-theme$="dark"] .surface { border-color: var(--glass-border-dark); }

/* ───────────── Icons ───────────── */
.icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; flex: none; vertical-align: -0.14em; line-height: 0; }
.icon > svg { width: 88%; height: 88%; display: block; }
.icon svg [opacity] { opacity: 0.45 !important; }
.btn .icon, .btn-primary .icon, .btn-danger .icon { font-size: var(--icon-size-sm); }
.btn--icon .icon, .icon--toolbar { font-size: var(--icon-size-toolbar); }
.btn--icon.btn--sm .icon { font-size: var(--icon-size-sm); }
.icon--tile { font-size: var(--icon-size-tile); }

/* ───────────── Buttons ───────────── */
.btn {
  --tint: var(--tint-neutral);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px 20px;
  border: 0.5px solid var(--edge); border-radius: var(--radius-pill);
  background: var(--tint); color: var(--text-primary);
  font-size: var(--font-size-md); font-weight: var(--fw-tap); line-height: var(--leading-normal);
  letter-spacing: var(--tracking-snug); cursor: pointer; white-space: nowrap;
  transition: transform 0.12s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: var(--film);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition: background 0.15s var(--ease);
}
.btn > * { position: relative; z-index: 2; }
.glass .btn::before, dialog .btn::before { content: none; }
.btn:hover::before { background: var(--film-hover); }
.glass .btn:hover, dialog .btn:hover { --tint: var(--selected-fill); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.btn--compact { padding: 6px 12px; font-size: var(--font-size-sm); }
.btn--icon { width: 36px; height: 36px; padding: 0; color: var(--icon); }
.btn--icon.btn--sm { width: 30px; height: 30px; }
.btn--accent { --tint: var(--tint-accent); color: var(--accent-on-tint); }
.btn--danger { --tint: var(--tint-danger); color: var(--danger-text); }
.btn[aria-pressed="true"] { --tint: var(--tint-accent); color: var(--accent-on-tint); }
.btn--quiet { --tint: transparent; border-color: transparent; }
.btn--quiet:hover { --tint: var(--fill-subtle); }

.btn-primary, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px 20px; border: 0; border-radius: var(--radius-pill);
  background: var(--accent-fill); color: var(--on-accent-fill);
  font-size: var(--font-size-md); font-weight: var(--fw-tap); line-height: var(--leading-normal);
  letter-spacing: var(--tracking-snug); cursor: pointer; white-space: nowrap;
  transition: background 0.15s var(--ease), transform 0.12s var(--ease);
}
.btn-primary:hover { background: var(--accent-fill-hover); }
.btn-danger { background: var(--danger-fill); color: var(--on-danger-fill); }
.btn-danger:hover { filter: brightness(0.94); }
.btn-primary:active, .btn-danger:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.4; cursor: default; }
.btn-primary.btn--compact, .btn-danger.btn--compact { padding: 6px 12px; font-size: var(--font-size-sm); }
@media (pointer: coarse) { .btn, .btn-primary, .btn-danger { min-height: 44px; } .btn--icon { min-width: 44px; min-height: 44px; } }

/* Press glass (components.md): the script in js/glass-interact.js drives these */
[data-glass-interact] { position: relative; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
[data-glass-interact] > :not(.gi-fx) { position: relative; z-index: 2; }
.gi-fx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.gi-fx::before, .gi-fx::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: var(--gi-p, 0); }
.gi-fx::before {
  mix-blend-mode: var(--gi-blend);
  background:
    linear-gradient(rgb(var(--gi-glow-rgb) / var(--gi-glow-flat)), rgb(var(--gi-glow-rgb) / var(--gi-glow-flat))),
    radial-gradient(circle var(--gi-r, 72px) at var(--gi-x, 50%) var(--gi-y, 50%),
      rgb(var(--gi-glow-rgb) / calc(var(--gi-glow-peak) * 1)) 50%,      rgb(var(--gi-glow-rgb) / calc(var(--gi-glow-peak) * .957)) 56.25%,
      rgb(var(--gi-glow-rgb) / calc(var(--gi-glow-peak) * .8438)) 62.5%, rgb(var(--gi-glow-rgb) / calc(var(--gi-glow-peak) * .6836)) 68.75%,
      rgb(var(--gi-glow-rgb) / calc(var(--gi-glow-peak) * .5)) 75%,      rgb(var(--gi-glow-rgb) / calc(var(--gi-glow-peak) * .3164)) 81.25%,
      rgb(var(--gi-glow-rgb) / calc(var(--gi-glow-peak) * .1563)) 87.5%, rgb(var(--gi-glow-rgb) / calc(var(--gi-glow-peak) * .043)) 93.75%,
      rgb(var(--gi-glow-rgb) / 0) 100%);
}
.gi-fx::after { box-shadow: inset 0 0 0 .5px var(--glass-border-clear), var(--glass-specular); }
.btn[data-gi-down]:active { transform: none; }
[data-glass-interact][data-gi-rm][data-gi-down] { scale: var(--glass-press-reduced-scale); }
[data-glass-interact="glow"][data-gi-rm][data-gi-down] { scale: none; }
[data-gi-rm] > .gi-fx { --gi-p: 1; --gi-glow-peak: 0; }

/* ───────────── Segmented control, switch, GlassSlider, inputs ───────────── */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--tint-neutral); max-width: 100%; }
.glass .seg { background: var(--fill-subtle); }
.seg button {
  flex: 1 1 auto; min-width: 0;
  height: 30px; padding: 0 11px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-secondary);
  font-size: var(--font-size-xs); font-weight: var(--fw-tap);
  white-space: nowrap; cursor: pointer; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.12s var(--ease);
}
.seg button:hover { color: var(--text-primary); }
.seg button:active { transform: scale(0.96); }
.seg button.is-active { background: var(--thumb); color: var(--text-primary); box-shadow: var(--thumb-shadow); }
.seg button.is-active:focus-visible { box-shadow: var(--focus-ring); }
.seg--full { display: flex; width: 100%; }

.switch { position: relative; flex: none; width: 52px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--switch-off); cursor: pointer; transition: background 0.2s var(--ease); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--switch-knob); box-shadow: var(--knob-shadow); transition: transform 0.22s var(--ease-spring); }
.switch[aria-checked="true"] { background: var(--accent-fill); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 36px; }

.gslider { --prog: 0.5; position: relative; flex: 1; min-width: 0; height: var(--glass-thumb-height); margin: 0 var(--space-3); touch-action: pan-y; cursor: pointer; border-radius: var(--radius-pill); }
.gslider-track { position: absolute; left: 0; right: 0; overflow: hidden; border-radius: var(--radius-pill);
                 top: calc((var(--glass-thumb-height) - var(--glass-slider-track-height)) / 2); height: var(--glass-slider-track-height); background: var(--switch-off); }
.gslider-track::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--control-outline); }
.gslider-fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% * var(--prog)); background: var(--accent-fill); transition: width 0.3s var(--ease-spring); }
.gslider-thumb {
  position: absolute; top: 0; box-sizing: border-box; width: var(--glass-thumb-width); height: var(--glass-thumb-height);
  left: clamp(-10px, calc(100% * var(--prog) - var(--glass-thumb-width) / 2), calc(100% - var(--glass-thumb-width) * 0.75));
  border: 1px solid var(--control-outline); border-radius: var(--radius-pill);
  background: var(--switch-knob); box-shadow: var(--knob-shadow);
  transform: scale(var(--ts, 1)); touch-action: none; cursor: grab;
  transition: left 0.3s var(--ease-spring), transform 0.35s var(--ease-spring), background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.gslider { --thumb-glass: linear-gradient(var(--glass-clear-light), var(--glass-clear-light)), color-mix(in srgb, var(--surface) 60%, transparent); }
[data-theme$="dark"] .gslider { --thumb-glass: linear-gradient(var(--glass-clear-dark), var(--glass-clear-dark)), color-mix(in srgb, var(--surface) 60%, transparent); }
.gslider.is-pressed .gslider-thumb, .gslider:active .gslider-thumb {
  --ts: var(--glass-thumb-press-scale);
  background: var(--thumb-glass); border-color: var(--glass-border-clear);
  -webkit-backdrop-filter: blur(var(--glass-thumb-blur)) saturate(160%); backdrop-filter: blur(var(--glass-thumb-blur)) saturate(160%);
  box-shadow: var(--glass-specular), var(--glass-thumb-shadow);
}
.gslider.is-dragging .gslider-thumb { transition: left 0s, transform 0.35s var(--ease-spring), background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); cursor: grabbing; }
.gslider.is-dragging .gslider-fill { transition: none; }
.gslider:focus-visible { box-shadow: none; }
.gslider:focus-visible .gslider-thumb { box-shadow: var(--focus-ring), var(--knob-shadow); }

.input {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--edge-strong); border-radius: var(--radius-xs);
  background: var(--input-bg, var(--surface)); color: var(--text-primary); caret-color: var(--caret);
  font-size: var(--font-size-base); font-weight: var(--fw-read);
  transition: border-color 0.12s var(--ease);
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus-visible { border-color: var(--accent); }
textarea.input { min-height: 96px; resize: vertical; line-height: var(--leading-relaxed); }
.modal .input { background: var(--surface); border-color: var(--edge-strong); }
.modal .input::placeholder { color: var(--text-secondary); }
.field { display: grid; gap: var(--space-2); }
.field > label, .field-label { font-size: var(--font-size-sm); font-weight: var(--fw-tap); }

/* Inspector fields: solid, desktop density (13px on a pointer, 17px on touch so iOS does not zoom) */
.ins-input {
  width: 100%; min-width: 0; height: 30px; padding: 0 var(--space-2);
  border: 0.5px solid var(--edge-strong); border-radius: var(--radius-xs);
  background: var(--surface); color: var(--text-primary); caret-color: var(--caret);
  font-size: var(--font-size-sm); font-weight: var(--fw-small);
  font-variant-numeric: tabular-nums;
}
textarea.ins-input { height: auto; min-height: 72px; padding: var(--space-2); resize: vertical; line-height: var(--leading-relaxed); }
select.ins-input { padding-right: var(--space-6); }
.ins-input:focus-visible { border-color: var(--accent); }
@media (pointer: coarse) { .ins-input { font-size: var(--font-size-base); height: 40px; } }

/* ───────────── Labels, chips, badges, cards ───────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--font-size-2xs); font-weight: var(--fw-caps);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand-label);
  line-height: var(--leading-normal);
}
.eyebrow .num { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.label, .badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--font-size-2xs); font-weight: var(--fw-caps); line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap;
}
.label { background: var(--fill-subtle); color: var(--text-primary); }
.label .icon { font-size: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 4px 10px; border: 0; border-radius: var(--radius-pill);
  background: var(--fill-subtle); color: var(--text-primary);
  font-size: var(--font-size-sm); font-weight: var(--fw-tap); line-height: var(--leading-normal);
}
.card { padding: var(--space-6); border: 0.5px solid var(--edge); border-radius: var(--radius-lg); background: var(--surface); }
.note { font-size: var(--font-size-sm); font-weight: var(--fw-small); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.glass .note, dialog .note { color: var(--text-primary); }
.callout {
  --c: var(--brand-marker); --pct: 6%;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) var(--pct), transparent);
  font-size: var(--font-size-sm); font-weight: var(--fw-small); line-height: var(--leading-relaxed);
}
.callout strong { font-weight: var(--fw-tap); }

/* ───────────── Menus, tooltips, dialogs, toast ───────────── */
.menu, .popover-panel {
  position: fixed; z-index: 220; min-width: 220px; padding: 6px;
  visibility: hidden; opacity: 0; pointer-events: none;
  transform: translateY(-6px) scale(0.98); transform-origin: top left;
  transition: opacity 0.18s var(--ease), transform 0.22s var(--ease-spring), visibility 0s linear 0.22s;
}
.menu[data-open] { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
.menu-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: 8px 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-primary); text-align: left; cursor: pointer;
  font-size: var(--font-size-sm); font-weight: var(--fw-small); line-height: var(--leading-normal); white-space: nowrap;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--menu-hover); }
.menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.menu-item .icon { font-size: var(--icon-size-sm); }
.menu-item .menu-hint { margin-left: auto; padding-left: var(--space-4); color: var(--text-primary); font-size: var(--font-size-xs); }
.menu-item--danger { color: var(--danger-text); }
.menu-divider { height: 0.5px; margin: 4px -2px; border: 0; background: var(--menu-rule); }
.menu-heading { padding: 6px 10px 2px; color: var(--text-primary); }

.tooltip {
  position: fixed; z-index: 230; padding: 6px 10px; border-radius: var(--radius-xs); white-space: nowrap;
  font-size: var(--font-size-xs); font-weight: var(--fw-small); color: var(--text-primary); line-height: var(--leading-normal);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity 0.12s var(--ease), visibility 0s linear 0.12s;
}
.tooltip[data-open] { visibility: visible; opacity: 1; transition-delay: 0s; }

dialog.modal { position: fixed; inset: 0; }
.modal {
  width: min(100% - 2 * var(--space-6), 480px); height: fit-content; max-height: calc(100dvh - 2 * var(--space-6)); margin: auto; padding: 0;
  border-radius: var(--radius-xl); color: var(--text-primary);
  background: transparent; overflow: auto;
  box-shadow: var(--glass-capsule-shadow);
}
.modal::backdrop { background: var(--scrim); }
.modal[open] { animation: modal-in 0.22s var(--ease-spring); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
body:has(dialog[open]) { overflow: hidden; }
.modal-body { display: flex; flex-direction: column; gap: var(--space-4); padding: 28px; }
.modal h2 { font-size: var(--font-size-lg); letter-spacing: var(--tracking-tight); line-height: var(--leading-normal); }
.modal p { font-size: var(--font-size-md); font-weight: var(--fw-small); line-height: var(--leading-relaxed); color: var(--text-primary); }
.modal .eyebrow, .modal .field > label, .modal .field-label { color: var(--text-primary); }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.modal--sm { width: min(100% - 2 * var(--space-6), 360px); }
.modal--lg { width: min(100% - 2 * var(--space-6), 640px); }

/* Choice cards inside a dialog: solid content */
.format-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.format-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--edge-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); cursor: pointer; text-align: left;
  font-size: var(--font-size-sm); font-weight: var(--fw-tap); line-height: var(--leading-normal);
  transition: border-color 0.15s var(--ease), transform 0.12s var(--ease);
}
.format-card:active { transform: scale(0.97); }
.format-card[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.format-card .format-shape { height: 44px; display: flex; align-items: flex-end; }
.format-card .format-shape i { display: block; background: var(--fill-subtle); border: 1px solid var(--edge-strong); border-radius: 2px; }
.format-card small { font-size: var(--font-size-xs); font-weight: var(--fw-small); color: var(--text-primary); }

/* Rows inside dialogs (history, share): solid rows */
.dialog-list { display: flex; flex-direction: column; border: 0.5px solid var(--edge-strong); border-radius: var(--radius-sm); background: var(--surface); max-height: min(52dvh, 420px); overflow: auto; }
.dialog-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.dialog-row + .dialog-row { border-top: 0.5px solid var(--edge); }
.dialog-row .txt { flex: 1; min-width: 0; }
.dialog-row .row-title { font-size: var(--font-size-sm); font-weight: var(--fw-tap); line-height: var(--leading-normal); }
.dialog-row .row-hint { font-size: var(--font-size-xs); font-weight: var(--fw-small); line-height: var(--leading-relaxed); color: var(--text-primary); }
.dialog-row .row-tools { display: flex; gap: var(--space-2); flex: none; }
.share-steps { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); font-size: var(--font-size-md); line-height: var(--leading-relaxed); }

/* Toast: Regular glass capsule, bottom centre (overlays.md, M13) */
.toast {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 300;
  width: fit-content; max-width: min(100% - 2 * var(--space-4), var(--toast-max-width)); margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--toast-min-height); padding: 0 var(--space-4); border-radius: var(--radius-pill);
  box-shadow: var(--glass-capsule-shadow); color: var(--text-primary);
  font-size: var(--font-size-sm); font-weight: var(--fw-tap); line-height: var(--leading-normal); letter-spacing: var(--tracking-snug);
}
.toast-live { display: contents; }
.toast:not([hidden]) { animation: toast-in 0.22s var(--ease-spring); }
.toast[data-leaving] { opacity: 0; transform: translateY(8px); transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.toast-text { min-width: 0; padding-block: var(--space-3); overflow-wrap: anywhere; }
.toast .icon { font-size: var(--icon-size-sm); }
.toast .btn { margin-right: calc(var(--space-2) * -1); }

/* ───────────── Top capsule bar ───────────── */
.topbar {
  position: fixed; top: var(--space-4); left: var(--space-4); right: var(--space-4); z-index: 150;
  height: var(--bar-h); border-radius: var(--radius-pill);
  box-shadow: var(--glass-capsule-shadow);
}
.topbar:not([data-material]) { --g-tint: var(--glass-clear-light); --g-filter: var(--glass-clear-filter); }
[data-theme$="dark"] .topbar:not([data-material]) { --g-tint: var(--glass-clear-dark); }
.topbar-inner { height: 100%; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) 0 var(--space-3); }
.topbar .group { display: flex; align-items: center; gap: var(--space-1); }
.topbar .spacer { flex: 1; min-width: 0; }
.wordmark {
  display: inline-flex; align-items: baseline; gap: var(--space-2); text-decoration: none; color: var(--text-primary);
  font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: var(--fw-title); letter-spacing: var(--tracking-display);
  white-space: nowrap; padding: 0 var(--space-2);
}
.wordmark .eyebrow { font-family: var(--font-body); }
.doc-name {
  min-width: 80px; max-width: 260px; height: 34px; padding: 0 var(--space-2);
  border: 0.5px solid transparent; border-radius: var(--radius-xs); background: transparent; color: var(--text-primary); caret-color: var(--caret);
  font-family: var(--font-display); font-size: var(--font-size-md); font-weight: var(--fw-title); letter-spacing: var(--tracking-display);
  text-overflow: ellipsis;
}
.doc-name:hover { border-color: var(--edge-strong); }
.doc-name:focus-visible { border-color: var(--accent); }
.doc-name[readonly] { pointer-events: none; }
.save-state { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--fw-small); color: var(--text-primary); white-space: nowrap; }
.save-state .icon { font-size: var(--icon-size-sm); }
.zoom-readout { min-width: 52px; height: 30px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-primary); font-size: var(--font-size-xs); font-weight: var(--fw-tap); font-variant-numeric: tabular-nums; cursor: pointer; }
.zoom-readout:hover { background: var(--nav-hover); }
.vrule { width: 0.5px; height: 24px; background: var(--edge-strong); margin: 0 var(--space-1); }

/* ───────────── Website sign-in: Regular glass card, no dim (overlays.md exception) ───────────── */
.gate { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
        padding-block: var(--space-10); padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
.signin { width: min(100%, 420px); display: flex; flex-direction: column; gap: var(--space-4); padding: 28px; border-radius: var(--radius-xl); box-shadow: var(--glass-capsule-shadow); color: var(--text-primary); }
.signin h1 { font-size: var(--font-size-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-display); }
.signin p, .signin .note { color: var(--text-primary); font-size: var(--font-size-md); line-height: var(--leading-relaxed); }
.signin .input { background: var(--surface); }
.signin-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-1); }
.field-error { font-size: var(--font-size-sm); font-weight: var(--fw-small); color: var(--danger-text); line-height: var(--leading-relaxed); }
.gate-foot { color: var(--text-secondary); }

/* ───────────── Home ───────────── */
.home-main { padding: calc(var(--chrome-top) + var(--space-6)) clamp(var(--space-5), 5vw, var(--space-10)) var(--space-14); max-width: 1360px; margin: 0 auto; }
.home-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-6); padding-bottom: var(--space-6); border-bottom: 0.5px solid var(--edge-strong); }
.home-head h1 { font-size: var(--font-size-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.home-head .lead { margin-top: var(--space-3); max-width: 56ch; font-size: var(--font-size-md); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.home-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.home-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); padding: var(--space-6) 0 var(--space-8); }
.home-strip h2 { font-size: var(--font-size-md); font-family: var(--font-body); font-weight: var(--fw-tap); margin-top: var(--space-2); letter-spacing: var(--tracking-snug); }
.home-strip p { margin-top: var(--space-1); }
.swatch-row { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.swatch-row i { width: 28px; height: 28px; border-radius: var(--radius-pill); border: 0.5px solid var(--edge-strong); }
.section-title { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }
.section-title::after { content: ""; flex: 1; height: 0.5px; background: var(--edge-strong); }
.draft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); }
.draft-card { display: flex; flex-direction: column; border: 0.5px solid var(--edge); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; transition: border-color 0.15s var(--ease); position: relative; }
.draft-card:hover { border-color: var(--edge-strong); }
.draft-open { display: block; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; text-align: left; color: inherit; }
.draft-open:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.draft-thumb { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--bg); overflow: hidden; padding: var(--space-4); }
.draft-thumb .icon { font-size: var(--icon-size-tile); color: var(--text-secondary); }
.draft-thumb .label { position: absolute; left: var(--space-3); top: var(--space-3); background: var(--surface); }
.draft-meta { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
.draft-meta .txt { flex: 1; min-width: 0; }
.draft-meta .name { font-size: var(--font-size-md); font-weight: var(--fw-tap); line-height: var(--leading-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-meta .sub { font-size: var(--font-size-xs); font-weight: var(--fw-small); color: var(--text-secondary); line-height: var(--leading-normal); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-14) var(--space-6); text-align: center; border: 0.5px dashed var(--edge-strong); border-radius: var(--radius-lg); }
.empty-state .icon { font-size: 36px; color: var(--text-secondary); }
.empty-state p { max-width: 44ch; font-size: var(--font-size-md); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.skeleton { border-radius: var(--radius-md); background: var(--fill-subtle); min-height: 220px; animation: pulse 1.5s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.site-foot { margin-top: var(--space-14); padding-top: var(--space-4); border-top: 0.5px solid var(--edge-strong); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); justify-content: space-between; }

/* Mini page preview (thumbnails): solid content, hairline only */
.mini { position: relative; flex: none; outline: 1px solid var(--page-edge); overflow: hidden; }
.mini > .yb-page { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }

/* ───────────── Editor layout ───────────── */
body.is-editor, body.is-previewing { overflow: hidden; }
/* The canvas sits between the panels and below the bar, so glass chrome covers only the flat ground
   and its text stays legible over any page in both themes. */
.workspace {
  position: fixed; z-index: 1; overflow: auto;
  top: calc(var(--chrome-top) - var(--space-2)); bottom: 0;
  left: calc(var(--lib-w) + var(--space-6)); right: calc(var(--insp-w) + var(--space-6));
  padding: var(--space-2) var(--space-4) var(--space-14);
  overscroll-behavior: contain;
  scroll-padding: var(--space-2) 0 var(--space-6);
}
.panel-scrim { position: fixed; inset: 0; z-index: 140; background: var(--scrim); }
.pages { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); min-width: min-content; margin: 0 auto; padding-top: var(--space-2); }
.page-frame { display: flex; flex-direction: column; gap: var(--space-2); }
.page-head { display: flex; align-items: center; gap: var(--space-2); min-height: 30px; }
.page-head .eyebrow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-head .page-tools { display: flex; gap: var(--space-1); opacity: 0.6; transition: opacity 0.15s var(--ease); }
.page-frame:hover .page-tools, .page-frame.is-active .page-tools, .page-tools:focus-within { opacity: 1; }
.page-frame.is-active .page-head .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--brand-marker); margin-right: var(--space-1); }
.page-stage { position: relative; outline: 1px solid var(--page-edge); background: var(--surface); touch-action: none; }
.page-stage > .yb-page { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.page-stage.drop-target { outline: 2px solid var(--select); }
.is-readonly .page-stage { touch-action: auto; }
.add-page-row { display: flex; justify-content: center; }

.guide-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.guide-layer .margin { position: absolute; border: 1px dashed var(--guide-margin); }
.guide-layer .startline { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--guide-margin); }
.guide-layer .gutter { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--guide-margin); }
.guide-layer .col { position: absolute; top: 0; bottom: 0; background: var(--guide-column); }
.guide-layer .snap-v, .guide-layer .snap-h { position: absolute; background: var(--guide); }
.guide-layer .snap-v { width: 1px; top: 0; bottom: 0; }
.guide-layer .snap-h { height: 1px; left: 0; right: 0; }

.sel-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.sel-box { position: absolute; border: 1.5px solid var(--select); pointer-events: none; }
.sel-box.is-multi { border-style: dashed; }
.sel-box.is-locked { border-style: dotted; }
.hover-box { position: absolute; border: 1px solid var(--select); pointer-events: none; opacity: 0.6; }
.marquee { position: absolute; border: 1px solid var(--select); background: var(--select-soft); }
.handle {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border: 1.5px solid var(--select); border-radius: var(--radius-pill); background: var(--handle-fill);
  pointer-events: auto; touch-action: none;
}
.handle[data-h="n"], .handle[data-h="s"] { width: 20px; height: 8px; margin: -4px 0 0 -10px; }
.handle[data-h="e"], .handle[data-h="w"] { width: 8px; height: 20px; margin: -10px 0 0 -4px; }
.handle[data-h="nw"], .handle[data-h="se"] { cursor: nwse-resize; }
.handle[data-h="ne"], .handle[data-h="sw"] { cursor: nesw-resize; }
.handle[data-h="n"], .handle[data-h="s"] { cursor: ns-resize; }
.handle[data-h="e"], .handle[data-h="w"] { cursor: ew-resize; }
.handle[data-h="rot"] { cursor: grab; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.rot-stem { position: absolute; width: 1.5px; background: var(--select); }
.size-tag {
  position: absolute; transform: translate(-50%, 0); padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--select); color: var(--on-select); font-size: var(--font-size-3xs); font-weight: var(--fw-tap);
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: var(--leading-normal);
}

/* Library and inspector: Standard preset, Regular material, capsule shadow */
.library, .inspector {
  position: fixed; top: var(--chrome-top); bottom: var(--space-4); z-index: 150;
  display: flex; border-radius: var(--radius-lg);
  box-shadow: var(--glass-capsule-shadow);
}
.library { left: var(--space-4); width: var(--lib-w); }
.inspector { right: var(--space-4); width: var(--insp-w); flex-direction: column; }
.rail { flex: none; width: 72px; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-1); border-right: 0.5px solid var(--edge); overflow-y: auto; }
.rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-2) 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-primary); cursor: pointer;
  font-size: var(--font-size-3xs); font-weight: var(--fw-tap); line-height: var(--leading-normal);
  transition: background 0.15s var(--ease), transform 0.12s var(--ease);
}
.rail-btn .icon { font-size: var(--icon-size-toolbar); color: var(--icon); }
.rail-btn:hover { background: var(--nav-hover); }
.rail-btn:active { transform: scale(0.97); }
.rail-btn[aria-selected="true"] { background: var(--selected-fill); }
.lib-panel { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-3) var(--space-6) var(--space-4); }
.panel-title { font-size: var(--font-size-xl); letter-spacing: var(--tracking-display); line-height: var(--leading-snug); margin-bottom: var(--space-1); }
.panel-sub { margin-bottom: var(--space-4); }
.lib-group { margin-top: var(--space-5); }
.lib-group > .eyebrow { margin-bottom: var(--space-2); }
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1);
  padding: var(--space-2); border: 0.5px solid var(--edge); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); cursor: pointer; text-align: left; overflow: hidden;
  transition: border-color 0.15s var(--ease), transform 0.12s var(--ease);
}
.tile:hover { border-color: var(--edge-strong); }
.tile:active { transform: scale(0.97); }
.tile-preview { position: relative; height: 84px; border-radius: 4px; overflow: hidden; display: grid; place-items: center; background: var(--preview-page); outline: 0.5px solid var(--edge); pointer-events: none; }
.tile-preview--tall { height: 132px; background: var(--bg); outline: 0; }
.tile-preview.is-dark { background: var(--preview-dark); }
.tile-name { font-size: var(--font-size-xs); font-weight: var(--fw-tap); line-height: var(--leading-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.tile-sub { font-size: var(--font-size-3xs); font-weight: var(--fw-small); color: var(--text-secondary); line-height: var(--leading-normal); padding: 0 2px; }
.text-tile { padding: var(--space-3); gap: var(--space-1); }
.text-tile .sample { color: var(--text-primary); line-height: 1.15; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
.photo-tile { aspect-ratio: 1; padding: 0; border: 0.5px solid var(--edge); border-radius: var(--radius-xs); overflow: hidden; background: var(--fill-subtle); cursor: grab; position: relative; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.photo-tile .in-use { position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--select); box-shadow: 0 0 0 2px var(--surface); }
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-3);
  border: 1px dashed var(--edge-strong); border-radius: var(--radius-sm); text-align: center; cursor: pointer;
  background: var(--surface); color: var(--text-primary); width: 100%;
}
.dropzone .icon { font-size: var(--icon-size-tile); color: var(--icon); }
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone strong { font-size: var(--font-size-sm); }
.list { display: flex; flex-direction: column; gap: 2px; }
.list-row {
  display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
  border-radius: var(--radius-xs); border: 0.5px solid transparent; background: transparent; cursor: pointer; color: var(--text-primary);
}
.list-row:hover { background: var(--nav-hover); }
.list-row.is-selected { background: var(--selected-fill); }
.list-row .icon { font-size: var(--icon-size-sm); color: var(--icon); }
.list-row .row-name { flex: 1; min-width: 0; font-size: var(--font-size-sm); font-weight: var(--fw-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--leading-normal); }
.list-row.is-selected .row-name { font-weight: var(--fw-tap); }
.list-row .row-tools { display: flex; gap: 2px; }
.list-row.is-hidden .row-name { opacity: 0.5; }
.list-row.drag-over-top { box-shadow: inset 0 2px 0 var(--accent); }
.list-row.drag-over-bottom { box-shadow: inset 0 -2px 0 var(--accent); }
.page-row .mini-wrap { flex: none; width: 56px; height: 56px; display: grid; place-items: center; }
.layer-group { margin-left: var(--space-4); }

/* Inspector */
.ins-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 0.5px solid var(--edge); }
.ins-head h2 { flex: 1; min-width: 0; font-size: var(--font-size-lg); letter-spacing: var(--tracking-display); line-height: var(--leading-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-4) var(--space-6); }
.ins-sec { padding: var(--space-4) 0; border-bottom: 0.5px solid var(--edge); display: grid; gap: var(--space-3); }
.ins-sec:last-child { border-bottom: 0; }
.ins-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.ins-row:has(> .seg) { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.ins-lab { font-size: var(--font-size-xs); font-weight: var(--fw-small); color: var(--text-primary); line-height: var(--leading-normal); }
.ins-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.num-field { position: relative; display: flex; align-items: center; }
.num-field > span { position: absolute; left: var(--space-2); font-size: var(--font-size-3xs); font-weight: var(--fw-caps); color: var(--text-secondary); pointer-events: none; letter-spacing: var(--tracking-wide); }
.num-field > .ins-input { padding-left: 22px; }
.slider-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 44px; align-items: center; gap: var(--space-1); }
.slider-row > output { font-size: var(--font-size-xs); font-weight: var(--fw-small); text-align: right; font-variant-numeric: tabular-nums; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.swatch {
  width: 24px; height: 24px; padding: 0; border-radius: var(--radius-pill); cursor: pointer;
  border: 0.5px solid var(--edge-strong); position: relative;
  transition: transform 0.12s var(--ease);
}
.swatch:active { transform: scale(0.92); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }
.swatch--none { background: var(--surface); overflow: hidden; }
.swatch--none::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: var(--danger); transform: rotate(45deg); }
.swatch-custom { position: relative; width: 24px; height: 24px; border-radius: var(--radius-pill); overflow: hidden; border: 0.5px solid var(--edge-strong); }
.swatch-custom input { position: absolute; inset: -8px; width: 40px; height: 40px; border: 0; padding: 0; cursor: pointer; }
.panel-toggle { display: none; }

/* Floating capsules over the canvas: crop bar */
.mode-banner {
  position: fixed; left: 50%; bottom: var(--space-6); z-index: 160; transform: translateX(-50%);
  border-radius: var(--radius-pill); box-shadow: var(--glass-capsule-shadow);
}
.mode-banner-inner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); font-size: var(--font-size-sm); font-weight: var(--fw-tap); white-space: nowrap; }

/* ───────────── Preview mode: a full-screen solid stage ───────────── */
.preview { position: fixed; inset: 0; z-index: 260; display: flex; flex-direction: column; background: var(--bg); color: var(--text-primary); }   /* a full-screen view: solid */
.preview-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: var(--space-6) var(--space-6) 0; overflow: hidden; }
.preview-bar-wrap { display: flex; justify-content: center; padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
.preview-bar { border-radius: var(--radius-pill); box-shadow: var(--glass-capsule-shadow); }
.preview-bar-inner { display: flex; align-items: center; gap: var(--space-2); height: var(--bar-h); padding: 0 var(--space-2) 0 var(--space-4); }
.preview-count { min-width: 64px; text-align: center; font-size: var(--font-size-sm); font-weight: var(--fw-tap); font-variant-numeric: tabular-nums; }
.preview-name { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-sm); font-weight: var(--fw-small); }
.preview-flag { position: absolute; top: var(--space-4); left: 50%; transform: translateX(-50%); }

/* Print: only the rendered pages */
#export-host { position: fixed; left: -100000px; top: 0; pointer-events: none; }
#print-root { display: none; }
@media print {
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; }
  #print-root .print-page { position: relative; overflow: hidden; break-after: page; page-break-after: always; }
  #print-root .print-page:last-child { break-after: auto; page-break-after: auto; }
  html, body { background: transparent !important; height: auto; overflow: visible !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ───────────── Responsive ───────────── */
@media (max-width: 1180px) {
  :root { --lib-w: 312px; --insp-w: 280px; }
}
@media (max-width: 980px) {
  .workspace { left: 0; right: 0; padding-left: var(--space-4); padding-right: var(--space-4); }
  .panel-toggle { display: inline-flex; }
  .library, .inspector { visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity 0.2s var(--ease), transform 0.25s var(--ease-spring), visibility 0s linear 0.25s; }
  .library[data-open], .inspector[data-open] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; z-index: 200; }
  .library { width: min(var(--lib-w), calc(100vw - 2 * var(--space-4))); }
  .inspector { width: min(320px, calc(100vw - 2 * var(--space-4))); }
  .hide-md { display: none !important; }
}
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
  .doc-name { max-width: 96px; min-width: 0; flex: 1 1 auto; }
  .page-head .page-tools .btn--icon { min-width: 36px; min-height: 36px; width: 36px; height: 36px; }
  .home-head { grid-template-columns: minmax(0, 1fr); }
  .home-actions { justify-content: flex-start; }
  .home-head h1 { font-size: var(--font-size-3xl); }
  .topbar-inner { gap: var(--space-1); padding-left: var(--space-2); }
  .preview-name { display: none; }
}

/* ───────────── Motion, transparency ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  button:active, a:active, [role="button"]:active { transform: none !important; }
  .gslider .gslider-thumb { --ts: 1 !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass::before { background: var(--modal-bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .glass::after { display: none; }
  .glass.is-full::before { background: var(--sheet-solid) !important; }
  :root { --gi-glow-rgb: var(--gi-ink-rgb); --gi-glow-peak: var(--glass-glow-peak-reduced); --gi-glow-flat: var(--glass-glow-flat-reduced); }
  .gi-fx::after { display: none; }
  .gslider.is-pressed .gslider-thumb, .gslider:active .gslider-thumb { background: var(--modal-bg); border-color: var(--control-outline); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--glass-thumb-shadow); }
}