/* Wysiwyg inline spell/grammar markers.
   These styles must live outside scoped CSS because Blazor's scoped attribute
   is never stamped on DOM nodes injected by the JS module into the
   contenteditable div.  Both App (MAUI) and App.Web reference this file
   explicitly, following the same pattern as comments.css / publish.css. */

.wysiwyg-marker {
    cursor: help;
    border-radius: 0;
}

/* Deliberately NOT `text-decoration: underline` (even the `wavy` form): a
   marker span sits inside the same contenteditable the Underline toolbar
   button formats via document.execCommand('underline'), and Chromium's
   queryCommandState('underline') inspects the SELECTION's computed
   text-decoration, not just <u> tags. With a marker mid-selection, the
   browser sees the marker's CSS decoration, reports the selection as
   already (partially) underlined, and applies no <u> at all — the author
   selects "bold italic underline", clicks all three toolbar buttons, and
   the underline silently never lands (WriteEditorTests.
   Formatting_BoldItalicUnderline_SurvivesASaveAndReloadCycle). Bold/italic
   are untouched by this because queryCommandState('bold'/'italic') reads
   font-weight/font-style, not text-decoration. A background-gradient
   squiggle gives the same visual wavy underline without touching the
   text-decoration property the editor's own toolbar depends on. */
.wysiwyg-marker--spelling {
    background-image: repeating-linear-gradient(
        -45deg,
        var(--os-danger, red) 0,
        var(--os-danger, red) 1px,
        transparent 1px,
        transparent 3px);
    background-position: 0 100%;
    background-size: 4px 3px;
    background-repeat: repeat-x;
    padding-bottom: 1px;
}

.wysiwyg-marker--grammar {
    background-image: repeating-linear-gradient(
        -45deg,
        var(--os-info, #2563eb) 0,
        var(--os-info, #2563eb) 1px,
        transparent 1px,
        transparent 3px);
    background-position: 0 100%;
    background-size: 4px 3px;
    background-repeat: repeat-x;
    padding-bottom: 1px;
}

/* Suggestion popover shown on marker click */
.wysiwyg-popover {
    position: fixed;
    z-index: 9999;
    background: var(--os-surface, #fff);
    border: 1px solid var(--os-border, #ddd);
    border-radius: var(--os-radius-sm, 4px);
    box-shadow: var(--os-shadow-sm, 0 2px 8px rgba(0,0,0,0.12));
    padding: 0.5rem;
    min-width: 180px;
    max-width: 320px;
    font-size: var(--os-font-size-sm, 0.875rem);
    color: var(--os-text-primary);
}

.wysiwyg-popover__message {
    margin: 0 0 0.375rem;
    font-style: italic;
    color: var(--os-text-secondary, #555);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.wysiwyg-popover__suggestions {
    list-style: none;
    margin: 0 0 0.375rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.wysiwyg-popover__suggestion-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--os-radius-sm, 4px);
    padding: 0.25rem 0.5rem;
    text-align: left;
    cursor: pointer;
    color: var(--os-primary, #258cfb);
    font-size: inherit;
    width: 100%;
    transition: background var(--os-transition-fast, 120ms);
}

.wysiwyg-popover__suggestion-btn:hover {
    background: var(--os-surface-alt, rgba(37,140,251,0.07));
    border-color: var(--os-primary, #258cfb);
}

.wysiwyg-popover__no-suggestions {
    color: var(--os-text-tertiary, #999);
    font-size: 0.8125rem;
    margin: 0 0 0.375rem;
}

.wysiwyg-popover__actions {
    border-top: 1px solid var(--os-border, #ddd);
    padding-top: 0.375rem;
    display: flex;
    justify-content: flex-end;
}

.wysiwyg-popover__ignore-btn {
    background: transparent;
    border: 1px solid var(--os-border, #ddd);
    border-radius: var(--os-radius-sm, 4px);
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    font-size: inherit;
    color: var(--os-text-secondary, #555);
    transition: background var(--os-transition-fast, 120ms);
}

.wysiwyg-popover__ignore-btn:hover {
    background: var(--os-surface-alt, rgba(0,0,0,0.04));
}

/* An author's scene break (<hr>) inside the editing surface. Lives here, not
   in the scoped sheet, for the same reason as the markers above: the rule
   is inserted into the contenteditable by wysiwyg.js (insertSceneBreak) or
   arrives via innerHTML from a loaded draft, so Blazor's scope attribute is
   never on it. Drawn as the same letter-spaced dinkus StoryReader renders
   (StoryReader.razor.css .story-reader__scene-break) so the author sees
   what the reader gets; a bare browser <hr> line would misrepresent it. */
.os-wysiwyg__surface hr {
    border: 0;
    height: auto;
    margin: var(--os-space-md, 1rem) 0;
    text-align: center;
    color: var(--os-text-tertiary, #888);
    line-height: 1.6;
}

.os-wysiwyg__surface hr::before {
    content: "***";
    letter-spacing: 0.75em;
    text-indent: 0.75em;
}