/* 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;
}

.wysiwyg-marker--spelling {
    text-decoration: underline wavy var(--os-danger, red);
    text-decoration-skip-ink: none;
}

.wysiwyg-marker--grammar {
    text-decoration: underline wavy var(--os-info, #2563eb);
    text-decoration-skip-ink: none;
}

/* 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));
}