/* Spec 052 — Toast UI Editor theme overrides.
   Loaded AFTER the base toastui-editor.min.css, so these rules win
   on cascade order. Goals:
   - Map Toast UI colors to the app's accent + neutral tokens.
   - Calmer chrome (softer borders, lighter hovers) per brand voice.
   - Dark-theme parity via [data-theme="dark"].
   - Mobile toolbar: horizontal scroll, larger touch targets. */

/* ---------- Light theme (default) ---------- */

/* Outer container — match the rest of the form's neutral surface
   instead of Toast UI's pure-white default.
   Spec 065 — explicit width:100% + min-width:0 + box-sizing so the
   editor never grows past a narrow parent dialog. Toast UI's default
   `width:auto` makes the container grow to fit the intrinsic min-
   width of the toolbar (~600px), overflowing the wizard dialog. */
.toastui-editor-defaultUI {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 6px);
    background: var(--neutral-layer-1);
}

/* Spec 074 — the spec-069 min-width:0 chain reached `.toastui-editor-defaultUI`
   but stopped there; the INTERNAL Toast UI tree (`-main` and the
   md/ww containers) still carries an intrinsic min-content width (the
   editor body + CodeMirror gutter), so in a narrow wizard dialog the
   editor bulged past the dialog's right edge even though the outer
   shell was 100%. Propagate the shrink + clamp all the way down so the
   editor body tracks the dialog width and any genuinely-wide content
   scrolls within its own pane instead of widening the dialog. */
