@fieldia/designer 0.0.0-stage → 0.11.0

package/src/lib/styles-translations.mjs

@@ -0,0 +1,101 @@
+/**
+ * The Translations view: the bar over it, asking before a language goes, the
+ * CSV panel, and the grid — a box of its own that scrolls both ways, its
+ * heads and its first column held in place, each cell typed in where it
+ * stands. Appended to the designer's stylesheet.
+ */
+export const DESIGNER_TRANSLATIONS_CSS = /* css */ `
+/* ---- Translations: the page's words in other languages ---------------------- */
+.fd-words { display: grid; gap: 12px; min-width: 0; }
+.fd-words-bar {
+  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 10px 14px;
+}
+.fd-words-heading { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
+.fd-words-title { margin: 0; font-size: 16px; font-weight: 650; }
+.fd-words-note { margin: 0; font-size: 13px; color: var(--fd-muted); }
+/* The page's own language, picked in the words that name it. */
+.fd-words-own-language {
+  font: inherit; color: var(--fd-text); background: transparent; cursor: pointer; field-sizing: content;
+  border: 0; border-block-end: 1px dashed var(--fd-border-strong); border-radius: 0; padding: 0 2px; margin: 0;
+}
+.fd-words-own-language:hover { border-block-end-color: var(--fd-accent); }
+.fd-words-own-language:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-words-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
+.fd-words-add { display: flex; gap: 6px; align-items: center; flex: 0 1 300px; min-width: 0; margin: 0; }
+.fd-words-add .fd-input { flex: 1 1 150px; min-width: 0; }
+.fd-words-actions { display: flex; flex-wrap: wrap; gap: 6px; }
+.fd-words-confirm, .fd-words-paste {
+  display: grid; gap: 10px; justify-items: start;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 12px 14px;
+}
+.fd-words-confirm { border-inline-start: 3px solid var(--fd-error); }
+.fd-words-ask { margin: 0; font-weight: 600; }
+.fd-words-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
+.fd-words-csv-label { font-size: 13.5px; }
+.fd-words-paste .fd-words-csv { width: 100%; box-sizing: border-box; min-height: 130px; resize: vertical; font-size: 13px; line-height: 1.5; }
+.fd-words-problem { margin: 0; color: var(--fd-error); font-size: 13px; }
+.fd-words-status { margin: 0; font-size: 13px; color: var(--fd-muted); }
+.fd-words-status:empty { display: none; }
+
+/* The grid: its own box, scrolling both ways, never the page. Lines of words a whole number of pixels high, so the held column's rows meet the rest exactly and no line between rows is painted over. */
+.fd-words-scroll {
+  container: fd-words / inline-size; overflow: auto; max-height: max(320px, calc(100vh - 260px)); overscroll-behavior: contain;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius);
+}
+.fd-words-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
+.fd-words-table th, .fd-words-table td { padding: 0; text-align: start; vertical-align: top; border-block-end: 1px solid var(--fd-border); }
+.fd-words-table tr > * + * { border-inline-start: 1px solid var(--fd-border); }
+.fd-words-table tbody tr:last-child > * { border-block-end: 0; }
+.fd-words-table thead th { position: sticky; top: 0; z-index: 2; min-width: 200px; padding: 8px 10px; background: var(--fd-page); font-size: 13px; font-weight: 600; }
+/* The page's own words stay in sight as the languages scroll by. */
+.fd-words-table tbody th, .fd-words-table thead th:first-child { position: sticky; inset-inline-start: 0; box-shadow: 1px 0 0 var(--fd-border); }
+.fd-words-table thead th:first-child { z-index: 3; width: 34%; }
+.fd-words-table tbody th { z-index: 1; min-width: 180px; max-width: 320px; padding: 8px 10px; background: var(--fd-surface); font-weight: 400; line-height: 20px; overflow-wrap: anywhere; }
+.fd-words-head { display: flex; align-items: center; gap: 6px; min-height: 24px; }
+.fd-words-lang { font-weight: 650; }
+.fd-words-native { color: var(--fd-muted); font-weight: 400; font-size: 12.5px; }
+.fd-words-remove { margin-inline-start: auto; width: 24px; height: 24px; font-size: 15px; }
+.fd-words-progress, .fd-words-own { display: flex; align-items: center; gap: 8px; margin-block-start: 4px; font-size: 12px; font-weight: 400; color: var(--fd-muted); font-variant-numeric: tabular-nums; }
+.fd-words-meter { flex: 0 1 96px; height: 4px; border-radius: 2px; background: var(--fd-border); overflow: hidden; }
+.fd-words-meter > span { display: block; height: 100%; border-radius: 2px; background: var(--fd-accent); transition: width 0.2s ease; }
+/* A cell: the words typed where they stand, right to left in a language written so. */
+.fd-words-cell {
+  display: block; box-sizing: border-box; width: 100%; min-width: 200px; min-height: 38px; margin: 0; padding: 8px 10px;
+  border: 0; border-radius: 0; resize: none; field-sizing: content; overflow: hidden;
+  background: transparent; color: inherit; font: inherit; line-height: 20px; text-align: start;
+}
+/* The whole cell answers, however tall its row: tinted while empty, lit under the pointer, underlined while typed in. */
+.fd-words-grid td:has(> .fd-words-cell[data-empty]) { background: color-mix(in srgb, var(--fd-page) 55%, transparent); }
+.fd-words-grid td:hover { background: var(--fd-accent-soft); }
+.fd-words-grid td:focus-within { background: var(--fd-surface); box-shadow: inset 0 -2px 0 var(--fd-focus); }
+.fd-words-cell:focus { outline: none; }
+.fd-words-none { margin: 0; padding: 16px; color: var(--fd-muted); font-size: 13.5px; }
+
+/* Words no longer on the page. */
+.fd-words-stale { display: grid; gap: 8px; }
+.fd-words-stale-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
+.fd-words-stale-title { margin: 0; font-size: 14px; font-weight: 650; }
+.fd-words-stale-note { margin: 0; flex: 1 1 220px; font-size: 13px; color: var(--fd-muted); }
+.fd-words-stale-grid .fd-words-gone { padding: 8px 10px; color: var(--fd-muted); line-height: 20px; }
+.fd-words-stale-grid .fd-words-gone-remove { width: 1%; min-width: 0; padding: 4px; text-align: center; vertical-align: middle; }
+@container (max-width: 620px) {
+  .fd-words-table tbody th, .fd-words-table thead th:first-child { min-width: 120px; max-width: 150px; }
+  .fd-words-table thead th, .fd-words-cell { min-width: 170px; }
+}
+/* On a phone, each language is the whole width beside the English held at the start, and a swipe moves one whole language. */
+@container (max-width: 480px) {
+  .fd-words-scroll { scroll-snap-type: x mandatory; scroll-padding-inline-start: 120px; }
+}
+@container fd-words (max-width: 480px) {
+  .fd-words-table tbody th, .fd-words-table thead th:first-child { width: 120px; min-width: 120px; max-width: 120px; }
+  .fd-words-grid thead th + th { min-width: max(170px, calc(100cqw - 121px)); scroll-snap-align: start; }
+  .fd-words-grid .fd-words-cell { min-width: max(170px, calc(100cqw - 121px)); }
+}
+
+/* Try it in a language: the page's languages, beside English and العربية. */
+.fd-try-language { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fd-muted); }
+.fd-try-language .fd-input { width: auto; min-height: 30px; padding-block: 2px; font-size: 13px; color: var(--fd-text); }
+@media (prefers-reduced-motion: reduce) { .fd-words-meter > span { transition: none; } }
+`;
+//# sourceMappingURL=styles-translations.mjs.map

package/src/lib/styles-translations.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-translations.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/styles-translations.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FlD,CAAC"}

package/src/lib/styles.d.mts

