@fieldia/designer 0.24.0 → 0.26.0

package/src/lib/styles.d.ts

@@ -1,3 +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/* The record's gear menu over the header: its items in a row after the gear, a report under Print dashed. */\n.fd-canvas-menu { flex-basis: 100%; display: flex; align-items: center; gap: 8px; min-width: 0; }\n.fd-canvas-menu-gear { display: inline-flex; color: var(--fd-muted); }\n.fd-canvas-menu-gear .fd-dicon { width: 16px; height: 16px; }\n.fd-canvas-menu-items { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.fd-canvas-menu-item { font: inherit; font-size: 12.5px; }\n.fd-canvas-menu-print { border-style: dashed; }\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, .fd-list-filter-fields { display: flex; flex-wrap: wrap; gap: 8px 14px; }\n/* A field the filter bar offers: its box, and its own name on the bar beside it, on a line of their own. */\n.fd-list-filter-field { flex: 1 1 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }\n/* A column's width: the number, and what it is in. */\n.fd-list-width { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }\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/* A filter bar of fields: each field's name and chevron at the bar's end. */\n.fd-canvas-filter-fields { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-inline-start: auto; padding-inline-end: 8px; color: var(--fd-muted); font-size: 14px; }\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 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[data-severity=\"start\"] .fd-check-severity { color: var(--fd-muted); background: var(--fd-page); }\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/* The record's gear menu over the header: its items in a row after the gear, a report under Print dashed. */\n.fd-canvas-menu { flex-basis: 100%; display: flex; align-items: center; gap: 8px; min-width: 0; }\n.fd-canvas-menu-gear { display: inline-flex; color: var(--fd-muted); }\n.fd-canvas-menu-gear .fd-dicon { width: 16px; height: 16px; }\n.fd-canvas-menu-items { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.fd-canvas-menu-item { font: inherit; font-size: 12.5px; }\n.fd-canvas-menu-print { border-style: dashed; }\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, .fd-list-filter-fields { display: flex; flex-wrap: wrap; gap: 8px 14px; }\n/* A field the filter bar offers: its box, and its own name on the bar beside it, on a line of their own. */\n.fd-list-filter-field { flex: 1 1 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }\n/* A column's width: the number, and what it is in. */\n.fd-list-width { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }\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/* A filter bar of fields: each field's name and chevron at the bar's end. */\n.fd-canvas-filter-fields { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-inline-start: auto; padding-inline-end: 8px; color: var(--fd-muted); font-size: 14px; }\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.js

@@ -45,6 +45,7 @@ exports.DESIGNER_CSS = `
 .fd-check-severity { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; }
 .fd-check[data-severity="must"] .fd-check-severity { color: var(--fd-error); background: var(--fd-error-soft); }
 .fd-check[data-severity="should"] .fd-check-severity { color: var(--fd-warning); background: var(--fd-warning-soft); }
+.fd-check[data-severity="start"] .fd-check-severity { color: var(--fd-muted); background: var(--fd-page); }
 .fd-check-text { margin: 0; font-size: 13.5px; line-height: 1.45; }
 .fd-check-fix { min-height: 30px; padding-block: 2px; font-size: 13px; }
 /* Find anything: one box over all the editor can add, go to or do. */

package/src/lib/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/styles.ts"],"names":[],"mappings":";;;AAwqBA,sDAMC;AA9qBD,mDAAsD;AACtD,iDAAoD;AACpD,+DAAkE;AAClE,iDAAoD;AACpD,+CAAkD;AAClD,iDAAoD;AACpD,iDAAoD;AACpD,mDAAsD;AACtD,qDAAwD;AACxD,6CAAgD;AAChD,qDAAwD;AACxD,+CAAkD;AAElD,iFAAiF;AACpE,QAAA,YAAY,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAspBrC,CAAC;AAEF,MAAM,QAAQ,GAAG,yBAAyB,CAAC;AAE3C,SAAgB,qBAAqB,CAAC,QAAkB;IACtD,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,oBAAY,GAAG,mCAAmB,GAAG,iCAAkB,GAAG,+CAAyB,GAAG,iCAAkB,GAAG,iCAAkB,GAAG,iCAAkB,GAAG,+BAAiB,GAAG,mCAAmB,GAAG,qCAAoB,GAAG,6BAAgB,GAAG,qCAAoB,GAAG,+BAAiB,CAAC;IACtS,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/styles.ts"],"names":[],"mappings":";;;AAyqBA,sDAMC;AA/qBD,mDAAsD;AACtD,iDAAoD;AACpD,+DAAkE;AAClE,iDAAoD;AACpD,+CAAkD;AAClD,iDAAoD;AACpD,iDAAoD;AACpD,mDAAsD;AACtD,qDAAwD;AACxD,6CAAgD;AAChD,qDAAwD;AACxD,+CAAkD;AAElD,iFAAiF;AACpE,QAAA,YAAY,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAupBrC,CAAC;AAEF,MAAM,QAAQ,GAAG,yBAAyB,CAAC;AAE3C,SAAgB,qBAAqB,CAAC,QAAkB;IACtD,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,oBAAY,GAAG,mCAAmB,GAAG,iCAAkB,GAAG,+CAAyB,GAAG,iCAAkB,GAAG,iCAAkB,GAAG,iCAAkB,GAAG,+BAAiB,GAAG,mCAAmB,GAAG,qCAAoB,GAAG,6BAAgB,GAAG,qCAAoB,GAAG,+BAAiB,CAAC;IACtS,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}

package/src/lib/styles.mjs

@@ -41,6 +41,7 @@ export const DESIGNER_CSS = /* css */ `
 .fd-check-severity { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; }
 .fd-check[data-severity="must"] .fd-check-severity { color: var(--fd-error); background: var(--fd-error-soft); }
 .fd-check[data-severity="should"] .fd-check-severity { color: var(--fd-warning); background: var(--fd-warning-soft); }
+.fd-check[data-severity="start"] .fd-check-severity { color: var(--fd-muted); background: var(--fd-page); }
 .fd-check-text { margin: 0; font-size: 13.5px; line-height: 1.45; }
 .fd-check-fix { min-height: 30px; padding-block: 2px; font-size: 13px; }
 /* Find anything: one box over all the editor can add, go to or do. */

package/src/lib/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,iFAAiF;AACjF,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAspBrC,CAAC;AAEF,MAAM,QAAQ,GAAG,yBAAyB,CAAC;AAE3C,MAAM,UAAU,qBAAqB,CAAC,QAAkB;IACtD,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,YAAY,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,yBAAyB,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,oBAAoB,GAAG,gBAAgB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;IACtS,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,iFAAiF;AACjF,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAupBrC,CAAC;AAEF,MAAM,QAAQ,GAAG,yBAAyB,CAAC;AAE3C,MAAM,UAAU,qBAAqB,CAAC,QAAkB;IACtD,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,YAAY,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,yBAAyB,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,oBAAoB,GAAG,gBAAgB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;IACtS,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}

package/src/lib/toolbox.d.mts

@@ -24,6 +24,8 @@ export interface ToolboxOptions {
     words: DesignerWords;
     /** “A saved form”, for a screen: shown while the designer can place one (`update`'s `forms`). */
     forms?: boolean;
+    /** “Related list”, for a screen: shown on a record's page (`update`'s `related`). */
+    related?: boolean;
     onPick(spec: string): void;
     onPress?(spec: string, event: PointerEvent, tile: HTMLElement): void;
 }
@@ -36,6 +38,7 @@ export interface ToolboxHandle {
         kinds?: boolean;
         advanced?: boolean;
         forms?: boolean;
+        related?: boolean;
     }): void;
 }
 /** The kinds in the order and groups the toolbox shows them. */

