/* Minification failed. Returning unminified contents.
(5,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(186,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(203,29): run-time error CSS1039: Token not allowed after unary operator: '-toolbar-height'
(221,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(230,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-muted'
(235,25): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(247,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-muted'
(251,32): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(259,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-subtle'
(271,30): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(282,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(347,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(367,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(372,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-muted'
(378,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(391,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(408,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(435,22): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(445,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(462,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(499,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-gold-tint'
(527,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(537,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(547,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(551,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(556,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-gold-tint'
(561,22): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(600,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-muted'
(605,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(633,24): run-time error CSS1039: Token not allowed after unary operator: '-brand-accent-soft'
(636,31): run-time error CSS1039: Token not allowed after unary operator: '-brand-accent-soft'
(639,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-muted'
(642,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(643,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(644,24): run-time error CSS1039: Token not allowed after unary operator: '-border-default'
(652,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(655,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(659,24): run-time error CSS1039: Token not allowed after unary operator: '-border-strong'
(666,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-subtle'
(667,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(668,24): run-time error CSS1039: Token not allowed after unary operator: '-border-strong'
(671,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(675,22): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(676,17): run-time error CSS1039: Token not allowed after unary operator: '-text-on-dark'
(680,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-subtle'
(681,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(682,24): run-time error CSS1039: Token not allowed after unary operator: '-border-strong'
(686,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(692,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(693,24): run-time error CSS1039: Token not allowed after unary operator: '-border-strong'
(694,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(698,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-muted'
(699,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(700,24): run-time error CSS1039: Token not allowed after unary operator: '-border-strong'
(704,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(705,24): run-time error CSS1039: Token not allowed after unary operator: '-border-strong'
(706,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(709,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-muted'
(710,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(711,24): run-time error CSS1039: Token not allowed after unary operator: '-border-strong'
(715,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(716,24): run-time error CSS1039: Token not allowed after unary operator: '-border-strong'
(719,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(722,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-muted'
(725,28): run-time error CSS1039: Token not allowed after unary operator: '-border-default'
(729,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-subtle'
(730,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(731,24): run-time error CSS1039: Token not allowed after unary operator: '-border-strong'
(853,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(854,28): run-time error CSS1039: Token not allowed after unary operator: '-border-default'
(858,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(880,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(885,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-muted'
(886,32): run-time error CSS1039: Token not allowed after unary operator: '-border-default'
(890,25): run-time error CSS1039: Token not allowed after unary operator: '-danger'
(898,26): run-time error CSS1039: Token not allowed after unary operator: '-border-default'
(910,32): run-time error CSS1039: Token not allowed after unary operator: '-border-default'
(912,26): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(913,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(918,32): run-time error CSS1039: Token not allowed after unary operator: '-brand-accent'
(944,33): run-time error CSS1039: Token not allowed after unary operator: '-brand-accent'
(945,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(959,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-accent'
(968,17): run-time error CSS1039: Token not allowed after unary operator: '-text-tertiary'
(984,17): run-time error CSS1039: Token not allowed after unary operator: '-text-body'
(994,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-subtle'
(995,33): run-time error CSS1039: Token not allowed after unary operator: '-brand-accent'
(997,17): run-time error CSS1039: Token not allowed after unary operator: '-text-body'
(1023,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-purple-tint'
(1024,33): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(1026,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(1055,17): run-time error CSS1039: Token not allowed after unary operator: '-text-tertiary'
(1066,32): run-time error CSS1039: Token not allowed after unary operator: '-brand-accent'
(1079,35): run-time error CSS1039: Token not allowed after unary operator: '-brand-accent'
(1080,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(1093,22): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(1103,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-accent'
(1140,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-subtle'
(1141,28): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(1143,17): run-time error CSS1039: Token not allowed after unary operator: '-text-body'
(1153,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-accent'
(1169,17): run-time error CSS1039: Token not allowed after unary operator: '-text-body'
(1173,17): run-time error CSS1039: Token not allowed after unary operator: '-text-body'
(1181,17): run-time error CSS1039: Token not allowed after unary operator: '-text-strong'
(1185,17): run-time error CSS1039: Token not allowed after unary operator: '-text-body'
(1219,28): run-time error CSS1039: Token not allowed after unary operator: '-border-light'
(1221,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(1228,31): run-time error CSS1039: Token not allowed after unary operator: '-border-light'
(1244,17): run-time error CSS1039: Token not allowed after unary operator: '-text-body'
(1282,27): run-time error CSS1039: Token not allowed after unary operator: '-scrollbar-thumb'
(1285,28): run-time error CSS1039: Token not allowed after unary operator: '-scrollbar-thumb'
(1288,28): run-time error CSS1039: Token not allowed after unary operator: '-scrollbar-thumb-hover'
(1295,24): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(1296,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-purple-tint'
(1303,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-surface'
(1304,24): run-time error CSS1039: Token not allowed after unary operator: '-border-default'
(1307,24): run-time error CSS1039: Token not allowed after unary operator: '-brand-primary'
(1308,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-purple-tint'
 */