@@ -0,0 +1,3 @@
+/** The designer's own chrome, on top of Fieldia's form stylesheet and tokens. */
+export declare const DESIGNER_CSS = "\n.fd-designer { display: grid; gap: 14px; }\n.fd-designer-bar {\n  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 10px 14px;\n}\n.fd-designer-title { font-size: 17px; font-weight: 600; flex: 1 1 220px; max-width: 420px; min-width: 0; }\n/* Where the page stands; pressed, the versions published. */\n.fd-designer-status-box { display: inline-flex; }\n.fd-designer-status { all: unset; box-sizing: border-box; cursor: pointer; color: var(--fd-muted); font-size: 13px; padding: 4px 8px; border-radius: 6px; }\n.fd-designer-status::after { content: \"\"; display: inline-block; width: 5px; height: 5px; margin-inline-start: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }\n.fd-designer-status:hover, .fd-designer-status[aria-expanded=\"true\"] { background: var(--fd-page); color: var(--fd-text); }\n.fd-designer-status:focus-visible { outline: 2px solid var(--fd-focus); }\n/* Checks: a count of what to look at, the colour of the worst of them. */\n.fd-checks-button { display: inline-flex; align-items: center; gap: 6px; }\n.fd-checks-button > .fd-dicon { width: 15px; height: 15px; }\n.fd-checks-count { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--fd-page); color: var(--fd-muted); }\n.fd-checks-button[data-state=\"clear\"] .fd-checks-count { background: var(--fd-success-soft); color: var(--fd-success); }\n.fd-checks-button[data-state=\"should\"] .fd-checks-count { background: var(--fd-warning-soft); color: var(--fd-warning); }\n.fd-checks-button[data-state=\"must\"] .fd-checks-count { background: var(--fd-error-soft); color: var(--fd-error); }\n.fd-checks {\n  position: fixed; z-index: 60; width: min(380px, calc(100vw - 16px)); max-height: min(480px, calc(100vh - 16px)); overflow: auto; box-sizing: border-box;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: 10px; box-shadow: 0 18px 44px rgba(15, 20, 25, 0.18);\n  padding: 6px; display: grid; gap: 4px; animation: fd-menu-in 120ms cubic-bezier(0, 0, 0.2, 1);\n}\n.fd-check { display: grid; gap: 6px; justify-items: start; padding: 10px; border-radius: 8px; }\n.fd-check + .fd-check { border-block-start: 1px solid var(--fd-border); border-radius: 0; }\n.fd-check-severity { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; }\n.fd-check[data-severity=\"must\"] .fd-check-severity { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-check[data-severity=\"should\"] .fd-check-severity { color: var(--fd-warning); background: var(--fd-warning-soft); }\n.fd-check-text { margin: 0; font-size: 13.5px; line-height: 1.45; }\n.fd-check-fix { min-height: 30px; padding-block: 2px; font-size: 13px; }\n/* Find anything: one box over all the editor can add, go to or do. */\n.fd-find-button { display: inline-flex; align-items: center; gap: 6px; color: var(--fd-muted); }\n.fd-find-button > .fd-dicon { width: 15px; height: 15px; }\n.fd-find-keys { font: inherit; font-size: 11.5px; padding: 1px 5px; border-radius: 4px; background: var(--fd-page); color: var(--fd-muted); }\n.fd-find-backdrop { z-index: 80; place-items: start center; padding-block-start: 12vh; }\n.fd-find {\n  width: min(560px, 100%); display: grid; overflow: hidden; background: var(--fd-surface); color: var(--fd-text);\n  border: 1px solid var(--fd-border); border-radius: 12px; box-shadow: 0 24px 64px rgba(15, 20, 25, 0.3); animation: fd-menu-in 120ms cubic-bezier(0, 0, 0.2, 1);\n}\n.fd-find-input { font: inherit; font-size: 16px; color: inherit; background: none; border: 0; border-block-end: 1px solid var(--fd-border); padding: 14px 18px; outline: none; }\n.fd-designer .fd-find-input:focus-visible { outline: none; }\n.fd-find-list { max-height: min(360px, 50vh); overflow: auto; padding: 6px; display: grid; gap: 1px; }\n.fd-find-list:empty { display: none; }\n.fd-find-option { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: 14px; }\n.fd-find-option[aria-selected=\"true\"] { background: var(--fd-accent-soft); }\n.fd-find-option:hover { background: var(--fd-page); }\n.fd-find-option[aria-selected=\"true\"]:hover { background: var(--fd-accent-soft); }\n.fd-find-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-find-hint { flex: none; font-size: 12px; color: var(--fd-muted); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-find-none { margin: 0; padding: 16px 18px; color: var(--fd-muted); }\n@media (prefers-reduced-motion: reduce) { .fd-find { animation: none; } }\n/* Publish, asked first. */\n.fd-publish-backdrop { z-index: 70; }\n.fd-publish-dialog { max-width: 480px; background: var(--fd-surface); }\n.fd-publish-body { display: grid; gap: 12px; padding: 16px 18px 4px; overflow: auto; }\n.fd-publish-lead { margin: 0; font-weight: 600; }\n.fd-publish-changes { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 14px; }\n.fd-publish-more { list-style: none; margin-inline-start: -20px; color: var(--fd-muted); }\n.fd-publish-blocked { display: grid; gap: 4px; border: 1px solid var(--fd-error); border-radius: 8px; padding: 6px; background: color-mix(in srgb, var(--fd-error-soft) 50%, var(--fd-surface)); }\n.fd-publish-blocked-head { margin: 4px 10px 0; font-weight: 600; color: var(--fd-error); }\n.fd-publish-failed { margin: 0; color: var(--fd-error); }\n.fd-publish-dialog .fd-form-dialog-foot { margin: 0; padding: 12px 18px 16px; }\n.fd-designer .fd-spacer { flex: 1; }\n.fd-designer-issues { white-space: pre-line; }\n.fd-designer-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); gap: 20px; align-items: start; }\n.fd-survey-body { grid-template-columns: 228px minmax(0, 1fr); gap: 16px; }\n.fd-survey-body > .fd-designer-editor { max-width: none; }\n@container (max-width: 900px) { .fd-designer-body, .fd-survey-body { grid-template-columns: minmax(0, 1fr); } .fd-survey-body > .fd-toolbox, .fd-survey-body > .fd-rail { position: static; max-height: none; } .fd-survey-body .fd-tools { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } }\n.fd-designer-editor { display: grid; gap: 14px; justify-items: start; }\n.fd-designer-editor > * { width: 100%; }\n.fd-designer-editor > .fd-button { width: auto; }\n.fd-designer-pages { display: grid; gap: 18px; }\n.fd-design-step { display: grid; gap: 10px; padding: 14px; border-radius: var(--fd-radius); background: var(--fd-page); border: 1px solid var(--fd-border); }\n.fd-step-head { display: flex; gap: 8px; align-items: center; }\n.fd-step-number { font-size: 12px; font-weight: 700; color: var(--fd-surface); background: var(--fd-accent); border-radius: 5px; padding: 2px 9px; white-space: nowrap; }\n.fd-step-selected { border-color: var(--fd-accent); }\n.fd-step-title { font-weight: 650; font-size: 15px; }\n.fd-step-when { color: var(--fd-muted); font-size: 13px; }\n.fd-when { display: grid; gap: 6px; justify-items: start; color: var(--fd-muted); font-size: 13px; }\n.fd-q .fd-when { padding: 8px 10px; border-inline-start: 3px solid var(--fd-accent-soft); background: var(--fd-page); border-radius: 4px; width: 100%; box-sizing: border-box; }\n.fd-when-rules { display: grid; gap: 6px; }\n.fd-when-rule, .fd-when-match-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }\n.fd-when .fd-select { width: auto; min-width: 140px; }\n.fd-when-custom code { font-size: 12.5px; color: var(--fd-text); }\n.fd-q-when { padding-inline: 4px; }\n.fd-step-cards { display: grid; gap: 10px; position: relative; }\n.fd-designer-editor.fd-dragging { user-select: none; -webkit-user-select: none; }\n/* Carried, a question leaves its place: the gap shows where it goes. */\n.fd-q.fd-drag-source { display: none; }\n.fd-add-question { display: inline-flex; gap: 6px; align-items: center; }\n.fd-design-step > .fd-button { justify-self: start; }\n.fd-step-cards:empty::before { content: \"No questions on this page yet.\"; color: var(--fd-muted); font-size: 13px; padding: 4px 2px; }\n.fd-q {\n  position: relative; display: grid; gap: 10px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius);\n  padding: 16px 18px; border-inline-start: 6px solid transparent; cursor: default;\n}\n/* A question not picked reads as people will see it, and opens where it is clicked. */\n.fd-q-closed { cursor: pointer; user-select: none; -webkit-user-select: none; }\n.fd-q-closed:hover { border-color: var(--fd-border-strong); border-inline-start-color: transparent; }\n.fd-q-title { font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }\n.fd-q-closed.fd-required .fd-q-text::after { content: \" *\"; color: var(--fd-error); }\n.fd-q-when-note { font-size: 11px; font-weight: 600; color: var(--fd-warning); background: var(--fd-warning-soft); border-radius: 4px; padding: 1px 6px; }\n.fd-q-closed .fd-q-answer { max-width: 520px; }\n/* The question picked: open, the Google Forms way. */\n.fd-q-selected { border-inline-start-color: var(--fd-accent); box-shadow: 0 2px 12px rgba(15, 20, 25, 0.12); padding-block-start: 22px; }\n.fd-q-grip { all: unset; position: absolute; top: 2px; left: 50%; transform: translateX(-50%) rotate(90deg); width: 18px; height: 22px; display: grid; place-items: center; cursor: grab; color: var(--fd-muted); touch-action: none; }\n.fd-q-grip:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-q-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }\n.fd-q-label { font-size: 15px; }\n.fd-q-kind {\n  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-width: 190px; padding: 0 12px; min-height: 38px;\n  border: 1px solid var(--fd-border); border-radius: 6px; background: var(--fd-surface); color: var(--fd-text); cursor: pointer; font-size: 14px;\n}\n.fd-q-kind:hover { background: var(--fd-page); }\n.fd-q-kind:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-q-kind-icon { display: inline-flex; }\n.fd-q-kind > .fd-dicon { margin-inline-start: auto; width: 14px; height: 14px; color: var(--fd-muted); }\n.fd-q-help { font-size: 13px; }\n.fd-q-sep { width: 1px; height: 24px; background: var(--fd-border); margin-inline: 6px; }\n.fd-q-required-words { font-size: 13px; }\n/* Material's switch, as Google Forms has it: a 14px track, a 20px thumb that slides over in 90ms. */\n.fd-switch { all: unset; position: relative; flex: none; width: 36px; height: 20px; cursor: pointer; border-radius: 10px; }\n.fd-switch::before { content: \"\"; position: absolute; inset-inline: 0; top: 3px; height: 14px; border-radius: 7px; background: var(--fd-border-strong); transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1); }\n.fd-switch::after {\n  content: \"\"; position: absolute; top: 0; inset-inline-start: 0; width: 20px; height: 20px; border-radius: 50%; background: #ffffff;\n  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);\n  transition: inset-inline-start 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.fd-switch[aria-checked=\"true\"]::before { background: color-mix(in srgb, var(--fd-accent) 54%, transparent); }\n.fd-switch[aria-checked=\"true\"]::after { inset-inline-start: 16px; background: var(--fd-accent); }\n.fd-switch:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n@media (prefers-reduced-motion: reduce) { .fd-switch::before, .fd-switch::after { transition: none; } }\n.fd-q-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }\n.fd-q-option { display: flex; gap: 8px; align-items: center; }\n.fd-q-bullet { color: var(--fd-muted); width: 16px; text-align: center; }\n.fd-q-option-box { display: grid; gap: 4px; justify-items: start; }\n.fd-q-option-box > ul { width: 100%; }\n/* \"Add option or add \"Other\"\", and \"Other\u2026\" once added: words and links, never boxes \u2014 pointed at, only a line under them. */\n.fd-q-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }\n.fd-q-option-box .fd-q-add-row > .fd-button-link { border: 0; background-color: transparent; box-shadow: none; padding: 2px 0; min-height: 0; font-weight: 400; }\n.fd-q-option-box .fd-q-add-row > .fd-button-link:hover { text-decoration: underline; text-underline-offset: 4px; }\n.fd-q-option-box .fd-q-add-row > .fd-button-link:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n.fd-q-or { color: var(--fd-muted); font-size: 13px; }\n.fd-q-option-other { display: flex; align-items: center; gap: 8px; width: 100%; }\n.fd-q-other-words { flex: 1; min-width: 0; color: var(--fd-muted); padding: 6px 0; border-bottom: 1px dotted color-mix(in srgb, var(--fd-text) 38%, transparent); }\n.fd-q-foot { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; border-block-start: 1px solid var(--fd-border); padding-block-start: 10px; }\n.fd-icon-button {\n  font: inherit; border: none; background: none; cursor: pointer; color: var(--fd-muted); width: 30px; height: 30px; border-radius: 6px;\n  display: inline-grid; place-items: center; font-size: 15px;\n}\n.fd-icon-button:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-icon-danger:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n\n/* ---- Design or Try it: the page working as people will use it ---- */\n.fd-mode { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fd-page); border: 1px solid var(--fd-border); }\n.fd-mode-button { all: unset; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--fd-muted); cursor: pointer; }\n.fd-mode-button[aria-pressed=\"true\"] { background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 2px rgba(15, 20, 25, 0.12); }\n.fd-mode-button[data-mode=\"try\"][aria-pressed=\"true\"] { background: var(--fd-success); color: #ffffff; }\n.fd-mode-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* The bar takes two rows by design: the page and what to do with it on top, the ways to look at it (Simple or\n   Advanced, Design to Translations, Look) on a row of their own beneath \u2014 never one button left alone on a\n   line, in any font or language. */\n.fd-designer-bar { container-type: inline-size; }\n.fd-bar-break { display: none; }\n@container (min-width: 521px) {\n  .fd-bar-break { display: block; flex-basis: 100%; height: 0; order: 1; }\n  .fd-designer-bar > :is(.fd-mode, .fd-look-button) { order: 2; }\n}\n/* On a narrow bar the ways to look at the page share one row: their words alone, each on one line. */\n@container (max-width: 520px) {\n  .fd-mode { display: flex; width: 100%; }\n  .fd-mode-button { flex: 1 1 auto; justify-content: center; padding-inline: 6px; white-space: nowrap; }\n  .fd-mode-button > .fd-dicon { display: none; }\n}\n.fd-try { display: grid; gap: 14px; }\n.fd-try-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 8px 12px; }\n.fd-try-group { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--fd-page); border: 1px solid var(--fd-border); }\n.fd-try-button { all: unset; display: inline-grid; place-items: center; min-width: 30px; height: 28px; padding: 0 9px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--fd-muted); cursor: pointer; }\n.fd-try-button[aria-pressed=\"true\"] { background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 2px rgba(15, 20, 25, 0.12); }\n.fd-try-button:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-try-note { margin: 0; color: var(--fd-muted); font-size: 13px; flex: 1 1 220px; text-align: center; }\n.fd-try-frame { margin-inline: auto; width: 100%; max-width: 1100px; box-sizing: border-box; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 20px; transition: max-width 0.3s ease; }\n.fd-try-frame[data-width=\"tablet\"] { max-width: 768px; }\n.fd-try-frame[data-width=\"phone\"] { max-width: 390px; padding: 14px; }\n/* A quiz sent in Try it: its score, under the thanks. */\n.fd-try-score { margin: 0; font-size: 17px; font-weight: 650; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n@media (prefers-reduced-motion: reduce) { .fd-try-frame { transition: none; } }\n\n/* ---- the screen editor: toolbox, canvas, panel ---- */\n.fd-screen-body { display: grid; grid-template-columns: 228px minmax(0, 1fr) 280px; gap: 16px; align-items: start; }\n.fd-toolbox, .fd-properties, .fd-rail {\n  position: sticky; top: var(--fd-bar-room, 76px); display: grid; gap: 6px; align-content: start; max-height: calc(100vh - var(--fd-bar-room, 76px) - 20px); overflow: auto;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 12px;\n}\n.fd-panel-title { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fd-muted); margin-block-end: 2px; }\n.fd-properties.fd-flash { animation: fd-flash 0.8s ease; }\n@keyframes fd-flash { from { box-shadow: 0 0 0 3px var(--fd-accent-soft), inset 3px 0 0 var(--fd-accent); } to { box-shadow: none; } }\n\n/* The toolbox: icons three to a row, in groups that fold, as Quantia's. */\n.fd-toolbox { padding: 10px 6px; gap: 4px; }\n/* Beside the page: Add (the toolbox), Outline and Data, in tabs. */\n.fd-rail { padding: 8px 6px 10px; gap: 8px; }\n.fd-rail > .fd-rail-pane { position: static; max-height: none; overflow: visible; border: 0; padding: 0; background: none; }\n.fd-rail-tabs { display: flex; gap: 2px; padding: 2px; margin: 0 4px; border-radius: 8px; background: var(--fd-page); }\n.fd-rail-tab { all: unset; box-sizing: border-box; flex: 1; text-align: center; cursor: pointer; padding: 5px 4px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--fd-muted); }\n.fd-rail-tab[aria-selected=\"true\"] { background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 2px rgba(15, 20, 25, 0.12); }\n.fd-rail-tab:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-outline, .fd-data { display: grid; gap: 8px; padding: 0 4px; min-width: 0; }\n.fd-outline-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }\n.fd-outline-tree button {\n  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 5px 6px;\n  padding-inline-start: calc(6px + var(--fd-level, 0) * 14px); border-radius: 6px; font-size: 13px; min-width: 0;\n}\n.fd-outline-tree button:hover { background: var(--fd-page); }\n.fd-outline-tree button[aria-current=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); }\n.fd-outline-tree button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-outline-tree button[data-level=\"0\"] { font-weight: 600; }\n.fd-outline-tree .fd-dicon { width: 14px; height: 14px; flex: none; color: var(--fd-muted); }\n.fd-outline-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-outline-when { display: inline-flex; color: var(--fd-warning); }\n.fd-outline-kind { flex: none; font-size: 11px; color: var(--fd-muted); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-data-card { display: grid; gap: 2px; padding: 10px; border-radius: 8px; background: var(--fd-page); font-size: 12.5px; color: var(--fd-muted); }\n.fd-data-model { font-size: 14px; color: var(--fd-text); overflow-wrap: anywhere; }\n.fd-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 2px; border-radius: 8px; background: var(--fd-page); }\n.fd-seg-button { all: unset; box-sizing: border-box; cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: 12px; color: var(--fd-muted); text-align: center; font-variant-numeric: tabular-nums; }\n.fd-seg-button[aria-pressed=\"true\"] { background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 2px rgba(15, 20, 25, 0.12); }\n.fd-seg-button:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-data-rows { display: grid; gap: 0; }\n.fd-data-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 7px 2px; border-block-start: 1px solid var(--fd-border); font-size: 13px; align-items: center; }\n.fd-data-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-data-used { font-size: 11px; color: var(--fd-muted); }\n.fd-data-used.fd-data-on { color: var(--fd-success); }\n.fd-data-row code { grid-column: 1; font-size: 11px; color: var(--fd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-data-row .fd-button-link { grid-column: 2; justify-self: end; padding: 0; min-height: 0; font-size: 12px; }\n.fd-tool-find { font-size: 13px; margin: 0 4px 4px; width: auto; }\n.fd-tool-groups { display: grid; gap: 2px; }\n.fd-tool-heading {\n  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%; cursor: pointer; padding: 8px 8px 3px;\n  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fd-muted);\n}\n.fd-tool-heading:hover { color: var(--fd-text); }\n.fd-tool-heading:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; border-radius: 3px; }\n.fd-tool-count { font-weight: 600; }\n.fd-tool-caret { width: 0; height: 0; flex: none; border-inline: 3.5px solid transparent; border-top: 4px solid currentColor; transition: transform 0.12s ease; }\n.fd-tool-shut .fd-tool-caret { transform: rotate(-90deg); }\n[dir=\"rtl\"] .fd-tool-shut .fd-tool-caret { transform: rotate(90deg); }\n.fd-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }\n.fd-tool {\n  all: unset; box-sizing: border-box; cursor: grab; display: grid; grid-template-rows: 22px auto; place-items: center; align-content: start; row-gap: 4px;\n  height: 60px; padding: 8px 3px 4px; border-radius: 7px; color: var(--fd-muted); min-width: 0; touch-action: none;\n}\n.fd-tool:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-tool:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-tool:active { cursor: grabbing; }\n.fd-tool-model { color: var(--fd-accent); }\n.fd-tool .fd-dicon { width: 20px; height: 20px; }\n.fd-tool-name {\n  font-size: 10.5px; line-height: 1.15; text-align: center; color: var(--fd-text); max-width: 100%; overflow: hidden;\n  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;\n}\n.fd-tool-none { color: var(--fd-muted); font-size: 12.5px; margin: 4px 8px; }\n.fd-dicon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\n\n/* The canvas: the page as the viewer draws it, measured against its own width. */\n.fd-canvas-scroll { min-width: 0; }\n.fd-canvas { container-type: inline-size; display: grid; gap: 18px; min-width: 0; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 22px 32px 30px; }\n/* A field's grip: six dots just beside it, shown when it is pointed at or picked. */\n.fd-card-grip {\n  all: unset; box-sizing: border-box; position: absolute; top: 6px; inset-inline-start: -20px; width: 16px; height: 24px; display: grid; place-items: center;\n  border-radius: 4px; color: var(--fd-muted); cursor: grab; opacity: 0; transition: opacity 120ms; touch-action: none;\n}\n.fd-card-grip > .fd-dicon { width: 14px; height: 14px; }\n.fd-canvas-field:hover > .fd-card-grip, .fd-canvas-field.fd-editing > .fd-card-grip, .fd-card-grip:focus-visible { opacity: 1; }\n.fd-card-grip:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-card-grip:active { cursor: grabbing; }\n@media (prefers-reduced-motion: reduce) { .fd-card-grip { transition: none; } }\n.fd-canvas-body { display: grid; gap: 26px; }\n.fd-canvas-title.fd-canvas-title-filled { color: var(--fd-text); }\n.fd-canvas-title { all: unset; box-sizing: border-box; cursor: pointer; font-size: 26px; font-weight: 650; line-height: 1.25; color: var(--fd-muted); padding: 8px 14px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-radius); background: var(--fd-surface); }\n.fd-canvas-title:hover { color: var(--fd-text); }\n.fd-canvas-title.fd-canvas-selected { border-style: solid; border-color: var(--fd-accent); }\n/* A section pointed at or picked: a bar down its side, just outside it \u2014 never a frame round the frames of its fields. */\n.fd-canvas-section { border-radius: 6px; }\n.fd-canvas-section::before { content: \"\"; position: absolute; inset-block: 0; inset-inline-start: -12px; width: 3px; border-radius: 2px; background: transparent; pointer-events: none; }\n.fd-canvas-section:hover::before { background: var(--fd-border-strong); }\n.fd-canvas-section.fd-canvas-selected::before { background: var(--fd-accent); }\n/* At least 24px tall, a target a finger can hit (WCAG 2.5.8), however small the title's words \u2014 the extra\n   height taken back by its margins, so the canvas lays out exactly as the form does. */\n.fd-canvas-section-title { all: unset; cursor: pointer; display: inline-block; min-height: 24px; margin-block: min(0px, calc((1lh - 24px) / 2)); }\n.fd-canvas-section-title:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-canvas-untitled { color: var(--fd-muted); font-weight: 500; font-style: italic; font-size: 13px; }\n.fd-canvas-section-title-input { font: inherit; color: inherit; border: 0; border-bottom: 1px dashed var(--fd-border-strong); background: none; padding: 0 0 1px; min-width: 12em; outline: none; }\n.fd-canvas-section-title-input:focus { border-bottom: 1px solid var(--fd-accent); }\n.fd-canvas-empty { color: var(--fd-muted); font-size: 13px; border: 1px dashed var(--fd-border); border-radius: 6px; padding: 16px; text-align: center; margin: 0; }\n/* A field's ring sits in the gap around it: picking or hovering one moves nothing. */\n.fd-canvas-field { position: relative; border-radius: 6px; cursor: pointer; padding: 6px 8px; margin: -6px -8px; }\n/* On the canvas a field is picked and moved, not read: pressing on its words starts a drag, not a selection. */\n.fd-canvas-field:not(.fd-editing), .fd-canvas-section-title, .fd-canvas.fd-dragging { user-select: none; -webkit-user-select: none; }\n.fd-canvas-field:hover { background: color-mix(in srgb, var(--fd-text) 4%, transparent); }\n/* Picked, the Google Forms way: tinted, with a bar down its side \u2014 no frame round its box's own frame. */\n.fd-canvas-field.fd-editing { background: var(--fd-accent-soft); box-shadow: inset 3px 0 0 var(--fd-accent); cursor: default; }\n.fd-canvas-field.fd-hidden-sometimes::after {\n  content: \"only sometimes\"; position: absolute; top: 4px; inset-inline-end: 6px; font-size: 10.5px; font-weight: 600; line-height: 1.5;\n  color: var(--fd-warning); background: var(--fd-warning-soft); border-radius: 4px; padding: 0 5px; pointer-events: none;\n}\n.fd-canvas-field.fd-editing.fd-hidden-sometimes::after { content: none; }\n.fd-canvas-label-row { display: flex; align-items: center; min-height: 1.45em; }\n.fd-canvas-label-input {\n  font: inherit; font-weight: var(--fd-label-weight); color: var(--fd-text); border: 0; border-bottom: 1px dashed var(--fd-border-strong);\n  background: none; padding: 0 0 1px; outline: none; max-width: 100%; min-width: 4ch; field-sizing: content; cursor: text;\n}\n.fd-canvas-label-input:focus { border-bottom: 2px solid var(--fd-accent); padding-bottom: 0; }\n/* Typed in where they stand, the line under the words is the focus: no ring round them too. */\n.fd-designer .fd-canvas-label-input:focus-visible, .fd-designer .fd-canvas-help-input:focus-visible, .fd-designer .fd-part-input:focus-visible, .fd-designer .fd-canvas-section-title-input:focus-visible { outline: none; }\n/* A picked choice's options: words on a line, as the survey's, not boxes in the picked field. */\n.fd-canvas-field .fd-q-option > .fd-input { border: 0; border-bottom: 1px solid var(--fd-border); border-radius: 0; background: none; box-shadow: none; padding-inline: 0; min-height: 30px; }\n.fd-canvas-field .fd-q-option > .fd-input:focus { border-bottom: 2px solid var(--fd-accent); }\n.fd-canvas-help-input { font: inherit; font-size: 12.5px; color: var(--fd-muted); border: 0; border-bottom: 1px dashed transparent; background: none; padding: 1px 0; outline: none; width: 100%; box-sizing: border-box; cursor: text; }\n.fd-canvas-help-input:hover, .fd-canvas-help-input:focus { border-bottom-color: var(--fd-border-strong); }\n.fd-canvas-help-input::placeholder { color: var(--fd-muted); opacity: 0.75; }\n.fd-canvas-field .fd-q-option-box { padding-block: 2px; }\n/* A kind's own settings, in the picked field: words and a line to type or pick on \u2014 no boxes in it. */\n.fd-inline-settings { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-block: 4px 2px; font-size: 13px; color: var(--fd-muted); }\n.fd-inline-setting { display: inline-flex; align-items: center; gap: 6px; }\n.fd-inline-select, .fd-inline-input, .fd-inline-settings .fd-column > .fd-input {\n  font: inherit; font-size: 13.5px; color: var(--fd-text); background: none; border: 0; border-bottom: 1px solid var(--fd-border-strong);\n  border-radius: 0; box-shadow: none; padding: 2px 0; min-height: 0;\n}\n/* As tall as a finger needs (WCAG 2.5.8), however close the next setting sits. */\n.fd-inline-select { padding-inline-end: 2px; cursor: pointer; min-height: 24px; }\n.fd-inline-input { width: 12ch; }\n.fd-inline-currency { width: 4.5ch; text-transform: uppercase; }\n.fd-designer .fd-inline-select:focus-visible, .fd-designer .fd-inline-input:focus-visible, .fd-designer .fd-inline-settings .fd-column > .fd-input:focus-visible { outline: none; }\n.fd-inline-select:focus, .fd-inline-input:focus, .fd-inline-settings .fd-column > .fd-input:focus { border-bottom: 2px solid var(--fd-accent); padding-bottom: 1px; }\n.fd-inline-settings .fd-columns-box { width: 100%; justify-items: start; }\n.fd-inline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; width: 100%; }\n/* A scale's end, its number then its words. */\n.fd-inline-end { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 360px; }\n.fd-inline-end-number { min-width: 20px; color: var(--fd-text); font-variant-numeric: tabular-nums; }\n.fd-inline-end-words { flex: 1; width: auto; }\n/* Kinds of file, on or off. */\n.fd-inline-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-inline-chip {\n  all: unset; box-sizing: border-box; cursor: pointer; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; color: var(--fd-text);\n  background: color-mix(in srgb, var(--fd-text) 6%, transparent);\n}\n.fd-inline-chip:hover { background: color-mix(in srgb, var(--fd-text) 10%, transparent); }\n.fd-inline-chip[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 600; }\n.fd-inline-chip:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-inline-settings .fd-columns { width: 100%; }\n.fd-inline-settings .fd-column { grid-template-columns: minmax(0, 1fr) 110px 28px; }\n.fd-canvas-tabs-head { display: flex; align-items: flex-end; gap: 4px; }\n.fd-canvas-tabs-head > .fd-tablist { flex: 1; }\n.fd-canvas-tab.fd-canvas-selected { background: var(--fd-accent-soft); border-radius: 3px 3px 0 0; }\n.fd-canvas-tabs.fd-canvas-selected { outline: 2px solid var(--fd-accent); outline-offset: 6px; border-radius: 4px; }\n.fd-canvas-add-tab { all: unset; cursor: pointer; width: 28px; height: 28px; margin-block-end: 4px; display: grid; place-items: center; border-radius: 4px; color: var(--fd-muted); font-size: 18px; }\n.fd-canvas-add-tab:hover { background: var(--fd-page); color: var(--fd-accent); }\n.fd-canvas-add-tab:focus-visible, .fd-canvas-title:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n\n/* A record's header on the canvas: the viewer's own parts, picked by a click, with a quiet way to add each kind. */\n.fd-canvas-header { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 6px 0 12px; border-block-end: 1px solid var(--fd-border); }\n.fd-canvas-header-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.fd-canvas-header-card { display: grid; gap: 10px; justify-items: stretch; }\n/* Not at the card's edge here, as the viewer's are: no reaching out to it. */\n.fd-canvas .fd-canvas-stats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; margin: 0; border-block-end: 0; }\n.fd-canvas-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.fd-canvas-part { position: relative; cursor: pointer; outline-offset: 3px; }\n.fd-canvas-part:hover { box-shadow: 0 0 0 2px var(--fd-border); }\n/* Picked: its own edge turns the accent, one line, not a ring round it. */\n.fd-canvas-part.fd-editing { box-shadow: 0 0 0 2px var(--fd-accent); cursor: default; }\n.fd-canvas-part:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-canvas-statusbar { border-radius: 6px; min-width: 0; }\n.fd-canvas-statusbar .fd-canvas-widget { pointer-events: none; }\n.fd-part-input { font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px dashed currentColor; padding: 0; outline: none; min-width: 4ch; field-sizing: content; cursor: text; }\n.fd-stat .fd-part-input { font-size: 12px; }\n.fd-part-bar { bottom: calc(100% + 8px); }\n.fd-canvas-add-part {\n  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 4px 9px; border-radius: 6px;\n  border: 1px dashed var(--fd-border-strong); color: var(--fd-muted); font-size: 12.5px; white-space: nowrap;\n}\n.fd-canvas-add-part:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-canvas-add-part:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-canvas-add-part .fd-dicon { width: 13px; height: 13px; }\n\n/* The bar on the field being edited: just above it; over its group's name in a first row; below it right under the tabs. */\n.fd-field-bar {\n  position: absolute; bottom: calc(100% + 8px); inset-inline-end: 0; z-index: 5; display: flex; align-items: center; gap: 1px; padding: 3px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px; box-shadow: 0 6px 16px rgba(15, 20, 25, 0.14); cursor: default;\n}\n.fd-bar-below > .fd-field-bar { bottom: auto; top: calc(100% + 8px); }\n/* Nudged back inside the canvas when the field's far edge would put it past the near one: the canvas measures it. */\n.fd-canvas-field > .fd-field-bar { translate: var(--fd-bar-nudge, 0px) 0; }\n/* In a group's first row, over the group's name, which the canvas measures as --fd-name-room. */\n.fd-bar-over-name > .fd-field-bar { bottom: calc(100% + var(--fd-name-room, 0px) + 8px); }\n.fd-bar-button {\n  all: unset; box-sizing: border-box; height: 26px; min-width: 26px; padding: 0 5px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;\n  color: var(--fd-text); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;\n}\n.fd-bar-button:hover { background: var(--fd-page); }\n.fd-bar-button:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-bar-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); }\n.fd-bar-grip { cursor: grab; color: var(--fd-muted); touch-action: none; }\n.fd-bar-kind-icon { display: inline-flex; }\n.fd-bar-kind > .fd-dicon { width: 12px; height: 12px; color: var(--fd-muted); }\n.fd-bar-sep { width: 1px; align-self: stretch; background: var(--fd-border); margin: 3px 2px; }\n@container (max-width: 560px) { .fd-bar-kind-name { display: none; } }\n\n/* A menu of choices: the editor a field is shown with, or its width. */\n.fd-menu {\n  position: fixed; z-index: 60; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); max-height: min(440px, calc(100vh - 16px)); overflow: auto;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: 10px; box-shadow: 0 18px 44px rgba(15, 20, 25, 0.18);\n  padding: 6px; display: grid; gap: 1px;\n}\n.fd-menu-title, .fd-menu-heading { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fd-muted); padding: 6px 8px 2px; }\n.fd-menu-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; font-size: 13.5px; cursor: pointer; }\n.fd-menu-item:hover, .fd-menu-item:focus-visible { background: var(--fd-page); }\n.fd-menu-item[aria-checked=\"true\"] { color: var(--fd-accent); font-weight: 600; }\n.fd-menu-item[aria-checked=\"true\"]::after { content: \"\u2713\"; margin-inline-start: auto; }\n.fd-menu-note { font-size: 12px; color: var(--fd-muted); margin: 4px 8px; line-height: 1.4; }\n.fd-menu { animation: fd-menu-in 120ms cubic-bezier(0, 0, 0.2, 1); transform-origin: top center; }\n@keyframes fd-menu-in { from { opacity: 0; transform: scale(0.94); } }\n.fd-menu-divider { height: 1px; background: var(--fd-border); margin: 5px -6px; }\n/* Google Forms' roomy menu: full-width rows, an icon on each, the choice tinted. */\n.fd-menu-roomy { padding: 8px 0; min-width: 224px; border-radius: 6px; }\n.fd-menu-roomy .fd-menu-title { padding: 4px 16px 6px; }\n.fd-menu-roomy .fd-menu-item { min-height: 44px; padding: 0 16px; gap: 16px; border-radius: 0; font-size: 14px; }\n.fd-menu-roomy .fd-menu-item > .fd-dicon { width: 22px; height: 22px; color: var(--fd-muted); flex: none; }\n.fd-menu-roomy .fd-menu-item[aria-checked=\"true\"] { background: var(--fd-accent-soft); }\n.fd-menu-roomy .fd-menu-item[aria-checked=\"true\"] > .fd-dicon { color: var(--fd-accent); }\n.fd-menu-roomy .fd-menu-divider { margin: 8px 0; }\n@media (prefers-reduced-motion: reduce) { .fd-menu { animation: none; } }\n\n/* Dragging: a chip with its name follows the pointer; a gap its size opens where it lands, the others moving aside. */\n.fd-drag-ghost.fd-drag-chip {\n  position: fixed; z-index: 100; pointer-events: none; margin: 0; max-width: 260px; padding: 6px 12px; box-sizing: border-box;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--fd-text);\n  background: var(--fd-surface); border: 1px solid var(--fd-accent); border-radius: 8px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);\n}\n.fd-drop-slot {\n  box-sizing: border-box; min-height: 44px; border: 2px dashed var(--fd-accent); border-radius: 8px; background: var(--fd-accent-soft);\n  grid-column: span min(var(--fd-span, 1), var(--fd-columns, 1));\n}\n.fd-canvas-field.fd-drag-source { display: none; }\n.fd-drag-source-dim { opacity: 0.35; }\n.fd-drop-marker { position: fixed; z-index: 99; pointer-events: none; background: var(--fd-accent); border-radius: 2px; }\n.fd-canvas-section { position: relative; }\n/* With the gap in it, an empty section says nothing about being empty. */\n.fd-canvas-section:has(.fd-drop-slot) .fd-canvas-empty { display: none; }\n\n.fd-props { display: grid; gap: 10px; }\n.fd-prop { display: grid; gap: 4px; }\n.fd-prop-name { font-size: 12.5px; color: var(--fd-muted); }\n.fd-props .fd-q-option-box { padding-inline-start: 2px; }\n.fd-columns-box { display: grid; gap: 6px; }\n.fd-columns { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }\n.fd-column { display: grid; grid-template-columns: minmax(0, 1fr) 104px 28px; gap: 6px; align-items: center; }\n.fd-props-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-block-start: 4px; border-block-start: 1px solid var(--fd-border); }\n.fd-properties-hint { color: var(--fd-muted); font-size: 13px; margin: 0; }\n.fd-kind-note { font-size: 12px; margin-block-start: -4px; }\n.fd-prop-when { gap: 6px; justify-items: start; }\n.fd-q-required-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }\n\n/* ---- The survey, the Google Forms way ------------------------------------------------------------\n   On a page tinted with the accent: a card heading the form, then quiet white cards 8px round, 24px in,\n   12px apart, no wider than 770px. The card picked lifts, a 6px bar down its side; its words sit in a\n   filled box whose line grows from the middle; its tools are beside it, following it down the page. */\n.fd-survey-canvas { background: color-mix(in srgb, var(--fd-accent) 8%, var(--fd-surface)); border-radius: var(--fd-radius); padding: 16px 68px 28px 16px; padding-inline: 16px 68px; }\n.fd-survey-column { position: relative; width: 100%; max-width: 770px; margin-inline: auto; display: grid; gap: 12px; }\n.fd-survey-column > .fd-button { justify-self: start; }\n.fd-line { position: relative; display: block; border-block-end: 1px solid transparent; }\n.fd-line > input { font: inherit; color: inherit; background: none; border: 0; outline: none; width: 100%; box-sizing: border-box; padding: 6px 0; margin: 0; }\n.fd-line > input::placeholder { color: var(--fd-muted); }\n/* The growing line is the focus here, as in Google Forms: no ring around it too. */\n.fd-designer .fd-line > input:focus, .fd-designer .fd-line > input:focus-visible { outline: none; box-shadow: none; }\n.fd-line:hover { border-block-end-color: var(--fd-border); }\n.fd-line::after { content: \"\"; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--fd-accent); transform: scaleX(0); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }\n.fd-line:focus-within::after { transform: scaleX(1); }\n.fd-survey-head { position: relative; display: grid; gap: 6px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px; padding: 26px 24px 22px; }\n.fd-survey-head::before { content: \"\"; position: absolute; top: -1px; inset-inline: -1px; height: 10px; background: var(--fd-accent); border-radius: 8px 8px 0 0; }\n.fd-survey-head-title { font-size: 32px !important; line-height: 1.25; }\n.fd-survey-head-description { font-size: 14px !important; }\n.fd-survey-canvas .fd-designer-pages { gap: 12px; }\n/* A page: its own card, its number on a tab over it. */\n.fd-survey-canvas .fd-design-step { background: none; border: 0; padding: 0; gap: 12px; border-radius: 0; }\n.fd-survey-canvas .fd-step-head {\n  position: relative; display: grid; gap: 8px; margin-block-start: 30px; padding: 18px 24px 20px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 0 8px 8px 8px;\n}\n.fd-survey-canvas .fd-step-number { position: absolute; bottom: 100%; inset-inline-start: -1px; border-radius: 8px 8px 0 0; padding: 5px 14px; font-size: 13px; font-weight: 500; }\n.fd-step-head-row { display: flex; gap: 8px; align-items: center; }\n.fd-step-title-box { flex: 1; min-width: 0; }\n.fd-survey-canvas .fd-step-title { font-size: 22px; font-weight: 400; }\n.fd-survey-canvas .fd-step-selected { border: 0; }\n.fd-survey-canvas .fd-step-selected > .fd-step-head { box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); }\n.fd-survey-canvas .fd-step-selected > .fd-step-head::after { content: \"\"; position: absolute; inset-block: -1px; inset-inline-start: -1px; width: 6px; background: var(--fd-accent); border-end-start-radius: 8px; }\n.fd-survey-canvas .fd-step-cards { gap: 12px; }\n.fd-survey-canvas .fd-add-question { justify-self: start; color: var(--fd-muted); }\n.fd-survey-canvas .fd-add-question:hover { color: var(--fd-accent); }\n/* A question: flat until picked. */\n.fd-survey-canvas .fd-q { border: 1px solid var(--fd-border); border-radius: 8px; padding: 24px; gap: 12px; }\n.fd-survey-canvas .fd-q-closed:hover { border-color: var(--fd-border); }\n.fd-survey-canvas .fd-q-title { font-size: 16px; }\n.fd-survey-canvas .fd-q-selected { padding-block-start: 24px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); }\n.fd-survey-canvas .fd-q-selected::before { content: \"\"; position: absolute; inset-block: -1px; inset-inline-start: -1px; width: 6px; background: var(--fd-accent); border-start-start-radius: 8px; border-end-start-radius: 8px; }\n/* The six dots, across the top, only where the pointer is. */\n.fd-survey-canvas .fd-q-grip { top: 0; height: 24px; transform: translateX(-50%) rotate(90deg); opacity: 0; transition: opacity 150ms; }\n.fd-survey-canvas .fd-q:hover .fd-q-grip, .fd-survey-canvas .fd-q-grip:focus-visible { opacity: 1; }\n.fd-survey-canvas .fd-q-head { gap: 16px; align-items: start; }\n.fd-q-label-box { background: color-mix(in srgb, var(--fd-text) 3%, var(--fd-surface)); border-block-end: 1px solid var(--fd-muted); border-radius: 4px 4px 0 0; }\n.fd-q-label-box:hover { border-block-end-color: var(--fd-text); }\n.fd-q-label-box > .fd-q-label { padding: 16px; min-height: 56px; font-size: 16px; }\n.fd-q-help-box { border-block-end-color: var(--fd-border); }\n.fd-q-help-box > .fd-q-help { font-size: 14px; }\n.fd-survey-canvas .fd-q-kind { min-height: 48px; min-width: 222px; padding: 0 14px; gap: 12px; border-radius: 4px; font-weight: 500; }\n.fd-survey-canvas .fd-q-kind-icon .fd-dicon { color: var(--fd-muted); }\n/* What goes in the answer, said on a dotted line. */\n.fd-q-preview { color: var(--fd-muted); font-size: 14px; padding-block: 8px 6px; border-block-end: 1px dotted color-mix(in srgb, var(--fd-text) 38%, transparent); width: min(50%, 380px); }\n.fd-q-preview-long { width: min(80%, 600px); }\n.fd-q-preview-date { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n.fd-q-preview-date > .fd-dicon { width: 18px; height: 18px; flex: none; }\n/* On a canvas, the designer's own buttons and switches keep the page's look: each kind of part's own is the form's \u2014\n   its answers' widgets, the buttons over a record, and a button block (drawn as a span, not a button). */\n.fd-look-worn.fd-form button:is(.fd-button, .fd-switch):not(.fd-q-answer *, .fd-canvas-widget *, .fd-canvas-header-actions *) {\n  --fd-accent: inherit; --fd-accent-text: inherit; --fd-focus: inherit; --fd-buttons-radius: var(--fd-control-radius); --fd-buttons-size: 1em;\n}\n/* The line wears the text boxes' own look, as the form's boxes will: their ground behind it, their edge for its line, their corners and size of words. */\n.fd-survey-canvas[data-inputs~=bg] :is(.fd-q-preview-short, .fd-q-preview-long) { background: var(--fd-inputs-bg); padding-inline: 8px; }\n.fd-survey-canvas[data-inputs~=border] :is(.fd-q-preview-short, .fd-q-preview-long) { border-block-end: 1px solid var(--fd-inputs-border); }\n.fd-survey-canvas[data-inputs~=radius] :is(.fd-q-preview-short, .fd-q-preview-long) { border-radius: var(--fd-inputs-radius); }\n.fd-survey-canvas[data-inputs~=size] :is(.fd-q-preview-short, .fd-q-preview-long) { font-size: var(--fd-inputs-size); }\n.fd-q-preview-list { list-style: none; margin: 0; padding: 0; border: 0; width: auto; display: grid; gap: 10px; color: var(--fd-text); }\n/* Where answers lead: the pages on one line, those for some answers off it and back. */\n.fd-branch-map { background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px; padding: 10px 16px 12px; min-width: 0; }\n.fd-branch-summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--fd-muted); }\n.fd-branch-summary:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 4px; }\n.fd-branch-scroll { overflow-x: auto; margin-block-start: 10px; }\n.fd-branch-svg { display: block; height: auto; }\n.fd-branch-edge { fill: none; stroke: var(--fd-muted); stroke-width: 1.5; }\n.fd-branch-off { stroke: var(--fd-warning); }\n.fd-branch-head { fill: var(--fd-muted); }\n.fd-branch-box { fill: var(--fd-surface); stroke: var(--fd-border-strong); stroke-width: 1; transition: stroke 120ms; }\n.fd-branch-page { cursor: pointer; outline: none; }\n.fd-branch-page:hover .fd-branch-box, .fd-branch-page:focus-visible .fd-branch-box { stroke: var(--fd-accent); }\n.fd-branch-page:focus-visible .fd-branch-box { stroke-width: 2; }\n.fd-branch-page.fd-picked .fd-branch-box { fill: var(--fd-accent-soft); stroke: var(--fd-accent); stroke-width: 2; }\n.fd-branch-title { fill: var(--fd-text); font-size: 14px; font-weight: 600; }\n.fd-branch-when { fill: var(--fd-warning); font-size: 12.5px; font-weight: 600; }\n@media (prefers-reduced-motion: reduce) { .fd-branch-box { transition: none; } }\n/* Options: a ring or a box, the words on a line that shows when pointed at, \u00D7 at the end. */\n.fd-survey-canvas .fd-q-options { gap: 0; }\n.fd-survey-canvas .fd-q-option { min-height: 44px; gap: 12px; }\n.fd-survey-canvas .fd-q-bullet { font-size: 0; flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--fd-border-strong); border-radius: 50%; }\n.fd-survey-canvas [data-multiple] .fd-q-bullet { border-radius: 3px; }\n.fd-survey-canvas .fd-q-option > .fd-input { flex: 1; min-width: 0; border: 0; border-block-end: 1px solid transparent; border-radius: 0; background: none; box-shadow: none; padding: 6px 0; min-height: 0; font-size: 14.5px; }\n.fd-survey-canvas .fd-q-option > .fd-input:hover { border-block-end-color: var(--fd-border); }\n.fd-survey-canvas .fd-q-option > .fd-input:focus { border-block-end: 2px solid var(--fd-accent); padding-block-end: 5px; outline: none; box-shadow: none; }\n.fd-survey-canvas .fd-q-option > .fd-icon-button { opacity: 0.55; font-size: 20px; }\n.fd-survey-canvas .fd-q-option > .fd-icon-button:hover { opacity: 1; }\n.fd-survey-canvas .fd-q-option-box { gap: 0; }\n.fd-survey-canvas .fd-q-add-row { min-height: 44px; gap: 6px; }\n/* The ghost of the next option: an empty ring, box or number before \"Add option\", as Google Forms draws it. */\n.fd-survey-canvas .fd-q-add-option { display: inline-flex; align-items: center; gap: 12px; color: var(--fd-muted) !important; text-decoration: none; }\n.fd-survey-canvas .fd-q-add-option::before { content: \"\"; flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--fd-border); border-radius: 50%; }\n.fd-survey-canvas [data-multiple] .fd-q-add-option::before { border-radius: 3px; }\n.fd-survey-canvas [data-numbered] .fd-q-add-option::before { content: var(--fd-next-number, \"\"); border: 0; width: auto; min-width: 20px; height: auto; font-size: 14px; color: var(--fd-muted); }\n/* Pointed at: a line grows under its words, past the ring \u2014 a box never. */\n.fd-survey-canvas .fd-q-add-option { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 32px 100%; padding-bottom: 3px !important; transition: background-size 200ms; }\n.fd-survey-canvas .fd-q-add-option:hover { color: var(--fd-text) !important; text-decoration: none !important; background-size: calc(100% - 32px) 1px; }\n.fd-survey-canvas .fd-q-add-other { color: var(--fd-accent); }\n.fd-survey-canvas [data-numbered] .fd-q-bullet { font-size: 14px; border: 0; border-radius: 0; width: auto; min-width: 20px; height: auto; color: var(--fd-text); }\n.fd-survey-canvas .fd-q-option-other { min-height: 44px; gap: 12px; }\n@media (prefers-reduced-motion: reduce) { .fd-survey-canvas .fd-q-add-option { transition: none; } }\n/* The foot: copy, delete, a line, Required, \u22EE \u2014 at the end, as Google Forms has them. */\n.fd-survey-canvas .fd-q-foot { justify-content: flex-end; gap: 2px; min-height: 48px; padding-block-start: 8px; margin-block-start: 4px; }\n.fd-q-tool { all: unset; box-sizing: border-box; width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--fd-muted); cursor: pointer; transition: background-color 150ms; }\n.fd-q-tool:hover, .fd-q-tool[aria-expanded=\"true\"] { background: color-mix(in srgb, var(--fd-text) 7%, transparent); color: var(--fd-text); }\n.fd-q-tool:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-q-tool > .fd-dicon { width: 21px; height: 21px; }\n.fd-q-tool-danger:hover { color: var(--fd-error); }\n.fd-survey-canvas .fd-q-sep { height: 32px; margin-inline: 10px; }\n.fd-survey-canvas .fd-q-required-words { font-size: 14px; font-weight: 500; margin-inline-end: 8px; }\n.fd-survey-canvas .fd-q-foot .fd-switch { margin-inline-end: 6px; }\n/* The tools beside the card picked, level with its top, sliding to the next one picked. */\n.fd-q-rail {\n  position: absolute; top: 0; inset-inline-start: calc(100% + 12px); z-index: 4; display: grid; gap: 2px; padding: 4px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px;\n  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);\n  transform: translateY(var(--fd-rail-y, 0px)); transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.fd-rail-button { all: unset; box-sizing: border-box; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--fd-muted); cursor: pointer; }\n.fd-rail-button:hover { background: color-mix(in srgb, var(--fd-text) 7%, transparent); color: var(--fd-text); }\n.fd-rail-button:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-rail-button > .fd-dicon { width: 22px; height: 22px; }\n@container (max-width: 620px) {\n  .fd-survey-canvas { padding-inline: 10px; }\n  /* A question's words the width of its card, its kind under them. */\n  .fd-survey-canvas .fd-q-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }\n  .fd-survey-canvas .fd-q-kind { min-width: 0; justify-self: start; }\n  .fd-q-rail { position: sticky; bottom: 12px; inset-inline-start: auto; justify-self: center; display: flex; transform: none; }\n}\n@media (prefers-reduced-motion: reduce) { .fd-line::after, .fd-q-rail, .fd-survey-canvas .fd-q-grip { transition: none; } }\n.fd-props > .fd-prop > .fd-button { justify-self: start; }\n/* Rows 24px apart at least, so each small box has room round it (WCAG 2.5.8). */\n.fd-list-search-fields { display: flex; flex-wrap: wrap; gap: 8px 14px; }\n.fd-list-filters { display: grid; gap: 8px; }\n.fd-list-filter { margin: 0; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--fd-border); border-radius: 6px; min-width: 0; }\n.fd-list-filter-condition { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }\n.fd-list-filter-value { display: contents; }\n.fd-list-filter-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n.fd-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-chips:empty { display: none; }\n.fd-chip { display: inline-flex; align-items: center; gap: 4px; padding-block: 2px; padding-inline: 8px 2px; border-radius: 4px; background: var(--fd-success-soft); color: var(--fd-success); font-size: 13px; }\n.fd-chip-remove { all: unset; cursor: pointer; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 3px; font-size: 15px; line-height: 1; }\n.fd-chip-remove:hover, .fd-chip-remove:focus-visible { background: var(--fd-surface); }\n\n/* A list on the canvas: the viewer's own list, its columns picked by a click and carried along the row. */\n.fd-list-canvas .fd-canvas-search { cursor: pointer; border-radius: var(--fd-control-radius); }\n.fd-list-canvas .fd-canvas-search:hover .fd-search-field { border-color: var(--fd-accent); }\n.fd-list-canvas .fd-canvas-search:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-search-placeholder { color: var(--fd-muted); font-size: 14px; padding: 5px 4px; }\n.fd-canvas-selection { display: flex; }\n.fd-canvas-selection-hint { color: var(--fd-muted); font-size: 12.5px; margin-inline-end: 4px; }\n.fd-canvas-list-actions { display: contents; }\n.fd-canvas-list-scroll { position: relative; }\n.fd-list-canvas .fd-list-table th.fd-canvas-column { position: relative; cursor: grab; user-select: none; }\n.fd-list-canvas .fd-list-table th.fd-canvas-column:hover { background: var(--fd-page); }\n.fd-list-canvas .fd-list-table th.fd-canvas-column:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-list-canvas .fd-list-table th.fd-picked { box-shadow: inset 0 0 0 2px var(--fd-accent); background: var(--fd-accent-soft); }\n.fd-list-canvas .fd-list-table td.fd-picked { background: var(--fd-accent-soft); }\n.fd-list-canvas .fd-list-table td { cursor: pointer; }\n/* Narrower than the running list, so a list's columns fit beside the toolbox and the panel. */\n.fd-list-canvas .fd-list-table td, .fd-list-canvas .fd-list-table th.fd-canvas-column { max-width: 12em; overflow: hidden; text-overflow: ellipsis; }\n.fd-list-canvas .fd-list-table .fd-list-checkbox { cursor: default; }\n.fd-list-canvas .fd-list-row:hover td { background: none; }\n.fd-list-canvas .fd-list-row:hover td.fd-picked { background: var(--fd-accent-soft); }\n.fd-column-bar { bottom: auto; top: calc(100% + 6px); inset-inline-end: auto; inset-inline-start: 0; }\n/* \"+ Column\" stays at the row's end however far the table scrolls. */\n.fd-list-canvas .fd-list-table .fd-canvas-add-column { position: sticky; inset-inline-end: 0; z-index: 1; width: 1%; padding-inline: 8px; background: var(--fd-surface); border-inline-start: 1px solid var(--fd-border); box-shadow: -6px 0 8px -6px rgba(15, 23, 42, 0.18); }\n.fd-canvas-add-column .fd-canvas-add-part { padding: 2px 6px; font-weight: 400; border: 0; color: var(--fd-accent); }\n.fd-canvas.fd-dragging .fd-list-table th.fd-canvas-column { cursor: grabbing; }\n/* After the panel rules, so these win when the editor is narrow: the toolbox and the panel stack around the canvas. */\n@container (max-width: 1000px) {\n  .fd-screen-body { grid-template-columns: minmax(0, 1fr); }\n  .fd-toolbox, .fd-properties, .fd-rail { position: static; max-height: none; }\n  .fd-tools { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }\n}\n@media (prefers-reduced-motion: reduce) { .fd-properties.fd-flash { animation: none; } .fd-tool-caret { transition: none; } }\n";
+export declare function installDesignerStyles(document: Document): void;

