/* vendor/compose-fonts-core.css */
/* Generated release font CSS for Inter core UI family. WOFF2 assets are content-fingerprinted at build time. */
@font-face { font-family:'Inter'; src:url("/assets/fonts/inter-latin-400-normal.8909904ab6c872eb.woff2") format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url("/assets/fonts/inter-latin-400-italic.7ea9d2f1274cebee.woff2") format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Inter'; src:url("/assets/fonts/inter-latin-500-normal.f3779f1efccc4bdc.woff2") format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url("/assets/fonts/inter-latin-500-italic.ec7b5fad608d36d1.woff2") format('woff2'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Inter'; src:url("/assets/fonts/inter-latin-600-normal.f9a06e79cd3a2a20.woff2") format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url("/assets/fonts/inter-latin-600-italic.c45ec86655c4614e.woff2") format('woff2'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Inter'; src:url("/assets/fonts/inter-latin-700-normal.6f56409fd3d64bb8.woff2") format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url("/assets/fonts/inter-latin-700-italic.facd8f930c88e4bf.woff2") format('woff2'); font-weight:700; font-style:italic; font-display:swap; }

/* css/0-layers.css */
/* Tolstoy Compose — simple cascade order after surface CSS reset.
   Keep this file first. It declares order only. */

@layer tokens, reset, environment, layout, surfaces, editor, components, utilities, overrides;

/* css/1-tokens.css */
/* Tolstoy Compose — current UI system tokens.
   One source of truth for the reduced editorial design language: shape, type,
   spacing, surfaces, controls, motion, viewport, and accessibility boundaries. */
@layer tokens {
  :root {
  --compose-css-ready: 1;
    color-scheme: light;

    --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* Reduced type roles. Keep feature/component typography mapped through these roles. */
    --type-size-meta: 13px;
    --type-size-control: 14px;
    --type-size-body: 14px;
    --type-size-heading: 16px;
    --type-line-meta: 1.28;
    --type-line-control: 1.35;
    --type-line-body: 1.45;
    --type-line-heading: 1.22;
    --type-weight-regular: 400;
    --type-weight-strong: 600;
    --type-tracking-heading: -0.012em;
    --type-tracking-label: 0.04em;

    --ui-field-font-size: var(--type-size-control);
    --ui-field-line-height: var(--type-line-control);
    --ui-field-font-weight: var(--type-weight-regular);

    --doc-body-font: 'Newsreader', Georgia, 'Times New Roman', serif;
    --doc-heading-font: 'Newsreader', Georgia, 'Times New Roman', serif;
    --doc-font-size: 15px;
    --doc-line-height: 1.50;
    --doc-paragraph-spacing: 0.70em;
    --doc-line-width: 600px;
    --doc-line-half-width: 300px;
    --doc-body-color: var(--doc-body-text);
    /* First-paint fallback mirrors the default Slate document palette. Runtime
       document appearance replaces these with the active document's own
       Primary / Secondary / Tertiary families. */
    --compose-chart-series-1: #343638;
    --compose-chart-series-2: #686B6D;
    --compose-chart-series-3: #8D8F8F;
    --compose-chart-series-4: #191919;
    --compose-chart-series-5: #494949;
    --compose-chart-series-6: #7E7E7E;
    --compose-chart-series-7: #4B4B4B;
    --compose-chart-series-8: #828282;
    --compose-chart-series-9: #909090;
    --compose-chart-series-10: #050505;
    --compose-chart-series-11: #2F2F2F;
    --compose-chart-series-12: #616161;
    --doc-heading-color: #343638;
    --doc-heading-primary: #343638;
    --doc-heading-secondary: #686B6D;
    --doc-heading-tertiary: #6F7171;
    --doc-link-color: #343638;
    --doc-muted-color: #74726D;
    --doc-rule-color: #908F8A;
    --doc-fill-muted-color: #EBEAE7;
    --doc-selection-bg: #D9D9D6;
    --doc-selection-text: #2A2823;
    --doc-review-anchor-bg: #E3E3DF;
    --doc-review-anchor-hover-bg: #D9D9D6;
    --doc-review-anchor-current-bg: #D2D1CE;
    --doc-review-anchor-underline: #343638;
    --doc-review-anchor-current-underline: #343638;
    --doc-highlight-bg: #D8D8D5;
    --doc-highlight-text: #1F1E1B;
    --doc-search-result-bg: #E2E1DE;
    --doc-search-current-bg: #D6D6D4;
    /* Heading scale is relative to the selected document body size. */
    --doc-h1-size: 2em;
    --doc-h2-size: 1.5em;
    --doc-h3-size: 1.25em;
    --doc-h4-size: 1.125em;
    --doc-h5-size: 1em;
    --doc-h6-size: 1em;
    --doc-note-font-size: clamp(13px, 0.90em, 24px);
    --doc-note-label-size: clamp(12px, 0.74em, 16px);
    --doc-note-line-height: 1.50;

    --ed-body-font: var(--doc-body-font);
    --ed-heading-font: var(--doc-heading-font);
    --ed-font-size: var(--doc-font-size);
    --ed-line-height: var(--doc-line-height);
    --ed-paragraph-spacing: var(--doc-paragraph-spacing);
    --ed-line-width: var(--doc-line-width);
    --ed-line-half-width: var(--doc-line-half-width);
    --ed-body-color: var(--doc-body-color);
    --ed-heading-color: var(--doc-heading-color);
    --ed-h1-size: var(--doc-h1-size);
    --ed-h2-size: var(--doc-h2-size);
    --ed-h3-size: var(--doc-h3-size);
    --ed-h4-size: var(--doc-h4-size);
    --ed-h5-size: var(--doc-h5-size);
    --ed-h6-size: var(--doc-h6-size);
    --ed-note-font-size: var(--doc-note-font-size);
    --ed-note-label-size: var(--doc-note-label-size);
    --ed-note-line-height: var(--doc-note-line-height);

    /* Reduced spacing roles. Use calc() from these roles only when a larger
       layout boundary is required, rather than introducing another token. */
    --space-micro: 2px;
    --space-tight: 4px;
    --space-related: 8px;
    --space-cluster: 12px;
    --space-section: 16px;

    /* Shape system. Radius follows semantic role rather than local geometry:
       detail < control < card < surface, with full reserved for circles and
       genuine capsules. Responsive states may resize controls, but do not
       change their shape identity. */
    --radius-none: 0;
    --radius-detail: 4px;
    --radius-control: 8px;
    --radius-card: 12px;
    --radius-surface: 16px;
    --radius-full: 999px;

    /* Alpha-only mask roles for decorative continuation and reveal effects.
       Mask colour itself is not rendered; only opacity participates. */
    --mask-opaque: #000000;
    --mask-soft: rgba(0, 0, 0, 0.72);

    --sidebar-min-w: 320px;
    --sidebar-ideal-w: 27vw;
    --sidebar-max-w: 420px;
    --sidebar-w: clamp(var(--sidebar-min-w), var(--sidebar-ideal-w), var(--sidebar-max-w));
    --sidebar-overlay-w: clamp(320px, 46vw, 410px);
    --sidebar-overlay-max-inline: calc(100vw - 64px);
    --sidebar-overlay-max-px: 410px;
    --sidebar-overlay-edge-reserve: 64px;
    --sidebar-min-canvas-inline: 520px;
    --sidebar-presentation-release-inline: 48px;
    --sidebar-narrow-content-gap: 24px;
    --sidebar-wide-content-gap: 32px;

    /* Frame contract: the browser/OS owns status-bar, display-cutout, and
       Home-indicator regions. Compose sizes and positions only inside the
       safe application viewport it receives; no safe-area inset tokens may
       participate in production layout. */
    --app-viewport-inline: 100vw;
    --app-viewport-block: 100vh;
    --app-small-viewport-block: 100vh;
    --app-visual-viewport-block: var(--app-small-viewport-block);
    --app-visual-viewport-inline: 100vw;
    --app-visual-viewport-offset-top: 0px;
    --app-visual-viewport-offset-left: 0px;
    --app-visual-viewport-center-inline: 50vw;
    --app-visual-viewport-bottom-edge: var(--app-visual-viewport-block);
    --app-keyboard-safe-block: var(--app-visual-viewport-block);
    --app-shell-inline-size: 100%;
    --app-editor-paper-min-block-size: calc(var(--app-small-viewport-block) - var(--topbar-h) - var(--floating-chrome-plate-block-size) - 88px);

    --control-height: 32px;
    --small-control-height: 28px;
    --touch-target: 44px;
    --control-block-size: max(40px, var(--control-height));
    --control-touch-target: max(44px, var(--touch-target));
    --accessibility-hit-target-min: var(--touch-target);

    /* Floating UI has one ordinary tool width, one compact menu width, and one
       deliberately deeper editor width. Ordinary object tools do not resize as
       customers move between Link, Image, Table, Citation, Chart, or Break. */
    --floating-menu-inline-size: 15rem;
    --floating-tool-inline-size: 24rem;
    --floating-deep-inline-size: 44rem;

    --surface-overlay-viewport-gap: var(--space-cluster);
    --surface-overlay-max-block: min(calc(var(--app-viewport-block) - (2 * var(--surface-overlay-viewport-gap))), 72dvh);
    --surface-notice-max-block: min(calc(var(--app-viewport-block) - var(--topbar-h) - var(--floating-chrome-plate-block-size) - (4 * var(--space-cluster))), 520px);
    --surface-command-palette-max-block: min(calc(var(--app-viewport-block) - 10dvh - (2 * var(--space-cluster))), 720px);
    --surface-modal-max-block: min(calc(var(--app-viewport-block) - (2 * var(--space-section))), 720px);

    /* Reduced motion roles. Future motion work should extend behaviour through
       these jobs rather than creating local duration/easing systems. */
    --motion-duration-micro: 110ms;
    --motion-duration-state: 140ms;
    --motion-duration-exit: 130ms;
    --motion-duration-surface: 170ms;
    --motion-duration-panel-sheet: 240ms;
    --motion-duration-reduced: 1ms;
    --motion-ease-standard: cubic-bezier(.2, 0, .2, 1);
    --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
    --motion-ease-in: cubic-bezier(.4, 0, 1, 1);
    --motion-ease-emphasized: cubic-bezier(.2, 0, 0, 1);
    --motion-distance-reveal: 6px;
    --motion-distance-surface: 10px;
    --motion-distance-sheet: 18px;
    --motion-scale-press: .968;

    --z-toolbar: 20;
    --z-topbar: 30;
    --z-overlay: 60;
    --z-sidebar: 70;
    --z-popover: 80;
    --z-modal: 90;
    --z-toast: 100;
    --z-tip: 110;
    --z-window-separator: 120;

    --sidebar-sheet-snap-min: .42;
    --sidebar-sheet-snap-default: .72;
    --sidebar-sheet-snap-max: .92;
    --sidebar-sheet-default-snap-index: 2;
    --sidebar-sheet-closed-translate-y: 105%;
    --sidebar-sheet-closed-transform: translateY(var(--sidebar-sheet-closed-translate-y));
    --sidebar-sheet-closed-block-size: min(calc(var(--app-viewport-block) * var(--sidebar-sheet-snap-default)), 640px);
    --sidebar-sheet-open-block-size: calc(var(--app-viewport-block) * var(--sidebar-sheet-snap-max));
    --sidebar-sheet-open-transform: none;
    --sidebar-sheet-max-block-fraction: .92;
    --sidebar-sheet-dismiss-threshold: .25;
    --sidebar-sheet-drag-zone: 28px;
    --sidebar-sheet-motion-duration: var(--motion-duration-panel-sheet);
    --sidebar-sheet-motion-easing: var(--motion-ease-emphasized);
    --sidebar-sheet-transition: transform var(--sidebar-sheet-motion-duration) var(--sidebar-sheet-motion-easing), block-size var(--sidebar-sheet-motion-duration) var(--sidebar-sheet-motion-easing);
    --sidebar-sheet-transform-transition: transform var(--sidebar-sheet-motion-duration) var(--sidebar-sheet-motion-easing);
    --sidebar-sheet-instant-transition: none;

    /* Calm editorial colour system.
       One warm-neutral scale governs every structural relationship. The app
       ground and editor surround intentionally share one value, the document
       is the quietest light surface, and utility layers rise in small,
       controlled luminance steps. Accent is state, never architecture. */
    --colour-ink-950: #1F1E1B;
    --colour-ink-800: #45423C;
    --colour-ink-650: #706B63;
    --colour-ink-450: #9D978E;
    --colour-stone-500: #BDB9AF;
    --colour-stone-400: #D8D5CC;
    --colour-stone-300: #E4E2DB;
    --colour-linen-250: #ECEDE8;
    --colour-linen-225: #EFEEE9;
    --colour-linen-200: #F2F1EC;
    --colour-linen-150: #F5F4EF;
    --colour-linen-100: #F7F6F1;
    --colour-linen-75: #F9F8F4;
    --colour-linen-50: #FCFBF8;
    /* Warm ink and mineral scale. The undertone is deliberately restrained:
       red and green remain close, with blue reduced only enough to avoid the
       generic blue-grey cast of conventional SaaS dark themes. */
    --colour-night-950: #171715;
    --colour-night-900: #1F1F1C;
    --colour-night-850: #24231F;
    --colour-night-825: #292824;
    --colour-night-800: #302F2A;
    --colour-night-750: #393832;
    --colour-night-text: #F4F1EA;
    --colour-night-text-sec: #D8D2C7;
    --colour-night-text-muted: #AAA398;
    --colour-night-text-disabled: #827C72;

    --surface-document-paper: var(--colour-linen-75);
    --surface-document-paper-dark: var(--colour-night-825);
    --surface-app-ground: var(--colour-linen-250);
    --surface-canvas: var(--surface-app-ground);
    --surface-panel: var(--colour-linen-200);
    --surface-card: var(--colour-linen-100);
    --surface-field: var(--colour-linen-50);
    --surface-floating: var(--colour-linen-150);
    --surface-floating-chrome: var(--colour-linen-225);
    --surface-scrim: rgb(31 30 27 / 0.34);
    --surface-document-boundary: color-mix(in srgb, var(--colour-ink-950) 8%, transparent);
    --surface-workspace-divider: color-mix(in srgb, var(--colour-ink-950) 11%, transparent);
    --surface-window-separator: color-mix(in srgb, var(--colour-ink-950) 18%, transparent);
    --surface-sidebar-shell-base: var(--surface-panel);
    --surface-sidebar-shell: var(--surface-sidebar-shell-base);
    --surface-sidebar-card: var(--surface-card);
    --surface-sidebar-shell-border: color-mix(in srgb, var(--colour-ink-950) 12%, transparent);
    --surface-border: color-mix(in srgb, var(--colour-ink-950) 14%, transparent);
    --surface-border-strong: color-mix(in srgb, var(--colour-ink-950) 25%, transparent);
    --surface-filter-floating: none;

    /* Fixed-light publication-cover preview roles. The preview represents the
       exported cover rather than the active app theme, so its contrast stays
       stable in both light and dark UI modes. */
    --publication-cover-preview-text: #FFFFFF;
    --publication-cover-preview-logo-surface: #FFFFFF;
    --publication-cover-preview-shade-soft: rgb(17 17 17 / 0.18);
    --publication-cover-preview-shade-medium: rgb(17 17 17 / 0.72);
    --publication-cover-preview-shade-strong: rgb(17 17 17 / 0.82);

    --text: var(--colour-ink-950);
    --text-sec: var(--colour-ink-800);
    --text-muted: var(--colour-ink-650);
    /* Small normal-weight metadata needs a slightly stronger muted role to
       retain WCAG 4.5:1 on the warm app-ground/sidebar blend. */
    --text-muted-small: color-mix(in srgb, var(--text-muted) 96%, var(--text) 4%);
    --text-disabled: var(--colour-ink-450);

    --border: var(--surface-border);
    --border-strong: var(--surface-border-strong);
    --fill-muted: color-mix(in srgb, var(--surface-panel) 82%, var(--text) 3%);
    --fill-subtle: var(--fill-muted);

    /* Premium material accent family. Each option has a readable ink for links
       and focus, an opaque but restrained solid for selected controls and
       primary actions, and an explicit foreground for reliable contrast. The
       family is collected rather than generic: metal, botanical, mineral,
       fruit, and wine references. Large surfaces remain neutral. */
    --accent-pewter-ink: #45484E;
    --accent-pewter-vivid: #62666D;
    --accent-pewter-on: #FFFFFF;
    --accent-aubergine-ink: #54345F;
    --accent-aubergine-vivid: #764B80;
    --accent-aubergine-on: #FFFFFF;
    --accent-lapis-ink: #244B6B;
    --accent-lapis-vivid: #315F88;
    --accent-lapis-on: #FFFFFF;
    --accent-olive-ink: #53602F;
    --accent-olive-vivid: #6E7B43;
    --accent-olive-on: #FFFFFF;
    --accent-mango-ink: #6C5000;
    --accent-mango-vivid: #F3C247;
    --accent-mango-on: #1F1E1B;
    --accent-persimmon-ink: #7A3522;
    --accent-persimmon-vivid: #BC5431;
    --accent-persimmon-on: #FFFFFF;
    --accent-claret-ink: #6E243F;
    --accent-claret-vivid: #943C5A;
    --accent-claret-on: #FFFFFF;

    /* Dark appearance is not a literal inversion of the light pigments. Each
       accent receives an authored night treatment: a deep material fill for
       selected controls, a readable foreground for links and active icons, a
       stone-like boundary, a brighter focus value, and a compact picker swatch.
       Pewter becomes black lacquer in dark appearance, with an ivory swatch ring
       so the near-black material remains deliberate rather than disabled. */
    --accent-pewter-dark-solid: #11110F;
    --accent-pewter-dark-link: #CBC7BD;
    --accent-pewter-dark-border: #77746B;
    --accent-pewter-dark-focus: #DDD8CC;
    --accent-pewter-dark-swatch: #11110F;
    --accent-pewter-dark-swatch-ring: #DDD8CC;
    --accent-pewter-dark-on: #F4F1EA;
    --accent-aubergine-dark-solid: #3B2A3A;
    --accent-aubergine-dark-link: #C79ABE;
    --accent-aubergine-dark-border: #91708D;
    --accent-aubergine-dark-focus: #DEB2D5;
    --accent-aubergine-dark-swatch: #A878A0;
    --accent-aubergine-dark-on: #F4F1EA;
    --accent-lapis-dark-solid: #233644;
    --accent-lapis-dark-link: #8DAFC5;
    --accent-lapis-dark-border: #64859C;
    --accent-lapis-dark-focus: #A9C9DC;
    --accent-lapis-dark-swatch: #6E91AA;
    --accent-lapis-dark-on: #F4F1EA;
    --accent-olive-dark-solid: #303824;
    --accent-olive-dark-link: #A1B375;
    --accent-olive-dark-border: #78885A;
    --accent-olive-dark-focus: #BFD18F;
    --accent-olive-dark-swatch: #859661;
    --accent-olive-dark-on: #F4F1EA;
    --accent-mango-dark-solid: #3D321B;
    --accent-mango-dark-link: #D7B85D;
    --accent-mango-dark-border: #967E42;
    --accent-mango-dark-focus: #F0D17A;
    --accent-mango-dark-swatch: #D2AA4B;
    --accent-mango-dark-on: #F4F1EA;
    --accent-persimmon-dark-solid: #402720;
    --accent-persimmon-dark-link: #D99A80;
    --accent-persimmon-dark-border: #9E6B56;
    --accent-persimmon-dark-focus: #E7A287;
    --accent-persimmon-dark-swatch: #B87358;
    --accent-persimmon-dark-on: #F4F1EA;
    --accent-claret-dark-solid: #3D232D;
    --accent-claret-dark-link: #D99BB0;
    --accent-claret-dark-border: #A0697B;
    --accent-claret-dark-focus: #E4A6B9;
    --accent-claret-dark-swatch: #B36B83;
    --accent-claret-dark-on: #F4F1EA;

    --accent-ink: var(--accent-pewter-ink);
    --accent-vivid: var(--accent-pewter-vivid);
    --accent-on-vivid: var(--accent-olive-on);
    --accent-dark-solid: var(--accent-pewter-dark-solid);
    --accent-dark-link: var(--accent-pewter-dark-link);
    --accent-dark-border: var(--accent-pewter-dark-border);
    --accent-dark-focus: var(--accent-pewter-dark-focus);
    --accent-dark-swatch: var(--accent-pewter-dark-swatch);
    --accent-dark-on: var(--accent-pewter-dark-on);
    --accent: var(--accent-ink);
    --accent-foreground: var(--accent-ink);
    --accent-solid: var(--accent-vivid);
    --accent-solid-foreground: var(--accent-on-vivid);
    --accent-solid-state-mix: var(--colour-ink-950);
    --accent-solid-hover: color-mix(in srgb, var(--accent-solid) 94%, var(--accent-solid-state-mix) 6%);
    --accent-solid-active: color-mix(in srgb, var(--accent-solid) 88%, var(--accent-solid-state-mix) 12%);
    --accent-soft: color-mix(in srgb, var(--accent-vivid) 6%, var(--surface-panel) 94%);
    --accent-surface: color-mix(in srgb, var(--accent-vivid) 10%, var(--surface-card) 90%);
    --accent-surface-hover: color-mix(in srgb, var(--accent-vivid) 14%, var(--surface-card) 86%);
    --accent-surface-active: color-mix(in srgb, var(--accent-vivid) 18%, var(--surface-card) 82%);
    --accent-border: color-mix(in srgb, var(--accent-vivid) 42%, transparent);
    --accent-border-strong: var(--accent-solid);
    --accent-focus: color-mix(in srgb, var(--accent-ink) 92%, var(--text) 8%);
    --fill-active: var(--accent-surface-active);

    /* Semantic states are stable and do not inherit the personal accent. */
    --status-info: #4E628F;
    --status-success: #506A45;
    --status-warning: #8A5A1E;
    --status-danger: #8D3E4A;
    --danger: var(--status-danger);
    --danger-surface: color-mix(in srgb, var(--danger) 8%, var(--surface-card) 92%);
    --danger-surface-hover: color-mix(in srgb, var(--danger) 13%, var(--surface-card) 87%);
    --danger-border: color-mix(in srgb, var(--danger) 40%, transparent);

    --control-surface: var(--surface-field);
    --control-surface-hover: color-mix(in srgb, var(--surface-field) 78%, var(--surface-panel) 22%);
    --control-surface-pressed: color-mix(in srgb, var(--text) 9%, var(--control-surface) 91%);
    --control-border: color-mix(in srgb, var(--text) 18%, transparent);
    --control-border-hover: color-mix(in srgb, var(--text) 29%, transparent);

    /* Hover, press, and temporary-open layers stay neutral. Persistent selection
       is different: it follows the active document palette so the company's
       document identity carries through compact controls and current-item
       surfaces without turning them into opaque primary actions. Focus remains
       an independent perimeter. */
    --state-layer-hover: color-mix(in srgb, var(--text) 6%, transparent);
    --state-layer-pressed: color-mix(in srgb, var(--text) 10%, transparent);
    --state-layer-open: color-mix(in srgb, var(--text) 8%, transparent);
    --state-layer-selected: color-mix(in srgb, var(--accent) 13%, transparent);
    --state-layer-selected-hover: color-mix(in srgb, var(--accent) 17%, transparent);
    --state-layer-selected-pressed: color-mix(in srgb, var(--accent) 21%, transparent);
    --state-layer-danger-hover: color-mix(in srgb, var(--danger) 7%, transparent);
    --state-layer-danger-pressed: color-mix(in srgb, var(--danger) 12%, transparent);

    /* Larger current rows/cards use the same restrained document-accent wash as
       plan selection. They remain quieter than compact selected controls, but
       carry enough pigment and boundary definition to read without a second look. */
    --state-surface-current: color-mix(in srgb, var(--control-surface) 89%, var(--accent) 11%);
    --state-border-current: color-mix(in srgb, var(--control-border-hover) 74%, var(--accent) 26%);

    /* Universal panel interior grammar. */
    --panel-card-bg: var(--surface-sidebar-card);
    --panel-card-border: color-mix(in srgb, var(--text) 10%, transparent);
    --panel-card-border-hover: color-mix(in srgb, var(--text) 18%, transparent);
    --panel-row-bg: color-mix(in srgb, var(--surface-card) 84%, var(--surface-panel) 16%);
    --panel-row-bg-hover: var(--surface-card);
    --panel-row-bg-active: var(--state-surface-current);
    --panel-row-border: color-mix(in srgb, var(--text) 8%, transparent);
    --panel-row-border-hover: var(--state-border-current);

    --focus-ring-color: var(--accent-focus);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --surface-focus-scroll-padding: calc(var(--focus-ring-width) + var(--focus-ring-offset) + var(--space-cluster));
    --surface-focus-scroll-padding-inline: calc(var(--focus-ring-width) + var(--focus-ring-offset) + var(--space-related));

    --scrollbar-track: transparent;
    --scrollbar-thumb: color-mix(in srgb, var(--text) 20%, transparent);

    --bg-app: var(--surface-app-ground);
    --bg-canvas: var(--surface-canvas);
    --bg-overlay: var(--surface-scrim);

    --doc-canvas: var(--surface-canvas);
    --doc-editor-bg: var(--surface-document-paper);
    --doc-body-text: #2A2823;
    --doc-heading-text: #181713;
    --doc-highlight-bg: #E8D98D;
    --doc-highlight-text: #211E16;
    --doc-print-bg: #FFFFFF;
    --doc-print-text: #000000;
    --doc-print-border: #CCCCCC;
    --doc-print-muted: #333333;
    --ed-bg: var(--doc-editor-bg);
  }

  /* Current identifiers are explicit hue choices. Legacy identifiers remain
     CSS aliases so first paint is still correct before persisted state is
     normalised by JavaScript. */
  :root[data-accent="grey"] {
    --accent-ink: var(--accent-pewter-ink);
    --accent-vivid: var(--accent-pewter-vivid);
    --accent-on-vivid: var(--accent-pewter-on);
    --accent-dark-solid: var(--accent-pewter-dark-solid);
    --accent-dark-link: var(--accent-pewter-dark-link);
    --accent-dark-border: var(--accent-pewter-dark-border);
    --accent-dark-focus: var(--accent-pewter-dark-focus);
    --accent-dark-swatch: var(--accent-pewter-dark-swatch);
    --accent-dark-on: var(--accent-pewter-dark-on);
  }

  :root[data-accent="purple"],
  :root[data-accent="blue-purple"] {
    --accent-ink: var(--accent-aubergine-ink);
    --accent-vivid: var(--accent-aubergine-vivid);
    --accent-on-vivid: var(--accent-aubergine-on);
    --accent-dark-solid: var(--accent-aubergine-dark-solid);
    --accent-dark-link: var(--accent-aubergine-dark-link);
    --accent-dark-border: var(--accent-aubergine-dark-border);
    --accent-dark-focus: var(--accent-aubergine-dark-focus);
    --accent-dark-swatch: var(--accent-aubergine-dark-swatch);
    --accent-dark-on: var(--accent-aubergine-dark-on);
  }

  :root[data-accent="blue"] {
    --accent-ink: var(--accent-lapis-ink);
    --accent-vivid: var(--accent-lapis-vivid);
    --accent-on-vivid: var(--accent-lapis-on);
    --accent-dark-solid: var(--accent-lapis-dark-solid);
    --accent-dark-link: var(--accent-lapis-dark-link);
    --accent-dark-border: var(--accent-lapis-dark-border);
    --accent-dark-focus: var(--accent-lapis-dark-focus);
    --accent-dark-swatch: var(--accent-lapis-dark-swatch);
    --accent-dark-on: var(--accent-lapis-dark-on);
  }

  :root[data-accent="olive"] {
    --accent-ink: var(--accent-olive-ink);
    --accent-vivid: var(--accent-olive-vivid);
    --accent-on-vivid: var(--accent-olive-on);
    --accent-dark-solid: var(--accent-olive-dark-solid);
    --accent-dark-link: var(--accent-olive-dark-link);
    --accent-dark-border: var(--accent-olive-dark-border);
    --accent-dark-focus: var(--accent-olive-dark-focus);
    --accent-dark-swatch: var(--accent-olive-dark-swatch);
    --accent-dark-on: var(--accent-olive-dark-on);
  }

  :root[data-accent="yellow"] {
    --accent-ink: var(--accent-mango-ink);
    --accent-vivid: var(--accent-mango-vivid);
    --accent-on-vivid: var(--accent-mango-on);
    --accent-dark-solid: var(--accent-mango-dark-solid);
    --accent-dark-link: var(--accent-mango-dark-link);
    --accent-dark-border: var(--accent-mango-dark-border);
    --accent-dark-focus: var(--accent-mango-dark-focus);
    --accent-dark-swatch: var(--accent-mango-dark-swatch);
    --accent-dark-on: var(--accent-mango-dark-on);
    --accent-solid-state-mix: #FFFFFF;
  }

  :root[data-accent="orange"],
  :root[data-accent="yellow-orange"] {
    --accent-ink: var(--accent-persimmon-ink);
    --accent-vivid: var(--accent-persimmon-vivid);
    --accent-on-vivid: var(--accent-persimmon-on);
    --accent-dark-solid: var(--accent-persimmon-dark-solid);
    --accent-dark-link: var(--accent-persimmon-dark-link);
    --accent-dark-border: var(--accent-persimmon-dark-border);
    --accent-dark-focus: var(--accent-persimmon-dark-focus);
    --accent-dark-swatch: var(--accent-persimmon-dark-swatch);
    --accent-dark-on: var(--accent-persimmon-dark-on);
  }

  :root[data-accent="red"],
  :root[data-accent="maroon-red"] {
    --accent-ink: var(--accent-claret-ink);
    --accent-vivid: var(--accent-claret-vivid);
    --accent-on-vivid: var(--accent-claret-on);
    --accent-dark-solid: var(--accent-claret-dark-solid);
    --accent-dark-link: var(--accent-claret-dark-link);
    --accent-dark-border: var(--accent-claret-dark-border);
    --accent-dark-focus: var(--accent-claret-dark-focus);
    --accent-dark-swatch: var(--accent-claret-dark-swatch);
    --accent-dark-on: var(--accent-claret-dark-on);
  }

  @supports (block-size: 100dvh) {
    :root { --app-viewport-block: 100dvh; }
  }

  @supports (block-size: 100svh) {
    :root { --app-small-viewport-block: 100svh; }
  }


  [data-theme="dark"] {
    color-scheme: dark;
    /* Dark appearance mirrors the light hierarchy through a warm ink and
       mineral material system. The page reads like fine dark paper on an ink
       desk, while Olive remains an interaction accent rather than an ambient
       cast. Small channel differences are intentional and governed. */
    --surface-document-paper: var(--colour-night-825);
    --surface-document-paper-dark: var(--colour-night-825);
    --surface-app-ground: var(--colour-night-950);
    --surface-canvas: var(--surface-app-ground);
    --surface-panel: var(--colour-night-900);
    --surface-card: var(--colour-night-850);
    --surface-field: var(--colour-night-750);
    --surface-floating: var(--colour-night-800);
    --surface-floating-chrome: var(--colour-night-900);
    --surface-scrim: rgb(0 0 0 / 0.60);
    --surface-document-boundary: color-mix(in srgb, var(--colour-night-text) 12%, transparent);
    --surface-workspace-divider: color-mix(in srgb, var(--colour-night-text) 14%, transparent);
    --surface-window-separator: color-mix(in srgb, var(--colour-night-text) 24%, transparent);
    --surface-sidebar-shell-border: color-mix(in srgb, var(--colour-night-text) 16%, transparent);
    --surface-border: color-mix(in srgb, var(--colour-night-text) 18%, transparent);
    --surface-border-strong: color-mix(in srgb, var(--colour-night-text) 30%, transparent);
    --text: var(--colour-night-text);
    --text-sec: var(--colour-night-text-sec);
    --text-muted: var(--colour-night-text-muted);
    --text-disabled: var(--colour-night-text-disabled);
    /* Dark accents are individually authored rather than mathematically lifted
       from the light palette. Links and active icons use the readable colour;
       compact selected controls use a deep tinted material with a clear border;
       focus uses the brightest controlled value. */
    --accent: var(--accent-dark-link);
    --accent-foreground: var(--accent-dark-link);
    --accent-solid: var(--accent-dark-solid);
    --accent-solid-foreground: var(--accent-dark-on);
    --accent-solid-state-mix: var(--accent-dark-border);
    --accent-solid-hover: color-mix(in srgb, var(--accent-solid) 90%, var(--accent-solid-state-mix) 10%);
    --accent-solid-active: color-mix(in srgb, var(--accent-solid) 82%, var(--accent-solid-state-mix) 18%);
    --accent-soft: color-mix(in srgb, var(--accent-dark-link) 7%, var(--surface-panel) 93%);
    --accent-surface: color-mix(in srgb, var(--accent-dark-link) 12%, var(--surface-card) 88%);
    --accent-surface-hover: color-mix(in srgb, var(--accent-dark-link) 16%, var(--surface-card) 84%);
    --accent-surface-active: color-mix(in srgb, var(--accent-dark-link) 20%, var(--surface-card) 80%);
    --accent-border: color-mix(in srgb, var(--accent-dark-border) 62%, transparent);
    --accent-border-strong: var(--accent-dark-border);
    --accent-focus: var(--accent-dark-focus);
    --danger: color-mix(in srgb, var(--status-danger) 62%, white 38%);
    --danger-surface: color-mix(in srgb, var(--status-danger) 16%, var(--surface-card) 84%);
    --danger-surface-hover: color-mix(in srgb, var(--status-danger) 23%, var(--surface-card) 77%);
    --danger-border: color-mix(in srgb, var(--danger) 58%, transparent);
    --control-border: color-mix(in srgb, var(--text) 22%, transparent);
    --control-border-hover: color-mix(in srgb, var(--text) 36%, transparent);

    /* Dark materials need slightly more pigment than their light equivalents
       because the warm night surfaces compress low-opacity state differences.
       Keep this a semantic override rather than a Settings-specific treatment. */
    --state-layer-selected: color-mix(in srgb, var(--accent) 17%, transparent);
    --state-layer-selected-hover: color-mix(in srgb, var(--accent) 21%, transparent);
    --state-layer-selected-pressed: color-mix(in srgb, var(--accent) 25%, transparent);
    --state-surface-current: color-mix(in srgb, var(--control-surface) 86%, var(--accent) 14%);
    --state-border-current: color-mix(in srgb, var(--control-border-hover) 68%, var(--accent) 32%);

    --panel-card-border: color-mix(in srgb, var(--text) 14%, transparent);
    --panel-card-border-hover: color-mix(in srgb, var(--text) 24%, transparent);
    --panel-row-border: color-mix(in srgb, var(--text) 12%, transparent);
    --scrollbar-thumb: color-mix(in srgb, var(--text) 30%, transparent);
    --doc-body-text: var(--colour-night-text-sec);
    --doc-heading-text: var(--colour-night-text);
    --doc-heading-color: #B2B5B7;
    --doc-heading-primary: #B2B5B7;
    --doc-heading-secondary: #A3A7A9;
    --doc-heading-tertiary: #A1A3A3;
    --doc-link-color: #95989A;
    --doc-muted-color: #959189;
    --doc-rule-color: #74716B;
    --doc-fill-muted-color: #2B2A27;
    --doc-selection-bg: #303232;
    --doc-selection-text: #D8D2C7;
    --doc-review-anchor-bg: #2C2C2A;
    --doc-review-anchor-hover-bg: #2D2D2B;
    --doc-review-anchor-current-bg: #2E2E2D;
    --doc-review-anchor-underline: #B2B5B7;
    --doc-review-anchor-current-underline: #8E9092;
    --doc-highlight-bg: #6A6A69;
    --doc-highlight-text: #F4F1EA;
    --doc-search-result-bg: #3E3F3D;
    --doc-search-current-bg: #474847;
    --compose-chart-series-1: #707274;
    --compose-chart-series-2: #6E7173;
    --compose-chart-series-3: #A1A3A3;
    --compose-chart-series-4: #717171;
    --compose-chart-series-5: #8E8E8E;
    --compose-chart-series-6: #C8C8C8;
    --compose-chart-series-7: #727272;
    --compose-chart-series-8: #7A7A7A;
    --compose-chart-series-9: #878787;
    --compose-chart-series-10: #828282;
    --compose-chart-series-11: #ACACAC;
    --compose-chart-series-12: #E9E9E9;
  }

  [data-theme="dark"][data-accent="yellow"] {
    --accent-solid-state-mix: var(--accent-dark-border);
  }
}

/* css/2-base.css */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }
  * { margin: 0; }

  html {
    background: var(--bg-app);
    block-size: 100%;
    inline-size: 100%;
    min-block-size: 100%;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior: none;
  }

  body {
    block-size: 100%;
    inline-size: 100%;
    min-block-size: 0;
    background: var(--bg-app);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--type-size-body);
    font-weight: var(--type-weight-regular);
    line-height: var(--type-line-body);
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  button,
  input,
  textarea,
  select { font: inherit; }

  button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    gap: .35em;
    justify-content: center;
    line-height: var(--type-line-control);
    min-block-size: var(--control-height);
    min-inline-size: var(--control-height);
    padding-block: 0;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }

  button:disabled,
  button[aria-disabled="true"],
  :where([role="button"], [role="menuitem"], [role="option"])[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .55;
  }

  :where(button, [role="button"], [role="menuitem"], [role="option"]):not(:disabled):not([aria-disabled="true"]):active,
  :where(button, [role="button"], [role="menuitem"], [role="option"]).is-pressing {
    background: var(--state-layer-pressed);
  }

  button > svg {
    flex: 0 0 auto;
    pointer-events: none;
  }

  input,
  textarea,
  select {
    background: transparent;
    border: 0;
    color: inherit;
    font-family: var(--font-ui);
    font-size: var(--ui-field-font-size);
    font-weight: var(--ui-field-font-weight);
    letter-spacing: 0;
    line-height: var(--ui-field-line-height);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--text-disabled);
    font: inherit;
    opacity: 1;
  }

  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-inline-size: 100%; }
  [hidden] { display: none !important; }

  :focus { outline: none; }
  :focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  ::selection {
    background: var(--doc-selection-bg);
    color: var(--doc-selection-text);
  }

  ::-webkit-scrollbar { inline-size: 6px; block-size: 6px; }
  ::-webkit-scrollbar-track { background: var(--scrollbar-track); }
  ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }
  * { scrollbar-color: var(--scrollbar-thumb) transparent; scrollbar-width: thin; }
}

@layer environment {
  * { -webkit-tap-highlight-color: transparent; }

  #topbar,
  #toolbar-row,
  #sidebar,
  .modal,
  .popover,
  .menu-popover,
  .notice,
  .notice-surface,
  .toast,
  .sidebar-panel-header,
  .toolbar-button,
  .topbar-icon-button,
  .notice-primary-button,
  .notice-secondary-button,
  .notice-dismiss-button,
  .popover-primary-button,
  .popover-secondary-button,
  .popover-ghost-button,
  .popover-danger-button,
  .popover-icon-button,
  .modal-secondary-button,
  .modal-danger-button,
  .modal-close-button {
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }

  button,
  [role="button"],
  [role="menuitem"],
  [role="option"],
  a,
  label {
    touch-action: manipulation;
  }


  .sr-only {
    block-size: 1px !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    inline-size: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
  }

  @media (hover: none) {
    ::-webkit-scrollbar { display: none; }
    * { scrollbar-width: none; }
  }

  @media (pointer: coarse) {
    button,
    [role="button"],
    [role="menuitem"],
    [role="option"] {
      min-block-size: var(--accessibility-hit-target-min);
      min-inline-size: var(--accessibility-hit-target-min);
    }

    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
      min-block-size: var(--touch-target);
    }

    :where(label, .sidebar-checkbox-row) {
      min-block-size: var(--touch-target);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: var(--motion-duration-reduced) !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: var(--motion-duration-reduced) !important;
    }
  }
}

@layer layout {}


@layer overrides {
  /* Forced-colour remapping is intentionally final: operating-system colours
     must remain authoritative over product materials and feature specialisations. */
  @media (forced-colors: active) {
    :root {
      --focus-ring-color: CanvasText;
      --surface-border: CanvasText;
      --surface-border-strong: CanvasText;
      --control-border: ButtonText;
      --control-border-hover: Highlight;
      --accent-ink: CanvasText;
      --accent: CanvasText;
      --accent-vivid: Highlight;
      --accent-on-vivid: HighlightText;
      --accent-solid: Highlight;
      --accent-solid-foreground: HighlightText;
      --accent-solid-state-mix: HighlightText;
      --accent-solid-hover: Highlight;
      --accent-solid-active: Highlight;
      --accent-soft: Canvas;
      --accent-surface: Highlight;
      --accent-surface-hover: Highlight;
      --accent-surface-active: Highlight;
      --accent-border: Highlight;
      --accent-border-strong: Highlight;
      --accent-focus: CanvasText;
      --control-surface: ButtonFace;
      --control-surface-hover: ButtonFace;
      --text: CanvasText;
      --text-sec: CanvasText;
      --text-muted: GrayText;
      --text-disabled: GrayText;
      --danger: CanvasText;
      --scrollbar-thumb: CanvasText;
    }

    :focus-visible {
      outline: 2px solid CanvasText;
      outline-offset: 2px;
    }

    :where(button, [role="button"], [role="menuitem"], [role="option"], input, select, textarea) {
      forced-color-adjust: auto;
    }

    :where(button, [role="button"], [role="menuitem"], [role="option"]):disabled,
    :where(button, [role="button"], [role="menuitem"], [role="option"])[aria-disabled="true"] {
      color: GrayText;
    }
  }
}


@layer overrides {
  /* Native internal scrolling contract.
     The canonical registry lives in js/core/scroll-surfaces.js. Runtime markup
     opts into this CSS contract with data-scroll-axis="y" or data-scroll-axis="x".
     data-scroll-profile then chooses the interaction policy for the surface.

     This contract intentionally lives in the final overrides layer. Scroll
     ownership is an element-level capability, so later component chrome such as
     .topbar-group { overflow: hidden } or mobile sidebar sheet rules must not
     accidentally remove native scrolling from a registered surface. */
  [data-scroll-axis="y"] {
    min-block-size: 0;
    scroll-padding-block: var(--surface-focus-scroll-padding);
    scroll-padding-inline: var(--surface-focus-scroll-padding-inline);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  [data-scroll-axis="x"] {
    min-inline-size: 0;
    scroll-padding-block: var(--surface-focus-scroll-padding);
    scroll-padding-inline: var(--surface-focus-scroll-padding-inline);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  [data-scroll-axis="y"][data-scroll-profile="contained"] {
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    touch-action: pan-y pinch-zoom;
    scrollbar-gutter: stable;
  }

  [data-scroll-axis="x"][data-scroll-profile="contained"] {
    overscroll-behavior-inline: contain;
    touch-action: pan-x pinch-zoom;
  }

  [data-scroll-axis="y"][data-scroll-profile="editor"] {
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    touch-action: auto;
    scrollbar-gutter: auto;
  }

  /* Viewport frame contract for scrollable overlays. The scroll axis is still
     owned by data-scroll-axis; this frame attribute only centralizes sizing so
     popovers, notices, dialog bodies, and filled panes do not each invent their
     own viewport math. */
  [data-scroll-frame="overlay"] {
    box-sizing: border-box;
    max-block-size: var(--surface-overlay-max-block);
    max-block-size: min(var(--surface-overlay-max-block), var(--app-keyboard-safe-block));
    min-block-size: 0;
  }

  [data-scroll-frame="notice"] {
    box-sizing: border-box;
    max-block-size: var(--surface-notice-max-block);
    max-block-size: min(var(--surface-notice-max-block), var(--app-keyboard-safe-block));
    min-block-size: 0;
  }

  [data-scroll-frame="fill"] {
    box-sizing: border-box;
    min-block-size: 0;
  }
}

/* css/surfaces/app-layout.css */
@layer surfaces {
  :root {
    /* The closed icon rail and open utility workspace remain inset floating
       surfaces. The canvas reservation includes the panel plus the matching
       inner and outer gaps, preserving a deliberate workspace surround. */
    --sidebar-floating-gap: var(--space-section);
    --sidebar-floating-block-gap: var(--space-section);
    --sidebar-content-gap: calc(2 * var(--sidebar-floating-gap));
    --sidebar-floating-inline: var(--sidebar-w);
    /* Sidebar side is a physical user preference. Keep physical left/right
       reservation stable even when the document language changes direction. */
    --sidebar-occupied-left: 0px;
    --sidebar-occupied-right: 0px;
    --sidebar-occupied-inline-start: var(--sidebar-occupied-left);
    --sidebar-occupied-inline-end: var(--sidebar-occupied-right);
    --sidebar-canvas-left: var(--sidebar-occupied-left);
    --sidebar-canvas-right: var(--sidebar-occupied-right);
    --sidebar-available-center-offset: calc((var(--sidebar-occupied-left) - var(--sidebar-occupied-right)) / 2);
    --writing-space-center-inline: calc(50% + var(--sidebar-available-center-offset));
    --writing-space-visual-center-inline: calc(var(--app-visual-viewport-center-inline) + var(--sidebar-available-center-offset));
  }

  :root[data-sidebar-open="true"][data-sidebar-mode="persistent"][data-sidebar-side="right"],
  :root[data-sidebar-open="true"][data-sidebar-mode="narrow"][data-sidebar-side="right"] {
    --sidebar-occupied-right: calc(var(--sidebar-floating-inline) + var(--sidebar-content-gap));
  }

  :root[data-sidebar-open="true"][data-sidebar-mode="persistent"][data-sidebar-side="left"],
  :root[data-sidebar-open="true"][data-sidebar-mode="narrow"][data-sidebar-side="left"] {
    --sidebar-occupied-left: calc(var(--sidebar-floating-inline) + var(--sidebar-content-gap));
  }

  /* When a split window cannot preserve the governed writing canvas beside the
     utility workspace, the dock becomes a non-modal side overlay. The document
     keeps its usable width and the customer can dismiss or switch the sidebar
     without the shell pretending both surfaces still fit side by side. */
  :root[data-sidebar-open="true"][data-sidebar-presentation="overlay"]:not([data-sidebar-mode="compact"]) {
    --sidebar-occupied-left: 0px;
    --sidebar-occupied-right: 0px;
    --sidebar-occupied-inline-start: 0px;
    --sidebar-occupied-inline-end: 0px;
    --sidebar-canvas-left: 0px;
    --sidebar-canvas-right: 0px;
    --sidebar-available-center-offset: 0px;
  }

  :root[data-sidebar-mode="compact"] {
    --sidebar-occupied-left: 0px;
    --sidebar-occupied-right: 0px;
    --sidebar-occupied-inline-start: 0px;
    --sidebar-occupied-inline-end: 0px;
    --sidebar-canvas-left: 0px;
    --sidebar-canvas-right: 0px;
    --sidebar-available-center-offset: 0px;
  }

  #app {
    --window-separator-opacity: 0;
    background: var(--bg-app);
    block-size: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    inline-size: var(--app-shell-inline-size);
    max-block-size: 100%;
    max-inline-size: var(--app-viewport-inline);
    overflow: hidden;
    overscroll-behavior: none;
    position: relative;
  }


  /* Installed desktop shells can visually lose the host titlebar separator
     when the sidebar changes the surface immediately below it. Compose owns a
     single non-layout hairline at the app boundary so the seam remains stable
     across closed, left-open, and right-open sidebar states. The display-mode
     media queries cover first paint; the data attribute is a deterministic
     fallback for wrappers and layout verification. */
  #app::before {
    background: var(--surface-window-separator);
    block-size: 1px;
    content: '';
    inset-block-start: 0;
    inset-inline: 0;
    opacity: var(--window-separator-opacity);
    pointer-events: none;
    position: fixed;
    z-index: var(--z-window-separator);
  }

  @media (display-mode: standalone),
         (display-mode: minimal-ui),
         (display-mode: window-controls-overlay) {
    #app { --window-separator-opacity: 1; }
  }

  :root:is([data-app-display-mode="standalone"],
           [data-app-display-mode="minimal-ui"],
           [data-app-display-mode="window-controls-overlay"]) #app {
    --window-separator-opacity: 1;
  }

  /* Every non-compact shell uses the app-owned seam, including ordinary
     browser tabs. The separator therefore stays full-width while persistent
     or narrow sidebars reserve, release, or overlay the writing canvas. */
  :root:is([data-sidebar-mode="persistent"], [data-sidebar-mode="narrow"]) #app {
    --window-separator-opacity: 1;
  }

  /* Tauri keeps the same app-owned seam even when a very small native window
     resolves to compact mode, because the native titlebar still has a stable
     window boundary. */
  :root[data-compose-runtime="tauri"] #app {
    --window-separator-opacity: 1;
  }

  #main {
    block-size: 100%;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
    min-block-size: 0;
    min-inline-size: 0;
    overflow: hidden;
    order: 1;
  }


  #body { display: contents; }

  #canvas {
    background: var(--surface-canvas);
    container: canvas / inline-size;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    margin-left: var(--sidebar-canvas-left);
    margin-right: var(--sidebar-canvas-right);
    min-block-size: 0;
    min-inline-size: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    position: relative;
    /* Sidebar reservation is applied in one layout step. Animating canvas
       margins repeatedly reflows the full document and inflates INP on long
       manuscripts; the fixed sidebar shell retains its own visual motion. */
    transition: none;
  }

  #overlay {
    background: var(--bg-overlay);
    display: none;
    inset: 0;
    position: fixed;
    z-index: var(--z-overlay);
  }

  #overlay.is-visible { display: block; }

  :root[data-sidebar-mode="compact"] #overlay {
    background: transparent;
    pointer-events: none;
    z-index: calc(var(--z-sidebar) - 1);
  }

  :root[data-sidebar-open="true"][data-sidebar-mode="compact"] #topbar,
  :root[data-sidebar-open="true"][data-sidebar-mode="compact"] #toolbar-row,
  :root[data-sidebar-open="true"][data-sidebar-mode="compact"] .sidebar {
    pointer-events: auto;
  }

  .file-picker-input,
  .image-picker-input { display: none; }

  @media (min-width: 600px) and (max-width: 1079px) {
    :root {
      --sidebar-floating-block-gap: var(--space-cluster);
      --sidebar-floating-gap: var(--space-cluster);
      --sidebar-floating-inline: min(var(--sidebar-overlay-w), var(--sidebar-overlay-max-inline));
    }
  }


  @media (forced-colors: active) {
    #app::before {
      background: CanvasText;
      forced-color-adjust: auto;
    }
  }
}

/* css/surfaces/sidebar-shell.css */
@layer surfaces {
  /* Sidebar shell authority. This file owns dock geometry, the panel frame,
     and compact-sheet geometry. Feature and component styling belongs in
     sidebar.css and should respond to this container rather than re-owning
     viewport or shell dimensions. */
  /* Unified dock shell: the navigation rail and active panel share one outer
     surface on desktop/tablet. Compact mode reuses the existing bottom sheet. */
  .sidebar-dock {
    --sidebar-dock-header-block: var(--floating-chrome-plate-block-size);
    --sidebar-dock-open-block: max(
      var(--sidebar-dock-header-block),
      calc(
        var(--app-viewport-block) - var(--space-related) -
        var(--sidebar-floating-block-gap)
      )
    );
    --sidebar-dock-content-delay: 55ms;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface-sidebar-shell);
    block-size: var(--sidebar-dock-header-block);
    border: 1px solid var(--surface-sidebar-shell-border);
    border-radius: var(--radius-full);
    display: grid;
    grid-template-rows: var(--sidebar-dock-header-block) minmax(0, 1fr);
    inline-size: fit-content;
    inset-block-start: var(--space-related);
    max-block-size: var(--sidebar-dock-open-block);
    max-inline-size: calc(100vw - (2 * var(--sidebar-floating-gap)));
    overflow: hidden;
    position: fixed;
    transition:
      background-color var(--motion-duration-surface) var(--motion-ease-standard),
      block-size var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
      border-color var(--motion-duration-surface) var(--motion-ease-standard),
      border-radius var(--motion-duration-surface) var(--motion-ease-standard),
      inline-size var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
      inset-block-start var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
      left var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
      right var(--motion-duration-panel-sheet) var(--motion-ease-emphasized);
    z-index: var(--z-topbar);
  }

  :root[data-sidebar-open="true"]:not([data-sidebar-mode="compact"]) .sidebar-dock {
    background: var(--surface-sidebar-shell);
    block-size: var(--sidebar-dock-open-block);
    border: 1px solid var(--surface-sidebar-shell-border);
    border-radius: var(--radius-surface);
    grid-template-rows: var(--sidebar-dock-header-block) minmax(0, 1fr);
    inline-size: var(--sidebar-floating-inline);
    inset-block-start: var(--space-related);
    max-block-size: var(--sidebar-dock-open-block);
  }

  :root[data-sidebar-mode-transition="true"] .sidebar-dock,
  .sidebar-dock[data-sidebar-mode-transition="true"] {
    transition: none;
  }

  [data-sidebar-side="right"] .sidebar-dock {
    left: auto;
    right: var(--sidebar-floating-gap);
    transform-origin: right top;
  }

  [data-sidebar-side="left"] .sidebar-dock {
    left: var(--sidebar-floating-gap);
    right: auto;
    transform-origin: left top;
  }


  .sidebar-dock-header {
    align-items: center;
    direction: ltr;
    background: transparent;
    border-block-end: 1px solid transparent;
    display: flex;
    gap: 0;
    inline-size: 100%;
    justify-content: flex-end;
    min-inline-size: 0;
    padding: 0;
    transition:
      border-color var(--motion-duration-surface) var(--motion-ease-standard),
      padding var(--motion-duration-panel-sheet) var(--motion-ease-emphasized);
  }

  :root[data-sidebar-open="true"]:not([data-sidebar-mode="compact"]) .sidebar-dock-header {
    background: var(--surface-sidebar-shell);
    border-block-end-color: var(--panel-row-border);
    gap: var(--space-related);
  }

  [data-sidebar-side="left"] .sidebar-dock-header {
    flex-direction: row-reverse;
  }

  .sidebar-dock-title {
    color: var(--text);
    flex: 0 1 0;
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    letter-spacing: var(--type-tracking-heading);
    inline-size: 0;
    min-inline-size: 0;
    opacity: 0;
    overflow: hidden;
    padding-inline: 0;
    text-align: start;
    text-overflow: ellipsis;
    transform: translateY(2px);
    transition:
      opacity var(--motion-duration-state) var(--motion-ease-standard),
      transform var(--motion-duration-state) var(--motion-ease-out);
    white-space: nowrap;
  }

  [data-sidebar-side="left"] .sidebar-dock-title {
    padding-inline: 0;
  }

  .sidebar-dock-title > span { display: none; }
  .sidebar-dock[data-panel="documents"] [data-sidebar-dock-title="documents"],
  .sidebar-dock[data-panel="writing-tools"] [data-sidebar-dock-title="writing-tools"],
  .sidebar-dock[data-panel="shelf"] [data-sidebar-dock-title="shelf"],
  .sidebar-dock[data-panel="appearance"] [data-sidebar-dock-title="appearance"],
  .sidebar-dock[data-panel="support"] [data-sidebar-dock-title="support"] { display: inline; }

  :root[data-sidebar-open="true"]:not([data-sidebar-mode="compact"]) .sidebar-dock-title {
    flex: 1 1 auto;
    inline-size: auto;
    opacity: 1;
    padding-inline-start: var(--space-cluster);
    transform: translateY(0);
    transition-delay: var(--sidebar-dock-content-delay);
  }

  :root[data-sidebar-open="true"][data-sidebar-side="left"]:not([data-sidebar-mode="compact"]) .sidebar-dock-title {
    padding-inline-end: var(--space-cluster);
    padding-inline-start: 0;
  }

  :root[dir="rtl"] .sidebar-dock-title {
    direction: rtl;
    text-align: right;
  }

  /* The closed navigation rail and open destination remain one inset floating
     utility surface. Header and body share the same neutral shell so the dock
     reads as one unit; lighter cards provide the internal hierarchy. */
  :root,
  body,
  #app {
    background: var(--surface-app-ground);
  }

  .sidebar-dock-header {
    background: var(--surface-sidebar-shell);
  }


  @media (forced-colors: active) {
    .sidebar,
    .sidebar-dock-header,
    .sidebar-panel,
    .sidebar-panel-header,
    .sidebar-panel-body {
      background: Canvas;
      color: CanvasText;
      forced-color-adjust: auto;
    }

    .sidebar-dock {
      background: Canvas;
      border: 1px solid CanvasText;
      color: CanvasText;
      forced-color-adjust: auto;
    }

    :root[data-sidebar-open="true"]:not([data-sidebar-mode="compact"]) .sidebar-dock {
      border: 1px solid CanvasText;
    }

    :root[data-sidebar-open="true"]:not([data-sidebar-mode="compact"]) .sidebar-dock-header {
      border-block-end-color: CanvasText;
    }
  }

  .sidebar-dock-navigation-host {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    min-inline-size: 0;
  }

  :root:not([data-sidebar-open="true"]) .sidebar-dock > #sidebar {
    inline-size: 0;
    max-inline-size: 0;
    min-inline-size: 0;
  }

  .sidebar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface-sidebar-shell);
    block-size: 100%;
    border: 0;
    border-radius: var(--radius-none);
    box-shadow: none;
    container: sidebar / inline-size;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    inline-size: 100%;
    inset: auto;
    max-block-size: 100%;
    max-inline-size: none;
    min-block-size: 0;
    opacity: 0;
    overflow: hidden;
    position: relative;
    transform: none;
    transition: opacity var(--motion-duration-exit) var(--motion-ease-in);
    z-index: auto;
  }

  .sidebar[data-sidebar-open="true"] { pointer-events: auto; }
  .sidebar[data-sidebar-open="false"] { pointer-events: none; }

  :root[data-sidebar-open="true"]:not([data-sidebar-mode="compact"]) .sidebar {
    opacity: 1;
    transition-delay: var(--sidebar-dock-content-delay);
    transition-duration: var(--motion-duration-state);
    transition-timing-function: var(--motion-ease-out);
  }

  .sidebar-sheet-drag-handle { display: none; }
  /* Panel frame: one visible panel, internal scrolling, fixed header/footer. */
  .sidebar-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface-sidebar-shell);
    block-size: 100%;
    border: 0;
    border-radius: var(--radius-none);
    box-shadow: none;
    display: none;
    flex: 1 1 auto;
    flex-direction: column;
    max-block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
  }
  .sidebar[data-panel="documents"] #sidebar-panel-documents,
  .sidebar[data-panel="writing-tools"] #sidebar-panel-writing-tools,
  .sidebar[data-panel="shelf"] #sidebar-panel-shelf,
  .sidebar[data-panel="appearance"] #sidebar-panel-appearance,
  .sidebar[data-panel="support"] #sidebar-panel-support { display: flex; }

  .sidebar-panel-header {
    align-items: center;
    background: var(--surface-sidebar-shell);
    border-block-end: 0;
    display: none;
    flex: 0 0 auto;
    gap: var(--space-related);
    justify-content: space-between;
    min-block-size: var(--topbar-h);
    padding-inline: var(--space-section) var(--space-cluster);
  }
  .sidebar-panel-title { font-size: var(--type-size-control); font-weight: var(--type-weight-strong); letter-spacing: var(--type-tracking-heading); min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-panel-body {
    align-content: start;
    background: var(--surface-sidebar-shell);
    block-size: auto;
    display: grid;
    flex: 1 1 0;
    gap: var(--sidebar-panel-body-gap, var(--space-section));
    grid-auto-rows: max-content;
    min-block-size: 0;
    padding: var(--sidebar-panel-body-padding, var(--space-section));
  }


  @media (min-width: 600px) and (max-width: 1079px) {
    .sidebar {
      /* The dock border owns the tablet width. The panel body must consume the
         dock content box rather than re-applying the outer width and spilling
         one border-width beyond the shared shell. */
      inline-size: 100%;
    }
  }

  @media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
    .sidebar-dock {
      display: contents;
    }

    .sidebar-dock-header {
      display: none;
    }

    .sidebar {
      --sidebar-sheet-state-block-size: var(--sidebar-sheet-closed-block-size);
      --sidebar-sheet-state-transform: var(--sidebar-sheet-closed-transform);

      background: var(--surface-sidebar-shell);
      block-size: var(--sidebar-sheet-runtime-block-size, var(--sidebar-sheet-state-block-size));
      border: 0;
      border-block-start: 1px solid var(--border);
      border-radius: var(--radius-surface) var(--radius-surface) var(--radius-none) var(--radius-none);
      bottom: 0;
      flex-basis: auto;
      inline-size: 100%;
      inset-block-start: auto;
      inset-inline: 0;
      max-block-size: calc(var(--app-viewport-block) * var(--sidebar-sheet-max-block-fraction));
      max-inline-size: none;
      opacity: 1;
      order: 2;
      pointer-events: none;
      transition: var(--sidebar-sheet-runtime-transition, var(--sidebar-sheet-instant-transition));
      position: fixed;
      transform: var(--sidebar-sheet-runtime-transform, var(--sidebar-sheet-state-transform));
      z-index: var(--z-sidebar);
    }

    .sidebar[data-sidebar-open="true"] {
      --sidebar-sheet-state-block-size: var(--sidebar-sheet-open-block-size);
      --sidebar-sheet-state-transform: var(--sidebar-sheet-open-transform);

      pointer-events: auto;
      touch-action: auto;
    }

    [data-sidebar-side="right"] .sidebar,
    [data-sidebar-side="left"] .sidebar {
      inset-inline: 0;
    }

    [data-sidebar-side="right"] .sidebar[data-sidebar-open="false"],
    [data-sidebar-side="left"] .sidebar[data-sidebar-open="false"],
    .sidebar[data-sidebar-open="false"] { inline-size: 100%; opacity: 1; pointer-events: none; }
    .sidebar::before { content: none; }
    .sidebar-sheet-drag-handle {
      align-items: center;
      cursor: grab;
      display: flex;
      inline-size: 100%;
      inset-block-start: 0;
      inset-inline: 0;
      justify-content: center;
      min-block-size: var(--sidebar-sheet-drag-zone);
      position: absolute;
      touch-action: none;
      z-index: 2;
    }
    .sidebar-sheet-drag-handle::before {
      background: var(--text-muted);
      border-radius: var(--radius-full);
      block-size: 4px;
      content: "";
      inline-size: 38px;
      opacity: .4;
    }
    .sidebar-panel-header { cursor: default; display: flex; padding-block-start: var(--sidebar-sheet-drag-zone); touch-action: auto; }
    .sidebar-panel {
      block-size: 100%;
      min-block-size: 0;
    }
    .sidebar-panel-body {
      block-size: 0;
      flex: 1 1 auto;
      max-block-size: 100%;
      min-block-size: 0;
      padding-block-end: var(--sidebar-panel-body-padding, var(--space-section));
    }
  }

  @media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
    :root[data-keyboard-visible="true"] .sidebar[data-sidebar-open="true"] {
      block-size: var(--app-visual-viewport-block);
      bottom: auto;
      inset-block-start: var(--app-visual-viewport-offset-top);
      max-block-size: var(--app-visual-viewport-block);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sidebar-dock,
    .sidebar-dock-header,
    .sidebar-dock-title,
    .sidebar,
    .sidebar-panel {
      transition-duration: var(--motion-duration-reduced);
    }
  }

}

@layer surfaces {
  /* Instant-interaction contract: persistent/narrow Sidebar state changes are
     navigation, not cinematic transitions. Geometry and content become visible
     in the same rendering opportunity as the activating click. Compact mode
     retains sheet motion because it communicates physical sheet position. */
  :root:not([data-sidebar-mode="compact"]) .sidebar-dock,
  :root:not([data-sidebar-mode="compact"]) .sidebar-dock-header,
  :root:not([data-sidebar-mode="compact"]) .sidebar-dock-title,
  :root:not([data-sidebar-mode="compact"]) .sidebar {
    transition: none;
  }
}

/* css/surfaces/sidebar/01-primitives.css */
/* Shared sidebar primitives, universal controls, cards, fields, and accent picker. */
@layer surfaces {
  /* Shared sidebar component geometry. The shell itself lives in
     css/surfaces/sidebar-shell.css so feature styling cannot become the accidental
     owner of dock, panel-frame, or compact-sheet geometry. */
  .sidebar {
    --sidebar-card-gap: var(--space-cluster);
    --sidebar-card-padding: var(--space-cluster);
    --sidebar-control-block-size: 36px;
    --ui-control-block-size: var(--sidebar-control-block-size);
    --ui-field-padding-inline: var(--space-related);
    --sidebar-field-stack-gap: var(--space-cluster);
    --sidebar-label-control-gap: var(--space-tight);
    --sidebar-panel-body-gap: var(--space-cluster);
    --sidebar-panel-body-padding: var(--space-cluster);
    --sidebar-segmented-block-size: 34px;
  }

  /* Feature density follows the resolved shell mode. The viewport/pointer
     breakpoint that chooses compact mode remains owned by sidebar-shell.css. */
  :root[data-sidebar-mode="compact"] .sidebar :where(.sidebar-card-grid.sidebar-card-responsive-compact) { gap: var(--space-related); padding: var(--space-related); }
  :root[data-sidebar-mode="compact"] .sidebar :where(.sidebar-inline-actions-end) { justify-content: flex-start; }
  :root[data-sidebar-mode="compact"] .sidebar .sidebar-noncompact-only { display: none; }

  /* Native control baseline: keep controls inherited and predictable. */
  .sidebar :where(button, input, select, textarea) { font: inherit; }
  .sidebar :where(button) { align-items: center; display: inline-flex; gap: var(--space-related); justify-content: center; min-block-size: var(--control-height); padding-inline: var(--space-related); }
  .sidebar :where(a.sidebar-primary-cta-button, a.sidebar-secondary-button) { align-items: center; display: inline-flex; font: inherit; gap: var(--space-related); justify-content: center; padding-inline: var(--space-related); text-align: center; text-decoration: none; }
  .sidebar :where(button svg, a svg) { block-size: 16px; flex: 0 0 auto; inline-size: 16px; }

  /* Shared layout primitives: stack, grid, form, footer, and list shapes.
     Content grids opt into intrinsic block-axis tracks explicitly. This avoids
     browser-dependent stretching of nested auto rows when a sidebar panel has
     spare height, especially in persistent coarse-pointer layouts. */
  .sidebar :where(.sidebar-card-stack) { align-content: start; align-items: start; display: grid; gap: var(--sidebar-panel-body-gap); grid-auto-rows: max-content; }
  .sidebar :where(.sidebar-button-grid) { align-content: start; display: grid; gap: var(--space-related); grid-auto-rows: max-content; grid-template-columns: repeat(2, minmax(0, 1fr)); min-inline-size: 0; }
  .sidebar :where(.sidebar-inline-actions.sidebar-button-grid) { display: grid; }
  .sidebar :where(.sidebar-button-grid > button, .sidebar-button-grid > a) { inline-size: 100%; min-inline-size: 0; }
  .sidebar :where(.sidebar-button-grid > :only-child) { grid-column: 1 / -1; }
  .sidebar :where(.sidebar-typography-reset-button) { inline-size: 100%; justify-content: center; }
  .sidebar :where(.sidebar-list-item) { background: var(--panel-row-bg); border: 1px solid var(--panel-row-border); border-radius: var(--radius-control); color: var(--text); display: grid; gap: var(--space-related); max-inline-size: 100%; min-inline-size: 0; overflow: hidden; padding: var(--space-related); text-align: start; transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), border-color var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard); }
  @media (hover: hover) {
    .sidebar :where(.sidebar-list-item:hover) { background: var(--panel-row-bg-hover); border-color: var(--panel-row-border-hover); }
  }
  .sidebar :where(.sidebar-list-item:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
  .sidebar :where(.sidebar-list-item[aria-current="page"], .sidebar-list-item[aria-current="true"], .sidebar-list-item.is-active) { background: var(--panel-row-bg-active); border-color: var(--panel-row-border-hover); color: var(--text); }
  /* Shared card primitives: reusable generated and static sidebar surfaces. */
  .sidebar :where(.sidebar-card) {
    background: var(--panel-card-bg);
    border: 1px solid var(--panel-card-border);
    border-radius: var(--radius-card);
    box-shadow: none;
    color: var(--text);
    inline-size: 100%;
    min-inline-size: 0;
    transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), border-color var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard);
  }
  @media (hover: hover) {
    .sidebar :where(.sidebar-card:hover) { border-color: var(--panel-card-border-hover); }
  }
  .sidebar :where(.sidebar-card-grid) { align-content: start; display: grid; gap: var(--sidebar-card-gap); grid-auto-rows: max-content; padding: var(--sidebar-card-padding); }

  /* Appearance uses the same quiet card hierarchy as the other utility panels.
     The shared sidebar-card primitive owns each settings group's background,
     border, radius, padding, and spacing. */
  .sidebar :where(.sidebar-card-grid > .sidebar-control) {
    padding-block: var(--space-tight);
  }
  .sidebar :where(.sidebar-card-grid > .sidebar-control + .sidebar-control) {
    margin-block-start: var(--space-tight);
  }
  .sidebar :where(.sidebar-card-grid > .sidebar-field-stack) {
    gap: var(--space-cluster);
  }
  .sidebar :where(.sidebar-card-heading + .sidebar-control,
                  .sidebar-card-heading + .sidebar-field-stack,
                  .sidebar-card-title + .sidebar-control) {
    margin-block-start: var(--space-tight);
  }
  .sidebar :where(.sidebar-card-button) { justify-content: flex-start; text-align: start; }
  @media (hover: hover) {
    .sidebar :where(.sidebar-card-button:hover) { border-color: var(--border-strong); }
  }
  .sidebar :where(.sidebar-card-header) { align-items: start; display: grid; gap: var(--space-related); grid-template-columns: minmax(0, 1fr) auto; min-inline-size: 0; }
  .sidebar :where(.sidebar-section-header) { align-items: center; display: flex; gap: var(--space-related); justify-content: space-between; min-inline-size: 0; }
  .sidebar :where(.sidebar-section-title) { color: var(--text); font-size: var(--type-size-control); font-weight: var(--type-weight-strong); letter-spacing: var(--type-tracking-heading); margin: 0; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar :where(.sidebar-section-count) {
    color: var(--text-muted);
    flex: 0 0 auto;
    font-size: var(--type-size-meta);
    font-variant-numeric: tabular-nums;
    line-height: var(--type-line-meta);
  }
  .sidebar :where(.sidebar-card-body) { align-content: start; display: grid; gap: var(--space-related); grid-auto-rows: max-content; min-inline-size: 0; }
  .sidebar :where(.sidebar-card-heading) {
    display: grid;
    gap: var(--space-micro);
    margin: 0;
    min-inline-size: 0;
    text-align: start;
  }
  .sidebar :where(.sidebar-card-title) { color: var(--text); font-size: var(--type-size-control); font-weight: var(--type-weight-strong); letter-spacing: var(--type-tracking-heading); line-height: var(--type-line-heading); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar :where(.sidebar-card-meta) {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    font-variant-numeric: tabular-nums;
    line-height: var(--type-line-meta);
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar :where(.sidebar-card-copy) { color: var(--text-muted); font-size: var(--type-size-control); margin: 0; overflow-wrap: anywhere; }
  .sidebar :where(.sidebar-card.is-active) {
    background: var(--state-surface-current);
    border-color: var(--state-border-current);
  }
  .sidebar :where(.sidebar-card.is-attention) {
    border-color: var(--danger-border);
    border-inline-start-color: var(--danger);
    border-inline-start-width: 3px;
  }
  .sidebar :where(.sidebar-card.is-muted) { opacity: .84; }
  .sidebar :where(.sidebar-empty-card) { background: transparent; border: 1px dashed var(--panel-row-border); color: var(--text-muted); padding: var(--sidebar-card-padding); }
  .sidebar :where(.sidebar-inline-actions) { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-related); min-inline-size: 0; }
  .sidebar :where(.sidebar-inline-actions-end) { justify-content: flex-end; }
  .sidebar :where(.sidebar-inline-actions-between) { justify-content: space-between; }
  .sidebar :where(.sidebar-card-actions) { column-gap: var(--space-related); row-gap: var(--space-related); }
  .sidebar :where(.sidebar-card-actions-fill .sidebar-small-button) { flex: 1 1 calc(50% - var(--space-related)); inline-size: auto; min-inline-size: max-content; }
  .sidebar :where(.sidebar-inline-badges) { align-items: center; display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: var(--space-tight); justify-content: flex-end; min-inline-size: 0; }
  .sidebar :where(.sidebar-inline-badges.is-start) { justify-content: flex-start; }
  .sidebar :where(.sidebar-badge) { background: var(--control-surface); border: 1px solid transparent; border-radius: var(--radius-full); color: var(--text-muted); display: inline-flex; font-size: var(--type-size-meta); line-height: 1; padding: var(--space-tight) var(--space-related); }
  .sidebar :where(.sidebar-badge.is-strong) { color: var(--text); }
  .sidebar :where(.sidebar-status-label) {
    --sidebar-status-indicator: var(--text-muted);
    align-items: center;
    color: var(--text-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--type-size-meta);
    font-weight: var(--ui-field-font-weight);
    gap: var(--space-related);
    line-height: var(--type-line-meta);
    transition: color var(--motion-duration-state) var(--motion-ease-standard);
    white-space: nowrap;
  }
  .sidebar :where(.sidebar-status-label)::before {
    background: var(--sidebar-status-indicator);
    block-size: 6px;
    border-radius: var(--radius-full);
    content: "";
    flex: 0 0 auto;
    inline-size: 6px;
    transition: background-color var(--motion-duration-state) var(--motion-ease-standard);
  }
  .sidebar :where(.sidebar-status-label.is-accent) {
    --sidebar-status-indicator: var(--accent);
    color: var(--text);
  }
  .sidebar :where(.sidebar-status-label.is-neutral) {
    --sidebar-status-indicator: var(--text-muted);
    color: var(--text-muted-small);
  }
  .sidebar :where(.sidebar-status-label.is-attention) {
    --sidebar-status-indicator: var(--accent);
    color: var(--text);
  }

  .sidebar :where(.sidebar-card-footer) {
    border-block-start: 1px solid var(--panel-card-border);
    align-content: start;
    display: grid;
    gap: var(--space-related);
    grid-auto-rows: max-content;
    min-inline-size: 0;
    padding-block-start: var(--space-cluster);
  }
  .sidebar :where(.sidebar-card-footer.is-quiet) {
    border-block-start: 0;
    padding-block-start: 0;
  }
  .sidebar :where(.sidebar-app-release-stamp) {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--type-size-meta);
    font-variant-numeric: tabular-nums;
    letter-spacing: .025em;
    line-height: var(--type-line-meta);
    margin: 0;
    opacity: .7;
    overflow-wrap: anywhere;
    text-align: start;
  }
  .sidebar :where(.sidebar-metric-grid) {
    display: grid;
    gap: var(--space-cluster) var(--space-section);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-metric) {
    display: grid;
    gap: var(--space-micro);
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-metric-label) {
    color: var(--text-muted-small);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    margin: 0;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-metric-value) {
    color: var(--text);
    font-size: var(--type-size-control);
    font-variant-numeric: tabular-nums;
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-heading);
    margin: 0;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar :where(.sidebar-summary-list) {
    background: var(--control-surface);
    border-radius: var(--radius-control);
    display: grid;
    gap: 0;
    margin: 0;
    min-inline-size: 0;
    overflow: hidden;
  }
  .sidebar :where(.sidebar-summary-row) {
    align-items: baseline;
    background: var(--panel-row-bg);
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(72px, .42fr) minmax(0, 1fr);
    min-inline-size: 0;
    padding: var(--space-related);
  }
  .sidebar :where(.sidebar-summary-row + .sidebar-summary-row) {
    border-block-start: 1px solid var(--panel-row-border);
  }
  .sidebar :where(.sidebar-summary-label) {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    margin: 0;
  }
  .sidebar :where(.sidebar-summary-value) {
    color: var(--text);
    font-size: var(--type-size-control);
    line-height: var(--type-line-control);
    margin: 0;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  .sidebar :where(.sidebar-detail-list) {
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    display: grid;
    gap: 0;
    min-inline-size: 0;
    overflow: hidden;
  }
  .sidebar :where(.sidebar-detail-item) {
    background: var(--panel-row-bg);
    display: grid;
    gap: var(--space-tight);
    min-inline-size: 0;
    padding: var(--space-related);
  }
  .sidebar :where(.sidebar-detail-item + .sidebar-detail-item) {
    border-block-start: 1px solid var(--panel-row-border);
  }
  .sidebar :where(.sidebar-detail-title) {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-heading);
    margin: 0;
    overflow-wrap: anywhere;
  }
  .sidebar :where(.sidebar-detail-copy) {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    overflow-wrap: anywhere;
  }
  .sidebar :where(.sidebar-selectable-card) {
    align-items: start;
    appearance: none;
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-card);
    color: var(--text);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: var(--space-related);
    grid-template-columns: 18px minmax(0, 1fr);
    inline-size: 100%;
    margin: 0;
    min-inline-size: 0;
    padding: var(--space-related);
    text-align: start;
  }
  @media (hover: hover) {
    .sidebar :where(.sidebar-selectable-card:hover) {
      background: var(--control-surface-hover);
      border-color: var(--control-border-hover);
    }
  }
  .sidebar :where(.sidebar-selectable-card:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
  .sidebar :where(.sidebar-selectable-card.is-selected) {
    background: var(--state-surface-current);
    border-color: var(--state-border-current);
  }
  .sidebar :where(.sidebar-selectable-card.is-summary) { cursor: default; }
  @media (hover: hover) {
    .sidebar :where(.sidebar-selectable-card.is-summary:hover) {
      background: var(--state-surface-current);
      border-color: var(--state-border-current);
    }
  }
  .sidebar :where(.sidebar-selectable-card-indicator) {
    align-self: start;
    background: var(--surface-sidebar-shell);
    border: 1px solid var(--control-border-hover);
    border-radius: var(--radius-full);
    block-size: 18px;
    inline-size: 18px;
    margin-block-start: 1px;
  }
  .sidebar :where(.sidebar-selectable-card.is-selected .sidebar-selectable-card-indicator) {
    background: var(--accent);
    border-color: var(--accent-border-strong);
  }
  .sidebar :where(.sidebar-selectable-card-content) {
    align-content: start;
    display: grid;
    gap: var(--space-tight);
    grid-auto-rows: max-content;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-selectable-card-heading) {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight) var(--space-related);
    justify-content: space-between;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-selectable-card-title) {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-heading);
  }
  .sidebar :where(.sidebar-selectable-card-meta) {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
  }
  .sidebar :where(.sidebar-selectable-card-copy) {
    color: var(--text-muted);
    display: block;
    font-size: var(--type-size-body);
    line-height: var(--type-line-body);
  }
  .sidebar :where(.sidebar-selectable-card-details) {
    align-content: start;
    border-block-start: 1px solid var(--panel-row-border);
    display: grid;
    gap: var(--space-tight);
    grid-auto-rows: max-content;
    margin-block-start: var(--space-tight);
    padding-block-start: var(--space-related);
  }
  .sidebar :where(.sidebar-selectable-card-detail) {
    color: var(--text-muted);
    display: grid;
    font-size: var(--type-size-body);
    gap: var(--space-tight);
    grid-template-columns: 16px minmax(0, 1fr);
    line-height: var(--type-line-body);
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-selectable-card-detail)::before {
    align-self: start;
    color: var(--accent);
    content: "✓";
    font-size: var(--type-size-body);
    font-weight: var(--type-weight-strong);
    inline-size: 16px;
  }
  .sidebar :where(.sidebar-selectable-group) {
    align-content: start;
    align-items: start;
    display: grid;
    gap: var(--space-related);
    grid-auto-rows: max-content;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-selectable-group.is-joined) {
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    gap: 0;
    overflow: clip;
  }
  .sidebar :where(.sidebar-selectable-group.is-joined > .sidebar-selectable-row) {
    background: transparent;
    border: 0;
    border-radius: var(--radius-none);
    min-block-size: 0;
    padding: var(--space-cluster) var(--space-related);
  }
  .sidebar :where(.sidebar-selectable-group.is-joined > .sidebar-selectable-row + .sidebar-selectable-row) {
    border-block-start: 1px solid var(--panel-row-border);
  }
  @media (hover: hover) {
    .sidebar :where(.sidebar-selectable-group.is-joined > .sidebar-selectable-row:hover) {
      background: var(--control-surface-hover);
    }
  }
  .sidebar :where(.sidebar-selectable-group.is-joined > .sidebar-selectable-row:focus-visible) {
    outline-offset: -2px;
    position: relative;
    z-index: 2;
  }
  .sidebar :where(.sidebar-selectable-group.is-joined > .sidebar-selectable-row.is-selected) {
    background: var(--state-surface-current);
    border-color: transparent;
    position: relative;
    z-index: 1;
  }
  .sidebar :where(.sidebar-selectable-row.is-heading-stacked .sidebar-selectable-card-heading) {
    align-items: start;
    flex-direction: column;
    gap: 1px;
    justify-content: flex-start;
  }
  .sidebar :where(.sidebar-selectable-row.is-heading-stacked .sidebar-selectable-card-meta) {
    margin-inline-start: 0;
    text-align: start;
    white-space: normal;
  }
  .sidebar :where(.sidebar-selectable-row.is-details-plain .sidebar-selectable-card-details) {
    border-block-start: 0;
    margin-block-start: 0;
    padding-block-start: var(--space-tight);
  }
  .sidebar :where(.sidebar-overflow) {
    align-self: start;
    position: relative;
    z-index: 4;
  }

  /* An open floating menu must sit above later cards and their overflow
     triggers. Without elevating the owning card as well as the menu root,
     WebKit can paint a following row's ellipsis button over the menu. */
  .sidebar :where(.sidebar-card):has(.sidebar-overflow-trigger[aria-expanded="true"]) {
    position: relative;
    z-index: 20;
  }
  .sidebar :where(.sidebar-overflow):has(.sidebar-overflow-trigger[aria-expanded="true"]) {
    z-index: 24;
  }
  .sidebar :where(.sidebar-overflow-trigger) {
    --ui-control-block-size: 34px;
    padding: 0;
  }
  .sidebar :where(.sidebar-overflow-trigger svg) {
    block-size: 16px;
    inline-size: 16px;
  }
  /* Shelf is the canonical sidebar overflow treatment. Shared overflow
     consumers use the same geometry, transparent menu rows, and destructive
     divider rather than maintaining near-matching feature variants. */
  .sidebar :where(.sidebar-overflow-menu) {
    display: grid;
    gap: var(--space-micro);
    inline-size: min(176px, calc(100vw - 32px));
    inset-block-start: calc(100% + var(--space-tight));
    inset-inline-end: 0;
    max-block-size: min(240px, calc(100vh - 32px));
    padding: var(--space-tight);
    position: absolute;
    z-index: 12;
  }
  .sidebar :where(.sidebar-menu-action) {
    justify-content: flex-start;
    padding-inline: var(--space-related);
    text-align: start;
  }
  .sidebar :where(.sidebar-menu-separator) {
    border-block-start: 1px solid var(--panel-card-border);
    block-size: 0;
    margin: var(--space-micro) var(--space-tight);
  }
  .sidebar :where(.sidebar-overflow-menu .sidebar-menu-action.sidebar-destructive-button) {
    border-block-start-color: var(--panel-card-border);
    margin-block-start: var(--space-micro);
  }

  .sidebar :where(.sidebar-disclosure-card) {
    overflow: clip;
    padding: 0;
  }
  .sidebar :where(.sidebar-disclosure-summary) {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
    list-style: none;
    min-block-size: var(--sidebar-control-block-size);
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-disclosure-card > .sidebar-disclosure-summary) {
    min-block-size: var(--touch-target);
    padding: var(--sidebar-card-padding);
  }
  .sidebar :where(.sidebar-disclosure-summary)::-webkit-details-marker { display: none; }
  .sidebar :where(.sidebar-disclosure-summary:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: calc(-1 * var(--focus-ring-width));
  }
  .sidebar :where(.sidebar-disclosure-heading) {
    display: grid;
    gap: var(--space-micro);
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-disclosure-card.is-active) {
    background: var(--state-surface-current);
    border-color: var(--state-border-current);
  }
  .sidebar :where(.sidebar-disclosure-card-header) {
    align-items: start;
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-disclosure-heading > .sidebar-inline-badges) {
    justify-content: flex-start;
  }
  .sidebar :where(.sidebar-disclosure-chevron) {
    block-size: 16px;
    color: var(--text-muted);
    flex: 0 0 auto;
    inline-size: 16px;
    transition: transform var(--motion-duration-micro) var(--motion-ease-standard);
  }
  .sidebar :where(details[open] > .sidebar-disclosure-summary .sidebar-disclosure-chevron) {
    transform: rotate(180deg);
  }
  .sidebar :where(.sidebar-disclosure-card > .sidebar-disclosure-body) {
    border-block-start: 1px solid var(--panel-card-border);
    padding: var(--sidebar-card-padding);
  }

  .sidebar :where(.sidebar-confirmation-surface) {
    gap: var(--space-cluster);
    grid-column: 1 / -1;
    margin-block-start: var(--space-micro);
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-confirmation-copy) {
    display: grid;
    gap: var(--space-tight);
    min-inline-size: 0;
  }
  .sidebar :where(.sidebar-confirmation-title, .sidebar-confirmation-message) { margin: 0; }
  .sidebar :where(.sidebar-confirmation-title) {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-heading);
  }
  .sidebar :where(.sidebar-confirmation-message) {
    color: var(--text-muted);
    font-size: var(--type-size-control);
    line-height: var(--type-line-body);
  }
  .sidebar :where(.sidebar-confirmation-actions .sidebar-small-button) {
    inline-size: auto;
    min-inline-size: max-content;
    padding-inline: var(--space-cluster);
  }

  .sidebar :where(.sidebar-link-card-status-line) { min-block-size: 1px; }
  .sidebar :where(.sidebar-link-card-status-line[data-status="error"]) { color: var(--danger, var(--text)); }


}

/* css/surfaces/sidebar/02-panel-controls.css */
/* Static panel/control layouts and shared panel-level feature hooks. */
@layer surfaces {
  /* Static panel layout primitives kept in this file, grouped by purpose. */
  .sidebar-panel-section,
  .sidebar-section,
  .sidebar-find,
  .sidebar-field,
  .sidebar-field-stack,
  .sidebar-document-list,
  .sidebar-outline-list { display: grid; }

  .sidebar-panel-section,
  .sidebar-section,
  .sidebar-find,
  .sidebar-document-list,
  .sidebar-outline-list { gap: var(--sidebar-panel-body-gap); }

  .sidebar-field-stack { gap: var(--sidebar-field-stack-gap); }

  .sidebar-field { gap: var(--sidebar-label-control-gap); }
  .sidebar-field.is-inline {
    align-items: end;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .sidebar-field.is-inline > :where(.sidebar-field-label, .sidebar-field-help, .sidebar-field-error) {
    grid-column: 1 / -1;
  }
  .sidebar-field-help,
  .sidebar-feedback {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    margin: 0;
    overflow-wrap: anywhere;
  }
  .sidebar-feedback.is-error { color: var(--danger); }
  .sidebar-feedback.is-attention { color: var(--text); }
  .sidebar-feedback.is-success { color: var(--accent-ink, var(--text)); }
  .sidebar-feedback[hidden] { display: none; }
  .sidebar-action-row { align-content: start; display: grid; gap: var(--space-related); grid-auto-rows: max-content; grid-template-columns: repeat(2, minmax(0, 1fr)); min-inline-size: 0; }

  /* Shared buttons and inputs. */
  .sidebar :where(.sidebar-primary-cta-button,
                  .sidebar-secondary-button,
                  .sidebar-save-button,
                  .sidebar-small-button,
                  .sidebar-export-item,
                  .sidebar-destructive-button,
                  .sidebar-segmented-option) { inline-size: 100%; min-inline-size: 0; }

  .sidebar-close-button,
  .sidebar-search-clear-button {
    flex: 0 0 auto;
    padding-inline: 0;
  }

  .sidebar-close-button {
    --ui-control-block-size: 32px;
  }

  .sidebar :where(.sidebar-save-button,
                  .sidebar-export-item) { justify-content: flex-start; }

  .sidebar :where(.sidebar-small-button) { min-block-size: max(var(--small-control-height), 24px); }
  .sidebar :where(.sidebar-primary-cta-button,
                  .sidebar-secondary-button,
                  .sidebar-save-button,
                  .sidebar-small-button,
                  .sidebar-export-item,
                  .sidebar-destructive-button,
                  .sidebar-segmented-option) {
    min-block-size: 34px;
  }

  .sidebar :where(.sidebar-command-button.is-inline) { inline-size: auto; }
  .sidebar :where(.sidebar-command-button.is-compact) {
    min-block-size: max(var(--small-control-height), 24px);
    padding-inline: var(--space-related);
  }
  .sidebar :where(.sidebar-select,
                  .sidebar-search-input,
                  .sidebar-replace-input,
                  .sidebar-document-rename-input,
                  .sidebar-input) {
    inline-size: 100%;
  }

  .sidebar-empty-state {
    background: transparent;
    border: 1px dashed var(--panel-row-border);
    border-radius: var(--radius-card);
    color: var(--text-muted);
    display: grid;
    gap: var(--space-tight);
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: hidden;
    padding: var(--sidebar-card-padding);
    text-align: start;
  }

  .sidebar-help-text,
  .sidebar-status {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    display: block;
    font-size: var(--type-size-control);
    line-height: var(--type-line-body);
    margin: 0;
    min-block-size: 0;
    overflow-wrap: anywhere;
    padding: 0;
  }


  .sidebar-search-result {
    background: var(--panel-row-bg);
    border: 1px solid var(--panel-row-border);
    border-radius: var(--radius-control);
    color: var(--text);
    display: grid;
    gap: var(--space-related);
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: hidden;
    padding: var(--space-related);
    text-align: start;
  }

  .sidebar-search-result.is-active {
    background: var(--panel-row-bg-active);
    border-color: var(--panel-row-border-hover);
    color: var(--text);
  }


  /* Outline, find, and appearance controls. */
  .sidebar-checkbox-row { align-items: center; display: flex; gap: var(--space-related); min-block-size: var(--touch-target); }
  .sidebar-checkbox-input { accent-color: var(--accent); block-size: 18px; inline-size: 18px; }
  .sidebar-checkbox-box { display: none; }
  .sidebar-hex-field { align-items: center; display: block; inline-size: 100%; position: relative; }
  .sidebar-hex-prefix { align-items: center; color: var(--text-muted); display: inline-flex; font-family: var(--font-mono); inset-block: 0; inset-inline-start: 12px; justify-content: center; pointer-events: none; position: absolute; }
  .sidebar-hex-input { font-family: var(--font-mono); padding-inline-start: 28px; text-transform: uppercase; }
  .sidebar-document-item.is-close-confirming .sidebar-document-stats-footer { display: none; }
  #sidebar-panel-documents .sidebar-panel-body:has(#files-tabpanel-history:not([hidden])) {
    grid-template-rows: max-content minmax(0, 1fr);
    overflow: hidden;
  }
  #files-tabpanel-history {
    block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
  }
  .sidebar-history-list-layout {
    block-size: 100%;
    display: grid;
    gap: var(--space-section);
    grid-template-rows: minmax(0, 1fr) max-content;
    min-block-size: 0;
    min-inline-size: 0;
  }
  .sidebar-history-timeline {
    align-content: start;
    display: grid;
    grid-auto-rows: max-content;
    min-block-size: 0;
    min-inline-size: 0;
  }
  .sidebar-history-list {
    align-content: start;
    display: grid;
    gap: var(--space-section);
    grid-auto-rows: max-content;
    min-inline-size: 0;
  }
  .sidebar-history-date-group {
    align-content: start;
    align-self: start;
    display: grid;
    gap: var(--space-related);
    grid-auto-rows: max-content;
    min-inline-size: 0;
  }
  .sidebar-history-date-group-header {
    margin: 0;
    min-block-size: 0;
    padding: 0;
  }
  .sidebar-history-date-group-title {
    line-height: var(--type-line-heading);
    margin: 0;
    padding: 0;
  }
  .sidebar-history-date-group-list {
    align-content: start;
    align-self: start;
    grid-auto-rows: max-content;
    min-inline-size: 0;
  }
  .sidebar-history-item {
    align-self: start;
    cursor: pointer;
    font-family: var(--font-ui);
    overflow: visible;
    position: relative;
  }
  .sidebar-history-item:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .sidebar-history-item.is-current {
    background: var(--state-surface-current);
    border-color: var(--state-border-current);
  }
  .sidebar-history-item[aria-busy="true"] { cursor: progress; }
  .sidebar-history-item-header { align-items: start; }
  .sidebar-history-kind-label {
    color: var(--text-muted);
    font-size: var(--type-size-control);
    font-weight: var(--ui-field-font-weight);
    letter-spacing: 0;
    line-height: var(--type-line-control);
    white-space: normal;
  }
  .sidebar-history-name {
    color: var(--text);
    font-weight: var(--type-weight-strong);
    white-space: pre-wrap;
  }
  .sidebar-history-note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: pre-wrap;
  }
  .sidebar-history-item.is-current .sidebar-history-note {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }
  .sidebar-metadata-footer {
    align-items: center;
    border-block-start: 1px solid var(--panel-row-border);
    display: flex;
    gap: var(--space-related);
    inline-size: 100%;
    justify-content: space-between;
    margin-block-start: var(--space-related);
    min-inline-size: 0;
    padding-block-start: var(--space-related);
  }
  .sidebar-metadata-date {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar-history-metadata-footer { grid-column: 1 / -1; }
  .sidebar-history-word-count { flex: 0 0 auto; }
  .sidebar-history-details {
    border-block-start: 1px solid var(--panel-row-border);
    display: grid;
    gap: var(--space-related);
    padding-block-start: var(--space-related);
  }
  .sidebar-history-actions :where(.sidebar-primary-cta-button, .sidebar-secondary-button) {
    white-space: normal;
  }
  .sidebar-history-preview-button { grid-column: 1 / -1; }
  .sidebar-history-empty { min-block-size: 0; }
  .sidebar-history-list-footer { margin-block-start: 0; min-block-size: 0; }
  .sidebar-history-save-version-button { inline-size: 100%; justify-content: center; min-block-size: 40px; }
  .sidebar-history-composer { gap: var(--space-cluster); }
  .sidebar-history-save-form { padding: 0; }
  .sidebar-history-save-actions { margin-block-start: var(--space-tight); }
  .sidebar-history-composer[hidden] { display: none; }
  /* Review state hooks shared by the canonical Review presentation below. */
  .sidebar-review-delete-button[data-review-delete-confirm="true"] {
    border-color: var(--danger-border);
  }
  /* Review menu rows already consume the shared sidebar-menu-action primitive.
     Only its long destructive label needs feature-specific wrapping. */
  .sidebar .sidebar-review-menu-action.sidebar-destructive-button {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}

/* css/surfaces/sidebar/03-account-base.css */
/* Account baseline presentation and shared form-action geometry. */
@layer surfaces {
  /* Account panel. */
  #support-tabpanel-account > .sidebar-support-section-header { display: none; }
  .sidebar-account-onboarding-card { align-content: start; }
  .sidebar-account-onboarding-card.is-account-flow-expanded {
    border-color: var(--control-border-hover);
    gap: var(--space-related);
  }
  .sidebar-account-inline-flow {
    border-block-start: 1px solid var(--panel-row-border);
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
    padding-block-start: var(--space-cluster);
  }
  .sidebar-account-inline-preparing {
    color: var(--text-muted);
    font-size: var(--type-size-control);
    line-height: var(--type-line-body);
    margin: 0;
  }
  .sidebar-account-inline-form {
    display: grid;
    gap: var(--space-cluster);
    min-inline-size: 0;
  }
  .sidebar-account-inline-form .sidebar-field { min-inline-size: 0; }
  .sidebar-account-inline-form .sidebar-input { inline-size: 100%; min-inline-size: 0; }
  .sidebar :where(.sidebar-stepper-field) {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar :where(.sidebar-stepper) {
    grid-auto-columns: var(--sidebar-control-block-size);
  }
  .sidebar :where(.sidebar-stepper-button) {
    block-size: var(--sidebar-control-block-size);
    inline-size: var(--sidebar-control-block-size);
    min-block-size: var(--sidebar-control-block-size);
    min-inline-size: var(--sidebar-control-block-size);
    padding: 0;
  }
  .sidebar :where(.sidebar-stepper-summary) {
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    padding: var(--space-related);
  }
  .sidebar :where(.sidebar-button-grid.is-form-actions) {
    border-block-start: 1px solid var(--panel-row-border);
    padding-block-start: var(--space-cluster);
  }
  .sidebar :where(.sidebar-button-grid.is-form-actions > .sidebar-command-button) {
    white-space: normal;
  }
}

/* css/surfaces/sidebar/04-shelf-base.css */
/* Shelf baseline behavior, composer rhythm, tags, and note editor presentation. */
@layer surfaces {
  /* Shelf behavior and content rhythm only. Visual surfaces come from shared sidebar primitives. */
  .sidebar-shelf-overview { border-block-end: 0; padding-block-end: 0; }
  .shelf-composer { display: grid; min-block-size: 0; min-inline-size: 0; }
  .shelf-composer-expanded { display: grid; gap: var(--sidebar-panel-body-gap, var(--space-cluster)); min-block-size: 0; min-inline-size: 0; }
  .shelf-composer.is-collapsed .shelf-composer-expanded { display: none; }
  .shelf-compose-card {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }
  .shelf-note-surface {
    display: grid;
    min-inline-size: 0;
    padding: var(--sidebar-card-padding);
  }
  .shelf-title-row {
    align-items: start;
    display: grid;
    gap: var(--space-tight);
    grid-template-columns: minmax(0, 1fr) auto;
    min-inline-size: 0;
    position: relative;
  }
  .sidebar .shelf-title-input {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--radius-control);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--type-size-heading);
    font-synthesis: weight;
    font-weight: var(--type-weight-strong);
    inline-size: 100%;
    letter-spacing: var(--type-tracking-heading);
    line-height: var(--type-line-heading);
    min-block-size: 38px;
    min-inline-size: 0;
    outline: none;
    padding: 2px 0 var(--space-tight);
  }
  .sidebar .shelf-title-input::placeholder {
    color: var(--text-muted);
    font-weight: var(--type-weight-strong);
    opacity: 1;
  }
  .shelf-tag-input::placeholder { color: var(--text-muted); opacity: 1; }
  .shelf-note-more-actions {
    align-self: start;
    position: relative;
  }
  .shelf-note-more-actions[hidden] { display: none; }
  .sidebar :where(.shelf-note-menu-action, [data-shelf-note-menu-action]) {
    justify-content: flex-start;
    padding-inline: var(--space-related);
    text-align: start;
  }
  .sidebar .shelf-note-menu-action[aria-checked="true"]::after {
    color: var(--accent);
    content: "✓";
    margin-inline-start: auto;
  }
  .sidebar [data-shelf-note-menu-destructive] {
    border-block-start-color: var(--panel-card-border);
    margin-block-start: 2px;
  }
  .shelf-title-input:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
  .shelf-note-editor {
    max-block-size: clamp(260px, 46dvh, 520px);
    min-block-size: clamp(112px, 14dvh, 156px);
    overscroll-behavior-block: contain;
  }
  .shelf-note-editor[data-selection-dragging="true"] {
    overflow-anchor: none;
    scroll-behavior: auto;
  }
  .shelf-note-editor .tiptap {
    background: transparent;
    color: var(--text);
    font-family: var(--ed-body-font);
    font-size: var(--type-size-control);
    line-height: var(--ed-line-height);
    margin: 0;
    max-inline-size: none;
    min-block-size: clamp(112px, 14dvh, 156px);
    outline: none;
    padding: var(--space-tight) var(--space-tight) var(--space-cluster);
  }
  .shelf-tag-editor {
    display: grid;
    min-inline-size: 0;
    padding-block-start: var(--space-tight);
  }
  .shelf-tag-control {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
    min-block-size: 30px;
    min-inline-size: 0;
  }
  .shelf-tag-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
    min-inline-size: 0;
  }
  .shelf-tag-list:empty { display: none; }
  .sidebar .shelf-tag-chip {
    align-items: center;
    border-radius: var(--radius-full);
    color: var(--accent);
    display: inline-flex;
    gap: 0;
    max-inline-size: 100%;
    min-block-size: 24px;
    padding-inline-start: 3px;
    transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
  }
  .shelf-tag-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (hover: hover) {
    .sidebar .shelf-tag-chip:hover { background: var(--state-layer-hover); }
  }
  .sidebar .shelf-tag-chip:focus-within {
    background: var(--state-layer-hover);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 1px;
  }
  .shelf-tag-remove-button {
    --ui-control-block-size: 24px;
    flex: 0 0 24px;
  }
  .shelf-tag-remove-button svg {
    block-size: 12px;
    inline-size: 12px;
  }
  .shelf-tag-input {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--radius-control);
    color: var(--text);
    flex: 0 1 96px;
    font: inherit;
    inline-size: auto;
    min-block-size: 28px;
    min-inline-size: 76px;
    outline: none;
    padding: 0;
  }
  .shelf-tag-input:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .shelf-note-footer {
    min-inline-size: 0;
    padding-block-start: var(--space-cluster);
  }
  .shelf-note-completion-actions {
    min-inline-size: 0;
  }
  .shelf-note-completion-actions:has(> #shelf-add-note-btn[hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
  .shelf-note-editor .tiptap:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
  .shelf-note-editor .is-editor-empty:first-child::before {
    color: var(--text-muted);
    content: attr(data-placeholder);
    float: inline-start;
    height: 0;
    pointer-events: none;
  }
  .shelf-note-editor .tiptap :where(p, ul, ol, blockquote, pre) { margin-block: 0 var(--ed-paragraph-spacing); }
}

/* css/surfaces/sidebar/05-writing-tools-find.css */
/* Writing-tools and Find/Search presentation plus narrow-container adaptations. */
@layer surfaces {
  /* Responsive adjustments. */
  #sidebar-panel-writing-tools {
    --sidebar-card-gap: var(--space-cluster);
    --sidebar-card-padding: var(--space-cluster);
  }

  .sidebar :where(.sidebar-find) {
    gap: var(--space-cluster);
  }

  .sidebar :where(.sidebar-find-card-header) {
    align-items: baseline;
  }

  .sidebar :where(.sidebar-search-count) {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    font-variant-numeric: tabular-nums;
    line-height: var(--type-line-meta);
    white-space: nowrap;
  }

  .sidebar :where(.sidebar-search-count:empty) {
    display: none;
  }

  .sidebar :where(.sidebar-search-box) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-inline-size: 0;
    position: relative;
  }

  .sidebar :where(.sidebar-search-input) {
    grid-area: 1 / 1 / 2 / 3;
    padding-inline-end: calc(var(--sidebar-control-block-size) + var(--space-related));
  }

  .sidebar :where(.sidebar-search-input::-webkit-search-decoration,
                  .sidebar-search-input::-webkit-search-cancel-button,
                  .sidebar-search-input::-webkit-search-results-button,
                  .sidebar-search-input::-webkit-search-results-decoration) {
    appearance: none;
    display: none;
  }

  .sidebar :where(.sidebar-search-clear-button) {
    --ui-control-block-size: calc(var(--sidebar-control-block-size) - 8px);

    align-self: center;
    grid-area: 1 / 2 / 2 / 3;
    justify-self: end;
    margin-inline-end: var(--space-tight);
    position: relative;
  }


  .sidebar :where(.sidebar-find-options) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight) var(--space-related);
  }

  .sidebar :where(.sidebar-find-options .sidebar-checkbox-row) {
    color: var(--text-sec);
    gap: var(--space-tight);
    min-block-size: 28px;
  }

  .sidebar :where(.sidebar-find-options .sidebar-checkbox-label) {
    font-size: var(--type-size-control);
    line-height: var(--type-line-control);
  }

  .sidebar :where(.sidebar-find-actions) {
    gap: var(--space-related);
  }

  .sidebar :where(.sidebar-find-actions.ui-control-group) {
    gap: 0;
  }

  .sidebar :where(.sidebar-find-results-summary) {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    margin: -2px 0 2px;
  }

  .sidebar :where(.sidebar-find-results-summary[hidden]) {
    display: none;
  }

  .sidebar :where(.sidebar-find-results) {
    display: grid;
    gap: 0;
    min-inline-size: 0;
  }

  .sidebar :where(.sidebar-search-result-row) {
    display: grid;
    min-inline-size: 0;
  }

  .sidebar :where(.sidebar-search-result-row + .sidebar-search-result-row) {
    border-block-start: 1px solid var(--panel-row-border);
  }

  .sidebar :where(.sidebar-search-result) {
    align-items: start;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    box-shadow: none;
    color: var(--text-sec);
    display: grid;
    gap: var(--space-related);
    grid-template-columns: 2.6ch minmax(0, 1fr);
    min-block-size: 48px;
    padding-block: var(--space-related);
    padding-inline: var(--space-tight) var(--space-related);
    text-align: start;
  }

  .sidebar :where(.sidebar-search-result-group) {
    min-block-size: 54px;
  }

  @media (hover: hover) {
    .sidebar :where(.sidebar-search-result:hover) {
      background: var(--control-surface-hover);
      border-color: transparent;
      color: var(--text);
    }
  }

  .sidebar :where(.sidebar-search-result:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }

  .sidebar :where(.sidebar-search-result.is-active,
                  .sidebar-search-result[aria-current="true"]) {
    background: var(--state-surface-current);
    border-color: var(--state-border-current);
    color: var(--text);
  }

  .sidebar :where(.sidebar-search-result-index) {
    align-self: start;
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    opacity: .72;
    font-variant-numeric: tabular-nums;
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-meta);
    padding-block-start: 1px;
    text-align: end;
  }

  .sidebar :where(.sidebar-search-result.is-active .sidebar-search-result-index,
                  .sidebar-search-result[aria-current="true"] .sidebar-search-result-index) {
    color: var(--text-muted);
    opacity: 1;
  }

  .sidebar :where(.sidebar-search-result-copy) {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }

  .sidebar :where(.sidebar-search-result-meta) {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-meta);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar :where(.sidebar-search-result-context) {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-height: var(--type-line-body);
    min-inline-size: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    white-space: normal;
  }

  .sidebar :where(.sidebar-search-result-group .sidebar-search-result-context) {
    -webkit-line-clamp: 3;
  }

  .sidebar :where(.sidebar-search-result-match) {
    -webkit-box-decoration-break: clone;
    background: var(--accent-surface);
    border-radius: var(--radius-detail);
    box-decoration-break: clone;
    color: var(--text);
    font-weight: var(--type-weight-strong);
    padding-inline: 1px;
  }

  .sidebar :where(.sidebar-search-result-before,
                  .sidebar-search-result-after) {
    color: var(--text-muted);
  }

  .sidebar :where(.sidebar-find-empty) {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    min-block-size: auto;
    padding: var(--space-tight) 0;
  }

  @media (forced-colors: active) {
    .sidebar :where(.sidebar-search-result.is-active,
                    .sidebar-search-result[aria-current="true"]) {
      border-color: Highlight;
    }

    .sidebar :where(.sidebar-search-result-match) {
      background: Highlight;
      color: HighlightText;
      forced-color-adjust: none;
    }
  }

  @container sidebar (max-width: 300px) {
    .sidebar :where(.sidebar-section-header) { align-items: start; flex-direction: column; }
    .sidebar :where(.sidebar-inline-badges) { justify-content: flex-start; }
  }
}

/* css/surfaces/sidebar/06-shared-grammar-and-motion.css */
@layer components {
  /* Shelf detail shared pieces. */
  .sidebar-shelf-panel.is-detail-mode .shelf-filter-section,
  .sidebar-shelf-panel.is-detail-mode .shelf-note-list {
    display: none;
  }

}



@layer components {
  @keyframes sidebar-panel-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes sidebar-empty-enter {
    from { opacity: 0; transform: translateY(calc(var(--motion-distance-reveal) * .75)); }
    to { opacity: 1; transform: translateY(0); }
  }

  .sidebar[data-sidebar-open="true"] :where(.sidebar-panel) {
    animation: sidebar-panel-enter var(--motion-duration-surface) var(--motion-ease-out) backwards;
  }

  :root:not([data-sidebar-mode="compact"]) .sidebar[data-sidebar-open="true"] :where(.sidebar-panel) {
    animation-delay: var(--sidebar-dock-content-delay);
  }

  .sidebar :where(.sidebar-panel-header, .sidebar-panel-body) {
    transition: border-color var(--motion-duration-surface) var(--motion-ease-standard), background-color var(--motion-duration-surface) var(--motion-ease-standard);
  }

  .sidebar :where(.sidebar-empty-card, .sidebar-empty-state) {
    animation: sidebar-empty-enter var(--motion-duration-panel-sheet) var(--motion-ease-out) backwards;
  }

  .sidebar :where(.sidebar-list-item, .sidebar-card, .sidebar-selectable-card, .sidebar-document-open-button) {
    transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), border-color var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard), transform var(--motion-duration-state) var(--motion-ease-out);
  }

  @media (hover: hover) {
    .sidebar :where(.sidebar-card-button:hover, .sidebar-list-item:hover, .sidebar-selectable-card:not(.is-summary):hover) {
      transform: translateY(-1px);
    }
  }

  .sidebar :where(.sidebar-card-button:active, .sidebar-list-item:active, .sidebar-selectable-card:not(.is-summary):active) {
    transform: translateY(0);
  }
}

@layer surfaces {
  /* Shared sidebar grammar: quiet surface, outline cards, and consistent controls. */
  #sidebar-panel-appearance {
    --sidebar-card-gap: var(--space-section);
    --sidebar-card-padding: var(--space-cluster);
    --sidebar-field-stack-gap: var(--space-section);
  }

  .sidebar :where(.sidebar-control) {
    border: 0;
    display: grid;
    gap: var(--sidebar-label-control-gap);
    margin: 0;
    padding: 0;
  }

  .sidebar :where(.sidebar-control-label,
                  .sidebar-field-label,
                  .sidebar-section-label) {
    background: transparent;
    border: 0;
    color: var(--text-sec);
    display: block;
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-regular);
    inline-size: auto;
    letter-spacing: 0;
    line-height: var(--type-line-control);
    margin: 0;
    min-block-size: auto;
    padding: 0;
  }

  .sidebar :where(.sidebar-field,
                  .sidebar-field-stack,
                  .sidebar-field-stack > .sidebar-field) {
    border: 0;
    display: grid;
    margin: 0;
    padding: 0;
  }

  .sidebar :where(.sidebar-field:not(.sidebar-control)) {
    gap: var(--sidebar-label-control-gap);
  }

  .sidebar :where(.sidebar-field-stack) {
    gap: var(--sidebar-field-stack-gap);
  }

  .sidebar :where(.sidebar-field + .sidebar-field,
                  .sidebar-field + .sidebar-field-stack,
                  .sidebar-field-stack + .sidebar-field,
                  .sidebar-field-stack + .sidebar-field-stack,
                  .sidebar-field-stack > .sidebar-field + .sidebar-field) {
    margin-block-start: 0;
    padding: 0;
  }

  .sidebar :where(.sidebar-field + .sidebar-field)::before,
  .sidebar :where(.sidebar-field + .sidebar-field-stack)::before,
  .sidebar :where(.sidebar-field-stack + .sidebar-field)::before,
  .sidebar :where(.sidebar-field-stack + .sidebar-field-stack)::before,
  .sidebar :where(.sidebar-field-stack > .sidebar-field + .sidebar-field)::before {
    content: none;
  }

  .sidebar :where(.sidebar-segmented-control) {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .sidebar :where(.sidebar-segmented-control .sidebar-segmented-option) {
    min-block-size: calc(var(--sidebar-segmented-block-size) - 4px);
    min-inline-size: 0;
    padding-block: 3px;
    padding-inline: 8px;
  }

  .sidebar :where(.sidebar-segmented-label) {
    display: block;
    font: inherit;
    letter-spacing: 0;
    line-height: inherit;
  }

  .sidebar :where(.sidebar-textarea) {
    --ui-field-focus-ring-offset: calc(-1 * var(--focus-ring-width));
    inline-size: 100%;
    min-block-size: 72px;
    min-inline-size: 0;
    padding: var(--space-related) var(--space-cluster);
    resize: vertical;
  }


  .sidebar :where(.sidebar-hex-field) {
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    display: block;
    inline-size: 100%;
    min-block-size: var(--sidebar-control-block-size);
    overflow: hidden;
    position: relative;
  }

  .sidebar :where(.sidebar-hex-prefix) {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-none);
    color: var(--text-muted);
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: var(--ui-field-font-size);
    font-weight: var(--ui-field-font-weight);
    inset-block: 0;
    inset-inline-start: 12px;
    justify-content: center;
    line-height: var(--ui-field-line-height);
    padding: 0;
    pointer-events: none;
    position: absolute;
  }

  .sidebar :where(.sidebar-hex-input) {
    inline-size: 100%;
    min-block-size: var(--sidebar-control-block-size);
    min-inline-size: 0;
    padding-inline: 28px 12px;
  }

  .sidebar :where(.sidebar-hex-field:focus-within) {
    border-color: var(--control-border-hover);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }


  .sidebar :where(.sidebar-outline-list) {
    display: grid;
    gap: var(--space-cluster);
  }

  .sidebar :where(.sidebar-outline-section) {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }

  .sidebar :where(.sidebar-outline-count) {
    color: var(--text-muted);
  }

  .sidebar :where(.sidebar-outline-tree,
                  .sidebar-outline-children) {
    display: grid;
    gap: var(--space-micro);
    list-style: none;
    margin: 0;
    min-inline-size: 0;
    padding: 0;
  }

  .sidebar :where(.sidebar-outline-children) {
    border-inline-start: 1px solid var(--panel-row-border);
    margin-block-start: var(--space-micro);
    margin-inline-start: calc(8px + var(--outline-depth, 0) * var(--space-cluster));
    padding-inline-start: var(--space-related);
  }

  .sidebar :where(.sidebar-outline-node) {
    display: grid;
    gap: var(--space-micro);
    min-inline-size: 0;
  }

  .sidebar :where(.sidebar-outline-item) {
    background: transparent;
    border-color: transparent;
    color: var(--text-sec);
    display: flex;
    justify-content: flex-start;
    min-block-size: 30px;
    padding-inline: calc(8px + var(--outline-depth, 0) * var(--space-cluster)) 8px;
    position: relative;
    text-align: start;
  }

  .sidebar :where(.sidebar-outline-children .sidebar-outline-item)::before {
    background: var(--panel-row-border);
    block-size: 1px;
    content: "";
    inline-size: var(--space-related);
    inset-block-start: 50%;
    inset-inline-start: calc(-1 * var(--space-related));
    position: absolute;
    transform: translateY(-50%);
  }

  @media (hover: hover) {
    .sidebar :where(.sidebar-outline-item:hover) {
      background: var(--panel-row-bg-hover);
      border-color: transparent;
      color: var(--text);
    }
  }

  .sidebar :where(.sidebar-outline-item:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }

  .sidebar :where(.sidebar-outline-item[aria-current="true"]) {
    background: var(--panel-row-bg-active);
    border-color: var(--panel-row-border-hover);
    color: var(--text);
    font-weight: var(--type-weight-strong);
  }

  .sidebar :where(.sidebar-outline-label) {
    display: block;
    font-size: var(--type-size-control);
    line-height: var(--type-line-control);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar :where(.sidebar-outline-item[data-level="1"] .sidebar-outline-label) {
    font-weight: var(--type-weight-strong);
  }

  .sidebar :where(.sidebar-outline-item[data-level="2"] .sidebar-outline-label) {
    font-weight: var(--type-weight-regular);
  }

  .sidebar :where(.sidebar-outline-item[data-level="3"] .sidebar-outline-label,
                  .sidebar-outline-item[data-level="4"] .sidebar-outline-label,
                  .sidebar-outline-item[data-level="5"] .sidebar-outline-label,
                  .sidebar-outline-item[data-level="6"] .sidebar-outline-label) {
    color: inherit;
    font-weight: var(--type-weight-regular);
  }

  @container sidebar (max-width: 300px) {
    .sidebar :where(.sidebar-segmented-control) {
      grid-auto-flow: row;
      grid-auto-rows: minmax(var(--sidebar-segmented-block-size), auto);
    }
  }
}

@layer surfaces {
  /* Visual repair: keep the sidebar airy without turning status text and fields into bulky cards. */
  .sidebar-file-action-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sidebar-files-tabpanel,
  .sidebar-document-tools-tabpanel {
    display: grid;
    gap: var(--sidebar-panel-body-gap);
    min-inline-size: 0;
  }

  #sidebar-panel-documents .sidebar-panel-body:has(#files-tabpanel-documents:not([hidden])) {
    grid-template-rows: max-content minmax(0, 1fr);
    overflow: hidden;
  }

  .sidebar-files-documents-layout {
    grid-template-rows: minmax(0, 1fr) max-content;
    min-block-size: 0;
    overflow: hidden;
  }

  .sidebar-files-document-scroll {
    align-content: start;
    min-block-size: 0;
    padding-inline-end: 2px;
  }

  .sidebar-files-list-footer {
    border-block-start: 1px solid var(--panel-row-border);
    padding-block-start: var(--space-cluster);
  }


  .sidebar-files-tabs,
  .sidebar-document-tools-tabs,
  .sidebar-shelf-tabs {
    margin-block-end: 0;
  }

  .sidebar-settings-content {
    display: grid;
    gap: var(--space-section);
    min-inline-size: 0;
  }

  .sidebar-export-format-description,
  .sidebar-export-status {
    margin: 0;
  }

  .sidebar-export-format-description {
    color: var(--text-muted);
  }

  .sidebar-export-word-options,
  .sidebar-export-pdf-options {
    display: grid;
    gap: var(--space-cluster);
    min-inline-size: 0;
  }

  .sidebar-export-word-review-description,
  .sidebar-export-word-review-summary,
  .sidebar-export-word-review-warning {
    margin: 0;
  }

  .sidebar-export-word-review-warning {
    color: var(--status-warning);
  }

  .sidebar-export-status[data-state="error"] {
    color: var(--danger);
  }

  .sidebar-export-status[data-state="busy"] {
    color: var(--status-info, var(--text-muted));
  }

  .sidebar-export-status[data-state="success"] {
    color: var(--text);
  }

  .sidebar-export-status[data-state="warning"] {
    color: var(--status-warning);
  }

  .sidebar-export-workspace-card[aria-busy="true"] {
    cursor: progress;
  }

  .sidebar-export-workspace-footer { gap: var(--space-cluster); }
  .sidebar-export-workspace-actions { grid-template-columns: minmax(0, 1fr); }
  .sidebar-export-workspace-actions:has(.sidebar-export-pdf-preview-action:not([hidden])) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar-file-action-button,
  .sidebar-save-button { justify-content: center; text-align: center; }

  .sidebar-file-action-button svg,
  .sidebar-save-button svg { block-size: 16px; inline-size: 16px; }

  @media (hover: hover) {
    .sidebar-document-item:hover {
      background: var(--panel-row-bg-hover);
      border-color: var(--panel-row-border-hover);
    }
  }

  .sidebar-review-overview {
    gap: var(--space-related);
  }

  .sidebar-review-list,
  .sidebar-review-group {
    gap: var(--space-related);
  }

  #sidebar-panel-writing-tools .sidebar-card-grid {
    gap: var(--space-related);
    padding: var(--space-cluster);
  }

  .sidebar :where(.sidebar-outline-tree,
                  .sidebar-outline-children) {
    gap: 1px;
  }

  .sidebar :where(.sidebar-outline-item) {
    min-block-size: 28px;
    padding-block: var(--space-tight);
  }

  .sidebar-find-options {
    margin-block-start: -2px;
  }

  .sidebar-find-results {
    gap: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .sidebar-close-button,
    .sidebar-close-button svg {
      transition-duration: var(--motion-duration-reduced);
    }

    .sidebar[data-sidebar-open="true"] :where(.sidebar-panel) {
      animation-duration: var(--motion-duration-reduced);
      animation-delay: 0ms;
      transform: none;
    }
  }

}

@layer components {
  /* Control labels stay text-sized on coarse pointers; the actual inputs provide the touch target. */
  @media (pointer: coarse) {
    .sidebar :where(.sidebar-control-label,
                    .sidebar-field-label,
                    .sidebar-section-label) {
      min-block-size: auto;
    }
  }
}

@layer surfaces {
  /* Desktop/tablet panel changes paint immediately. The compact sheet keeps its
     spatial motion, but its internal panel content never waits behind a reveal. */
  .sidebar[data-sidebar-open="true"] :where(.sidebar-panel),
  .sidebar :where(.sidebar-empty-card, .sidebar-empty-state) {
    animation: none;
  }
}

/* css/surfaces/sidebar/07-shelf-detail.css */
@layer components {
  /* Shelf audit cleanup: consume the universal sidebar card/button/input system. */
  #sidebar-panel-shelf {
    --sidebar-card-gap: var(--space-section);
    --sidebar-card-padding: var(--space-cluster);
    --sidebar-field-stack-gap: var(--space-section);
  }

  .sidebar-shelf-panel .sidebar-panel-body {
    overflow: hidden;
    position: relative;
  }

  .sidebar-shelf-panel:not(.is-detail-mode) .sidebar-panel-body {
    grid-template-rows: minmax(0, 1fr);
  }

  .sidebar-shelf-panel:not(.is-detail-mode) .shelf-composer.is-collapsed {
    display: none;
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-filter-section,
  .sidebar-shelf-panel.is-detail-mode .shelf-note-list,
  .sidebar-shelf-panel.is-detail-mode .shelf-list-layout,
  .sidebar-shelf-panel.is-detail-mode .shelf-new-note-button {
    display: none;
  }

  .sidebar-shelf-panel.is-detail-mode > .sidebar-panel-header {
    visibility: hidden;
    pointer-events: none;
  }

  .sidebar-shelf-panel.is-detail-mode .sidebar-panel-body {
    align-content: start;
    gap: var(--sidebar-panel-body-gap);
    grid-auto-rows: max-content;
    grid-template-rows: minmax(0, 1fr);
    padding: var(--sidebar-panel-body-padding);
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-composer {
    block-size: 100%;
    gap: 0;
    grid-template-rows: minmax(0, 1fr);
    min-block-size: 0;
    overflow: hidden;
  }

  .shelf-list-layout {
    block-size: 100%;
    display: grid;
    gap: var(--sidebar-panel-body-gap);
    grid-template-rows: max-content minmax(0, 1fr) max-content;
    min-block-size: 0;
  }

  .shelf-filter-section {
    min-inline-size: 0;
  }

  .shelf-filter-select-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shelf-filter-select-row > .sidebar-select {
    min-inline-size: 0;
  }

  .shelf-note-list {
    --shelf-note-card-min-inline-size: 150px;
    align-content: start;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr);
    min-block-size: 0;
    padding-inline-end: 2px;
  }

  /* Shelf browse cards reserve the same two-line title and metadata regions so
     scanning stays orderly even when note titles vary greatly in length. */
  .shelf-note-card {
    --sidebar-card-gap: var(--space-related);
    --sidebar-card-padding: var(--space-related) var(--space-cluster);
    block-size: 108px;
    cursor: pointer;
    min-block-size: 108px;
    min-inline-size: var(--shelf-note-card-min-inline-size);
  }

  .shelf-note-card:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }

  .shelf-note-card .sidebar-card-header {
    block-size: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .shelf-note-card .sidebar-card-heading {
    block-size: 100%;
    gap: var(--space-related);
    grid-template-rows: 2.5em max-content;
  }

  .shelf-note-card .sidebar-card-title {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    block-size: 2.5em;
    display: -webkit-box;
    line-height: var(--type-line-heading);
    min-inline-size: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .shelf-note-card .shelf-note-card-meta {
    display: grid;
    font-size: var(--type-size-meta);
    gap: 1px;
    grid-template-rows: max-content max-content;
    line-height: var(--type-line-meta);
    min-inline-size: 0;
    white-space: nowrap;
  }

  .shelf-note-card-date,
  .shelf-note-card-time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shelf-note-card-time-row {
    align-items: center;
    display: grid;
    gap: var(--space-tight);
    grid-template-columns: minmax(0, 1fr) 14px;
    min-inline-size: 0;
  }

  .shelf-note-pin-slot {
    align-items: center;
    block-size: 14px;
    color: var(--accent);
    display: inline-grid;
    inline-size: 14px;
    justify-items: center;
  }

  .shelf-note-pin-indicator {
    block-size: 14px;
    fill: none;
    inline-size: 14px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .sidebar-list-footer,
  .shelf-list-footer {
    background: var(--surface-sidebar-shell);
    border-block-start: 1px solid var(--panel-row-border);
    display: grid;
    min-inline-size: 0;
    padding-block-start: var(--space-related);
    position: relative;
    z-index: 2;
  }

  .shelf-new-note-button {
    justify-content: center;
    min-block-size: 40px;
  }

  .shelf-note-editor {
    background: transparent;
    border: 0;
    border-radius: var(--radius-none);
  }

  /* The detail composer consumes the panel's available block space. The note
     surface stays bounded near its editing controls, while the footer remains
     stable and longer note content scrolls inside the editor. */
  .sidebar-shelf-panel.is-detail-mode .shelf-composer-expanded {
    block-size: 100%;
    grid-template-rows: minmax(0, 1fr) max-content;
    min-block-size: 0;
    overflow: hidden;
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-compose-card {
    block-size: 100%;
    grid-template-rows: minmax(0, 1fr);
    min-block-size: 0;
    overflow: hidden;
  }

  /* Open Shelf notes are secondary writing workspaces on tablet and desktop.
     The surface consumes the panel space above the stable completion footer;
     only the editor row flexes and scrolls, so title, tags, and formatting
     controls stay attached to the note rather than floating above dead space. */
  .sidebar-shelf-panel.is-detail-mode .shelf-note-surface {
    align-self: stretch;
    block-size: 100%;
    grid-template-rows: max-content minmax(112px, 1fr) max-content max-content;
    max-block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-note-editor {
    block-size: 100%;
    max-block-size: none;
    min-block-size: 112px;
  }

  .sidebar-shelf-panel.is-detail-mode .shelf-note-editor .tiptap {
    box-sizing: border-box;
    min-block-size: 100%;
  }

  /* Compact Shelf detail does not need the generic panel title row because the
     note itself owns its title and Done is the exit action. Remove that hidden
     row, but preserve the sheet drag zone so the note begins near the top
     without sitting beneath the drag target. */
  :root[data-sidebar-mode="compact"] .sidebar-shelf-panel.is-detail-mode > .sidebar-panel-header {
    display: none;
  }

  :root[data-sidebar-mode="compact"] .sidebar-shelf-panel.is-detail-mode .sidebar-panel-body {
    padding-block-start: calc(var(--sidebar-sheet-drag-zone) + var(--space-tight));
  }

  /* Phone sheets remain content-led while the keyboard is closed. A software
     keyboard promotes the same note to the available-height workspace model
     below so its formatting controls stay visible. */
  :root[data-sidebar-mode="compact"] .sidebar-shelf-panel.is-detail-mode .shelf-note-surface {
    align-self: start;
    block-size: clamp(280px, 50dvh, 440px);
    grid-template-rows: max-content minmax(96px, 1fr) max-content max-content;
  }

  /* Tablet Safari can shrink only VisualViewport while leaving the layout
     viewport unchanged. Cap the persistent Shelf itself to the measured visible
     block so the editor gives up height before tags, toolbar, or completion
     actions can move underneath the software keyboard. */
  :root[data-keyboard-visible="true"]:not([data-sidebar-mode="compact"]) .sidebar.is-shelf-detail-mode[data-sidebar-open="true"] {
    max-block-size: min(100%, var(--shelf-detail-visual-block, 100%));
  }

  :root[data-keyboard-visible="true"] .sidebar-shelf-panel.is-detail-mode .shelf-note-surface {
    align-self: stretch;
    block-size: 100%;
    max-block-size: 100%;
  }

  :root[data-keyboard-visible="true"] .sidebar-shelf-panel.is-detail-mode .shelf-note-editor {
    min-block-size: 72px;
  }

  /* Shelf detail responds to the resolved compact shell state rather than
     duplicating the viewport/pointer breakpoint owned by the shell. */
  :root[data-sidebar-mode="compact"][data-keyboard-visible="true"] .sidebar-shelf-panel.is-detail-mode .sidebar-panel-body {
    padding-block-end: var(--sidebar-panel-body-padding, var(--space-section));
  }

  :root[data-sidebar-mode="compact"][data-keyboard-visible="true"] .sidebar-shelf-panel.is-detail-mode .shelf-note-editor {
    min-block-size: 72px;
  }
}

@layer components {
  /* Shelf detail mode overrides stay last because they intentionally reshape the panel. */
  .sidebar.is-shelf-detail-mode {
    --sidebar-panel-body-gap: var(--space-cluster);
  }
}

/* css/surfaces/sidebar/08-export-pdf.css */
@layer surfaces {
  /* Documents Export workspace: PDF options use shared fields and reveal only relevant controls. */

  .sidebar-pdf-colour-control {
    align-items: center;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: var(--control-block-size) minmax(0, 1fr);
  }

  .sidebar-pdf-colour-swatch {
    appearance: none;
    background: transparent;
    block-size: var(--control-block-size);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    cursor: pointer;
    inline-size: var(--control-block-size);
    padding: 3px;
  }

  .sidebar-pdf-colour-swatch::-webkit-color-swatch-wrapper { padding: 0; }
  .sidebar-pdf-colour-swatch::-webkit-color-swatch,
  .sidebar-pdf-colour-swatch::-moz-color-swatch {
    border: 0;
    border-radius: var(--radius-detail);
  }

  .sidebar-pdf-colour-swatch:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  .sidebar-pdf-colour-reset {
    justify-self: start;
    margin-block-start: calc(var(--space-tight) * -1);
  }

  .sidebar-pdf-subsection-label {
    border-block-start: 1px solid var(--panel-row-border);
    color: var(--text-sec);
    font-size: var(--type-size-meta);
    font-weight: var(--type-weight-strong);
    letter-spacing: var(--type-tracking-label);
    margin-block-start: var(--space-related);
    padding-block-start: var(--space-section);
    text-transform: uppercase;
  }
  .sidebar-pdf-section {
    border: 0;
    display: grid;
    gap: var(--space-cluster);
    margin: 0;
    min-inline-size: 0;
    padding: 0;
  }

  /* PDF groups use ordinary section headings rather than fieldset legends.
     This keeps each divider on its own row, with equal breathing room above
     and below, instead of letting WebKit draw the border through the legend. */
  .sidebar-pdf-section + .sidebar-pdf-section {
    border-block-start: 1px solid var(--panel-row-border);
    margin-block-start: var(--space-cluster);
    padding-block-start: var(--space-cluster);
  }

  .sidebar-pdf-section-title {
    margin: 0;
  }

  .sidebar-pdf-settings-grid {
    display: grid;
    gap: var(--space-related);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-inline-size: 0;
  }

  .sidebar-pdf-settings-grid .sidebar-control-label {
    white-space: nowrap;
  }

  .sidebar-pdf-control-span {
    grid-column: 1 / -1;
  }

  .sidebar-cover-content-fields {
    display: grid;
    gap: var(--space-section);
    min-inline-size: 0;
  }

  .sidebar-cover-element-field,
  .sidebar-cover-image-picker {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }

  .sidebar-cover-element-heading {
    align-items: center;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
    min-inline-size: 0;
  }

  .sidebar-cover-position-control {
    gap: 0;
    min-inline-size: 0;
  }

  .sidebar-cover-position-control .sidebar-spatial-picker {
    justify-self: end;
  }

  .sidebar-cover-logo-option {
    align-items: center;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
    min-inline-size: 0;
  }

  .sidebar-cover-reset-positions {
    justify-self: start;
  }

  .sidebar-cover-summary-input {
    min-block-size: 74px;
    resize: vertical;
  }

  .sidebar-pdf-unlocked-controls {
    display: grid;
    gap: 0;
    min-inline-size: 0;
  }

  /* PDF export stays scannable as the feature set grows. Each disclosure row
     shows the current state at a glance; opening a row reveals the existing
     governed controls without turning export into a step-by-step wizard. */
  .sidebar-pdf-disclosure {
    border-block-start: 1px solid var(--panel-row-border);
    min-inline-size: 0;
  }

  .sidebar-pdf-disclosure:first-child {
    border-block-start: 0;
  }

  .sidebar-pdf-disclosure-summary {
    align-items: center;
    color: var(--text);
    cursor: pointer;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) 10px;
    list-style: none;
    min-block-size: 44px;
    min-inline-size: 0;
    padding-block: var(--space-related);
  }

  .sidebar-pdf-disclosure-summary::-webkit-details-marker {
    display: none;
  }

  .sidebar-pdf-disclosure-summary::after {
    block-size: 6px;
    border-block-end: 1.5px solid currentColor;
    border-inline-end: 1.5px solid currentColor;
    content: "";
    inline-size: 6px;
    justify-self: end;
    opacity: .62;
    transform: rotate(45deg) translateY(-1px);
    transform-origin: center;
  }

  .sidebar-pdf-disclosure[open] > .sidebar-pdf-disclosure-summary::after {
    transform: rotate(225deg) translate(-1px, -1px);
  }

  .sidebar-pdf-disclosure-summary:focus-visible {
    border-radius: var(--radius-control);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  .sidebar-pdf-disclosure-label {
    font-size: var(--type-size-body);
    font-weight: var(--type-weight-strong);
    min-inline-size: 0;
  }

  .sidebar-pdf-disclosure-value {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    max-inline-size: 150px;
    min-inline-size: 0;
    overflow: hidden;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-pdf-disclosure[open] > .sidebar-pdf-disclosure-summary .sidebar-pdf-disclosure-value {
    display: none;
  }

  .sidebar-pdf-disclosure-body {
    min-inline-size: 0;
    padding-block: var(--space-tight) var(--space-section);
  }

  .sidebar-pdf-disclosure-section + .sidebar-pdf-disclosure-section {
    margin-block-start: var(--space-section);
    padding-block-start: var(--space-section);
  }


  .sidebar-export-logo-empty,
  .sidebar-export-logo-selected {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }

  .sidebar-export-logo-empty .sidebar-secondary-button {
    inline-size: 100%;
  }

  .sidebar-export-logo-summary {
    align-items: center;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: 44px minmax(0, 1fr);
    min-inline-size: 0;
  }

  .sidebar-export-logo-preview {
    background: var(--control-surface);
    block-size: 44px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    inline-size: 44px;
    object-fit: contain;
    padding: 4px;
  }

  .sidebar-export-logo-name {
    color: var(--text);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-export-logo-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar-field-optional {
    color: var(--text-muted);
    font-weight: var(--type-weight-regular);
    margin-inline-start: var(--space-tight);
  }

  @container sidebar (max-width: 390px) {
    .sidebar-pdf-settings-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

/* css/surfaces/sidebar/09-account-flow.css */
@layer surfaces {
  .sidebar[data-account-inline-flow="true"] .sidebar-panel-body {
    scroll-padding-block: var(--space-cluster) min(42dvh, 320px);
  }

  .sidebar-account-inline-form {
    scroll-margin-block: var(--space-cluster);
  }

  .sidebar-account-inline-form [aria-invalid="true"] {
    border-color: var(--danger);
    outline: var(--focus-ring-width) solid var(--danger);
    outline-offset: 1px;
  }

  .sidebar-account-inline-form[aria-busy="true"] {
    cursor: progress;
  }

  @media (max-width: 767px) {
    .sidebar-account-inline-flow {
      max-block-size: calc(100dvh - var(--floating-chrome-plate-block-size));
      overscroll-behavior: contain;
    }

  }

  @container sidebar (max-width: 420px) {
    :root[data-sidebar-mode="compact"] .sidebar :where(.sidebar-button-grid.is-responsive-stack) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (forced-colors: active) {
    .sidebar-account-inline-form [aria-invalid="true"] {
      border-color: Mark;
      outline: 2px solid Mark;
    }
  }
}

/* css/surfaces/sidebar/10-documents.css */
@layer surfaces {
  /* Documents workspace: document state remains core-owned while this surface
     consumes the same card, status, metric, footer, and overflow primitives as
     Shelf, Review, and the other revised sidebars. */
  .sidebar-documents-entry-card .sidebar-card-grid,
  .sidebar-files-document-card .sidebar-card-grid {
    gap: var(--space-cluster);
  }

  .sidebar-document-list {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }

  .sidebar-document-item {
    overflow: visible;
    position: relative;
  }

  .sidebar-document-row {
    align-items: start;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
    min-inline-size: 0;
  }

  .sidebar-document-item.is-saving {
    border-color: var(--accent-border);
  }

  .sidebar-document-item.is-save-error {
    border-color: var(--danger-border);
  }

  .sidebar-document-item[aria-busy="true"] { cursor: progress; }
  .sidebar-document-item[aria-busy="true"] .sidebar-document-open-button { opacity: .72; }

  .sidebar-document-open-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    inline-size: 100%;
    justify-content: flex-start;
    min-block-size: 34px;
    min-inline-size: 0;
    padding: 0;
    text-align: start;
  }

  /* The document title is the card's primary click target, but focus belongs to
     the document card as a whole. This avoids a second accent rectangle around
     only the title and status after switching documents in WebKit. */
  .sidebar-document-open-button:focus-visible { outline: none; }

  .sidebar-document-item:has(.sidebar-document-open-button:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  .sidebar-document-heading { inline-size: 100%; }
  .sidebar-document-name { cursor: text; display: block; min-inline-size: 0; }
  .sidebar-document-item.is-current {
    background: var(--state-surface-current);
    border-color: var(--state-border-current);
  }

  /* Selection belongs to the complete document card. The title keeps the
     standard text colour so it does not become a second, competing accent. */
  .sidebar-document-item.is-current .sidebar-document-name { color: var(--text); }

  .sidebar-document-status {
    inline-size: max-content;
    max-inline-size: 100%;
  }

  .sidebar-document-file-link,
  .sidebar-document-provenance {
    max-inline-size: 100%;
  }

  .sidebar-document-file-link {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-document-provenance { color: var(--text-muted); display: block; }

  .sidebar-document-file-link[hidden],
  .sidebar-document-provenance[hidden] { display: none; }

  .sidebar-document-stats-footer { min-inline-size: 0; }
  .sidebar-document-metrics { inline-size: 100%; }

  .sidebar-document-rename-input {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .sidebar-document-item.is-renaming .sidebar-document-stats-footer { display: none; }

  .sidebar-document-item.is-close-confirming {
    align-items: stretch;
    background: var(--panel-card-bg);
    border-color: var(--panel-card-border-hover);
  }

  @container sidebar (max-width: 300px) {
    .sidebar-file-action-list,
    .sidebar-history-actions {
      grid-template-columns: minmax(0, 1fr);
    }

    .sidebar-overflow-menu {
      inline-size: min(176px, calc(100vw - 24px));
    }
  }

  @media (pointer: coarse) {
    .sidebar-overflow-trigger {
      block-size: var(--touch-target);
      inline-size: var(--touch-target);
      min-block-size: var(--touch-target);
      min-inline-size: var(--touch-target);
    }
  }

  @media (forced-colors: active) {
    .sidebar-document-item.is-current,
    .sidebar-document-item.is-saving,
    .sidebar-document-item.is-save-error {
      border-color: Highlight;
    }
  }

  .sidebar .sidebar-hex-field:has(.sidebar-hex-input[aria-invalid="true"]) {
    border-color: var(--danger);
  }

}

/* css/surfaces/sidebar/11-shelf-responsive.css */
@layer components {
  /* Shelf headings need their own compact scale. This override layer follows
     the shared editor layer, so the narrow note editor no longer inherits the
     document page's heading sizes unchanged. */
  .shelf-note-editor .tiptap :where(h1, h2, h3, h4, h5, h6) {
    color: var(--ed-heading-color);
    font-family: var(--ed-heading-font);
    margin-block: 1em 0.45em;
  }

  .shelf-note-editor .tiptap h1 { font-size: 24px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.14; }
  .shelf-note-editor .tiptap h2 { font-size: 21px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.18; }
  .shelf-note-editor .tiptap h3 { font-size: 18px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.22; }
  .shelf-note-editor .tiptap h4 { font-size: 16px; font-weight: 400; line-height: 1.25; }
  .shelf-note-editor .tiptap h5 { font-size: 14px; font-weight: 400; letter-spacing: 0.015em; line-height: 1.30; }
  .shelf-note-editor .tiptap h6 { font-size: 13px; font-style: italic; font-weight: 400; letter-spacing: 0.01em; line-height: 1.32; }

  .shelf-note-editor .tiptap :where(h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child) {
    margin-block-start: 0;
  }

  /* Shelf notes use the same horizontally scrollable control language as the
     document toolbar while remaining attached to the note body. */
  .shelf-note-toolbar {
    --shelf-note-toolbar-action-target: 34px;
    --toolbar-block-select-inline-size: 104px;
    --toolbar-select-padding-inline: 6px;
    --toolbar-divider-margin-inline: 5px;
    border-block: 1px solid var(--panel-row-border);
    display: block;
    min-inline-size: 0;
    overflow: hidden;
    padding-block: var(--space-tight);
    position: relative;
  }

  .shelf-note-toolbar[aria-disabled="true"] {
    opacity: .62;
  }

  .shelf-note-toolbar-rail {
    align-items: center;
    display: flex;
    gap: var(--toolbar-control-gap, 2px);
    inline-size: 100%;
    min-inline-size: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    padding-inline: 1px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
  }

  .shelf-note-toolbar-rail::-webkit-scrollbar {
    display: none;
  }

  .shelf-note-toolbar :where(.toolbar-button, .toolbar-select, .toolbar-divider) {
    flex-shrink: 0;
    scroll-snap-align: nearest;
  }

  .shelf-note-toolbar .toolbar-divider {
    background: var(--surface-window-separator);
    opacity: 1;
  }

  .shelf-note-toolbar .toolbar-button {
    flex-basis: var(--shelf-note-toolbar-action-target);
  }

  @container sidebar (max-width: 380px) {
    #sidebar-panel-shelf {
      --sidebar-card-gap: var(--space-cluster);
      --sidebar-card-padding: var(--space-related);
      --sidebar-field-stack-gap: var(--space-cluster);
      --sidebar-panel-body-gap: var(--space-related);
      --sidebar-panel-body-padding: var(--space-related);
    }

    .sidebar-shelf-panel.is-detail-mode .sidebar-panel-body {
      gap: var(--space-related);
      padding: var(--space-related);
    }

    .sidebar-shelf-panel.is-detail-mode .shelf-note-editor {
      min-block-size: 96px;
    }

    .shelf-title-row {
      gap: var(--space-tight);
    }

    #sidebar .shelf-title-input,
    #sidebar .shelf-title-input::placeholder {
      min-block-size: 34px;
    }

    .shelf-note-more-trigger {
      block-size: 32px;
      inline-size: 32px;
      min-block-size: 32px;
      min-inline-size: 32px;
      padding: 0;
    }

    .shelf-tag-editor {
      padding-block-start: 0;
    }

    .shelf-note-footer,
    .shelf-note-completion-actions {
      gap: var(--space-related);
    }

    .shelf-filter-select-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .shelf-note-toolbar {
      --shelf-note-toolbar-action-target: 32px;
      --toolbar-block-select-inline-size: 96px;
      padding-block: 2px;
    }
  }

  /* Keyboard mode wins after narrow-container sizing. Keep the toolbar and
     tags as stable edges and let the editor surrender height first. */
  :root[data-keyboard-visible="true"] .sidebar-shelf-panel.is-detail-mode .shelf-note-surface {
    grid-template-rows: max-content minmax(72px, 1fr) max-content max-content;
  }


  @container sidebar (max-width: 300px) {
    .shelf-note-completion-actions {
      grid-template-columns: minmax(0, 1fr);
    }
  }


  /* Two columns are only introduced when each Shelf card can keep a useful
     reading width after panel padding and the inter-card gap are accounted for. */
  @container sidebar (min-width: 352px) {
    .shelf-note-list {
      grid-template-columns: repeat(2, minmax(var(--shelf-note-card-min-inline-size), 1fr));
    }
  }


  @media (forced-colors: active) {
    .shelf-note-toolbar {
      border-color: CanvasText;
    }
  }
}

/* css/surfaces/sidebar/12-review-team.css */
@layer components {
  /* Review and Team share one collapsible collection shell. Feature code owns
     only labels, counts, datasets, and expansion state. */
  .sidebar-collapsible-section {
    align-content: start;
    gap: var(--space-cluster);
  }

  .sidebar-collapsible-section-body {
    gap: var(--space-related);
  }

  .sidebar-collapsible-section + .sidebar-collapsible-section {
    margin-block-start: 0;
  }

  .sidebar-collapsible-section-header {
    align-items: start;
    margin: 0;
    min-block-size: 0;
    padding: 0;
  }

  .sidebar-collapsible-section-title,
  .sidebar-collapsible-section-count {
    line-height: var(--type-line-meta);
    margin: 0;
  }

  .sidebar-collapsible-section-count {
    align-self: start;
    background: transparent;
    border: 0;
    border-radius: var(--radius-none);
    color: var(--text-muted);
    display: block;
    font-size: var(--type-size-meta);
    font-variant-numeric: tabular-nums;
    padding: 0;
  }

  .sidebar-review-group[data-review-status="attention"] .sidebar-review-group-count {
    color: var(--text);
  }

  .sidebar-collapsible-section-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--radius-control);
    color: inherit;
    cursor: pointer;
    display: grid;
    font: inherit;
    grid-template-columns: minmax(0, 1fr) auto;
    inline-size: 100%;
    text-align: start;
  }

  @media (hover: hover) {
    .sidebar-collapsible-section-toggle:hover { background: var(--panel-row-bg-hover); }
  }
  .sidebar-collapsible-section-toggle:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }

  .sidebar-collapsible-section-meta {
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: var(--space-tight);
    margin-inline-start: auto;
  }

  .sidebar-collapsible-chevron {
    block-size: 16px;
    color: var(--text-muted);
    display: block;
    flex: 0 0 auto;
    inline-size: 16px;
    inset-block-start: 1px;
    position: relative;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .sidebar-collapsible-section.is-expanded .sidebar-collapsible-chevron { transform: rotate(0deg); }
  .sidebar-collapsible-section-body[hidden] { display: none; }

  /* Embedded collections remain part of their parent card. Archive is a Space
     state, so Team uses the same disclosure primitive without creating a
     second top-level card. */
  .sidebar-collapsible-subsection {
    background: transparent;
    border: 0;
    border-block-start: 1px solid var(--panel-row-border);
    border-radius: var(--radius-none);
    box-shadow: none;
    gap: var(--space-related);
    padding: var(--space-cluster) 0 0;
  }

  .sidebar-collapsible-subsection > .sidebar-collapsible-section-header {
    padding-inline: 0;
  }

  .sidebar-collapsible-subsection > .sidebar-collapsible-section-body {
    padding-inline: 0;
  }

  /* Review and Team also share the exact expandable item-card shell, including
     selected treatment, summary trigger, detail divider, and overflow slot. */
  .sidebar-expandable-item {
    font-family: var(--font-ui);
    overflow: visible;
    position: relative;
  }

  .sidebar-expandable-item.is-current {
    background: var(--state-surface-current);
    border-color: var(--state-border-current);
  }

  .sidebar-expandable-item-header {
    align-items: start;
    inline-size: 100%;
  }

  .sidebar-expandable-item-trigger {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius-card) - 1px);
    color: inherit;
    cursor: pointer;
    display: block;
    font: inherit;
    inline-size: 100%;
    min-block-size: 0;
    min-inline-size: 0;
    padding: 0;
    text-align: start;
  }

  @media (hover: hover) {
    .sidebar-expandable-item-trigger:hover { background: var(--panel-row-bg-hover); }
  }
  .sidebar-expandable-item-trigger:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }

  .sidebar-expandable-item-summary-content {
    align-items: start;
    inline-size: 100%;
    padding: var(--space-tight);
  }

  .sidebar-expandable-item:not(.is-current) > .sidebar-expandable-item-header > .sidebar-overflow { display: none; }
  .sidebar-expandable-item.is-current > .sidebar-expandable-item-header > .sidebar-overflow { display: block; }

  .sidebar-expandable-item-body[hidden] { display: none; }
  .sidebar-expandable-item-body {
    border-block-start: 1px solid var(--panel-row-border);
    padding-block-start: var(--space-related);
  }

  .sidebar-review-item {
    font-family: var(--font-ui);
  }

  .sidebar-review-item.is-editing { overflow: visible; }

  .sidebar-review-summary-topline {
    align-items: center;
    order: -1;
    display: flex;
    gap: var(--space-related);
    justify-content: space-between;
    min-inline-size: 0;
  }

  /* Review type labels use the same quiet label grammar as Suggested change. */
  .sidebar-review-kind { font-weight: var(--type-weight-regular); }

  .sidebar-review-anchor-title,
  .sidebar-review-summary-copy {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .sidebar-review-anchor-title {
    -webkit-line-clamp: 2;
    color: var(--text-muted);
    font-size: var(--type-size-control);
    font-weight: var(--ui-field-font-weight);
    letter-spacing: 0;
    line-height: var(--type-line-body);
  }
  .sidebar-review-summary-copy { -webkit-line-clamp: 2; }

  .sidebar-review-item.is-current .sidebar-review-anchor-title {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* Shared .sidebar-metadata-footer owns the row geometry. Review only needs
     to span the expandable-card grid. */
  .sidebar-review-metadata-footer {
    grid-column: 1 / -1;
  }

  .sidebar-review-metadata-author {
    flex: 0 1 45%;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-review-metadata-date {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-review-metadata-status { margin-inline-start: auto; }

  .sidebar-review-item.is-current .sidebar-review-metadata-footer-compact { display: none; }
  .sidebar-review-item.is-current .sidebar-review-summary-copy { display: none; }

  .sidebar-review-overflow-menu[hidden],
  .sidebar-review-details[hidden],
  .sidebar-review-composer[hidden],
  .sidebar-review-composer [hidden] { display: none; }

  .sidebar-review-body,
  .sidebar-review-change-text,
  .sidebar-review-text-value {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .sidebar-review-change-row {
    border-inline-start: 2px solid var(--control-border-hover);
    gap: var(--space-tight);
    padding-inline-start: var(--space-related);
  }

  .sidebar-review-comment-note-row + .sidebar-review-change-row {
    margin-block-start: var(--space-tight);
  }

  .sidebar-review-warning {
    color: var(--text);
    font-size: var(--type-size-meta);
    font-weight: var(--type-weight-strong);
  }

  .sidebar-review-conflict-text {
    background: var(--control-surface);
    border: 1px solid var(--panel-row-border);
    border-radius: var(--radius-control);
    gap: 0;
    overflow: hidden;
    padding: 0;
  }

  .sidebar-review-conflict-text > .sidebar-review-text-block {
    padding: var(--space-related);
  }

  .sidebar-review-conflict-text > .sidebar-review-text-block + .sidebar-review-text-block {
    border-block-start: 1px solid var(--panel-row-border);
  }

  .sidebar-review-inline-editor {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .sidebar-review-inline-editor .review-note-surface {
    gap: var(--space-cluster);
    max-block-size: min(620px, calc(var(--app-visual-viewport-block, 100dvh) - 112px));
    min-block-size: 0;
  }

  .sidebar-review-inline-editor .review-note-editor-surface {
    gap: var(--space-related);
    min-block-size: 0;
  }

  /* A suggested edit is one choice: replace the selected text, or delete it.
     Compose the writing field and deletion alternative as one control surface
     so the relationship is visible without adding another card or workflow. */
  .sidebar-review-panel .review-note-suggestion-section {
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    gap: 0;
    overflow: hidden;
  }

  .sidebar-review-panel .review-note-suggestion-section > .review-note-writing-field {
    gap: var(--space-tight);
    padding: var(--space-related);
  }

  .sidebar-review-panel .review-note-suggestion-section .review-note-replacement {
    --ui-field-focus-ring-offset: calc(-1 * var(--focus-ring-width));
    background: transparent;
    border: 0;
    border-radius: var(--radius-none);
    padding-inline: var(--space-related);
  }

  .sidebar-review-panel .review-note-suggestion-section > .review-note-check-row {
    border-block-start: 1px solid var(--panel-row-border);
    margin: 0;
    min-block-size: 38px;
    padding: var(--space-related);
    transition: background-color var(--motion-duration-micro) var(--motion-ease-standard);
  }

  .sidebar-review-panel .review-note-suggestion-section > .review-note-check-row:has(input:checked) {
    background: var(--state-layer-selected);
  }

  .sidebar-review-panel .review-note-suggestion-section[data-deletion="true"] > .review-note-writing-field > .review-note-label {
    color: var(--text-muted);
  }

  .sidebar-review-inline-editor .review-note-body {
    max-block-size: min(420px, 46dvh);
    padding-block: var(--focus-ring-width);
    padding-inline: calc(var(--focus-ring-width) + 3px);
    scroll-padding-block: var(--space-related);
  }

  .sidebar-review-inline-editor .sidebar-review-editor-label {
    color: var(--text-sec);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-regular);
    letter-spacing: 0;
    line-height: var(--type-line-control);
    white-space: normal;
  }

  .sidebar-review-inline-editor .review-note-anchor-preview {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    max-block-size: calc(3 * var(--ed-line-height) * 1em);
    overflow: hidden;
  }

  .sidebar-review-inline-editor .review-note-actions {
    flex: 0 0 auto;
  }

  .sidebar-review-inline-editor[data-busy="true"] :where(.review-note-body) {
    opacity: .72;
    pointer-events: none;
  }

  .sidebar-review-composer {
    color: var(--text);
    flex: 0 0 auto;
    font-family: var(--font-ui);
    font-size: var(--type-size-control);
    inline-size: 100%;
    margin-block-end: var(--space-cluster);
    overflow: visible;
  }

  .sidebar-review-composer .review-note-surface {
    min-block-size: 0;
  }

  .sidebar-review-composer .review-note-editor-surface:focus-within {
    border-color: var(--accent-border-strong);
  }

  .sidebar-review-composer .review-note-editor-surface > .review-note-actions {
    border-block-start: 1px solid var(--panel-row-border);
    padding-block-start: var(--space-cluster);
  }

  .sidebar-review-composer .review-note-header { align-items: center; }

  .sidebar-review-composer .review-note-kind-switch {
    inline-size: 100%;
  }

  .sidebar-review-composer .review-note-kind-option {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .sidebar-review-composer .review-note-body {
    max-block-size: min(390px, 48dvh);
    min-block-size: 0;
  }

  .sidebar-review-composer .review-note-anchor-preview {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--text-muted);
    display: -webkit-box;
    font-family: var(--ed-body-font);
    font-style: italic;
    line-height: var(--ed-line-height);
    max-block-size: calc(2 * var(--ed-line-height) * 1em);
    overflow: hidden;
  }

  .sidebar-review-composer .review-note-replacement { min-block-size: 96px; }
  .sidebar-review-composer .review-note-context-textarea { min-block-size: 76px; }

  .sidebar-review-composer .review-note-status[data-type="error"] { color: var(--danger); }

  .sidebar-review-composer[data-busy="true"] :where(.review-note-body, .review-note-kind-switch) {
    opacity: .72;
  }

  @container sidebar (max-width: 300px) {
    .sidebar-review-summary-topline {
      align-items: start;
      flex-direction: column;
      gap: var(--space-micro);
    }

    .sidebar-review-metadata-footer {
      align-items: start;
      flex-direction: column;
    }

    .sidebar-review-metadata-date {
      max-inline-size: none;
      text-align: start;
      white-space: normal;
    }

    .sidebar-review-metadata-status { margin-inline-start: 0; }

    .sidebar-review-actions,
    .review-note-actions {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  :root[data-sidebar-mode="compact"] .sidebar-review-item.is-current { scroll-margin-block: calc(var(--sidebar-sheet-drag-zone) + var(--space-cluster)); }

  :root[data-sidebar-mode="compact"] :is(
    .sidebar-collapsible-section-toggle,
    .sidebar-review-overflow-trigger,
    .sidebar .sidebar-review-menu-action,
    .sidebar-review-actions > button,
    .sidebar-review-inline-editor .review-note-close,
    .sidebar-review-composer .review-note-close,
    .sidebar-review-inline-editor .review-note-actions > button
  ) {
    min-block-size: 44px;
    touch-action: manipulation;
  }

  :root[data-sidebar-mode="compact"] .sidebar-review-overflow-trigger {
    block-size: 44px;
    inline-size: 44px;
    min-inline-size: 44px;
  }

  :root[data-sidebar-mode="compact"] .sidebar-review-inline-editor .review-note-surface {
    max-block-size: min(500px, calc(var(--app-visual-viewport-block, 100dvh) - 132px));
  }

  :root[data-sidebar-mode="compact"] .sidebar-review-inline-editor .review-note-body {
    max-block-size: min(330px, 40dvh);
  }

  :root[data-sidebar-mode="compact"] .sidebar-review-composer .review-note-surface {
    max-block-size: min(500px, calc(var(--app-visual-viewport-block) - 132px));
  }

  :root[data-sidebar-mode="compact"] .sidebar-review-composer .review-note-body {
    max-block-size: min(330px, 42dvh);
  }

  :root[data-sidebar-mode="compact"][data-keyboard-visible="true"] .sidebar-review-composer .review-note-surface {
    max-block-size: min(390px, calc(var(--app-visual-viewport-block) - 118px));
  }

  :root[data-sidebar-mode="compact"][data-keyboard-visible="true"] .sidebar-review-composer .review-note-body {
    max-block-size: none;
  }

  :root[data-sidebar-mode="compact"][data-keyboard-visible="true"] .sidebar-review-inline-editor .review-note-surface {
    max-block-size: min(390px, calc(var(--app-visual-viewport-block, 100dvh) - 118px));
  }

  :root[data-sidebar-mode="compact"][data-keyboard-visible="true"] .sidebar-review-inline-editor .review-note-body {
    max-block-size: min(230px, 34dvh);
  }

  @media (prefers-reduced-motion: reduce) {
    .sidebar-collapsible-chevron { transition: none; }
  }

  @media (forced-colors: active) {
    .sidebar-review-item.is-current,
    .sidebar-review-inline-editor .review-note-editor-surface,
    .sidebar-review-composer .review-note-editor-surface {
      border-color: Highlight;
      box-shadow: none;
    }

    .sidebar-review-item.is-current { outline: 2px solid Highlight; outline-offset: -2px; }
  }
}

/* css/surfaces/sidebar/13-account-team-versions.css */
@layer components {
  /* Account owns the outer frame while each Account tab owns its own scroll
     surface. Team therefore keeps its action footer fixed in the same way as
     Shelf and Versions instead of placing primary actions in a summary card. */
  .sidebar-support-panel .sidebar-panel-body {
    grid-template-rows: max-content minmax(0, 1fr);
    overflow: hidden;
  }

  /* Keep Account and Team in the constrained scroll row even when the
     Account/Team tablist is hidden for signed-out and non-Team accounts. Without
     explicit placement, CSS grid auto-placement moves Account into the
     max-content row, leaving the mobile sheet clipped and non-scrollable. */
  .sidebar-support-tabs { grid-row: 1; }

  .sidebar-support-tabpanel {
    grid-row: 2;
    min-block-size: 0;
    min-inline-size: 0;
  }

  #support-tabpanel-account {
    align-content: start;
    display: grid;
    gap: var(--sidebar-panel-body-gap);
    padding-inline-end: 2px;
  }

  #support-tabpanel-team {
    flex-direction: column;
    gap: var(--sidebar-panel-body-gap);
    overflow: hidden;
  }

  #support-tabpanel-team:not([hidden]) { display: flex; }

  #team-state { flex: 1 1 auto; }

  .sidebar-contained-list-scroll {
    align-content: start;
    min-block-size: 0;
    min-inline-size: 0;
    padding-inline-end: 2px;
  }

  .sidebar-list-footer:empty { display: none; }

  /* Team uses the same fixed-footer behaviour as Shelf and Versions. The
     default actions keep their complete intrinsic height, while an open footer
     composer may shrink and scroll inside compact sheets. */
  #team-actions-footer {
    flex: 0 0 auto;
    min-block-size: 0;
    overflow: visible;
  }

  /* Account plan choices reuse the shared sidebar card/selectable-card visual
     language. Tier-specific CSS only owns the disclosure and price content that
     exists uniquely for plans; shared surfaces, spacing, typography, focus,
     hover, indicator placement, and footer structure remain authoritative. */
  .sidebar :where(.sidebar-selectable-card.is-tier-choice:not(.is-selected)) {
    background: var(--panel-card-bg);
    border-color: var(--panel-row-border);
    transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), border-color var(--motion-duration-micro) var(--motion-ease-standard), box-shadow var(--motion-duration-micro) var(--motion-ease-standard);
  }

  @media (hover: hover) {
    .sidebar :where(.sidebar-selectable-card.is-tier-choice:not(.is-selected):hover) {
      background: var(--control-surface-hover);
      border-color: var(--control-border-hover);
    }
  }

  .sidebar :where(.sidebar-selectable-card.is-tier-choice.is-selected) {
    background: var(--state-surface-current);
    border-color: var(--state-border-current);
    transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), border-color var(--motion-duration-micro) var(--motion-ease-standard), box-shadow var(--motion-duration-micro) var(--motion-ease-standard);
  }

  .sidebar :where(.sidebar-selectable-card.is-tier-choice .sidebar-selectable-card-indicator) {
    background: transparent;
    border-color: var(--control-border-hover);
    position: relative;
  }

  .sidebar :where(.sidebar-selectable-card.is-tier-choice .sidebar-selectable-card-indicator)::after {
    background: var(--accent);
    block-size: 8px;
    border-radius: var(--radius-full);
    content: '';
    inline-size: 8px;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    opacity: 0;
    position: absolute;
    transform: translate(-50%, -50%) scale(.8);
    transition: opacity var(--motion-duration-micro) var(--motion-ease-standard), transform var(--motion-duration-micro) var(--motion-ease-standard);
  }

  .sidebar :where(.sidebar-selectable-card.is-tier-choice.is-selected .sidebar-selectable-card-indicator) {
    background: var(--surface-sidebar-shell);
    border-color: var(--state-border-current);
  }

  .sidebar :where(.sidebar-selectable-card.is-tier-choice.is-selected .sidebar-selectable-card-indicator)::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .sidebar :where(.sidebar-tier-choice-shell) {
    display: grid;
    gap: 0;
    min-inline-size: 0;
  }

  .sidebar :where(.sidebar-tier-choice-shell.has-limit-disclosure > .sidebar-selectable-card) {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
  }

  .sidebar :where(.sidebar-tier-limit-details) {
    background: var(--state-surface-current);
    border: 1px solid var(--state-border-current);
    border-block-start: 0;
    border-end-end-radius: var(--radius-card);
    border-end-start-radius: var(--radius-card);
    color: var(--text);
    min-inline-size: 0;
    overflow: clip;
  }

  .sidebar :where(.sidebar-tier-limit-summary) {
    align-items: center;
    color: var(--accent);
    cursor: pointer;
    display: grid;
    font-size: var(--type-size-meta);
    font-weight: var(--type-weight-strong);
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
    line-height: var(--type-line-control);
    list-style: none;
    min-block-size: 40px;
    min-inline-size: 0;
    padding: calc(var(--space-related) - 1px) var(--sidebar-card-padding);
  }

  .sidebar :where(.sidebar-tier-limit-summary)::-webkit-details-marker { display: none; }

  .sidebar :where(.sidebar-tier-limit-chevron) {
    block-size: 16px;
    color: var(--text-muted);
    flex: 0 0 auto;
    inline-size: 16px;
    transition: transform var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard);
  }

  .sidebar :where(.sidebar-tier-limit-details[open] .sidebar-tier-limit-chevron) {
    color: var(--accent);
    transform: rotate(180deg);
  }

  .sidebar :where(.sidebar-tier-limit-summary:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: calc(-1 * var(--focus-ring-width));
  }

  .sidebar :where(.sidebar-tier-limit-list) {
    border-block-start: 1px solid var(--state-border-current);
    display: grid;
    gap: var(--space-tight);
    margin: 0;
    padding: var(--space-related) var(--sidebar-card-padding) var(--sidebar-card-padding);
  }

  .sidebar :where(.sidebar-tier-limit-item) {
    color: var(--text-muted);
    display: grid;
    font-size: var(--type-size-meta);
    gap: var(--space-tight);
    grid-template-columns: 10px minmax(0, 1fr);
    line-height: var(--type-line-body);
    list-style: none;
    margin: 0;
  }

  .sidebar :where(.sidebar-tier-limit-item)::before {
    color: var(--text-sec);
    content: '•';
    font-size: var(--type-size-meta);
    line-height: var(--type-line-heading);
    text-align: center;
  }

  .sidebar :where(.sidebar-selectable-card.is-tier-choice:not(.is-selected) .sidebar-selectable-card-price) {
    display: none;
  }

  .sidebar :where(.sidebar-selectable-card.is-tier-choice .sidebar-selectable-card-price) {
    border-block-start: 1px solid var(--panel-row-border);
    display: grid;
    gap: 2px;
    margin-block-start: var(--space-tight);
    min-inline-size: 0;
    padding-block-start: var(--space-related);
  }

  .sidebar :where(.sidebar-selectable-card.is-tier-choice .sidebar-selectable-card-price-primary) {
    color: var(--text);
    font-size: var(--type-size-heading);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-heading);
  }

  .sidebar :where(.sidebar-selectable-card.is-tier-choice .sidebar-selectable-card-price-billing) {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
  }

  .sidebar :where(.sidebar-selectable-card.is-tier-choice .sidebar-selectable-card-price-equivalent) {
    color: var(--text-sec);
    font-size: var(--type-size-meta);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-meta);
    margin-block-start: var(--space-micro);
  }

  .sidebar :where(.sidebar-selectable-card.is-tier-choice .sidebar-selectable-card-details[hidden]) {
    display: none;
  }

  .sidebar :where(.sidebar-selectable-card.is-tier-choice:not(.is-selected) .sidebar-selectable-card-details) {
    display: none;
  }

  @media (forced-colors: active) {
    .sidebar :where(.sidebar-selectable-card.is-tier-choice.is-selected) {
      border-color: Highlight;
      box-shadow: none;
    }
    .sidebar :where(.sidebar-selectable-card.is-tier-choice.is-selected .sidebar-selectable-card-indicator) {
      background: Highlight;
      border-color: Highlight;
    }
  }

  #team-actions-footer:has(.sidebar-footer-composer) {
    flex-shrink: 1;
    overflow: hidden;
  }

  #team-actions-footer .sidebar-footer-composer {
    max-block-size: 100%;
  }

  /* Versions and Team share one footer-composer shell rather than shipping
     panel-specific form cards with subtly different spacing and alignment. */
  .sidebar-footer-composer {
    gap: var(--space-cluster);
    min-inline-size: 0;
  }

  .sidebar-footer-composer-form { padding: 0; }
  .sidebar-footer-composer-fields { display: contents; }
  .sidebar-footer-composer-actions { margin-block-start: var(--space-tight); }

  /* Keep every shared ellipsis control square in WebKit as well as Chromium
     and Firefox. The late rule deliberately wins over the generic full-width
     small-button rule and fixes the flex/grid shrink seen in Safari on macOS. */
  .sidebar .sidebar-overflow {
    --sidebar-overflow-control-size: 34px;
    block-size: var(--sidebar-overflow-control-size);
    flex: 0 0 var(--sidebar-overflow-control-size);
    inline-size: var(--sidebar-overflow-control-size);
    max-block-size: var(--sidebar-overflow-control-size);
    max-inline-size: var(--sidebar-overflow-control-size);
    min-block-size: var(--sidebar-overflow-control-size);
    min-inline-size: var(--sidebar-overflow-control-size);
  }

  .sidebar .sidebar-overflow-trigger {
    --ui-control-block-size: var(--sidebar-overflow-control-size, 34px);

    box-sizing: border-box;
    flex: 0 0 var(--sidebar-overflow-control-size, 34px);
    line-height: 1;
    max-block-size: var(--sidebar-overflow-control-size, 34px);
    max-inline-size: var(--sidebar-overflow-control-size, 34px);
    overflow: hidden;
  }

  @media (pointer: coarse) {
    .sidebar .sidebar-overflow { --sidebar-overflow-control-size: var(--touch-target); }
  }
}

@layer components {
  /* Compact footer composers become focused task workspaces. Keeping the
     directory or timeline mounted behind the form made the software keyboard
     leave only a thin, unstable strip for editing. The same host/content/slot
     contract now governs Team and Versions. */
  :root[data-sidebar-mode="compact"] .sidebar-footer-composer-host.is-footer-composer-mode {
    min-block-size: 0;
  }

  :root[data-sidebar-mode="compact"] .sidebar-footer-composer-host.is-footer-composer-mode > .sidebar-footer-composer-content {
    display: none;
  }

  :root[data-sidebar-mode="compact"] .sidebar-footer-composer-host.is-footer-composer-mode > .sidebar-footer-composer-slot {
    block-size: 100%;
    border-block-start: 0;
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: hidden;
    padding-block-start: 0;
  }

  :root[data-sidebar-mode="compact"] .sidebar-history-list-layout.sidebar-footer-composer-host.is-footer-composer-mode {
    gap: 0;
    grid-template-rows: minmax(0, 1fr);
  }

  :root[data-sidebar-mode="compact"] .sidebar-footer-composer-host.is-footer-composer-mode .sidebar-footer-composer {
    block-size: 100%;
    grid-template-rows: max-content minmax(0, 1fr);
    max-block-size: none;
    overflow: hidden;
  }

  :root[data-sidebar-mode="compact"] .sidebar-footer-composer-host.is-footer-composer-mode .sidebar-footer-composer-form {
    display: grid;
    gap: 0;
    grid-template-rows: minmax(0, 1fr) max-content;
    min-block-size: 0;
    overflow: hidden;
  }

  :root[data-sidebar-mode="compact"] .sidebar-footer-composer-host.is-footer-composer-mode .sidebar-footer-composer-fields {
    align-content: start;
    display: grid;
    gap: var(--space-cluster);
    min-block-size: 0;
    padding-inline-end: 2px;
    scroll-padding-block: var(--space-cluster) var(--space-section);
  }

  :root[data-sidebar-mode="compact"] .sidebar-footer-composer-host.is-footer-composer-mode .sidebar-footer-composer-actions {
    background: var(--panel-card-bg);
    border-block-start: 1px solid var(--panel-row-border);
    bottom: auto;
    margin-block-start: 0;
    padding-block-end: var(--space-related);
    padding-block-start: var(--space-cluster);
    position: static;
    z-index: 2;
  }

  :root[data-sidebar-mode="compact"][data-keyboard-visible="true"] .sidebar-footer-composer-host.is-footer-composer-mode .sidebar-footer-composer-fields {
    scroll-padding-block-end: calc(var(--touch-target) + var(--space-section));
  }
}

/* css/surfaces/sidebar/14-pdf-interactions.css */
@layer surfaces {
/* PDF preview status stays compact because detailed checks live in Preview. */
.sidebar-pdf-preview-section .sidebar-secondary-button { inline-size: 100%; }
.sidebar-pdf-preflight-status { display: grid; gap: var(--space-2xs); color: var(--text-sec); font-size: var(--type-size-meta); line-height: var(--type-line-meta); }
.sidebar-pdf-preflight-status[data-severity="warning"] { color: var(--text); }
.sidebar-pdf-preflight-status[data-severity="error"] { color: var(--danger-text); }

}

@layer components {
  /* Compact spatial picker used by PDF cover placement controls. The hidden
     select remains the canonical settings value; this layer only owns the
     visual interaction surface. */
  .sidebar-spatial-picker-input,
  .sidebar-segmented-input { display: none; }

  .sidebar-spatial-picker-field {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sidebar-spatial-picker-field > .sidebar-field-label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-spatial-picker {
    justify-self: end;
  }

  .sidebar-spatial-picker-trigger {
    border: 1px solid var(--control-border);
    color: var(--text-sec);
  }

  .sidebar-spatial-picker-trigger[aria-expanded="true"] {
    background: var(--state-layer-open);
    border-color: transparent;
    color: var(--text);
  }

  @media (hover: hover) {
    .sidebar-spatial-picker-trigger:hover {
      border-color: var(--control-border-hover);
      color: var(--text);
    }
  }


  .sidebar-spatial-picker-icon {
    align-items: center;
    block-size: 18px;
    display: grid;
    inline-size: 18px;
    justify-items: center;
    position: relative;
  }

  .sidebar-spatial-picker-icon-grid {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(3, 3px);
  }

  .sidebar-spatial-picker-icon-dot {
    background: currentColor;
    block-size: 3px;
    border-radius: var(--radius-full);
    inline-size: 3px;
    opacity: 0.28;
  }

  .sidebar-spatial-picker-icon[data-position-value="top-left"] .sidebar-spatial-picker-icon-dot[data-position-value="top-left"],
  .sidebar-spatial-picker-icon[data-position-value="top-center"] .sidebar-spatial-picker-icon-dot[data-position-value="top-center"],
  .sidebar-spatial-picker-icon[data-position-value="top-right"] .sidebar-spatial-picker-icon-dot[data-position-value="top-right"],
  .sidebar-spatial-picker-icon[data-position-value="center-left"] .sidebar-spatial-picker-icon-dot[data-position-value="center-left"],
  .sidebar-spatial-picker-icon[data-position-value="center"] .sidebar-spatial-picker-icon-dot[data-position-value="center"],
  .sidebar-spatial-picker-icon[data-position-value="center-right"] .sidebar-spatial-picker-icon-dot[data-position-value="center-right"],
  .sidebar-spatial-picker-icon[data-position-value="bottom-left"] .sidebar-spatial-picker-icon-dot[data-position-value="bottom-left"],
  .sidebar-spatial-picker-icon[data-position-value="bottom-center"] .sidebar-spatial-picker-icon-dot[data-position-value="bottom-center"],
  .sidebar-spatial-picker-icon[data-position-value="bottom-right"] .sidebar-spatial-picker-icon-dot[data-position-value="bottom-right"] {
    opacity: 1;
    transform: scale(1.45);
  }

  .sidebar-spatial-picker-popover {
    gap: var(--space-related);
    inline-size: 156px;
    padding: var(--space-related);
  }

  .sidebar-spatial-picker-title {
    color: var(--text-sec);
    font-size: var(--type-size-meta);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-meta);
    padding-inline: var(--space-tight);
  }

  .sidebar-spatial-picker-choice-group {
    display: grid;
    gap: var(--space-related);
  }

  .sidebar-spatial-picker-auto {
    inline-size: 100%;
    justify-content: flex-start;
    min-block-size: 30px;
    padding-inline: var(--space-related);
  }

  .sidebar-spatial-picker-grid {
    display: grid;
    gap: var(--space-tight);
    grid-template-columns: repeat(3, 1fr);
  }

  .sidebar-spatial-picker-cell {
    aspect-ratio: 1;
    inline-size: 100%;
    min-block-size: 32px;
    min-inline-size: 32px;
    padding: 0;
  }

  .sidebar-spatial-picker-cell-dot {
    background: currentColor;
    block-size: 5px;
    border-radius: var(--radius-full);
    inline-size: 5px;
    opacity: 0.6;
  }

  .sidebar-spatial-picker-cell.is-selected,
  .sidebar-spatial-picker-auto.is-selected {
    background: var(--panel-row-bg-active);
    border-color: var(--control-border-hover);
    color: var(--accent-ink, var(--text));
  }

  .sidebar-spatial-picker-cell.is-selected .sidebar-spatial-picker-cell-dot {
    opacity: 1;
    transform: scale(1.25);
  }

  .sidebar-spatial-picker-cell:focus-visible,
  .sidebar-spatial-picker-auto:focus-visible,
  .sidebar-spatial-picker-trigger:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: none;
  }
}

/* css/surfaces/sidebar/15-appearance-settings.css */
@layer surfaces {
  /* Settings has three scopes: application environment, current document, and
     product information. Current-document controls remain one card, with quiet
     separators providing hierarchy between its four internal sections. */
  #sidebar-panel-appearance .sidebar-document-settings-card > .sidebar-card-grid {
    gap: 0;
  }

  #sidebar-panel-appearance .sidebar-document-settings-card > .sidebar-card-grid > .sidebar-card-heading {
    padding-block-end: var(--space-cluster);
  }

  #sidebar-panel-appearance .sidebar-settings-subsection {
    align-content: start;
    display: grid;
    gap: var(--space-cluster);
    grid-auto-rows: max-content;
    min-inline-size: 0;
    padding-block: var(--space-section);
  }

  #sidebar-panel-appearance .sidebar-settings-subsection + .sidebar-settings-subsection {
    border-block-start: 1px solid var(--panel-row-border);
  }

  #sidebar-panel-appearance .sidebar-settings-subsection:first-of-type {
    padding-block-start: var(--space-related);
  }

  #sidebar-panel-appearance .sidebar-settings-subsection:last-child {
    padding-block-end: 0;
  }

  #sidebar-panel-appearance .sidebar-settings-subsection-title {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-heading);
    margin: 0;
  }

  /* Document palette is a compact inline control, not a separate surface.
     At ordinary Sidebar widths the three source-colour lanes and preset/Custom
     select share one four-lane row. At the governed minimum Sidebar width the
     selector drops below the three colours so its customer-visible label never
     has to be clipped, especially in translated interfaces. */
  #sidebar-panel-appearance .sidebar-document-palette-grid {
    align-items: start;
    display: grid;
    gap: var(--space-tight);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-inline-size: 0;
  }

  #sidebar-panel-appearance .sidebar-document-palette-colour,
  #sidebar-panel-appearance .sidebar-document-palette-selector {
    align-content: start;
    display: grid;
    gap: var(--space-tight);
    min-inline-size: 0;
  }

  #sidebar-panel-appearance .document-palette-inline-swatch {
    -webkit-appearance: none;
    appearance: none;
    block-size: var(--ui-control-block-size, var(--sidebar-control-block-size));
    cursor: default;
    inline-size: 100%;
    min-block-size: var(--ui-control-block-size, var(--sidebar-control-block-size));
    min-inline-size: 0;
    opacity: 1;
    padding: 3px;
  }

  #sidebar-panel-appearance .document-palette-inline-swatch::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  #sidebar-panel-appearance .document-palette-inline-swatch::-webkit-color-swatch,
  #sidebar-panel-appearance .document-palette-inline-swatch::-moz-color-swatch {
    border: 0;
    border-radius: calc(var(--radius-control) - 2px);
  }

  #sidebar-panel-appearance .sidebar-document-palette-grid[data-palette-mode="custom"] .document-palette-inline-swatch {
    cursor: pointer;
  }

  #sidebar-panel-appearance .document-palette-inline-hex {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    color: var(--text-muted);
    font: inherit;
    font-size: var(--type-size-meta);
    inline-size: 100%;
    line-height: var(--type-line-meta);
    min-block-size: 26px;
    min-inline-size: 0;
    outline: 0;
    padding-inline: var(--space-tight);
    text-align: center;
    text-transform: uppercase;
  }

  #sidebar-panel-appearance .document-palette-inline-hex[readonly] {
    cursor: default;
    user-select: text;
  }

  #sidebar-panel-appearance .sidebar-document-palette-grid[data-palette-mode="custom"] .document-palette-inline-hex {
    background: var(--control-surface);
    border-color: var(--control-border);
    color: var(--text);
  }

  @media (hover: hover) {
    #sidebar-panel-appearance .sidebar-document-palette-grid[data-palette-mode="custom"] .document-palette-inline-hex:hover {
      background: var(--control-surface-hover);
      border-color: var(--control-border-hover);
    }
  }

  #sidebar-panel-appearance .sidebar-document-palette-grid[data-palette-mode="custom"] .document-palette-inline-hex:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  #sidebar-panel-appearance .document-palette-inline-hex[aria-invalid="true"] {
    border-color: var(--danger-border);
  }

  #sidebar-panel-appearance .sidebar-document-palette-select {
    --ui-field-padding-inline: 6px;
    --ui-select-chevron-inset: 4px;
    --ui-select-chevron-size: 12px;
    --ui-select-padding-end: 20px;
    font-size: var(--type-size-meta);
    inline-size: 100%;
    min-inline-size: 0;
  }

  @container sidebar (max-width: 340px) {
    #sidebar-panel-appearance .sidebar-document-palette-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #sidebar-panel-appearance .sidebar-document-palette-selector {
      grid-column: 1 / -1;
    }
  }

  #sidebar-panel-appearance .sidebar-document-colour-status {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    margin: 0;
  }

  #sidebar-panel-appearance .sidebar-document-colour-status:empty { display: none; }
  #sidebar-panel-appearance .sidebar-document-colour-status[data-severity="warning"] { color: var(--text-sec); }

  #sidebar-panel-appearance .sidebar-document-line-width {
    grid-auto-flow: column;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #sidebar-panel-appearance .sidebar-document-line-width > .ui-control-segment {
    inline-size: 100%;
    min-inline-size: 0;
    padding-inline: var(--space-tight);
  }

  @media (pointer: coarse) {
    #sidebar-panel-appearance .sidebar-document-palette-grid[data-palette-mode="custom"] .document-palette-inline-hex {
      min-block-size: var(--control-touch-target);
    }
  }

  @media (forced-colors: active) {
    #sidebar-panel-appearance .document-palette-inline-swatch {
      border-color: CanvasText;
    }

    #sidebar-panel-appearance .sidebar-document-palette-grid[data-palette-mode="custom"] .document-palette-inline-hex {
      border-color: CanvasText;
    }
  }
}

/* css/surfaces/chrome.css */
@layer surfaces {
  :root {
    --floating-chrome-plate-bg: var(--surface-floating-chrome);
    --floating-chrome-plate-border: var(--surface-border);
    --floating-chrome-plate-border-width: 1px;
    --floating-chrome-plate-padding: var(--space-tight);
    --floating-chrome-control-gap: calc(var(--space-tight) / 2);
    --floating-chrome-control-size: 36px;
    --floating-chrome-plate-block-size: calc(
      var(--floating-chrome-control-size) +
      (2 * var(--floating-chrome-plate-padding)) +
      (2 * var(--floating-chrome-plate-border-width))
    );
  }

  @media (pointer: coarse) {
    :root { --floating-chrome-control-size: var(--touch-target); }
  }

  /* Shared surface and control primitives. These selectors deliberately use
     :where() so product surfaces keep layout and variant authority without
     specificity fights. */
  :where(
    .ui-surface-floating,
    .ui-surface-capsule,
    .ui-surface-panel,
    .ui-surface-sheet,
    .popover,
    .menu-popover,
    .tooltip,
    .selection-inspector,
    .command-palette,
    .modal-surface,
    .compose-account-flow-surface,
    .notice,
    .toast,
  ) {
    -webkit-backdrop-filter: var(--surface-filter-floating);
    backdrop-filter: var(--surface-filter-floating);
    background: var(--surface-floating);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-surface);
    box-shadow: none;
  }



  .ui-surface-capsule {
    border-radius: var(--radius-full);
  }

  .ui-surface-card {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-card);
    box-shadow: none;
  }

  .ui-motion-reveal,
  .ui-motion-dismiss,
  .ui-motion-state-change {
    transition:
      opacity var(--motion-duration-surface) var(--motion-ease-out),
      transform var(--motion-duration-surface) var(--motion-ease-out);
  }

  .ui-motion-reveal { animation: compose-surface-reveal var(--motion-duration-surface) var(--motion-ease-out) backwards; }
  .ui-motion-dismiss { animation: compose-surface-dismiss var(--motion-duration-exit) var(--motion-ease-in) both; }
  .ui-motion-state-change { animation: compose-state-settle var(--motion-duration-state) var(--motion-ease-out) backwards; }

  @keyframes compose-surface-reveal {
    from { opacity: 0; transform: var(--motion-transform-base, translateX(0)) translateY(var(--motion-distance-surface)); }
    to { opacity: 1; transform: var(--motion-transform-base, translateX(0)) translateY(0); }
  }

  @keyframes compose-surface-dismiss {
    from { opacity: 1; transform: var(--motion-transform-base, translateX(0)) translateY(0); }
    to { opacity: 0; transform: var(--motion-transform-base, translateX(0)) translateY(var(--motion-distance-reveal)); }
  }

  @keyframes compose-sheet-reveal {
    from { opacity: 0; transform: var(--motion-transform-base, translateX(0)) translateY(var(--motion-distance-sheet)); }
    to { opacity: 1; transform: var(--motion-transform-base, translateX(0)) translateY(0); }
  }

  @keyframes compose-state-settle {
    from { opacity: .62; transform: var(--motion-transform-base, translateX(0)) translateY(var(--motion-distance-reveal)); }
    to { opacity: 1; transform: var(--motion-transform-base, translateX(0)) translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-motion-reveal,
    .ui-motion-dismiss,
    .ui-motion-state-change {
      animation-duration: var(--motion-duration-reduced);
      transition-duration: var(--motion-duration-reduced);
      transform: var(--motion-transform-base, none);
    }
  }

  :where(
    .ui-notice,
    .notice,
    .toast,
  ) {
    box-shadow: none;
  }

  /* Universal interactive primitives. Feature CSS owns layout and genuinely
     unique behavior. Shared material, border, radius, type, and interaction
     states belong here and are consumed explicitly through ui-* classes. */
  .ui-control {
    align-items: center;
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    box-shadow: none;
    color: var(--text);
    display: inline-flex;
    font: inherit;
    gap: var(--space-related);
    justify-content: center;
    line-height: var(--type-line-control);
    min-block-size: var(--ui-control-block-size, var(--control-block-size));
    min-inline-size: var(--ui-control-block-size, var(--control-block-size));
    padding-inline: var(--ui-control-padding-inline, var(--space-related));
    text-align: center;
    transition:
      background-color var(--motion-duration-micro) var(--motion-ease-standard),
      border-color var(--motion-duration-micro) var(--motion-ease-standard),
      color var(--motion-duration-micro) var(--motion-ease-standard),
      opacity var(--motion-duration-micro) var(--motion-ease-standard),
      transform var(--motion-duration-micro) var(--motion-ease-out);
  }

  /* Hover is capability-gated. Touch browsers may emulate or retain :hover
     after a tap, so hover material must never be the source of persistent
     state on a coarse/no-hover device. Keyboard focus has its own perimeter. */
  @media (hover: hover) {
    .ui-control:hover {
      background: var(--control-surface-hover);
      border-color: var(--control-border-hover);
    }
  }

  .ui-control:active,
  .ui-control.is-pressing {
    background: var(--control-surface-pressed);
    border-color: var(--control-border-hover);
    transform: scale(.985);
  }

  .ui-control:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--ui-control-focus-ring-offset, var(--focus-ring-offset));
    box-shadow: none;
  }

  .ui-control:where(:disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
  }

  .ui-control-primary {
    background: var(--accent-solid);
    border-color: var(--accent-border-strong);
    color: var(--accent-solid-foreground);
    font-weight: var(--type-weight-strong);
  }

  @media (hover: hover) {
    .ui-control-primary:hover {
      background: var(--accent-solid-hover);
      border-color: var(--accent-focus);
      color: var(--accent-solid-foreground);
    }
  }

  .ui-control-primary:active,
  .ui-control-primary.is-pressing {
    background: var(--accent-solid-active);
    border-color: var(--accent-border-strong);
    color: var(--accent-solid-foreground);
  }

  .ui-control-danger {
    background: var(--danger-surface);
    border-color: var(--danger-border);
    color: var(--danger);
  }

  @media (hover: hover) {
    .ui-control-danger:hover {
      background: var(--danger-surface-hover);
      border-color: var(--danger);
      color: var(--danger);
    }
  }

  .ui-control-danger:active,
  .ui-control-danger.is-pressing {
    background: var(--danger-surface-hover);
    border-color: var(--danger);
    color: var(--danger);
  }

  .ui-control-ghost {
    background: transparent;
    border-color: transparent;
  }

  @media (hover: hover) {
    .ui-control-ghost:hover {
      background: var(--state-layer-hover);
      border-color: transparent;
    }
  }

  .ui-control-ghost:active,
  .ui-control-ghost.is-pressing {
    background: var(--state-layer-pressed);
    border-color: transparent;
  }

  .ui-control-danger.ui-control-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--danger);
  }

  @media (hover: hover) {
    .ui-control-danger.ui-control-ghost:hover {
      background: var(--state-layer-danger-hover);
      border-color: transparent;
      color: var(--danger);
    }
  }

  .ui-control-danger.ui-control-ghost:active,
  .ui-control-danger.ui-control-ghost.is-pressing {
    background: var(--state-layer-danger-pressed);
    border-color: transparent;
    color: var(--danger);
  }

  .ui-control-icon {
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    inline-size: var(--ui-control-block-size, var(--control-block-size));
    padding: 0;
  }

  /* Universal compact menu primitive. Product surfaces own placement context
     and may add layout classes, while menu material, geometry, and action
     treatment stay consistent across Sidebar and Selection Inspector. */
  .ui-overflow {
    display: inline-flex;
    position: relative;
  }

  .ui-overflow-trigger svg {
    block-size: 16px;
    inline-size: 16px;
  }

  .ui-overflow-menu {
    display: grid;
    gap: var(--space-micro);
    inline-size: min(190px, calc(100vw - 32px));
    inset-block-start: calc(100% + var(--space-tight));
    inset-inline-end: 0;
    max-block-size: min(280px, calc(100vh - 32px));
    padding: var(--space-tight);
    position: absolute;
    z-index: 24;
  }

  .ui-overflow-menu[data-ui-overflow-block="top"] {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--space-tight));
  }

  .ui-overflow-menu[data-ui-overflow-inline="start"] {
    inset-inline-start: 0;
    inset-inline-end: auto;
  }

  .ui-overflow-menu[data-ui-overflow-inline="end"] {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  .ui-overflow-menu-action {
    inline-size: 100%;
    justify-content: flex-start;
    padding-inline: var(--space-related);
    text-align: start;
  }

  .ui-overflow-menu-separator {
    border-block-start: 1px solid var(--panel-card-border);
    block-size: 0;
    margin: var(--space-micro) var(--space-tight);
  }

  .ui-control-capsule {
    border-radius: var(--radius-full);
  }

  /* Relationship primitives. These do not choose feature styling; they only
     let a field and the actions that directly modify it read as one control,
     and let small peer actions share one continuous boundary. */
  .ui-attached-field {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-inline-size: 0;
  }

  .ui-attached-field > :where(.ui-attached-field-control, .ui-attached-field-action) {
    min-inline-size: 0;
  }

  /* The relationship primitive owns the join as well as the layout. Features
     should not have to manually flatten adjoining corners or overlap borders. */
  .ui-attached-field > .ui-attached-field-control {
    border-end-end-radius: var(--radius-none);
    border-start-end-radius: var(--radius-none);
  }

  .ui-attached-field > .ui-attached-field-action {
    margin-inline-start: -1px;
    position: relative;
  }

  .ui-attached-field > .ui-attached-field-action:not(.ui-control-group) {
    border-radius: var(--radius-none);
  }

  .ui-attached-field > .ui-attached-field-action:last-child:not(.ui-control-group) {
    border-end-end-radius: var(--radius-control);
    border-start-end-radius: var(--radius-control);
  }

  .ui-attached-field > .ui-control-group.ui-attached-field-action > .ui-control:first-child {
    border-end-start-radius: var(--radius-none);
    border-start-start-radius: var(--radius-none);
  }

  .ui-attached-field > :where(.ui-attached-field-control, .ui-attached-field-action):focus-visible,
  .ui-attached-field > .ui-attached-field-action:focus-within {
    z-index: 1;
  }

  .ui-control-group {
    display: grid;
    gap: 0;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    min-inline-size: 0;
  }

  .ui-control-group > .ui-control {
    border-radius: var(--radius-none);
    inline-size: 100%;
    min-inline-size: 0;
  }

  .ui-control-group > .ui-control:not(:first-child) {
    margin-inline-start: -1px;
  }

  .ui-control-group > .ui-control:first-child {
    border-end-start-radius: var(--radius-control);
    border-start-start-radius: var(--radius-control);
  }

  .ui-control-group > .ui-control:last-child {
    border-end-end-radius: var(--radius-control);
    border-start-end-radius: var(--radius-control);
  }

  .ui-control-group > .ui-control:focus-visible {
    position: relative;
    z-index: 1;
  }

  .ui-control-segment {
    background: transparent;
    border-color: transparent;
  }

  .ui-segmented-group {
    --ui-segmented-block-size: var(--ui-control-block-size, var(--control-block-size));
    --ui-segmented-inner-block-size: calc(var(--ui-segmented-block-size) - 6px);
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    gap: var(--space-micro);
    min-block-size: var(--ui-segmented-block-size);
    overflow: hidden;
    padding: var(--space-micro);
  }

  .ui-segmented-group > .ui-control-segment {
    --ui-control-block-size: var(--ui-segmented-inner-block-size);
    border-radius: calc(var(--radius-control) - 2px);
  }

  /* A segmented shell owns the outer visual height. Its segments consume the
     inner height after the shared 2px padding and 1px border, so a segmented
     choice and a neighbouring field resolve to one outer control height. */
  .ui-segmented-group[role="tablist"] > .ui-control-segment {
    padding-block: 3px;
  }

  /* Persistent selection follows the active document palette across toolbar,
     topbar, sidebar tabs, formatting toggles, and anchored-tool tabs. The tint
     stays deliberately pale so the document brand can identify state without
     competing with opaque primary actions. Hover and press only strengthen this
     token-owned material, while keyboard focus remains a separate ring. */
  .ui-control:not(.ui-control-primary):is(
    [aria-pressed="true"],
    [aria-selected="true"],
    [aria-current="true"],
    .is-active:not([aria-expanded="true"]),
    .ui-control-quiet-selection[aria-expanded="true"]
  ) {
    background: var(--state-layer-selected);
    border-color: transparent;
    color: var(--text);
    font-weight: inherit;
  }

  @media (hover: hover) {
    .ui-control:not(.ui-control-primary):is(
      [aria-pressed="true"],
      [aria-selected="true"],
      [aria-current="true"],
      .is-active:not([aria-expanded="true"]),
      .ui-control-quiet-selection[aria-expanded="true"]
    ):hover {
      background: var(--state-layer-selected-hover);
      border-color: transparent;
      color: var(--text);
    }
  }

  .ui-control:not(.ui-control-primary):is(
    [aria-pressed="true"],
    [aria-selected="true"],
    [aria-current="true"],
    .is-active:not([aria-expanded="true"]),
    .ui-control-quiet-selection[aria-expanded="true"]
  ):active,
  .ui-control:not(.ui-control-primary):is(
    [aria-pressed="true"],
    [aria-selected="true"],
    [aria-current="true"],
    .is-active:not([aria-expanded="true"]),
    .ui-control-quiet-selection[aria-expanded="true"]
  ).is-pressing {
    background: var(--state-layer-selected-pressed);
    border-color: transparent;
    color: var(--text);
  }

  /* aria-expanded represents a temporary open state unless the control opts
     into quiet selection above. Open launchers use a translucent neutral state
     layer instead of an opaque replacement surface. */
  .ui-control:not(.ui-control-primary):not(.ui-control-quiet-selection):is(
    .ui-control-active,
    [aria-expanded="true"]
  ) {
    background: var(--state-layer-open);
    border-color: transparent;
    color: var(--text);
    font-weight: inherit;
  }

  @media (hover: hover) {
    .ui-control:not(.ui-control-primary):not(.ui-control-quiet-selection):is(
      .ui-control-active,
      [aria-expanded="true"]
    ):hover {
      background: var(--state-layer-pressed);
      border-color: transparent;
      color: var(--text);
    }
  }

  .ui-control:not(.ui-control-primary):not(.ui-control-quiet-selection):is(
    .ui-control-active,
    [aria-expanded="true"]
  ):active,
  .ui-control:not(.ui-control-primary):not(.ui-control-quiet-selection):is(
    .ui-control-active,
    [aria-expanded="true"]
  ).is-pressing {
    background: var(--state-layer-pressed);
    border-color: transparent;
    color: var(--text);
  }

  @media (forced-colors: active) {
    .ui-control:not(.ui-control-primary):is(
      [aria-pressed="true"],
      [aria-selected="true"],
      [aria-current="true"],
      .is-active:not([aria-expanded="true"]),
      .ui-control-quiet-selection[aria-expanded="true"]
    ) {
      color: Highlight;
    }

    .ui-control:not(.ui-control-primary):not(.ui-control-quiet-selection):is(
      .ui-control-active,
      [aria-expanded="true"]
    ) {
      border-color: Highlight;
      color: Highlight;
    }
  }

  .ui-field {
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--ui-field-font-size);
    font-weight: var(--ui-field-font-weight);
    line-height: var(--ui-field-line-height);
    min-block-size: var(--ui-control-block-size, var(--control-block-size));
    padding-inline: var(--ui-field-padding-inline, var(--space-cluster));
    transition:
      background-color var(--motion-duration-micro) var(--motion-ease-standard),
      border-color var(--motion-duration-micro) var(--motion-ease-standard),
      color var(--motion-duration-micro) var(--motion-ease-standard),
      opacity var(--motion-duration-micro) var(--motion-ease-standard);
  }

  .ui-field::placeholder {
    color: var(--text-muted);
    opacity: 1;
  }

  @media (hover: hover) {
    .ui-field:hover {
      border-color: var(--control-border-hover);
    }
  }

  .ui-field:where(:focus-visible) {
    background: var(--surface-field);
    border-color: var(--control-border-hover);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--ui-field-focus-ring-offset, var(--focus-ring-offset));
    box-shadow: none;
  }

  .ui-field:where(:disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: .55;
  }

  .ui-field[aria-invalid="true"] {
    border-color: var(--danger);
    outline-color: var(--danger);
  }

  .ui-field-editorial {
    font-family: var(--ed-body-font, var(--font-ui));
    line-height: var(--ed-line-height, var(--ui-field-line-height));
  }

  .ui-field-no-zoom {
    font-size: max(16px, var(--ui-field-font-size));
  }

  /* Compact actions and fields that live inside a floating chrome capsule.
     The role is universal even though toolbar/topbar layout and motion remain
     owned by their feature surfaces. */
  .ui-control-chrome {
    background: transparent;
    border-color: transparent;
    color: var(--text-sec);
  }

  @media (hover: hover) {
    .ui-control-chrome:hover {
      background: var(--state-layer-hover);
      border-color: transparent;
      color: var(--text);
    }
  }

  .ui-control-chrome:focus-visible {
    background: transparent;
    border-color: transparent;
    color: var(--text);
  }

  .ui-control-chrome:active,
  .ui-control-chrome.is-pressing {
    background: var(--state-layer-pressed);
    border-color: transparent;
    color: var(--text);
  }

  .ui-field-chrome {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-sec);
  }

  @media (hover: hover) {
    .ui-field-chrome:hover {
      background-color: var(--state-layer-hover);
      border-color: transparent;
      color: var(--text);
    }
  }

  .ui-field-chrome:focus-visible {
    background-color: var(--control-surface-hover);
    border-color: var(--control-border-hover);
    color: var(--text);
  }

  /* One select treatment for sidebar, inspector, dialogs, and future forms.
     The authored chevron is centralized here instead of repeated per feature. */
  .ui-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23706B63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right var(--ui-select-chevron-inset, 12px) center;
    background-repeat: no-repeat;
    background-size: var(--ui-select-chevron-size, 16px) var(--ui-select-chevron-size, 16px);
    padding-inline-end: var(--ui-select-padding-end, 40px);
  }

  :root[data-theme="dark"] .ui-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23AAA398' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }

  [dir="rtl"] .ui-select {
    background-position: left var(--ui-select-chevron-inset, 12px) center;
    padding-inline: var(--ui-select-padding-end, 40px) var(--ui-field-padding-inline, var(--space-cluster));
  }

  @media (pointer: coarse) {
    /* Coarse-pointer sizing changes the primitive's default size token instead
       of hard-forcing min sizes. Surface-owned controls such as the toolbar can
       therefore retain one explicit geometry contract without fighting a
       second global minimum. */
    :is(.ui-control, .ui-field) {
      --ui-control-block-size: var(--control-touch-target);
    }

    .ui-segmented-group {
      --ui-segmented-block-size: var(--control-touch-target);
      --ui-segmented-inner-block-size: calc(var(--ui-segmented-block-size) - 6px);
    }
  }


  :where(.sidebar-dock, .toolbar-command-surface, .toolbar-format-surface) {
    -webkit-backdrop-filter: var(--surface-filter-floating);
    backdrop-filter: var(--surface-filter-floating);
    background: var(--surface-floating);
    border-color: var(--surface-border);
    border-radius: var(--radius-full);
  }


  .sidebar-dock {
    border-color: var(--floating-chrome-plate-border);
  }

  :where(.topbar-sidebar-group, .toolbar-inner) {
    gap: var(--floating-chrome-control-gap);
  }

  :where(.toolbar-command-surface, .toolbar-format-surface) {
    padding: var(--floating-chrome-plate-padding);
  }

  :where(.topbar-icon-button, .toolbar-button) {
    flex: 0 0 var(--ui-control-block-size, var(--control-block-size));
  }

  :where(.topbar-icon-button, .toolbar-button) { --ui-control-block-size: var(--floating-chrome-control-size); }

  /* Every toolbar/topbar icon button is a true circle. The control stays
     square at every responsive size, so hover and active surfaces remain
     circular without first/last-button or fit-mode exceptions. */

  :where(.topbar-icon-button:active, .toolbar-button:active) {
    transform: translateY(1px) scale(var(--motion-scale-press));
  }


  /* Pointer-down feedback is the complete chrome interaction affordance.
     Do not replay a click animation: restarting it used to require a forced
     layout flush on every toolbar/sidebar activation. */
  :where(.topbar-icon-button, .toolbar-button).is-chrome-pressing {
    transform: translateY(1px) scale(var(--motion-scale-press));
  }


  @media (prefers-reduced-motion: reduce) {
    :where(.topbar-icon-button, .toolbar-button).is-chrome-pressing {
      transform: none;
    }
  }


  :where(.topbar-button-icon, .toolbar-button-icon) {
    block-size: 16px;
    inline-size: 16px;
  }

  @media (forced-colors: active) {
    :where(
      .ui-surface-floating,
      .ui-surface-panel,
      .ui-surface-sheet,
      .popover,
      .menu-popover,
        .tooltip,
      .selection-inspector,
      .modal-surface,
      .compose-account-flow-surface,
      .notice,
      .toast,
    ) {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: Canvas;
      border-color: CanvasText;
      box-shadow: none;
      color: CanvasText;
    }

    .ui-control {
      background: ButtonFace;
      border-color: ButtonText;
      box-shadow: none;
      color: ButtonText;
    }

    .ui-field {
      background: Field;
      border-color: FieldText;
      color: FieldText;
    }

    .ui-select {
      -webkit-appearance: auto;
      appearance: auto;
      background-image: none;
    }

    .ui-control-primary {
      background: Highlight;
      border-color: Highlight;
      color: HighlightText;
    }

    .ui-control-danger {
      border-color: Mark;
      color: Mark;
    }

    .ui-field[aria-invalid="true"] {
      border-color: Mark;
      outline-color: Mark;
    }

    :where(.ui-control, .ui-field):where(:focus-visible) {
      box-shadow: none;
      outline: 2px solid Highlight;
      outline-offset: 2px;
    }
  }

}

@layer components {
  /* Segmented choices share the same palette-aware selected material as
     persistent controls. The surrounding shell continues to provide grouping
     and geometry without becoming a second branded surface. */
  .ui-segmented-group.ui-segmented-value > .ui-control-segment:is([aria-pressed="true"], [aria-selected="true"]) {
    background: var(--state-layer-selected);
    border-color: transparent;
    color: var(--text);
  }

  @media (hover: hover) {
    .ui-segmented-group.ui-segmented-value > .ui-control-segment:is([aria-pressed="true"], [aria-selected="true"]):hover {
      background: var(--state-layer-selected-hover);
    }
  }

  .ui-segmented-group.ui-segmented-value > .ui-control-segment:is([aria-pressed="true"], [aria-selected="true"]):active {
    background: var(--state-layer-selected-pressed);
  }

  @media (forced-colors: active) {
    .ui-segmented-group.ui-segmented-value > .ui-control-segment:is([aria-pressed="true"], [aria-selected="true"]) {
      border-color: Highlight;
      color: Highlight;
    }
  }
}

/* css/surfaces/topbar.css */
@layer surfaces {
  :root {
    --topbar-h: calc(var(--floating-chrome-plate-block-size) + (var(--space-related) * 2));
  }

  #topbar,
  .topbar {
    align-items: center;
    background: transparent;
    block-size: var(--topbar-h);
    border-block-end: 0;
    display: flex;
    flex: 0 0 0;
    gap: 0;
    inset-block-start: 0;
    inset-inline: 0;
    justify-content: center;
    min-inline-size: 0;
    padding-block: var(--space-related);
    padding-inline: var(--space-cluster);
    pointer-events: none;
    position: fixed;
    z-index: var(--z-topbar);
  }

  .topbar-action-rail {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-none);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: flex;
    flex: 1 1 auto;
    inline-size: 100%;
    justify-content: center;
    max-inline-size: 100%;
    min-block-size: var(--floating-chrome-plate-block-size);
    min-inline-size: 0;
    overflow: visible;
    padding: 0;
    pointer-events: none;
    scrollbar-width: none;
  }

  .topbar-action-rail::-webkit-scrollbar,
  .topbar-sidebar-group::-webkit-scrollbar { display: none; }

  .topbar-sidebar-host { display: none; }

  .topbar-sidebar-group {
    align-items: center;
    background: transparent;
    block-size: var(--floating-chrome-plate-block-size);
    border: 0;
    border-radius: var(--radius-none);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    direction: ltr;
    display: flex;
    flex: 0 0 auto;
    gap: var(--floating-chrome-control-gap);
    inline-size: max-content;
    justify-content: flex-end;
    max-inline-size: 100%;
    min-block-size: var(--floating-chrome-plate-block-size);
    overflow: visible;
    padding: var(--floating-chrome-plate-padding);
    pointer-events: auto;
  }

  /* The navigation group changes semantic shape with the dock. Closed, the
     dock itself is the capsule. Open, the 16px sidebar surface owns the outer
     corners and this group becomes an integrated header rail. Keeping a
     second pill here creates competing curves and a doubled top-edge border. */
  :root[data-sidebar-open="true"]:not([data-sidebar-mode="compact"]) .topbar-sidebar-group {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: transparent;
    border: 0;
    border-radius: var(--radius-none);
    box-shadow: none;
  }


  @media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
    #topbar,
    .topbar {
      justify-content: center;
      padding-inline: var(--space-related);
    }

    .topbar-action-rail {
      flex: 0 1 auto;
      inline-size: auto;
      margin-inline: auto;
      max-inline-size: calc(100vw - (2 * var(--space-related)));
    }

    .topbar-sidebar-host {
      align-items: center;
      display: flex;
      flex: 0 1 auto;
      max-inline-size: 100%;
      min-inline-size: 0;
      overflow: hidden;
      pointer-events: auto;
    }

    .topbar-sidebar-group {
      background: var(--floating-chrome-plate-bg);
      border: var(--floating-chrome-plate-border-width) solid var(--floating-chrome-plate-border);
      border-radius: var(--radius-full);
      -webkit-backdrop-filter: var(--surface-filter-floating);
      backdrop-filter: var(--surface-filter-floating);
      flex: 0 1 auto;
      justify-content: flex-start;
      max-inline-size: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-inline: contain;
      pointer-events: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .topbar-sidebar-group .topbar-icon-button {
      flex: 0 0 var(--floating-chrome-control-size);
      scroll-snap-align: center;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .topbar-icon-button,
    .toolbar-button { transition-duration: var(--motion-duration-reduced); }
  }

  @media (forced-colors: active) {
    .topbar-sidebar-group {
      background: Canvas;
      border-color: ButtonText;
      color: CanvasText;
      forced-color-adjust: auto;
    }

  }
}

/* css/surfaces/toolbar.css */
@layer surfaces {
  :root {
    --floating-toolbar-gap: var(--space-cluster);
    --floating-toolbar-inline-margin: clamp(var(--space-related), 2vw, var(--space-section));
    /* The command rail owns the toolbar's natural width. The transparent host
       hugs the two real plates until the live workspace runs out of room, then
       the formatting plate takes over as the native horizontal scroll surface.
       There is deliberately no fixed "full command" width to maintain when
       icons are added or removed. */
    --floating-toolbar-max-inline: max(0px, calc(100vw - (2 * var(--floating-toolbar-inline-margin)) - var(--sidebar-occupied-inline-start, 0px) - var(--sidebar-occupied-inline-end, 0px)));
    --floating-toolbar-bottom: var(--floating-toolbar-gap);
    --floating-toolbar-mobile-edge-gap: var(--space-cluster);
    --floating-interaction-lane-gap: var(--space-related);
    --floating-interaction-lane-control-size: 36px;
    --floating-toolbar-mobile-top: max(
      calc(var(--app-visual-viewport-offset-top) + var(--space-related)),
      calc(var(--app-visual-viewport-bottom-edge) - var(--floating-toolbar-block-size) - var(--floating-toolbar-mobile-edge-gap))
    );
    --toolbar-control-gap: var(--floating-chrome-control-gap);
    --toolbar-surface-gap: var(--space-related);
    --toolbar-block-select-inline-size: 116px;
    --toolbar-select-padding-inline: var(--space-related);
    --toolbar-divider-margin-inline: 6px;
    --floating-toolbar-block-size: var(--floating-chrome-plate-block-size);
    --toolbar-document-clearance: clamp(56px, 8vh, 88px);
    --floating-toolbar-reserve: calc(var(--floating-toolbar-block-size) + var(--floating-toolbar-gap) + var(--toolbar-document-clearance));
  }

  /* One toolbar lifecycle, two visual plates. The outer host owns placement,
     keyboard routing, and anchored-surface geometry. The formatting plate owns
     horizontal overflow itself so its real background, border, and capsule
     radius remain stationary while only the commands inside it scroll. */
  #toolbar-row,
  .toolbar {
    -webkit-backdrop-filter: none;
    align-items: center;
    backdrop-filter: none;
    background: transparent;
    block-size: var(--floating-toolbar-block-size);
    border: 0;
    border-radius: var(--radius-none);
    display: flex;
    inline-size: fit-content;
    justify-content: flex-start;
    max-inline-size: var(--floating-toolbar-max-inline);
    min-inline-size: 0;
    overflow: visible;
    inset-block-end: var(--floating-toolbar-bottom);
    left: var(--writing-space-center-inline);
    padding: 0;
    position: fixed;
    transform: translateX(-50%);
    transition:
      left var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
      opacity var(--motion-duration-surface) var(--motion-ease-out),
      transform var(--motion-duration-surface) var(--motion-ease-out);
    z-index: var(--z-toolbar);
  }

  .toolbar-command-surface,
  .toolbar-format-surface {
    align-items: center;
    block-size: 100%;
    border: var(--floating-chrome-plate-border-width) solid var(--floating-chrome-plate-border);
    box-sizing: border-box;
    color: var(--text-sec);
    color-scheme: light;
    display: flex;
  }

  .toolbar-command-surface {
    flex: 0 0 auto;
  }

  .toolbar-format-surface {
    flex: 1 1 auto;
    min-inline-size: 0;
    scrollbar-width: none;
  }

  .toolbar-format-surface::-webkit-scrollbar { display: none; }

  .toolbar-inner,
  .toolbar-group,
  .toolbar-button {
    align-items: center;
    display: flex;
  }

  .toolbar-inner {
    align-items: center;
    block-size: 100%;
    display: flex;
    flex: 0 1 auto;
    gap: var(--toolbar-surface-gap);
    inline-size: max-content;
    justify-content: flex-start;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: visible;
    padding: 0;
  }

  .toolbar-group {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-none);
    flex: 0 0 auto;
    gap: var(--toolbar-control-gap);
    padding: 0;
  }

  .toolbar-divider {
    background: var(--surface-window-separator);
    block-size: clamp(20px, calc(var(--floating-chrome-control-size) - 12px), 22px);
    flex: 0 0 auto;
    inline-size: 1px;
    margin-inline: var(--toolbar-divider-margin-inline);
    opacity: 1;
    transition:
      block-size var(--motion-duration-micro) var(--motion-ease-standard),
      inline-size var(--motion-duration-micro) var(--motion-ease-standard),
      margin-inline var(--motion-duration-micro) var(--motion-ease-standard),
      opacity var(--motion-duration-micro) var(--motion-ease-standard);
  }


  .toolbar-button {
    --ui-control-block-size: var(--floating-chrome-control-size);
    gap: 6px;
  }

  /* Edge buttons deliberately have no special radius. The shared floating
     chrome button primitive owns the shape for every toolbar icon button. */

  .toolbar-command-palette-button {
    flex: 0 0 auto;
    scroll-margin-inline: var(--space-cluster);
  }

  .toolbar-select {
    --ui-control-block-size: var(--floating-chrome-control-size);
    --ui-field-padding-inline: var(--toolbar-select-padding-inline);
    --ui-select-chevron-inset: 8px;
    --ui-select-chevron-size: 12px;
    --ui-select-padding-end: calc(var(--toolbar-select-padding-inline) + 18px);

    block-size: var(--floating-chrome-control-size);
    cursor: pointer;
    display: block;
    flex: 0 0 auto;
    padding-block: 0;
    text-align: start;
    touch-action: manipulation;
  }

  :root[dir="rtl"] .toolbar-select {
    padding-inline: var(--ui-select-padding-end) var(--toolbar-select-padding-inline);
  }

  .toolbar-block-select { inline-size: var(--toolbar-block-select-inline-size); }

  .toolbar-align-control {
    --ui-control-block-size: var(--floating-chrome-control-size);
    flex: 0 0 var(--floating-chrome-control-size);
    position: relative;
  }

  /* The real control is a native select stretched over this shared chrome
     button. Mirror the universal keyboard focus treatment on its wrapper
     without inventing a second toolbar material system. */
  .toolbar-align-control:focus-within {
    background: transparent;
    border-color: transparent;
    color: var(--text);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  .toolbar-align-icon {
    display: none;
    pointer-events: none;
    position: relative;
    z-index: 1;
  }

  .toolbar-align-control[data-align-current="left"] .toolbar-align-icon-left,
  .toolbar-align-control[data-align-current="center"] .toolbar-align-icon-center,
  .toolbar-align-control[data-align-current="right"] .toolbar-align-icon-right,
  .toolbar-align-control[data-align-current="justify"] .toolbar-align-icon-justify { display: block; }

  .toolbar-align-native-select {
    appearance: none;
    background: transparent;
    block-size: 100%;
    border: 0;
    cursor: pointer;
    inline-size: 100%;
    inset: 0;
    max-block-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    touch-action: manipulation;
    z-index: 2;
  }


  /* Software keyboards are a viewport condition, not a pointer-class condition.
     Tablets and convertibles can expose touch editing while their primary
     pointer still reports as fine. When the governed viewport authority says
     a keyboard is visible, keep the document toolbar inside that live visual
     viewport regardless of the current pointer media query. */
  :root[data-keyboard-visible="true"] #toolbar-row {
    inset-block-end: auto;
    inset-block-start: var(--floating-toolbar-mobile-top);
    left: var(--writing-space-visual-center-inline);
    max-inline-size: max(0px, calc(var(--app-visual-viewport-inline) - (2 * var(--floating-toolbar-inline-margin)) - var(--sidebar-occupied-inline-start, 0px) - var(--sidebar-occupied-inline-end, 0px)));
  }

  @media (pointer: coarse) {
    :root {
      /* Touch keeps the full 44px hit target but removes non-essential
         horizontal air so the complete command rail fits on more tablets.
         This is one static pointer-class profile, not a viewport fit mode. */
      --toolbar-block-select-inline-size: 104px;
      --toolbar-control-gap: 0px;
      --toolbar-select-padding-inline: 5px;
      --toolbar-divider-margin-inline: 1px;
    }
  }

  /* Available width may tighten only the outer plate margin. It never changes
     control, selector, gap, or divider geometry. */
  @media (max-width: 1180px) and (pointer: fine) {
    :root {
      --floating-toolbar-inline-margin: 6px;
    }
  }

  /* Tablet placement remains visual-viewport aware, but control geometry no
     longer changes with available width. The rail simply exposes native
     horizontal overflow when the full command set does not fit. */
  @media (pointer: coarse) and (max-width: 1280px) {
    :root {
      --floating-toolbar-reserve: calc(var(--floating-toolbar-block-size) + var(--floating-toolbar-mobile-edge-gap) + var(--toolbar-document-clearance));
    }

    #toolbar-row,
    .toolbar {
      inset-block-end: auto;
      inset-block-start: var(--floating-toolbar-mobile-top);
      left: var(--writing-space-visual-center-inline);
    }
  }

  @media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
    :root {
      --floating-toolbar-gap: var(--space-cluster);
      --floating-toolbar-inline-margin: var(--space-related);
      --toolbar-document-clearance: 28px;
    }

    #toolbar-row,
    .toolbar {
      max-inline-size: max(0px, calc(var(--app-visual-viewport-inline) - (2 * var(--space-related))));
    }

  }

  @media (prefers-reduced-motion: reduce) {
    #toolbar-row,
    .toolbar,
    .toolbar-divider {
      transition-duration: var(--motion-duration-reduced);
    }
  }
}


@layer surfaces {
  /* Toolbar interaction states mirror the sidebar topbar controls. The outer
     toolbar host is intentionally material-free so command discovery can read
     as a distinct sibling plate without introducing a separate palette. */
  @media (forced-colors: active) {
    .toolbar-command-surface,
    .toolbar-format-surface {
      background: Canvas;
      border-color: CanvasText;
      color: CanvasText;
    }
  }
}

@layer surfaces {
  /* Sidebar geometry must not drag the toolbar through a 240 ms interpolation. */
  :root:not([data-sidebar-mode="compact"]) #toolbar-row {
    transition:
      opacity var(--motion-duration-surface) var(--motion-ease-out),
      transform var(--motion-duration-surface) var(--motion-ease-out);
  }
}

/* css/surfaces/popover.css */
@layer surfaces {
  :where(.popover, .menu-popover) {
    box-sizing: border-box;
  }

  .popover,
  .menu-popover,
  .tooltip {
    color: var(--text);
    margin: 0;
    padding: var(--space-cluster);
    z-index: var(--z-popover);
  }

  .popover:not(:popover-open):not(.is-open),
  .menu-popover:not(:popover-open) { display: none; }

  .popover {
    --popover-inline-size: var(--floating-tool-inline-size);
    inline-size: min(var(--popover-inline-size), calc(100vw - (2 * var(--space-cluster))));
  }

  .menu-popover {
    --popover-inline-size: var(--floating-menu-inline-size);
    inline-size: min(var(--popover-inline-size), calc(100vw - (2 * var(--space-cluster))));
  }

  .popover-header {
    align-items: center;
    border-block-end: 1px solid var(--panel-row-border);
    display: flex;
    justify-content: space-between;
    margin-block-end: var(--space-cluster);
    padding-block-end: var(--space-related);
  }

  .popover-title {
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-heading);
  }

  .popover-field { display: grid; gap: var(--space-related); margin-block-end: var(--space-cluster); }
  .popover-label { color: var(--text-muted); font-size: var(--type-size-control); }
  .popover-section-label { border-block-start: 1px solid var(--border); color: var(--text); display: block; font-size: var(--type-size-control); font-weight: var(--type-weight-strong); margin-block-start: var(--space-related); padding-block-start: var(--space-related); }
  .popover-help-text { color: var(--text-muted); font-size: var(--type-size-control); line-height: var(--type-line-body); margin: 0; }
  .popover-input { inline-size: 100%; }

  /* Shared contained-section grammar for tool popovers that need several
     related control groups. This keeps feature tools on the same card, field,
     typography, and spacing system instead of inventing feature-owned panels. */
  .popover-section-stack {
    align-content: start;
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }

  .popover-section {
    background: var(--panel-card-bg);
    border: 1px solid var(--panel-card-border);
    border-radius: var(--radius-card);
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
    padding: var(--space-related);
  }

  .popover-section-header {
    display: grid;
    gap: var(--space-micro);
    min-inline-size: 0;
  }

  .popover-section-title {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-heading);
    margin: 0;
  }

  .popover-section-copy {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    margin: 0;
  }

  .popover-section-body {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }

  .popover-section-body > .popover-field {
    gap: var(--space-tight);
    margin: 0;
    min-inline-size: 0;
  }

  .popover-section-body .popover-label {
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
  }

  .popover-actions {
    align-items: center;
    border-block-start: 1px solid var(--panel-row-border);
    display: flex;
    gap: var(--space-related);
    justify-content: flex-end;
    margin-block-start: var(--space-cluster);
    padding-block-start: var(--space-related);
  }

  .popover-icon-button { inline-size: var(--control-height); padding: 0; }

  .document-appearance-colour-preset {
    flex: 0 0 auto;
    min-inline-size: 0;
  }

  .publication-break-popover {
    --popover-inline-size: var(--floating-tool-inline-size);
    --anchored-editing-surface-inline-size: var(--popover-inline-size);

    max-block-size: min(var(--surface-overlay-max-block), var(--publication-break-popover-available-block-size, var(--surface-overlay-max-block)));
  }

  .publication-break-header-actions {
    align-items: center;
    display: flex;
    gap: var(--space-tight);
  }

  .publication-break-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inline-size: 100%;
  }

  .publication-break-tabs > .ui-control-segment {
    inline-size: 100%;
  }


  .publication-break-settings-grid {
    display: grid;
    gap: var(--space-related) var(--space-cluster);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: var(--space-cluster);
  }

  .publication-break-setting {
    display: grid;
    gap: var(--space-tight);
    min-inline-size: 0;
  }

  .publication-break-settings-grid-compact {
    grid-template-columns: minmax(0, 1fr);
  }


  @media (max-width: 520px) {
    .publication-break-settings-grid { grid-template-columns: minmax(0, 1fr); }
  }

  .menu-popover [role="menuitem"],
  .menu-popover button,
  .menu-popover a {
    border-radius: var(--radius-control);
    min-block-size: var(--control-block-size);
  }

  .menu-popover [role="menuitem"]:focus-visible,
  .menu-popover button:focus-visible,
  .menu-popover a:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: none;
  }

  .tooltip {
    align-items: center;
    box-sizing: border-box;
    border-radius: var(--radius-surface);
    display: none;
    font-size: var(--type-size-control);
    gap: var(--space-related);
    max-inline-size: 240px;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity var(--motion-duration-micro) var(--motion-ease-standard);
  }

  .tooltip.is-visible { display: flex; opacity: 1; }
  .tooltip-shortcut { color: var(--text-muted); }

  .local-state-launcher {
    bottom: var(--space-related);
    font-size: var(--type-size-meta);
    font-weight: var(--type-weight-strong);
    left: var(--space-related);
    max-inline-size: min(260px, calc(100vw - 32px));
    overflow: hidden;
    position: fixed;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: var(--z-tip);
  }

  .local-state-launcher::before {
    background: var(--accent);
    block-size: 6px;
    border-radius: var(--radius-full);
    content: '';
    flex: 0 0 auto;
    inline-size: 6px;
  }

  .local-state-launcher[data-switcher-open="true"] {
    opacity: 0;
    pointer-events: none;
  }

  html[data-anchored-editing-surface-open="true"] .local-state-launcher {
    opacity: 0;
    pointer-events: none;
  }

  .local-state-launcher[data-surface-boundary="app-shell"] { bottom: auto; }

  .local-state-switcher {
    --popover-inline-size: min(27rem, calc(100vw - (2 * var(--space-cluster))));

    display: flex;
    flex-direction: column;
    inset: auto auto calc(var(--space-related) + var(--control-height) + var(--space-tight)) var(--space-related);
    max-block-size: var(--surface-overlay-max-block);
    max-inline-size: calc(100vw - 16px);
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .local-state-switcher > .popover-header {
    flex: 0 0 auto;
    margin-block-end: var(--space-related);
  }

  .local-state-switcher-body {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-inline-end: 2px;
    scroll-padding-block: var(--space-related);
  }

  .local-state-switcher-footer {
    flex: 0 0 auto;
    margin-block-start: var(--space-related);
  }

  .local-state-switcher[data-surface-boundary="app-shell"] { inset: auto; }

  .local-state-switcher[data-surface-placement="mobile-sheet"] {
    border-radius: var(--radius-surface);
    inline-size: calc(100vw - 16px);
    padding: var(--space-cluster);
  }

  /* Explicit real-device viewport diagnostics. This surface is opt-in via
     ?viewport-diagnostics=1 and reuses the universal popover/control system. */
  .viewport-diagnostics {
    inset: var(--space-section) auto auto var(--space-section);
    inline-size: min(460px, calc(100vw - (2 * var(--space-section))));
    max-block-size: min(72dvh, calc(var(--app-viewport-block) - (2 * var(--space-section))));
    overflow: auto;
    position: fixed;
  }

  .viewport-diagnostics-output {
    font-family: var(--font-mono);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-body);
    margin-block-start: var(--space-cluster);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }


  @media (max-width: 760px) {
    .local-state-switcher {
      box-shadow: none;
      font-size: var(--type-size-control);
    }

    .local-state-switcher-footer {
      align-items: stretch;
    }

    .local-state-switcher-footer > button {
      inline-size: 100%;
    }
  }
}

@layer components {
  :where(.popover, .menu-popover):popover-open {
    animation: compose-surface-reveal var(--motion-duration-surface) var(--motion-ease-out) backwards;
    transform-origin: top center;
  }


  .tooltip.is-visible {
    animation: compose-surface-reveal var(--motion-duration-micro) var(--motion-ease-out) backwards;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.popover, .menu-popover):popover-open,
    .tooltip.is-visible { animation-duration: var(--motion-duration-reduced); }
  }

}

@layer components {
  /* The local preview launcher is development chrome. It must never cover a
     focused compact composer or the software-keyboard editing area. */
  :root[data-keyboard-visible="true"] .local-state-launcher,
  :root[data-sidebar-mode="compact"]:has(.sidebar-footer-composer-host.is-footer-composer-mode) .local-state-launcher {
    opacity: 0;
    pointer-events: none;
  }
}

@layer surfaces {
  /* Publication Break now composes the same fixed-chrome / scrolling-body
     model as other anchored editing tools. */
  .publication-break-popover {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow: clip;
    padding: 0;
  }

  .publication-break-popover > .popover-header {
    margin-block-end: 0;
    padding: var(--space-related) var(--space-related) var(--space-related) var(--space-cluster);
  }

  .publication-break-mode-bar {
    border-block-end: 1px solid var(--panel-row-border);
    padding: var(--space-related) var(--space-cluster);
  }

  .publication-break-body {
    display: grid;
    flex: 0 1 auto;
    gap: var(--space-cluster);
    min-block-size: 0;
    overflow-y: auto;
    padding: var(--space-cluster);
    scroll-padding-block: var(--space-cluster);
  }

  .publication-break-panel-copy,
  .publication-break-status {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-body);
    margin: 0;
  }

  .publication-break-settings-section {
    display: grid;
    gap: var(--space-related);
  }

  .publication-break-settings-section + .publication-break-settings-section {
    border-block-start: 1px solid var(--panel-row-border);
    margin-block-start: var(--space-cluster);
    padding-block-start: var(--space-cluster);
  }

  .publication-break-section-title {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-heading);
    margin: 0;
  }

  .publication-break-settings-grid {
    margin-block-start: 0;
  }

  .publication-break-footer[hidden] { display: none; }

  .publication-break-footer #publication-break-remove-section {
    margin-inline-end: auto;
  }
}

@layer surfaces {
  .publication-break-section-start {
    display: grid;
    gap: var(--space-related);
  }

  .publication-break-advanced {
    border-block-start: 1px solid var(--panel-row-border);
    margin-block-start: var(--space-cluster);
    padding-block-start: var(--space-related);
  }

  .publication-break-advanced-summary {
    color: var(--text);
    cursor: pointer;
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-control);
    min-block-size: var(--control-block-size);
    padding-block: var(--space-tight);
  }

  .publication-break-advanced-body {
    display: grid;
    gap: var(--space-cluster);
    padding-block-start: var(--space-related);
  }

  .publication-break-advanced[data-mode="edit"] > .publication-break-advanced-summary {
    color: var(--text-muted);
  }
}

@layer components {
  /* Tool popovers are direct-manipulation controls. Show them on the first paint
     after activation instead of withholding full opacity for 170 ms. */
  :where(.popover, .menu-popover):popover-open {
    animation: none;
  }
}

/* css/surfaces/anchored-editing-surface.css */
@layer surfaces {
  /* Shared composition grammar for focused tools anchored to the editor chrome.
     Domain modules own their controls and behavior. This layer owns only the
     stable header/body/footer geometry, section rhythm, and scroll ownership. */
  .anchored-tool-surface {
    background: var(--floating-chrome-plate-bg);
    border-color: var(--floating-chrome-plate-border);
    box-shadow: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    overflow: hidden;
    overflow: clip;
    padding: 0;
  }

  .anchored-tool-header {
    align-items: center;
    border-block-end: 1px solid var(--panel-row-border);
    display: grid;
    flex: 0 0 auto;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
    inline-size: 100%;
    min-block-size: 0;
    padding: var(--space-related) var(--space-related) var(--space-related) var(--space-cluster);
  }

  .anchored-tool-heading {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }

  .anchored-tool-title {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    letter-spacing: var(--type-tracking-heading);
    line-height: var(--type-line-heading);
    margin: 0;
  }

  /* A non-tabbable static heading may receive programmatic initial dialog
     focus so touch opening does not manufacture a selected-control focus tile.
     Because it cannot be reached through keyboard navigation, the interactive
     focus-ring contract continues to apply to actual controls, not this anchor. */
  .anchored-tool-title[tabindex="-1"]:focus-visible {
    outline: none;
  }

  .anchored-tool-summary {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    margin: 0;
  }

  .anchored-tool-search {
    flex: 0 0 auto;
  }

  .anchored-tool-body {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .anchored-tool-section {
    min-inline-size: 0;
  }

  .anchored-tool-section + .anchored-tool-section {
    border-block-start: 1px solid var(--panel-row-border);
    padding-block-start: var(--space-related);
  }

  .anchored-tool-footer {
    align-items: center;
    background: var(--floating-chrome-plate-bg);
    border-block-start: 1px solid var(--panel-row-border);
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--space-related);
    inline-size: 100%;
    justify-content: flex-end;
    padding: var(--space-related) var(--space-cluster) var(--space-cluster);
  }

  [data-anchored-editing-surface] {
    --anchored-editing-surface-inline-size: var(--floating-tool-inline-size);
    --anchored-editing-surface-viewport-gap: var(--space-cluster);
    --anchored-editing-surface-available-block-size: var(--surface-overlay-max-block);
    --anchored-editing-surface-toolbar-gap: 14px;
    --motion-transform-base: translateX(-50%);

    inset: auto;
    left: 50%;
    margin: 0;
    max-block-size: min(var(--surface-overlay-max-block), var(--anchored-editing-surface-available-block-size));
    position: fixed;
    right: auto;
    top: auto;
    transform: var(--motion-transform-base);
    transform-origin: 50% calc(100% + 18px);
    z-index: var(--z-popover);
  }


  [data-anchored-editing-surface] .selection-inspector-header {
    align-items: center;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: auto minmax(0, 1fr) auto;
    inline-size: 100%;
    min-block-size: 0;
  }

  [data-anchored-editing-surface] .selection-inspector-heading {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }

  [data-anchored-editing-surface] .selection-inspector-title {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    letter-spacing: var(--type-tracking-heading);
    line-height: var(--type-line-heading);
    margin: 0;
  }

  [data-anchored-editing-surface] .selection-inspector-summary {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    margin: 0;
    max-inline-size: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [data-anchored-editing-surface] .selection-inspector-summary:empty { display: none; }

  [data-anchored-editing-surface] [data-anchored-editing-header],
  [data-anchored-editing-surface] [data-anchored-editing-footer] {
    flex: 0 0 auto;
  }

  [data-anchored-editing-surface] [data-anchored-editing-body] {
    min-block-size: 0;
  }

  [data-anchored-editing-surface][data-busy="true"] { cursor: progress; }

  [data-anchored-editing-surface] .anchored-editing-close {
    --ui-control-block-size: 32px;

    flex: 0 0 auto;
    justify-self: end;
  }

  [data-anchored-editing-surface] .anchored-editing-close svg {
    block-size: 16px;
    flex: 0 0 16px;
    inline-size: 16px;
  }

  @media (pointer: coarse) {
    [data-anchored-editing-surface] .anchored-editing-close {
      --ui-control-block-size: var(--control-touch-target);
    }
  }
}

@layer components {
  /* Minimized editing is represented by the one independent capsule below.
     The expanded surface keeps its measured geometry but becomes non-visible,
     preventing a 400px-class dialog from collapsing to zero in CLS traces. */
  [data-anchored-editing-surface][data-anchored-editing-presentation="minimized"][data-open="true"] {
    pointer-events: none;
    visibility: hidden;
  }

  .anchored-editing-minimized-control {
    --ui-control-block-size: var(--floating-interaction-lane-control-size);

    align-items: center;
    background: var(--surface-floating);
    border-color: var(--surface-border);
    border-radius: var(--radius-full);
    box-shadow: none;
    color: var(--text);
    display: flex;
    font-family: var(--font-ui);
    font-size: var(--type-size-control);
    gap: var(--space-related);
    inline-size: fit-content;
    justify-content: center;
    left: var(--writing-space-visual-center-inline);
    max-inline-size: min(220px, calc(100vw - (2 * var(--space-cluster))));
    min-inline-size: 132px;
    padding: var(--floating-chrome-plate-padding) var(--space-cluster);
    position: fixed;
    bottom: calc(var(--floating-toolbar-bottom) + var(--floating-toolbar-block-size) + var(--floating-interaction-lane-gap));
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: var(--z-popover);
  }

  :root[data-keyboard-visible="true"] .anchored-editing-minimized-control {
    bottom: auto;
    top: calc(var(--floating-toolbar-mobile-top) - var(--floating-interaction-lane-control-size) - var(--floating-interaction-lane-gap));
  }

  @media (pointer: coarse) and (max-width: 1280px) {
    .anchored-editing-minimized-control {
      --ui-control-block-size: var(--control-touch-target);
      bottom: auto;
      top: calc(var(--floating-toolbar-mobile-top) - var(--control-touch-target) - var(--floating-interaction-lane-gap));
    }
  }

  .anchored-editing-minimized-control[hidden] { display: none; }

  .anchored-editing-minimized-control svg {
    block-size: 16px;
    flex: 0 0 16px;
    inline-size: 16px;
  }

  .anchored-editing-minimized-label {
    display: block;
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-control);
    max-inline-size: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* css/surfaces/selection-inspector.css */
@layer surfaces {
  .selection-inspector {
    --anchored-editing-surface-inline-size: var(--floating-tool-inline-size);
    --anchored-editing-surface-viewport-gap: var(--selection-inspector-viewport-gap);
    --selection-inspector-command-columns: 2;
    --selection-inspector-command-gap: var(--space-related);
    --selection-inspector-control-block-size: 36px;
    --selection-inspector-label-control-gap: var(--space-micro);
    --selection-inspector-viewport-gap: var(--space-cluster);
    /* Shared ui-control primitives own button materials and interaction states.
       Inspector CSS only owns geometry and object-editor layout. */
    --selection-inspector-available-block-size: var(--surface-overlay-max-block);

    background: var(--floating-chrome-plate-bg);
    border-color: var(--floating-chrome-plate-border);
    box-shadow: none;
    box-sizing: border-box;
    color: var(--text);
    display: flex;
    flex-direction: column;
    font-family: var(--font-ui);
    font-size: var(--type-size-control);
    gap: 0;
    block-size: auto;
    inline-size: min(var(--anchored-editing-surface-inline-size), calc(100vw - (2 * var(--selection-inspector-viewport-gap))));
    max-block-size: min(var(--surface-overlay-max-block), var(--selection-inspector-available-block-size));
    min-block-size: 0;
    overflow: hidden;
    overflow: clip;
    padding: 0;
    --motion-transform-base: translateX(-50%);
    position: fixed;
    transform: var(--motion-transform-base);
    transform-origin: 50% calc(100% + 18px);
    transition:
      background-color var(--motion-duration-surface) var(--motion-ease-out),
      border-color var(--motion-duration-surface) var(--motion-ease-out);
    z-index: var(--z-popover);
  }

  .selection-inspector[hidden] { display: none; }
  .selection-inspector.ui-motion-dismiss { pointer-events: none; }

  .selection-inspector[data-selection-context="table"] {
    --selection-inspector-command-columns: 2;
    --selection-inspector-command-gap: var(--space-related);
    --selection-inspector-control-block-size: max(var(--small-control-height), 34px);
  }

  .selection-inspector[data-selection-context="citation"] {
    --selection-inspector-command-columns: 3;
  }

  .selection-inspector *,
  .selection-inspector *::before,
  .selection-inspector *::after {
    box-sizing: border-box;
    min-inline-size: 0;
  }

  .selection-inspector-header {
    align-items: center;
    border-block-end: 1px solid var(--panel-row-border);
    display: grid;
    flex: 0 0 auto;
    gap: var(--space-related);
    grid-template-columns: auto minmax(0, 1fr) auto;
    inline-size: 100%;
    min-block-size: 0;
    padding: var(--space-related) var(--space-related) var(--space-related) var(--space-cluster);
  }

  .selection-inspector-back { grid-column: 1; }

  .selection-inspector-heading {
    display: grid;
    gap: 2px;
    grid-column: 2;
    min-inline-size: 0;
  }

  .selection-inspector-header-actions {
    align-items: center;
    display: flex;
    gap: var(--space-tight);
    grid-column: 3;
    justify-self: end;
  }

  .selection-inspector-title {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    letter-spacing: var(--type-tracking-heading);
    line-height: var(--type-line-heading);
    margin: 0;
  }

  .selection-inspector-back {
    flex: 0 0 auto;
    gap: var(--space-tight);
    min-block-size: var(--anchored-editing-close-size, 32px);
    min-inline-size: var(--anchored-editing-close-size, 32px);
    padding: 0 var(--space-tight);
  }

  .selection-inspector-back[hidden] { display: none; }

  .selection-inspector-back svg {
    block-size: 16px;
    flex: 0 0 16px;
    inline-size: 16px;
  }

  .selection-inspector-back span {
    font-size: var(--type-size-meta);
    font-weight: var(--type-weight-strong);
  }


  .selection-inspector-summary {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    margin: 0;
    max-inline-size: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .selection-inspector-summary:empty { display: none; }

  .selection-inspector-groups {
    --motion-transform-base: translateX(0);

    align-content: start;
    display: grid;
    flex: 0 1 auto;
    gap: var(--space-related);
    grid-auto-rows: max-content;
    inline-size: 100%;
    min-block-size: 0;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-related) var(--space-cluster) var(--space-cluster);
    scroll-padding-block: var(--space-related) var(--space-cluster);
    scrollbar-gutter: auto;
  }

  .selection-inspector-groups > * {
    animation: compose-state-settle var(--motion-duration-state) var(--motion-ease-out) backwards;
    inline-size: 100%;
    min-block-size: max-content;
  }

  .selection-inspector-empty {
    flex: 0 1 auto;
    margin: 0;
    min-block-size: 0;
    overflow-y: auto;
    padding: var(--space-cluster);
  }

  .selection-inspector-footer {
    align-items: center;
    background: var(--floating-chrome-plate-bg);
    border-block-start: 1px solid var(--panel-row-border);
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--space-related);
    inline-size: 100%;
    justify-content: flex-end;
    padding: var(--space-related) var(--space-cluster) var(--space-cluster);
  }

  .selection-inspector-footer[hidden] { display: none; }

  .selection-inspector-footer .selection-inspector-form-button {
    flex: 0 1 auto;
    inline-size: auto;
    min-inline-size: 80px;
    white-space: nowrap;
  }

  .selection-inspector-footer .selection-inspector-form-button-danger {
    margin-inline-end: auto;
  }

  .selection-inspector-footer:not([data-has-danger="true"]) > :first-child {
    margin-inline-start: auto;
  }

  .selection-inspector[data-selection-context="table"] .selection-inspector-groups {
    overflow-x: clip;
    overflow-y: auto;
  }

  .selection-inspector-stack,
  .selection-inspector-field-stack,
  .selection-inspector-form {
    display: grid;
    gap: var(--space-related);
    inline-size: 100%;
    min-block-size: 0;
  }

  .selection-inspector-field-stack {
    gap: var(--space-related);
  }

  .selection-inspector-form {
    align-content: start;
    grid-auto-rows: auto;
  }

  .selection-inspector-command-grid {
    display: grid;
    column-gap: var(--selection-inspector-command-gap);
    row-gap: var(--selection-inspector-command-gap);
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--selection-inspector-command-columns), minmax(0, 1fr));
    inline-size: 100%;
    margin: 0;
    max-inline-size: 100%;
    overflow: visible;
    padding: 0;
  }

  .selection-inspector-action,
  .selection-inspector-form-button {
    inline-size: 100%;
    margin: 0;
    max-inline-size: 100%;
    min-block-size: var(--selection-inspector-control-block-size);
    min-inline-size: 0;
    padding-block: 0;
    padding-inline: var(--space-related);
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }


  .selection-inspector[data-selection-context="table"] .selection-inspector-action {
    min-block-size: var(--selection-inspector-control-block-size);
    padding-inline: var(--space-tight);
  }

  .selection-inspector[data-selection-context="table"] .selection-inspector-command-grid {
    gap: var(--selection-inspector-command-gap);
  }




  .selection-inspector-action-label,
  .selection-inspector-form-button-label {
    display: block;
    font-size: var(--type-size-meta);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-meta);
    max-inline-size: 100%;
    overflow: visible;
    overflow-wrap: normal;
    text-overflow: clip;
    white-space: nowrap;
  }

  .selection-inspector[data-selection-context="table"] :where(.selection-inspector-action-label, .selection-inspector-form-button-label) {
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    white-space: nowrap;
  }

  .selection-inspector-action-shortcut,
  .selection-inspector-action-badge {
    color: var(--text-muted);
    font: inherit;
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
  }

  .selection-inspector-action-badge:empty { display: none; }

  .selection-inspector-field-help {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    margin: calc(-1 * var(--space-tight)) 0 0;
    padding-inline-start: calc(1rem + var(--space-related));
  }

  .selection-inspector-label {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    display: block;
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-regular);
    inline-size: auto;
    letter-spacing: 0;
    line-height: var(--type-line-control);
    margin: 0;
    min-block-size: auto;
    padding: 0;
    text-transform: none;
  }

  .selection-inspector-help[hidden],
  .selection-inspector-error[hidden] { display: none; }

  .selection-inspector-help,
  .selection-inspector-error,
  .selection-inspector-empty {
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    margin: 0;
  }

  .selection-inspector-help,
  .selection-inspector-empty { color: var(--text-muted); }
  .selection-inspector-error { color: var(--danger); }


  .selection-inspector-link-preview {
    color: var(--text);
  }

  .selection-inspector-field {
    align-content: start;
    display: flex;
    flex-direction: column;
    gap: var(--selection-inspector-label-control-gap);
    inline-size: 100%;
    margin: 0;
    padding: 0;
  }

  .selection-inspector-field > .selection-inspector-label {
    margin-block: 0;
    padding-block: 0;
  }

  .selection-inspector-field > .selection-inspector-input {
    margin-block: 0;
    padding-block: 0;
  }

  .selection-inspector-input {
    inline-size: 100%;
    margin: 0;
    min-block-size: var(--selection-inspector-control-block-size);
    padding-block: 0;
    padding-inline: var(--space-related);
  }

  .selection-inspector-image-size-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .selection-inspector-image-size-option {
    min-block-size: calc(var(--selection-inspector-control-block-size) - 4px);
    padding: 0 var(--space-related);
    touch-action: manipulation;
  }

  .selection-inspector-textarea {
    min-block-size: calc(var(--selection-inspector-control-block-size) * 2.4);
    padding-block: var(--space-tight);
    resize: vertical;
  }

  .selection-inspector-citation-document-settings {
    gap: var(--space-related);
  }

  .selection-inspector-citation-mode-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inline-size: 100%;
  }

  .selection-inspector-citation-mode-control > .ui-control-segment {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .selection-inspector-citation-fields {
    display: grid;
    column-gap: var(--space-related);
    row-gap: var(--space-related);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inline-size: 100%;
  }

  .selection-inspector-field-wide { grid-column: 1 / -1; }

  @media (prefers-reduced-motion: reduce) {
    .selection-inspector,
    .selection-inspector-groups > * {
      animation-duration: var(--motion-duration-reduced);
      transition-duration: var(--motion-duration-reduced);
    }
  }

  @media (max-width: 760px) {
    .selection-inspector,
    .selection-inspector[data-selection-context] {
      inline-size: min(var(--anchored-editing-surface-inline-size), calc(100vw - (2 * var(--selection-inspector-viewport-gap))));
      max-block-size: min(var(--surface-overlay-max-block), var(--selection-inspector-available-block-size));
    }

    .selection-inspector[data-selection-context="table"] {
      --selection-inspector-command-gap: var(--space-tight);
      --selection-inspector-control-block-size: max(var(--small-control-height), 34px);
    }

    .selection-inspector[data-selection-context="table"] .selection-inspector-action {
      min-block-size: var(--selection-inspector-control-block-size);
      padding-inline: var(--space-tight);
    }

    .selection-inspector[data-selection-context="table"] .selection-inspector-action-label {
      line-height: var(--type-line-meta);
      white-space: nowrap;
    }

    .selection-inspector[data-selection-context="citation"] {
      --selection-inspector-command-columns: 2;
    }

    .selection-inspector-citation-fields {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 340px) {
    .selection-inspector[data-selection-context="table"] {
      --selection-inspector-command-columns: 2;
    }
  }
}

@layer components {
  /* Actual controls provide the coarse-pointer hit target; labels must stay text-sized so they remain attached to their fields. */
  @media (pointer: coarse) {
    .selection-inspector :where(.selection-inspector-label) {
      min-block-size: auto;
    }
  }

  .selection-inspector :where(.selection-inspector-action-label, .selection-inspector-form-button-label, .selection-inspector-help, .selection-inspector-error, .selection-inspector-empty, .selection-inspector-summary, .selection-inspector-action-shortcut, .selection-inspector-action-badge) {
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
  }

  .selection-inspector[data-selection-context="table"] :where(.selection-inspector-action-label, .selection-inspector-form-button-label) {
    line-height: var(--type-line-meta);
    white-space: nowrap;
  }

  @media (max-width: 760px) {
    .selection-inspector[data-selection-context="table"] :where(.selection-inspector-action-label, .selection-inspector-form-button-label) {
      line-height: var(--type-line-meta);
      white-space: nowrap;
    }
  }
}

@layer surfaces {
  .selection-inspector-caption {
    border-block-start: 1px solid var(--panel-row-border);
    display: grid;
    gap: 0;
    padding-block-start: var(--space-related);
  }

  .selection-inspector-groups > .selection-inspector-caption:first-child,
  .selection-inspector-form > .selection-inspector-caption:first-child {
    border-block-start: 0;
    padding-block-start: 0;
  }

  .selection-inspector-caption-title {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-heading);
    margin: 0;
  }

  .selection-inspector-caption-description {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    margin: 0;
  }

  .selection-inspector-object-summary {
    display: grid;
    gap: 0;
    margin: 0;
  }

  .selection-inspector-object-summary-row {
    align-items: baseline;
    border-block-start: 1px solid var(--panel-row-border);
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
    padding-block: var(--space-related);
  }

  .selection-inspector-object-summary-row:first-child {
    border-block-start: 0;
    padding-block-start: 0;
  }

  .selection-inspector-object-summary dt,
  .selection-inspector-object-summary dd {
    margin: 0;
  }

  .selection-inspector-object-summary dt {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
  }

  .selection-inspector-object-summary dd {
    color: var(--text);
    font-size: var(--type-size-meta);
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: end;
    text-overflow: ellipsis;
  }


  @media (max-width: 520px) {
    .selection-inspector,
    .selection-inspector[data-selection-context] {
      --selection-inspector-viewport-gap: var(--space-tight);
      inline-size: calc(100vw - (2 * var(--selection-inspector-viewport-gap)));
    }

    .selection-inspector-object-summary-row {
      grid-template-columns: 1fr;
      gap: 2px;
    }

    .selection-inspector-object-summary dd {
      text-align: start;
    }

  }
}

@layer surfaces {
  .selection-inspector[data-selection-context="table"] .selection-inspector-groups {
    overflow-x: clip;
    overflow-y: auto;
  }

  .selection-inspector-primary-actions,
  .selection-inspector-danger-zone,
  .selection-inspector-table-cell-actions {
    grid-template-columns: 1fr;
  }

  .selection-inspector-primary-actions .selection-inspector-form-button,
  .selection-inspector-primary-actions .selection-inspector-action {
    min-block-size: 40px;
  }

  .selection-inspector-danger-zone {
    border-block-start: 1px solid var(--panel-row-border);
    padding-block-start: var(--space-related);
  }

  .selection-inspector-link-utility-actions,
  .selection-inspector-table-header-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .selection-inspector-table-row-actions,
  .selection-inspector-table-column-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }

  .selection-inspector-table-table-actions {
    display: flex;
    justify-content: flex-end;
  }

  .selection-inspector-table-overflow {
    align-self: stretch;
    justify-self: end;
  }

  .selection-inspector-table-overflow > .selection-inspector-overflow-trigger {
    --ui-control-block-size: var(--selection-inspector-control-block-size);
  }

  .selection-inspector-table-section {
    gap: var(--space-related);
  }

  .selection-inspector-table-section .selection-inspector-caption {
    border-block-start: 1px solid var(--panel-row-border);
    padding-block-start: var(--space-related);
  }

  .selection-inspector-table-section:first-of-type .selection-inspector-caption {
    border-block-start: 0;
    padding-block-start: 0;
  }

  .selection-inspector-source-preview {
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    color: var(--text);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-body);
    margin: 0;
    overflow-wrap: anywhere;
    padding: var(--space-related);
  }

  .selection-inspector-preview-section {
    border-block-start: 1px solid var(--panel-row-border);
    gap: var(--space-related);
    padding-block-start: var(--space-related);
  }

  .selection-inspector-preview-section .selection-inspector-caption {
    border-block-start: 0;
    padding-block-start: 0;
  }

  .selection-inspector-link-destination-field[hidden],
  .selection-inspector-link-heading-field[hidden] {
    display: none;
  }

}

@layer surfaces {
  .selection-inspector[data-busy="true"] .selection-inspector-groups {
    opacity: .72;
  }

  .selection-inspector-input {
    scroll-margin-block: calc(var(--topbar-h) + var(--space-cluster)) calc(var(--floating-chrome-plate-block-size) + var(--space-cluster));
  }

  @media (max-height: 540px) {
    .selection-inspector,
    .selection-inspector[data-selection-context] {
      max-block-size: min(var(--selection-inspector-available-block-size), calc(100dvh - (2 * var(--space-tight))));
    }

    .selection-inspector-groups,
    .selection-inspector-stack,
    .selection-inspector-field-stack,
    .selection-inspector-form {
      gap: var(--space-related);
    }
  }

  @media (pointer: coarse) {
    .selection-inspector {
      --selection-inspector-control-block-size: 44px;
    }

    .selection-inspector-back {
      min-block-size: 44px;
    }
  }
}

@layer components {

  @media (forced-colors: active) {
    .selection-inspector,
    .selection-inspector-source-preview,
    .selection-inspector-footer {
      background: Canvas;
      border-color: ButtonText;
      color: CanvasText;
      forced-color-adjust: auto;
    }
  }
}

@layer surfaces {
  .selection-inspector-citation-picker,
  .selection-inspector-citation-occurrence-form {
    min-inline-size: 0;
  }

  .selection-inspector-source-choice-list {
    display: grid;
    gap: var(--space-tight);
    max-block-size: min(320px, 42vh);
    min-block-size: 0;
    overflow: auto;
    padding-inline-end: 2px;
  }

  .selection-inspector-source-choice {
    align-items: start;
    border: 1px solid var(--panel-row-border);
    border-radius: var(--radius-control);
    cursor: pointer;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--space-related);
  }

  @media (hover: hover) {
    .selection-inspector-source-choice:hover {
      background: var(--panel-row-bg-hover);
      border-color: var(--panel-row-border-hover);
    }
  }

  .selection-inspector-source-choice:focus-within {
    background: var(--panel-row-bg-hover);
    border-color: var(--panel-row-border-hover);
  }

  .selection-inspector-source-choice-input {
    margin-block-start: 2px;
  }

  .selection-inspector-source-choice-copy,
  .selection-inspector-citation-occurrence-heading-copy {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }

  .selection-inspector-source-choice-title {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-heading);
    overflow-wrap: anywhere;
  }

  .selection-inspector-source-choice-meta {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
  }

  .selection-inspector-citation-occurrence-form {
    display: grid;
    gap: var(--space-cluster);
  }

  .selection-inspector-citation-occurrence-item {
    border-block-start: 1px solid var(--panel-row-border);
    display: grid;
    gap: var(--space-related);
    padding-block-start: var(--space-cluster);
  }

  .selection-inspector-citation-occurrence-item:first-child {
    border-block-start: 0;
    padding-block-start: 0;
  }

  .selection-inspector-citation-occurrence-heading {
    align-items: start;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .selection-inspector-checkbox-row {
    align-items: center;
    color: var(--text);
    display: flex;
    font-size: var(--type-size-meta);
    gap: var(--space-related);
    line-height: var(--type-line-meta);
  }

  /* Citation uses native checkboxes as the sole committed-selection cue in its
     source picker and occurrence options. Give that cue the same app accent as
     other committed controls without reintroducing a redundant row marker. */
  .selection-inspector[data-selection-context="citation"] input[type="checkbox"] {
    accent-color: var(--accent);
  }
}

@layer surfaces {
  .selection-inspector-citation-creator-section,
  .selection-inspector-citation-identifiers,
  .selection-inspector-citation-occurrence-options,
  .selection-inspector-citation-duplicate-review {
    border-block-start: 1px solid var(--panel-row-border);
    padding-block-start: var(--space-related);
  }

  .selection-inspector-citation-creator-heading {
    align-items: center;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
  }


  .selection-inspector-citation-creator-row {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }

  .selection-inspector-citation-creator-row + .selection-inspector-citation-creator-row {
    border-block-start: 1px solid var(--panel-row-border);
    padding-block-start: var(--space-related);
  }

  .selection-inspector-citation-creator-heading strong,
  .selection-inspector-citation-duplicate-review strong {
    color: var(--text);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
  }

  .selection-inspector-identifier-with-action {
    min-inline-size: 0;
  }

  .selection-inspector-identifier-action {
    align-self: stretch;
    inline-size: auto;
    min-inline-size: max-content;
    white-space: nowrap;
  }

  .selection-inspector-source-choice-row {
    border: 1px solid var(--panel-row-border);
    border-radius: var(--radius-control);
    display: grid;
    gap: var(--space-tight);
    min-inline-size: 0;
    padding: var(--space-tight);
  }

  .selection-inspector-source-choice-row:focus-within {
    background: var(--panel-row-bg-hover);
    border-color: var(--panel-row-border-hover);
  }

  @media (hover: hover) {
    .selection-inspector-source-choice-row:hover {
      background: var(--panel-row-bg-hover);
      border-color: var(--panel-row-border-hover);
    }
  }

  .selection-inspector-source-choice-row .selection-inspector-source-choice {
    border: 0;
    padding: var(--space-tight);
  }

  .selection-inspector-source-choice-row .selection-inspector-source-choice:focus-within {
    background: transparent;
    border-color: transparent;
  }

  @media (hover: hover) {
    .selection-inspector-source-choice-row .selection-inspector-source-choice:hover {
      background: transparent;
      border-color: transparent;
    }
  }

  .selection-inspector-source-choice-actions,
  .selection-inspector-citation-occurrence-source-actions,
  .selection-inspector-citation-creator-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
  }

  .selection-inspector-source-choice-actions {
    padding-inline: var(--space-tight);
  }

  .selection-inspector-source-delete-confirmation {
    border-block-start: 1px solid var(--panel-row-border);
    gap: var(--space-tight);
    padding: var(--space-related) var(--space-tight) var(--space-tight);
  }

  .selection-inspector-citation-creator-person,
  .selection-inspector-citation-name-options,
  .selection-inspector-citation-occurrence-options {
    display: grid;
    gap: var(--space-related);
    min-inline-size: 0;
  }

  .selection-inspector-citation-options-toggle {
    justify-self: start;
  }

  .selection-inspector-citation-acquisition-notice {
    border-block-start: 1px solid var(--panel-row-border);
    margin: 0;
    padding-block-start: var(--space-related);
  }

  @media (max-width: 520px) {
    .selection-inspector-identifier-action {
      min-inline-size: 0;
    }

    .selection-inspector-citation-occurrence-heading {
      grid-template-columns: 1fr;
    }
  }
}

@layer surfaces {
  .selection-inspector-citation-duplicate-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-related);
    min-inline-size: 0;
  }
}

@layer surfaces {
  .selection-inspector :where(.selection-inspector-overflow) {
    align-self: start;
    z-index: 8;
  }

  .selection-inspector :where(.selection-inspector-overflow:has(.selection-inspector-overflow-trigger[aria-expanded="true"])) {
    z-index: 28;
  }

  .selection-inspector :where(.selection-inspector-overflow-trigger) {
    --ui-control-block-size: 34px;
  }

  .selection-inspector :where(.selection-inspector-overflow-menu) {
    inline-size: min(196px, calc(100vw - 32px));
  }

  .selection-inspector-citation-add-field {
    justify-self: start;
  }

  .selection-inspector-citation-add-field > .selection-inspector-overflow-trigger {
    --ui-control-block-size: var(--selection-inspector-control-block-size);
    padding-inline: var(--space-related);
  }

  .selection-inspector-citation-compact-actions {
    align-items: center;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .selection-inspector-citation-compact-actions > .selection-inspector-form-button {
    inline-size: 100%;
  }

  .selection-inspector-citation-compact-actions .selection-inspector-overflow-menu {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--space-tight));
  }

  .selection-inspector-citation-compact-meta {
    margin: 0;
  }

  .selection-inspector-source-choice-row {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .selection-inspector-source-choice-row > .selection-inspector-source-choice {
    grid-column: 1;
    min-inline-size: 0;
  }

  .selection-inspector-source-choice-overflow {
    grid-column: 2;
    grid-row: 1;
  }

  .selection-inspector-source-choice-row > .selection-inspector-source-delete-confirmation {
    grid-column: 1 / -1;
  }

  .selection-inspector-citation-creator-heading > .selection-inspector-overflow,
  .selection-inspector-citation-occurrence-heading > .selection-inspector-overflow {
    justify-self: end;
  }

  .selection-inspector-citation-add-creator {
    inline-size: auto;
    justify-self: start;
    min-inline-size: 0;
    padding-inline: var(--space-related);
  }
}

@layer surfaces {
  /* The chart form is the non-destructive landing focus target when Edit
     chart opens. Suppress the global focus-visible ring on that container so
     focus does not read as an active border around the whole popover; its
     interactive descendants retain their normal focus rings. */
  .selection-inspector-chart-form:focus-visible {
    outline: none;
  }

  .selection-inspector-chart-form,
  .selection-inspector-chart-data-section,
  .selection-inspector-chart-preview-section {
    min-inline-size: 0;
  }

  .selection-inspector-chart-data-workspace {
    display: grid;
    gap: var(--space-cluster);
    grid-template-columns: minmax(0, 1fr);
    inline-size: 100%;
    min-inline-size: 0;
  }

  .selection-inspector-chart-data-workspace .selection-inspector-chart-preview-section {
    align-self: stretch;
  }

  .selection-inspector-chart-data-header {
    align-items: baseline;
    display: flex;
    gap: var(--space-related);
    justify-content: space-between;
  }

  .selection-inspector-chart-paste-hint {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    text-align: end;
  }

  .selection-inspector-chart-data-region {
    background: var(--control-surface);
    border: 1px solid var(--panel-row-border);
    border-radius: var(--radius-control);
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0;
    scrollbar-gutter: stable;
  }

  .selection-inspector-chart-data-grid {
    border-collapse: separate;
    border-spacing: 0;
    inline-size: 100%;
    min-inline-size: max-content;
    table-layout: fixed;
  }

  .selection-inspector-chart-data-grid :where(th, td) {
    border-block-end: 1px solid var(--panel-row-border);
    border-inline-end: 1px solid var(--panel-row-border);
    font-weight: var(--type-weight-regular);
    inline-size: 136px;
    padding: 0;
    text-align: start;
    vertical-align: middle;
  }

  .selection-inspector-chart-data-grid tr > :last-child {
    border-inline-end: 0;
  }

  .selection-inspector-chart-data-grid tbody > tr:last-child > :where(th, td) {
    border-block-end: 0;
  }

  .selection-inspector-chart-data-grid thead > tr > th {
    background: var(--panel-row-bg);
  }

  .selection-inspector-chart-data-grid thead > tr > th:first-child {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    inline-size: 148px;
    line-height: var(--type-line-meta);
    padding-inline: var(--space-cluster);
  }

  :is(
    .selection-inspector-chart-category-input,
    .selection-inspector-chart-series-input,
    .selection-inspector-chart-value-input
  ) {
    --ui-field-focus-ring-offset: calc(-1 * var(--focus-ring-width));
    background: transparent;
    border: 0;
    border-radius: var(--radius-none);
    inline-size: 100%;
    min-block-size: 38px;
    padding-inline: var(--space-cluster);
  }

  @media (hover: hover) {
    :is(
      .selection-inspector-chart-category-input,
      .selection-inspector-chart-series-input,
      .selection-inspector-chart-value-input
    ):hover {
      background: var(--state-layer-hover);
    }
  }

  :is(
    .selection-inspector-chart-category-input,
    .selection-inspector-chart-series-input,
    .selection-inspector-chart-value-input
  ):focus-visible {
    background: var(--surface-field);
    border-color: transparent;
  }

  .selection-inspector-chart-value-input {
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .selection-inspector-chart-composite-field {
    min-block-size: 38px;
  }

  .selection-inspector-chart-series-heading,
  .selection-inspector-chart-category-field,
  .selection-inspector-chart-series-input,
  .selection-inspector-chart-category-input {
    min-inline-size: 0;
  }

  .selection-inspector-chart-remove-button {
    --ui-control-block-size: 38px;
    align-self: stretch;
    background: transparent;
    border: 0;
    border-inline-start: 1px solid var(--panel-row-border);
    border-radius: var(--radius-none);
    color: var(--text-muted);
    inline-size: var(--ui-control-block-size);
    min-block-size: 100%;
    min-inline-size: var(--ui-control-block-size);
    padding: 0;
  }

  @media (hover: hover) {
    .selection-inspector-chart-remove-button:hover {
      background: var(--state-layer-danger-hover);
      border-inline-start-color: var(--panel-row-border);
      color: var(--danger);
    }
  }

  .selection-inspector-chart-remove-button:active,
  .selection-inspector-chart-remove-button.is-pressing {
    background: var(--state-layer-danger-pressed);
    border-inline-start-color: var(--panel-row-border);
    color: var(--danger);
  }

  .selection-inspector-chart-data-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
    padding-block-start: var(--space-tight);
  }

  .selection-inspector-chart-data-actions .selection-inspector-form-button {
    inline-size: auto;
    min-inline-size: 0;
    padding-inline: var(--space-related);
  }

  .selection-inspector-chart-preview {
    align-items: center;
    background: var(--surface-document-paper);
    border: 1px solid var(--panel-row-border);
    border-radius: var(--radius-control);
    block-size: clamp(176px, 24vh, 224px);
    display: flex;
    inline-size: 100%;
    justify-content: center;
    min-block-size: 0;
    overflow: hidden;
    padding: var(--space-related);
  }

  .selection-inspector-chart-preview > :where(svg, .compose-chart-placeholder) {
    block-size: 100%;
    inline-size: 100%;
    max-block-size: 100%;
  }

  @media (max-width: 560px) {
    .selection-inspector-chart-preview {
      block-size: clamp(156px, 22vh, 190px);
    }
  }

  @media (pointer: coarse) {
    .selection-inspector-chart-data-grid :where(th, td) {
      inline-size: 152px;
    }

    .selection-inspector-chart-data-grid thead > tr > th:first-child {
      inline-size: 164px;
    }

    .selection-inspector-chart-composite-field,
    :is(
      .selection-inspector-chart-category-input,
      .selection-inspector-chart-series-input,
      .selection-inspector-chart-value-input
    ) {
      min-block-size: 44px;
    }

    .selection-inspector-chart-remove-button {
      --ui-control-block-size: 44px;
    }
  }
}

@layer surfaces {
  /* Focused object summaries are text-led. Secondary actions live in overflow
     rather than becoming additional visual groups. */
  .selection-inspector-object-lead {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-body);
    margin: 0;
    overflow-wrap: anywhere;
  }

  .selection-inspector-object-secondary,
  .selection-inspector-context-line {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    margin: 0;
    overflow-wrap: anywhere;
  }

  .selection-inspector-link-compact {
    gap: 2px;
  }

  .selection-inspector-compact-action-row {
    align-items: center;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .selection-inspector-compact-action-row > .selection-inspector-form-button {
    inline-size: 100%;
  }

  /* Table location is context, not a miniature definition table. Labels own
     the hierarchy while immediate commands use the standard secondary control material. */
  .selection-inspector[data-selection-context="table"] .selection-inspector-context-line {
    padding-block-end: var(--space-tight);
  }

  .selection-inspector[data-selection-context="table"] .selection-inspector-table-section {
    gap: var(--space-tight);
  }

  .selection-inspector[data-selection-context="table"] .selection-inspector-table-section .selection-inspector-caption {
    padding-block-start: var(--space-related);
  }

  /* Citation source choice is a selectable list, not cards inside a card.
     Multi-selection is communicated by the checkbox itself, so checked rows do
     not borrow persistent navigation accent or shape cues. */
  .selection-inspector[data-selection-context="citation"]:has(.selection-inspector-citation-picker) .selection-inspector-groups {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .selection-inspector-citation-picker {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-block-size: 0;
    overflow: hidden;
  }

  .selection-inspector-source-choice-list {
    border-block: 1px solid var(--panel-row-border);
    display: block;
    flex: 1 1 auto;
    max-block-size: none;
    min-block-size: 0;
    overflow-x: clip;
    overflow-y: auto;
    padding: 0;
    scroll-padding-block: var(--space-related);
  }

  .selection-inspector-source-choice-row {
    border: 0;
    border-block-start: 1px solid var(--panel-row-border);
    border-radius: var(--radius-none);
    gap: var(--space-tight);
    padding: var(--space-tight) 0;
    position: relative;
  }

  .selection-inspector-source-choice-row:first-child {
    border-block-start: 0;
  }

  .selection-inspector-source-choice-row:focus-within {
    background: var(--panel-row-bg-hover);
    border-color: var(--panel-row-border);
  }

  @media (hover: hover) {
    .selection-inspector-source-choice-row:hover {
      background: var(--panel-row-bg-hover);
      border-color: var(--panel-row-border);
    }
  }


  .selection-inspector-source-choice-row .selection-inspector-source-choice {
    border: 0;
    border-radius: var(--radius-none);
    padding: var(--space-related);
  }

  

  .selection-inspector-source-choice-overflow {
    margin-block-start: var(--space-tight);
    margin-inline-end: var(--space-tight);
  }

  .selection-inspector-source-preview {
    background: transparent;
    border: 0;
    border-radius: var(--radius-none);
    padding: 0;
  }
}

@layer surfaces {
  /* Surface depth is semantic. Compact inspectors stay terse and ordinary
     object/source editors retain the stable anchored-tool width. Only work
     that genuinely needs a canvas, currently Chart Data, uses the deeper
     workspace without creating another lifecycle or overlay family. */
  .selection-inspector[data-surface-depth="deep"] {
    --anchored-editing-surface-inline-size: var(--floating-deep-inline-size);
  }


  .selection-inspector-chart-data-summary {
    border-block-start: 1px solid var(--panel-row-border);
    gap: var(--space-tight);
    padding-block-start: var(--space-related);
  }

  .selection-inspector-chart-data-summary-actions {
    margin-block-start: var(--space-tight);
  }

  .selection-inspector-chart-compact-actions,
  .selection-inspector-publication-break-actions {
    margin-block-start: var(--space-tight);
  }

  .selection-inspector-image-compact {
    gap: 2px;
  }

  .selection-inspector-image-caption-preview {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .selection-inspector-citation-source-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--space-tight);
    margin-block-start: var(--space-related);
  }

  .selection-inspector-citation-source-actions > .selection-inspector-form-button {
    inline-size: auto;
  }

  @media (max-width: 520px) {
    .selection-inspector[data-surface-depth="deep"] {
      --selection-inspector-viewport-gap: 6px;
      inline-size: calc(100vw - 12px);
      max-block-size: var(--selection-inspector-available-block-size);
    }
  }

  @media (pointer: coarse) and (max-width: 760px) {
    .selection-inspector[data-surface-depth="deep"] .selection-inspector-groups {
      padding-block: var(--space-cluster);
    }
  }
}

@layer surfaces {
  .selection-inspector-groups > * {
    animation: none;
  }
}

/* css/surfaces/command-palette.css */
@layer surfaces {
  .command-palette {
    --anchored-editing-surface-inline-size: var(--floating-tool-inline-size);
    --command-palette-viewport-gap: var(--space-cluster);
    --anchored-editing-surface-viewport-gap: var(--command-palette-viewport-gap);
    --command-palette-available-block-size: var(--surface-overlay-max-block);
    --command-palette-row-size: 42px;

    background: var(--floating-chrome-plate-bg);
    box-sizing: border-box;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--type-size-control);
    inline-size: min(var(--anchored-editing-surface-inline-size), calc(100vw - (2 * var(--command-palette-viewport-gap))));
    max-block-size: min(var(--surface-command-palette-max-block), var(--command-palette-available-block-size));
    min-block-size: 0;
    overflow: hidden;
    overflow: clip;
    padding: 0;
  }

  .command-palette[hidden] { display: none; }
  .command-palette.ui-motion-dismiss { pointer-events: none; }

  .command-palette *,
  .command-palette *::before,
  .command-palette *::after {
    box-sizing: border-box;
    min-inline-size: 0;
  }

  .command-palette-shell {
    display: flex;
    flex-direction: column;
    max-block-size: min(var(--surface-command-palette-max-block), var(--command-palette-available-block-size));
    min-block-size: 0;
    overflow: hidden;
  }

  .command-palette-header {
    align-items: center;
    border-block-end: 1px solid var(--panel-row-border);
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
    min-block-size: 0;
    padding: var(--space-related) var(--space-related) var(--space-related) var(--space-cluster);
  }

  .command-palette-label {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    letter-spacing: var(--type-tracking-heading);
    line-height: var(--type-line-heading);
    margin: 0;
    text-transform: none;
  }


  .command-palette-search {
    align-items: center;
    border-block-end: 1px solid var(--panel-row-border);
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    padding: var(--space-related) var(--space-cluster);
    position: relative;
  }

  .command-palette-search-icon {
    block-size: 16px;
    color: var(--text-muted);
    inline-size: 16px;
    inset-inline-start: calc(var(--space-cluster) + var(--space-related));
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }

  .command-palette-input {
    grid-column: 1 / -1;
    inline-size: 100%;
    min-block-size: var(--control-height);
    padding-block: 0;
    padding-inline: calc(18px + (2 * var(--space-related))) var(--space-cluster);
  }

  .command-palette-results {
    align-content: start;
    display: grid;
    flex: 1 1 auto;
    gap: var(--space-related);
    min-block-size: 0;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-tight) var(--space-related) var(--space-related);
    scroll-padding-block: var(--space-related);
    scrollbar-gutter: stable;
  }

  .command-palette-group {
    display: grid;
    gap: 2px;
  }

  .command-palette-group-title {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    font-weight: var(--type-weight-strong);
    letter-spacing: 0;
    line-height: var(--type-line-meta);
    padding: var(--space-related) var(--space-related) var(--space-tight);
    text-transform: none;
  }

  .command-palette-option {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    color: var(--text);
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
    min-block-size: var(--command-palette-row-size);
    padding: var(--space-tight) var(--space-related);
    text-align: start;
    touch-action: pan-y pinch-zoom;
    transition:
      background-color var(--motion-duration-micro) var(--motion-ease-standard),
      border-color var(--motion-duration-micro) var(--motion-ease-standard),
      color var(--motion-duration-micro) var(--motion-ease-standard);
  }

  .command-palette-option {
    position: relative;
  }

  @media (hover: hover) {
    .command-palette-option:hover {
      background: var(--panel-row-bg-hover);
      border-color: transparent;
    }
  }

  .command-palette-option:focus-visible {
    background: var(--panel-row-bg-hover);
    border-color: transparent;
  }

  /* The active result is a keyboard navigation cursor, not a persistent app
     selection. A neutral selected-row material keeps execution focus obvious
     without borrowing the toolbar/sidebar accent marker. */
  .command-palette-option.is-active {
    background: var(--panel-row-bg-hover);
    border-color: transparent;
    color: var(--text);
  }

  .command-palette-option[aria-disabled="true"] {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: .64;
  }

  .command-palette-option.is-danger { color: var(--danger); }

  @media (hover: hover) {
    .command-palette-option.is-danger:hover {
      background: var(--danger-surface-hover);
      border-color: transparent;
    }
  }

  .command-palette-option.is-danger:focus-visible {
    background: var(--danger-surface-hover);
    border-color: transparent;
  }

  .command-palette-option.is-danger.is-active {
    background: var(--danger-surface-hover);
    border-color: transparent;
    color: var(--danger);
  }

  .command-palette-option-main {
    align-items: center;
    display: flex;
    min-block-size: 22px;
  }

  .command-palette-option-label {
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-control);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .command-palette-option-meta {
    align-items: center;
    display: inline-flex;
    gap: var(--space-tight);
    justify-content: flex-end;
  }

  .command-palette-shortcut {
    border: 0;
    border-radius: var(--radius-none);
    color: var(--text-muted);
    direction: ltr;
    font-family: var(--font-mono);
    font-size: var(--type-size-meta);
    line-height: var(--type-line-meta);
    padding: 2px 0;
    unicode-bidi: isolate;
    white-space: nowrap;
  }

  .command-palette-disabled-note {
    color: var(--text-muted);
    font-size: var(--type-size-meta);
    white-space: nowrap;
  }

  .command-palette-empty {
    color: var(--text-muted);
    font-size: var(--type-size-control);
    line-height: var(--type-line-body);
    margin: 0;
    padding: var(--space-section) var(--space-cluster);
  }

  [dir="rtl"] .command-palette-label,
  [dir="rtl"] .command-palette-group-title {
    letter-spacing: 0;
    text-transform: none;
  }

  [dir="rtl"] .command-palette-input,
  [dir="rtl"] .command-palette-option,
  [dir="rtl"] .command-palette-empty { text-align: start; }

  @media (max-width: 760px) {
    .command-palette {
      --command-palette-viewport-gap: var(--space-related);
      max-block-size: min(68dvh, var(--command-palette-available-block-size));
    }

    .command-palette-shell {
      max-block-size: min(68dvh, var(--command-palette-available-block-size));
    }

    .command-palette-header { padding-inline-start: var(--space-related); }
    .command-palette-search { padding-inline: var(--space-related); }
    .command-palette-search-icon { inset-inline-start: calc(2 * var(--space-related)); }
    .command-palette-results { padding-inline: var(--space-tight); }
  }

  @media (pointer: coarse) {
    .command-palette { --command-palette-row-size: 48px; }
  }
}

@layer components {
  .command-palette:popover-open,
  .command-palette.is-open {
    animation: compose-surface-reveal var(--motion-duration-surface) var(--motion-ease-out) backwards;
  }

  @media (prefers-reduced-motion: reduce) {
    .command-palette:popover-open,
    .command-palette.is-open { animation-duration: var(--motion-duration-reduced); }
  }

  @media (forced-colors: active) {
    .command-palette { border-color: CanvasText; }
    .command-palette-option.is-active { outline: 2px solid Highlight; }
  }
}

@layer components {
  .command-palette:popover-open,
  .command-palette.is-open {
    animation: none;
  }
}

/* css/surfaces/modal.css */
@layer surfaces {
  :where(dialog[data-modal-surface]) {
    box-sizing: border-box;
    max-block-size: var(--surface-modal-max-block);
    max-inline-size: calc(100vw - (2 * var(--space-section)));
  }

  :where(dialog[data-modal-surface])::backdrop,
  .modal::backdrop { background: var(--bg-overlay); }

  .modal {
    --modal-dialog-inline-size: min(520px, calc(100vw - (2 * var(--space-section))));
    --modal-sheet-inline-size: min(640px, calc(100vw - (2 * var(--space-section))));
    --modal-reference-inline-size: min(720px, calc(100vw - (2 * var(--space-section))));
    --modal-confirm-inline-size: min(420px, calc(100vw - (2 * var(--space-section))));
    background: transparent;
    border: 0;
    color: var(--text);
    inline-size: var(--modal-dialog-inline-size);
    margin: auto;
    padding: 0;
    z-index: var(--z-modal);
  }

  .modal[data-modal-policy="sheet"] { inline-size: var(--modal-sheet-inline-size); }
  .modal[data-modal-policy="reference"],
  .modal-wide { inline-size: var(--modal-reference-inline-size); }
  .modal[data-modal-policy="confirm"] { inline-size: var(--modal-confirm-inline-size); }


  /* Keyboard shortcuts intentionally uses a managed non-native dialog.
     This avoids browser top-layer Escape divergence while preserving one
     governed modal focus trap and explicit ARIA/hidden state. */
  #shortcuts-modal {
    background: var(--bg-overlay);
    block-size: 100dvh;
    inline-size: 100dvw;
    inset: 0;
    margin: 0;
    max-block-size: none;
    max-inline-size: none;
    padding: var(--space-section);
    place-items: center;
    position: fixed;
  }

  #shortcuts-modal.is-open { display: grid; }
  #shortcuts-modal[hidden] { display: none; }
  #shortcuts-modal > .modal-surface {
    inline-size: min(var(--modal-reference-inline-size), calc(100vw - (2 * var(--space-section))));
    max-inline-size: 100%;
    width: 100%;
  }

  .modal-surface {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-block-size: var(--surface-modal-max-block);
    overflow: hidden;
  }

  .modal-header,
  .modal-footer {
    align-items: center;
    display: flex;
    gap: var(--space-related);
    padding: var(--space-section);
  }

  .modal-header { border-block-end: 1px solid var(--border); justify-content: space-between; }
  .modal-footer { border-block-start: 1px solid var(--border); justify-content: flex-end; }
  .modal-body { display: grid; gap: var(--space-cluster); min-block-size: 0; padding: var(--space-section); scroll-padding-block: var(--surface-focus-scroll-padding); }
  .modal-title { font-size: var(--type-size-control); font-weight: var(--type-weight-strong); }
  .modal-description { color: var(--text-sec); }

  .modal-close-button { inline-size: var(--control-height); padding: 0; }

  .restore-version-meta { margin: 0; }
  .external-file-conflict-actions { flex-wrap: wrap; }
  .shortcut-row { align-items: center; display: grid; gap: var(--space-cluster); grid-template-columns: 1fr auto; }
  .shortcut-row kbd { border: 1px solid var(--border); font-family: var(--font-mono); padding: 2px var(--space-tight); }

  @media (max-width: 599px) {
    .modal {
      inline-size: calc(100vw - (2 * var(--space-cluster)));
    }

    .modal-surface {
      max-block-size: calc(var(--app-viewport-block) - (2 * var(--space-cluster)));
    }
  }
}

@layer components {
  .modal[open] {
    animation: compose-surface-reveal var(--motion-duration-surface) var(--motion-ease-out) backwards;
    transform-origin: top center;
  }

  .modal[open]::backdrop {
    animation: compose-backdrop-reveal var(--motion-duration-surface) var(--motion-ease-standard) backwards;
  }

  .modal[data-modal-policy="sheet"][open] {
    animation-name: compose-sheet-reveal;
  }

  .modal[data-modal-policy="confirm"][open] {
    --motion-distance-surface: 4px;
    transform-origin: center;
  }

  @keyframes compose-backdrop-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .modal[open],
    .modal[open]::backdrop,
    .modal[data-modal-policy="sheet"][open] {
      animation-duration: var(--motion-duration-reduced);
    }
  }
}

@layer surfaces {
/* Publication Preview uses the exact generated PDF blob, not a CSS page clone. */
.publication-preview-dialog { inline-size: min(96vw, 1180px); block-size: min(92vh, 900px); }
.publication-preview-surface { block-size: 100%; min-block-size: 0; }
.publication-preview-header { flex: 0 0 auto; }
.publication-preview-close { --ui-control-block-size: var(--control-height); background: transparent; border-color: transparent; }
.publication-preview-close .modal-button-icon { block-size: 14px; inline-size: 14px; }
.publication-preview-layout { display: grid; grid-template-rows: auto minmax(0, 1fr); min-block-size: 0; flex: 1 1 auto; }
.publication-preview-preflight { border-block-end: 1px solid var(--border); padding: var(--space-related) var(--space-section); background: var(--bg-subtle); }
.publication-preview-preflight-list { display: grid; gap: var(--space-tight); margin: 0; padding-inline-start: 1.1rem; }
.publication-preview-preflight-item { color: var(--text-sec); font-size: var(--type-size-meta); line-height: var(--type-line-body); }
.publication-preview-preflight-item.is-error { color: var(--danger-text); }
.publication-preview-preflight-item.is-warning { color: var(--text); }
.publication-preview-preflight-recommendation { color: var(--text-sec); }
.publication-preview-page-stack-shell { position: relative; min-inline-size: 0; min-block-size: 0; block-size: 100%; background: var(--bg-canvas); }
.publication-preview-page-stack-status { position: absolute; z-index: 1; inset: var(--space-related) auto auto 50%; transform: translateX(-50%); max-inline-size: calc(100% - (2 * var(--space-section))); padding: var(--space-tight) var(--space-related); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--bg); color: var(--text-sec); font-size: var(--type-size-meta); box-shadow: none; }
.publication-preview-page-stack-status[data-state="error"] { color: var(--danger-text); }
.publication-preview-page-stack-viewport { block-size: 100%; min-block-size: 68vh; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--space-section); outline: none; }
.publication-preview-page-stack-viewport:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(-1 * var(--focus-ring-width)); }
.publication-preview-pages { display: grid; justify-items: center; gap: var(--space-section); min-inline-size: 0; }
.publication-preview-page { inline-size: min(100%, 900px); min-inline-size: 0; }
.publication-preview-page-paper { position: relative; inline-size: 100%; overflow: hidden; background: var(--surface-document-paper); border: 1px solid var(--border); box-shadow: none; }
.publication-preview-page-surface { position: absolute; inset: 0; display: grid; place-items: center; }
.publication-preview-page-canvas { display: block; max-inline-size: 100%; block-size: auto; margin: 0 auto; }
@media (max-width: 760px) {
  /* Phone Preview is pinned to the governed visual viewport instead of 100vh.
     Mobile browser chrome can make the layout viewport taller than the area a
     customer can actually reach, which previously pushed the header/Close
     control above the visible screen. */
  .modal.publication-preview-dialog {
    position: fixed;
    inset: auto;
    top: var(--app-visual-viewport-offset-top);
    left: var(--app-visual-viewport-offset-left);
    width: var(--app-visual-viewport-inline);
    height: var(--app-visual-viewport-block);
    inline-size: var(--app-visual-viewport-inline);
    block-size: var(--app-visual-viewport-block);
    max-width: var(--app-visual-viewport-inline);
    max-height: var(--app-visual-viewport-block);
    max-inline-size: var(--app-visual-viewport-inline);
    max-block-size: var(--app-visual-viewport-block);
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: none;
    margin: 0;
  }
  .publication-preview-surface { max-block-size: none; border-radius: var(--radius-none); }
  .publication-preview-header {
    position: relative;
    z-index: 3;
    min-block-size: var(--touch-target);
    padding: var(--space-related) var(--space-section);
    background: var(--surface-floating);
  }
  .publication-preview-close {
    --ui-control-block-size: var(--touch-target);
    min-inline-size: var(--touch-target);
    min-block-size: var(--touch-target);
  }
  .publication-preview-layout { overflow: hidden; }
  .publication-preview-preflight { max-block-size: min(22vh, 180px); overflow: auto; }
  .publication-preview-page-stack-viewport { min-block-size: 0; padding: var(--space-related); }
  .publication-preview-pages { gap: var(--space-related); }
}

}

@layer surfaces {
  /* Version History uses the exact same PDF page-stack renderer as Publication
     Preview. Only snapshot metadata and Restore/Duplicate actions are specific
     to history; page geometry, canvas rendering, responsive behaviour, and PDF
     pagination all come from the shared publication preview path. */
  .version-preview-layout { min-block-size: 0; }

  .version-preview-meta-bar {
    align-items: start;
    display: grid;
    gap: var(--space-tight);
  }

  .version-preview-meta { margin: 0; }
  .version-preview-page-stack-shell { min-block-size: 0; }
  .version-preview-viewport { min-block-size: 0; }
  .version-preview-pages { min-block-size: 100%; }
  .version-preview-actions { flex: 0 0 auto; flex-wrap: wrap; }

  @media (max-width: 760px) {
    .version-preview-meta-bar { max-block-size: min(18vh, 132px); overflow: auto; }
    .version-preview-viewport { padding: var(--space-related); }
  }
}

/* css/surfaces/notice.css */
@layer surfaces {
  .notice-region {
    --notification-center-inline: var(--writing-space-center-inline);
    --notification-edge-gap: var(--space-section);
    --notice-mobile-edge-gap: clamp(var(--space-section), 5vw, calc(var(--space-section) + var(--space-related)));
    --notice-inline-size: min(420px, calc(100vw - (2 * var(--notification-edge-gap))));
    --toast-inline-size: min(380px, calc(100vw - (2 * var(--notification-edge-gap))));
    --notification-lower-anchor-top: min(var(--floating-toolbar-screen-top, 100vh), var(--floating-anchored-editing-surface-top, 100vh));
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: var(--z-toast);
  }

  .notice-stack,
  .toast-region {
    display: grid;
    left: var(--notification-center-inline);
    pointer-events: none;
    position: fixed;
    right: auto;
    transform: translateX(-50%);
  }

  .notice-stack {
    gap: var(--space-cluster);
    inline-size: var(--notice-inline-size);
    inset-block-start: calc(var(--topbar-h) + var(--notification-edge-gap));
  }

  .toast-region {
    --toast-state-mark: var(--status-info);
    bottom: auto;
    gap: var(--space-related);
    inline-size: var(--toast-inline-size);
    inset-block-start: calc(var(--notification-lower-anchor-top) - var(--space-related));
    justify-items: center;
    transform: translateX(-50%) translateY(-100%);
  }
  .toast-region:empty { display: none; }

  /* Notifications share the same live writing-space centre axis as the
     formatting toolbar. Persistent/actionable notices use the upper lane;
     transient toasts use the lower interaction-adjacent lane. */
  .notice,
  .notice-surface {
    color: var(--text);
    display: grid;
    gap: var(--space-cluster);
    max-inline-size: var(--notice-inline-size, min(420px, calc(100vw - 32px)));
  }

  .toast {
    color: var(--text);
    display: grid;
    max-inline-size: min(100%, var(--toast-inline-size));
  }

  .notice,
  .toast {
    overflow: hidden;
    padding: 0;
    pointer-events: auto;
  }

  .notice { order: 10; }
  .notice-loading { order: 0; }

  :where(.notice, .toast) {
    box-shadow: none;
  }

  .notice-surface {
    display: grid;
    gap: var(--space-cluster);
    min-inline-size: 0;
    padding: var(--space-cluster);
  }

  .notice-language-surface {
    gap: 0;
    overflow: hidden;
    padding: 0;
  }

  .notice-language-media {
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    margin: 0;
    min-inline-size: 0;
    overflow: hidden;
  }

  .notice-language-media[hidden] { display: none; }

  .notice-language-image {
    block-size: 100%;
    display: block;
    inline-size: 100%;
    object-fit: cover;
    object-position: center 54%;
  }

  .notice-language-body {
    display: grid;
    gap: var(--space-cluster);
    min-inline-size: 0;
    padding: var(--space-cluster);
  }


  .notice-copy {
    display: grid;
    gap: var(--space-tight);
    min-inline-size: 0;
  }

  .notice-title {
    color: var(--text);
    font-size: var(--type-size-control);
    font-weight: var(--type-weight-strong);
    line-height: var(--type-line-heading);
    margin: 0;
  }

  .notice-message {
    color: var(--text-muted);
    font-size: var(--type-size-control);
    line-height: var(--type-line-body);
    margin: 0;
  }

  .notice-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-related);
    justify-content: flex-end;
  }

  .notice-primary-button,
  .notice-secondary-button,
  .notice-dismiss-button {
    padding-inline: var(--space-cluster);
  }

  .notice-dismiss-button {
    inline-size: auto;
    min-inline-size: var(--control-block-size);
  }

  .toast {
    align-items: center;
    column-gap: var(--space-related);
    font-weight: var(--type-weight-strong);
    grid-template-columns: auto minmax(0, 1fr);
    inline-size: fit-content;
    line-height: var(--type-line-control);
    padding: var(--space-related) var(--space-section);
  }

  .toast::before {
    block-size: 6px;
    background: var(--toast-state-mark);
    border-radius: var(--radius-full);
    box-shadow: none;
    content: '';
    inline-size: 6px;
  }

  .toast-info { --toast-state-mark: var(--status-info); }
  .toast-success { --toast-state-mark: var(--status-success); }
  .toast-warning { --toast-state-mark: var(--status-warning); }
  .toast-error { --toast-state-mark: var(--status-danger); }


  .compose-account-flow-dialog {
    --account-flow-inline-size: min(620px, calc(100vw - (2 * var(--space-section))));
    --account-flow-viewport-gap: var(--space-section);
    --motion-transform-base: translateX(-50%);
    background: transparent;
    border: 0;
    color: var(--text);
    inline-size: var(--account-flow-inline-size);
    inset-block-start: calc(var(--topbar-h) + var(--account-flow-viewport-gap));
    left: 50%;
    margin: 0;
    max-block-size: calc(var(--app-viewport-block) - var(--topbar-h) - var(--floating-chrome-plate-block-size) - (2 * var(--account-flow-viewport-gap)));
    max-inline-size: var(--account-flow-inline-size);
    overflow: visible;
    padding: 0;
    pointer-events: auto;
    position: fixed;
    transform: var(--motion-transform-base);
    z-index: calc(var(--z-toast) + 1);
  }

  .compose-account-flow-dialog::backdrop { background: transparent; }

  .compose-checkout-dialog {
    -webkit-backdrop-filter: blur(24px) saturate(1.08);
    backdrop-filter: blur(24px) saturate(1.08);
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    box-shadow: none;
    color: var(--text);
    display: grid;
    gap: var(--space-related);
    inline-size: 100%;
    max-block-size: inherit;
    overflow: hidden;
    overscroll-behavior: contain;
    padding: var(--space-cluster);
  }

  .compose-account-dialog { grid-template-rows: auto auto minmax(0, auto); }

  .compose-account-flow-dialog :where(.compose-account-title,
                                        .compose-account-flow-copy,
                                        .compose-account-flow-feedback) { margin: 0; }

  .compose-account-flow-dialog .compose-account-title { letter-spacing: var(--type-tracking-heading); }
  .compose-account-flow-dialog .compose-account-flow-copy { color: var(--text-sec); }
  .compose-account-flow-dialog :where(.compose-account-flow-form,
                                        .compose-account-flow-field) { display: grid; gap: var(--space-tight); }
  .compose-account-flow-dialog .compose-account-flow-form { gap: var(--space-related); }
  .compose-account-flow-dialog .compose-account-flow-field { color: var(--text); font-size: var(--type-size-control); font-weight: var(--type-weight-regular); }
  .compose-account-flow-dialog .compose-account-flow-input {
    padding-block: var(--space-related);
  }
  .compose-account-flow-dialog .compose-account-flow-feedback { font-size: var(--type-size-control); line-height: var(--type-line-control); margin: 0; }
  .compose-account-flow-dialog .compose-account-flow-feedback.is-error { color: var(--danger); }
  .compose-account-flow-dialog .compose-account-flow-feedback.is-status { color: var(--text-sec); }
  .compose-account-flow-dialog .compose-account-flow-actions { border-block-start: 1px solid var(--border); padding-block-start: var(--space-related); }
  .compose-account-flow-dialog .compose-account-flow-button { min-inline-size: max-content; }

  @media (max-height: 520px) and (orientation: landscape) {
    .compose-account-flow-dialog { --account-flow-viewport-gap: var(--space-related); }
    .compose-checkout-dialog { padding: var(--space-related); }
    .compose-account-flow-dialog .compose-account-flow-copy { display: none; }
  }



  :root[data-keyboard-visible="true"] .compose-account-flow-dialog {
    --account-flow-viewport-gap: var(--space-related);
    inset-block-start: calc(var(--account-flow-visual-top, 0px) + var(--space-related));
    max-block-size: calc(var(--account-flow-visual-height, var(--app-keyboard-safe-block)) - (2 * var(--space-related)));
  }

  @media (max-width: 420px) {
    .compose-checkout-dialog {
      gap: var(--space-related);
      padding: var(--space-related);
    }

    .compose-account-flow-dialog .compose-account-flow-form { gap: var(--space-related); }
    .compose-account-flow-dialog .compose-account-flow-actions { gap: var(--space-tight); }
  }

  @media (forced-colors: active) {
    .toast {
      background: Canvas;
      border-color: CanvasText;
      box-shadow: none;
      color: CanvasText;
    }

    .toast::before {
      background: CanvasText;
      box-shadow: none;
    }
  }

  /* Touch-first layouts use the live visual writing-space centre. Vertical
     notification occupancy is measured from the rendered toolbar and any open
     anchored editing surface, so keyboard and inspector geometry share one
     coordinate source instead of parallel breakpoint formulas. */
  @media (pointer: coarse) and (max-width: 1280px) {
    .notice-region { --notification-center-inline: var(--writing-space-visual-center-inline); }
  }

  @media (max-width: 640px) {
    .notice-region {
      --notification-edge-gap: var(--notice-mobile-edge-gap);
      --notice-inline-size: auto;
      --toast-inline-size: auto;
    }

    .notice-stack,
    .toast-region {
      inline-size: calc(100vw - (2 * var(--notice-mobile-edge-gap)));
      left: var(--notification-center-inline);
      right: auto;
    }

    .notice-stack {
      inset-block-start: calc(var(--topbar-h) + var(--notice-mobile-edge-gap));
    }

    .notice,
    .notice-surface { max-inline-size: none; }
    .toast { max-inline-size: 100%; }

    .notice-surface { padding: var(--space-cluster); }

    .notice-language-body {
      gap: var(--space-related);
      padding: var(--space-related) var(--space-cluster) var(--space-cluster);
    }

    .notice-copy { gap: calc(var(--space-tight) / 2); }

    .notice-actions { gap: var(--space-related); }

    .compose-account-flow-dialog {
      --account-flow-inline-size: min(520px, calc(var(--account-flow-visual-width, 100vw) - (2 * var(--notice-mobile-edge-gap))));
      --motion-transform-base: translateX(-50%);
      bottom: auto;
      inline-size: var(--account-flow-inline-size);
      inset-block-start: calc(var(--account-flow-visual-top, 0px) + var(--notice-mobile-edge-gap));
      left: calc(var(--account-flow-visual-left, 0px) + (var(--account-flow-visual-width, 100vw) / 2));
      max-block-size: calc(var(--account-flow-visual-height, var(--app-keyboard-safe-block)) - (2 * var(--notice-mobile-edge-gap)));
      max-inline-size: var(--account-flow-inline-size);
      right: auto;
      transform: var(--motion-transform-base);
    }

    .compose-checkout-dialog {
      max-block-size: inherit;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--space-cluster);
    }

    .compose-account-flow-dialog .compose-account-flow-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      justify-content: stretch;
    }

    .compose-account-flow-dialog .compose-account-flow-button {
      inline-size: 100%;
      min-inline-size: 0;
    }
  }

  @media (max-height: 560px) and (orientation: landscape) {
    .notice-region {
      --notice-inline-size: min(560px, calc(100vw - (2 * var(--notice-mobile-edge-gap))));
      --toast-inline-size: min(420px, calc(100vw - (2 * var(--notice-mobile-edge-gap))));
    }

    .notice-stack {
      gap: var(--space-tight);
      inset-block-start: calc(var(--topbar-h) + var(--space-related));
    }

    .notice,
    .notice-surface { max-inline-size: var(--notice-inline-size); }
    .toast { max-inline-size: var(--toast-inline-size); }

    .notice-surface { padding: var(--space-related); }

    .notice-language-surface {
      align-items: start;
      grid-template-columns: minmax(180px, 40%) minmax(0, 1fr);
      padding: 0;
    }

    .notice-language-media {
      align-self: stretch;
      aspect-ratio: 16 / 9;
    }

    .notice-language-body {
      gap: var(--space-related);
      padding: var(--space-related);
    }

    .notice-copy { gap: 2px; }

    .notice-title { line-height: var(--type-line-heading); }
    .notice-message { line-height: var(--type-line-body); }

    .notice-actions {
      gap: var(--space-tight);
      justify-content: flex-start;
    }

    .notice-primary-button,
    .notice-secondary-button,
    .notice-dismiss-button { padding-inline: var(--space-related); }

    .compose-account-flow-dialog {
      --account-flow-inline-size: min(520px, calc(var(--account-flow-visual-width, 100vw) - (2 * var(--notice-mobile-edge-gap))));
      --motion-transform-base: translateX(-50%);
      bottom: auto;
      inline-size: var(--account-flow-inline-size);
      inset-block-start: calc(var(--account-flow-visual-top, 0px) + var(--notice-mobile-edge-gap));
      left: calc(var(--account-flow-visual-left, 0px) + (var(--account-flow-visual-width, 100vw) / 2));
      max-block-size: calc(var(--account-flow-visual-height, var(--app-keyboard-safe-block)) - (2 * var(--notice-mobile-edge-gap)));
      max-inline-size: var(--account-flow-inline-size);
      right: auto;
      transform: var(--motion-transform-base);
    }

    .compose-checkout-dialog { padding: var(--space-cluster); }

  }

  @media (max-height: 430px) and (orientation: landscape) {
    .notice-region { --notice-inline-size: min(520px, calc(100vw - (2 * var(--notice-mobile-edge-gap)))); }

    .notice-language .notice-message { display: none; }

    .notice-language-body { gap: var(--space-tight); }
  }
}

@layer components {
  .notice:not([hidden]),
  .toast,
  .compose-account-flow-dialog[open] {
    animation: compose-surface-reveal var(--motion-duration-surface) var(--motion-ease-out) backwards;
    transform-origin: top center;
  }

  .toast.ui-motion-dismiss {
    animation: compose-surface-dismiss var(--motion-duration-exit) var(--motion-ease-in) both;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .notice:not([hidden]),
    .toast,
    .compose-account-flow-dialog[open] { animation-duration: var(--motion-duration-reduced); }
  }
}

@layer components {
  /* Compact sidebars are bottom sheets. Notices should not sit above the sheet
     and steal touch scroll from the active panel. They stay in the app stack,
     but the sheet owns interaction until it closes. */
  :root[data-sidebar-open="true"][data-sidebar-mode="compact"] .notice-region {
    z-index: calc(var(--z-sidebar) - 1);
  }
}

@layer surfaces {
  @media (max-width: 420px) {
    .compose-account-flow-dialog .compose-account-flow-actions {
      grid-template-columns: minmax(0, 1fr);
    }
  }

}

/* css/3-editor.css */
@layer editor {
/* ═══════════════════════════════════════════════════════════════════════════
   Tolstoy Compose — Editor
   Current continuous writing surface and remaining-canvas geometry.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --editor-writing-comfort-bottom: clamp(160px, 22vh, 240px);
  --editor-page-end-breathing-room: clamp(180px, 26vh, 300px);
  --editor-paper-end-breathing-room: clamp(160px, 20vh, 240px);
  --editor-paper-inline-padding: clamp(48px, 7vw, 76px);
  --editor-continuous-column-max: calc(var(--ed-line-width) + 160px);
  --editor-continuous-workspace-bg: var(--surface-canvas);
  --editor-continuous-workspace-divider: var(--surface-workspace-divider);
  --editor-paper-boundary: var(--surface-document-boundary);
  --editor-notes-section-gap: max(2rem, calc(var(--ed-paragraph-spacing) * 3));
  --editor-notes-rule-gap: max(1rem, calc(var(--ed-paragraph-spacing) * 1.5));
  --editor-notes-block-gap: max(1.25rem, calc(var(--ed-paragraph-spacing) * 1.5));
}

@media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
  :root {
    --editor-writing-comfort-bottom: clamp(120px, 18vh, 190px);
    --editor-page-end-breathing-room: clamp(160px, 24vh, 260px);
    --editor-paper-end-breathing-room: clamp(120px, 18vh, 190px);
    --editor-paper-inline-padding: 24px;
  }
}

#editor-viewport {
  background: var(--editor-continuous-workspace-bg);
  border-block-start: 1px solid var(--editor-continuous-workspace-divider);
  container-name: editor;
  container-type: inline-size;
  flex: 1 1 0;
  min-block-size: 0;
  overflow-x: hidden;
  overscroll-behavior-block: contain;
  position: relative;
  scroll-padding-block: calc(var(--topbar-h) + var(--surface-focus-scroll-padding)) calc(var(--floating-toolbar-reserve) + var(--editor-writing-comfort-bottom));
}

/* In every non-compact shell the full-width app boundary owns the window
   separator. The editor must not draw a second canvas-width seam that shrinks
   when a persistent or narrow sidebar opens. Tauri keeps the same ownership
   even if a very small native window resolves to compact mode. */
:root:is([data-sidebar-mode="persistent"], [data-sidebar-mode="narrow"]) #editor-viewport,
:root[data-compose-runtime="tauri"] #editor-viewport {
  border-block-start-color: transparent;
}

#editor-viewport[aria-busy="true"] { cursor: progress; }

.document-loading-shell {
  align-items: start;
  background: var(--editor-continuous-workspace-bg);
  display: grid;
  inset: 0;
  justify-items: center;
  overflow: hidden;
  padding: clamp(104px, 16vh, 176px) clamp(24px, 5vw, 72px) 40px;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}

.document-loading-shell[hidden],
:root[data-document-load-state="idle"] .document-loading-shell,
:root[data-document-load-state="ready"] .document-loading-shell,
:root[data-document-load-state="failed"] .document-loading-shell {
  display: none;
}

.document-loading-shell-surface {
  display: grid;
  gap: 14px;
  inline-size: min(100%, 420px);
  text-align: center;
}

.document-loading-shell-title {
  color: var(--text);
  font-size: var(--type-size-control);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.document-loading-shell-progress {
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  border-radius: var(--radius-full);
  block-size: 3px;
  inline-size: 100%;
  overflow: hidden;
  position: relative;
}

.document-loading-shell-progress-value {
  animation: document-loading-shell-progress 1250ms var(--motion-ease-emphasized) infinite;
  background: var(--accent-foreground);
  border-radius: inherit;
  block-size: 100%;
  display: block;
  inline-size: 38%;
  transform: translateX(-140%);
}

@keyframes document-loading-shell-progress {
  from { transform: translateX(-140%); }
  to { transform: translateX(365%); }
}

.document-loading-recovery-actions {
  display: flex;
  justify-content: center;
  margin-block-start: 2px;
  pointer-events: auto;
}

.document-loading-recovery-actions[hidden] { display: none; }

.document-loading-recovery-button {
  padding-inline: var(--space-cluster);
}

.document-loading-recovery-button:disabled { cursor: progress; }

#editor-viewport[data-document-switching="true"],
#editor-viewport[data-selection-dragging="true"] {
  overflow-anchor: none;
  scroll-behavior: auto;
}

#editor-stage {
  align-content: stretch;
  box-sizing: border-box;
  display: grid;
  inline-size: 100%;
  justify-items: center;
  min-block-size: 100%;
  padding-block: 0;
  padding-inline: clamp(20px, 4vw, 56px);
  row-gap: 0;
  transition:
    padding-left var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
    padding-right var(--motion-duration-panel-sheet) var(--motion-ease-emphasized);
}

/* Reserve the real writing-stage geometry during workspace restoration, but do
   not expose it to first paint until two settled layout frames have completed.
   Visibility preserves layout, unlike display:none, while preventing the
   editor paper's initial 0px -> final width calculation from becoming CLS. */
#editor-stage[data-first-paint-stable="false"] { visibility: hidden; }

/* The document is a matte member of the same warm-neutral surface family as
   the toolbar and sidebar. Only quiet vertical boundaries distinguish it from
   the workspace, so it remains continuous rather than reading as a page. */
#editor-paper,
#editor-paper:focus-within {
  animation: editor-continuous-reveal var(--motion-duration-panel-sheet) var(--motion-ease-out) both;
  background-color: var(--doc-editor-bg);
  background-image: none;
  border: 0;
  border-inline: 1px solid var(--editor-paper-boundary);
  border-radius: var(--radius-none);
  box-shadow: none;
  max-width: var(--editor-continuous-column-max);
  min-height: 100%;
  padding: clamp(56px, 7vw, 80px) 0 var(--editor-paper-end-breathing-room);
  padding-block-end: calc(var(--floating-toolbar-reserve) + var(--editor-paper-end-breathing-room));
  position: relative;
  transition:
    opacity var(--motion-duration-surface) var(--motion-ease-out),
    padding-left var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
    padding-right var(--motion-duration-panel-sheet) var(--motion-ease-emphasized);
  width: 100%;
  cursor: text;
}

#editor-paper[data-surface-replacing="true"] { opacity: .74; }

@keyframes editor-continuous-reveal {
  from { opacity: .94; }
  to { opacity: 1; }
}

@media (min-width: 1080px) and (pointer: fine) {
  .topbar-action-rail {
    flex: 0 1 auto;
    inline-size: min(
      var(--ed-line-width),
      calc(100vw - var(--sidebar-occupied-left) - var(--sidebar-occupied-right) - (2 * var(--space-section)))
    );
    max-inline-size: var(--ed-line-width);
    transform: translateX(var(--sidebar-available-center-offset));
    /* The available width snaps to its final reservation with the canvas;
       only compositor-safe centring motion is animated. */
    transition: transform var(--motion-duration-panel-sheet) var(--motion-ease-emphasized);
  }
}

/* Desktop and tablet share one continuous vertical writing-plane geometry.
   The plane reaches the viewport edges while its content keeps a deliberate
   internal reading inset; topbar and toolbar use the remaining-canvas offset. */


@media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
  .document-loading-shell {
    background: var(--doc-editor-bg);
    padding-block-start: max(104px, calc(var(--topbar-h) + 48px));
    padding-inline: 24px;
  }

  #editor-viewport {
    background: var(--doc-editor-bg);
    border-block-start-color: transparent;
  }


  #editor-stage {
    padding-block-start: max(56px, calc(var(--topbar-h) + var(--space-cluster)));
    padding-inline: 0;
    row-gap: var(--space-section);
  }

  #editor-paper,
  #editor-paper:focus-within {
    background: var(--doc-editor-bg);
    border: 0;
    border-radius: var(--radius-none);
    max-width: 100%;
    padding: 0 0 var(--editor-paper-end-breathing-room);
    padding-block-end: calc(var(--floating-toolbar-reserve) + var(--editor-paper-end-breathing-room));
  }

  #editor-paper::before,
  #editor-paper::after { content: none; }
}

@container editor (max-width: 560px) {
  #editor-viewport { --editor-paper-inline-padding: clamp(20px, 6cqi, 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .document-loading-shell-progress-value {
    animation: none;
    transform: translateX(82%);
  }

  #editor-paper,
  #editor-paper:focus-within {
    animation: none;
    transition-duration: var(--motion-duration-reduced);
  }

  .topbar-action-rail,
  #editor-stage {
    transition-duration: var(--motion-duration-reduced);
  }
}

/* Keep editor scrolling native. The app shell is fixed, but the scrollable
   container itself owns browser-default panning; the paper/content should not
   constrain touch gestures. */
#editor-paper,
.ProseMirror {
  touch-action: auto;
}

/* ── ProseMirror root ────────────────────────────────────────────────── */
.ProseMirror {
  box-sizing: border-box;
  inline-size: 100%;
  max-width: none;
  margin: 0;
  outline: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-user-select: text;
  user-select: text;
}

/* Document-column geometry belongs only to the primary writing paper. Auxiliary
   ProseMirror surfaces such as Shelf own their own typography, height and inline
   insets and must never inherit the document's line-width gutters. */
#editor-paper .ProseMirror {
  font-family: var(--ed-body-font);
  font-size: var(--ed-font-size);
  line-height: var(--ed-line-height);
  color: var(--ed-body-color);
  padding-inline: max(
    var(--editor-paper-inline-padding),
    calc(50% - var(--ed-line-half-width))
  );
  min-block-size: max(12rem, calc(var(--app-editor-paper-min-block-size) - var(--editor-paper-end-breathing-room)));
}

/* Hyphenation off — toggled via appearance panel */
[data-hyphenation="off"] .ProseMirror {
  hyphens: none;
}

.ProseMirror > :first-child {
  margin-block-start: 0;
}

#editor-paper {
  scroll-margin-block-start: var(--surface-focus-scroll-padding);
}

.ProseMirror :where(h1, h2, h3, h4, h5, h6, [data-node-id], [data-review-id], .review-anchor, .citation-ref, mark) {
  scroll-margin-block-start: calc(var(--topbar-h) + calc(var(--space-section) + var(--space-tight)));
  scroll-margin-block-end: calc(var(--floating-toolbar-reserve) + var(--editor-writing-comfort-bottom));
}

/* ── Placeholder ─────────────────────────────────────────────────────── */
.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--text-muted);
  pointer-events: none;
  height: 0;
  font-style: italic;
}

/* ── Headings ────────────────────────────────────────────────────────── */
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
  font-family: var(--ed-heading-font);
  letter-spacing: -0.02em;
  line-height: var(--ed-line-height);
  margin-block: 0 var(--ed-paragraph-spacing);
}

.ProseMirror h1 { color: var(--doc-heading-primary); font-size: var(--ed-h1-size); font-weight: 400; }
.ProseMirror h2 { color: var(--doc-heading-primary); font-size: var(--ed-h2-size); font-weight: 400; }
.ProseMirror h3 { color: var(--doc-heading-secondary); font-size: var(--ed-h3-size); font-weight: 400; }
.ProseMirror h4 { color: var(--doc-heading-secondary); font-size: var(--ed-h4-size); font-weight: 400; }
.ProseMirror h5 { color: var(--doc-heading-tertiary); font-size: var(--ed-h5-size); font-weight: 400; }
.ProseMirror h6 { color: var(--doc-heading-tertiary); font-size: var(--ed-h6-size); font-weight: 400; font-style: italic; letter-spacing: 0; }

.ProseMirror > :first-child:is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* ── Paragraphs ──────────────────────────────────────────────────────── */
.ProseMirror p { margin-block: 0 var(--ed-paragraph-spacing); }
.ProseMirror p:last-child { margin-block-end: 0; }

.ProseMirror :where(p, h1, h2, h3, h4, h5, h6)[data-indent="1"] { margin-inline-start: 28px; }
.ProseMirror :where(p, h1, h2, h3, h4, h5, h6)[data-indent="2"] { margin-inline-start: 56px; }
.ProseMirror :where(p, h1, h2, h3, h4, h5, h6)[data-indent="3"] { margin-inline-start: 84px; }
.ProseMirror :where(p, h1, h2, h3, h4, h5, h6)[data-indent="4"] { margin-inline-start: 112px; }
.ProseMirror :where(p, h1, h2, h3, h4, h5, h6)[data-indent="5"] { margin-inline-start: 140px; }
.ProseMirror :where(p, h1, h2, h3, h4, h5, h6)[data-indent="6"] { margin-inline-start: 168px; }

/* ── Lists ───────────────────────────────────────────────────────────── */
.ProseMirror ul,
.ProseMirror ol {
  padding-left: 1.6em;
  margin-block: 0 var(--ed-paragraph-spacing);
}

.ProseMirror li { margin-block-end: calc(var(--ed-paragraph-spacing) * 0.3125); }
.ProseMirror li p { margin-block-end: calc(var(--ed-paragraph-spacing) * 0.25); }

/* ── Blockquote ──────────────────────────────────────────────────────── */
.ProseMirror blockquote {
  border-left: 3px solid var(--doc-heading-primary);
  margin-block: var(--editor-notes-block-gap);
  margin-inline: 0;
  padding: 0.2em 0 0.2em 1.2em;
  color: var(--text-sec);
  font-style: italic;
}

/* ── Code ────────────────────────────────────────────────────────────── */
.ProseMirror code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--fill-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-detail);
  padding: 0.1em 0.4em;
}

.ProseMirror pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--fill-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 1em 1.2em;
  overflow-x: auto;
  margin-block-end: max(0.75rem, var(--ed-paragraph-spacing));
}

.ProseMirror pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* ── Horizontal rule ─────────────────────────────────────────────────── */
.ProseMirror hr {
  border: none;
  border-top: 1px solid var(--border-strong);
  margin-block: calc(var(--ed-paragraph-spacing) * 2.5);
  margin-inline: 0;
}


/* ── Publication breaks ──────────────────────────────────────────────── */
.ProseMirror .compose-publication-break {
  align-items: center;
  color: var(--text-ter);
  cursor: pointer;
  display: flex;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  gap: 0.65rem;
  letter-spacing: 0.02em;
  margin-block: calc(var(--ed-paragraph-spacing) * 1.8);
  min-block-size: 2rem;
  user-select: none;
}

.ProseMirror .compose-publication-break-rule {
  border-top: 1px dashed var(--border-strong);
  flex: 1 1 auto;
  min-inline-size: 1rem;
}

.ProseMirror .compose-publication-break-label {
  flex: 0 1 auto;
  max-inline-size: min(70%, 36rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProseMirror .compose-publication-break.ProseMirror-selectednode {
  border-radius: var(--radius-control);
  color: var(--text);
  outline: 2px solid var(--accent-border-strong);
  outline-offset: 4px;
}

/* ── Links ───────────────────────────────────────────────────────────── */
.ProseMirror a {
  color: var(--doc-link-color);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (hover: hover) {
  .ProseMirror a:hover { text-decoration-thickness: 2px; }
}

/* ── Local review anchors ───────────────────────────────────────────────
   Review marks remain durable document data, while ProseMirror decorations
   own current, attention, kind, and status presentation. */
.ProseMirror .compose-review-decoration:where([data-review-visible="true"], :not([data-review-status])) {
  -webkit-box-decoration-break: clone;
  background-color: var(--doc-review-anchor-bg);
  border-radius: 2px;
  box-decoration-break: clone;
  cursor: pointer;
  padding-inline: .04em;
  text-decoration-line: underline;
  text-decoration-color: var(--doc-review-anchor-underline);
  text-decoration-skip-ink: none;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .16em;
}

@media (hover: hover) {
  .ProseMirror .compose-review-decoration:where([data-review-visible="true"], :not([data-review-status])):hover {
    background-color: var(--doc-review-anchor-hover-bg);
  }
}

.ProseMirror .compose-review-decoration[data-review-current="true"] {
  background-color: var(--doc-review-anchor-current-bg);
  text-decoration-color: var(--doc-review-anchor-current-underline);
  text-decoration-thickness: 2px;
}

.ProseMirror .compose-review-decoration[data-review-attention="true"] {
  background-color: color-mix(in srgb, var(--status-warning) 12%, transparent);
  text-decoration-color: var(--status-warning);
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}

/* ── Strong / em ─────────────────────────────────────────────────────── */
.ProseMirror strong { font-weight: 700; }
.ProseMirror em { font-style: italic; }
.ProseMirror s { text-decoration: line-through; color: var(--text-sec); }
.ProseMirror u { text-decoration: underline; text-underline-offset: 4px; }

/* ── Highlight ───────────────────────────────────────────────────────── */
.ProseMirror mark {
  /* Compose owns highlight treatment so the same document stays coherent in
     light and dark appearance, including imported multicolour marks. */
  background-color: var(--doc-highlight-bg) !important;
  color: var(--doc-highlight-text) !important;
  border-radius: 2px;
  padding: 0.05em 0.1em;
}

/* ── Images ──────────────────────────────────────────────────────────── */
.ProseMirror img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-control);
  margin: calc(var(--ed-paragraph-spacing) * 1.5) auto;
  cursor: pointer;
}

/* Selected image ring */
.ProseMirror img.ProseMirror-selectednode,
.ProseMirror .ProseMirror-selectednode img {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}


/* ── Task lists (stock TipTap ListKit) ─────────────────────────────────
   TipTap serializes task items as li[data-type="taskItem"], but its live
   TaskItem node view renders the editable DOM as ul[data-type="taskList"] > li
   with data-checked and no guaranteed data-type attribute. Keep both selectors
   so editor, saved HTML, print/export shells, and future renderer paths align. */
.ProseMirror ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.ProseMirror ul[data-type="taskList"] > li,
.ProseMirror li[data-type="taskItem"] {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin: 0 0 calc(var(--ed-paragraph-spacing) * 0.4375);
  list-style: none;
}

.ProseMirror ul[data-type="taskList"] > li > label,
.ProseMirror li[data-type="taskItem"] > label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 1.6em;
  user-select: none;
}

.ProseMirror ul[data-type="taskList"] > li > label input[type="checkbox"],
.ProseMirror li[data-type="taskItem"] > label input[type="checkbox"] {
  inline-size: 1em;
  block-size: 1em;
  accent-color: var(--accent);
  margin: 0.2em 0 0;
}

.ProseMirror ul[data-type="taskList"] > li > div,
.ProseMirror li[data-type="taskItem"] > div {
  flex: 1 1 auto;
  min-width: 0;
}

.ProseMirror ul[data-type="taskList"] > li > div > p:first-child,
.ProseMirror li[data-type="taskItem"] > div > p:first-child { margin-top: 0; }
.ProseMirror ul[data-type="taskList"] > li > div > p:last-child,
.ProseMirror li[data-type="taskItem"] > div > p:last-child  { margin-bottom: 0; }

/* ── Governed image sizing ──────────────────────────────────────────
   Images use S/M/L document-relative presets. There are no resize handles
   or freeform drag interactions in the writing surface. */
.ProseMirror img[data-size="s"] { inline-size: 50%; }
.ProseMirror img[data-size="m"] { inline-size: 75%; }
.ProseMirror img[data-size="l"] { inline-size: 100%; }

.ProseMirror [data-image-container][data-node="image"] {
  align-items: center;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  justify-content: center;
  max-inline-size: 100%;
  margin-block: calc(var(--ed-paragraph-spacing) * 1.5);
  margin-inline: auto;
}

.ProseMirror [data-image-container][data-node="image"][data-image-size="s"] { inline-size: 50%; }
.ProseMirror [data-image-container][data-node="image"][data-image-size="m"] { inline-size: 75%; }
.ProseMirror [data-image-container][data-node="image"][data-image-size="l"] { inline-size: 100%; }

.ProseMirror [data-image-container][data-node="image"][data-align="left"] {
  align-items: flex-start;
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.ProseMirror [data-image-container][data-node="image"][data-align="right"] {
  align-items: flex-end;
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.ProseMirror [data-image-container][data-node="image"] img {
  inline-size: 100%;
  margin: 0;
  max-inline-size: 100%;
  block-size: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.ProseMirror [data-image-container][data-node="image"] [data-image-caption] {
  color: var(--text-muted);
  font-size: 0.875em;
  line-height: 1.45;
  margin-block-start: 0.65em;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  padding-inline: 0.25em;
  text-align: center;
  user-select: text;
}

.ProseMirror [data-image-container][data-node="image"] [data-image-credit] {
  color: var(--text-muted);
  font-size: 0.78em;
  line-height: 1.4;
  margin-block-start: 0.3em;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  padding-inline: 0.25em;
  text-align: center;
  user-select: text;
}

/* ── Charts ────────────────────────────────────────────────────────────
   Charts are quiet document objects. The editor renderer is static and
   non-interactive; selection and editing belong to Compose chrome rather than
   the chart surface itself. The local series roles reuse Compose pigments,
   with contrast-tuned light/dark treatments rather than a separate palette. */
.compose-chart-svg {
}

.ProseMirror [data-chart-container][data-node="chart"] {
  box-sizing: border-box;
  cursor: pointer;
  inline-size: 100%;
  margin-block: calc(var(--ed-paragraph-spacing) * 1.5);
  margin-inline: auto;
  max-inline-size: 100%;
  padding: var(--space-cluster);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--doc-editor-bg) 98%, var(--doc-body-color) 2%);
}

@media (hover: hover) {
  .ProseMirror [data-chart-container][data-node="chart"]:hover:not(.ProseMirror-selectednode) {
    border-color: color-mix(in srgb, var(--text) 12%, transparent);
  }
}

.ProseMirror [data-chart-container][data-node="chart"].ProseMirror-selectednode {
  border-color: var(--focus-ring-color);
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.ProseMirror [data-chart-render-host] {
  aspect-ratio: 9 / 5;
  contain: layout paint;
  display: grid;
  inline-size: 100%;
  min-block-size: 0;
  place-items: center;
  pointer-events: none;
  user-select: none;
}

.ProseMirror .compose-chart-svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 100%;
  overflow: visible;
}

.ProseMirror .compose-chart-title {
  fill: var(--doc-heading-primary);
  font-family: var(--ed-font-family);
  font-size: 17px;
  font-weight: 650;
}

.ProseMirror .compose-chart-axis-label,
.ProseMirror .compose-chart-legend-label {
  fill: var(--doc-muted-color);
  font-family: var(--ed-font-family);
  font-size: 11px;
}

.ProseMirror .compose-chart-gridline {
  opacity: 0.82;
  shape-rendering: crispEdges;
  stroke: var(--doc-rule-color);
  stroke-width: 1;
}

.ProseMirror .compose-chart-area {
  opacity: 0.15;
}

.ProseMirror .compose-chart-series-line {
  vector-effect: non-scaling-stroke;
}

.ProseMirror .compose-chart-placeholder {
  fill: var(--doc-fill-muted-color);
  stroke: var(--doc-rule-color);
}

.ProseMirror .compose-chart-placeholder-title {
  fill: var(--doc-muted-color);
  font-family: var(--ed-font-family);
  font-size: 16px;
  font-weight: 600;
}
@media (prefers-contrast: more) {
  .compose-chart-svg :where(.compose-chart-axis-label, .compose-chart-legend-label) {
    fill: var(--text-sec);
  }

  .compose-chart-svg .compose-chart-gridline {
    opacity: 1;
    stroke: var(--border-strong);
  }

  .compose-chart-svg .compose-chart-series-line {
    stroke-width: 3.2;
  }
}

@media (forced-colors: active) {
  .compose-chart-svg :where(.compose-chart-title, .compose-chart-axis-label, .compose-chart-legend-label, .compose-chart-placeholder-title) {
    fill: CanvasText;
  }

  .compose-chart-svg .compose-chart-gridline {
    opacity: 1;
    stroke: GrayText;
  }

  .compose-chart-svg .compose-chart-series-mark {
    forced-color-adjust: none;
  }
}

/* ── Tables ──────────────────────────────────────────────────────────── */
.ProseMirror table {
  border-collapse: collapse;
  width: 100%;
  /* Fixed layout prevents columns exploding as you type — each column
     shares the available width equally rather than growing to fit content */
  table-layout: fixed;
  margin-block-end: var(--ed-paragraph-spacing);
  font-size: 0.9em;
  /* Clip any overflow rather than letting the table break the layout */
  overflow: hidden;
}

.ProseMirror th,
.ProseMirror td {
  border: 1px solid var(--border-strong);
  padding: 0.5em 0.75em;
  vertical-align: top;
  text-align: left;
  /* Words wrap within the fixed-width cell rather than forcing it wider */
  word-break: break-word;
  overflow-wrap: break-word;
  /* Prevent any single cell from ever overflowing its column */
  overflow: hidden;
}

.ProseMirror th {
  background: var(--fill-subtle);
  font-weight: 700;
}

.ProseMirror .selectedCell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--doc-heading-primary) 14%, transparent);
  pointer-events: none;
}

.ProseMirror td, .ProseMirror th { position: relative; }

/* ── Citation nodes ──────────────────────────────────────────────────── */
.citation-ref {
  color: var(--doc-link-color);
  cursor: pointer;
  font-family: var(--font-ui);
}

:root[data-citation-class="note"] .citation-ref {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
}

:root[data-citation-class="in-text"] .citation-ref {
  font-size: inherit;
  vertical-align: baseline;
  line-height: inherit;
}

/* Imported/native manual notes keep their note semantics regardless of the
   document's bibliographic citation class. They remain interactive editor
   atoms, but are presented as note markers rather than link-coloured prose. */
.citation-ref[data-citation-note-placement] {
  color: inherit;
  font-family: inherit;
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
}

@media (hover: hover) {
  .citation-ref:hover { text-decoration: underline; }
}

/* ── Notes section ───────────────────────────────────────────────────── */
#notes-section {
  box-sizing: border-box;
  inline-size: 100%;
  max-width: none;
  margin: var(--editor-notes-section-gap) 0 0;
  padding-inline: max(
    var(--editor-paper-inline-padding),
    calc(50% - var(--ed-line-half-width))
  );
  padding-top: 0;
  font-family: var(--ed-body-font);
  font-size: var(--ed-font-size);
}

/* Notes and bibliography are part of the same reading column as the manuscript.
   Keep the rule inside that content box as well, rather than letting generated
   citation output run to the paper/viewport edge on narrow screens. */
#notes-section:not(:empty)::before {
  background: var(--border);
  block-size: 1px;
  content: '';
  display: block;
  inline-size: 100%;
  margin-block-end: var(--editor-notes-rule-gap);
}

#notes-section:empty { display: none; }

.notes-block { margin: 0; }

.notes-block-label {
  font-size: var(--ed-note-label-size);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: max(0.75rem, var(--ed-paragraph-spacing));
  font-family: var(--font-ui);
}

/* Separator between Footnotes and Endnotes blocks */
.notes-separator {
  height: 1px;
  background: var(--border);
  margin-block: var(--editor-notes-block-gap);
  margin-inline: 0;
}

.note-item {
  font-family: var(--ed-body-font);
  font-size: var(--ed-note-font-size);
  color: var(--text-sec);
  /* Live generated notes follow the document's typography preferences.
     Citation-style publication spacing is applied only in export surfaces. */
  line-height: var(--ed-line-height);
  margin-block-end: calc(var(--ed-paragraph-spacing) * 0.875);
  display: flex;
  gap: 0.5em;
}

.generated-citation-item {
  border-radius: var(--radius-control);
  cursor: pointer;
}

@media (hover: hover) {
  .generated-citation-item:hover { color: var(--text); }
}

.generated-citation-item:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.note-item .note-number {
  color: var(--doc-link-color);
  font-size: 1em;
  flex-shrink: 0;
  min-width: 1.5em;
  cursor: pointer;
}
@media (hover: hover) {
  .note-item .note-number:hover { text-decoration: underline; }
}

.bibliography-item {
  font-family: var(--ed-body-font);
  font-size: var(--ed-note-font-size);
  color: var(--text-sec);
  /* Keep live References / Bibliography / Works Cited aligned with the
     manuscript's chosen line and paragraph spacing. The CSL metadata on the
     wrapper remains available to publication/export renderers. */
  line-height: var(--ed-line-height);
  margin-block-end: calc(var(--ed-paragraph-spacing) * 0.875);
}

.bibliography-hanging-indent .bibliography-item {
  padding-inline-start: 1.5em;
  text-indent: -1.5em;
}

.bibliography-second-field-align .bibliography-item {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.65em;
  padding-inline-start: 0;
  text-indent: 0;
}

.bibliography-first-field {
  white-space: nowrap;
}

.bibliography-second-field {
  min-width: 0;
}

/* Text selection uses the single application-level native selection rule.
   Avoid editor-specific foreground or paint overrides so browser drag,
   high-contrast, and marked-text behaviour remain predictable. */

/* ── Cursor ──────────────────────────────────────────────────────────── */
.ProseMirror-focused { caret-color: var(--accent); }


/* ── Drag and drop ───────────────────────────────────────────────────── */
.ProseMirror .ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}

.ProseMirror .ProseMirror-gapcursor::after {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 2px solid var(--text);
}

.ProseMirror-focused .ProseMirror-gapcursor { display: block; }

/* ── Search highlight — ProseMirror decorations ──────────────────────── */
/* Inline decorations are mapped by ProseMirror transactions and never become
   document content, clipboard payload, or undo history. */
.ProseMirror .compose-search-result {
  background-color: var(--doc-search-result-bg);
  border-radius: 2px;
  box-decoration-break: clone;
  color: inherit;
  -webkit-box-decoration-break: clone;
}

.ProseMirror .compose-search-current {
  background-color: var(--doc-search-current-bg);
}

/* ════════════════════════════════════════════════════════════════════════
   PRINT / PDF EXPORT — strips all app chrome, formats document only
   ════════════════════════════════════════════════════════════════════════ */
@media print {
  /* Hide everything except the document content */
  #sidebar,
  #topbar,
  #toolbar-row,
  #files-export-dropdown,
  #selection-inspector,
  #shortcuts-modal,
  #overlay,
  [role="toolbar"] {
    display: none !important;
  }

  .document-loading-shell { display: none !important; }

  /* Reset the layout */
  html, body, #app, #main, #body, #canvas {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background: var(--doc-print-bg) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #editor-viewport {
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
  }

  #editor-paper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: var(--radius-none) !important;
    background: var(--doc-print-bg) !important;
  }

  #editor {
    padding: 0 !important;
    min-height: auto !important;
  }

  /* Typography — clean for print */
  .ProseMirror {
    font-size: 11pt !important;
    line-height: var(--ed-line-height) !important;
    color: var(--doc-print-text) !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
  }

  .ProseMirror h1 { font-size: 20pt !important; margin: 0 0 12pt !important; }
  .ProseMirror h2 { font-size: 16pt !important; margin: 16pt 0 8pt !important; }
  .ProseMirror h3 { font-size: 13pt !important; margin: 12pt 0 6pt !important; }
  .ProseMirror p  { margin: 0 0 8pt !important; orphans: 3; widows: 3; }

  .ProseMirror a { color: var(--doc-print-text) !important; text-decoration: underline !important; text-underline-offset: 4px !important; }
  .ProseMirror u { text-underline-offset: 4px !important; }
  .ProseMirror :where(.compose-comment-anchor, .compose-review-decoration) {
    background: transparent !important;
    padding-inline: 0 !important;
    text-decoration: none !important;
  }

  /* Avoid breaking inside these */
  .ProseMirror blockquote,
  .ProseMirror pre,
  .ProseMirror table { page-break-inside: avoid; }

  .ProseMirror img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: calc(var(--ed-paragraph-spacing) * 1.5) auto !important;
    float: none !important;
  }

  /* Page margins */
  @page {
    margin: 2cm 2.5cm;
    size: A4;
  }

  /* Hide editor-only search decorations in print. */
  .ProseMirror .compose-search-result,
  .ProseMirror .compose-search-current {
    background-color: transparent !important;
    color: inherit !important;
  }

  /* Notes section */
  #notes-section {
    border-top: 1px solid var(--doc-print-border) !important;
    margin-top: 24pt !important;
    padding-top: 12pt !important;
    font-size: 9pt !important;
    color: var(--doc-print-muted) !important;
  }

  #notes-section:not(:empty)::before { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Touch / mobile ownership — editor
   Editor surface and reading adjustments live with the editor component.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
  #editor-viewport {
    scroll-behavior: auto;
  }

  #editor-paper .ProseMirror {
    font-size: var(--ed-font-size);
    line-height: var(--ed-line-height);
  }
}

:root:is([dir="rtl"]) .ProseMirror {
  direction: rtl;
  text-align: right;
}
}

@layer editor {
  .ProseMirror th,
  .ProseMirror td {
    transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), border-color var(--motion-duration-micro) var(--motion-ease-standard);
  }
}


@layer overrides {
@media (forced-colors: active) {
  #editor-paper,
  #editor-paper:focus-within { background-image: none; }

  #editor-paper::before,
  #editor-paper::after { content: none; }

  .ProseMirror .compose-review-decoration:where([data-review-visible="true"], :not([data-review-status])) {
    background: transparent;
    border-radius: var(--radius-none);
    color: CanvasText;
    forced-color-adjust: auto;
    outline: 0;
    text-decoration-color: Highlight;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }

  .ProseMirror .compose-review-decoration[data-review-current="true"] {
    outline: 1px solid Highlight;
    outline-offset: 1px;
    text-decoration-thickness: 3px;
  }

  .ProseMirror .compose-review-decoration[data-review-attention="true"] {
    text-decoration-color: CanvasText;
    text-decoration-style: dotted;
    text-decoration: underline dotted 2px CanvasText;
    text-underline-offset: 3px;
  }
}

/* Appearance aid: keep review anchors interactive while removing their visual
   fill and underline when the writer chooses a clean reading surface. This
   rule follows dark-mode and forced-colour review styling so the preference
   remains authoritative in every presentation mode. */
:root[data-review-highlights="off"] .ProseMirror :where(.compose-comment-anchor, .compose-review-decoration) {
  background: transparent;
  outline: 0;
  text-decoration: none;
}

}

@layer editor {
  /* Sidebar reservation snaps instead of animating the entire writing plane.
     Animating these geometry properties made every Sidebar click visually take
     the full 240 ms panel-sheet duration even when JavaScript was idle. */
  :root:not([data-sidebar-mode="compact"]) #editor-stage {
    transition: none;
  }

  :root:not([data-sidebar-mode="compact"]) #editor-paper,
  :root:not([data-sidebar-mode="compact"]) #editor-paper:focus-within {
    transition: opacity var(--motion-duration-surface) var(--motion-ease-out);
  }

  @media (min-width: 1080px) and (pointer: fine) {
    :root:not([data-sidebar-mode="compact"]) .topbar-action-rail {
      transition: none;
    }
  }
}