/* ============================================================================
   CRAFTR Web — Application Shell
   ============================================================================

   This file has no extension ancestor. It styles the surfaces that only exist
   because CRAFTR is now a standalone app rather than an overlay injected into
   somebody else's page: the header/nav, the document library, the export bar,
   empty states, the onboarding overlay, the API-key banner and the full-page
   Settings screen.

   RELATIONSHIP TO style.css
   -------------------------
   style.css is loaded into a shadow root (ui.js → adoptedStyleSheets) and
   styles the editor itself. It is NOT loaded into the page. Do not link it from
   index.html — doing so would leak ~4000 lines of editor CSS into the app
   cascade, and several of its rules assume a `:host` that would not exist.

   The seam between the two is CSS custom properties, which are the one thing
   that inherits ACROSS a shadow boundary. The `--craftr-*` tokens declared on
   :root below reach into the editor's shadow root, where style.css consumes
   them as `--bg-primary: var(--craftr-bg-primary, #09090b)` and friends. That
   is how one theme switch retints both the app shell and the editor.

   Because every consumer supplies the original extension value as its var()
   fallback, this file is additive: delete it and the editor still renders
   exactly as it did in the extension.

   CLASS VOCABULARY
   ----------------
   Shell surfaces are prefixed `craftr-app-*` / `craftr-doc-*` to stay clear of
   the editor's own `craftr-*` names. Form controls, lists and accordions reuse
   the popup's existing vocabulary verbatim (`.settings-group`, `.settings-input`,
   `.settings-list-item`, `.toggle-switch`, `.accordion-*`, `.empty-list`, …) so
   Agent E's and Agent F's markup can be lifted from popup.html with minimal
   edits. See NOTES-I.md for the full list of hooks this file expects.
   ============================================================================ */


/* ============================================================================
   1. THEME TOKENS
   ============================================================================
   Palette values are declared ONCE, as inert `--dark-*` / `--light-*` staging
   tokens. The active `--craftr-*` tokens are then mapped to one set or the
   other. The mapping block is repeated for the two light triggers
   (`prefers-color-scheme` and an explicit `[data-theme="light"]`), but the
   VALUES are not — so retuning a colour is a one-line edit that cannot drift
   between the media query and the attribute override.

   Precedence, both directions:
     :root                                   → dark   (default; matches extension)
     @media light + :root:not([data-theme])  → light  (OS preference)
     :root[data-theme="light"]               → light  (explicit; beats media query)
     :root[data-theme="dark"]                → dark   (explicit; beats media query)

   The two explicit rules come after the media query in source order and have
   higher specificity (0,2,0 vs 0,1,0), so an explicit choice always wins —
   including the case an author most often gets wrong: forcing dark while the OS
   asks for light. Agent F's `editorTheme` setting writes this attribute.
   ============================================================================ */

