export declare const POPUP_STYLE_ID = "popup-renderer-styles";
export declare const POPUP_CSS = "\n.pm-overlay {\n  position: fixed; inset: 0; z-index: 2147483000;\n  display: flex; align-items: center; justify-content: center;\n  background: rgba(17, 24, 39, 0.55); padding: 16px;\n}\n/* The launcher: what a click-triggered form shows before it's opened. It sits\n   in the page flow where the form would have gone, so the row it's in is the\n   only thing that positions it. Styled to match the card's submit button \u2014 the\n   two are the same gesture split across two moments. */\n.pm-launcher-row { width: 100%; }\n.pm-launcher {\n  display: inline-block; box-sizing: border-box;\n  padding: 12px 20px; border: none; border-radius: 8px; cursor: pointer;\n  background: #111827; color: #fff; font-size: 15px; font-weight: 600;\n  font-family: Arial, Helvetica, sans-serif;\n  line-height: 1.3; max-width: 100%;\n}\n.pm-launcher:hover { filter: brightness(1.08); }\n.pm-launcher:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.pm-card {\n  position: relative; box-sizing: border-box;\n  display: flex; flex-direction: column;\n  background: #fff; color: #111827; border-radius: 14px;\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n  width: 100%; max-width: 520px; min-height: 350px; overflow: hidden;\n  font-family: Arial, Helvetica, sans-serif;\n}\n.pm-card.pm-has-image { max-width: 720px; }\n.pm-layout { display: flex; flex: 1; }\n.pm-layout.pm-image-left { flex-direction: row; }\n.pm-layout.pm-image-right { flex-direction: row-reverse; }\n.pm-layout.pm-image-top { flex-direction: column; }\n.pm-media { flex: 1 1 45%; min-height: 240px; background-size: cover; background-position: center; }\n/* Image on top: a full-width banner above the form, not a side column. */\n.pm-image-top .pm-media { flex: none; min-height: 200px; }\n.pm-body { flex: 1 1 55%; padding: 28px; display: flex; flex-direction: column; gap: 14px; }\n/* The field grid. The body stays a flex column \u2014 that is what lets the submit\n   button sink to the bottom of a short card \u2014 and every item above the button\n   lives in this one grid instead. Twelve columns, and each item spans as many\n   as it claims, so fields sharing a row is a consequence of their widths rather\n   than a grouping stored on the form. Items stretch to their row's height, which\n   costs nothing visually (a field is a column that packs to the top) and buys\n   an even bottom edge across the row \u2014 which is what the \"new row below\" drop\n   line is drawn against. */\n.pm-grid {\n  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: 14px 12px;\n}\n/* min-width: 0 so a long placeholder can't push a column past its share.\n\n   --pm-col is the column the row was placed on (see columnStartsOf): rows that\n   fill the grid get 1, which is where the grid's own packing would have put\n   them anyway, and a short row gets the offset that centres it. Unset falls\n   back to `auto`, the packing this rule had before. The narrow-card rule at\n   the foot of this sheet writes grid-column outright, so it drops the placement\n   with the columns \u2014 there is nothing to centre once everything is full width. */\n.pm-grid > [data-pm-item] {\n  grid-column: var(--pm-col, auto) / span var(--pm-span, 12); min-width: 0;\n}\n/* Inputs are sized by their column, so their padding has to come out of that\n   width rather than add to it. */\n.pm-grid > .pm-field input, .pm-grid > .pm-field textarea, .pm-grid > .pm-field select {\n  width: 100%; box-sizing: border-box;\n}\n\n/* ---------------------------------------------------------------------------\n   Builder canvas. None of these classes exist in a live popup: the builder is\n   the only caller that turns them on, by passing the editing callbacks. They\n   live here rather than in the editor stylesheet because the popup renders\n   inside its own style scope (a shadow root, in the web-component build).\n   --------------------------------------------------------------------------- */\n/* Clicking a field reveals its editor, so the whole item reads as one target. */\n.pm-body--interactive [data-pm-item] { cursor: pointer; }\n.pm-body--interactive .pm-field input,\n.pm-body--interactive .pm-field textarea,\n.pm-body--interactive .pm-field select { cursor: pointer; }\n/* Editing mode: the form's own controls go inert, so a click lands on the field\n   and selects it instead of filling the form in. Preview mode drops the class\n   and everything works again. */\n.pm-body--editable input,\n.pm-body--editable textarea,\n.pm-body--editable select { pointer-events: none; }\n/* Same for an author's own markup: a link or a video embed inside it would eat\n   the click that selects the block, and the drag that moves it. The block's own\n   toolbar is a child too, and it is the one child that has to stay live. */\n.pm-body--editable .pm-html > *:not(.pm-tools) { pointer-events: none; }\n.pm-body--editable [data-pm-item] {\n  position: relative; border-radius: 8px;\n  outline: 1.5px dashed transparent; outline-offset: 5px;\n  transition: outline-color 0.12s ease, background-color 0.12s ease, opacity 0.12s ease;\n  /* Hand the gesture to the drag handlers rather than the scroller, so a drag\n     works on a touch screen too. */\n  touch-action: none;\n}\n/* While a drag is running the whole card is a drop surface, so nothing inside\n   it should look selectable. */\n.pm-body--dragging { user-select: none; cursor: grabbing; }\n/* The item in hand lifts and fades; the rest of the card stays put until the\n   drop, when they all slide into the new order (see dragSort's settle). */\n.pm-body--editable [data-pm-item][data-pm-dragging] {\n  opacity: 0.45; transform: scale(1.015); transition: transform 0.12s ease;\n}\n/* Private: the field is on the form but never painted in a live popup, so the\n   canvas shows it faded \u2014 present enough to click, plainly not part of what a\n   visitor sees. Hovering or selecting it lifts it most of the way back so it\n   can be read while it is being edited. Preview drops it altogether.\n\n   Most of the way, not all: the toggle that makes a field private sits in that\n   field's own panel, which is open because the field is selected. Lifting a\n   selected field to full strength therefore swallowed the only feedback the\n   toggle had, and the fade appeared to arrive late \u2014 on the click somewhere\n   else that dropped both the selection and the hover at once. Landing short of\n   full opacity keeps the field readable and still says something happened. */\n.pm-body--editable [data-pm-item][data-pm-private] { opacity: 0.4; }\n.pm-body--editable [data-pm-item][data-pm-private]:hover,\n.pm-body--editable [data-pm-item][data-pm-private][data-pm-selected] { opacity: 0.75; }\n.pm-body--editable [data-pm-item]:hover { outline-color: var(--pm-edit-accent, #4f46e5); }\n.pm-body--editable [data-pm-item][data-pm-selected] {\n  outline: 2px solid var(--pm-edit-accent, #4f46e5); outline-offset: 5px;\n  background: color-mix(in srgb, var(--pm-edit-accent, #4f46e5) 7%, transparent);\n}\n/* The item's own toolbar: the grip that moves it and the button that throws it\n   away, in one small bar, sitting above the item's leading top corner.\n\n   Hover only, never selection: with both, pointing at one element while another\n   was selected put two bars on the card at once, and only one of them was the\n   one under the hand. One element, one bar.\n\n   The bar is only on screen while the item is hovered, so the pointer must be\n   able to travel from the item onto the bar without ever being on neither: a\n   strip of daylight between the two would unhover the item, and the bar would\n   fade out of the way of the hand reaching for it. Hence the hairline of\n   overlap below, and hence the bar itself taking the pointer while it shows \u2014\n   its padding and the gap between the two controls are part of that path, and\n   letting them fall through to whatever is behind would break it mid-journey. */\n.pm-tools {\n  position: absolute; z-index: 3;\n  /* 28px tall and seated a pixel into the item, so it rises 27px \u2014 a pixel\n     inside what the card's own padding (28px) leaves above the topmost item,\n     which is the tightest the bar ever has to sit. The card clips its overflow,\n     so that pixel is the whole budget. */\n  inset-inline-start: -2px; bottom: calc(100% - 1px);\n  display: flex; align-items: center; gap: 1px;\n  padding: 2px; border-radius: 9px;\n  background: #fff; border: 1px solid rgba(15, 23, 42, 0.08);\n  /* Two shadows: a tight one that seats the bar on the surface and a wide soft\n     one that lifts it off whatever it covers, which may be a photo. */\n  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10), 0 8px 20px -6px rgba(15, 23, 42, 0.28);\n  opacity: 0; transform: translateY(2px); pointer-events: none;\n  transition: opacity 0.12s ease, transform 0.12s ease;\n}\n.pm-body--editable [data-pm-item]:hover > .pm-tools { opacity: 1; transform: none; pointer-events: auto; }\n.pm-body--editable [data-pm-item]:hover > .pm-tools .pm-tool { pointer-events: auto; }\n/* While something is in hand these would just trail the pointer across the\n   card; the drop line is the only thing worth reading then. Weighted to match\n   the two rules above, which they have to outrank. */\n.pm-body--editable.pm-body--dragging [data-pm-item] > .pm-tools { opacity: 0; pointer-events: none; }\n.pm-body--editable.pm-body--dragging [data-pm-item] > .pm-tools .pm-tool { pointer-events: none; }\n.pm-tool {\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 22px; height: 22px; padding: 0; margin: 0;\n  border: none; border-radius: 6px; background: transparent;\n  color: #475569; cursor: pointer; pointer-events: none;\n  transition: background-color 0.12s ease, color 0.12s ease;\n}\n.pm-tool:hover { background: rgba(15, 23, 42, 0.06); color: #0f172a; }\n.pm-tool:active { background: rgba(15, 23, 42, 0.11); }\n/* The one control here that throws work away says so on the way to being\n   pressed, rather than only after. */\n.pm-tool--remove:hover { background: rgba(220, 38, 38, 0.10); color: #dc2626; }\n.pm-tool--remove:active { background: rgba(220, 38, 38, 0.18); }\n.pm-tool--move { cursor: grab; }\n.pm-body--dragging .pm-tool--move { cursor: grabbing; }\n/* The icons come from a set that ships its own stylesheet, which the popup does\n   not load \u2014 so their box is set here, like everything else about this card.\n   The bin is drawn heavier than the arrows, so it takes a pixel less to sit at\n   the same weight beside them. */\n.pm-tool svg { display: block; width: 16px; height: 16px; }\n.pm-tool--remove svg { width: 15px; height: 15px; }\n/* Where it will land: a line in the gap the item would drop into, on the side\n   it is coming from. A target on its own line takes a horizontal line above or\n   below it; one sharing a row of the grid takes a vertical line down the gap\n   beside it, because that is the gap the field would actually slot into. */\n.pm-body--editable [data-pm-item][data-pm-drop]::after {\n  content: ''; position: absolute; border-radius: 3px;\n  background: var(--pm-edit-accent, #4f46e5);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-edit-accent, #4f46e5) 20%, transparent);\n}\n/* Half the 12px column gap on each side, so the segments on the fields of one\n   row meet in the gaps and read as a single line across the whole row. */\n.pm-body--editable [data-pm-item][data-pm-drop=\"before\"]::after,\n.pm-body--editable [data-pm-item][data-pm-drop=\"after\"]::after { inset-inline: -6px; height: 3px; }\n.pm-body--editable [data-pm-item][data-pm-drop=\"before\"]::after { top: -8px; }\n.pm-body--editable [data-pm-item][data-pm-drop=\"after\"]::after { bottom: -8px; }\n.pm-body--editable [data-pm-item][data-pm-drop=\"start\"]::after,\n.pm-body--editable [data-pm-item][data-pm-drop=\"end\"]::after { inset-block: -4px; width: 3px; }\n.pm-body--editable [data-pm-item][data-pm-drop=\"start\"]::after { inset-inline-start: -7px; }\n.pm-body--editable [data-pm-item][data-pm-drop=\"end\"]::after { inset-inline-end: -7px; }\n\n/* The card's own handles: its side edges set the width, its bottom edge the\n   minimum height, a corner inside the body sets the padding and the trailing\n   bottom corner sets how round the corners are. Barely there\n   until the pointer is near \u2014 this is chrome over the author's design, so it\n   earns its ink only when reached for. */\n.pm-card-handle {\n  position: absolute; z-index: 3;\n  opacity: 0; touch-action: none;\n  background: var(--pm-edit-accent, #4f46e5);\n  border-radius: 4px;\n  transition: opacity 0.12s ease;\n}\n.pm-card:hover > .pm-card-handle { opacity: 0.35; }\n.pm-card > .pm-card-handle:hover,\n.pm-card > .pm-card-handle[data-pm-dragging] { opacity: 1; }\n/* Side edges: full-height bars hugging the inside of the card, so they can be\n   grabbed without the card needing room around it for them. */\n.pm-card-handle--width-start,\n.pm-card-handle--width-end { top: 14%; height: 72%; width: 5px; cursor: ew-resize; }\n.pm-card-handle--width-start { left: 2px; }\n.pm-card-handle--width-end { right: 2px; }\n.pm-card-handle--height {\n  left: 25%; width: 50%; bottom: 2px; height: 5px; cursor: ns-resize;\n}\n/* Padding sits at the leading corner of the content, which is exactly the gap\n   it controls \u2014 drag it inward and the gap opens. */\n.pm-card-handle--padding {\n  inset-block-start: calc(var(--pm-pad, 28px) - 5px);\n  inset-inline-start: calc(var(--pm-pad, 28px) - 5px);\n  width: 10px; height: 10px; border-radius: 3px; cursor: nwse-resize;\n}\n[dir=\"rtl\"] .pm-card-handle--padding { cursor: nesw-resize; }\n/* Rounding sits on the arc of the trailing bottom corner \u2014 the one corner no\n   other handle or the close button is already using. A round corner pulls its\n   midpoint r*(1 - 1/\u221A2) \u2248 0.29r in from each edge, so the grip tracks the arc\n   it's setting instead of hovering over a corner that has moved away from it. */\n.pm-card-handle--radius {\n  inset-block-end: calc(var(--pm-radius, 14px) * 0.29 + 2px);\n  inset-inline-end: calc(var(--pm-radius, 14px) * 0.29 + 2px);\n  width: 10px; height: 10px; border-radius: 999px; cursor: nwse-resize;\n}\n[dir=\"rtl\"] .pm-card-handle--radius { cursor: nesw-resize; }\n/* The two corner grips wear a glyph on a round knob, so what they set is legible\n   from where they sit rather than only under the pointer. The edge grips carry\n   none: a bar down the side and a bar along the bottom already say which way\n   they drag. The knob hangs off the grip's inner side \u2014 the card clips its\n   overflow \u2014 and never takes the pointer itself: the grip owns the gesture over\n   the whole knob (see the pane below), and the glyph is only there to be read. */\n.pm-card-handle > svg {\n  position: absolute; width: 14px; height: 14px;\n  padding: 3px; box-sizing: content-box;\n  border-radius: 999px; background: inherit; color: #fff;\n  pointer-events: none;\n  transition: opacity 0.12s ease;\n}\n.pm-card-handle--padding > svg { top: 0; inset-inline-start: 0; }\n.pm-card-handle--radius > svg { bottom: 0; inset-inline-end: 0; }\n/* The knob is what the eye aims at, so the whole knob has to be grabbable \u2014 the\n   10px grip alone left three quarters of a 20px glyph dead to the pointer, and\n   a control that looks pressable over an area it doesn't answer to reads as\n   broken. The knob itself stays out of the gesture (an <svg> only takes the\n   pointer where it is painted, which would make the gaps between strokes cold),\n   so the grip claims the knob's box with a pane of its own: invisible, exactly\n   where the knob is drawn, and part of the grip for both hover and the drag. */\n.pm-card-handle--padding::before,\n.pm-card-handle--radius::before {\n  content: ''; position: absolute;\n  width: 20px; height: 20px; border-radius: 999px;\n}\n.pm-card-handle--padding::before { inset-block-start: 0; inset-inline-start: 0; }\n.pm-card-handle--radius::before { inset-block-end: 0; inset-inline-end: 0; }\n/* The glyph is the resting state. Both corner grips offset their chip away from\n   the corner (below), so the two can sit together on hover \u2014 the knob only steps\n   aside once the drag is running and the number takes over. */\n.pm-card-handle[data-pm-dragging] > svg { opacity: 0; }\n/* What the handle is, on hover; what it would settle on, while it's in hand.\n   The same chip either way \u2014 one thing appearing at the pointer, changing what\n   it says as the gesture goes on, rather than two competing labels. */\n.pm-card-handle[data-pm-tip]:hover::after,\n.pm-card-handle[data-pm-readout]::after {\n  content: attr(data-pm-tip);\n  position: absolute; inset-inline-start: 50%; top: 50%;\n  transform: translate(-50%, -50%);\n  padding: 3px 7px; border-radius: 5px; white-space: nowrap;\n  background: var(--pm-edit-accent, #4f46e5); color: #fff;\n  font-size: 11px; font-weight: 600; font-family: ui-monospace, monospace;\n  /* The chip is a caption, never a target: a hover tooltip that swallows the\n     pointer would flicker itself in and out. */\n  pointer-events: none;\n}\n/* Once the drag starts the name has been read and the number is the whole\n   point, so the chip drops to it. Both attributes are matched, and the rule\n   comes last, so it outweighs the hover rule for a grip still under the\n   pointer \u2014 which the two corner grips are, since they follow the value. */\n.pm-card-handle[data-pm-tip][data-pm-readout]::after { content: attr(data-pm-readout); }\n/* The two corner grips sit close enough to the edge that a centred chip would\n   hang half outside a card that clips its overflow. Both step inward instead,\n   away from their own corner: padding's goes down and in, rounding's up and in.\n   Positioned from the handle's inner side so it never reads as belonging to the\n   corner behind it. */\n.pm-card-handle--padding[data-pm-tip]:hover::after,\n.pm-card-handle--padding[data-pm-readout]::after {\n  inset-inline-start: 0; top: calc(100% + 6px);\n  transform: none;\n}\n.pm-card-handle--radius[data-pm-tip]:hover::after,\n.pm-card-handle--radius[data-pm-readout]::after {\n  inset-inline-start: auto; inset-inline-end: 0;\n  top: auto; bottom: calc(100% + 6px);\n  transform: none;\n}\n/* A field drag anywhere on the card shouldn't leave these lit on the way past. */\n.pm-body--dragging ~ .pm-card-handle,\n.pm-card:has(.pm-body--dragging) > .pm-card-handle { opacity: 0; }\n\n/* Drag-to-resize, submit button only. The fields above take their widths from\n   what shares their row, so they need no grip; the button sits outside the grid\n   and owns its width, so it gets one. It appears on hover or selection, like the\n   reorder handle, so a resting canvas stays clean. */\n.pm-resize {\n  position: absolute; z-index: 2;\n  inset-inline-end: -8px; top: 50%; transform: translateY(-50%);\n  width: 9px; height: 26px; border-radius: 5px;\n  opacity: 0; cursor: ew-resize; touch-action: none;\n  background: var(--pm-edit-accent, #4f46e5);\n  /* Two hairlines, so the grip reads as something to pull rather than a bar. */\n  background-image: linear-gradient(to right, transparent 2.5px, rgba(255,255,255,0.85) 2.5px 3.5px, transparent 3.5px 5.5px, rgba(255,255,255,0.85) 5.5px 6.5px, transparent 6.5px);\n  transition: opacity 0.12s ease;\n}\n.pm-body--editable [data-pm-item]:hover > .pm-resize,\n.pm-body--editable [data-pm-item][data-pm-selected] > .pm-resize,\n.pm-resize[data-pm-resizing] { opacity: 1; }\n/* While it's in hand the grip says what it would settle on. */\n.pm-resize[data-pm-resizing]::after {\n  content: attr(data-pm-width);\n  position: absolute; inset-inline-start: 50%; bottom: calc(100% + 7px);\n  transform: translateX(-50%);\n  padding: 2px 6px; border-radius: 5px; white-space: nowrap;\n  background: var(--pm-edit-accent, #4f46e5); color: #fff;\n  font-size: 11px; font-weight: 600; font-family: ui-monospace, monospace;\n}\n/* A reorder drag anywhere on the card shouldn't leave the grip lit on the way\n   past. Weighted to match the hover rule above, which it has to outrank. */\n.pm-body--editable.pm-body--dragging [data-pm-item] > .pm-resize { opacity: 0; }\n\n/* Drag-to-resize a spacer's gap: the same grip turned on its side, sitting on\n   the bottom edge because that is the edge a spacer can move. Centred, so it\n   reads as belonging to the gap rather than to a corner of it. */\n.pm-vresize {\n  position: absolute; z-index: 2;\n  /* Physical left, not inset-inline-start: the pull-back below is physical, so\n     in an RTL form a logical offset would send the grip half its width off\n     centre instead of onto it. The middle is the middle either way a form\n     reads. */\n  left: 50%; bottom: -5px; transform: translateX(-50%);\n  width: 26px; height: 9px; border-radius: 5px;\n  opacity: 0; cursor: ns-resize; touch-action: none;\n  background: var(--pm-edit-accent, #4f46e5);\n  /* Two hairlines, so the grip reads as something to pull rather than a bar. */\n  background-image: linear-gradient(to bottom, transparent 2.5px, rgba(255,255,255,0.85) 2.5px 3.5px, transparent 3.5px 5.5px, rgba(255,255,255,0.85) 5.5px 6.5px, transparent 6.5px);\n  transition: opacity 0.12s ease;\n}\n.pm-body--editable [data-pm-item]:hover > .pm-vresize,\n.pm-body--editable [data-pm-item][data-pm-selected] > .pm-vresize,\n.pm-vresize[data-pm-resizing] { opacity: 1; }\n/* While it's in hand the grip says what it would settle on. Beside it, not\n   above: the gap being sized is often shorter than the chip, which would then\n   cover the very thing the gap is making room for. */\n.pm-vresize[data-pm-resizing]::after {\n  content: attr(data-pm-height);\n  position: absolute; inset-inline-start: calc(100% + 8px); top: 50%;\n  transform: translateY(-50%);\n  padding: 2px 6px; border-radius: 5px; white-space: nowrap;\n  background: var(--pm-edit-accent, #4f46e5); color: #fff;\n  font-size: 11px; font-weight: 600; font-family: ui-monospace, monospace;\n}\n.pm-body--editable.pm-body--dragging [data-pm-item] > .pm-vresize { opacity: 0; }\n/* A spacer paints nothing, so at rest there is nothing to aim the grip at. On\n   hover the dashed outline every item gets is joined by a faint fill, which is\n   what makes the empty box a thing the pointer can find. */\n.pm-body--editable .pm-spacer:hover,\n.pm-body--editable .pm-spacer[data-pm-selected] {\n  background: color-mix(in srgb, var(--pm-edit-accent, #4f46e5) 7%, transparent);\n}\n\n/* The submit button is a div while editing (see PopupContent), so it needs the\n   box model a button gets for free. */\n.pm-card .pm-body--editable div.pm-submit { box-sizing: border-box; text-align: center; }\n/* Text edited in place. It stays inline so it keeps the typography of whatever\n   it sits in \u2014 a heading edits at heading size. */\n.pm-inline-edit {\n  cursor: text; outline: none; border-radius: 4px;\n  min-width: 8px; display: inline-block; white-space: pre-wrap;\n}\n.pm-inline-edit:focus {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pm-edit-accent, #4f46e5) 45%, transparent);\n  background: color-mix(in srgb, var(--pm-edit-accent, #4f46e5) 8%, transparent);\n}\n/* An unnamed field still needs something to aim at. */\n.pm-inline-edit:empty::before { content: attr(data-pm-hint); opacity: 0.45; }\n.pm-image-behind .pm-body { position: relative; z-index: 1; color: #fff; }\n.pm-image-behind .pm-media {\n  position: absolute; inset: 0; z-index: 0;\n}\n.pm-image-behind .pm-media::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,var(--pm-scrim, 0.45)); }\n.pm-close {\n  position: absolute; top: 10px; right: 12px; z-index: 2;\n  border: none; background: transparent; font-size: 22px; line-height: 1;\n  cursor: pointer; color: inherit; opacity: 0.7;\n}\n.pm-close:hover { opacity: 1; }\n[dir=\"rtl\"] .pm-close { right: auto; left: 12px; }\n/* Author-set item width (--pm-item-width, a percentage). Fields are sized by\n   their grid column now, so in a stacked form this reaches only the submit\n   button, which sits outside the grid (see renderGridItems). Unset resolves to\n   auto, i.e. the full width the button always had. */\n.pm-body > [data-pm-item] { width: var(--pm-item-width, auto); }\n.pm-heading { font-size: 22px; font-weight: 700; margin: 0; }\n.pm-text { font-size: 15px; margin: 0; opacity: 0.9; }\n.pm-spacer { flex: none; width: 100%; }\n/* An author's own markup. Deliberately barely styled: the point of the block is\n   that what was pasted is what shows. Only the two things that would break the\n   card are imposed, media that fits the column and margins that don't push the\n   block away from its neighbours. */\n.pm-html { min-width: 0; font-size: 15px; }\n.pm-html img, .pm-html iframe, .pm-html table { max-width: 100%; }\n.pm-html > :first-child { margin-top: 0; }\n.pm-html > :last-child { margin-bottom: 0; }\n.pm-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }\n/* Colors are declared, not inherited: a host stylesheet with a bare `input`\n   rule (the builder's own dark theme, for one) would otherwise bleed through. */\n.pm-field input[type=\"email\"], .pm-field input[type=\"text\"],\n.pm-field input[type=\"tel\"], .pm-field input[type=\"date\"],\n.pm-field input[type=\"number\"],\n.pm-field textarea, .pm-field select {\n  padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px;\n  background: #fff; color: #111827;\n  font-family: inherit;\n}\n/* A placeholder can be sized apart from the answer typed over it\n   (StyleProps.placeholderFontSize). A pseudo-element is out of reach of an\n   inline style, so the size arrives on the field as a variable and is read back\n   here; unset, the placeholder keeps inheriting the field's own size. */\n.pm-field input::placeholder, .pm-field textarea::placeholder {\n  font-size: var(--pm-ph-size, inherit);\n}\n/* Let a textarea grow vertically only: a horizontal drag would break the card. */\n.pm-field textarea { resize: vertical; }\n/* A phone number is the one field the browser overrules. Chrome pins\n   `direction: ltr` on input[type=\"tel\"] in its own stylesheet and on no other\n   type, so a Hebrew form's \"\u05D8\u05DC\u05E4\u05D5\u05DF\" sat against the left edge while every\n   placeholder beside it sat against the right.\n\n   Empty, the field reads the way the card does, like its neighbours. Carrying a\n   number it goes back to ltr, because that is how a number is written in any\n   language: 050 before the rest, and a leading + in front of the country code\n   rather than stranded behind it. Alignment follows on its own \u2014 the field is\n   `text-align: start`, so it tracks whichever direction wins here. */\n.pm-field input[type=\"tel\"] { direction: inherit; }\n.pm-field input[type=\"tel\"]:not(:placeholder-shown) { direction: ltr; }\n/* Native select arrow, kept on the trailing edge in both directions. */\n.pm-field select { appearance: none; background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\"); background-repeat: no-repeat; background-size: 18px; background-position: right 10px center; padding-right: 34px; }\n[dir=\"rtl\"] .pm-field select { background-position: left 10px center; padding-right: 12px; padding-left: 34px; }\n/* --- Choices ---------------------------------------------------------------\n   Radios and checkboxes, drawn rather than native.\n\n   Two things make this harder than the usual custom control. The popup renders\n   both on a white card (dark ink) and over a photograph (white ink), so nothing\n   here can name a colour: the ink is `currentColor` and every surface is that\n   same colour at a low alpha, which resolves correctly in both. And it embeds\n   on somebody else's site, so each rule is scoped under .pm-card and declares\n   what it needs rather than inheriting it.\n\n   The fill colour of a chosen option is --pm-accent, set from the submit\n   button, so an answer matches the button that sends it. It falls back to the\n   ink, which is what an unbranded form gets.\n\n   The one place this spends any boldness is the moment of choosing: the mark\n   springs past its final size and settles, and the row tints behind it. Hover\n   and rest are deliberately quiet so that lands. */\n.pm-radio-group, .pm-choice-group { display: flex; flex-direction: column; gap: 8px; }\n\n/* An option is a whole row, not a label beside a dot: the entire card is the\n   target, which on a phone is the difference between a tap and a fiddle. */\n.pm-card .pm-radio-option,\n.pm-card .pm-choice-option {\n  position: relative;\n  display: flex; align-items: center; gap: 12px;\n  min-height: 48px; padding: 11px 14px;\n  border: 1.5px solid; border-color: currentColor; border-radius: 10px;\n  cursor: pointer; font-size: 15px; line-height: 1.35;\n  /* The resting border is the ink at a whisper. Declared as a colour plus an\n     alpha rather than a blend so it needs no colour-mix support. */\n  border-color: rgba(128, 128, 128, 0.32);\n  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.12s ease;\n}\n/* The row's tint. A pseudo-element rather than a background on the row itself:\n   the fill has to be the ink at 6%, and an opacity on the box would take the\n   label down with it. */\n.pm-card .pm-radio-option::before,\n.pm-card .pm-choice-option::before {\n  content: ''; position: absolute; inset: 0; border-radius: inherit;\n  background: currentColor; opacity: 0; transition: opacity 0.18s ease;\n  pointer-events: none;\n}\n.pm-card .pm-radio-option:hover::before,\n.pm-card .pm-choice-option:hover::before { opacity: 0.05; }\n/* Pressed, the row gives a little. Cheaper and more tactile than a hover lift,\n   which every other form on the internet already does. */\n.pm-card .pm-radio-option:active,\n.pm-card .pm-choice-option:active { transform: scale(0.988); }\n.pm-card .pm-radio-option[data-pm-on],\n.pm-card .pm-choice-option[data-pm-on] { border-color: var(--pm-accent, currentColor); }\n/* The chosen row tints in the accent rather than the ink, so a branded form\n   answers in its own colour instead of going grey. */\n.pm-card .pm-radio-option[data-pm-on]::before,\n.pm-card .pm-choice-option[data-pm-on]::before {\n  background: var(--pm-accent, currentColor); opacity: 0.1;\n}\n\n/* The standalone consent checkbox stays a line of text, not a card. It is an\n   agreement, not one option among several, and boxing it would overstate it. */\n.pm-card .pm-checkbox {\n  position: relative;\n  display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px;\n}\n\n/* The real input carries the semantics, the focus and the keyboard; it just\n   isn't what you look at. It sits at its static position \u2014 no offsets \u2014 which\n   puts it over the mark that follows it, so a click near the control still hits\n   a real input and the focus ring below lands where the eye already is.\n\n   Sized to the mark rather than stretched over the whole row on purpose: a full\n   -bleed input would swallow the clicks the canvas needs to open an option's\n   label for renaming. */\n.pm-card .pm-radio-option input,\n.pm-card .pm-choice-option input,\n.pm-card .pm-checkbox input {\n  position: absolute; width: 22px; height: 22px; margin: 0;\n  opacity: 0; cursor: pointer;\n}\n\n.pm-card .pm-mark {\n  position: relative; flex: none; box-sizing: border-box;\n  width: 22px; height: 22px;\n  border: 2px solid rgba(128, 128, 128, 0.45);\n  background: transparent;\n  transition: border-color 0.18s ease, background-color 0.18s ease;\n}\n.pm-card .pm-mark--radio { border-radius: 50%; }\n.pm-card .pm-mark--check { border-radius: 7px; }\n.pm-card [data-pm-on] > .pm-mark {\n  border-color: var(--pm-accent, currentColor);\n  background: var(--pm-accent, currentColor);\n}\n\n/* The dot and the tick. Both start collapsed and overshoot slightly on the way\n   in \u2014 the settle is what makes the choice feel registered rather than merely\n   recorded. */\n.pm-card .pm-mark::after {\n  content: ''; position: absolute; display: block;\n  transform-origin: center;\n  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.12s ease;\n  opacity: 0;\n}\n/* Both shapes are drawn in --pm-mark-ink, which the renderer pairs against\n   whatever the mark fills with: white on a dark accent, near-black on a pale\n   one, and near-black over a photo where the fill is the white body ink. */\n.pm-card .pm-mark--radio::after {\n  /* A dot, not a ring. Inset far enough that the fill still reads as the\n     dominant shape: any less and the mark looks like a target. */\n  inset: 5px; border-radius: 50%;\n  background: var(--pm-mark-ink, #fff); transform: scale(0);\n}\n.pm-card .pm-mark--check::after {\n  /* Two borders of a rotated box: the classic tick, and the only shape here\n     that needs no image, no font and no extra element.\n\n     Centred by transform rather than by a hand-tuned offset, because a tick is\n     the same shape in both directions and a hand-tuned offset is the thing that\n     mirrors wrong. The extra 8% lifts it: the ink of a rotated L sits below its\n     own geometric centre, so a true centre reads as sagging. */\n  top: 50%; left: 50%; width: 5px; height: 10px;\n  border: solid var(--pm-mark-ink, #fff); border-width: 0 2.5px 2.5px 0;\n  transform: translate(-50%, -58%) rotate(45deg) scale(0);\n}\n.pm-card [data-pm-on] > .pm-mark--radio::after { opacity: 1; transform: scale(1); }\n.pm-card [data-pm-on] > .pm-mark--check::after {\n  opacity: 1; transform: translate(-50%, -58%) rotate(45deg) scale(1);\n}\n\n/* Over a photograph the resting grey all but disappears, taking the option's\n   edges with it. There the ink is white, so the outline can be too. */\n.pm-image-behind .pm-body .pm-radio-option,\n.pm-image-behind .pm-body .pm-choice-option { border-color: rgba(255, 255, 255, 0.5); }\n.pm-image-behind .pm-body .pm-mark { border-color: rgba(255, 255, 255, 0.75); }\n\n/* Keyboard focus rides on the drawn mark, since the input it belongs to is\n   invisible. :focus-visible only, so a mouse click doesn't leave a ring behind. */\n.pm-card .pm-radio-option input:focus-visible ~ .pm-mark,\n.pm-card .pm-choice-option input:focus-visible ~ .pm-mark,\n.pm-card .pm-checkbox input:focus-visible ~ .pm-mark {\n  outline: 2px solid var(--pm-accent, currentColor); outline-offset: 3px;\n}\n\n/* --- The switch ------------------------------------------------------------\n   A toggle carries the same yes/no as a checkbox, so it borrows the colours:\n   the ink for its resting outline, --pm-accent when it is on, --pm-mark-ink for\n   the knob. What differs is the reading order \u2014 the label leads and the control\n   sits at the trailing edge, the way a settings row reads \u2014 and that is what\n   tells an author the two types apart on the canvas. */\n.pm-card .pm-toggle {\n  position: relative;\n  display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px;\n}\n/* The real input, invisible but over the switch: semantics, focus and keyboard\n   stay native, and a click near the control still lands on an input. */\n.pm-card .pm-toggle input {\n  position: absolute; inset-inline-end: 0; width: 44px; height: 26px; margin: 0;\n  opacity: 0; cursor: pointer;\n}\n.pm-card .pm-switch {\n  position: relative; flex: none; box-sizing: border-box;\n  /* Pushed to the trailing edge, so a column of toggles lines its switches up\n     however long the labels are. */\n  margin-inline-start: auto;\n  width: 44px; height: 26px; border-radius: 999px;\n  border: 2px solid rgba(128, 128, 128, 0.45);\n  background: transparent;\n  transition: border-color 0.18s ease, background-color 0.18s ease;\n}\n/* The knob rides on inset-inline-start rather than a transform: the offset then\n   mirrors itself off the *card's* own direction. A [dir=\"rtl\"] rule would have\n   matched an RTL host page too, flipping an LTR popup embedded in one. */\n.pm-card .pm-switch::after {\n  content: ''; position: absolute; top: 3px; inset-inline-start: 3px;\n  width: 16px; height: 16px; border-radius: 50%;\n  background: currentColor;\n  transition: inset-inline-start 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.18s ease;\n}\n.pm-card .pm-toggle[data-pm-on] .pm-switch {\n  border-color: var(--pm-accent, currentColor);\n  background: var(--pm-accent, currentColor);\n}\n/* Across the track: its inner 40px less the knob's 16 and the 3px it rests at. */\n.pm-card .pm-toggle[data-pm-on] .pm-switch::after {\n  background: var(--pm-mark-ink, #fff); inset-inline-start: 21px;\n}\n/* Over a photograph the resting grey all but disappears \u2014 same fix as the marks. */\n.pm-image-behind .pm-body .pm-switch { border-color: rgba(255, 255, 255, 0.75); }\n.pm-card .pm-toggle input:focus-visible ~ .pm-switch {\n  outline: 2px solid var(--pm-accent, currentColor); outline-offset: 3px;\n}\n\n/* An author is clicking the option to select and rename it, not to answer it,\n   so the canvas drops the pointer and the press feedback. */\n.pm-body--editable .pm-radio-option,\n.pm-body--editable .pm-choice-option,\n.pm-body--editable .pm-checkbox,\n.pm-body--editable .pm-toggle,\n.pm-body--editable .pm-radio-option input,\n.pm-body--editable .pm-choice-option input,\n.pm-body--editable .pm-checkbox input,\n.pm-body--editable .pm-toggle input { cursor: default; }\n.pm-body--editable .pm-radio-option:active,\n.pm-body--editable .pm-choice-option:active { transform: none; }\n\n@media (prefers-reduced-motion: reduce) {\n  .pm-card .pm-radio-option,\n  .pm-card .pm-choice-option,\n  .pm-card .pm-radio-option::before,\n  .pm-card .pm-choice-option::before,\n  .pm-card .pm-mark,\n  .pm-card .pm-mark::after,\n  .pm-card .pm-switch,\n  .pm-card .pm-switch::after { transition-duration: 0.01ms; }\n  .pm-card .pm-radio-option:active,\n  .pm-card .pm-choice-option:active { transform: none; }\n}\n/* Scoped under .pm-card so a host's bare `button` rule (the builder's own theme,\n   for one) can't override the button's colors \u2014 same defense as .pm-field input. */\n.pm-card .pm-submit {\n  margin-top: auto; padding: 12px 16px; border: none; border-radius: 8px; cursor: pointer;\n  background: #111827; color: #fff; font-size: 15px; font-weight: 600;\n  /* A button narrowed by --pm-item-width centres itself; at full width the auto\n     margins compute to zero, so the default look is untouched. */\n  margin-inline: auto; box-sizing: border-box;\n}\n.pm-card .pm-submit:disabled { opacity: 0.6; cursor: default; }\n\n/* --- Steps -----------------------------------------------------------------\n   A step form ends every screen with one footer row. It takes over the\n   `margin-top: auto` the submit button carried on its own, so a short card\n   still pins the buttons to the bottom, and the button inside it drops both of\n   its own auto margins to sit in the row instead of centring itself in the\n   column. A button the author resized keeps that width as its flex basis, the\n   same way the row layout treats it. */\n.pm-card .pm-foot {\n  margin-top: auto; display: flex; align-items: center; justify-content: center;\n  gap: 10px; flex-wrap: wrap;\n}\n.pm-card .pm-foot .pm-submit {\n  margin-top: 0; margin-inline: 0; flex: 0 0 var(--pm-item-width, auto);\n}\n/* Back is deliberately quiet: it's the way out of a screen, not the way on. */\n.pm-card .pm-nav-back {\n  background: none; border: none; border-radius: 8px; cursor: pointer;\n  padding: 12px 12px; color: inherit; font: inherit; font-size: 14px; font-weight: 500;\n  opacity: 0.65; transition: opacity 0.15s ease;\n}\n.pm-card .pm-nav-back:hover { opacity: 1; }\n/* In the canvas both step buttons are inert divs, so they get the block-level\n   manners a <button> came with and lose the pointer that promises an action. */\n.pm-card .pm-body--editable div.pm-nav-back { text-align: center; cursor: default; }\n.pm-card .pm-body--editable div.pm-nav-next { cursor: default; }\n\n.pm-progress { margin: 0 0 2px; }\n.pm-progress--count { font-size: 12px; text-align: center; opacity: 0.6; letter-spacing: 0.02em; }\n/* Track and fill both ride on currentColor, so the indicator is dark on a plain\n   card and light over an image without either being written down. The track is\n   a pseudo-element rather than an opacity on the box, which would take the fill\n   down with it. */\n.pm-progress--bar { position: relative; height: 4px; border-radius: 999px; overflow: hidden; }\n.pm-progress--bar::before {\n  content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0.18;\n}\n.pm-progress--bar > span {\n  position: relative; display: block; height: 100%; border-radius: 999px;\n  background: currentColor; transition: width 0.25s ease;\n}\n.pm-progress--dots { display: flex; gap: 6px; justify-content: center; }\n.pm-progress--dots > span {\n  width: 6px; height: 6px; border-radius: 50%; background: currentColor;\n  opacity: 0.25; transition: opacity 0.2s ease;\n}\n.pm-progress--dots > span[data-pm-done] { opacity: 1; }\n\n/* Canvas-only: a step the author has added but not filled in yet. */\n.pm-step-empty {\n  margin: 0; padding: 28px 16px; text-align: center; font-size: 13px;\n  opacity: 0.55; border: 1px dashed currentColor; border-radius: 10px;\n}\n\n.pm-error { color: #b91c1c; font-size: 14px; margin: 0; }\n/* Rich error copy keeps the error colour/size; the inner .pm-rich inherits both. */\n.pm-error--rich .pm-rich { font-size: 14px; color: inherit; }\n/* Rich success screen (author-composed HTML). Keeps popup typography; tightens\n   the default block margins so a multi-line message stays compact. */\n.pm-rich { font-size: 15px; line-height: 1.5; }\n.pm-rich > *:first-child { margin-top: 0; }\n.pm-rich > *:last-child { margin-bottom: 0; }\n.pm-rich p { margin: 0 0 8px; }\n.pm-rich h1 { font-size: 22px; font-weight: 700; margin: 0 0 8px; }\n.pm-rich h2 { font-size: 19px; font-weight: 700; margin: 0 0 8px; }\n.pm-rich h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }\n.pm-rich ul, .pm-rich ol { margin: 0 0 8px; padding-inline-start: 1.4em; text-align: start; }\n.pm-rich a { color: inherit; text-underline-offset: 2px; }\n/* The coupon takes a line of its own, full width. It is the thing the visitor\n   came for and the one part of the success screen they have to act on, so it\n   gets the room a submit button gets rather than sitting inline in a sentence\n   at whatever width its characters happen to add up to. A flex display on an\n   inline node breaks it out of the paragraph the author dropped it into. */\n.pm-rich .pm-coupon-code { margin: 6px 0; }\n.pm-coupon-code {\n  display: flex; align-items: center; justify-content: space-between; gap: 10px;\n  width: 100%; box-sizing: border-box;\n  border: 1px dashed #9ca3af; border-radius: 8px; padding: 12px 14px;\n  font-family: ui-monospace, monospace; font-size: 16px; font-weight: 700;\n}\n/* The code itself is the centre of the row; the copy button hangs off the end.\n   A zero min-width so a long code ellipsizes instead of pushing the button out. */\n.pm-coupon-code > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.pm-copy { border: none; background: #111827; color: #fff; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 12px; flex: none; }\n/* The wait after a successful submit on a redirecting form. Centred and given\n   the height of a short screen, so the card doesn't collapse to a single line\n   the moment the form is replaced. */\n.pm-redirecting {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  gap: 12px; padding: 16px 0; text-align: center;\n}\n.pm-spinner {\n  width: 28px; height: 28px; border-radius: 999px;\n  border: 3px solid currentColor; border-top-color: transparent;\n  opacity: 0.45;\n  animation: pm-spin 0.7s linear infinite;\n}\n@keyframes pm-spin { to { transform: rotate(360deg); } }\n/* The destination, named in the builder canvas where the redirect is blocked. */\n.pm-redirect-url {\n  margin: 0; font-size: 12px; opacity: 0.6;\n  font-family: ui-monospace, monospace;\n  max-width: 100%; overflow-wrap: anywhere;\n}\n/* Nothing here should spin at someone who asked the OS to stop things moving.\n   The ring stays, as a mark that something is in progress. */\n@media (prefers-reduced-motion: reduce) {\n  .pm-spinner { animation: none; }\n}\n/* Inline placement: no overlay \u2014 the popup sits in the page flow, full width,\n   with a lighter frame than the floating modal. Injected by the host into\n   whatever container it embeds the popup in. */\n.pm-inline { width: 100%; }\n/* Doubled class so it outranks `.pm-card.pm-has-image` (0,2,0), which would\n   otherwise cap an inline image layout at 720px. 500px is the inline default \u2014\n   an author-set card width overrides it inline-style \u2014 and auto margins centre\n   the card in whatever container the host embedded it in. */\n.pm-card.pm-card--inline {\n  max-width: 500px; margin-inline: auto; min-height: 0;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n/* Row form in a modal: a comfortably wide card (grows with the viewport up to a\n   cap) so the input columns have room to sit side by side. Inline stays full\n   width. The body stays a normal column \u2014 only the fields row goes horizontal. */\n.pm-card--row:not(.pm-card--inline) { max-width: min(94vw, 820px); }\n/* Centre the stack vertically so a short wide form isn't clumped at the top. */\n.pm-card--row .pm-body { justify-content: center; }\n\n/* The fields row: text inputs become equal columns; the submit button hugs its\n   content at the end of the row. Checkboxes and radio groups drop to a second\n   layer (their own full-width line beneath) via order. Copy (heading / text)\n   stays stacked above in the column body, so nothing spreads vertically. */\n.pm-fields-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px; }\n/* Equal columns, shrinking together. This used to take its basis from the\n   author's field width, which is the same setting the stacked grid read as a\n   column count \u2014 and that setting is gone: a field's width is the share of the\n   line it stands on, not a number set on the field. A width left behind on an\n   older form is inert here for the same reason it is inert there. */\n.pm-fields-row > .pm-field { flex: 0 1 300px; box-sizing: border-box; }\n.pm-fields-row > .pm-field input,\n.pm-fields-row > .pm-field textarea,\n.pm-fields-row > .pm-field select { width: 100%; box-sizing: border-box; }\n/* Inside a row the auto side margins would eat the row's free space and shove\n   the fields apart, so the button goes back to sizing by its flex basis. */\n.pm-card .pm-fields-row > .pm-submit { margin-top: 0; margin-inline: 0; flex: 0 0 var(--pm-item-width, auto); }\n/* Second layer: checkboxes, toggles and radio groups drop to their own line. */\n.pm-fields-row > .pm-checkbox,\n.pm-fields-row > .pm-toggle,\n.pm-fields-row > fieldset.pm-field { order: 1; flex: 1 1 100%; justify-content: center; }\n/* On that full-width line the switch stays beside its label rather than being\n   shoved to the far edge by the auto margin it uses when stacked. */\n.pm-fields-row > .pm-toggle > .pm-switch { margin-inline-start: 0; }\n\n@media (max-width: 560px) {\n  .pm-layout { flex-direction: column !important; }\n  .pm-media { min-height: 160px; }\n  /* No room for columns: every field takes the full width, so a row of thirds\n     becomes three stacked fields rather than three unusable slivers. */\n  .pm-grid > [data-pm-item] { grid-column: span 12; }\n  /* Narrow screens can't hold a row of columns \u2014 fall back to stacked, full width. */\n  .pm-card--row:not(.pm-card--inline) { max-width: 94vw; }\n  .pm-fields-row { flex-direction: column; align-items: stretch; }\n  .pm-fields-row > .pm-field,\n  .pm-fields-row > .pm-submit { flex: none; }\n}\n";
export declare function ensureStyles(doc?: Document): void;