/* OUR Quill rules. quill.css beside this file is VENDORED and must stay byte-identical to
   quill/dist/quill.snow.css, because `npm run copy-libs` overwrites it from node_modules.

   These rules used to be appended to the bottom of quill.css itself, which meant one run of
   copy-libs.js silently deleted them -- the picture-remove control below lost its styling and
   became an unstyled character in the corner of every image, with nothing failing and nothing
   to read. Vendored files are overwritten; ours are not. Keep the two apart.

   Loaded wherever quill.css is: the admin asset registry, _AdminStyles.cshtml,
   SitePreviewSnippet.cs (the designer canvas, on the storefront origin), and the kidoo email
   template page's hand-rolled loader. */

/* A picture in a rich-text box needs a way OUT.
   The image is a block embed with contenteditable="false", so removing it otherwise means landing a text
   cursor exactly beside it and pressing Backspace — undiscoverable, and near-impossible when the image is
   the last thing in the box ("I added a picture and I do not have a way how to remove it", 2026-08-05).
   The control shows on hover and on keyboard focus, so it is reachable without a mouse. */
.ql-media-image { position: relative; }

.ql-media-image__remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    line-height: 1;
    font-size: 18px;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 24, 39, .72);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease-in-out;
}

.ql-media-image:hover .ql-media-image__remove,
.ql-media-image__remove:focus-visible { opacity: 1; }

.ql-media-image__remove:hover { background: #b91c1c; }

/* THE TABLE MENU HAS TO FIT THE PANEL IT OPENS IN.
   The module lays its operations out in one horizontal row: fifteen tools, 473px. The admin side
   panel is ~390px, so on a 1366px laptop the row ran 50px past the right edge of the window and the
   last two tools -- one of them "Delete table" -- could not be clicked at all. Measured, not guessed:
   elementFromPoint at their centres returned nothing.
   Wrapping is the fix rather than dropping tools, because every one of them answers a question
   somebody asks ("how do I add a row", "how do I get rid of this"). Two rows of 336px fit. */
.table-up-menu:not(.is-contextmenu) {
    flex-wrap: wrap;
    max-width: min(21rem, calc(100vw - 1.5rem));
}