/* Toast UI Editor — repainted on design tokens (D3/D4, docs/superpowers/specs/2026-07-28-lesson-text-editor-design.md
   §3). Deliberately NOT in bp.css: both hosts (App.razor, index.html) link the two vendored
   toastui-editor{,-dark}.min.css files AFTER bp.css, so a bp.css rule of equal specificity would
   silently lose to the vendor sheet by document order — the symptom would be "tokens don't apply
   here and there's no clue why". This file is linked immediately after the two vendor links in both
   hosts instead, so ties resolve in our favor by load order alone.

   Specificity budget: the light sheet's rules are mostly ONE vendor class (occasionally + a type
   selector), so `.rp-rt .toastui-editor-x` (two classes) already outranks it outright. The dark sheet
   (toastui-editor-dark.min.css) prefixes everything with `.toastui-editor-dark` — TWO classes — so a
   bare `.rp-rt .toastui-editor-x` only TIES it; that tie is won by load order (this file loads last),
   never by specificity alone. Anything under the revealed-on-focus toolbar is written
   `.rp-rt.rp-rt--focus .x` (three classes) so it outranks the dark sheet outright too — cheap
   insurance since that combination is what actually renders when the rule matters.

   .rp-rt is the mount element (RpRichTextEditor.razor) that Toast UI renders inside of; richtext.js
   toggles .rp-rt--focus on that SAME element via focusin/focusout, never :focus-within (Safari does
   not focus a <button> on click — see richtext.js's comment). Selectors below assume Toast UI's real
   DOM (verified against the vendored bundle, not guessed):
     .rp-rt
       └─ .toastui-editor-defaultUI                  (outer chrome: border/font/radius)
            ├─ .toastui-editor-toolbar                (hide/reveal target — hiding it hides its
            │    └─ .toastui-editor-defaultUI-toolbar  child mode-switch tabs AND the button row too)
            └─ .toastui-editor-main
                 └─ .toastui-editor-ww-container
                      └─ .toastui-editor-contents      (== the ProseMirror editable node itself;
                           └─ span.placeholder          the empty-state placeholder is a ProseMirror
                                                         widget matched by `.ProseMirror .placeholder`,
                                                         NOT the `:before`/data-placeholder selector
                                                         the vendor CSS also ships — that one belongs to
                                                         the markdown-mode preview pane, which we never
                                                         show (hideModeSwitch + initialEditType wysiwyg))
   Popups (heading/link/codeblock) and the toolbar's overflow ("more") dropdown render as SIBLINGS
   appended near the toolbar button, still inside .rp-rt — .toastui-editor-popup{,-add-heading,...} and
   .toastui-editor-dropdown-toolbar. */

/* ---- Toolbar: hidden until the block has focus (D1/D2) ------------------------------------------ */
.rp-rt .toastui-editor-toolbar { display: none; }
.rp-rt.rp-rt--focus .toastui-editor-toolbar { display: block; }

/* Sticky toolbar: writing at the bottom of a long block used to scroll the toolbar out of view (the
   editor grows with its content — height:auto). Sticky keeps the toolbar's DOM slot (first child of
   .toastui-editor-defaultUI), which is what the CLAUDE.md warning about relocating it is about — Toast
   UI positions its popups/dropdown from the BUTTON's live rect, and offsetTop/getBoundingClientRect
   both reflect a sticky shift, so the popups follow the stuck toolbar (verified in the live editor).
   top matches the scrollport: the desktop canvas (.rp-ced-canvas) starts at 0; ≤768px the page itself
   scrolls under the sticky 56px pane header (bp.css), so the toolbar tucks in right below it.
   z-index 21: above the ProseMirror content layers (vendor z 20), below the pane header (40). */
.rp-rt.rp-rt--focus .toastui-editor-toolbar {
    position: sticky;
    top: 0;
    z-index: 21;
}
/* The toolbar strip's own background must be opaque while stuck — the vendor paints the inner
   .toastui-editor-defaultUI-toolbar, but rounding leaves the outer corners transparent. */
.rp-rt.rp-rt--focus .toastui-editor-toolbar { background: var(--popover); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
@media (max-width: 768px) {
    .rp-rt.rp-rt--focus .toastui-editor-toolbar { top: 56px; }
}

/* ---- Outer chrome: stop looking like a foreign inset inside .rp-lc-block ------------------------- */
/* The border is TRANSPARENT at rest, not absent: the block card (.rp-lc-block) is already a bordered
   container, so a second visible rectangle around the text turns a document into a form field — but
   keeping the 1px reserved means revealing it on focus costs no reflow. Focus therefore reads as
   «toolbar + outline», the two together, on exactly the block being written in. */
.rp-rt .toastui-editor-defaultUI {
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--foreground);
    font-family: var(--font-sans);
}
.rp-rt.rp-rt--focus .toastui-editor-defaultUI { border-color: var(--border); }