:root {
    /* ---- Dark palette (the extension's original values — do not drift) ---- */
    --dark-bg-primary: #09090b;
    --dark-bg-secondary: #0c0c0f;
    --dark-bg-tertiary: #131316;
    --dark-bg-card: #18181b;
    --dark-bg-hover: #1f1f23;
    --dark-bg-elevated: #27272a;

    --dark-border-color: #27272a;
    --dark-border-subtle: #1f1f23;
    --dark-border-light: #3f3f46;
    --dark-border-focus: #52525b;

    /* Muted-text ramp — RE-SPACED for AA, do not revert to the extension values.
       The originals (#a1a1aa / #71717a / #52525b) put --text-dim at 2.57:1 and
       --text-muted at 4.12:1 on --bg-primary; on --bg-hover #1f1f23, the
       lightest surface these tokens actually land on, they were 2.12:1 and
       3.40:1. --text-dim failed even the 3:1 large-text floor, i.e. it was
       non-conforming at every size.
       Raising only the two failing tokens would have collapsed them into
       --text-secondary (gaps of 5.4 and 4.5 L*), so the whole ramp is
       re-spaced. Measured against --bg-hover, worst case:
         dim 4.61:1  muted 5.96:1  secondary 7.63:1  primary 15.74:1
       L* gaps 7.7 / 7.8 / 26.2 — three clearly distinct levels retained.
       See NOTES-I.md §12 for the rejected alternatives and their numbers. */
    --dark-text-primary: #fafafa;
    --dark-text-secondary: #b0b0b9;
    --dark-text-muted: #9b9ba4;
    --dark-text-dim: #878790;

    --dark-accent-primary: #E57830;
    --dark-accent-primary-dim: rgba(229, 120, 48, 0.15);
    --dark-accent-primary-glow: rgba(229, 120, 48, 0.25);
    --dark-accent-primary-border: rgba(229, 120, 48, 0.3);

    --dark-accent-blue: #3b82f6;
    --dark-accent-blue-dim: rgba(59, 130, 246, 0.15);
    --dark-accent-purple: #8b5cf6;
    --dark-accent-green: #22c55e;
    --dark-accent-green-dim: rgba(34, 197, 94, 0.15);
    --dark-accent-green-border: rgba(34, 197, 94, 0.3);

    /* Primary-button pair, kept as its own token because the accessible
       foreground flips between themes. White on #E57830 is only 2.97:1; a
       near-black foreground on the same orange is 6.26:1. */
    --dark-btn-primary-bg: #E57830;
    --dark-btn-primary-bg-hover: color-mix(in srgb, #E57830 88%, #fff);
    --dark-btn-primary-fg: #17120d;
    --dark-accent-red: #ef4444;
    --dark-accent-red-dim: rgba(239, 68, 68, 0.15);
    --dark-accent-red-border: rgba(239, 68, 68, 0.4);
    --dark-accent-cyan: #06b6d4;
    --dark-accent-yellow: #eab308;

    --dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --dark-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    --dark-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --dark-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);

    --dark-scrim-panel: rgba(10, 10, 12, 0.85);
    --dark-scrim-panel-strong: rgba(10, 10, 12, 0.9);
    --dark-scrim-backdrop: rgba(0, 0, 0, 0.72);

    /* ---- Light palette ---- */
    --light-bg-primary: #e8e5e0;
    --light-bg-secondary: #dfdbd5;
    --light-bg-tertiary: #e3e0da;
    --light-bg-card: #eae7e2;
    --light-bg-hover: #d6d2cb;
    --light-bg-elevated: #cdc9c2;

    --light-border-color: #b8b3aa;
    --light-border-subtle: #ccc7bf;
    --light-border-light: #9e9890;
    --light-border-focus: #7a756e;

    /* Same re-spacing, mirrored. Only --text-dim (#7a756e) actually failed here
       — 3.03:1 on --bg-hover #d6d2cb, the darkest light surface — but lifting
       it to AA crowded --text-muted, so the ramp moves together.
       Worst case: dim 4.68:1  muted 6.50:1  secondary 8.80:1  primary 11.75:1
       L* gaps 9.0 / 9.0 / 11.3. */
    --light-text-primary: #1a1816;
    --light-text-secondary: #342f28;
    --light-text-muted: #48433c;
    --light-text-dim: #5d5851;

    /* #c45a14 measures 4.2:1 on the light background — fine as a border or
       fill, short of AA as text. Text-weight accent is darkened separately. */
    --light-accent-primary: #c45a14;
    --light-accent-primary-text: #a8490c;
    --light-accent-primary-dim: rgba(196, 90, 20, 0.15);
    --light-accent-primary-glow: rgba(196, 90, 20, 0.25);
    --light-accent-primary-border: rgba(196, 90, 20, 0.35);

    --light-accent-blue: #1d4ed8;
    --light-accent-blue-dim: rgba(29, 78, 216, 0.12);
    --light-accent-purple: #6d28d9;
    /* #15803d measures 3.99:1 on the light background — short of AA as text,
       and this green IS text (toast body, "Copied" confirmation). Darkened to
       4.93:1. */
    --light-accent-green: #127034;
    --light-accent-green-dim: rgba(18, 112, 52, 0.12);
    --light-accent-green-border: rgba(18, 112, 52, 0.3);

    /* Light mode inverts the primary-button pair: near-black on #c45a14 is
       4.27:1 (fails), so light uses the darker orange with white — 5.80:1. */
    --light-btn-primary-bg: #a8490c;
    --light-btn-primary-bg-hover: color-mix(in srgb, #a8490c 85%, #000);
    --light-btn-primary-fg: #ffffff;
    --light-accent-red: #b91c1c;
    --light-accent-red-dim: rgba(185, 28, 28, 0.12);
    --light-accent-red-border: rgba(185, 28, 28, 0.35);
    --light-accent-cyan: #0e7490;
    --light-accent-yellow: #a16207;

    --light-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --light-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    --light-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
    --light-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.18);

    --light-scrim-panel: rgba(240, 237, 232, 0.88);
    --light-scrim-panel-strong: rgba(240, 237, 232, 0.94);
    --light-scrim-backdrop: rgba(30, 28, 25, 0.55);

    /* ---- CodeMirror syntax tokens ----
       Consumed inside the editor's shadow root. The light set is the same one
       style.css already used for `:host(.craftr-light)`; hoisting it here is
       what makes OS-preference light mode legible, since that path never adds
       the .craftr-light class. */
    /* Was #52525b — 2.40:1 on the editor background, failing AA and even the 3:1
       large-text floor. Comments are content. #8a8a94 sits on the text ramp and
       measures ~5:1, keeping comments the quietest token without vanishing.
       This is the authoritative value: style.css's fallback never fires because
       this variable is always defined. */
    --dark-cm-comment: #8a8a94;
    --dark-cm-comment-section: #71717a;
    --dark-cm-quality: #f0abab;
    --dark-cm-style: #a5b4fc;
    --dark-cm-camera: #93c5fd;
    --dark-cm-negative: #71717a;
    --dark-cm-attribute: #c4b5fd;
    --dark-cm-composition: #7dd3fc;
    /* The trailing `80` is a 50% alpha, dropping this to 4.01:1 — just under AA —
       while every sibling token in the palette is opaque and clears 9:1. An
       8-digit hex among 6-digit siblings reads as a slip, not a design choice. */
    --dark-cm-lighting: #fcd34d;
    --dark-cm-subject: #a5b4fc;
    --dark-cm-location: #86efac;
    --dark-cm-action: #a5b4fc;
    --dark-cm-number: #86efac;
    --dark-cm-emphasis: #c4b5fd;
    --dark-cm-video: #fca5a5;
    --dark-cm-movement: #fdba74;
    --dark-cm-grading: #f9a8d4;
    --dark-cm-film: #c4b5fd;
    --dark-cm-temporal: #93c5fd;

    --light-cm-comment: #57524c;
    --light-cm-comment-section: #1a1816;
    --light-cm-quality: #8b1515;
    --light-cm-style: #2d2891;
    --light-cm-camera: #1a3799;
    --light-cm-negative: #5c564e;
    --light-cm-attribute: #4a1a9e;
    --light-cm-composition: #0a3d5c;
    --light-cm-lighting: #6e3e08;
    --light-cm-subject: #2d2891;
    --light-cm-location: #115227;
    --light-cm-action: #2d2891;
    --light-cm-number: #115227;
    --light-cm-emphasis: #4a1a9e;
    --light-cm-video: #9b2020;
    --light-cm-movement: #a14b08;
    --light-cm-grading: #9b2068;
    --light-cm-film: #4a1a9e;
    --light-cm-temporal: #1a3799;

    /* ---- Typography ---- */
    --craftr-font-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --craftr-font-display: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --craftr-font-mono: "SF Mono", "Fira Code", "JetBrains Mono", ui-monospace, monospace;

    /* ---- Shape & motion ---- */
    --craftr-radius-sm: 6px;
    --craftr-radius: 8px;
    --craftr-radius-lg: 12px;
    --craftr-radius-xl: 16px;
    --craftr-duration-fast: 150ms;
    --craftr-duration-normal: 200ms;
    --craftr-duration-slow: 300ms;
    --craftr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --craftr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Layout ---- */
    --craftr-header-height: 56px;
    --craftr-content-max: 1200px;
    --craftr-gutter: 24px;

    /* ---- z-index scale ----
       One ordered scale replacing the extension's 2147483647 armour. Those
       maxed-out values existed to beat arbitrary host-site stylesheets; here
       they only ever fought our own chrome. Anything that needs to stack now
       picks a rung, and every rung is legible next to its neighbours. */
    --craftr-z-editor-host: 1;    /* idle shadow host — must sit UNDER app chrome */
    --craftr-z-field-button: 40;
    --craftr-z-sticky: 100;       /* app header, export bar */
    --craftr-z-drawer: 200;       /* preset sidebar drawer on tablet/mobile */
    --craftr-z-banner: 300;       /* API-key banner */
    --craftr-z-modal: 800;
    --craftr-z-editor-active: 900;/* maximised editor covers the app shell */
    --craftr-z-toast: 1000;       /* above the editor: errors must be reachable */
    --craftr-z-onboarding: 1100;  /* above everything, including toasts */
    --craftr-z-overlay: 10;       /* inside a shadow root — contained, local only */

    /* ---- Active mapping: DARK (default) ---- */
    color-scheme: dark;

    --craftr-bg-primary: var(--dark-bg-primary);
    --craftr-bg-secondary: var(--dark-bg-secondary);
    --craftr-bg-tertiary: var(--dark-bg-tertiary);
    --craftr-bg-card: var(--dark-bg-card);
    --craftr-bg-hover: var(--dark-bg-hover);
    --craftr-bg-elevated: var(--dark-bg-elevated);
    --craftr-border-color: var(--dark-border-color);
    --craftr-border-subtle: var(--dark-border-subtle);
    --craftr-border-light: var(--dark-border-light);
    --craftr-border-focus: var(--dark-border-focus);
    --craftr-text-primary: var(--dark-text-primary);
    --craftr-text-secondary: var(--dark-text-secondary);
    --craftr-text-muted: var(--dark-text-muted);
    --craftr-text-dim: var(--dark-text-dim);
    --craftr-accent-primary: var(--dark-accent-primary);
    --craftr-accent-primary-text: var(--dark-accent-primary);
    --craftr-accent-primary-dim: var(--dark-accent-primary-dim);
    --craftr-accent-primary-glow: var(--dark-accent-primary-glow);
    --craftr-accent-primary-border: var(--dark-accent-primary-border);
    --craftr-accent-blue: var(--dark-accent-blue);
    --craftr-accent-blue-dim: var(--dark-accent-blue-dim);
    --craftr-accent-purple: var(--dark-accent-purple);
    --craftr-accent-green: var(--dark-accent-green);
    --craftr-accent-green-dim: var(--dark-accent-green-dim);
    --craftr-accent-green-border: var(--dark-accent-green-border);
    --craftr-btn-primary-bg: var(--dark-btn-primary-bg);
    --craftr-btn-primary-bg-hover: var(--dark-btn-primary-bg-hover);
    --craftr-btn-primary-fg: var(--dark-btn-primary-fg);
    --craftr-accent-red: var(--dark-accent-red);
    --craftr-accent-red-dim: var(--dark-accent-red-dim);
    --craftr-accent-red-border: var(--dark-accent-red-border);
    --craftr-accent-cyan: var(--dark-accent-cyan);
    --craftr-accent-yellow: var(--dark-accent-yellow);
    --craftr-shadow-sm: var(--dark-shadow-sm);
    --craftr-shadow: var(--dark-shadow);
    --craftr-shadow-lg: var(--dark-shadow-lg);
    --craftr-shadow-xl: var(--dark-shadow-xl);
    --craftr-scrim-panel: var(--dark-scrim-panel);
    --craftr-scrim-panel-strong: var(--dark-scrim-panel-strong);
    --craftr-scrim-backdrop: var(--dark-scrim-backdrop);
    --craftr-cm-comment: var(--dark-cm-comment);
    --craftr-cm-comment-section: var(--dark-cm-comment-section);
    --craftr-cm-quality: var(--dark-cm-quality);
    --craftr-cm-style: var(--dark-cm-style);
    --craftr-cm-camera: var(--dark-cm-camera);
    --craftr-cm-negative: var(--dark-cm-negative);
    --craftr-cm-attribute: var(--dark-cm-attribute);
    --craftr-cm-composition: var(--dark-cm-composition);
    --craftr-cm-lighting: var(--dark-cm-lighting);
    --craftr-cm-subject: var(--dark-cm-subject);
    --craftr-cm-location: var(--dark-cm-location);
    --craftr-cm-action: var(--dark-cm-action);
    --craftr-cm-number: var(--dark-cm-number);
    --craftr-cm-emphasis: var(--dark-cm-emphasis);
    --craftr-cm-video: var(--dark-cm-video);
    --craftr-cm-movement: var(--dark-cm-movement);
    --craftr-cm-grading: var(--dark-cm-grading);
    --craftr-cm-film: var(--dark-cm-film);
    --craftr-cm-temporal: var(--dark-cm-temporal);
}

