/* 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. */
.toastui-editor-defaultUI {
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 6px);
    background: var(--neutral-layer-1);
}

/* Toolbar — calmer, less elevation. */
.toastui-editor-toolbar {
    background: var(--neutral-layer-2, #f8f8f8);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}
.toastui-editor-toolbar-icons {
    color: var(--neutral-foreground-rest);
}
.toastui-editor-toolbar-icons:hover:not(:disabled) {
    background: var(--neutral-fill-stealth-hover, rgba(0,0,0,0.04));
    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;
}

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

[data-theme="dark"] .toastui-editor-defaultUI {
    background: var(--neutral-layer-1);
    border-color: var(--neutral-stroke-divider-rest);
}
[data-theme="dark"] .toastui-editor-toolbar {
    background: var(--neutral-layer-2, #1f1f1f);
    border-bottom-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);
}
[data-theme="dark"] .toastui-editor-md-container .toastui-editor {
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}
[data-theme="dark"] .toastui-editor-mode-switch {
    background: var(--neutral-layer-2, #1f1f1f);
}

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

@media (max-width: 480px) {
    .toastui-editor-toolbar {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .toastui-editor-toolbar-group {
        flex-shrink: 0;
    }
    .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;
}