/*
 * Editor view of the content-page editor (PreserveHtml extension). Display only: the stored HTML
 * keeps its styles. The pages are made for the dark app, so stored colours and fonts are
 * neutralised here to keep the text readable in the admin.
 */
.nsc-preserve-html .ProseMirror [style] {
    color: inherit !important;
    background-color: transparent !important;
    font-family: inherit !important;
}

.nsc-preserve-html .ProseMirror img {
    display: inline-block;
    max-width: min(100%, 24rem);
    height: auto;
}

.nsc-preserve-html .ProseMirror img.ProseMirror-selectednode,
.nsc-preserve-html .ProseMirror .nsc-youtube.ProseMirror-selectednode {
    outline: 3px solid var(--primary-500, rgb(59 130 246));
}

/* YouTube embeds are a placeholder box in the editor (never a live iframe); a click selects it for the YouTube tool. */
.nsc-preserve-html .ProseMirror .nsc-youtube {
    max-width: 24rem;
    margin: 0.75rem 0;
    padding: 1.5rem 0.75rem;
    background: rgb(229 231 235);
    color: rgb(55 65 81);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.nsc-preserve-html .ProseMirror .nsc-youtube.nsc-youtube-invalid {
    background: rgb(254 226 226);
    color: rgb(153 27 27);
}

.nsc-preserve-html .ProseMirror .nsc-details {
    border: 1px solid rgb(156 163 175 / 0.6);
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    margin: 0.75rem 0;
}

.nsc-preserve-html .ProseMirror .nsc-summary {
    font-weight: 600;
    border-bottom: 1px dashed rgb(156 163 175 / 0.6);
    padding: 0.25rem 0;
}

.nsc-preserve-html .ProseMirror .nsc-summary::before {
    content: '▸ ';
}

/* An image without a valid address (legacy content): visible, so editors can select and delete it. */
.nsc-preserve-html .ProseMirror .nsc-image-invalid {
    display: inline-block;
    max-width: 24rem;
    padding: 0.25rem 0.5rem;
    background: rgb(254 226 226);
    color: rgb(153 27 27);
    border: 1px dashed rgb(153 27 27);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
}

.nsc-preserve-html .ProseMirror .nsc-image-invalid.ProseMirror-selectednode {
    outline: 3px solid var(--primary-500, rgb(59 130 246));
}