/* ---- Active mapping: LIGHT via OS preference ----
   Scoped with :not([data-theme]) so that ANY explicit choice — light or dark —
   takes this path out of the running before specificity is even consulted. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;

        --craftr-bg-primary: var(--light-bg-primary);
        --craftr-bg-secondary: var(--light-bg-secondary);
        --craftr-bg-tertiary: var(--light-bg-tertiary);
        --craftr-bg-card: var(--light-bg-card);
        --craftr-bg-hover: var(--light-bg-hover);
        --craftr-bg-elevated: var(--light-bg-elevated);
        --craftr-border-color: var(--light-border-color);
        --craftr-border-subtle: var(--light-border-subtle);
        --craftr-border-light: var(--light-border-light);
        --craftr-border-focus: var(--light-border-focus);
        --craftr-text-primary: var(--light-text-primary);
        --craftr-text-secondary: var(--light-text-secondary);
        --craftr-text-muted: var(--light-text-muted);
        --craftr-text-dim: var(--light-text-dim);
        --craftr-accent-primary: var(--light-accent-primary);
        --craftr-accent-primary-text: var(--light-accent-primary-text);
        --craftr-accent-primary-dim: var(--light-accent-primary-dim);
        --craftr-accent-primary-glow: var(--light-accent-primary-glow);
        --craftr-accent-primary-border: var(--light-accent-primary-border);
        --craftr-accent-blue: var(--light-accent-blue);
        --craftr-accent-blue-dim: var(--light-accent-blue-dim);
        --craftr-accent-purple: var(--light-accent-purple);
        --craftr-accent-green: var(--light-accent-green);
        --craftr-accent-green-dim: var(--light-accent-green-dim);
        --craftr-accent-green-border: var(--light-accent-green-border);
        --craftr-btn-primary-bg: var(--light-btn-primary-bg);
        --craftr-btn-primary-bg-hover: var(--light-btn-primary-bg-hover);
        --craftr-btn-primary-fg: var(--light-btn-primary-fg);
        --craftr-accent-red: var(--light-accent-red);
        --craftr-accent-red-dim: var(--light-accent-red-dim);
        --craftr-accent-red-border: var(--light-accent-red-border);
        --craftr-accent-cyan: var(--light-accent-cyan);
        --craftr-accent-yellow: var(--light-accent-yellow);
        --craftr-shadow-sm: var(--light-shadow-sm);
        --craftr-shadow: var(--light-shadow);
        --craftr-shadow-lg: var(--light-shadow-lg);
        --craftr-shadow-xl: var(--light-shadow-xl);
        --craftr-scrim-panel: var(--light-scrim-panel);
        --craftr-scrim-panel-strong: var(--light-scrim-panel-strong);
        --craftr-scrim-backdrop: var(--light-scrim-backdrop);
        --craftr-cm-comment: var(--light-cm-comment);
        --craftr-cm-comment-section: var(--light-cm-comment-section);
        --craftr-cm-quality: var(--light-cm-quality);
        --craftr-cm-style: var(--light-cm-style);
        --craftr-cm-camera: var(--light-cm-camera);
        --craftr-cm-negative: var(--light-cm-negative);
        --craftr-cm-attribute: var(--light-cm-attribute);
        --craftr-cm-composition: var(--light-cm-composition);
        --craftr-cm-lighting: var(--light-cm-lighting);
        --craftr-cm-subject: var(--light-cm-subject);
        --craftr-cm-location: var(--light-cm-location);
        --craftr-cm-action: var(--light-cm-action);
        --craftr-cm-number: var(--light-cm-number);
        --craftr-cm-emphasis: var(--light-cm-emphasis);
        --craftr-cm-video: var(--light-cm-video);
        --craftr-cm-movement: var(--light-cm-movement);
        --craftr-cm-grading: var(--light-cm-grading);
        --craftr-cm-film: var(--light-cm-film);
        --craftr-cm-temporal: var(--light-cm-temporal);
    }
}

/* ---- Active mapping: LIGHT, explicit. Beats the media query in both
        directions (later in source order, higher specificity). ---- */
:root[data-theme="light"] {
    color-scheme: light;

    --craftr-bg-primary: var(--light-bg-primary);
    --craftr-bg-secondary: var(--light-bg-secondary);
    --craftr-bg-tertiary: var(--light-bg-tertiary);
    --craftr-bg-card: var(--light-bg-card);
    --craftr-bg-hover: var(--light-bg-hover);
    --craftr-bg-elevated: var(--light-bg-elevated);
    --craftr-border-color: var(--light-border-color);
    --craftr-border-subtle: var(--light-border-subtle);
    --craftr-border-light: var(--light-border-light);
    --craftr-border-focus: var(--light-border-focus);
    --craftr-text-primary: var(--light-text-primary);
    --craftr-text-secondary: var(--light-text-secondary);
    --craftr-text-muted: var(--light-text-muted);
    --craftr-text-dim: var(--light-text-dim);
    --craftr-accent-primary: var(--light-accent-primary);
    --craftr-accent-primary-text: var(--light-accent-primary-text);
    --craftr-accent-primary-dim: var(--light-accent-primary-dim);
    --craftr-accent-primary-glow: var(--light-accent-primary-glow);
    --craftr-accent-primary-border: var(--light-accent-primary-border);
    --craftr-accent-blue: var(--light-accent-blue);
    --craftr-accent-blue-dim: var(--light-accent-blue-dim);
    --craftr-accent-purple: var(--light-accent-purple);
    --craftr-accent-green: var(--light-accent-green);
    --craftr-accent-green-dim: var(--light-accent-green-dim);
    --craftr-accent-green-border: var(--light-accent-green-border);
    --craftr-btn-primary-bg: var(--light-btn-primary-bg);
    --craftr-btn-primary-bg-hover: var(--light-btn-primary-bg-hover);
    --craftr-btn-primary-fg: var(--light-btn-primary-fg);
    --craftr-accent-red: var(--light-accent-red);
    --craftr-accent-red-dim: var(--light-accent-red-dim);
    --craftr-accent-red-border: var(--light-accent-red-border);
    --craftr-accent-cyan: var(--light-accent-cyan);
    --craftr-accent-yellow: var(--light-accent-yellow);
    --craftr-shadow-sm: var(--light-shadow-sm);
    --craftr-shadow: var(--light-shadow);
    --craftr-shadow-lg: var(--light-shadow-lg);
    --craftr-shadow-xl: var(--light-shadow-xl);
    --craftr-scrim-panel: var(--light-scrim-panel);
    --craftr-scrim-panel-strong: var(--light-scrim-panel-strong);
    --craftr-scrim-backdrop: var(--light-scrim-backdrop);
    --craftr-cm-comment: var(--light-cm-comment);
    --craftr-cm-comment-section: var(--light-cm-comment-section);
    --craftr-cm-quality: var(--light-cm-quality);
    --craftr-cm-style: var(--light-cm-style);
    --craftr-cm-camera: var(--light-cm-camera);
    --craftr-cm-negative: var(--light-cm-negative);
    --craftr-cm-attribute: var(--light-cm-attribute);
    --craftr-cm-composition: var(--light-cm-composition);
    --craftr-cm-lighting: var(--light-cm-lighting);
    --craftr-cm-subject: var(--light-cm-subject);
    --craftr-cm-location: var(--light-cm-location);
    --craftr-cm-action: var(--light-cm-action);
    --craftr-cm-number: var(--light-cm-number);
    --craftr-cm-emphasis: var(--light-cm-emphasis);
    --craftr-cm-video: var(--light-cm-video);
    --craftr-cm-movement: var(--light-cm-movement);
    --craftr-cm-grading: var(--light-cm-grading);
    --craftr-cm-film: var(--light-cm-film);
    --craftr-cm-temporal: var(--light-cm-temporal);
}

