/* TheFMU Editor Tools. Scoped separately from the site's theme CSS. */
.ipsRichText .fmuSpoiler {
    border-radius: .2em;
    filter: blur(4px);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.ipsRichText .fmuSpoiler[data-fmu-revealed] {
    filter: none;
    cursor: auto;
    -webkit-user-select: auto;
    user-select: auto;
}

/* The author must be able to read and edit the marked text. */
[contenteditable="true"] .fmuSpoiler {
    filter: none;
    cursor: text;
    -webkit-user-select: auto;
    user-select: auto;
    background: color-mix(in srgb, currentColor 12%, transparent);
    border-bottom: 1px dashed currentColor;
}

.fmuSpoiler:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.fmuEditorTool {
    display: inline-flex;
    gap: .4em;
    align-items: center;
    justify-content: center;
}

.fmuEditorTool__label { font-size: .85em; }
.fmuEditorTool__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .fmuEditorTool__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
}

.fmuColorDialog{width:min(420px,calc(100vw - 24px));max-height:85vh;overflow:auto;padding:22px;border:1px solid #c7ccd4;border-radius:14px;background:#f8fafc;color:#17212f;box-shadow:0 20px 70px #0006;font:14px/1.5 system-ui,sans-serif}
.fmuColorDialog::backdrop{background:#0006;backdrop-filter:blur(3px)}
.fmuColorDialog *{box-sizing:border-box}.fmuColorDialog header,.fmuColorDialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.fmuColorDialog h2{font-size:19px;margin:0}.fmuColorDialog button{font:inherit;cursor:pointer;border:1px solid #bcc5d0;border-radius:6px;padding:8px 12px;color:inherit;background:transparent}.fmuColorDialog header button{font-size:22px;padding:0 8px}.fmuColorHint{color:#667085;margin:12px 0}.fmuColorSwatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:18px 0}.fmuColorSwatches button{height:32px;padding:0;border:1px solid #8886}.fmuColorFields{display:grid;grid-template-columns:1fr 2fr;gap:16px}.fmuColorDialog label{display:flex;flex-direction:column;gap:5px}.fmuColorDialog input,.fmuColorDialog select{width:100%;min-width:0;height:40px;border:1px solid #bcc5d0;border-radius:6px;padding:6px;background:transparent;color:inherit;font:inherit}.fmuColorScope{margin-top:14px}.fmuColorScope[hidden]{display:none}.fmuColorError{color:#d52a4e;min-height:1.5em;margin:10px 0}.fmuColorDialog .fmuColorApply{background:#b92743;color:white;border-color:#b92743}.fmuColorDialog :focus-visible{outline:3px solid #538ff5;outline-offset:2px}
html[data-ips-scheme="dark"] .fmuColorDialog{background:#181d25;color:#edf0f5;border-color:#394252}html[data-ips-scheme="dark"] .fmuColorHint{color:#adb7c7}html[data-ips-scheme="dark"] .fmuColorDialog select option{background:#181d25}
