/* Round 28d (JUR-6, r.942): siteclickRich, the app WYSIWYG (sc-rich.js). Same frame as the node-panel
   richInput (np-panel.css .np-rich, np-text.css §3 slide-out labels); colours only from tokens.
   Run 39b (ADM-3): loaded globally through layouts.parts.ui-styles. Equal specificity against np-fields.css
   (style-editor-host) and np-varfield.css (sidebar_marketing): those link later, so they win a tie. */
/* Run 31a (EDT-1, r.287): borderless on the input ground, the bar floats 5px inside.
   Run 32 (EDT-1, r.102): the bar has no ground; hover/active step to the panel ground. */
.np-rich { border: 1px solid transparent; border-radius: 6px; overflow: hidden; background: var(--sc-input-bg); }
.np-rich:focus-within { border-color: var(--sc-input-border-focus); }
/* The varfield shares the frame but its variables menu hangs below it (np-varfield.css): never clip it. */
.np-rich.sc-varfield { overflow: visible; }
.np-rich-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; margin: 5px 5px 0; border: 0; border-radius: 5px; padding: 2px; background: transparent; }
.np-rich-bar button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border: 0; background: transparent; border-radius: 5px; padding: 0; cursor: pointer; color: var(--sc-color-text-subtle); }
.np-rich-bar button:hover { background: var(--sc-color-panel-bg); color: var(--sc-color-text-muted); }
.np-rich-bar button.is-active { background: var(--sc-color-panel-bg); color: var(--sc-color-primary); }
.np-rich-bar button svg { display: block; width: 13px; height: 13px; stroke-width: 1.6; }
.np-rich-bar button:not(:hover):not(.is-active) svg { opacity: .75; }
.np-rich-bar .np-rich-btn {
    display: inline-grid;
    grid-template-columns: auto 0fr;
    column-gap: 0;
    width: auto;
    min-width: 24px;
    padding: 0 4.5px;
    transition: grid-template-columns 500ms var(--sc-ease-in-out), column-gap 500ms var(--sc-ease-in-out);
}
.np-rich-bar .np-rich-btn:hover,
.np-rich-bar .np-rich-btn:focus-visible {
    grid-template-columns: auto 1fr;
    column-gap: 5px;
}
.np-rich-label { min-width: 0; overflow: hidden; white-space: nowrap; font-size: 12px; line-height: 24px; }
.np-rich-link { flex: 1 1 160px; min-width: 0; height: 24px; padding: 0 6px; border: 1px solid var(--sc-color-border-strong);
    border-radius: 5px; background: var(--sc-color-panel-bg); color: var(--sc-color-text); font: inherit; font-size: 12px; }
.np-rich-link[hidden] { display: none; }
.np-rich-body { min-height: 160px; padding: 8px 10px; outline: none; background: transparent; color: var(--sc-color-text); }
.np-rich-body b, .np-rich-body strong { font-weight: 700; }
.np-rich-body i, .np-rich-body em { font-style: italic; }
.np-rich-body p { margin: 0 0 0.6em; }
.np-rich-body p:last-child { margin-bottom: 0; }
.np-rich-body ul { list-style: disc; padding-left: 1.2em; margin: 0 0 .6em; }
.np-rich-body ol { list-style: decimal; padding-left: 1.2em; margin: 0 0 .6em; }
.np-rich-body li { margin: 0 0 .2em; }
.np-rich-body a { color: var(--sc-color-primary-text); text-decoration: underline; }
.np-rich-body h2 { margin: 0 0 .4em; font-size: 1.25em; font-weight: 600; }
.np-rich-body h3 { margin: 0 0 .4em; font-size: 1.1em; font-weight: 600; }
.np-rich-source { display: none; }
/* Emoji popover: the editor's markup (np-text.css §4), placed by sc-rich.js under its button. */
.np-emoji { position: fixed; z-index: 1000; display: grid; gap: 6px; width: 264px; padding: 8px;
    border: 1px solid var(--sc-color-border-strong); border-radius: 6px; background: var(--sc-color-panel-bg); box-shadow: var(--sc-shadow-pop); }
.np-emoji-tabs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; box-shadow: inset 0 -1px 0 var(--sc-color-hairline); }
.np-emoji-tabs button, .np-emoji-item { height: 30px; padding: 0; border: 0; border-radius: 4px; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; }
.np-emoji-tabs button { height: 32px; border-radius: 0; box-shadow: inset 0 -2px 0 transparent; opacity: 0.55; }
.np-emoji-tabs button:hover, .np-emoji-tabs button[aria-pressed="true"] { opacity: 1; }
.np-emoji-tabs button[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--sc-color-primary); }
.np-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; max-height: 248px; overflow-y: auto; overscroll-behavior: contain; }
.np-emoji-item:hover { background: var(--sc-color-surface-alt); }
@media (prefers-reduced-motion: reduce) {
    .np-rich-bar .np-rich-btn { transition: none; }
}