.toastui-editor-main,
.toastui-editor-md-container,
.toastui-editor-ww-container,
.toastui-editor-md-container > .toastui-editor,
.toastui-editor-ww-container > .toastui-editor {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Toolbar — calmer, less elevation.
   Spec 074 — WRAP instead of horizontal-scroll. The dialog is a FIXED
   500px (FluentUI default `--dialog-width`), so the editor host is ~450px;
   Toast UI's ~629px of toolbar icons don't fit. The earlier spec-065/069
   `overflow-x: auto` was meant to scroll them, but Toast UI's fixed
   `height:45px` toolbar meant the horizontal scrollbar clipped the icon
   bottoms, AND in WYSIWYG mode the bar didn't actually scroll — it
   rendered full-width and spilled past the dialog's right edge. Letting
   the bar wrap to a second row (with `height:auto`) fits ANY width with
   no scrollbar, no clipping, and no spill, in both modes — and doesn't
   depend on Toast UI's flaky JS "more"-button width measurement. */
.toastui-editor-toolbar {
    background: var(--neutral-layer-2, #f8f8f8);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    height: auto;
}
/* Spec 069/074 — the VISIBLE toolbar bar is `.toastui-editor-defaultUI-toolbar`
   (base bg #f7f9fc, flex, fixed height:45px); `.toastui-editor-toolbar` above
   is its parent. Drop the fixed height + wrap the flex groups so the icons
   flow onto a second row when the dialog is narrower than the full toolbar. */
.toastui-editor-defaultUI-toolbar {
    min-width: 0;
    flex-wrap: wrap;
    height: auto;
}
.toastui-editor-toolbar-group {
    /* Keep each group intact (don't split a group across rows); groups wrap
       as units. */
    flex-shrink: 0;
}
.toastui-editor-toolbar-icons {
    color: var(--neutral-foreground-rest);
}
/* Spec 074 — Toast UI's default button hover is `background-color:#fff`
   (`.toastui-editor-defaultUI-toolbar button:not(:disabled):hover`), which
   out-specifies a plain `.toastui-editor-toolbar-icons:hover` rule and
   washes the icon out: in light mode the icon nearly vanishes on white, and
   in dark mode the white never gets re-themed. Override that EXACT selector
   (wins on source order at equal specificity) with a neutral translucent
   grey — it reads as a subtle hover in both themes AND is invariant under
   the dark-mode `filter: invert` on the icon (grey inverts to grey), so the
   icon stays visible on hover everywhere, including the "More" popup whose
   buttons are also descendants of `.toastui-editor-defaultUI-toolbar`. */
.toastui-editor-defaultUI-toolbar button:not(:disabled):hover {
    background-color: rgba(127, 127, 127, 0.22);
    border-color: var(--neutral-stroke-divider-rest);
}
.toastui-editor-toolbar-icons.active,
.toastui-editor-toolbar-icons[aria-pressed="true"] {
    background: color-mix(in srgb, var(--accent-fill-rest) 14%, var(--neutral-layer-1));
    border-color: var(--accent-fill-rest);
    color: var(--accent-foreground-rest);
}

/* Editor content area — match the form's text colour + line-height. */
.toastui-editor-contents {
    color: var(--neutral-foreground-rest);
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.75rem 1rem;
}
.toastui-editor-contents p {
    margin: 0 0 0.75em;
}

/* Markdown mode (the code-mirror surface) — match font/size. */
.toastui-editor-md-container .toastui-editor {
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

/* Mode-toggle tabs (WYSIWYG / Markdown) at the bottom — quiet them. */
.toastui-editor-mode-switch {
    background: var(--neutral-layer-2, #f8f8f8);
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}
.toastui-editor-mode-switch .tab-item {
    color: var(--neutral-foreground-hint);
}
.toastui-editor-mode-switch .tab-item.active {
    color: var(--accent-foreground-rest);
    border-color: var(--accent-fill-rest);
}

/* Focus ring — accent-coloured outline, same intensity as elsewhere. */
.toastui-editor-defaultUI:focus-within {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

/* Spec 067 — pasted content carries inline `style="color:..."` /
   `style="background-color:..."` from the source page. When the
   source's theme doesn't match the editor's, pasted text can land
   invisible (light-on-light or dark-on-dark) — Brett surfaced this
   pasting into a dark-mode editor where the text rendered with the
   source's dark color, indistinguishable from the editor's dark bg.
   Override any inline color/background on descendants so pasted
   content always uses the editor's foreground token. Applies in
   both themes; intentional-color formatting (highlights etc.) can
   be re-applied via the toolbar (none today, future). */
.toastui-editor-contents [style*="color"] {
    color: var(--neutral-foreground-rest) !important;
}
.toastui-editor-contents [style*="background"] {
    background-color: transparent !important;
}

/* ---------- Dark theme ---------- */

[data-theme="dark"] .toastui-editor-defaultUI {
    background: var(--neutral-layer-1);
    border-color: var(--neutral-stroke-divider-rest);
}
/* Spec 069 — CORRECTION to spec 066. The browser-inspected truth:
   in dark mode `--neutral-layer-2` (#1a1a1a) is DARKER than
   `--neutral-layer-1` (#272727), the OPPOSITE of spec 066's premise.
   And more importantly the visible toolbar bar is
   `.toastui-editor-defaultUI-toolbar` (base #f7f9fc), NOT
   `.toastui-editor-toolbar` — so 064/066 darkened an element that
   paints BEHIND the visible white bar (no visible effect). Darken the
   ACTUAL visible bar to the recessed `--neutral-layer-2` band; the
   toolbar icons (a PNG sprite) are already inverted to light by the
   rule below, so they read clearly against it. The
   `.toastui-editor-toolbar` rule below is kept as a 1px-edge backstop. */
[data-theme="dark"] .toastui-editor-defaultUI-toolbar {
    background: var(--neutral-layer-2);
    border-bottom-color: var(--neutral-stroke-divider-rest);
}
[data-theme="dark"] .toastui-editor-toolbar {
    background: var(--neutral-layer-2);
    border-bottom-color: var(--neutral-stroke-divider-rest);
}
/* Spec 074 — the toolbar's responsive "More" (⋯) overflow popup
   (`.toastui-editor-dropdown-toolbar`, base bg #f7f9fc) was the last
   bright surface: it floats over the editor with the collapsed icons and
   stayed light in dark mode. Darken it to match the toolbar band so its
   icons (inverted to light by the rule below) read against it. */
[data-theme="dark"] .toastui-editor-dropdown-toolbar {
    background: var(--neutral-layer-2);
    border-color: var(--neutral-stroke-divider-rest);
}
/* The 1px group dividers ship light (#e1e3e9); recolor for dark so they
   don't read as bright lines in the bar or the dropdown. */
[data-theme="dark"] .toastui-editor-toolbar-divider {
    background-color: var(--neutral-stroke-divider-rest);
}
[data-theme="dark"] .toastui-editor-toolbar-icons {
    color: var(--neutral-foreground-rest);
    filter: invert(0.9); /* Toast UI ships SVG icons baked dark-on-light; flip for dark mode */
}
[data-theme="dark"] .toastui-editor-toolbar-icons.active,
[data-theme="dark"] .toastui-editor-toolbar-icons[aria-pressed="true"] {
    background: color-mix(in srgb, var(--accent-fill-rest) 24%, var(--neutral-layer-1));
}
[data-theme="dark"] .toastui-editor-contents {
    color: var(--neutral-foreground-rest);
}
/* Spec 074 — Toast UI's base CSS sets `color:` DIRECTLY on the
   text-bearing descendants (`.toastui-editor-contents p`, headings,
   li, blockquote, …) with a hardcoded near-black tuned for the light
   theme. A direct rule beats inheritance, so the container-level
   override above never reaches the typed text — paragraphs rendered
   dark-on-dark (invisible) in the dark-mode editor. Brett hit this
   typing into the WYSIWYG body (the default mode). Recolor the
   descendants themselves; links keep Toast UI's blue (legible on dark)
   and code keeps its own chip styling, so those are intentionally left
   out. */
[data-theme="dark"] .toastui-editor-contents p,
[data-theme="dark"] .toastui-editor-contents h1,
[data-theme="dark"] .toastui-editor-contents h2,
[data-theme="dark"] .toastui-editor-contents h3,
[data-theme="dark"] .toastui-editor-contents h4,
[data-theme="dark"] .toastui-editor-contents h5,
[data-theme="dark"] .toastui-editor-contents h6,
[data-theme="dark"] .toastui-editor-contents ul,
[data-theme="dark"] .toastui-editor-contents ol,
[data-theme="dark"] .toastui-editor-contents li,
[data-theme="dark"] .toastui-editor-contents strong,
[data-theme="dark"] .toastui-editor-contents em,
[data-theme="dark"] .toastui-editor-contents del,
[data-theme="dark"] .toastui-editor-contents blockquote,
[data-theme="dark"] .toastui-editor-contents blockquote p,
[data-theme="dark"] .toastui-editor-contents blockquote ul,
[data-theme="dark"] .toastui-editor-contents blockquote ol {
    color: var(--neutral-foreground-rest);
}
[data-theme="dark"] .toastui-editor-md-container .toastui-editor {
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}
/* Spec 074 — Markdown-mode source text. Toast UI v3 uses ProseMirror
   (NOT CodeMirror) for BOTH modes, and sets `color: #222` DIRECTLY on
   `.ProseMirror` (the contenteditable). In WYSIWYG the typed text sits in
   `<p>` under `.toastui-editor-contents` (recolored above), so it escaped;
   but the markdown SOURCE editable is a bare `.ProseMirror` with no
   `.toastui-editor-contents` class, so its text kept the #222 — dark-on-
   dark. A container/ancestor override can't win against a color set
   directly on the element, so target `.ProseMirror` itself. (Harmlessly
   reinforces WYSIWYG too; markdown syntax-token classes keep their own
   accent colors since they're more specific.) */
[data-theme="dark"] .toastui-editor-defaultUI .ProseMirror {
    color: var(--neutral-foreground-rest);
}
/* Spec 064 — WYSIWYG is the editor's DEFAULT mode; the spec-052
   overrides only themed the Markdown (CodeMirror) container, so dark-
   mode dialogs showed a stark white panel where the editor body is.
   Theme the WYSIWYG surface the same way. */
[data-theme="dark"] .toastui-editor-ww-container {
    background: var(--neutral-layer-1);
}
[data-theme="dark"] .toastui-editor-ww-container > .toastui-editor {
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}
[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents {
    color: var(--neutral-foreground-rest);
}
/* Spec 074 — Markdown mode's Write/Preview tab row. Toast UI hardcodes a
   light chrome at THREE levels: the container strip itself
   (`.toastui-editor-md-tab-container` #f7f9fc — the "white behind the
   tabs" Brett saw), and the tabs (`.tab-item` #eaedf1 inactive / #fff
   active). Round 2 only recolored `.tab-item`, leaving the container
   strip bright. Recolor all three onto the recessed/lifted neutral bands
   the bottom mode-switch uses so the row reads consistently in dark. */
[data-theme="dark"] .toastui-editor-md-tab-container {
    background: var(--neutral-layer-2);
    border-bottom-color: var(--neutral-stroke-divider-rest);
}
[data-theme="dark"] .toastui-editor-md-tab-container .tab-item {
    background: var(--neutral-layer-2);
    border-color: var(--neutral-stroke-divider-rest);
    color: var(--neutral-foreground-hint);
}
[data-theme="dark"] .toastui-editor-md-tab-container .tab-item.active {
    background: var(--neutral-layer-1);
    border-bottom-color: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

/* Spec 066 — mode-switch wrapper uses the same subdued band as the
   toolbar (same darker-than-content derivation) for tonal symmetry. */
[data-theme="dark"] .toastui-editor-mode-switch {
    background: color-mix(in srgb, var(--neutral-layer-1) 80%, black);
}
/* Spec 064 — Toast UI's default `.tab-item` is `#fff` background +
   `#969aa5` / `#555` text — both blown-out / invisible on dark.
   Spec 066 — inactive tab sits on the subdued band; active tab
   "lifts" to the content surface so it visually merges with the
   editor body the user is editing. */
[data-theme="dark"] .toastui-editor-mode-switch .tab-item {
    background: color-mix(in srgb, var(--neutral-layer-1) 80%, black);
    color: var(--neutral-foreground-hint);
    border-color: var(--neutral-stroke-divider-rest);
}
[data-theme="dark"] .toastui-editor-mode-switch .tab-item.active {
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    border-top-color: var(--neutral-layer-1);
}

/* ---------- Mobile (≤480px) ---------- */

@media (max-width: 480px) {
    /* Spec 074 — the toolbar wraps at all widths now (see the base rule),
       so no mobile-specific overflow handling is needed; keep only the
       larger touch targets. */
    .toastui-editor-toolbar-icons {
        /* Larger touch targets per spec 052 FR-008 (≥40px). */
        min-width: 40px;
        min-height: 40px;
    }
}

/* ---------- Disabled state ---------- */

/* When PickerHidden equivalent: contenteditable=false, hide toolbar
   so the user can't try to interact. */
.cs-markdown-body__host--disabled .toastui-editor-toolbar,
.cs-markdown-body__host--disabled .toastui-editor-mode-switch {
    display: none;
}
.cs-markdown-body__host--disabled .toastui-editor-contents {
    opacity: 0.7;
    cursor: not-allowed;
}