package/src/lib/toolbox.d.ts

@@ -24,6 +24,8 @@ export interface ToolboxOptions {
     words: DesignerWords;
     /** “A saved form”, for a screen: shown while the designer can place one (`update`'s `forms`). */
     forms?: boolean;
+    /** “Related list”, for a screen: shown on a record's page (`update`'s `related`). */
+    related?: boolean;
     onPick(spec: string): void;
     onPress?(spec: string, event: PointerEvent, tile: HTMLElement): void;
 }
@@ -36,6 +38,7 @@ export interface ToolboxHandle {
         kinds?: boolean;
         advanced?: boolean;
         forms?: boolean;
+        related?: boolean;
     }): void;
 }
 /** The kinds in the order and groups the toolbox shows them. */

package/src/lib/toolbox.js

@@ -51,6 +51,7 @@ function toolbox(options) {
     let kindsOn = true;
     let advancedOn = false;
     let formsOn = false;
+    let relatedOn = false;
     const find = el('input', { type: 'search', class: 'fd-input fd-tool-find', placeholder: w.find, 'aria-label': w.find });
     const none = el('p', { class: 'fd-tool-none', hidden: '' }, w.nothing);
     const groupsBox = el('div', { class: 'fd-tool-groups' });
@@ -92,11 +93,19 @@ function toolbox(options) {
                 g.tiles.append(tile(`kind:${id}`, id, name, w.addNew(name)));
         }
         return g;
-    }).filter((g) => g.tiles.children.length > 0);
+    });
     // One of the app's saved forms, placed whole: an address, a contact person, a consent made once.
     const formTile = tile('form:saved', 'saved-form', options.words.savedForms.tile, options.words.savedForms.tileTip);
     if (options.forms)
         kindGroups.find((g) => g.key === 'More')?.tiles.append(formTile);
