/* gp-editor.css — theme overrides for Quill's editor chrome.
 *
 * Pairs with wwwroot/js/gp-editor.js: that file configures the editor, this one makes it look like the
 * rest of the site. Load it AFTER quill.snow.css on any page that hosts an editor.
 *
 * WHY IT EXISTS. quill.snow.css ships fixed light-theme colours and hard 1px borders around both the
 * toolbar and the container, which read as two stark boxes stacked inside a dark card. Everything here
 * either removes that chrome or maps it onto the project's own tokens, so the editor sits inside a
 * .gp-card the way the hand-rolled toolbar it replaced did.
 *
 * DO NOT EDIT quill.snow.css TO ACHIEVE ANY OF THIS. The vendored file stays byte-identical to the
 * published build so it can be replaced wholesale on upgrade — see wwwroot/lib/quill/VERSION.txt.
 *
 * The ql- prefix is THIRD-PARTY: neither gp- nor page-specific, so it does not fit UI/ClassNaming.md's
 * two categories. Same situation as rich-text.css, and for the same reason — these are class
 * names Quill emits, not names the project chose.
 */

/* --- Toolbar shell -------------------------------------------------------------------------- */
/* Replaces Quill's full border with the single bottom divider the previous toolbar used, so the
   toolbar reads as a row of the surrounding card rather than as a separate box.
   position: relative anchors the save indicator that gp-editor.js moves in here. */
.ql-toolbar.ql-snow {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    padding-right: 1.5rem; /* room for the save indicator */
    border: none;
    border-bottom: 1px solid var(--line-soft);
    font-family: inherit;
}

/* Quill's own 15px group gap is far too wide once the buttons carry borders. A thin rule between
   groups replaces it, matching the .roster-editor-separator the old toolbar used. */
.ql-toolbar.ql-snow .ql-formats {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
}
/* Separator on the LEFT of every group after the first, rather than on the right of every group but
   the last. :last-of-type would have matched the save indicator gp-editor.js appends — also a span —
   leaving a stray rule after the final button group. This form cannot be broken by what else the
   toolbar contains. */
.ql-toolbar.ql-snow .ql-formats + .ql-formats {
    margin-left: 0.125rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--line);
}

/* --- Buttons -------------------------------------------------------------------------------- */
/* Deliberately mirrors .btn + .btn-sm + .btn-sq from site.css rather than inventing a look. The values
   are repeated rather than shared because Quill emits bare <button> elements and cannot be given the
   project's classes — if .btn ever changes, these four properties must be brought across by hand. */
.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker-label {
    color: var(--ink-2);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 0.25rem;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.3);
    transition: all 0.15s;
}

.ql-toolbar.ql-snow button {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none; /* Quill floats its buttons; the flex toolbar above does the layout instead */
}

.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow .ql-picker-label:hover {
    background: var(--bg-3);
    border-color: var(--ink-4);
    color: var(--ink);
}
.ql-toolbar.ql-snow button:active { transform: translateY(1px); }

/* Active format. Uses the accent the way .btn-active does, kept lighter because several can be lit at
   once and the full .btn-active glow would make the toolbar noisy. */
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: var(--ink);
    background: var(--bg);
    border-color: color-mix(in oklab, var(--accent) 55%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
}

/* --- Icons ---------------------------------------------------------------------------------- */
/* Quill's SVGs carry hardcoded #444 strokes and fills. Mapping them onto the ink scale is what makes
   the icons legible on a dark card — without this they are near-invisible. */
.ql-snow .ql-stroke { stroke: var(--ink-2); }
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill { fill: var(--ink-2); }
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin { stroke: var(--ink-3); }

.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--ink); }
.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--ink); }

/* --- Pickers (header / font / size / align / colour) ---------------------------------------- */
.ql-snow .ql-picker { color: var(--ink-2); font-size: 0.8rem; height: auto; }

.ql-snow .ql-picker-label {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 1.25rem 0.25rem 0.5rem;
    line-height: 1.3;
}
.ql-snow .ql-picker-label::before { line-height: 1.3; }
.ql-snow .ql-picker-label svg { right: 0.25rem; }

/* Quill sizes these by their widest option, which leaves three very wide boxes on the row. */
.ql-snow .ql-picker.ql-header { width: 6rem; }
.ql-snow .ql-picker.ql-font { width: 6.5rem; }
.ql-snow .ql-picker.ql-size { width: 5.5rem; }