/* Styles for BUZZHub rich text editor */
.bh-rte-toolbar {
    position: sticky;
    top: 0;
    background: var(--bg-surface, #fff);
    z-index: 100;
    padding: 4px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.bh-rte-editor {
    position: relative;
    border: 1px solid #ccc;
    min-height: 200px;
    padding: 4px;
    font-family: Arial, sans-serif;
    overflow-y: auto;
    max-height: 80vh;
    resize: vertical;
    /* Height SNAPS, does not transition. The second .bh-rte-editor rule below
       (line ~190) declares `transition: padding-top 0.15s` which silently
       overrides any transition declared here (CSS transition shorthand has no
       merge semantics). The original intent (smooth grow/shrink during autoGrow)
       has not been live since the second rule was added. Reviving it requires
       refactoring autoGrow to drop its `style.height='auto'`-then-numeric
       pattern -- otherwise rapid typing queues overlapping transitions and
       causes visible jank. See Loop B in
       .claude/plans/looking-at-the-rte-delegated-dongarra.md. */
}

    .bh-rte-editor table {
        border-collapse: collapse;
        position: relative;
    }

    .bh-rte-editor td,
    .bh-rte-editor th {
        position: relative;
    }

.col-resizer {
    position: absolute;
    top: 0;
    right: -2px;
    width: 4px;
    cursor: col-resize;
    user-select: none;
    height: 100%;
    z-index: 1;
}

.table-resizer {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    cursor: nwse-resize;
    background: transparent;
    z-index: 2;
}

/* Allow native image drag/resize and forward pointer events */
.bh-rte-editor img {
    max-width: none !important;
    display: inline-block !important;
    position: static !important;
    pointer-events: auto !important;
    user-select: auto !important;
    touch-action: manipulation !important;
}

/* optional helper class to enable pointer interaction globally */
img.bh-pointer {
    max-width: none !important;
    display: inline-block !important;
    position: static !important;
    pointer-events: auto !important;
    user-select: auto !important;
    touch-action: manipulation !important;
}

    /* override global pseudo elements that block mouse events */
    .bh-rte-editor img::before,
    .bh-rte-editor img::after,
    img.bh-pointer::before,
    img.bh-pointer::after {
        display: none !important;
        content: none !important;
        pointer-events: none !important;
    }

.bh-rte-editor img.selected {
    outline: 2px dashed #3b99fc;
    cursor: nwse-resize;
}

.bh-rte-editor img:focus:not(.selected) {
    outline: none !important;
}

.bh-rte-editor ol,
.bh-rte-editor ul {
    padding-left: 3em;
    list-style-position: outside;
}

.bh-rte-editor li {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

    .bh-rte-editor li::marker {
        font-family: inherit;
        font-size: inherit;
        color: inherit;
    }


.bh-rte-editor table {
    border-collapse: collapse;
    width: 100%;
}

    .bh-rte-editor table td,
    .bh-rte-editor table th {
        border: 1px solid #ccc;
        padding: 4px;
    }

.bh-rte-editor table {
    width: auto;
    table-layout: fixed; /* so your pixel widths stick */
}

.bh-rte-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none; /* toggled by JS: overlay.style.display = 'flex' */
    pointer-events: none; /* or auto if you want to block interactions while loading */
    background: rgba(255,255,255,0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
    .bh-rte-overlay.show {
        display: flex; 
        pointer-events: auto;
    }

    .bh-rte-overlay .spinner-border {
        position: static !important;
    }

/* outer wrapper */
.bh-rte-container {
    position: relative;
    border: 1px solid #fdb913;
    border-radius: 4px;
    margin-top: 5px;
    padding-left: 2px;
    margin-bottom: 5px;
    overflow: hidden;
    /* 2026-05-11: container queries below adapt the toolbar to THIS wrapper's
       width rather than the viewport, so RTE mounted in modals/sidebars/two-col
       layouts collapses to the minimal toolbar even on a wide desktop. */
    container-type: inline-size;
    container-name: bh-rte;
}

    /* split the border between toolbar & editor */
    .bh-rte-container .bh-rte-toolbar {
        border-bottom: 1px solid #fdb913;
    }


.word-count {
    font-size: .875rem;
    color: var(--text-secondary, #666);
    user-select: none;
}

/* editor already has padding, so just remove its own border */
.bh-rte-editor {
    border: none;
    min-height: 200px;
    font-family: Arial, sans-serif;
    resize: vertical;
    border: none;
    min-height: 200px;
    resize: vertical;
    padding: 0 0.75rem 0.375rem;
    transition: padding-top 0.15s;
}
.bh-rte-toolbar.show + .bh-rte-editor {
    padding-top: calc( var(--toolbar-height) + 4px );
}
    .bh-rte-editor.form-control {
        padding: 0 .75rem .375rem;
    }

.bh-rte-container {
    border: 1px solid #fdb913;
    border-radius: 4px;
    overflow: hidden;
}

.bh-rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
    background: var(--bg-surface, #fff);
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    padding-right: 5px;
}

    .bh-rte-toolbar button.active {
        background-color: var(--bg-muted, #f0f0f0);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    }

        .bh-rte-toolbar button.active i {
            color: var(--brand-primary, #3d1a6f); 
        }

        /* Example: hover/active combined */
        .bh-rte-toolbar button.active:hover {
            background-color: #d0d0d0;
        }

#tableGrid .cell {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background: var(--bg-muted, #f8f8f8);
}

    #tableGrid .cell.hovered {
        background-color: var(--brand-primary, #3d1a6f);
    }



    .bh-rte-toolbar .bh-table-dropdown #tableGrid .cell {
        width: 20px;
        height: 20px;
        background: var(--bg-subtle, #f9f9f9);
        border: 1px solid #ccc;
        cursor: pointer;
    }


/* 1. Make the dropdown wrapper position itself as the origin */
.bh-rte-toolbar .bh-table-dropdown {
    position: relative;
}

        .bh-rte-toolbar .bh-table-dropdown #tableGrid .cell.hovered {
            background: var(--brand-primary, #3d1a6f);
        }



    /* 2. Hide the entire panel by default, and absolutely position it */
    .bh-rte-toolbar .bh-table-dropdown .bh-table-panel {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        background: var(--bg-surface, #fff);
        border: 1px solid #ccc;
        padding: 8px;
        z-index: 2000;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    /* 3. When its parent has �open�, show the panel */
    .bh-rte-toolbar .bh-table-dropdown.open .bh-table-panel {
        display: block;
    }

    /* 4. Tidy the button row under the grid */
    .bh-rte-toolbar .bh-table-dropdown #bh-table-controls {
        margin-top: 8px;
        display: flex;
        gap: 4px;
    }

.bh-rte-editor.form-control {
    border: none;
    color: black;
}
.bh-rte-editor.form-control {
    /* default height */
    min-height: 300px;
}

/* Override by wrapper size */
.richtextwrapper-xs .bh-rte-editor.form-control {
    min-height: 150px;
}

.richtextwrapper-sm .bh-rte-editor.form-control {
    min-height: 200px;
}

.RadMultiLine .bh-rte-editor.form-control {
    min-height: 200px;
}
.richtextwrapper-lg .bh-rte-editor.form-control {
    min-height: 700px;
}

.RTEHeading .bh-rte-editor.form-control {
    min-height: 75px;
    font-weight: 900;
    font-size: 25px !important;
}

/* Always override for screens under 990px */
@media (max-width: 990px) {
    .bh-rte-editor.form-control {
        min-height: 400px !important;
    }
}

.richtextwrapper-sm .bh-rte-container {
    margin-bottom: 2em;
}

/* Table Context Menu */
.bh-table-context-menu {
    position: fixed;
    z-index: 10000;
    background: var(--bg-surface, #fff);
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 4px 0;
    min-width: 160px;
    display: none;
}

.bh-table-context-menu.show {
    display: block;
}

.bh-table-context-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary, #333);
    transition: background 0.15s;
}

.bh-table-context-menu .menu-item:hover {
    background: var(--bg-muted, #f0f0f0);
}

.bh-table-context-menu .menu-item i {
    width: 16px;
    text-align: center;
    color: var(--text-secondary, #666);
}

.bh-table-context-menu .menu-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

/* Table cell size dialog */
.bh-cell-size-dialog {
    position: fixed;
    z-index: 10001;
    background: var(--bg-surface, #fff);
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 12px;
    min-width: 200px;
    display: none;
}

.bh-cell-size-dialog.show {
    display: block;
}

.bh-cell-size-dialog label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--text-primary, #333);
}

.bh-cell-size-dialog input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 14px;
}

.bh-cell-size-dialog .dialog-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.bh-cell-size-dialog button {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.bh-cell-size-dialog .btn-apply {
    background: var(--brand-primary, #3d1a6f);
    color: #fff;
}

.bh-cell-size-dialog .btn-apply:hover {
    background: #0056b3;
}

.bh-cell-size-dialog .btn-cancel {
    background: #e0e0e0;
    color: var(--text-primary, #333);
}

.bh-cell-size-dialog .btn-cancel:hover {
    background: #ccc;
}

/* =========================================================================
   Fullscreen Mode
   ========================================================================= */
.bh-rte-container.bh-rte-fullscreen {
    position: fixed !important;
    inset: 0;
    z-index: 2147483646;
    border-radius: 0;
    margin: 0;
    border: none;
    background: var(--bg-surface, #fff);
    display: flex;
    flex-direction: column;
}

.bh-rte-fullscreen .bh-rte-toolbar {
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 0 0 auto;
    border-bottom: 2px solid #3d1a6f;
    padding: 8px 12px;
}

.bh-rte-fullscreen .bh-rte-editor.form-control {
    flex: 1 1 auto;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    border: none;
    padding: 16px 24px;
    overflow-y: auto;
    resize: none;
}

/* Icon swap for fullscreen toggle is handled in JS (FA 7 uses --fa custom props) */

/* =========================================================================
   Find & Replace Bar
   ========================================================================= */
.bh-rte-find-bar {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-gold-tint, #fdf8ec);
    border-bottom: 1px solid #fdb913;
    font-size: 0.85rem;
}

.bh-rte-find-bar.show {
    display: flex;
}

.bh-rte-find-bar input {
    flex: 1 1 120px;
    max-width: 220px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.85rem;
}

.bh-rte-find-bar input:focus {
    outline: none;
    border-color: #3d1a6f;
    box-shadow: 0 0 0 2px rgba(61, 26, 111, 0.15);
}

.bh-rte-find-bar button {
    padding: 4px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: var(--bg-surface, #fff);
    cursor: pointer;
    font-size: 0.85rem;
}

.bh-rte-find-bar button:hover {
    background: #e8e8e8;
}

.bh-rte-find-bar .bh-find-count {
    color: var(--text-secondary, #666);
    min-width: 50px;
    font-size: 0.8rem;
}

.bh-rte-find-bar .bh-find-close {
    border: none;
    background: none;
    font-size: 1.1rem;
    padding: 2px 6px;
    color: var(--text-muted, #999);
}

.bh-rte-find-bar .bh-find-close:hover {
    color: var(--text-primary, #333);
}

/* Highlight for find matches */
.bh-find-match {
    background: var(--bg-gold-tint, #fff59d);
    border-radius: 2px;
}

.bh-find-match.bh-find-current {
    background: var(--brand-primary, #3d1a6f);
    color: #fff;
    border-radius: 2px;
}

/* Find bar mobile responsive */
@media (max-width: 576px) {
    .bh-rte-find-bar {
        gap: 4px;
        padding: 6px 8px;
    }
    .bh-rte-find-bar input {
        max-width: none;
        flex: 1 1 100%;
    }
    .bh-rte-find-bar .bh-find-replace-one,
    .bh-rte-find-bar .bh-find-replace-all {
        font-size: 0.75rem;
        padding: 4px 6px;
    }
}

/* =========================================================================
   Color Picker Buttons (Font Color + Highlight Color)
   ========================================================================= */
.bh-color-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}

.bh-color-btn:hover {
    background: var(--bg-muted, #f0f0f0);
}

.bh-color-btn i {
    font-size: 14px;
    color: var(--text-primary, #333);
    line-height: 1;
}

.bh-color-bar {
    display: block;
    width: 18px;
    height: 4px;
    border-radius: 1px;
    margin-top: 2px;
    background: #000;
}

.bh-color-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

/* =============================================================================
   DARK MODE -- Rich Text Editor
   ============================================================================= */
[data-theme="dark"] .bh-rte-container {
    border-color: var(--brand-accent-soft, #8a6d18);
}
[data-theme="dark"] .bh-rte-container .bh-rte-toolbar {
    border-bottom-color: var(--brand-accent-soft, #8a6d18);
}
[data-theme="dark"] .bh-rte-toolbar {
    background: var(--bg-muted, #1e1e1e);
}
[data-theme="dark"] .bh-rte-editor {
    background: var(--bg-surface, #141414);
    color: var(--text-primary, #e8e8e8);
    border-color: var(--border-default, #2a2a2a);
}
/* Force all RTE content to light text in dark mode. Inline color styles from
   pasted/authored content (black, #333, etc.) become invisible on dark backgrounds.
   This blanket rule overrides ALL inline text colour. Users who intentionally set
   coloured text (red highlights etc.) will see it reset to white in dark mode,
   which is the correct trade-off vs unreadable black-on-black. */
[data-theme="dark"] .bh-rte-editor * {
    color: var(--text-primary, #e8e8e8) !important;
}
[data-theme="dark"] .bh-rte-editor a {
    color: var(--brand-primary, #a76bdf) !important;
}
[data-theme="dark"] .bh-rte-editor table td,
[data-theme="dark"] .bh-rte-editor table th {
    border-color: var(--border-strong, #3a3a3a);
}
[data-theme="dark"] .bh-rte-overlay {
    background: rgba(0,0,0,0.6);
}
/* Toolbar buttons */
[data-theme="dark"] .bh-rte-toolbar button {
    background: var(--bg-subtle, #1a1a1a);
    color: var(--text-primary, #e8e8e8);
    border-color: var(--border-strong, #3a3a3a);
}
[data-theme="dark"] .bh-rte-toolbar button:hover {
    background: var(--bg-surface, #141414);
}
[data-theme="dark"] .bh-rte-toolbar button.active,
[data-theme="dark"] .bh-rte-toolbar button:active {
    background: var(--brand-primary, #a76bdf);
    color: var(--text-on-dark, #fff);
}
/* Toolbar selects (font family, size, format) */
[data-theme="dark"] .bh-rte-toolbar select {
    background: var(--bg-subtle, #1a1a1a);
    color: var(--text-primary, #e8e8e8);
    border-color: var(--border-strong, #3a3a3a);
}
/* Word count */
[data-theme="dark"] .word-count {
    color: var(--text-muted, #808080);
}
/* Dropdowns (font picker, color picker panels) */
[data-theme="dark"] .bh-rte-toolbar .dropdown-menu,
[data-theme="dark"] .bh-font-picker,
[data-theme="dark"] .bh-rte-search-panel {
    background: var(--bg-surface, #141414);
    border-color: var(--border-strong, #3a3a3a);
    color: var(--text-primary, #e8e8e8);
}
[data-theme="dark"] .bh-font-picker .font-option:hover,
[data-theme="dark"] .bh-rte-search-panel input {
    background: var(--bg-muted, #1e1e1e);
    color: var(--text-primary, #e8e8e8);
    border-color: var(--border-strong, #3a3a3a);
}
/* Table dialog */
[data-theme="dark"] .bh-rte-table-dialog {
    background: var(--bg-surface, #141414);
    border-color: var(--border-strong, #3a3a3a);
    color: var(--text-primary, #e8e8e8);
}
[data-theme="dark"] .bh-rte-table-dialog input {
    background: var(--bg-muted, #1e1e1e);
    color: var(--text-primary, #e8e8e8);
    border-color: var(--border-strong, #3a3a3a);
}
/* Context menu */
[data-theme="dark"] .bh-rte-context-menu {
    background: var(--bg-surface, #141414);
    border-color: var(--border-strong, #3a3a3a);
}
[data-theme="dark"] .bh-rte-context-menu .ctx-item {
    color: var(--text-primary, #e8e8e8);
}
[data-theme="dark"] .bh-rte-context-menu .ctx-item:hover {
    background: var(--bg-muted, #1e1e1e);
}
[data-theme="dark"] .bh-rte-context-menu .ctx-separator {
    border-top-color: var(--border-default, #2a2a2a);
}
/* Rewrite dropdown */
[data-theme="dark"] .bh-rte-toolbar .rewrite-select {
    background: var(--bg-subtle, #1a1a1a);
    color: var(--text-primary, #e8e8e8);
    border-color: var(--border-strong, #3a3a3a);
}
/* =============================================================================
   Desktop: progressive disclosure. Hide non-essential tools behind "..." toggle.
   Essentials kept visible: B/I/U, lists, link, undo/redo, AI rewrite, word count.
   Toggle persists per-user via localStorage in RichTextEditor.js init().
   Mobile (<=768px) rules below override this -- mobile hides the "..." toggle
   too because the mobile rules already strip the same buttons.
   ============================================================================= */
@container bh-rte (min-width: 769px) {
    .bh-rte-container:not(.bh-rte-overflow-shown) .bh-rte-toolbar select.font-name,
    .bh-rte-container:not(.bh-rte-overflow-shown) .bh-rte-toolbar select.font-size,
    .bh-rte-container:not(.bh-rte-overflow-shown) .bh-rte-toolbar select.block-format,
    .bh-rte-container:not(.bh-rte-overflow-shown) .bh-rte-toolbar button[data-cmd="strikeThrough"],
    .bh-rte-container:not(.bh-rte-overflow-shown) .bh-rte-toolbar button[data-cmd="superscript"],
    .bh-rte-container:not(.bh-rte-overflow-shown) .bh-rte-toolbar button[data-cmd="undo"],
    .bh-rte-container:not(.bh-rte-overflow-shown) .bh-rte-toolbar button[data-cmd="redo"],
    .bh-rte-container:not(.bh-rte-overflow-shown) .bh-rte-toolbar button#linkToggleBtn,
    .bh-rte-container:not(.bh-rte-overflow-shown) .bh-rte-toolbar button[data-image],
    .bh-rte-container:not(.bh-rte-overflow-shown) .bh-rte-toolbar .bh-table-dropdown,
    .bh-rte-container:not(.bh-rte-overflow-shown) .bh-rte-toolbar .bh-color-btn,
    .bh-rte-container:not(.bh-rte-overflow-shown) .bh-rte-toolbar button[data-find-replace] {
        display: none !important;
    }
    /* Fullscreen stays OUT of the overflow -- always visible in the toolbar (George 2026-05-23:
       "ensure full screen always appears in the media release editor"). */
    .bh-rte-container.bh-rte-overflow-shown .bh-rte-toolbar button[data-overflow-toggle] {
        background-color: var(--bg-muted, #f0f0f0);
    }
    .bh-rte-container.bh-rte-overflow-shown .bh-rte-toolbar button[data-overflow-toggle] i {
        color: var(--brand-primary, #3d1a6f);
    }
}

/* Narrow container: hide the overflow toggle entirely -- the narrow-container
   block below already strips the same set, so the toggle has nothing to reveal. */
@container bh-rte (max-width: 768px) {
    .bh-rte-toolbar button[data-overflow-toggle] {
        display: none !important;
    }
}

/* =============================================================================
   Editor height clamp on small viewports. Viewport-relative (45vh) so the editor
   can't blow up beyond half the screen on a phone. Stays on @media because the
   constraint is "small SCREEN" not "narrow container".
   ============================================================================= */
@media (max-width: 768px) {
    /* Force compact min/max-height across every richtextwrapper-* and RadMultiLine variant.
       !important + multiple selectors needed to beat .richtextwrapper-xs/.RadMultiLine specificity
       AND any inline height set by autoGrow's _bhLastHeight ratchet. */
    .bh-rte-editor,
    .richtextwrapper-xs .bh-rte-editor,
    .richtextwrapper-xs .bh-rte-editor.form-control,
    .richtextwrapper-sm .bh-rte-editor,
    .richtextwrapper-sm .bh-rte-editor.form-control,
    .richtextwrapper-lg .bh-rte-editor,
    .richtextwrapper-lg .bh-rte-editor.form-control,
    .RadMultiLine .bh-rte-editor,
    .RadMultiLine .bh-rte-editor.form-control,
    .RTEHeading .bh-rte-editor,
    .RTEHeading .bh-rte-editor.form-control {
        min-height: 120px !important;
        max-height: 45vh !important;
        height: auto !important;
    }
}

/* =============================================================================
   Narrow CONTAINER: collapse RTE toolbar to essential controls.
   Hides font/size/style selectors, advanced formatting, color, table, AI tone,
   leaving bold/italic/underline/lists/link/undo/redo + clear formatting.
   Container-query so RTE mounted in a narrow modal/sidebar collapses to minimal
   even on a wide desktop viewport. System-wide -- BHRichTextEditor.ascx is
   shared across all pages.
   ============================================================================= */
@container bh-rte (max-width: 768px) {
    .bh-rte-toolbar {
        gap: 2px;
        padding: 2px 0;
    }
    /* Hide font / size / style selects */
    .bh-rte-toolbar select.font-name,
    .bh-rte-toolbar select.font-size,
    .bh-rte-toolbar select.block-format,
    .bh-rte-toolbar select.tone-select,
    .bh-rte-toolbar #toneSelect {
        display: none !important;
    }
    /* Hide advanced formatting commands */
    .bh-rte-toolbar button[data-cmd="strikeThrough"],
    .bh-rte-toolbar button[data-cmd="superscript"],
    .bh-rte-toolbar button[data-cmd="outdent"],
    .bh-rte-toolbar button[data-cmd="indent"],
    .bh-rte-toolbar button[data-cmd="justifyLeft"],
    .bh-rte-toolbar button[data-cmd="justifyCenter"],
    .bh-rte-toolbar button[data-cmd="justifyRight"] {
        display: none !important;
    }
    /* Hide image / table / color / find / fullscreen */
    .bh-rte-toolbar button[data-image],
    .bh-rte-toolbar button[data-find-replace],
    .bh-rte-toolbar button[data-fullscreen],
    .bh-rte-toolbar .bh-table-dropdown,
    .bh-rte-toolbar .bh-color-btn {
        display: none !important;
    }
    /* Word count: keep but tighten */
    .bh-rte-toolbar .word-count {
        font-size: 0.7rem;
    }
}

/* =============================================================================
   Image on-select mini-toolbar. Floats above the selected <img> with
   size / fit / align / alt / replace / remove controls. Positioned by JS
   (absolute inside .bh-rte-container, or fixed when appended to body).
   Neutral surface styling; dark-mode safe via theme tokens.
   ============================================================================= */
.bh-rte-img-toolbar {
    position: absolute;
    z-index: 2147483640;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-default, #ddd);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    padding: 4px;
    color: var(--text-primary, #333);
}

    .bh-rte-img-toolbar .bh-rte-img-toolbar-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 2px;
    }

    .bh-rte-img-toolbar .bh-rte-img-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 26px;
        height: 26px;
        padding: 0 6px;
        font-size: 0.78rem;
        line-height: 1;
        border: 1px solid transparent;
        border-radius: 4px;
        background: transparent;
        color: var(--text-primary, #333);
        cursor: pointer;
    }

        .bh-rte-img-toolbar .bh-rte-img-btn:hover {
            background: var(--bg-muted, #f0f0f0);
            border-color: var(--border-default, #ddd);
        }

        .bh-rte-img-toolbar .bh-rte-img-btn.bh-rte-img-btn-danger:hover {
            color: var(--danger, #c0392b);
        }

    .bh-rte-img-toolbar .bh-rte-img-sep {
        display: inline-block;
        width: 1px;
        align-self: stretch;
        margin: 2px 3px;
        background: var(--border-default, #ddd);
    }

    .bh-rte-img-toolbar .bh-rte-img-alt-row {
        margin-top: 4px;
    }

    .bh-rte-img-toolbar input {
        width: 100%;
        box-sizing: border-box;
        font-size: 0.8rem;
        padding: 3px 6px;
        border: 1px solid var(--border-default, #ddd);
        border-radius: 4px;
        background: var(--bg-surface, #fff);
        color: var(--text-primary, #333);
    }

        .bh-rte-img-toolbar input:focus {
            outline: none;
            border-color: var(--brand-accent, #fdb913);
        }

/* release-styles.css -- Shared "rich release" named treatments
   ============================================================
   ONE definition for every surface that renders Media Release content:
   the BHRichTextEditor canvas (WYSIWYG authoring), the Newswire card,
   the email preview, and the PDF (Report.Master / Media Pack components).

   Named, semantic classes (the JS agent wraps selections in them; the
   markup agent's toolbar buttons trigger them). DO NOT rename without
   updating the Phase 1 shared contract.

   Brand palette only: #3d1a6f (primary) / #5a2d82 (secondary) /
   #fdb913 (accent gold) / cream. Dark-mode safe via theme-tokens.css
   tokens with hex fallbacks. Structural CSS only -- no JS dependency,
   so PagedJS / ChromeHtmlToPdf render the styles identically. */

/* ----------------------------------------------------------------
   Pull quote -- blockquote.bh-rs-pullquote (+ optional <cite> child)
   Gold left-border, purple text, italic, large opening-quote glyph.
   ---------------------------------------------------------------- */
blockquote.bh-rs-pullquote {
    position: relative;
    margin: 1.75rem 0;
    padding: 0.75rem 1.25rem 0.75rem 2.5rem;
    border-left: 4px solid var(--brand-accent, #fdb913);
    color: var(--brand-primary, #3d1a6f);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.5;
}

blockquote.bh-rs-pullquote::before {
    content: "\201C"; /* left double quotation mark */
    position: absolute;
    left: 0.4rem;
    top: -0.1rem;
    font-size: 2.75rem;
    line-height: 1;
    font-style: normal;
    color: var(--brand-accent, #fdb913);
}

blockquote.bh-rs-pullquote cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-tertiary, #888);
}

blockquote.bh-rs-pullquote cite::before {
    content: "-- ";
}

/* ----------------------------------------------------------------
   Standfirst / intro paragraph -- p.bh-rs-standfirst
   Larger, medium weight, slightly muted lead-in.
   ---------------------------------------------------------------- */
p.bh-rs-standfirst {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    color: var(--text-body, #555);
}

/* ----------------------------------------------------------------
   Key facts panel -- div.bh-rs-keyfacts (contains a <ul>)
   Subtle tinted background, gold left-border, rounded, tidy list.
   ---------------------------------------------------------------- */
div.bh-rs-keyfacts {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--bg-subtle, #f4f5f7);
    border-left: 4px solid var(--brand-accent, #fdb913);
    border-radius: 0 6px 6px 0;
    color: var(--text-body, #555);
}

div.bh-rs-keyfacts > ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

div.bh-rs-keyfacts > ul > li {
    margin-bottom: 0.4rem;
    line-height: 1.45;
}

div.bh-rs-keyfacts > ul > li:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------
   Callout -- div.bh-rs-callout
   Brand-tinted (purple) background, accent left-border, padding.
   "Make it stand out".
   ---------------------------------------------------------------- */
div.bh-rs-callout {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--bg-purple-tint, #f0ebf7);
    border-left: 4px solid var(--brand-primary, #3d1a6f);
    border-radius: 0 6px 6px 0;
    color: var(--brand-primary, #3d1a6f);
}

div.bh-rs-callout > :first-child {
    margin-top: 0;
}

div.bh-rs-callout > :last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------
   Figure -- figure.bh-rs-figure (+ figcaption)
   Centered, generous margin, responsive image, small tertiary caption.
   ---------------------------------------------------------------- */
figure.bh-rs-figure {
    margin: 1.75rem auto;
    text-align: center;
}

figure.bh-rs-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

figure.bh-rs-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-tertiary, #888);
    text-align: center;
    line-height: 1.4;
}

/* ----------------------------------------------------------------
   Divider -- hr.bh-rs-divider
   Thin branded rule, generous vertical margin.
   ---------------------------------------------------------------- */
hr.bh-rs-divider {
    border: 0;
    border-top: 2px solid var(--brand-accent, #fdb913);
    width: 60px;
    margin: 2rem auto;
    opacity: 1;
}

/* ----------------------------------------------------------------
   Sub-heading + highlight -- h3.bh-rs-subheading
   Branded section heading with a gold "highlight" underline.
   ---------------------------------------------------------------- */
h3.bh-rs-subheading {
    margin: 1.75rem 0 0.75rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--brand-accent, #fdb913);
    color: var(--brand-primary, #3d1a6f);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

/* ----------------------------------------------------------------
   Call-to-action block -- div.bh-rs-cta
   Centred, brand-filled banner. White text; any inner link goes gold.
   ---------------------------------------------------------------- */
div.bh-rs-cta {
    margin: 1.75rem auto;
    padding: 1.25rem 1.5rem;
    background: var(--brand-primary, #3d1a6f);
    border-radius: 8px;
    text-align: center;
    color: #ffffff;
}

div.bh-rs-cta > :first-child { margin-top: 0; }
div.bh-rs-cta > :last-child { margin-bottom: 0; }

div.bh-rs-cta a {
    color: var(--brand-accent, #fdb913);
    font-weight: 700;
    text-decoration: underline;
}

/* ----------------------------------------------------------------
   Image gallery -- div.bh-rs-gallery
   Responsive grid wrapping 2+ images / figures.
   ---------------------------------------------------------------- */
div.bh-rs-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
    margin: 1.75rem 0;
    align-items: start;
}

div.bh-rs-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

div.bh-rs-gallery figure {
    margin: 0;
}

/* ----------------------------------------------------------------
   Video / social embed -- div.bh-rs-embed
   Media-link card (sanitiser-safe; no iframe). Play glyph + accent border.
   A live in-page player needs an HtmlSanitiser iframe allowlist (separate).
   ---------------------------------------------------------------- */
div.bh-rs-embed {
    position: relative;
    margin: 1.75rem 0;
    padding: 1rem 1.25rem 1rem 3rem;
    background: var(--bg-subtle, #f4f5f7);
    border: 1px solid var(--brand-primary, #3d1a6f);
    border-radius: 6px;
    color: var(--text-body, #555);
}

div.bh-rs-embed::before {
    content: "\25B6"; /* play triangle */
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--brand-accent, #fdb913);
}

div.bh-rs-embed > :first-child { margin-top: 0; }
div.bh-rs-embed > :last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------
   Dark mode overrides
   Most colours flow from tokens that already flip (brand-primary,
   brand-accent, bg-subtle, bg-purple-tint, text-body, text-tertiary).
   The pull quote glyph + standfirst already inherit flipped tokens.
   These overrides only touch cases where a flipped token alone would
   read poorly: the purple callout text needs a brighter tone on a
   dark tinted background, and the figure image edge softens.
   ---------------------------------------------------------------- */
[data-theme="dark"] div.bh-rs-callout {
    color: var(--text-body, #d4d4d4);
}

[data-theme="dark"] blockquote.bh-rs-pullquote {
    color: var(--text-body, #d4d4d4);
}

[data-theme="dark"] figure.bh-rs-figure img {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] h3.bh-rs-subheading {
    color: var(--text-strong, #e8e3f2);
}

[data-theme="dark"] div.bh-rs-embed {
    color: var(--text-body, #d4d4d4);
}

/* ===================================================================
   release-editor.css -- BUZZHub RTE "document canvas" skin (Jen 2026-05-22)

   OPT-IN editor-surface skin for the shared Rich Text Editor. The control
   emits the class .bh-rte--canvas on its .bh-rte-container ROOT only when it
   is initialised with a release profile (body / summary / notes); the default
   profile ("full", ~20 other consumers) emits NO class, so the shared RTE
   look is byte-unchanged everywhere else.

   These rules are the editor-SURFACE treatment ONLY: the paper fill, the
   softened hairline that replaces the shared gold container frame, the radius,
   the split-border soften between toolbar and editor, the body type / measure
   on the contenteditable, and the focus-within ring + lift. Page-composition
   (the document sheet wrapper, eyebrow labels, headline input, action row)
   stays page-scoped in CampaignBuilder.aspx -- this file is reusable by ANY
   release-profile RTE instance.

   COSMETIC ONLY: no position / overflow / height changes, so the RTE's
   focus-based sticky toolbar, autoGrow and resize behaviour are untouched.
   Brand palette + theme tokens only; every colour via var(--token, #fallback)
   so dark mode flips automatically (explicit dark overrides at the foot).
   ASCII only.

   Loaded everywhere the RTE loads (BHBootStrapCSS + RichTextEditorCSS bundles)
   but only .bh-rte--canvas instances are affected.
   =================================================================== */

/* Container: soften the shared gold frame to a quiet hairline + paper fill +
   soft radius. No position / overflow change, so the sticky focus toolbar
   keeps working. */
.bh-rte--canvas {
    border: 1px solid var(--border-light, #e9ecef);
    border-radius: 10px;
    background: var(--bg-surface, #ffffff);
    box-shadow: inset 0 0 0 1px rgba(61, 26, 111, 0.012);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Split-border between toolbar and editor: soften the shared gold rule. */
.bh-rte--canvas .bh-rte-toolbar {
    border-bottom-color: var(--border-light, #e9ecef);
}

/* The shared .bh-rte-editor contenteditable carries its own 1px frame
   (RichTextEditor.css:16). Inside the canvas container -- which already draws a
   hairline + radius + 2px left padding -- that produced two parallel borders
   (the "double line" running the full height of the tall release body). The
   container hairline is the only frame the canvas surface needs. */
.bh-rte--canvas .bh-rte-editor {
    border: none;
}

/* Body type: comfortable measure + generous line-height + refined size. */
.bh-rte--canvas .bh-rte-editor {
    font-size: 0.975rem;
    line-height: 1.6;
    color: var(--text-body, #2d2d34);
    /* Give the canvas a real writing area so it does not collapse to a couple of lines
       when the content is short (the "squished" look). It still scrolls past its cap. */
    min-height: 40vh;
}

/* Selection + scrollbar stay SYSTEM-neutral on the canvas, never the preview brand.
   updateBrandChip() (InlineMediaReleaseEditor.js) pins --brand-primary / --brand-accent /
   --brand-secondary inline on THIS .bh-rte-editor so the release-style blocks (pull-quote /
   key-facts / callout) preview in the chosen brand. The global ::selection (CustomBootstrap.css)
   and scrollbar-thumb (BUZZHub.css / theme-tokens.css) rules read those same --brand-* tokens,
   so without these resets the text-selection highlight + scrollbar would inherit the previewed
   brand -- and a dark preview colour made selected body text invisible (appeared "unselectable").
   Pin them to fixed neutral values so the editing surface always behaves like a system text
   field regardless of which brand is being previewed. */
.bh-rte--canvas .bh-rte-editor::selection,
.bh-rte--canvas .bh-rte-editor ::selection {
    background: #b3d4fc;
    color: #1a1a1a;
    text-shadow: none;
}
.bh-rte--canvas .bh-rte-editor::-moz-selection,
.bh-rte--canvas .bh-rte-editor ::-moz-selection {
    background: #b3d4fc;
    color: #1a1a1a;
    text-shadow: none;
}
[data-theme="dark"] .bh-rte--canvas .bh-rte-editor::selection,
[data-theme="dark"] .bh-rte--canvas .bh-rte-editor ::selection {
    background: #34406b;
    color: #f0f0f0;
}
[data-theme="dark"] .bh-rte--canvas .bh-rte-editor::-moz-selection,
[data-theme="dark"] .bh-rte--canvas .bh-rte-editor ::-moz-selection {
    background: #34406b;
    color: #f0f0f0;
}
.bh-rte--canvas .bh-rte-editor {
    scrollbar-color: var(--scrollbar-thumb, #c1c1c1) transparent;
}
.bh-rte--canvas .bh-rte-editor::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb, #c1c1c1);
}
.bh-rte--canvas .bh-rte-editor::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover, #a1a1a1);
}

/* Refined focus state -- brand-purple ring + subtle lift on the focused
   field's RTE container (premium micro-interaction, CSS only via
   :focus-within). Reserved gold accent role kept on the surrounding chrome. */
.bh-rte--canvas:focus-within {
    border-color: var(--brand-primary, #3d1a6f);
    box-shadow: 0 0 0 3px var(--bg-purple-tint, #f0ebf7),
                0 6px 18px rgba(61, 26, 111, 0.08);
}

/* Dark mode -- the structural tokens above already flip, but pin the paper
   surface + hairline + focus ring to the dark palette for crisp contrast. */
[data-theme="dark"] .bh-rte--canvas {
    background: var(--bg-surface, #141414);
    border-color: var(--border-default, #2a2a2a);
}
[data-theme="dark"] .bh-rte--canvas:focus-within {
    border-color: var(--brand-primary, #a76bdf);
    box-shadow: 0 0 0 3px var(--bg-purple-tint, #1e1430),
                0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Mobile (phone) -- the comfortable reading-measure + centred document column
   is a desktop nicety. On a narrow viewport a centred / capped editor column
   can exceed the viewport and clip at the right edge. Drop any measure-cap and
   centring so the canvas editor fills its container full-width, and trim the
   horizontal padding so long words / pasted content never push past the phone
   edge. Benefits every release-profile canvas consumer, not just the MR tab.
   Box-sizing keeps the reduced padding inside the 100% width. */
@media (max-width: 768px) {
    .bh-rte--canvas {
        max-width: none;
        width: 100%;
    }
    .bh-rte--canvas .bh-rte-editor {
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}