mnfst 0.5.230 → 0.5.232

package/lib/manifest.css

@@ -2922,136 +2922,139 @@
 
 @layer base, components, utilities;
 
-/* Self-contained: every rule the plugin needs lives here, so this stylesheet works
-   on its own. Authors override without specificity battles — rules are :where()
-   wrapped and keyed off data-edit-* attributes, including the injected affordances
-   (handles, overlay, live region, toolbar, menu). No class names to collide with. */
+/* Rules are :where()-wrapped and keyed off data-edit-* attributes, so authors
+   override without specificity battles. Visuals are on for every area;
+   x-edit.bare (data-edit-area="bare") keeps the behaviour and draws none of them. */
 
 @layer utilities {
 
-    /* ---- Editing UI scope ----
-       ALL chrome — cursors, movable/text outlines, size-handle hairlines, drop
-       targets, the floating toolbar — lives under ONE scope: [data-edit-ui], on
-       the region itself or any ancestor (e.g. <body data-edit-ui> for a whole
-       editor view). The plugin sets it on `.authoring` regions automatically;
-       everything else opts in with the attribute. A region outside the scope is
-       just as editable — it simply carries no visual cues. */
+    /* ---- Pieces ---- */
+    :where([data-edit-piece]) {
+        cursor: grab;
+        touch-action: none;
+        transition: opacity 0.12s ease, outline-color 0.12s ease;
+    }
 
-    /* ---- Editable area (armed) ---- */
-    :where([data-edit-armed]) {
-        position: relative;
+    :where([data-edit-piece]):where(:hover):where(:not([data-edit-area="bare"], [data-edit-area="bare"] *, [data-edit-dragging], [data-edit-ghost], :has([data-edit-dragging]) *)) {
+        outline: 1px solid color-mix(in oklch, var(--edit-accent, var(--color-brand-content)) 45%, transparent);
+        outline-offset: 3px;
     }
 
-    /* No default region boundary or label: a page being edited should look
-       like the page, not a diagram of its regions. The hooks remain for a real
-       editor product to draw its own — [data-edit-authoring] marks the region
-       and data-edit-label carries "key · regime". */
+    :where([data-edit-piece]):focus-visible:where(:not([data-edit-area="bare"], [data-edit-area="bare"] *)) {
+        outline: 2px solid var(--edit-accent, var(--color-brand-content));
+        outline-offset: 3px;
+    }
 
-    /* ---- Reorder (pointer + keyboard; touch-action:none lets touch-drag beat scroll) ---- */
-    :where([data-edit-sortable]) {
+    /* Grip: drags a text piece; sits at its inline-start edge */
+    :where([data-edit-grip]) {
+        position: fixed;
+        z-index: 1001;
+        width: var(--edit-grip-size, 0.75rem);
+        height: calc(var(--edit-grip-size, 0.75rem) * 1.5);
+        translate: calc(-100% - var(--edit-grip-offset, 0.25rem)) 0;
+        border-radius: 3px;
+        color: var(--edit-accent, var(--color-brand-content));
+        background: radial-gradient(circle, currentColor 1px, transparent 1.5px) center / 6px 6px;
+        opacity: 0.6;
         cursor: grab;
         touch-action: none;
-        transition: opacity 0.12s ease, outline-color 0.12s ease;
+        user-select: none;
+
+        &:hover {
+            opacity: 1;
+        }
     }
 
-    /* No injected grip: the row itself is the handle (grab cursor), while text
-       inside stays a text surface (text cursor, below). Rows that are pure text
-       still reorder by keyboard. */
+    :where([data-edit-grip]:dir(rtl)) {
+        translate: var(--edit-grip-offset, 0.25rem) 0;
+    }
 
-    :where([data-edit-sortable], [data-edit-movable]):focus-visible {
-        outline: 2px solid var(--edit-accent, var(--color-brand-content));
-        outline-offset: 3px;
+    :where([data-edit-grip][hidden]) {
+        display: none;
     }
 
-    /* Lifted out of the flow and following the pointer. */
-    :where([data-edit-sortable][data-edit-dragging]) {
+    /* Lifted, following the pointer */
+    :where([data-edit-dragging=""]) {
         z-index: 1000;
         cursor: grabbing;
+    }
+
+    :where([data-edit-dragging=""]):where(:not([data-edit-area="bare"], [data-edit-area="bare"] *)) {
         box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
     }
 
-    /* The stand-in holding the slot the drop would land in — a translucent copy of
-       the element by default, because the clearest preview of where it lands is the
-       thing itself. Restyle it freely: hide its contents for an empty outlined slot,
-       give it a background, animate it. */
+    /* Grabbed from the keyboard */
+    :where([data-edit-dragging="keyboard"]):where(:not([data-edit-area="bare"], [data-edit-area="bare"] *)) {
+        outline: 2px dashed var(--edit-accent, var(--color-brand-content));
+        outline-offset: 3px;
+    }
+
+    /* The stand-in holding the slot the drop would land in */
     :where([data-edit-ghost]) {
         opacity: var(--edit-ghost-opacity, 0.4);
         pointer-events: none;
     }
 
-    /* Valid cross-region destinations during a drag: a dashed invitation, and
-       enough height that an EMPTY region can be dropped onto at all. */
-    :where([data-edit-drop-target]) {
+    :where([data-edit-area="bare"] [data-edit-ghost]) {
+        opacity: 0;
+    }
+
+    /* The container the drop would land in */
+    :where(:has(> [data-edit-ghost])):where(:not([data-edit-area="bare"], [data-edit-area="bare"] *)) {
         outline: 1px dashed color-mix(in oklch, var(--edit-accent, var(--color-brand-content)) 55%, transparent);
         outline-offset: 4px;
+    }
+
+    /* Other areas a drag can land in; an empty one still has a surface */
+    :where([data-edit-drop-target]):where(:not([data-edit-area="bare"])) {
+        min-height: 2.5rem;
+        outline: 1px dashed color-mix(in oklch, var(--edit-accent, var(--color-brand-content)) 55%, transparent);
+        outline-offset: 4px;
+    }
+
+    /* While dragging: empty containers can be dropped into, nothing else reacts */
+    :where([data-edit-area]:not([data-edit-area="bare"]):has([data-edit-dragging=""])) :where(:empty:not(img, input, br, hr, svg, video, canvas, iframe, textarea, [data-edit-ghost], [data-edit-handle], [data-edit-area="bare"], [data-edit-area="bare"] *)) {
         min-height: 2.5rem;
     }
 
-    /* Nothing else should react while a drag is in progress */
-    :where([data-edit-dragging-in]) {
+    :where([data-edit-area]:has([data-edit-dragging=""])) {
         cursor: grabbing;
         user-select: none;
 
-        & :where([data-edit-sortable]:not([data-edit-dragging])) {
+        & :where([data-edit-piece]:not([data-edit-dragging])) {
             cursor: grabbing;
         }
     }
 
-    :where([data-edit-grabbed]) {
-        outline: 2px dashed var(--edit-accent, var(--color-brand-content));
-        outline-offset: 3px;
-    }
-
-    /* ---- Move (positioned children) ---- */
-    :where([data-edit-movable]) {
-        cursor: move;
-        touch-action: none;
-    }
-
-    :where([data-edit-ui] [data-edit-movable], [data-edit-ui][data-edit-movable]):hover {
-        outline: 1px solid var(--edit-accent, var(--color-brand-content));
-        outline-offset: 2px;
-    }
-
-    /* ---- Inline text ----
-       One weight everywhere: hover hints and the focused caret both use the same
-       1px line, so focusing doesn't make the page jump a weight class. */
-    :where([data-edit-ui]) :where([data-edit-armed]) [contenteditable="true"],
-    :where([data-edit-ui])[data-edit-armed] [contenteditable="true"] {
+    /* ---- Inline text ---- */
+    :where([data-edit-area]:not([data-edit-area="bare"])) :where([contenteditable="true"], [data-edit-text]):where(:not([data-edit-area="bare"] *)),
+    :where([data-edit-area]:is([contenteditable="true"], [data-edit-text]):not([data-edit-area="bare"])) {
         cursor: text;
         outline: 1px solid transparent;
         outline-offset: 2px;
         border-radius: 3px;
         transition: outline-color 0.12s ease;
-    }
 
-    :where([data-edit-ui]) :where([data-edit-armed]) [contenteditable="true"]:hover,
-    :where([data-edit-ui])[data-edit-armed] [contenteditable="true"]:hover {
-        outline-color: color-mix(in oklch, var(--edit-accent, var(--color-brand-content)) 45%, transparent);
-    }
+        &:hover {
+            outline-color: color-mix(in oklch, var(--edit-accent, var(--color-brand-content)) 45%, transparent);
+        }
 
-    :where([data-edit-ui]) :where([data-edit-armed]) [contenteditable="true"]:focus,
-    :where([data-edit-ui])[data-edit-armed] [contenteditable="true"]:focus {
-        outline-color: var(--edit-accent, var(--color-brand-content));
+        &:focus {
+            outline-color: var(--edit-accent, var(--color-brand-content));
+        }
     }
 
-    /* ---- Size handles ----
-       Injected as siblings of the element's own markup, so its native :hover and
-       :focus still fire and its body stays interactive. */
-    :where([data-edit-sizable]) {
+    /* ---- Size handles ---- */
+    :where(:has(> [data-edit-handle])) {
         position: relative;
     }
 
-    /* Handles reveal on approach rather than sitting on the element permanently.
-       The hairline is chrome, so it follows the [data-edit-ui] scope like every
-       other affordance; outside the scope the handles still work (hit areas and
-       resize cursors stay), they just draw nothing. */
-    :where([data-edit-sizable]) :where([data-edit-handle])::before {
+    :where([data-edit-handle])::before {
         opacity: 0;
         transition: opacity 0.12s ease, background-color 0.15s ease;
     }
 
-    :where([data-edit-ui] [data-edit-sizable], [data-edit-ui][data-edit-sizable]):is(:hover, :focus-within) :where([data-edit-handle])::before {
+    :where(:has(> [data-edit-handle])):is(:hover, :focus-within):where(:not([data-edit-area="bare"], [data-edit-area="bare"] *)) > :where([data-edit-handle])::before {
         opacity: 1;
     }
 
@@ -3059,9 +3062,9 @@
         position: absolute;
         z-index: 100;
         background: transparent;
+        touch-action: none;
         --h: var(--edit-size-handle, 1rem);
 
-        /* Hairline, revealed on hover */
         &::before {
             content: '';
             position: absolute;
@@ -3081,11 +3084,10 @@
         }
     }
 
-    :where([data-edit-handle]):focus-visible {
+    :where([data-edit-handle]):focus-visible:where(:not([data-edit-area="bare"], [data-edit-area="bare"] *)) {
         outline: 2px solid var(--edit-accent, var(--color-brand-content));
     }
 
-    /* Edges span their axis; corners are square. A corner value contains a hyphen. */
     :where([data-edit-handle="top"], [data-edit-handle="bottom"]) {
         left: 0;
         width: 100%;
@@ -3113,8 +3115,6 @@
         height: var(--h);
     }
 
-    /* Inset — each handle straddles its edge; a corner matches one rule per axis.
-       inset-inline-* carries the logical start/end values, so they flip for RTL. */
     :where([data-edit-handle^="top"]) {
         top: calc(var(--h) * -0.5);
     }
@@ -3139,7 +3139,6 @@
         inset-inline-end: calc(var(--h) * -0.5);
     }
 
-    /* Corner cursors; the logical pair flips with direction. */
     :where([data-edit-handle="top-left"], [data-edit-handle="bottom-right"], [data-edit-handle="top-start"], [data-edit-handle="bottom-end"]) {
         cursor: nwse-resize;
     }
@@ -3156,12 +3155,12 @@
         cursor: nwse-resize;
     }
 
-    /* Collapsed past --edit-size-collapse-* — authors restyle freely */
-    :where([data-edit-collapsed]) {
-        opacity: 0.45;
+    /* Bare: handles keep their hit areas and cursors, draw nothing */
+    :where([data-edit-area="bare"] [data-edit-handle])::before {
+        content: none;
     }
 
-    /* Full-viewport capture layer during a size or move drag */
+    /* Pointer capture layer during a resize */
     :where([data-edit-overlay]) {
         position: fixed;
         inset: 0;
@@ -3169,7 +3168,7 @@
         background: transparent;
     }
 
-    /* Screen-reader announcements (keyboard grab / move / drop) */
+    /* Screen-reader announcements */
     :where([data-edit-live]) {
         position: absolute;
         width: 1px;
@@ -3184,69 +3183,13 @@
 
     @media (prefers-reduced-motion: reduce) {
 
-        :where([data-edit-armed]) > [draggable="true"],
+        :where([data-edit-piece]),
         :where([data-edit-handle])::before {
             transition: none;
         }
     }
 }
 
-/* ---- Authoring chrome (toolbar + class/scope menu) ---- */
-@layer components {
-
-    /* Presence is script's business — it knows which route is on screen. Whether it
-       is seen is not, so the toolbar is styled and revealed here. */
-    :where([data-edit-toolbar]) {
-        display: none;
-        position: fixed;
-        inset-block-end: 1rem;
-        inset-inline-end: 1rem;
-        z-index: 9999;
-        gap: 0.5rem;
-        align-items: center;
-
-        & button[disabled] {
-            opacity: 0.35;
-            pointer-events: none;
-        }
-    }
-
-    /* --edit-toolbar: none (any scope up to :root) suppresses it — e.g. a site
-       that demos .authoring regions but has its own publish flow. */
-    :root[data-edit-active] :where([data-edit-toolbar]) {
-        display: var(--edit-toolbar, flex);
-    }
-
-    /* A popover: the top layer sits above every stacking context, so no handle,
-       overlay or z-index anywhere on the page can paint over it. */
-    :where([data-edit-menu]) {
-        position: fixed;
-        margin: 0;
-        width: 16rem;
-        padding: 0.6rem;
-        display: flex;
-        flex-direction: column;
-        gap: 0.4rem;
-        background: var(--color-surface-1);
-        border: 1px solid var(--color-line);
-        border-radius: var(--radius);
-        box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
-
-        & input {
-            width: 100%;
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-            font-size: 0.75rem;
-        }
-
-        & small {
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            color: var(--color-content-subtle);
-        }
-    }
-}
-
 /* Manifest Forms */
 
 @layer base, components, utilities;
@@ -3911,6 +3854,260 @@
     }
 }
 
+/* Manifest Rich Text */
+
+@layer base, components, utilities;
+
+@layer components {
+
+    :where([data-rich-text]:not([data-edit-text])) {
+        position: relative;
+        overflow-y: auto;
+        max-height: var(--rich-text-max-height, none);
+        outline: none;
+
+        /* Document-wide styles (.all controls, $rich.all) */
+        font-family: var(--rich-text-font, inherit);
+        font-size: var(--rich-text-size, inherit);
+        line-height: var(--rich-text-leading, inherit);
+        text-align: var(--rich-text-align, start);
+        color: var(--rich-text-color, inherit);
+
+        /* Placeholder overlays the first line */
+        &[data-rich-text-empty]::before {
+            content: attr(placeholder);
+            position: absolute;
+            inset-block-start: var(--rich-text-padding, 0.75rem);
+            inset-inline: var(--rich-text-padding, 0.75rem);
+            color: var(--color-content-subtle);
+            pointer-events: none;
+        }
+    }
+
+    /* .all background on an unstyled area */
+    :where([data-rich-text].unstyle[style*="--rich-text-background"]) {
+        background: var(--rich-text-background);
+    }
+
+    /* Unstyled: placeholder hugs the line */
+    :where([data-rich-text].unstyle)[data-rich-text-empty]::before {
+        inset-block-start: 0;
+        inset-inline: 0;
+    }
+
+    /* Field look; .unstyle drops it */
+    :where([data-rich-text]:not(.unstyle, [data-edit-text])) {
+        min-height: var(--rich-text-min-height, 8rem);
+        padding: var(--rich-text-padding, 0.75rem);
+        background: var(--rich-text-background, var(--color-surface-1));
+        border: 1px solid var(--color-line);
+        border-radius: var(--radius);
+
+        /* Held while a focus-taking control acts on the area */
+        &:focus,
+        &[data-rich-text-focused] {
+            border-color: var(--color-content-subtle);
+        }
+    }
+
+    /* Single-line (.inline) */
+    :where([data-rich-text-inline]:not(.unstyle, [data-edit-text])) {
+        min-height: var(--rich-text-min-height, auto);
+    }
+
+    /* ---- Selection menu (x-rich-text-menu) ---- */
+    :where([data-rich-text-menu]) {
+        position: fixed;
+        margin: 0;
+        inset: auto;
+        left: var(--rich-text-selection-center);
+        top: var(--rich-text-selection-y);
+        transform: translate(-50%, calc(-100% - 0.5rem));
+        gap: 0.25rem;
+        align-items: center;
+        padding: 0.25rem;
+        background: var(--color-surface-1);
+        border: 1px solid var(--color-line);
+        border-radius: var(--radius);
+        box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
+    }
+
+    /* Display only while open */
+    :where([data-rich-text-menu]:popover-open) {
+        display: flex;
+    }
+
+    /* No Popover API: hidden */
+    @supports not selector(:popover-open) {
+        :where([data-rich-text-menu]) {
+            display: none;
+        }
+    }
+
+    /* ---- Controls ---- */
+    :where([data-rich-text-control]) {
+        &[data-rich-text-active] {
+            background: color-mix(in oklch, var(--color-content-stark) 10%, transparent);
+            color: var(--color-content-stark);
+        }
+
+        & > svg {
+            width: 1rem;
+            height: 1rem;
+        }
+    }
+
+    /* Icon-only buttons */
+    :where(button[data-rich-text-control]:has(> svg:only-child)) {
+        padding: 0.35rem;
+        line-height: 0;
+    }
+
+    /* Disabled controls still catch the click, so the area keeps focus */
+    :where([data-rich-text-control][aria-disabled=true]) {
+        pointer-events: auto;
+    }
+
+    /* ---- Editable content ---- */
+    :where([data-rich-text]:not([data-edit-text])) {
+
+        & > * + * {
+            margin-block-start: 0.75em;
+        }
+
+        & :where(h1, h2, h3, h4, h5, h6) {
+            font-weight: 600;
+            line-height: 1.25;
+        }
+
+        & h1 { font-size: 1.6em }
+        & h2 { font-size: 1.35em }
+        & h3 { font-size: 1.15em }
+
+        & :where(ul, ol) {
+            padding-inline-start: 1.5em;
+        }
+
+        & li {
+            list-style: revert;
+        }
+
+        & blockquote {
+            padding-inline-start: 0.85em;
+            border-inline-start: 2px solid var(--color-line);
+            color: var(--color-content-neutral);
+        }
+
+        & code {
+            padding: 0.1em 0.3em;
+            border-radius: 4px;
+            font-size: 0.9em;
+            background: color-mix(in oklch, var(--color-content-stark) 8%, transparent);
+        }
+
+        & pre {
+            padding: 0.75em;
+            border-radius: var(--radius);
+            overflow-x: auto;
+            background: color-mix(in oklch, var(--color-content-stark) 8%, transparent);
+
+            & code {
+                padding: 0;
+                background: none;
+            }
+        }
+
+        & a {
+            color: var(--color-brand-content);
+            text-decoration: underline;
+        }
+
+        & hr {
+            margin-block: 1em;
+        }
+
+        & img {
+            max-width: 100%;
+        }
+
+        & table {
+            width: 100%;
+            table-layout: fixed;
+
+            & :where(td, th) {
+                padding: 0.35em 0.5em;
+                border: 1px solid var(--color-line);
+                vertical-align: top;
+            }
+
+            & th {
+                font-weight: 600;
+                text-align: start;
+                background: var(--color-surface-2);
+            }
+        }
+
+        /* Cell block selection */
+        & :where(td, th)[data-rich-text-cell] {
+            background: color-mix(in oklch, var(--color-brand-content) 18%, transparent);
+        }
+
+        /* Table border resizing */
+        &[data-rich-text-border="x"] { cursor: col-resize }
+        &[data-rich-text-border="y"] { cursor: row-resize }
+        &[data-rich-text-resizing] { user-select: none }
+        &[data-rich-text-resizing="x"] { cursor: col-resize }
+        &[data-rich-text-resizing="y"] { cursor: row-resize }
+
+        /* Task lists */
+        & :where(ul[data-checklist]) {
+            padding-inline-start: 0.25em;
+            list-style: none;
+
+            & li {
+                display: flex;
+                align-items: baseline;
+                gap: 0.5em;
+                list-style: none;
+            }
+        }
+
+        & :where(dt) {
+            font-weight: 600;
+        }
+
+        & :where(dd) {
+            margin-inline-start: 1.5em;
+        }
+
+        & :where(kbd) {
+            padding: 0.1em 0.35em;
+            border: 1px solid var(--color-line);
+            border-radius: 4px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+            font-size: 0.85em;
+        }
+
+        & :where(mark) {
+            background: color-mix(in oklch, var(--color-brand-content) 25%, transparent);
+            color: inherit;
+        }
+
+        & :where(small) {
+            font-size: 0.8em;
+        }
+
+        & :where(figcaption) {
+            font-size: 0.8em;
+            color: var(--color-content-neutral);
+        }
+
+        & :where(abbr, dfn) {
+            text-decoration: underline dotted;
+        }
+    }
+}
+
 /* Manifest Sidebars */
 
 @layer base, components, utilities;
@@ -4207,268 +4404,6 @@
     }
 }
 
-/* Manifest Text Edit */
-
-@layer base, components, utilities;
-
-/* Self-contained. The editable area is a field first — it borrows the tokens inputs
-   and textareas use, so it sits in a form without looking bolted on. Controls are
-   styled where they are, not by where they sit, because they can be anywhere. */
-
-@layer components {
-
-    :where([data-text-edit]) {
-        position: relative;
-        overflow-y: auto;
-        max-height: var(--text-edit-max-height, none);
-        outline: none;
-
-        /* Page-level styling — set by .page controls, read back by $text.page.
-           Presentation, so it lives here rather than inside the stored markup. */
-        font-family: var(--text-edit-font, inherit);
-        font-size: var(--text-edit-size, inherit);
-        line-height: var(--text-edit-leading, inherit);
-        text-align: var(--text-edit-align, start);
-        color: var(--text-edit-color, inherit);
-
-        /* Flagged from script: :empty never matches the <br> a contenteditable
-           keeps, and the tag holding it is not predictable after a wipe. The
-           placeholder OVERLAYS the first line (it is not a line of its own), so
-           the caret sits on top of it and nothing jumps when typing starts. */
-        &[data-text-edit-empty]::before {
-            content: attr(placeholder);
-            position: absolute;
-            inset-block-start: var(--text-edit-padding, 0.75rem);
-            inset-inline: var(--text-edit-padding, 0.75rem);
-            color: var(--color-content-subtle);
-            pointer-events: none;
-        }
-    }
-
-    /* An unstyled area has no field padding, so its placeholder hugs the line. */
-    :where([data-text-edit].unstyle)[data-text-edit-empty]::before {
-        inset-block-start: 0;
-        inset-inline: 0;
-    }
-
-    /* The FIELD look. `.unstyle` drops it so an area can sit seamlessly in a
-       page — a WYSIWYG document inherits its element's own type and colours;
-       everything above (caret custody, placeholder, commands) still works. */
-    :where([data-text-edit]:not(.unstyle)) {
-        min-height: var(--text-edit-min-height, 8rem);
-        padding: var(--text-edit-padding, 0.75rem);
-        background: var(--text-edit-background, var(--color-surface-1));
-        border: 1px solid var(--color-line);
-        border-radius: var(--radius);
-
-        /* Held while the area owns the editing session — a <select> or colour
-           control takes NATIVE focus by design, and the ring must not flicker
-           off while the writer is mid-command. */
-        &:focus,
-        &[data-text-edit-focused] {
-            border-color: var(--color-content-subtle);
-        }
-    }
-
-    /* ---- Selection menu (x-text-edit-menu) ----
-       Positioned by the --text-edit-selection-* variables the plugin writes to
-       :root, so the default needs no script; restyle or reposition freely. */
-    :where([data-text-edit-menu]) {
-        position: fixed;
-        margin: 0;
-        inset: auto;
-        left: var(--text-edit-selection-center);
-        top: var(--text-edit-selection-y);
-        transform: translate(-50%, calc(-100% - 0.5rem));
-        gap: 0.25rem;
-        align-items: center;
-        padding: 0.25rem;
-        background: var(--color-surface-1);
-        border: 1px solid var(--color-line);
-        border-radius: var(--radius);
-        box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
-    }
-
-    /* display only while OPEN: an author display on the base rule would beat
-       the UA's closed-popover display:none, leaving the menu floating fixed
-       over the page before any selection exists. */
-    :where([data-text-edit-menu]:popover-open) {
-        display: flex;
-    }
-
-    /* Without the Popover API the attribute is inert and the menu would render
-       permanently fixed on the page — hide it there; the bubble is progressive
-       enhancement. (In supporting browsers a closed popover is hidden natively.) */
-    @supports not selector(:popover-open) {
-        :where([data-text-edit-menu]) {
-            display: none;
-        }
-    }
-
-    /* ---- Controls ----
-       A control is marked wherever it lives, so a toolbar is optional markup and
-       never a requirement. The reset already dims [aria-disabled=true]. */
-    :where([data-text-edit-control]) {
-        &[data-text-edit-active] {
-            background: color-mix(in oklch, var(--color-content-stark) 10%, transparent);
-            color: var(--color-content-stark);
-        }
-
-        & > svg {
-            width: 1rem;
-            height: 1rem;
-        }
-    }
-
-    :where(button[data-text-edit-control]) {
-        padding: 0.35rem;
-        line-height: 0;
-    }
-
-    /* ---- Editable content ----
-       The editor authors real block elements, so style them as elements. Deliberately
-       lighter than the .prose class, which sets a reading measure this field can't use. */
-    :where([data-text-edit]) {
-
-        & > * + * {
-            margin-block-start: 0.75em;
-        }
-
-        & :where(h1, h2, h3, h4, h5, h6) {
-            font-weight: 600;
-            line-height: 1.25;
-        }
-
-        & h1 { font-size: 1.6em }
-        & h2 { font-size: 1.35em }
-        & h3 { font-size: 1.15em }
-
-        & :where(ul, ol) {
-            padding-inline-start: 1.5em;
-        }
-
-        & li {
-            list-style: revert;
-        }
-
-        & blockquote {
-            padding-inline-start: 0.85em;
-            border-inline-start: 2px solid var(--color-line);
-            color: var(--color-content-neutral);
-        }
-
-        & code {
-            padding: 0.1em 0.3em;
-            border-radius: 4px;
-            font-size: 0.9em;
-            background: color-mix(in oklch, var(--color-content-stark) 8%, transparent);
-        }
-
-        & pre {
-            padding: 0.75em;
-            border-radius: var(--radius);
-            overflow-x: auto;
-            background: color-mix(in oklch, var(--color-content-stark) 8%, transparent);
-
-            & code {
-                padding: 0;
-                background: none;
-            }
-        }
-
-        & a {
-            color: var(--color-brand-content);
-            text-decoration: underline;
-        }
-
-        & hr {
-            margin-block: 1em;
-        }
-
-        & img {
-            max-width: 100%;
-        }
-
-        & table {
-            width: 100%;
-            table-layout: fixed;
-
-            & :where(td, th) {
-                padding: 0.35em 0.5em;
-                border: 1px solid var(--color-line);
-                vertical-align: top;
-            }
-
-            & th {
-                font-weight: 600;
-                text-align: start;
-                background: var(--color-surface-2);
-            }
-        }
-
-        /* A block selection across cells. The browser can only highlight text, so an
-           empty cell shows nothing — this is what makes a spreadsheet-style
-           selection visible. */
-        & :where(td, th)[data-text-edit-cell] {
-            background: color-mix(in oklch, var(--color-brand-content) 18%, transparent);
-        }
-
-        /* Borders read as grabbable only when the pointer is on one */
-        &[data-text-edit-border="x"] { cursor: col-resize }
-        &[data-text-edit-border="y"] { cursor: row-resize }
-        &[data-text-edit-resizing] { user-select: none }
-        &[data-text-edit-resizing="x"] { cursor: col-resize }
-        &[data-text-edit-resizing="y"] { cursor: row-resize }
-
-        /* Task lists — the checkbox replaces the marker */
-        & :where(ul[data-checklist]) {
-            padding-inline-start: 0.25em;
-            list-style: none;
-
-            & li {
-                display: flex;
-                align-items: baseline;
-                gap: 0.5em;
-                list-style: none;
-            }
-        }
-
-        & :where(dt) {
-            font-weight: 600;
-        }
-
-        & :where(dd) {
-            margin-inline-start: 1.5em;
-        }
-
-        & :where(kbd) {
-            padding: 0.1em 0.35em;
-            border: 1px solid var(--color-line);
-            border-radius: 4px;
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-            font-size: 0.85em;
-        }
-
-        & :where(mark) {
-            background: color-mix(in oklch, var(--color-brand-content) 25%, transparent);
-            color: inherit;
-        }
-
-        & :where(small) {
-            font-size: 0.8em;
-        }
-
-        & :where(figcaption) {
-            font-size: 0.8em;
-            color: var(--color-content-neutral);
-        }
-
-        & :where(abbr, dfn) {
-            text-decoration: underline dotted;
-        }
-    }
-}
-
 /* ManifestToasts */
 
 @layer base, components, utilities;