/* ---- Active mapping: DARK, explicit.
        Needed as its own rule, not just as the :root default: on a
        light-preference OS the media query above would otherwise win. This is
        the direction that is usually forgotten. ---- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --craftr-bg-primary: var(--dark-bg-primary);
    --craftr-bg-secondary: var(--dark-bg-secondary);
    --craftr-bg-tertiary: var(--dark-bg-tertiary);
    --craftr-bg-card: var(--dark-bg-card);
    --craftr-bg-hover: var(--dark-bg-hover);
    --craftr-bg-elevated: var(--dark-bg-elevated);
    --craftr-border-color: var(--dark-border-color);
    --craftr-border-subtle: var(--dark-border-subtle);
    --craftr-border-light: var(--dark-border-light);
    --craftr-border-focus: var(--dark-border-focus);
    --craftr-text-primary: var(--dark-text-primary);
    --craftr-text-secondary: var(--dark-text-secondary);
    --craftr-text-muted: var(--dark-text-muted);
    --craftr-text-dim: var(--dark-text-dim);
    --craftr-accent-primary: var(--dark-accent-primary);
    --craftr-accent-primary-text: var(--dark-accent-primary);
    --craftr-accent-primary-dim: var(--dark-accent-primary-dim);
    --craftr-accent-primary-glow: var(--dark-accent-primary-glow);
    --craftr-accent-primary-border: var(--dark-accent-primary-border);
    --craftr-accent-blue: var(--dark-accent-blue);
    --craftr-accent-blue-dim: var(--dark-accent-blue-dim);
    --craftr-accent-purple: var(--dark-accent-purple);
    --craftr-accent-green: var(--dark-accent-green);
    --craftr-accent-green-dim: var(--dark-accent-green-dim);
    --craftr-accent-green-border: var(--dark-accent-green-border);
    --craftr-btn-primary-bg: var(--dark-btn-primary-bg);
    --craftr-btn-primary-bg-hover: var(--dark-btn-primary-bg-hover);
    --craftr-btn-primary-fg: var(--dark-btn-primary-fg);
    --craftr-accent-red: var(--dark-accent-red);
    --craftr-accent-red-dim: var(--dark-accent-red-dim);
    --craftr-accent-red-border: var(--dark-accent-red-border);
    --craftr-accent-cyan: var(--dark-accent-cyan);
    --craftr-accent-yellow: var(--dark-accent-yellow);
    --craftr-shadow-sm: var(--dark-shadow-sm);
    --craftr-shadow: var(--dark-shadow);
    --craftr-shadow-lg: var(--dark-shadow-lg);
    --craftr-shadow-xl: var(--dark-shadow-xl);
    --craftr-scrim-panel: var(--dark-scrim-panel);
    --craftr-scrim-panel-strong: var(--dark-scrim-panel-strong);
    --craftr-scrim-backdrop: var(--dark-scrim-backdrop);
    --craftr-cm-comment: var(--dark-cm-comment);
    --craftr-cm-comment-section: var(--dark-cm-comment-section);
    --craftr-cm-quality: var(--dark-cm-quality);
    --craftr-cm-style: var(--dark-cm-style);
    --craftr-cm-camera: var(--dark-cm-camera);
    --craftr-cm-negative: var(--dark-cm-negative);
    --craftr-cm-attribute: var(--dark-cm-attribute);
    --craftr-cm-composition: var(--dark-cm-composition);
    --craftr-cm-lighting: var(--dark-cm-lighting);
    --craftr-cm-subject: var(--dark-cm-subject);
    --craftr-cm-location: var(--dark-cm-location);
    --craftr-cm-action: var(--dark-cm-action);
    --craftr-cm-number: var(--dark-cm-number);
    --craftr-cm-emphasis: var(--dark-cm-emphasis);
    --craftr-cm-video: var(--dark-cm-video);
    --craftr-cm-movement: var(--dark-cm-movement);
    --craftr-cm-grading: var(--dark-cm-grading);
    --craftr-cm-film: var(--dark-cm-film);
    --craftr-cm-temporal: var(--dark-cm-temporal);
}


/* ============================================================================
   2. BASE
   ============================================================================ */

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

html {
    /* No page-level horizontal scroll at any width — the requirement that
       every other rule in this file has to respect. Wide content (tables,
       code, CodeMirror) scrolls inside its own container instead. */
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--craftr-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--craftr-text-primary);
    background: var(--craftr-bg-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* The extension's popup painted this gradient behind everything; keeping it
   preserves the brand feel at full-page scale. Fixed + z-index:-1 so it never
   participates in the app stacking order. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse at top left, var(--craftr-accent-primary-dim) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(63, 103, 213, 0.06) 0%, transparent 50%);
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--craftr-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--craftr-text-primary);
}

p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--craftr-accent-primary-text);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

code, kbd, pre {
    font-family: var(--craftr-font-mono);
    font-size: 0.92em;
}

pre {
    max-width: 100%;
    overflow-x: auto;
    padding: 12px 14px;
    background: var(--craftr-bg-tertiary);
    border: 1px solid var(--craftr-border-subtle);
    border-radius: var(--craftr-radius);
}

kbd {
    padding: 2px 6px;
    background: var(--craftr-bg-tertiary);
    border: 1px solid var(--craftr-border-color);
    border-radius: 4px;
    font-size: 11px;
    color: var(--craftr-text-secondary);
}

table {
    width: 100%;
    border-collapse: collapse;
}

/* Any table wide enough to overflow scrolls in its own box, not the page. */
.craftr-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Scrollbars — matched to the popup's treatment. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--craftr-border-light);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--craftr-border-focus); }

* {
    scrollbar-width: thin;
    scrollbar-color: var(--craftr-border-light) transparent;
}


/* ============================================================================
   3. ACCESSIBILITY UTILITIES
   ============================================================================ */

/* CRITICAL — clip-based, never display:none.
   window.CRAFTR.isLikelyPromptField() reads computed style and REJECTS any
   element with display:none, visibility:hidden or pointer-events:none. The
   editor attaches to #craftr-target through that check, so a conventional
   sr-only utility applied to it would break field discovery silently, with no
   console error. Everything hidden here stays in the layout tree, focusable,
   and hit-testable. */
.craftr-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    overflow: hidden;
}

/* #craftr-target is the hidden textarea standing in for the host site's prompt
   field. It must NOT use .craftr-visually-hidden: isLikelyPromptField also
   applies size heuristics (clientHeight >= 36 || rows >= 2, and width >= 300
   to qualify as a large field), so a 1x1 clip would fail them. It is given a
   realistic size and moved off-screen with opacity instead.
   position: fixed keeps it out of document flow so it cannot create scrollbars
   at any viewport width. */
#craftr-target {
    position: fixed;
    top: 0;
    left: -10000px;
    width: 600px;
    height: 120px;
    opacity: 0;
    /* Deliberately absent: display, visibility, pointer-events. Do not add. */
}