package/src/lib/styles.d.ts

@@ -0,0 +1,3 @@
+/** The designer's own chrome, on top of Fieldia's form stylesheet and tokens. */
+export declare const DESIGNER_CSS = "\n.fd-designer { display: grid; gap: 14px; }\n.fd-designer-bar {\n  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 10px 14px;\n}\n.fd-designer-title { font-size: 17px; font-weight: 600; flex: 1 1 220px; max-width: 420px; min-width: 0; }\n/* Where the page stands; pressed, the versions published. */\n.fd-designer-status-box { display: inline-flex; }\n.fd-designer-status { all: unset; box-sizing: border-box; cursor: pointer; color: var(--fd-muted); font-size: 13px; padding: 4px 8px; border-radius: 6px; }\n.fd-designer-status::after { content: \"\"; display: inline-block; width: 5px; height: 5px; margin-inline-start: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }\n.fd-designer-status:hover, .fd-designer-status[aria-expanded=\"true\"] { background: var(--fd-page); color: var(--fd-text); }\n.fd-designer-status:focus-visible { outline: 2px solid var(--fd-focus); }\n/* Checks: a count of what to look at, the colour of the worst of them. */\n.fd-checks-button { display: inline-flex; align-items: center; gap: 6px; }\n.fd-checks-button > .fd-dicon { width: 15px; height: 15px; }\n.fd-checks-count { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--fd-page); color: var(--fd-muted); }\n.fd-checks-button[data-state=\"clear\"] .fd-checks-count { background: var(--fd-success-soft); color: var(--fd-success); }\n.fd-checks-button[data-state=\"should\"] .fd-checks-count { background: var(--fd-warning-soft); color: var(--fd-warning); }\n.fd-checks-button[data-state=\"must\"] .fd-checks-count { background: var(--fd-error-soft); color: var(--fd-error); }\n.fd-checks {\n  position: fixed; z-index: 60; width: min(380px, calc(100vw - 16px)); max-height: min(480px, calc(100vh - 16px)); overflow: auto; box-sizing: border-box;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: 10px; box-shadow: 0 18px 44px rgba(15, 20, 25, 0.18);\n  padding: 6px; display: grid; gap: 4px; animation: fd-menu-in 120ms cubic-bezier(0, 0, 0.2, 1);\n}\n.fd-check { display: grid; gap: 6px; justify-items: start; padding: 10px; border-radius: 8px; }\n.fd-check + .fd-check { border-block-start: 1px solid var(--fd-border); border-radius: 0; }\n.fd-check-severity { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; }\n.fd-check[data-severity=\"must\"] .fd-check-severity { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-check[data-severity=\"should\"] .fd-check-severity { color: var(--fd-warning); background: var(--fd-warning-soft); }\n.fd-check-text { margin: 0; font-size: 13.5px; line-height: 1.45; }\n.fd-check-fix { min-height: 30px; padding-block: 2px; font-size: 13px; }\n/* Find anything: one box over all the editor can add, go to or do. */\n.fd-find-button { display: inline-flex; align-items: center; gap: 6px; color: var(--fd-muted); }\n.fd-find-button > .fd-dicon { width: 15px; height: 15px; }\n.fd-find-keys { font: inherit; font-size: 11.5px; padding: 1px 5px; border-radius: 4px; background: var(--fd-page); color: var(--fd-muted); }\n.fd-find-backdrop { z-index: 80; place-items: start center; padding-block-start: 12vh; }\n.fd-find {\n  width: min(560px, 100%); display: grid; overflow: hidden; background: var(--fd-surface); color: var(--fd-text);\n  border: 1px solid var(--fd-border); border-radius: 12px; box-shadow: 0 24px 64px rgba(15, 20, 25, 0.3); animation: fd-menu-in 120ms cubic-bezier(0, 0, 0.2, 1);\n}\n.fd-find-input { font: inherit; font-size: 16px; color: inherit; background: none; border: 0; border-block-end: 1px solid var(--fd-border); padding: 14px 18px; outline: none; }\n.fd-designer .fd-find-input:focus-visible { outline: none; }\n.fd-find-list { max-height: min(360px, 50vh); overflow: auto; padding: 6px; display: grid; gap: 1px; }\n.fd-find-list:empty { display: none; }\n.fd-find-option { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: 14px; }\n.fd-find-option[aria-selected=\"true\"] { background: var(--fd-accent-soft); }\n.fd-find-option:hover { background: var(--fd-page); }\n.fd-find-option[aria-selected=\"true\"]:hover { background: var(--fd-accent-soft); }\n.fd-find-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-find-hint { flex: none; font-size: 12px; color: var(--fd-muted); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-find-none { margin: 0; padding: 16px 18px; color: var(--fd-muted); }\n@media (prefers-reduced-motion: reduce) { .fd-find { animation: none; } }\n/* Publish, asked first. */\n.fd-publish-backdrop { z-index: 70; }\n.fd-publish-dialog { max-width: 480px; background: var(--fd-surface); }\n.fd-publish-body { display: grid; gap: 12px; padding: 16px 18px 4px; overflow: auto; }\n.fd-publish-lead { margin: 0; font-weight: 600; }\n.fd-publish-changes { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 14px; }\n.fd-publish-more { list-style: none; margin-inline-start: -20px; color: var(--fd-muted); }\n.fd-publish-blocked { display: grid; gap: 4px; border: 1px solid var(--fd-error); border-radius: 8px; padding: 6px; background: color-mix(in srgb, var(--fd-error-soft) 50%, var(--fd-surface)); }\n.fd-publish-blocked-head { margin: 4px 10px 0; font-weight: 600; color: var(--fd-error); }\n.fd-publish-failed { margin: 0; color: var(--fd-error); }\n.fd-publish-dialog .fd-form-dialog-foot { margin: 0; padding: 12px 18px 16px; }\n.fd-designer .fd-spacer { flex: 1; }\n.fd-designer-issues { white-space: pre-line; }\n.fd-designer-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); gap: 20px; align-items: start; }\n.fd-survey-body { grid-template-columns: 228px minmax(0, 1fr); gap: 16px; }\n.fd-survey-body > .fd-designer-editor { max-width: none; }\n@container (max-width: 900px) { .fd-designer-body, .fd-survey-body { grid-template-columns: minmax(0, 1fr); } .fd-survey-body > .fd-toolbox, .fd-survey-body > .fd-rail { position: static; max-height: none; } .fd-survey-body .fd-tools { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } }\n.fd-designer-editor { display: grid; gap: 14px; justify-items: start; }\n.fd-designer-editor > * { width: 100%; }\n.fd-designer-editor > .fd-button { width: auto; }\n.fd-designer-pages { display: grid; gap: 18px; }\n.fd-design-step { display: grid; gap: 10px; padding: 14px; border-radius: var(--fd-radius); background: var(--fd-page); border: 1px solid var(--fd-border); }\n.fd-step-head { display: flex; gap: 8px; align-items: center; }\n.fd-step-number { font-size: 12px; font-weight: 700; color: var(--fd-surface); background: var(--fd-accent); border-radius: 5px; padding: 2px 9px; white-space: nowrap; }\n.fd-step-selected { border-color: var(--fd-accent); }\n.fd-step-title { font-weight: 650; font-size: 15px; }\n.fd-step-when { color: var(--fd-muted); font-size: 13px; }\n.fd-when { display: grid; gap: 6px; justify-items: start; color: var(--fd-muted); font-size: 13px; }\n.fd-q .fd-when { padding: 8px 10px; border-inline-start: 3px solid var(--fd-accent-soft); background: var(--fd-page); border-radius: 4px; width: 100%; box-sizing: border-box; }\n.fd-when-rules { display: grid; gap: 6px; }\n.fd-when-rule, .fd-when-match-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }\n.fd-when .fd-select { width: auto; min-width: 140px; }\n.fd-when-custom code { font-size: 12.5px; color: var(--fd-text); }\n.fd-q-when { padding-inline: 4px; }\n.fd-step-cards { display: grid; gap: 10px; position: relative; }\n.fd-designer-editor.fd-dragging { user-select: none; -webkit-user-select: none; }\n/* Carried, a question leaves its place: the gap shows where it goes. */\n.fd-q.fd-drag-source { display: none; }\n.fd-add-question { display: inline-flex; gap: 6px; align-items: center; }\n.fd-design-step > .fd-button { justify-self: start; }\n.fd-step-cards:empty::before { content: \"No questions on this page yet.\"; color: var(--fd-muted); font-size: 13px; padding: 4px 2px; }\n.fd-q {\n  position: relative; display: grid; gap: 10px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius);\n  padding: 16px 18px; border-inline-start: 6px solid transparent; cursor: default;\n}\n/* A question not picked reads as people will see it, and opens where it is clicked. */\n.fd-q-closed { cursor: pointer; user-select: none; -webkit-user-select: none; }\n.fd-q-closed:hover { border-color: var(--fd-border-strong); border-inline-start-color: transparent; }\n.fd-q-title { font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }\n.fd-q-closed.fd-required .fd-q-text::after { content: \" *\"; color: var(--fd-error); }\n.fd-q-when-note { font-size: 11px; font-weight: 600; color: var(--fd-warning); background: var(--fd-warning-soft); border-radius: 4px; padding: 1px 6px; }\n.fd-q-closed .fd-q-answer { max-width: 520px; }\n/* The question picked: open, the Google Forms way. */\n.fd-q-selected { border-inline-start-color: var(--fd-accent); box-shadow: 0 2px 12px rgba(15, 20, 25, 0.12); padding-block-start: 22px; }\n.fd-q-grip { all: unset; position: absolute; top: 2px; left: 50%; transform: translateX(-50%) rotate(90deg); width: 18px; height: 22px; display: grid; place-items: center; cursor: grab; color: var(--fd-muted); touch-action: none; }\n.fd-q-grip:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-q-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }\n.fd-q-label { font-size: 15px; }\n.fd-q-kind {\n  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-width: 190px; padding: 0 12px; min-height: 38px;\n  border: 1px solid var(--fd-border); border-radius: 6px; background: var(--fd-surface); color: var(--fd-text); cursor: pointer; font-size: 14px;\n}\n.fd-q-kind:hover { background: var(--fd-page); }\n.fd-q-kind:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-q-kind-icon { display: inline-flex; }\n.fd-q-kind > .fd-dicon { margin-inline-start: auto; width: 14px; height: 14px; color: var(--fd-muted); }\n.fd-q-help { font-size: 13px; }\n.fd-q-sep { width: 1px; height: 24px; background: var(--fd-border); margin-inline: 6px; }\n.fd-q-required-words { font-size: 13px; }\n/* Material's switch, as Google Forms has it: a 14px track, a 20px thumb that slides over in 90ms. */\n.fd-switch { all: unset; position: relative; flex: none; width: 36px; height: 20px; cursor: pointer; border-radius: 10px; }\n.fd-switch::before { content: \"\"; position: absolute; inset-inline: 0; top: 3px; height: 14px; border-radius: 7px; background: var(--fd-border-strong); transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1); }\n.fd-switch::after {\n  content: \"\"; position: absolute; top: 0; inset-inline-start: 0; width: 20px; height: 20px; border-radius: 50%; background: #ffffff;\n  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);\n  transition: inset-inline-start 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.fd-switch[aria-checked=\"true\"]::before { background: color-mix(in srgb, var(--fd-accent) 54%, transparent); }\n.fd-switch[aria-checked=\"true\"]::after { inset-inline-start: 16px; background: var(--fd-accent); }\n.fd-switch:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n@media (prefers-reduced-motion: reduce) { .fd-switch::before, .fd-switch::after { transition: none; } }\n.fd-q-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }\n.fd-q-option { display: flex; gap: 8px; align-items: center; }\n.fd-q-bullet { color: var(--fd-muted); width: 16px; text-align: center; }\n.fd-q-option-box { display: grid; gap: 4px; justify-items: start; }\n.fd-q-option-box > ul { width: 100%; }\n/* \"Add option or add \"Other\"\", and \"Other\u2026\" once added: words and links, never boxes \u2014 pointed at, only a line under them. */\n.fd-q-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }\n.fd-q-option-box .fd-q-add-row > .fd-button-link { border: 0; background-color: transparent; box-shadow: none; padding: 2px 0; min-height: 0; font-weight: 400; }\n.fd-q-option-box .fd-q-add-row > .fd-button-link:hover { text-decoration: underline; text-underline-offset: 4px; }\n.fd-q-option-box .fd-q-add-row > .fd-button-link:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n.fd-q-or { color: var(--fd-muted); font-size: 13px; }\n.fd-q-option-other { display: flex; align-items: center; gap: 8px; width: 100%; }\n.fd-q-other-words { flex: 1; min-width: 0; color: var(--fd-muted); padding: 6px 0; border-bottom: 1px dotted color-mix(in srgb, var(--fd-text) 38%, transparent); }\n.fd-q-foot { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; border-block-start: 1px solid var(--fd-border); padding-block-start: 10px; }\n.fd-icon-button {\n  font: inherit; border: none; background: none; cursor: pointer; color: var(--fd-muted); width: 30px; height: 30px; border-radius: 6px;\n  display: inline-grid; place-items: center; font-size: 15px;\n}\n.fd-icon-button:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-icon-danger:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n\n/* ---- Design or Try it: the page working as people will use it ---- */\n.fd-mode { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fd-page); border: 1px solid var(--fd-border); }\n.fd-mode-button { all: unset; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--fd-muted); cursor: pointer; }\n.fd-mode-button[aria-pressed=\"true\"] { background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 2px rgba(15, 20, 25, 0.12); }\n.fd-mode-button[data-mode=\"try\"][aria-pressed=\"true\"] { background: var(--fd-success); color: #ffffff; }\n.fd-mode-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* The bar takes two rows by design: the page and what to do with it on top, the ways to look at it (Simple or\n   Advanced, Design to Translations, Look) on a row of their own beneath \u2014 never one button left alone on a\n   line, in any font or language. */\n.fd-designer-bar { container-type: inline-size; }\n.fd-bar-break { display: none; }\n@container (min-width: 521px) {\n  .fd-bar-break { display: block; flex-basis: 100%; height: 0; order: 1; }\n  .fd-designer-bar > :is(.fd-mode, .fd-look-button) { order: 2; }\n}\n/* On a narrow bar the ways to look at the page share one row: their words alone, each on one line. */\n@container (max-width: 520px) {\n  .fd-mode { display: flex; width: 100%; }\n  .fd-mode-button { flex: 1 1 auto; justify-content: center; padding-inline: 6px; white-space: nowrap; }\n  .fd-mode-button > .fd-dicon { display: none; }\n}\n.fd-try { display: grid; gap: 14px; }\n.fd-try-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 8px 12px; }\n.fd-try-group { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--fd-page); border: 1px solid var(--fd-border); }\n.fd-try-button { all: unset; display: inline-grid; place-items: center; min-width: 30px; height: 28px; padding: 0 9px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--fd-muted); cursor: pointer; }\n.fd-try-button[aria-pressed=\"true\"] { background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 2px rgba(15, 20, 25, 0.12); }\n.fd-try-button:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-try-note { margin: 0; color: var(--fd-muted); font-size: 13px; flex: 1 1 220px; text-align: center; }\n.fd-try-frame { margin-inline: auto; width: 100%; max-width: 1100px; box-sizing: border-box; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 20px; transition: max-width 0.3s ease; }\n.fd-try-frame[data-width=\"tablet\"] { max-width: 768px; }\n.fd-try-frame[data-width=\"phone\"] { max-width: 390px; padding: 14px; }\n/* A quiz sent in Try it: its score, under the thanks. */\n.fd-try-score { margin: 0; font-size: 17px; font-weight: 650; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n@media (prefers-reduced-motion: reduce) { .fd-try-frame { transition: none; } }\n\n/* ---- the screen editor: toolbox, canvas, panel ---- */\n.fd-screen-body { display: grid; grid-template-columns: 228px minmax(0, 1fr) 280px; gap: 16px; align-items: start; }\n.fd-toolbox, .fd-properties, .fd-rail {\n  position: sticky; top: var(--fd-bar-room, 76px); display: grid; gap: 6px; align-content: start; max-height: calc(100vh - var(--fd-bar-room, 76px) - 20px); overflow: auto;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 12px;\n}\n.fd-panel-title { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fd-muted); margin-block-end: 2px; }\n.fd-properties.fd-flash { animation: fd-flash 0.8s ease; }\n@keyframes fd-flash { from { box-shadow: 0 0 0 3px var(--fd-accent-soft), inset 3px 0 0 var(--fd-accent); } to { box-shadow: none; } }\n\n/* The toolbox: icons three to a row, in groups that fold, as Quantia's. */\n.fd-toolbox { padding: 10px 6px; gap: 4px; }\n/* Beside the page: Add (the toolbox), Outline and Data, in tabs. */\n.fd-rail { padding: 8px 6px 10px; gap: 8px; }\n.fd-rail > .fd-rail-pane { position: static; max-height: none; overflow: visible; border: 0; padding: 0; background: none; }\n.fd-rail-tabs { display: flex; gap: 2px; padding: 2px; margin: 0 4px; border-radius: 8px; background: var(--fd-page); }\n.fd-rail-tab { all: unset; box-sizing: border-box; flex: 1; text-align: center; cursor: pointer; padding: 5px 4px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--fd-muted); }\n.fd-rail-tab[aria-selected=\"true\"] { background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 2px rgba(15, 20, 25, 0.12); }\n.fd-rail-tab:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-outline, .fd-data { display: grid; gap: 8px; padding: 0 4px; min-width: 0; }\n.fd-outline-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }\n.fd-outline-tree button {\n  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 5px 6px;\n  padding-inline-start: calc(6px + var(--fd-level, 0) * 14px); border-radius: 6px; font-size: 13px; min-width: 0;\n}\n.fd-outline-tree button:hover { background: var(--fd-page); }\n.fd-outline-tree button[aria-current=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); }\n.fd-outline-tree button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-outline-tree button[data-level=\"0\"] { font-weight: 600; }\n.fd-outline-tree .fd-dicon { width: 14px; height: 14px; flex: none; color: var(--fd-muted); }\n.fd-outline-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-outline-when { display: inline-flex; color: var(--fd-warning); }\n.fd-outline-kind { flex: none; font-size: 11px; color: var(--fd-muted); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-data-card { display: grid; gap: 2px; padding: 10px; border-radius: 8px; background: var(--fd-page); font-size: 12.5px; color: var(--fd-muted); }\n.fd-data-model { font-size: 14px; color: var(--fd-text); overflow-wrap: anywhere; }\n.fd-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 2px; border-radius: 8px; background: var(--fd-page); }\n.fd-seg-button { all: unset; box-sizing: border-box; cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: 12px; color: var(--fd-muted); text-align: center; font-variant-numeric: tabular-nums; }\n.fd-seg-button[aria-pressed=\"true\"] { background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 2px rgba(15, 20, 25, 0.12); }\n.fd-seg-button:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-data-rows { display: grid; gap: 0; }\n.fd-data-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 7px 2px; border-block-start: 1px solid var(--fd-border); font-size: 13px; align-items: center; }\n.fd-data-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-data-used { font-size: 11px; color: var(--fd-muted); }\n.fd-data-used.fd-data-on { color: var(--fd-success); }\n.fd-data-row code { grid-column: 1; font-size: 11px; color: var(--fd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-data-row .fd-button-link { grid-column: 2; justify-self: end; padding: 0; min-height: 0; font-size: 12px; }\n.fd-tool-find { font-size: 13px; margin: 0 4px 4px; width: auto; }\n.fd-tool-groups { display: grid; gap: 2px; }\n.fd-tool-heading {\n  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%; cursor: pointer; padding: 8px 8px 3px;\n  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fd-muted);\n}\n.fd-tool-heading:hover { color: var(--fd-text); }\n.fd-tool-heading:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; border-radius: 3px; }\n.fd-tool-count { font-weight: 600; }\n.fd-tool-caret { width: 0; height: 0; flex: none; border-inline: 3.5px solid transparent; border-top: 4px solid currentColor; transition: transform 0.12s ease; }\n.fd-tool-shut .fd-tool-caret { transform: rotate(-90deg); }\n[dir=\"rtl\"] .fd-tool-shut .fd-tool-caret { transform: rotate(90deg); }\n.fd-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }\n.fd-tool {\n  all: unset; box-sizing: border-box; cursor: grab; display: grid; grid-template-rows: 22px auto; place-items: center; align-content: start; row-gap: 4px;\n  height: 60px; padding: 8px 3px 4px; border-radius: 7px; color: var(--fd-muted); min-width: 0; touch-action: none;\n}\n.fd-tool:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-tool:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-tool:active { cursor: grabbing; }\n.fd-tool-model { color: var(--fd-accent); }\n.fd-tool .fd-dicon { width: 20px; height: 20px; }\n.fd-tool-name {\n  font-size: 10.5px; line-height: 1.15; text-align: center; color: var(--fd-text); max-width: 100%; overflow: hidden;\n  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;\n}\n.fd-tool-none { color: var(--fd-muted); font-size: 12.5px; margin: 4px 8px; }\n.fd-dicon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\n\n/* The canvas: the page as the viewer draws it, measured against its own width. */\n.fd-canvas-scroll { min-width: 0; }\n.fd-canvas { container-type: inline-size; display: grid; gap: 18px; min-width: 0; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 22px 32px 30px; }\n/* A field's grip: six dots just beside it, shown when it is pointed at or picked. */\n.fd-card-grip {\n  all: unset; box-sizing: border-box; position: absolute; top: 6px; inset-inline-start: -20px; width: 16px; height: 24px; display: grid; place-items: center;\n  border-radius: 4px; color: var(--fd-muted); cursor: grab; opacity: 0; transition: opacity 120ms; touch-action: none;\n}\n.fd-card-grip > .fd-dicon { width: 14px; height: 14px; }\n.fd-canvas-field:hover > .fd-card-grip, .fd-canvas-field.fd-editing > .fd-card-grip, .fd-card-grip:focus-visible { opacity: 1; }\n.fd-card-grip:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-card-grip:active { cursor: grabbing; }\n@media (prefers-reduced-motion: reduce) { .fd-card-grip { transition: none; } }\n.fd-canvas-body { display: grid; gap: 26px; }\n.fd-canvas-title.fd-canvas-title-filled { color: var(--fd-text); }\n.fd-canvas-title { all: unset; box-sizing: border-box; cursor: pointer; font-size: 26px; font-weight: 650; line-height: 1.25; color: var(--fd-muted); padding: 8px 14px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-radius); background: var(--fd-surface); }\n.fd-canvas-title:hover { color: var(--fd-text); }\n.fd-canvas-title.fd-canvas-selected { border-style: solid; border-color: var(--fd-accent); }\n/* A section pointed at or picked: a bar down its side, just outside it \u2014 never a frame round the frames of its fields. */\n.fd-canvas-section { border-radius: 6px; }\n.fd-canvas-section::before { content: \"\"; position: absolute; inset-block: 0; inset-inline-start: -12px; width: 3px; border-radius: 2px; background: transparent; pointer-events: none; }\n.fd-canvas-section:hover::before { background: var(--fd-border-strong); }\n.fd-canvas-section.fd-canvas-selected::before { background: var(--fd-accent); }\n/* At least 24px tall, a target a finger can hit (WCAG 2.5.8), however small the title's words \u2014 the extra\n   height taken back by its margins, so the canvas lays out exactly as the form does. */\n.fd-canvas-section-title { all: unset; cursor: pointer; display: inline-block; min-height: 24px; margin-block: min(0px, calc((1lh - 24px) / 2)); }\n.fd-canvas-section-title:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-canvas-untitled { color: var(--fd-muted); font-weight: 500; font-style: italic; font-size: 13px; }\n.fd-canvas-section-title-input { font: inherit; color: inherit; border: 0; border-bottom: 1px dashed var(--fd-border-strong); background: none; padding: 0 0 1px; min-width: 12em; outline: none; }\n.fd-canvas-section-title-input:focus { border-bottom: 1px solid var(--fd-accent); }\n.fd-canvas-empty { color: var(--fd-muted); font-size: 13px; border: 1px dashed var(--fd-border); border-radius: 6px; padding: 16px; text-align: center; margin: 0; }\n/* A field's ring sits in the gap around it: picking or hovering one moves nothing. */\n.fd-canvas-field { position: relative; border-radius: 6px; cursor: pointer; padding: 6px 8px; margin: -6px -8px; }\n/* On the canvas a field is picked and moved, not read: pressing on its words starts a drag, not a selection. */\n.fd-canvas-field:not(.fd-editing), .fd-canvas-section-title, .fd-canvas.fd-dragging { user-select: none; -webkit-user-select: none; }\n.fd-canvas-field:hover { background: color-mix(in srgb, var(--fd-text) 4%, transparent); }\n/* Picked, the Google Forms way: tinted, with a bar down its side \u2014 no frame round its box's own frame. */\n.fd-canvas-field.fd-editing { background: var(--fd-accent-soft); box-shadow: inset 3px 0 0 var(--fd-accent); cursor: default; }\n.fd-canvas-field.fd-hidden-sometimes::after {\n  content: \"only sometimes\"; position: absolute; top: 4px; inset-inline-end: 6px; font-size: 10.5px; font-weight: 600; line-height: 1.5;\n  color: var(--fd-warning); background: var(--fd-warning-soft); border-radius: 4px; padding: 0 5px; pointer-events: none;\n}\n.fd-canvas-field.fd-editing.fd-hidden-sometimes::after { content: none; }\n.fd-canvas-label-row { display: flex; align-items: center; min-height: 1.45em; }\n.fd-canvas-label-input {\n  font: inherit; font-weight: var(--fd-label-weight); color: var(--fd-text); border: 0; border-bottom: 1px dashed var(--fd-border-strong);\n  background: none; padding: 0 0 1px; outline: none; max-width: 100%; min-width: 4ch; field-sizing: content; cursor: text;\n}\n.fd-canvas-label-input:focus { border-bottom: 2px solid var(--fd-accent); padding-bottom: 0; }\n/* Typed in where they stand, the line under the words is the focus: no ring round them too. */\n.fd-designer .fd-canvas-label-input:focus-visible, .fd-designer .fd-canvas-help-input:focus-visible, .fd-designer .fd-part-input:focus-visible, .fd-designer .fd-canvas-section-title-input:focus-visible { outline: none; }\n/* A picked choice's options: words on a line, as the survey's, not boxes in the picked field. */\n.fd-canvas-field .fd-q-option > .fd-input { border: 0; border-bottom: 1px solid var(--fd-border); border-radius: 0; background: none; box-shadow: none; padding-inline: 0; min-height: 30px; }\n.fd-canvas-field .fd-q-option > .fd-input:focus { border-bottom: 2px solid var(--fd-accent); }\n.fd-canvas-help-input { font: inherit; font-size: 12.5px; color: var(--fd-muted); border: 0; border-bottom: 1px dashed transparent; background: none; padding: 1px 0; outline: none; width: 100%; box-sizing: border-box; cursor: text; }\n.fd-canvas-help-input:hover, .fd-canvas-help-input:focus { border-bottom-color: var(--fd-border-strong); }\n.fd-canvas-help-input::placeholder { color: var(--fd-muted); opacity: 0.75; }\n.fd-canvas-field .fd-q-option-box { padding-block: 2px; }\n/* A kind's own settings, in the picked field: words and a line to type or pick on \u2014 no boxes in it. */\n.fd-inline-settings { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-block: 4px 2px; font-size: 13px; color: var(--fd-muted); }\n.fd-inline-setting { display: inline-flex; align-items: center; gap: 6px; }\n.fd-inline-select, .fd-inline-input, .fd-inline-settings .fd-column > .fd-input {\n  font: inherit; font-size: 13.5px; color: var(--fd-text); background: none; border: 0; border-bottom: 1px solid var(--fd-border-strong);\n  border-radius: 0; box-shadow: none; padding: 2px 0; min-height: 0;\n}\n/* As tall as a finger needs (WCAG 2.5.8), however close the next setting sits. */\n.fd-inline-select { padding-inline-end: 2px; cursor: pointer; min-height: 24px; }\n.fd-inline-input { width: 12ch; }\n.fd-inline-currency { width: 4.5ch; text-transform: uppercase; }\n.fd-designer .fd-inline-select:focus-visible, .fd-designer .fd-inline-input:focus-visible, .fd-designer .fd-inline-settings .fd-column > .fd-input:focus-visible { outline: none; }\n.fd-inline-select:focus, .fd-inline-input:focus, .fd-inline-settings .fd-column > .fd-input:focus { border-bottom: 2px solid var(--fd-accent); padding-bottom: 1px; }\n.fd-inline-settings .fd-columns-box { width: 100%; justify-items: start; }\n.fd-inline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; width: 100%; }\n/* A scale's end, its number then its words. */\n.fd-inline-end { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 360px; }\n.fd-inline-end-number { min-width: 20px; color: var(--fd-text); font-variant-numeric: tabular-nums; }\n.fd-inline-end-words { flex: 1; width: auto; }\n/* Kinds of file, on or off. */\n.fd-inline-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-inline-chip {\n  all: unset; box-sizing: border-box; cursor: pointer; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; color: var(--fd-text);\n  background: color-mix(in srgb, var(--fd-text) 6%, transparent);\n}\n.fd-inline-chip:hover { background: color-mix(in srgb, var(--fd-text) 10%, transparent); }\n.fd-inline-chip[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 600; }\n.fd-inline-chip:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-inline-settings .fd-columns { width: 100%; }\n.fd-inline-settings .fd-column { grid-template-columns: minmax(0, 1fr) 110px 28px; }\n.fd-canvas-tabs-head { display: flex; align-items: flex-end; gap: 4px; }\n.fd-canvas-tabs-head > .fd-tablist { flex: 1; }\n.fd-canvas-tab.fd-canvas-selected { background: var(--fd-accent-soft); border-radius: 3px 3px 0 0; }\n.fd-canvas-tabs.fd-canvas-selected { outline: 2px solid var(--fd-accent); outline-offset: 6px; border-radius: 4px; }\n.fd-canvas-add-tab { all: unset; cursor: pointer; width: 28px; height: 28px; margin-block-end: 4px; display: grid; place-items: center; border-radius: 4px; color: var(--fd-muted); font-size: 18px; }\n.fd-canvas-add-tab:hover { background: var(--fd-page); color: var(--fd-accent); }\n.fd-canvas-add-tab:focus-visible, .fd-canvas-title:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n\n/* A record's header on the canvas: the viewer's own parts, picked by a click, with a quiet way to add each kind. */\n.fd-canvas-header { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 6px 0 12px; border-block-end: 1px solid var(--fd-border); }\n.fd-canvas-header-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.fd-canvas-header-card { display: grid; gap: 10px; justify-items: stretch; }\n/* Not at the card's edge here, as the viewer's are: no reaching out to it. */\n.fd-canvas .fd-canvas-stats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; margin: 0; border-block-end: 0; }\n.fd-canvas-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.fd-canvas-part { position: relative; cursor: pointer; outline-offset: 3px; }\n.fd-canvas-part:hover { box-shadow: 0 0 0 2px var(--fd-border); }\n/* Picked: its own edge turns the accent, one line, not a ring round it. */\n.fd-canvas-part.fd-editing { box-shadow: 0 0 0 2px var(--fd-accent); cursor: default; }\n.fd-canvas-part:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-canvas-statusbar { border-radius: 6px; min-width: 0; }\n.fd-canvas-statusbar .fd-canvas-widget { pointer-events: none; }\n.fd-part-input { font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px dashed currentColor; padding: 0; outline: none; min-width: 4ch; field-sizing: content; cursor: text; }\n.fd-stat .fd-part-input { font-size: 12px; }\n.fd-part-bar { bottom: calc(100% + 8px); }\n.fd-canvas-add-part {\n  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 4px 9px; border-radius: 6px;\n  border: 1px dashed var(--fd-border-strong); color: var(--fd-muted); font-size: 12.5px; white-space: nowrap;\n}\n.fd-canvas-add-part:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-canvas-add-part:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-canvas-add-part .fd-dicon { width: 13px; height: 13px; }\n\n/* The bar on the field being edited: just above it; over its group's name in a first row; below it right under the tabs. */\n.fd-field-bar {\n  position: absolute; bottom: calc(100% + 8px); inset-inline-end: 0; z-index: 5; display: flex; align-items: center; gap: 1px; padding: 3px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px; box-shadow: 0 6px 16px rgba(15, 20, 25, 0.14); cursor: default;\n}\n.fd-bar-below > .fd-field-bar { bottom: auto; top: calc(100% + 8px); }\n/* Nudged back inside the canvas when the field's far edge would put it past the near one: the canvas measures it. */\n.fd-canvas-field > .fd-field-bar { translate: var(--fd-bar-nudge, 0px) 0; }\n/* In a group's first row, over the group's name, which the canvas measures as --fd-name-room. */\n.fd-bar-over-name > .fd-field-bar { bottom: calc(100% + var(--fd-name-room, 0px) + 8px); }\n.fd-bar-button {\n  all: unset; box-sizing: border-box; height: 26px; min-width: 26px; padding: 0 5px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;\n  color: var(--fd-text); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;\n}\n.fd-bar-button:hover { background: var(--fd-page); }\n.fd-bar-button:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-bar-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); }\n.fd-bar-grip { cursor: grab; color: var(--fd-muted); touch-action: none; }\n.fd-bar-kind-icon { display: inline-flex; }\n.fd-bar-kind > .fd-dicon { width: 12px; height: 12px; color: var(--fd-muted); }\n.fd-bar-sep { width: 1px; align-self: stretch; background: var(--fd-border); margin: 3px 2px; }\n@container (max-width: 560px) { .fd-bar-kind-name { display: none; } }\n\n/* A menu of choices: the editor a field is shown with, or its width. */\n.fd-menu {\n  position: fixed; z-index: 60; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); max-height: min(440px, calc(100vh - 16px)); overflow: auto;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: 10px; box-shadow: 0 18px 44px rgba(15, 20, 25, 0.18);\n  padding: 6px; display: grid; gap: 1px;\n}\n.fd-menu-title, .fd-menu-heading { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fd-muted); padding: 6px 8px 2px; }\n.fd-menu-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; font-size: 13.5px; cursor: pointer; }\n.fd-menu-item:hover, .fd-menu-item:focus-visible { background: var(--fd-page); }\n.fd-menu-item[aria-checked=\"true\"] { color: var(--fd-accent); font-weight: 600; }\n.fd-menu-item[aria-checked=\"true\"]::after { content: \"\u2713\"; margin-inline-start: auto; }\n.fd-menu-note { font-size: 12px; color: var(--fd-muted); margin: 4px 8px; line-height: 1.4; }\n.fd-menu { animation: fd-menu-in 120ms cubic-bezier(0, 0, 0.2, 1); transform-origin: top center; }\n@keyframes fd-menu-in { from { opacity: 0; transform: scale(0.94); } }\n.fd-menu-divider { height: 1px; background: var(--fd-border); margin: 5px -6px; }\n/* Google Forms' roomy menu: full-width rows, an icon on each, the choice tinted. */\n.fd-menu-roomy { padding: 8px 0; min-width: 224px; border-radius: 6px; }\n.fd-menu-roomy .fd-menu-title { padding: 4px 16px 6px; }\n.fd-menu-roomy .fd-menu-item { min-height: 44px; padding: 0 16px; gap: 16px; border-radius: 0; font-size: 14px; }\n.fd-menu-roomy .fd-menu-item > .fd-dicon { width: 22px; height: 22px; color: var(--fd-muted); flex: none; }\n.fd-menu-roomy .fd-menu-item[aria-checked=\"true\"] { background: var(--fd-accent-soft); }\n.fd-menu-roomy .fd-menu-item[aria-checked=\"true\"] > .fd-dicon { color: var(--fd-accent); }\n.fd-menu-roomy .fd-menu-divider { margin: 8px 0; }\n@media (prefers-reduced-motion: reduce) { .fd-menu { animation: none; } }\n\n/* Dragging: a chip with its name follows the pointer; a gap its size opens where it lands, the others moving aside. */\n.fd-drag-ghost.fd-drag-chip {\n  position: fixed; z-index: 100; pointer-events: none; margin: 0; max-width: 260px; padding: 6px 12px; box-sizing: border-box;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--fd-text);\n  background: var(--fd-surface); border: 1px solid var(--fd-accent); border-radius: 8px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);\n}\n.fd-drop-slot {\n  box-sizing: border-box; min-height: 44px; border: 2px dashed var(--fd-accent); border-radius: 8px; background: var(--fd-accent-soft);\n  grid-column: span min(var(--fd-span, 1), var(--fd-columns, 1));\n}\n.fd-canvas-field.fd-drag-source { display: none; }\n.fd-drag-source-dim { opacity: 0.35; }\n.fd-drop-marker { position: fixed; z-index: 99; pointer-events: none; background: var(--fd-accent); border-radius: 2px; }\n.fd-canvas-section { position: relative; }\n/* With the gap in it, an empty section says nothing about being empty. */\n.fd-canvas-section:has(.fd-drop-slot) .fd-canvas-empty { display: none; }\n\n.fd-props { display: grid; gap: 10px; }\n.fd-prop { display: grid; gap: 4px; }\n.fd-prop-name { font-size: 12.5px; color: var(--fd-muted); }\n.fd-props .fd-q-option-box { padding-inline-start: 2px; }\n.fd-columns-box { display: grid; gap: 6px; }\n.fd-columns { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }\n.fd-column { display: grid; grid-template-columns: minmax(0, 1fr) 104px 28px; gap: 6px; align-items: center; }\n.fd-props-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-block-start: 4px; border-block-start: 1px solid var(--fd-border); }\n.fd-properties-hint { color: var(--fd-muted); font-size: 13px; margin: 0; }\n.fd-kind-note { font-size: 12px; margin-block-start: -4px; }\n.fd-prop-when { gap: 6px; justify-items: start; }\n.fd-q-required-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }\n\n/* ---- The survey, the Google Forms way ------------------------------------------------------------\n   On a page tinted with the accent: a card heading the form, then quiet white cards 8px round, 24px in,\n   12px apart, no wider than 770px. The card picked lifts, a 6px bar down its side; its words sit in a\n   filled box whose line grows from the middle; its tools are beside it, following it down the page. */\n.fd-survey-canvas { background: color-mix(in srgb, var(--fd-accent) 8%, var(--fd-surface)); border-radius: var(--fd-radius); padding: 16px 68px 28px 16px; padding-inline: 16px 68px; }\n.fd-survey-column { position: relative; width: 100%; max-width: 770px; margin-inline: auto; display: grid; gap: 12px; }\n.fd-survey-column > .fd-button { justify-self: start; }\n.fd-line { position: relative; display: block; border-block-end: 1px solid transparent; }\n.fd-line > input { font: inherit; color: inherit; background: none; border: 0; outline: none; width: 100%; box-sizing: border-box; padding: 6px 0; margin: 0; }\n.fd-line > input::placeholder { color: var(--fd-muted); }\n/* The growing line is the focus here, as in Google Forms: no ring around it too. */\n.fd-designer .fd-line > input:focus, .fd-designer .fd-line > input:focus-visible { outline: none; box-shadow: none; }\n.fd-line:hover { border-block-end-color: var(--fd-border); }\n.fd-line::after { content: \"\"; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--fd-accent); transform: scaleX(0); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }\n.fd-line:focus-within::after { transform: scaleX(1); }\n.fd-survey-head { position: relative; display: grid; gap: 6px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px; padding: 26px 24px 22px; }\n.fd-survey-head::before { content: \"\"; position: absolute; top: -1px; inset-inline: -1px; height: 10px; background: var(--fd-accent); border-radius: 8px 8px 0 0; }\n.fd-survey-head-title { font-size: 32px !important; line-height: 1.25; }\n.fd-survey-head-description { font-size: 14px !important; }\n.fd-survey-canvas .fd-designer-pages { gap: 12px; }\n/* A page: its own card, its number on a tab over it. */\n.fd-survey-canvas .fd-design-step { background: none; border: 0; padding: 0; gap: 12px; border-radius: 0; }\n.fd-survey-canvas .fd-step-head {\n  position: relative; display: grid; gap: 8px; margin-block-start: 30px; padding: 18px 24px 20px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 0 8px 8px 8px;\n}\n.fd-survey-canvas .fd-step-number { position: absolute; bottom: 100%; inset-inline-start: -1px; border-radius: 8px 8px 0 0; padding: 5px 14px; font-size: 13px; font-weight: 500; }\n.fd-step-head-row { display: flex; gap: 8px; align-items: center; }\n.fd-step-title-box { flex: 1; min-width: 0; }\n.fd-survey-canvas .fd-step-title { font-size: 22px; font-weight: 400; }\n.fd-survey-canvas .fd-step-selected { border: 0; }\n.fd-survey-canvas .fd-step-selected > .fd-step-head { box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); }\n.fd-survey-canvas .fd-step-selected > .fd-step-head::after { content: \"\"; position: absolute; inset-block: -1px; inset-inline-start: -1px; width: 6px; background: var(--fd-accent); border-end-start-radius: 8px; }\n.fd-survey-canvas .fd-step-cards { gap: 12px; }\n.fd-survey-canvas .fd-add-question { justify-self: start; color: var(--fd-muted); }\n.fd-survey-canvas .fd-add-question:hover { color: var(--fd-accent); }\n/* A question: flat until picked. */\n.fd-survey-canvas .fd-q { border: 1px solid var(--fd-border); border-radius: 8px; padding: 24px; gap: 12px; }\n.fd-survey-canvas .fd-q-closed:hover { border-color: var(--fd-border); }\n.fd-survey-canvas .fd-q-title { font-size: 16px; }\n.fd-survey-canvas .fd-q-selected { padding-block-start: 24px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); }\n.fd-survey-canvas .fd-q-selected::before { content: \"\"; position: absolute; inset-block: -1px; inset-inline-start: -1px; width: 6px; background: var(--fd-accent); border-start-start-radius: 8px; border-end-start-radius: 8px; }\n/* The six dots, across the top, only where the pointer is. */\n.fd-survey-canvas .fd-q-grip { top: 0; height: 24px; transform: translateX(-50%) rotate(90deg); opacity: 0; transition: opacity 150ms; }\n.fd-survey-canvas .fd-q:hover .fd-q-grip, .fd-survey-canvas .fd-q-grip:focus-visible { opacity: 1; }\n.fd-survey-canvas .fd-q-head { gap: 16px; align-items: start; }\n.fd-q-label-box { background: color-mix(in srgb, var(--fd-text) 3%, var(--fd-surface)); border-block-end: 1px solid var(--fd-muted); border-radius: 4px 4px 0 0; }\n.fd-q-label-box:hover { border-block-end-color: var(--fd-text); }\n.fd-q-label-box > .fd-q-label { padding: 16px; min-height: 56px; font-size: 16px; }\n.fd-q-help-box { border-block-end-color: var(--fd-border); }\n.fd-q-help-box > .fd-q-help { font-size: 14px; }\n.fd-survey-canvas .fd-q-kind { min-height: 48px; min-width: 222px; padding: 0 14px; gap: 12px; border-radius: 4px; font-weight: 500; }\n.fd-survey-canvas .fd-q-kind-icon .fd-dicon { color: var(--fd-muted); }\n/* What goes in the answer, said on a dotted line. */\n.fd-q-preview { color: var(--fd-muted); font-size: 14px; padding-block: 8px 6px; border-block-end: 1px dotted color-mix(in srgb, var(--fd-text) 38%, transparent); width: min(50%, 380px); }\n.fd-q-preview-long { width: min(80%, 600px); }\n.fd-q-preview-date { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n.fd-q-preview-date > .fd-dicon { width: 18px; height: 18px; flex: none; }\n/* On a canvas, the designer's own buttons and switches keep the page's look: each kind of part's own is the form's \u2014\n   its answers' widgets, the buttons over a record, and a button block (drawn as a span, not a button). */\n.fd-look-worn.fd-form button:is(.fd-button, .fd-switch):not(.fd-q-answer *, .fd-canvas-widget *, .fd-canvas-header-actions *) {\n  --fd-accent: inherit; --fd-accent-text: inherit; --fd-focus: inherit; --fd-buttons-radius: var(--fd-control-radius); --fd-buttons-size: 1em;\n}\n/* The line wears the text boxes' own look, as the form's boxes will: their ground behind it, their edge for its line, their corners and size of words. */\n.fd-survey-canvas[data-inputs~=bg] :is(.fd-q-preview-short, .fd-q-preview-long) { background: var(--fd-inputs-bg); padding-inline: 8px; }\n.fd-survey-canvas[data-inputs~=border] :is(.fd-q-preview-short, .fd-q-preview-long) { border-block-end: 1px solid var(--fd-inputs-border); }\n.fd-survey-canvas[data-inputs~=radius] :is(.fd-q-preview-short, .fd-q-preview-long) { border-radius: var(--fd-inputs-radius); }\n.fd-survey-canvas[data-inputs~=size] :is(.fd-q-preview-short, .fd-q-preview-long) { font-size: var(--fd-inputs-size); }\n.fd-q-preview-list { list-style: none; margin: 0; padding: 0; border: 0; width: auto; display: grid; gap: 10px; color: var(--fd-text); }\n/* Where answers lead: the pages on one line, those for some answers off it and back. */\n.fd-branch-map { background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px; padding: 10px 16px 12px; min-width: 0; }\n.fd-branch-summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--fd-muted); }\n.fd-branch-summary:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 4px; }\n.fd-branch-scroll { overflow-x: auto; margin-block-start: 10px; }\n.fd-branch-svg { display: block; height: auto; }\n.fd-branch-edge { fill: none; stroke: var(--fd-muted); stroke-width: 1.5; }\n.fd-branch-off { stroke: var(--fd-warning); }\n.fd-branch-head { fill: var(--fd-muted); }\n.fd-branch-box { fill: var(--fd-surface); stroke: var(--fd-border-strong); stroke-width: 1; transition: stroke 120ms; }\n.fd-branch-page { cursor: pointer; outline: none; }\n.fd-branch-page:hover .fd-branch-box, .fd-branch-page:focus-visible .fd-branch-box { stroke: var(--fd-accent); }\n.fd-branch-page:focus-visible .fd-branch-box { stroke-width: 2; }\n.fd-branch-page.fd-picked .fd-branch-box { fill: var(--fd-accent-soft); stroke: var(--fd-accent); stroke-width: 2; }\n.fd-branch-title { fill: var(--fd-text); font-size: 14px; font-weight: 600; }\n.fd-branch-when { fill: var(--fd-warning); font-size: 12.5px; font-weight: 600; }\n@media (prefers-reduced-motion: reduce) { .fd-branch-box { transition: none; } }\n/* Options: a ring or a box, the words on a line that shows when pointed at, \u00D7 at the end. */\n.fd-survey-canvas .fd-q-options { gap: 0; }\n.fd-survey-canvas .fd-q-option { min-height: 44px; gap: 12px; }\n.fd-survey-canvas .fd-q-bullet { font-size: 0; flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--fd-border-strong); border-radius: 50%; }\n.fd-survey-canvas [data-multiple] .fd-q-bullet { border-radius: 3px; }\n.fd-survey-canvas .fd-q-option > .fd-input { flex: 1; min-width: 0; border: 0; border-block-end: 1px solid transparent; border-radius: 0; background: none; box-shadow: none; padding: 6px 0; min-height: 0; font-size: 14.5px; }\n.fd-survey-canvas .fd-q-option > .fd-input:hover { border-block-end-color: var(--fd-border); }\n.fd-survey-canvas .fd-q-option > .fd-input:focus { border-block-end: 2px solid var(--fd-accent); padding-block-end: 5px; outline: none; box-shadow: none; }\n.fd-survey-canvas .fd-q-option > .fd-icon-button { opacity: 0.55; font-size: 20px; }\n.fd-survey-canvas .fd-q-option > .fd-icon-button:hover { opacity: 1; }\n.fd-survey-canvas .fd-q-option-box { gap: 0; }\n.fd-survey-canvas .fd-q-add-row { min-height: 44px; gap: 6px; }\n/* The ghost of the next option: an empty ring, box or number before \"Add option\", as Google Forms draws it. */\n.fd-survey-canvas .fd-q-add-option { display: inline-flex; align-items: center; gap: 12px; color: var(--fd-muted) !important; text-decoration: none; }\n.fd-survey-canvas .fd-q-add-option::before { content: \"\"; flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--fd-border); border-radius: 50%; }\n.fd-survey-canvas [data-multiple] .fd-q-add-option::before { border-radius: 3px; }\n.fd-survey-canvas [data-numbered] .fd-q-add-option::before { content: var(--fd-next-number, \"\"); border: 0; width: auto; min-width: 20px; height: auto; font-size: 14px; color: var(--fd-muted); }\n/* Pointed at: a line grows under its words, past the ring \u2014 a box never. */\n.fd-survey-canvas .fd-q-add-option { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 32px 100%; padding-bottom: 3px !important; transition: background-size 200ms; }\n.fd-survey-canvas .fd-q-add-option:hover { color: var(--fd-text) !important; text-decoration: none !important; background-size: calc(100% - 32px) 1px; }\n.fd-survey-canvas .fd-q-add-other { color: var(--fd-accent); }\n.fd-survey-canvas [data-numbered] .fd-q-bullet { font-size: 14px; border: 0; border-radius: 0; width: auto; min-width: 20px; height: auto; color: var(--fd-text); }\n.fd-survey-canvas .fd-q-option-other { min-height: 44px; gap: 12px; }\n@media (prefers-reduced-motion: reduce) { .fd-survey-canvas .fd-q-add-option { transition: none; } }\n/* The foot: copy, delete, a line, Required, \u22EE \u2014 at the end, as Google Forms has them. */\n.fd-survey-canvas .fd-q-foot { justify-content: flex-end; gap: 2px; min-height: 48px; padding-block-start: 8px; margin-block-start: 4px; }\n.fd-q-tool { all: unset; box-sizing: border-box; width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--fd-muted); cursor: pointer; transition: background-color 150ms; }\n.fd-q-tool:hover, .fd-q-tool[aria-expanded=\"true\"] { background: color-mix(in srgb, var(--fd-text) 7%, transparent); color: var(--fd-text); }\n.fd-q-tool:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-q-tool > .fd-dicon { width: 21px; height: 21px; }\n.fd-q-tool-danger:hover { color: var(--fd-error); }\n.fd-survey-canvas .fd-q-sep { height: 32px; margin-inline: 10px; }\n.fd-survey-canvas .fd-q-required-words { font-size: 14px; font-weight: 500; margin-inline-end: 8px; }\n.fd-survey-canvas .fd-q-foot .fd-switch { margin-inline-end: 6px; }\n/* The tools beside the card picked, level with its top, sliding to the next one picked. */\n.fd-q-rail {\n  position: absolute; top: 0; inset-inline-start: calc(100% + 12px); z-index: 4; display: grid; gap: 2px; padding: 4px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px;\n  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);\n  transform: translateY(var(--fd-rail-y, 0px)); transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.fd-rail-button { all: unset; box-sizing: border-box; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--fd-muted); cursor: pointer; }\n.fd-rail-button:hover { background: color-mix(in srgb, var(--fd-text) 7%, transparent); color: var(--fd-text); }\n.fd-rail-button:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-rail-button > .fd-dicon { width: 22px; height: 22px; }\n@container (max-width: 620px) {\n  .fd-survey-canvas { padding-inline: 10px; }\n  /* A question's words the width of its card, its kind under them. */\n  .fd-survey-canvas .fd-q-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }\n  .fd-survey-canvas .fd-q-kind { min-width: 0; justify-self: start; }\n  .fd-q-rail { position: sticky; bottom: 12px; inset-inline-start: auto; justify-self: center; display: flex; transform: none; }\n}\n@media (prefers-reduced-motion: reduce) { .fd-line::after, .fd-q-rail, .fd-survey-canvas .fd-q-grip { transition: none; } }\n.fd-props > .fd-prop > .fd-button { justify-self: start; }\n/* Rows 24px apart at least, so each small box has room round it (WCAG 2.5.8). */\n.fd-list-search-fields { display: flex; flex-wrap: wrap; gap: 8px 14px; }\n.fd-list-filters { display: grid; gap: 8px; }\n.fd-list-filter { margin: 0; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--fd-border); border-radius: 6px; min-width: 0; }\n.fd-list-filter-condition { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }\n.fd-list-filter-value { display: contents; }\n.fd-list-filter-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n.fd-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-chips:empty { display: none; }\n.fd-chip { display: inline-flex; align-items: center; gap: 4px; padding-block: 2px; padding-inline: 8px 2px; border-radius: 4px; background: var(--fd-success-soft); color: var(--fd-success); font-size: 13px; }\n.fd-chip-remove { all: unset; cursor: pointer; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 3px; font-size: 15px; line-height: 1; }\n.fd-chip-remove:hover, .fd-chip-remove:focus-visible { background: var(--fd-surface); }\n\n/* A list on the canvas: the viewer's own list, its columns picked by a click and carried along the row. */\n.fd-list-canvas .fd-canvas-search { cursor: pointer; border-radius: var(--fd-control-radius); }\n.fd-list-canvas .fd-canvas-search:hover .fd-search-field { border-color: var(--fd-accent); }\n.fd-list-canvas .fd-canvas-search:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-search-placeholder { color: var(--fd-muted); font-size: 14px; padding: 5px 4px; }\n.fd-canvas-selection { display: flex; }\n.fd-canvas-selection-hint { color: var(--fd-muted); font-size: 12.5px; margin-inline-end: 4px; }\n.fd-canvas-list-actions { display: contents; }\n.fd-canvas-list-scroll { position: relative; }\n.fd-list-canvas .fd-list-table th.fd-canvas-column { position: relative; cursor: grab; user-select: none; }\n.fd-list-canvas .fd-list-table th.fd-canvas-column:hover { background: var(--fd-page); }\n.fd-list-canvas .fd-list-table th.fd-canvas-column:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-list-canvas .fd-list-table th.fd-picked { box-shadow: inset 0 0 0 2px var(--fd-accent); background: var(--fd-accent-soft); }\n.fd-list-canvas .fd-list-table td.fd-picked { background: var(--fd-accent-soft); }\n.fd-list-canvas .fd-list-table td { cursor: pointer; }\n/* Narrower than the running list, so a list's columns fit beside the toolbox and the panel. */\n.fd-list-canvas .fd-list-table td, .fd-list-canvas .fd-list-table th.fd-canvas-column { max-width: 12em; overflow: hidden; text-overflow: ellipsis; }\n.fd-list-canvas .fd-list-table .fd-list-checkbox { cursor: default; }\n.fd-list-canvas .fd-list-row:hover td { background: none; }\n.fd-list-canvas .fd-list-row:hover td.fd-picked { background: var(--fd-accent-soft); }\n.fd-column-bar { bottom: auto; top: calc(100% + 6px); inset-inline-end: auto; inset-inline-start: 0; }\n/* \"+ Column\" stays at the row's end however far the table scrolls. */\n.fd-list-canvas .fd-list-table .fd-canvas-add-column { position: sticky; inset-inline-end: 0; z-index: 1; width: 1%; padding-inline: 8px; background: var(--fd-surface); border-inline-start: 1px solid var(--fd-border); box-shadow: -6px 0 8px -6px rgba(15, 23, 42, 0.18); }\n.fd-canvas-add-column .fd-canvas-add-part { padding: 2px 6px; font-weight: 400; border: 0; color: var(--fd-accent); }\n.fd-canvas.fd-dragging .fd-list-table th.fd-canvas-column { cursor: grabbing; }\n/* After the panel rules, so these win when the editor is narrow: the toolbox and the panel stack around the canvas. */\n@container (max-width: 1000px) {\n  .fd-screen-body { grid-template-columns: minmax(0, 1fr); }\n  .fd-toolbox, .fd-properties, .fd-rail { position: static; max-height: none; }\n  .fd-tools { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }\n}\n@media (prefers-reduced-motion: reduce) { .fd-properties.fd-flash { animation: none; } .fd-tool-caret { transition: none; } }\n";
+export declare function installDesignerStyles(document: Document): void;