+    // Records of another kind that point at this one, listed inside it: among the records, on a record's page.
+    const relatedTile = tile('block:related', 'lines', options.words.relatedPart.tile, options.words.relatedPart.tileTip);
+    if (options.related)
+        kindGroups.find((g) => g.key === 'Records')?.tiles.append(relatedTile);
+    // A group with nothing in it is not drawn.
+    for (let at = kindGroups.length - 1; at >= 0; at--)
+        if (!kindGroups[at].tiles.children.length)
+            kindGroups.splice(at, 1);
     const layout = group('layout', w.layout);
     const tabsTile = tile('layout:tabs', 'tabs', w.tabs, w.tabsTip);
     layout.tiles.append(tile('layout:section', 'section', w.section, w.sectionTip), tabsTile);
@@ -120,7 +129,7 @@ function toolbox(options) {
                 const name = t.querySelector('.fd-tool-name')?.textContent?.toLowerCase() ?? '';
                 const block = blockTiles.includes(t);
                 const simpleOnly = g === layout && !block;
-                const unavailable = (g !== fromModel && !kindsOn) || (t === tabsTile && tabsTile.dataset['allowed'] !== 'true') || (block && !advancedOn) || (simpleOnly && advancedOn) || (t === formTile && !formsOn);
+                const unavailable = (g !== fromModel && !kindsOn) || (t === tabsTile && tabsTile.dataset['allowed'] !== 'true') || (block && !advancedOn) || (simpleOnly && advancedOn) || (t === formTile && !formsOn) || (t === relatedTile && !relatedOn);
                 (0, writes_1.setHidden)(t, unavailable || (!!query && !name.includes(query)));
                 if (!t.hidden)
                     shown++;
@@ -138,10 +147,11 @@ function toolbox(options) {
     });
     return {
         element,
-        update({ modelFields, tabs, kinds = true, advanced = false, forms = false }) {
+        update({ modelFields, tabs, kinds = true, advanced = false, forms = false, related = false }) {
             kindsOn = kinds;
             advancedOn = advanced;
             formsOn = forms;
+            relatedOn = related;
             const key = modelFields.map((m) => `${m.name}:${m.field.label}:${m.field.type}`).join('|');
             if (fromModel.element.dataset['key'] !== key) {
                 fromModel.element.dataset['key'] = key;

package/src/lib/toolbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbox.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/toolbox.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"toolbox.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/toolbox.ts"],"names":[],"mappings":"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"}

package/src/lib/toolbox.mjs

@@ -45,6 +45,7 @@ export function toolbox(options) {
     let kindsOn = true;
     let advancedOn = false;
     let formsOn = false;
+    let relatedOn = false;
     const find = el('input', { type: 'search', class: 'fd-input fd-tool-find', placeholder: w.find, 'aria-label': w.find });
     const none = el('p', { class: 'fd-tool-none', hidden: '' }, w.nothing);
     const groupsBox = el('div', { class: 'fd-tool-groups' });
@@ -86,11 +87,19 @@ export function toolbox(options) {
                 g.tiles.append(tile(`kind:${id}`, id, name, w.addNew(name)));
         }
         return g;
-    }).filter((g) => g.tiles.children.length > 0);
+    });
     // One of the app's saved forms, placed whole: an address, a contact person, a consent made once.
     const formTile = tile('form:saved', 'saved-form', options.words.savedForms.tile, options.words.savedForms.tileTip);
     if (options.forms)
         kindGroups.find((g) => g.key === 'More')?.tiles.append(formTile);
+    // Records of another kind that point at this one, listed inside it: among the records, on a record's page.
+    const relatedTile = tile('block:related', 'lines', options.words.relatedPart.tile, options.words.relatedPart.tileTip);
+    if (options.related)
+        kindGroups.find((g) => g.key === 'Records')?.tiles.append(relatedTile);
+    // A group with nothing in it is not drawn.
+    for (let at = kindGroups.length - 1; at >= 0; at--)
+        if (!kindGroups[at].tiles.children.length)
+            kindGroups.splice(at, 1);
     const layout = group('layout', w.layout);
     const tabsTile = tile('layout:tabs', 'tabs', w.tabs, w.tabsTip);
     layout.tiles.append(tile('layout:section', 'section', w.section, w.sectionTip), tabsTile);