.craftr-skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: var(--craftr-z-onboarding);
    padding: 10px 16px;
    background: var(--craftr-accent-primary);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--craftr-radius) var(--craftr-radius);
    transition: top var(--craftr-duration-fast) var(--craftr-ease-out);
}

.craftr-skip-link:focus {
    top: 0;
    text-decoration: none;
}

/* Global focus ring. :focus-visible only, so pointer users see no change —
   the extension had no keyboard affordance at all, relying purely on :hover. */
:focus-visible {
    outline: 2px solid var(--craftr-accent-primary);
    outline-offset: 2px;
    border-radius: var(--craftr-radius-sm);
}

/* Windows High Contrast / forced colors: let the OS palette through. */
@media (forced-colors: active) {
    .craftr-btn,
    .craftr-doc-card,
    .settings-input,
    .settings-select {
        border: 1px solid ButtonBorder;
    }
    :focus-visible {
        outline: 2px solid Highlight;
    }
}


/* ============================================================================
   4. APP SHELL — header & nav
   ============================================================================ */

.craftr-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.craftr-app-header {
    position: sticky;
    top: 0;
    z-index: var(--craftr-z-sticky);
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--craftr-header-height);
    padding: 0 var(--craftr-gutter);
    background: color-mix(in srgb, var(--craftr-bg-secondary) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--craftr-border-subtle);
}

/* Reused from popup.html so the brand lockup markup transfers unchanged. */
.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.craftr-app-header .popup-logo-icon,
.craftr-app-header .logo-container img {
    height: 26px;
    width: auto;
}

.brand-name {
    font-family: var(--craftr-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--craftr-text-primary);
}

.brand-version {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--craftr-text-muted);
    text-transform: uppercase;
}

.craftr-app-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    /* Nav scrolls itself rather than widening the header on narrow screens. */
    scrollbar-width: none;
}

.craftr-app-nav::-webkit-scrollbar { display: none; }

.craftr-app-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--craftr-radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--craftr-text-secondary);
    white-space: nowrap;
    border: 1px solid transparent;
    transition: color var(--craftr-duration-fast),
                background var(--craftr-duration-fast),
                border-color var(--craftr-duration-fast);
}

.craftr-app-nav-link:hover {
    color: var(--craftr-text-primary);
    background: var(--craftr-bg-hover);
    text-decoration: none;
}

.craftr-app-nav-link.active,
.craftr-app-nav-link[aria-current="page"] {
    color: var(--craftr-accent-primary-text);
    background: var(--craftr-accent-primary-dim);
    border-color: var(--craftr-accent-primary-border);
}

.craftr-app-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.craftr-app-main {
    flex: 1;
    width: 100%;
    max-width: var(--craftr-content-max);
    margin: 0 auto;
    padding: var(--craftr-gutter);
    min-width: 0;
}

.craftr-app-main.is-wide {
    max-width: none;
}

.craftr-app-footer {
    padding: 16px var(--craftr-gutter);
    border-top: 1px solid var(--craftr-border-subtle);
    background: var(--craftr-bg-secondary);
    text-align: center;
}

/* Reused from popup.html. */
.footer-text {
    font-size: 11px;
    color: var(--craftr-text-muted);
}

.footer-link {
    color: var(--craftr-text-muted);
    text-decoration: none;
    transition: color var(--craftr-duration-fast);
}

.footer-link:hover {
    color: var(--craftr-accent-primary-text);
    text-decoration: underline;
}


/* ============================================================================
   5. BUTTONS
   ============================================================================ */

.craftr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 15px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--craftr-text-primary);
    background: var(--craftr-bg-card);
    border: 1px solid var(--craftr-border-color);
    border-radius: var(--craftr-radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--craftr-duration-fast),
                border-color var(--craftr-duration-fast),
                color var(--craftr-duration-fast),
                transform var(--craftr-duration-fast);
}

.craftr-btn:hover {
    background: var(--craftr-bg-hover);
    border-color: var(--craftr-border-light);
}

.craftr-btn:active { transform: translateY(1px); }

.craftr-btn:disabled,
.craftr-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.craftr-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* The accessible foreground for this button FLIPS between themes, which is why
   it uses its own token pair rather than --craftr-accent-primary directly:
     dark  — #17120d on #E57830 = 6.26:1
     light — #ffffff on #a8490c = 5.80:1
   Both of the obvious single-value choices fail: white on #E57830 is 2.97:1,
   and near-black on the light accent #c45a14 is 4.27:1. */
.craftr-btn-primary {
    color: var(--craftr-btn-primary-fg);
    background: var(--craftr-btn-primary-bg);
    border-color: var(--craftr-btn-primary-bg);
    font-weight: 600;
}

.craftr-btn-primary:hover {
    background: var(--craftr-btn-primary-bg-hover);
    border-color: var(--craftr-btn-primary-bg-hover);
    color: var(--craftr-btn-primary-fg);
}

.craftr-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--craftr-text-secondary);
}

.craftr-btn-ghost:hover {
    background: var(--craftr-bg-hover);
    border-color: var(--craftr-border-subtle);
    color: var(--craftr-text-primary);
}

.craftr-btn-danger {
    color: var(--craftr-accent-red);
    border-color: var(--craftr-accent-red-border);
    background: var(--craftr-accent-red-dim);
}

.craftr-btn-danger:hover {
    background: color-mix(in srgb, var(--craftr-accent-red) 22%, transparent);
    border-color: var(--craftr-accent-red);
}

.craftr-btn-sm { padding: 5px 10px; font-size: 12px; }
.craftr-btn-icon { padding: 7px; width: 32px; height: 32px; }

/* Reused verbatim from popup.html. */
.settings-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--craftr-bg-card);
    border: 1px solid var(--craftr-border-color);
    border-radius: var(--craftr-radius-sm);
    color: var(--craftr-text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--craftr-duration-fast);
}

.settings-action-btn:hover {
    background: var(--craftr-bg-hover);
    border-color: var(--craftr-accent-primary-border);
    color: var(--craftr-accent-primary-text);
}

.settings-action-btn svg { width: 14px; height: 14px; }


/* ============================================================================
   6. DOCUMENT LIBRARY
   ============================================================================ */

.craftr-doc-library {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.craftr-doc-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.craftr-doc-toolbar h1 {
    font-size: 20px;
    margin-right: auto;
}

.craftr-doc-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--craftr-text-muted);
}

.craftr-doc-search {
    position: relative;
    flex: 1 1 220px;
    min-width: 0;
    max-width: 340px;
}

.craftr-doc-search input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    font-family: inherit;
    font-size: 13px;
    color: var(--craftr-text-primary);
    background: var(--craftr-bg-tertiary);
    border: 1px solid var(--craftr-border-color);
    border-radius: var(--craftr-radius);
}

.craftr-doc-search input::placeholder { color: var(--craftr-text-muted); }

.craftr-doc-search input:focus {
    outline: none;
    border-color: var(--craftr-accent-primary);
    box-shadow: 0 0 0 3px var(--craftr-accent-primary-dim);
}

.craftr-doc-search svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--craftr-text-muted);
    pointer-events: none;
}

/* auto-fill (not auto-fit) so a single document keeps card width rather than
   stretching to the full row. */
.craftr-doc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.craftr-doc-list.is-rows {
    grid-template-columns: 1fr;
}

.craftr-doc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    min-width: 0;
    text-align: left;
    background: var(--craftr-bg-card);
    border: 1px solid var(--craftr-border-color);
    border-radius: var(--craftr-radius-lg);
    cursor: pointer;
    transition: border-color var(--craftr-duration-fast),
                background var(--craftr-duration-fast),
                transform var(--craftr-duration-fast),
                box-shadow var(--craftr-duration-fast);
}

.craftr-doc-card:hover {
    background: var(--craftr-bg-hover);
    border-color: var(--craftr-border-light);
    transform: translateY(-2px);
    box-shadow: var(--craftr-shadow);
}

