/*
 * The rich text editors of the back office — `C2` and `C3` of § 2.
 *
 * Quill brings its own stylesheet (imported just before this one in assets/app.js); what is here is
 * only what puts its box in the family of the other back office controls: the same border, the same
 * radius, the same white surface as `.mo-admin-form__control`, and the ~300px height § 2 asks for,
 * resizable.
 *
 * The maquette draws no editor — it draws the "Phrase promotionnelle" screen, whose one text field
 * is a single line — so the geometry follows the form controls it does draw.
 */

.mo-admin-form__editor {
    width: 100%;
    min-height: 300px;
    box-sizing: border-box;
    background-color: var(--mo-surface-default-white);
    color: var(--mo-text-body);
    /* § 2: « Hauteur ~300 px, redimensionnable ». */
    resize: vertical;
    overflow-y: auto;
}

/* The toolbar sits on the box rather than beside it, so the two read as one control. */
.ql-toolbar.ql-snow {
    border: 1px solid var(--mo-border-default-medium);
    border-radius: var(--mo-radius-sm) var(--mo-radius-sm) 0 0;
    background-color: var(--mo-surface-default);
}

.ql-container.ql-snow {
    border: 0;
    font-family: inherit;
    font-size: var(--mo-font-size-body-md);
}

/*
 * Quill's own `.ql-container.ql-snow` (two classes) outweighs `.mo-admin-form__editor` (one class)
 * regardless of source order, which is what zeroed the border out entirely instead of leaving only
 * the top edge open. Matching its specificity here is what makes the bottom/left/right border of a
 * classic control (`.mo-admin-form__control`) actually reach the editor box.
 *
 * `height: auto` overrides Quill's own `.ql-container { height: 100% }` (quill.snow.css), written
 * for a wrapper given an explicit height of its own. Here the wrapper (`.mo-admin-form__counted`)
 * has none — it grows with the toolbar and the editor, `min-height` above being the only floor —
 * so a 100% child sizes itself off its own auto-sized parent, which the two feed back into each
 * other over successive layout passes until the editor is stretched well past its content and the
 * counter beneath it, printed after the editor in flow, is pushed down with it: on the tallest
 * fields the group grows past where the next label was already positioned, and the two overlap.
 */
.mo-admin-form__editor.ql-container.ql-snow {
    height: auto;
    border: 1px solid var(--mo-border-default-medium);
    border-top: 0;
    border-radius: 0 0 var(--mo-radius-sm) var(--mo-radius-sm);
}

.ql-editor {
    min-height: 300px;
}

/* The placeholder of an empty editor, in the colour the design system gives every placeholder. */
.ql-editor.ql-blank::before {
    color: var(--mo-text-placeholder);
    font-style: normal;
}

/*
 * The editor is written into a textarea that stays in the DOM and is what gets posted. It is hidden
 * by the controller rather than here: without JavaScript it must remain visible and usable.
 */