.rp-rt .toastui-editor-defaultUI-toolbar {
    background: var(--popover);
    border-bottom: 1px solid var(--border);
}
.rp-rt .toastui-editor-toolbar-divider { background: var(--border); }

.rp-rt.rp-rt--focus .toastui-editor-defaultUI-toolbar button:not(:disabled):hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

/* ---- Content surface (the ProseMirror editable node) --------------------------------------------- */
.rp-rt .toastui-editor-contents {
    font-family: var(--font-sans);
    color: var(--foreground);
    min-height: 120px; /* empty text block stays a comfortable click target, not a sliver */
}
.rp-rt .toastui-editor-contents p { color: var(--foreground); }
.rp-rt .toastui-editor-contents h1,
.rp-rt .toastui-editor-contents h2,
.rp-rt .toastui-editor-contents h3,
.rp-rt .toastui-editor-contents h4,
.rp-rt .toastui-editor-contents h5,
.rp-rt .toastui-editor-contents h6 {
    color: var(--foreground);
}
.rp-rt .toastui-editor-contents h1,
.rp-rt .toastui-editor-contents h2 {
    border-color: var(--border);
}
.rp-rt .toastui-editor-contents del { color: var(--muted-foreground); }
.rp-rt .toastui-editor-contents ul,
.rp-rt .toastui-editor-contents ol,
.rp-rt .toastui-editor-contents menu,
.rp-rt .toastui-editor-contents dir {
    color: var(--foreground);
}
.rp-rt .toastui-editor-contents ul > li::before { background: var(--muted-foreground); }

.rp-rt .toastui-editor-contents blockquote { border-left-color: var(--border); color: var(--muted-foreground); }
.rp-rt .toastui-editor-contents blockquote p,
.rp-rt .toastui-editor-contents blockquote ul,
.rp-rt .toastui-editor-contents blockquote ol {
    color: var(--muted-foreground);
}

.rp-rt .toastui-editor-contents code,
.rp-rt .toastui-editor-contents pre {
    font-family: var(--font-mono);
}
.rp-rt .toastui-editor-contents pre { background: var(--muted); }
.rp-rt .toastui-editor-contents code { background: var(--muted); color: var(--foreground); }
.rp-rt .toastui-editor-contents pre code { background: transparent; color: inherit; }

.rp-rt .toastui-editor-contents hr { border-top-color: var(--border); }

.rp-rt .toastui-editor-contents a { color: var(--primary); }
.rp-rt .toastui-editor-contents a:hover { color: var(--primary); opacity: .85; }

/* Empty-block placeholder — a ProseMirror widget span, present only while the doc is empty. */
.rp-rt .ProseMirror .placeholder { color: var(--muted-foreground); }

/* ---- Popups (heading/link/codeblock) + the toolbar's overflow dropdown --------------------------- */
.rp-rt .toastui-editor-popup {
    background: var(--popover);
    border-color: var(--border);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-md);
}
/* On a phone the vendor's inline `left` math lands the popup partially past the screen's left edge
   (observed: Headings at x=-96 on a 375px viewport). !important is required — the value being
   overridden is an inline style. Pinning to the container's left edge keeps every popup on-screen;
   the inline `top` (under the pressed button) is left alone. */
@media (max-width: 768px) {
    .rp-rt .toastui-editor-popup {
        left: 4px !important;
        right: auto !important;
        /* the vendor centres popups with a -150px margin against an inline left — on a phone that is
           what pushed them off-screen, not the left itself */
        margin-left: 0;
        max-width: calc(100vw - 70px);
    }
}
.rp-rt .toastui-editor-dropdown-toolbar {
    background: var(--popover);
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}
.rp-rt .toastui-editor-popup-body label { color: var(--muted-foreground); }
.rp-rt .toastui-editor-popup-add-heading ul li { color: var(--popover-foreground); }
.rp-rt .toastui-editor-popup-add-heading ul li:hover { background: var(--accent); }

.rp-rt .toastui-editor-popup-body input[type="text"] {
    background: var(--background);
    border-color: var(--input);
    color: var(--foreground);
}
.rp-rt .toastui-editor-popup-body input[type="text"]:focus { outline-color: var(--ring); }

.rp-rt .toastui-editor-defaultUI .toastui-editor-close-button {
    background: var(--secondary);
    border-color: var(--border);
    color: var(--secondary-foreground);
}
.rp-rt .toastui-editor-defaultUI .toastui-editor-close-button:hover { border-color: var(--input); }
.rp-rt .toastui-editor-defaultUI .toastui-editor-ok-button {
    background: var(--primary);
    color: var(--primary-foreground);
}
.rp-rt .toastui-editor-defaultUI .toastui-editor-ok-button:hover { background: var(--primary); opacity: .9; }