.craftr-doc-card:focus-visible {
    outline: 2px solid var(--craftr-accent-primary);
    outline-offset: 2px;
}

.craftr-doc-card.active,
.craftr-doc-card[aria-current="true"] {
    border-color: var(--craftr-accent-primary);
    background: var(--craftr-accent-primary-dim);
}

.craftr-doc-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--craftr-text-primary);
    /* Long single-word titles must not widen the grid track. */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.craftr-doc-card-excerpt {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--craftr-text-secondary);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

.craftr-doc-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 4px;
    font-size: 11px;
    color: var(--craftr-text-muted);
}

.craftr-doc-card-badge {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--craftr-bg-elevated);
    color: var(--craftr-text-secondary);
}

.craftr-doc-card-badge.is-video {
    background: var(--craftr-accent-blue-dim);
    color: var(--craftr-accent-blue);
}

.craftr-doc-card-badge.is-photo {
    background: var(--craftr-accent-primary-dim);
    color: var(--craftr-accent-primary-text);
}

/* Card actions stay visible on touch (no hover) and for keyboard focus —
   revealing them on :hover alone would strand both. */
.craftr-doc-card-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--craftr-duration-fast);
}

.craftr-doc-card:hover .craftr-doc-card-actions,
.craftr-doc-card:focus-within .craftr-doc-card-actions {
    opacity: 1;
}

@media (hover: none) {
    .craftr-doc-card-actions { opacity: 1; }
}

.craftr-doc-card-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--craftr-bg-elevated);
    border: 1px solid var(--craftr-border-color);
    border-radius: var(--craftr-radius-sm);
    color: var(--craftr-text-secondary);
    cursor: pointer;
    transition: all var(--craftr-duration-fast);
}

.craftr-doc-card-actions button:hover {
    color: var(--craftr-text-primary);
    border-color: var(--craftr-border-light);
}

.craftr-doc-card-actions button.is-danger:hover {
    color: var(--craftr-accent-red);
    border-color: var(--craftr-accent-red-border);
    background: var(--craftr-accent-red-dim);
}


/* ============================================================================
   7. EXPORT / COPY BAR
   ============================================================================
   Sticks to the bottom of the workspace. Sits on the sticky rung, below the
   maximised editor — when the editor is open it covers the app shell, and the
   bar has no business punching through it. */

.craftr-export-bar {
    position: sticky;
    bottom: 0;
    z-index: var(--craftr-z-sticky);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px var(--craftr-gutter);
    margin: 16px calc(var(--craftr-gutter) * -1) 0;
    background: color-mix(in srgb, var(--craftr-bg-secondary) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--craftr-border-subtle);
    /* Keeps the bar clear of the iOS home indicator. */
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.craftr-export-bar-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--craftr-text-muted);
    margin-right: auto;
}

.craftr-export-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Transient "Copied" confirmation. aria-live region in the markup. */
.craftr-copy-feedback {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--craftr-accent-green);
    opacity: 0;
    transition: opacity var(--craftr-duration-normal);
}

.craftr-copy-feedback.is-visible { opacity: 1; }


/* ============================================================================
   8. EMPTY STATES
   ============================================================================ */

.craftr-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 56px 24px;
    text-align: center;
    background: var(--craftr-bg-secondary);
    border: 1px dashed var(--craftr-border-color);
    border-radius: var(--craftr-radius-xl);
}

.craftr-empty-state-icon {
    width: 40px;
    height: 40px;
    color: var(--craftr-text-muted);
    opacity: 0.8;
}

.craftr-empty-state-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--craftr-text-primary);
}

.craftr-empty-state-text {
    max-width: 42ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--craftr-text-secondary);
}

.craftr-empty-state .craftr-btn { margin-top: 6px; }

/* Reused from popup.html — the compact inline variant inside a settings list. */
.empty-list {
    padding: 14px;
    text-align: center;
    font-size: 12px;
    color: var(--craftr-text-muted);
    font-style: italic;
}


/* ============================================================================
   9. API-KEY BANNER
   ============================================================================
   Shown when no Replicate key is stored, or when the last call rejected it.
   Every AI action is dead without a key, so this is a persistent strip rather
   than a toast — it must not time out before the user acts on it. */

.craftr-key-banner {
    position: relative;
    z-index: var(--craftr-z-banner);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px var(--craftr-gutter);
    font-size: 13px;
    background: var(--craftr-accent-primary-dim);
    border-bottom: 1px solid var(--craftr-accent-primary-border);
    color: var(--craftr-text-primary);
}

.craftr-key-banner-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--craftr-accent-primary-text);
}

.craftr-key-banner-text {
    flex: 1 1 240px;
    min-width: 0;
    line-height: 1.45;
}

.craftr-key-banner-text strong { font-weight: 600; }

.craftr-key-banner-action { flex-shrink: 0; }

.craftr-key-banner-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--craftr-radius-sm);
    color: var(--craftr-text-secondary);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: all var(--craftr-duration-fast);
}

.craftr-key-banner-dismiss:hover {
    background: var(--craftr-bg-hover);
    border-color: var(--craftr-border-color);
    color: var(--craftr-text-primary);
}

/* Error variant — a rejected key, not merely a missing one. Colour is paired
   with an icon and wording change in the markup; hue is never the only signal. */
.craftr-key-banner.is-error {
    background: var(--craftr-accent-red-dim);
    border-bottom-color: var(--craftr-accent-red-border);
}

.craftr-key-banner.is-error .craftr-key-banner-icon {
    color: var(--craftr-accent-red);
}

.craftr-key-banner.is-success {
    background: var(--craftr-accent-green-dim);
    border-bottom-color: var(--craftr-accent-green-border);
}

.craftr-key-banner.is-success .craftr-key-banner-icon {
    color: var(--craftr-accent-green);
}


/* ============================================================================
   10. ONBOARDING OVERLAY
   ============================================================================
   The app-level first-run overlay. Distinct from the editor's in-shadow
   spotlight tour (.craftr-onboarding-overlay in style.css) — different class,
   different stacking context, no relation. */

.craftr-onboarding {
    position: fixed;
    inset: 0;
    z-index: var(--craftr-z-onboarding);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--craftr-scrim-backdrop);
    backdrop-filter: blur(8px);
    animation: craftr-app-fade var(--craftr-duration-normal) var(--craftr-ease-out);
}

.craftr-onboarding[hidden] { display: none; }

.craftr-onboarding-card {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 28px;
    background: var(--craftr-bg-card);
    border: 1px solid var(--craftr-border-color);
    border-radius: var(--craftr-radius-xl);
    box-shadow: var(--craftr-shadow-xl);
    animation: craftr-app-pop var(--craftr-duration-slow) var(--craftr-ease-spring);
}

.craftr-onboarding-card h2 {
    font-size: 19px;
    margin-bottom: 8px;
}

.craftr-onboarding-lede {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--craftr-text-secondary);
    margin-bottom: 20px;
}

.craftr-onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    counter-reset: craftr-step;
}

.craftr-onboarding-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    counter-increment: craftr-step;
    font-size: 13px;
    line-height: 1.55;
    color: var(--craftr-text-secondary);
}

.craftr-onboarding-steps li::before {
    content: counter(craftr-step);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--craftr-accent-primary-dim);
    border: 1px solid var(--craftr-accent-primary-border);
    color: var(--craftr-accent-primary-text);
    font-size: 11px;
    font-weight: 700;
}

.craftr-onboarding-steps strong {
    display: block;
    color: var(--craftr-text-primary);
    font-weight: 600;
}

.craftr-onboarding-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.craftr-onboarding-progress {
    margin-right: auto;
    font-size: 12px;
    color: var(--craftr-text-muted);
}

@keyframes craftr-app-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes craftr-app-pop {
    from { opacity: 0; transform: scale(0.97) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}


/* ============================================================================
   11. FORM CONTROLS — popup.html vocabulary, reused verbatim
   ============================================================================ */

.settings-group { margin-bottom: 16px; }
.settings-group:last-child { margin-bottom: 0; }

.settings-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--craftr-text-secondary);
}