/* The dropdown panel. White by default, which is the most jarring part of the untouched theme. */
.ql-snow .ql-picker-options {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 0.25rem;
    box-shadow: var(--sh-card);
    padding: 0.25rem;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options { z-index: 30; }
.ql-snow .ql-picker-item { color: var(--ink-2); border-radius: 0.25rem; padding: 0.25rem 0.375rem; }
.ql-snow .ql-picker-item:hover { color: var(--ink); background: var(--bg-3); }
.ql-snow .ql-picker-item.ql-selected { color: var(--ink); background: var(--bg-3); }

/* The colour grids are swatches, not text — the padding above would break their layout. */
.ql-snow .ql-color-picker .ql-picker-options { width: 10rem; padding: 0.25rem; }
.ql-snow .ql-color-picker .ql-picker-item { padding: 0; border: 1px solid var(--line); }

/* --- Editing surface ------------------------------------------------------------------------ */
/* The container keeps its border removed and hands padding to .ql-editor, which is the element Quill
   actually types into. Loaded after site.css, so this wins over .roster-announcement-editor's padding
   at equal specificity. */
.ql-container.ql-snow {
    border: none;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}
/*  SUPERSEDED 2026-08-11 — the editor grew with the document, without bound.
.ql-editor {
    padding: 0.625rem 0.75rem;
    min-height: 6rem;
    line-height: 1.6;
    color: var(--ink);
}
*/

/*  A BOUNDED, USER-RESIZABLE BOX.
 *
 * Quill core already ships the scrolling half: .ql-editor carries `height: 100%` and
 * `overflow-y: auto`. Nothing was missing except a DEFINITE height for that 100% to resolve against —
 * with an auto-height parent it computed to auto, which is the only reason the editor grew with the
 * document.
 *
 * THE HEIGHT AND THE HANDLE GO ON .ql-editor, NOT ON .ql-container, and that is the whole trick.
 * `resize` only works on an element whose overflow is something other than `visible`, and Quill's
 * link/video tooltip is a CHILD OF .ql-container — the snow theme builds it with quill.addContainer(),
 * which appends into the container. Bounding the CONTAINER would therefore clip that popover against
 * the box edges. .ql-editor is the tooltip's SIBLING, so bounding it constrains the text and leaves
 * the popover free to overhang.
 *
 * overflow-y is restated here rather than inherited from quill.snow.css. It is what makes `resize`
 * legal on this element, and a vendored file that gets replaced wholesale on upgrade is not where
 * that dependency should live.
 *
 * min-height is the DRAG FLOOR — without it the handle drags the editor away to nothing.
 *
 * 24rem is the long-form default (blog post, team document). Surfaces whose content is short by
 * nature override it to 12rem: see faq.css and the roster announcement block in site.css. An override
 * must target `#host .ql-editor`, because a bare id selector reaches the CONTAINER, not this element.
 */
.ql-editor {
    padding: 0.625rem 0.75rem;
    min-height: 6rem;
    height: 24rem;
    overflow-y: auto;
    resize: vertical;
    line-height: 1.6;
    color: var(--ink);
}
.ql-editor.ql-blank::before {
    color: var(--ink-4);
    font-style: normal;
    left: 0.75rem;
    right: 0.75rem;
}

/* --- Link / video entry tooltip -------------------------------------------------------------- */
/* Quill's own popover, used by the link and video buttons. Untouched it is a white box with a blue
   link on a dark page. */
.ql-snow .ql-tooltip {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 0.25rem;
    box-shadow: var(--sh-card);
    color: var(--ink-2);
    padding: 0.375rem 0.625rem;
    z-index: 40;
}
.ql-snow .ql-tooltip input[type=text] {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 0.25rem;
    color: var(--ink);
    padding: 0.25rem 0.375rem;
    font-family: inherit;
    font-size: 0.8rem;
}
.ql-snow .ql-tooltip a.ql-action,
.ql-snow .ql-tooltip a.ql-remove,
.ql-snow .ql-tooltip a.ql-preview { color: var(--accent-glow); }

/* --- Save indicator -------------------------------------------------------------------------- */
/* gp-editor.js moves the page's status element into the toolbar so it sits on the same row as the
   buttons, as it did before. Absolute rather than margin-left:auto because the toolbar wraps to two
   rows at narrow widths and auto-margin would strand the dot on whichever row happened to be last. */
.ql-toolbar.ql-snow .roster-save-indicator {
    position: absolute;
    top: 0.75rem;
    right: 0.625rem;
    margin-left: 0;
}