@@ -114,7 +123,7 @@ export function toolbox(options) {
                 const name = t.querySelector('.fd-tool-name')?.textContent?.toLowerCase() ?? '';
                 const block = blockTiles.includes(t);
                 const simpleOnly = g === layout && !block;
-                const unavailable = (g !== fromModel && !kindsOn) || (t === tabsTile && tabsTile.dataset['allowed'] !== 'true') || (block && !advancedOn) || (simpleOnly && advancedOn) || (t === formTile && !formsOn);
+                const unavailable = (g !== fromModel && !kindsOn) || (t === tabsTile && tabsTile.dataset['allowed'] !== 'true') || (block && !advancedOn) || (simpleOnly && advancedOn) || (t === formTile && !formsOn) || (t === relatedTile && !relatedOn);
                 setHidden(t, unavailable || (!!query && !name.includes(query)));
                 if (!t.hidden)
                     shown++;
@@ -132,10 +141,11 @@ export function toolbox(options) {
     });
     return {
         element,
-        update({ modelFields, tabs, kinds = true, advanced = false, forms = false }) {
+        update({ modelFields, tabs, kinds = true, advanced = false, forms = false, related = false }) {
             kindsOn = kinds;
             advancedOn = advanced;
             formsOn = forms;
+            relatedOn = related;
             const key = modelFields.map((m) => `${m.name}:${m.field.label}:${m.field.type}`).join('|');
             if (fromModel.element.dataset['key'] !== key) {
                 fromModel.element.dataset['key'] = key;

package/src/lib/toolbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toolbox.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/toolbox.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAE1D,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAoCvD,gEAAgE;AAChE,MAAM,CAAC,MAAM,cAAc,GAA2C;IACpE,CAAC,MAAM,EAAE,CAAC,cAAc,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;IAChF,CAAC,mBAAmB,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;IACjH,CAAC,SAAS,EAAE,CAAC,UAAU,EAAE,iBAAiB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IACnI,CAAC,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IACvC,CAAC,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;IAC/F,CAAC,UAAU,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;CACpM,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAC,KAA8B;IAC1D,MAAM,MAAM,GAAyB,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;IAC7F,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,IAAI,CAAC,GAAG;YAAE,SAAS;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,SAAS,CAAC;QAClD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;QACtD,IAAI,KAAK;YAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;;YAC7B,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,6GAA6G;AAC7G,MAAM,UAAU,SAAS,CAAC,KAAoB,EAAE,GAAW;IACzD,MAAM,MAAM,GAA2B,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;IAC1D,OAAO,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAC/E,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,OAAuB;IAC7C,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC;IAC5B,MAAM,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC;IAChC,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7D,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAC;IACjC,IAAI,KAAK,GAAG,EAAE,CAAC;IACf,IAAI,OAAO,GAAG,IAAI,CAAC;IACnB,IAAI,UAAU,GAAG,KAAK,CAAC;IACvB,IAAI,OAAO,GAAG,KAAK,CAAC;IAEpB,MAAM,IAAI,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,uBAAuB,EAAE,WAAW,EAAE,CAAC,CAAC,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IACxH,MAAM,IAAI,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IACvE,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IAEvG,SAAS,IAAI,CAAC,IAAY,EAAE,IAA4B,EAAE,IAAY,EAAE,KAAa,EAAE,KAAK,GAAG,EAAE;QAC/F,MAAM,OAAO,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC1E,MAAM,MAAM,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;QAClK,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7D,oFAAoF;QACpF,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;YAC/C,IAAK,KAAsB,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,KAAK,YAAY;gBAAE,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,KAAqB,EAAE,MAAM,CAAC,CAAC;QAC5H,CAAC,CAAC,CAAC;QACH,OAAO,MAAM,CAAC;IAChB,CAAC;IASD,SAAS,KAAK,CAAC,GAAW,EAAE,KAAa;QACvC,MAAM,KAAK,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;QAC9D,MAAM,OAAO,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,EAAE,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;QAChO,MAAM,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;QAC/C,MAAM,OAAO,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;QAC7F,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACrC,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC;gBAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;;gBACnC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACrB,IAAI,EAAE,CAAC;QACT,CAAC,CAAC,CAAC;QACH,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;IACjD,CAAC;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC;IACjD,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE;QACnE,wFAAwF;QACxF,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;QACxD,KAAK,MAAM,EAAE,IAAI,GAAG,EAAE,CAAC;YACrB,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACvD,IAAI,IAAI;gBAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACzE,CAAC;QACD,OAAO,CAAC,CAAC;IACX,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC9C,iGAAiG;IACjG,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnH,IAAI,OAAO,CAAC,KAAK;QAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACpF,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IAChE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC1F,wFAAwF;IACxF,MAAM,MAAM,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAE,CAAC,KAAK,CAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAU,CAAC;IAC1J,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACrC,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACnC,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,EAAE,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;IAClF,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC;IACnC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAEtH,qDAAqD;IACrD,SAAS,IAAI;QACX,IAAI,GAAG,GAAG,KAAK,CAAC;QAChB,KAAK,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,UAAU,EAAE,MAAM,CAAC,EAAE,CAAC;YACnD,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;YACzC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,eAAe,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YACnD,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;YACjD,IAAI,KAAK,GAAG,CAAC,CAAC;YACd,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,QAAyC,EAAE,CAAC;gBAClE,MAAM,IAAI,GAAG,CAAC,CAAC,aAAa,CAAC,eAAe,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;gBAChF,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAsB,CAAC,CAAC;gBAC1D,MAAM,UAAU,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC;gBAC1C,MAAM,WAAW,GACf,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC,KAAK,QAAQ,IAAI,CAAC,OAAO,CAAC,CAAC;gBACtL,SAAS,CAAC,CAAC,EAAE,WAAW,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBAChE,IAAI,CAAC,CAAC,CAAC,MAAM;oBAAE,KAAK,EAAE,CAAC;YACzB,CAAC;YACD,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YACzB,SAAS,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC;YAClC,IAAI,KAAK;gBAAE,GAAG,GAAG,IAAI,CAAC;QACxB,CAAC;QACD,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IACvB,CAAC;IACD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QAClC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;QACxC,IAAI,EAAE,CAAC;IACT,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,OAAO;QACP,MAAM,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,GAAG,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE;YACzE,OAAO,GAAG,KAAK,CAAC;YAChB,UAAU,GAAG,QAAQ,CAAC;YACtB,OAAO,GAAG,KAAK,CAAC;YAChB,MAAM,GAAG,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC3F,IAAI,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;gBAC7C,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;gBACvC,SAAS,CAAC,KAAK,CAAC,eAAe,CAC7B,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;oBACvB,MAAM,IAAI,GAAc,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;oBACrE,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,cAAc,CAAC;oBAC1D,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC;gBACtI,CAAC,CAAC,CACH,CAAC;gBACF,SAAS,CAAC,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;gBACzD,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC;YACpD,CAAC;YACD,OAAO,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;YAC3C,IAAI,EAAE,CAAC;QACT,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"toolbox.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/toolbox.ts"],"names":[],"mappings":"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"}

package/src/lib/try-drawer.js

@@ -47,7 +47,9 @@ function tryDrawer(el, frame, viewer, words = en_1.en) {
     const tabs = { data: tab('data', w.data), problems: tab('problems', w.problems) };
     const count = el('span', { class: 'fd-try-count' });
     const toAnswer = el('span', { class: 'fd-try-to-answer' });
-    tabs.problems.append(' ', count, ' ', toAnswer);
+    // Its word kept apart: with nothing wrong but questions still to answer, the tab says only "4 to answer".
+    const problemsWord = el('span', { class: 'fd-try-word' }, w.problems);
+    tabs.problems.replaceChildren(problemsWord, ' ', count, ' ', toAnswer);
     const said = el('span', { class: 'fd-try-said', role: 'status' });
     const copy = el('button', { type: 'button', class: 'fd-button fd-button-link fd-try-copy' }, w.copyData);
     const fold = el('button', { type: 'button', class: 'fd-button fd-button-link fd-try-fold', 'aria-controls': `${id}-panels` });
@@ -98,6 +100,10 @@ function tryDrawer(el, frame, viewer, words = en_1.en) {
         count.hidden = !problems;
         toAnswer.textContent = unanswered ? (0, core_1.fill)(w.toAnswer, { n: unanswered }) : '';
         toAnswer.hidden = !unanswered;
+        problemsWord.hidden = !problems && unanswered > 0;
+        // With nothing to say — no problem, no warning, nothing to answer — the tab is not there (a blank survey, a screen
+        // with nothing required); only while it is the one open does it stay, to say nothing stands in the way now.
+        tabs.problems.hidden = rows.length === 0 && !open('problems');
         none.hidden = rows.length > 0;
         list.replaceChildren(...rows.filter(() => open('problems')).map((row) => {
             const button = el('button', { type: 'button', class: 'fd-try-problem', 'data-field': row.name, 'data-warning': row.warning ? '' : undefined, 'data-unanswered': row.unanswered ? '' : undefined }, el('strong', {}, labelOf(row.name)), el('span', {}, row.message));