.settings-label .settings-hint {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 400;
    color: var(--craftr-text-muted);
}

.settings-input,
.settings-select,
textarea.settings-input {
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--craftr-text-primary);
    background: var(--craftr-bg-tertiary);
    border: 1px solid var(--craftr-border-color);
    border-radius: var(--craftr-radius-sm);
    transition: border-color var(--craftr-duration-fast),
                box-shadow var(--craftr-duration-fast);
}

textarea.settings-input {
    min-height: 96px;
    resize: vertical;
    font-family: var(--craftr-font-mono);
    line-height: 1.5;
}

.settings-input::placeholder { color: var(--craftr-text-muted); }

.settings-input:focus,
.settings-select:focus {
    outline: none;
    border-color: var(--craftr-accent-primary);
    box-shadow: 0 0 0 3px var(--craftr-accent-primary-dim);
}

.settings-input:disabled,
.settings-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-input[aria-invalid="true"] {
    border-color: var(--craftr-accent-red);
}

.settings-error {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--craftr-accent-red);
}

/* Custom select arrow, matching the popup. */
.select-wrapper { position: relative; }

.select-wrapper::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--craftr-text-muted);
    border-bottom: 2px solid var(--craftr-text-muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.select-wrapper .settings-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
}

.settings-select option,
.settings-select optgroup {
    background: var(--craftr-bg-secondary);
    color: var(--craftr-text-primary);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.settings-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.settings-input-group .settings-input { flex: 1; min-width: 0; }

.settings-custom-model { display: none; }
.settings-custom-model.visible { display: block; }

/* Toggle switch — reused from popup.html.
   NOTE for Agent F: render this on a real <button role="switch"> with
   aria-checked, not a bare <div>. The .active class drives the visual only. */
.toggle-switch {
    position: relative;
    width: 38px;
    height: 21px;
    flex-shrink: 0;
    padding: 0;
    background: var(--craftr-bg-elevated);
    border: 1px solid var(--craftr-border-color);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--craftr-duration-fast),
                border-color var(--craftr-duration-fast);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    background: var(--craftr-text-secondary);
    border-radius: 50%;
    transition: transform var(--craftr-duration-fast) var(--craftr-ease-out),
                background var(--craftr-duration-fast);
}

.toggle-switch.active,
.toggle-switch[aria-checked="true"] {
    background: var(--craftr-accent-primary);
    border-color: var(--craftr-accent-primary);
}

.toggle-switch.active::after,
.toggle-switch[aria-checked="true"]::after {
    transform: translateX(17px);
    background: #fff;
}

.toggle-switch:focus-visible {
    outline: 2px solid var(--craftr-accent-primary);
    outline-offset: 2px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
}

.settings-row + .settings-row {
    border-top: 1px solid var(--craftr-border-subtle);
}

.settings-row-text { min-width: 0; }

.settings-row-text .settings-label { margin-bottom: 2px; }


/* ============================================================================
   12. LISTS — popup.html vocabulary
   ============================================================================ */

.settings-list {
    max-height: 220px;
    overflow-y: auto;
    background: var(--craftr-bg-tertiary);
    border: 1px solid var(--craftr-border-color);
    border-radius: var(--craftr-radius-sm);
}

.settings-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--craftr-border-subtle);
    font-size: 12.5px;
}

.settings-list-item:last-child { border-bottom: none; }
.settings-list-item:hover { background: var(--craftr-bg-hover); }

.settings-list-item span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--craftr-text-secondary);
}

.settings-list-item button {
    flex-shrink: 0;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--craftr-border-color);
    border-radius: 4px;
    color: var(--craftr-text-muted);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: all var(--craftr-duration-fast);
}

.settings-list-item button:hover {
    color: var(--craftr-accent-red);
    border-color: var(--craftr-accent-red-border);
    background: var(--craftr-accent-red-dim);
}

.selector-tag,
.preset-tag {
    display: inline-block;
    padding: 2px 7px;
    margin: 2px 3px 2px 0;
    background: var(--craftr-bg-elevated);
    border: 1px solid var(--craftr-border-color);
    border-radius: 4px;
    font-family: var(--craftr-font-mono);
    font-size: 10.5px;
    color: var(--craftr-text-secondary);
    overflow-wrap: anywhere;
}

/* Reused from popup.html — the informational callout. */
.picker-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    background: var(--craftr-accent-blue-dim);
    border: 1px solid color-mix(in srgb, var(--craftr-accent-blue) 30%, transparent);
    border-radius: var(--craftr-radius-sm);
    font-size: 12px;
    line-height: 1.5;
    color: var(--craftr-text-secondary);
}

.picker-hint-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--craftr-accent-blue);
}

.picker-hint-text strong { color: var(--craftr-text-primary); font-weight: 600; }


/* ============================================================================
   13. ACCORDION — popup.html vocabulary
   ============================================================================ */

.settings-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accordion-section {
    background: var(--craftr-bg-card);
    border: 1px solid var(--craftr-border-color);
    border-radius: var(--craftr-radius-lg);
    overflow: hidden;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    background: transparent;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--craftr-text-primary);
    transition: background var(--craftr-duration-fast);
}

.accordion-header:hover { background: var(--craftr-bg-hover); }

.accordion-header-left {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--craftr-accent-primary-dim);
    border-radius: var(--craftr-radius-sm);
    color: var(--craftr-accent-primary-text);
}

.accordion-icon svg { width: 15px; height: 15px; }

.accordion-title {
    font-size: 13.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.accordion-arrow {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--craftr-text-muted);
    border-bottom: 2px solid var(--craftr-text-muted);
    transform: rotate(45deg);
    transition: transform var(--craftr-duration-fast) var(--craftr-ease-out);
}

.accordion-section.expanded .accordion-arrow {
    transform: rotate(-135deg);
}

/* grid-template-rows animates to auto-height without a hard-coded max-height.
   The 0fr → 1fr transition is why .accordion-content needs the inner wrapper
   (.accordion-body) with overflow hidden. */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--craftr-duration-normal) var(--craftr-ease-out);
}

.accordion-section.expanded .accordion-content {
    grid-template-rows: 1fr;
}

.accordion-body {
    overflow: hidden;
    min-height: 0;
}

.accordion-section.expanded .accordion-body {
    /* Only once open, so a focus ring inside is not clipped. */
    overflow: visible;
}

.accordion-body > div {
    padding: 4px 16px 16px;
    border-top: 1px solid var(--craftr-border-subtle);
}


/* ============================================================================
   14. SETTINGS SCREEN
   ============================================================================
   The popup was a 420px column. As a full page it becomes a two-column layout:
   a sticky section nav beside the panels. */

.craftr-settings-page {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
    max-width: var(--craftr-content-max);
    margin: 0 auto;
    padding: var(--craftr-gutter);
}

.craftr-settings-sidebar {
    position: sticky;
    top: calc(var(--craftr-header-height) + 16px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.craftr-settings-sidebar h2 {
    padding: 0 12px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--craftr-text-muted);
}

.craftr-settings-nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: var(--craftr-radius-sm);
    font-size: 13px;
    color: var(--craftr-text-secondary);
    border-left: 2px solid transparent;
    transition: all var(--craftr-duration-fast);
}

.craftr-settings-nav-link:hover {
    background: var(--craftr-bg-hover);
    color: var(--craftr-text-primary);
    text-decoration: none;
}

.craftr-settings-nav-link.active,
.craftr-settings-nav-link[aria-current="true"] {
    background: var(--craftr-accent-primary-dim);
    border-left-color: var(--craftr-accent-primary);
    color: var(--craftr-accent-primary-text);
    font-weight: 500;
}

.craftr-settings-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.craftr-settings-section {
    padding: 20px 22px;
    background: var(--craftr-bg-card);
    border: 1px solid var(--craftr-border-color);
    border-radius: var(--craftr-radius-lg);
    min-width: 0;
    /* scroll-margin so an in-page #anchor jump clears the sticky header. */
    scroll-margin-top: calc(var(--craftr-header-height) + 16px);
}

.craftr-settings-section > h2 {
    font-size: 15px;
    margin-bottom: 4px;
}

.craftr-settings-section-desc {
    margin-bottom: 16px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--craftr-text-secondary);
}

.craftr-settings-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.craftr-settings-footer .craftr-settings-status {
    margin-left: auto;
    font-size: 12px;
    color: var(--craftr-text-muted);
}

/* The API-key field. -webkit-text-security keeps it masked while still allowing
   a reveal toggle; type=password would trigger browser password managers to
   offer to save a Replicate token, which is not what anyone wants. */
.craftr-key-input {
    font-family: var(--craftr-font-mono);
    letter-spacing: 0.04em;
}

.craftr-key-input.is-masked {
    -webkit-text-security: disc;
    text-security: disc;
}


/* ============================================================================
   15. TOAST — popup.html vocabulary
   ============================================================================ */

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: var(--craftr-z-toast);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
    padding: 11px 18px;
    background: var(--craftr-accent-green-dim);
    border: 1px solid var(--craftr-accent-green-border);
    border-radius: var(--craftr-radius-lg);
    color: var(--craftr-accent-green);
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(12px);
    box-shadow: var(--craftr-shadow-lg);
    animation: craftr-toast-in var(--craftr-duration-slow) var(--craftr-ease-out);
}

.toast.error {
    background: var(--craftr-accent-red-dim);
    border-color: var(--craftr-accent-red-border);
    color: var(--craftr-accent-red);
}

@keyframes craftr-toast-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}


/* ============================================================================
   16. RESPONSIVE
   ============================================================================ */

/* ---- Tablet ---- */
@media (max-width: 1024px) {
    :root {
        --craftr-gutter: 18px;
    }

    /* Settings section nav stops being a rail and becomes a scrolling strip. */
    .craftr-settings-page {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .craftr-settings-sidebar {
        position: static;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--craftr-border-subtle);
        scrollbar-width: none;
    }

    .craftr-settings-sidebar::-webkit-scrollbar { display: none; }

    .craftr-settings-sidebar h2 { display: none; }

    .craftr-settings-nav-link {
        white-space: nowrap;
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: var(--craftr-radius-sm) var(--craftr-radius-sm) 0 0;
    }

    .craftr-settings-nav-link.active,
    .craftr-settings-nav-link[aria-current="true"] {
        border-left-color: transparent;
        border-bottom-color: var(--craftr-accent-primary);
    }
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
    :root {
        --craftr-gutter: 14px;
        --craftr-header-height: 52px;
    }

    body { font-size: 13.5px; }

    .craftr-app-header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 9px var(--craftr-gutter);
    }

    .craftr-app-nav {
        order: 3;
        width: 100%;
        flex-basis: 100%;
    }

    /* One column: two 260px cards cannot fit, and a squeezed grid track is
       what produces the horizontal page scroll we are ruling out. */
    .craftr-doc-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .craftr-doc-toolbar h1 { font-size: 17px; width: 100%; }

    .craftr-doc-search { max-width: none; flex-basis: 100%; }

    .craftr-export-bar {
        gap: 8px;
        padding-left: var(--craftr-gutter);
        padding-right: var(--craftr-gutter);
    }

    .craftr-export-bar-label { flex-basis: 100%; margin-right: 0; }

    .craftr-export-actions { width: 100%; }

    .craftr-export-actions .craftr-btn { flex: 1 1 auto; }

    .craftr-settings-section { padding: 16px; }

    .craftr-empty-state { padding: 36px 16px; }

    .craftr-onboarding { padding: 14px; }

    .craftr-onboarding-card { padding: 20px; }

    .craftr-onboarding-actions .craftr-btn { flex: 1 1 auto; }

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

    .settings-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .craftr-key-banner { padding: 10px var(--craftr-gutter); }

    .craftr-key-banner-action { flex-basis: 100%; }

    .craftr-key-banner-action .craftr-btn { width: 100%; }
}

/* ---- Coarse pointer: enlarge tap targets to the 44px guideline ---- */
@media (pointer: coarse) {
    .craftr-btn { padding: 11px 16px; }
    .craftr-btn-icon { width: 42px; height: 42px; }
    .craftr-doc-card-actions button { width: 34px; height: 34px; }
    .craftr-app-nav-link { padding: 10px 14px; }
    .toggle-switch { width: 44px; height: 25px; }
    .toggle-switch::after { width: 19px; height: 19px; }
    .toggle-switch.active::after,
    .toggle-switch[aria-checked="true"]::after { transform: translateX(19px); }
}


/* ============================================================================
   17. REDUCED MOTION
   ============================================================================
   0.01ms rather than `none` so animationend / transitionend listeners still
   fire — killing animations outright strands any JS awaiting that callback. */

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

    .craftr-doc-card:hover {
        transform: none;
    }

    .craftr-btn:active {
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}


/* ============================================================================
   18. PRINT
   ============================================================================
   Printing a prompt document should yield the text, on white, with nothing
   else. All app chrome is interaction affordance and is suppressed. The editor
   itself is suppressed by style.css's own @media print (it lives in a shadow
   root this file cannot reach).

   Because #craftr-target is a textarea — which prints as a fixed-height,
   scrolled box rather than reflowing across pages — Agent E should mirror the
   active document's text into a <pre class="craftr-print-doc"> for printing.
   See NOTES-I.md. The fallback below prints the textarea legibly if that hook
   is not added, but it will clip a long document at one page. */

@media print {
    :root,
    :root[data-theme="dark"],
    :root[data-theme="light"] {
        --craftr-bg-primary: #fff;
        --craftr-bg-secondary: #fff;
        --craftr-bg-card: #fff;
        --craftr-text-primary: #000;
        --craftr-text-secondary: #222;
        color-scheme: light;
    }

    body {
        background: #fff !important;
        color: #000;
        font-size: 11pt;
    }

    body::before { display: none; }

    .craftr-app-header,
    .craftr-app-footer,
    .craftr-app-nav,
    .craftr-export-bar,
    .craftr-key-banner,
    .craftr-onboarding,
    .craftr-doc-card-actions,
    .craftr-doc-toolbar,
    .craftr-settings-sidebar,
    .craftr-skip-link,
    .toast,
    craftr-host {
        display: none !important;
    }

    .craftr-app-main {
        max-width: none;
        padding: 0;
    }

    /* Preferred path: a <pre> mirror of the document text. */
    .craftr-print-doc {
        display: block !important;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 11pt;
        line-height: 1.5;
        background: none;
        border: none;
        padding: 0;
    }

    .craftr-print-title {
        display: block !important;
        margin-bottom: 12pt;
        font-size: 16pt;
        font-weight: 700;
    }

    .craftr-print-meta {
        display: block !important;
        margin-bottom: 18pt;
        font-size: 9pt;
        color: #444;
    }

    /* Fallback if no print mirror exists: reveal the target textarea.
       opacity/position are reset rather than display, keeping the
       isLikelyPromptField contract intact even while printing. */
    #craftr-target {
        position: static;
        left: auto;
        opacity: 1;
        width: 100%;
        height: auto;
        min-height: 200px;
        border: none;
        background: none;
        color: #000;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 11pt;
        resize: none;
    }

    .craftr-doc-card {
        border: 1px solid #ccc;
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
    }

    a { color: #000; text-decoration: underline; }

    /* Expand every accordion so nothing prints collapsed. */
    .accordion-content { grid-template-rows: 1fr !important; }
    .accordion-body { overflow: visible !important; }
}

/* Print mirror is hidden on screen. Kept outside @media print so the element
   is inert in the app; the rules above turn it on for printing only. */
.craftr-print-doc,
.craftr-print-title,
.craftr-print-meta {
    display: none;
}