@fieldia/designer 0.29.0 → 0.30.1

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[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; flex-wrap: wrap; gap: 8px; align-items: center; }\n/* The option's words take the row's room, ten letters at least: Show when\u2026 goes under them where the row is narrow. */\n.fd-q-option > .fd-input { flex: 1 1 10em; min-width: 0; }\n.fd-q-option > .fd-q-option-when { margin-inline-start: auto; }\n/* An option's own condition: a quiet link in its row, the rules under it across the row's width. */\n.fd-q-option .fd-q-option-when { border: 0; background-color: transparent; box-shadow: none; padding: 2px 0; min-height: 0; font-weight: 400; font-size: 12.5px; white-space: nowrap; }\n.fd-q-option-when-box { flex: 0 0 100%; padding-inline-start: 46px; box-sizing: border-box; display: grid; gap: 4px; }\n.fd-q-option-when-lead { font-size: 12px; color: var(--fd-muted); }\n.fd-q-option-when[hidden], .fd-q-option-when-box[hidden] { display: none; }\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/* In a narrow column (a phone's grid of three) its box goes under its words, never over the field beside it. */\n.fd-inline-setting { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: 6px; }\n.fd-inline-setting > :is(.fd-inline-select, .fd-inline-input) { max-width: 100%; min-width: 0; }\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/* A choice column's choices, under its row, set in from it. */\n.fd-column-choices { grid-column: 1 / -1; display: grid; gap: 6px; padding-inline-start: 10px; margin-block-end: 4px; border-inline-start: 2px solid var(--fd-border); }\n.fd-column-written { display: grid; gap: 6px; justify-items: start; }\n.fd-column-choices[hidden], .fd-column-written[hidden] { display: none; }\n/* An option of a choice column shown by a condition on the line: Show when\u2026 under its words, its rules under that. */\n.fd-column-written li > .fd-q-option-when { grid-column: 1 / -1; justify-self: start; border: 0; background-color: transparent; box-shadow: none; padding: 0; min-height: 0; font-weight: 400; font-size: 12.5px; }\n.fd-column-written li > .fd-q-option-when-box { grid-column: 1 / -1; padding-inline-start: 0; }\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: calc(12px + env(safe-area-inset-bottom, 0px)); 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; line-height: 1.3; }\n/* A title's box that wraps its words where its room ends (growing-box.ts): one row, as tall as its words. */\n.fd-growing { display: block; box-sizing: border-box; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; }\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/* No wider than the room they have: a choice's long words shrink its box, on a phone too. */\n.fd-when-rules { display: grid; gap: 6px; max-width: 100%; min-width: 0; }\n.fd-when-rule, .fd-when-match-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; max-width: 100%; min-width: 0; }\n.fd-when .fd-select { width: auto; min-width: 140px; max-width: 100%; }\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; flex-wrap: wrap; gap: 8px; align-items: center; }\n/* The option's words take the row's room, ten letters at least: Show when\u2026 goes under them where the row is narrow. */\n.fd-q-option > .fd-input { flex: 1 1 10em; min-width: 0; }\n.fd-q-option > .fd-q-option-when { margin-inline-start: auto; }\n/* An option's own condition: a quiet link in its row, the rules under it across the row's width. */\n.fd-q-option .fd-q-option-when { border: 0; background-color: transparent; box-shadow: none; padding: 2px 0; min-height: 0; font-weight: 400; font-size: 12.5px; white-space: nowrap; }\n.fd-q-option-when-box { flex: 0 0 100%; padding-inline-start: 46px; box-sizing: border-box; display: grid; gap: 4px; }\n.fd-q-option-when-lead { font-size: 12px; color: var(--fd-muted); }\n.fd-q-option-when[hidden], .fd-q-option-when-box[hidden] { display: none; }\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-bar-rest > :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/* A phone's bar: one row \u2014 the title, Publish, More \u2014 which is all of it that stays on screen as the page scrolls; the\n   rest under More, dropped below the row while it is open, in the order the keys go through it (chrome.ts). Wider,\n   the box holding the rest is no box at all: its parts sit in the bar's rows. */\n.fd-bar-rest { display: contents; }\n.fd-bar-more { display: none; }\n/* The bar itself by the editor's width; its parts, below, by the bar's own. Its boxes 10px in from its edge, as wider:\n   never a box drawn in a box. */\n@container (max-width: 620px) {\n  .fd-designer-bar { padding: 10px; gap: 8px; flex-wrap: nowrap; }\n}\n@container (max-width: 620px) {\n  .fd-designer-bar > .fd-designer-title { flex: 1 1 0; max-width: none; font-size: 15px; padding-inline: 8px; }\n  .fd-designer-bar > .fd-button-primary { flex: none; padding-inline: 12px; }\n  .fd-bar-more { display: inline-grid; place-items: center; flex: none; width: 36px; padding-inline: 0; }\n  .fd-bar-more > .fd-dicon { width: 20px; height: 20px; }\n  .fd-designer-bar > .fd-bar-rest { display: none; }\n  .fd-designer-bar.fd-bar-unfolded > .fd-bar-rest {\n    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; position: absolute; z-index: 1; inset-inline: -1px; top: calc(100% + 6px);\n    max-height: calc(100vh - 100% - 24px); overflow: auto; box-sizing: border-box; padding: 12px;\n    background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: 0 18px 44px rgba(15, 20, 25, 0.18);\n    animation: fd-menu-in 120ms cubic-bezier(0, 0, 0.2, 1); transform-origin: top center;\n  }\n  .fd-bar-rest > * { order: 0; }\n  .fd-bar-rest > :is(.fd-spacer, .fd-bar-break) { display: none; }\n  .fd-bar-rest > :is(.fd-designer-status-box, .fd-mode) { flex: 1 1 100%; }\n  .fd-bar-rest > .fd-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); box-sizing: border-box; }\n  .fd-bar-rest > .fd-mode-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .fd-bar-rest .fd-mode-button { justify-content: center; min-width: 0; min-height: 32px; }\n}\n@media (prefers-reduced-motion: reduce) { .fd-designer-bar.fd-bar-unfolded > .fd-bar-rest { animation: none; } }\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/* Typed in, the title takes the rest of its line after the fold's mark, and wraps there. */\n.fd-section-title:has(> .fd-canvas-section-title-input:not([hidden])) { display: flex; align-items: baseline; gap: 4px; }\n.fd-section-title > .fd-canvas-section-title-input.fd-growing { flex: 1 1 auto; min-width: min(12em, 100%); }\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.fd-growing { display: inline-block; flex: 0 1 auto; }\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/* In a narrow column (a phone's grid of three) its box goes under its words, never over the field beside it. */\n.fd-inline-setting { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: 6px; }\n.fd-inline-setting > :is(.fd-inline-select, .fd-inline-input) { max-width: 100%; min-width: 0; }\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/* A divider of the gear menu: a short upright line between its neighbours; an item that opens a menu of its own, its words then \u203A. */\n.fd-canvas-menu-divider { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; align-self: stretch; padding: 2px 5px; border-radius: 4px; }\n.fd-canvas-menu-rule { display: block; width: 1px; height: 18px; background: var(--fd-border-strong); }\n.fd-canvas-menu-divider:focus-visible { outline: 2px solid var(--fd-focus, var(--fd-accent)); outline-offset: 1px; }\n.fd-canvas-menu-more { margin-inline-start: 4px; color: var(--fd-muted); }\n.fd-canvas-menu-more:dir(rtl) { display: inline-block; transform: scaleX(-1); }\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/* A choice column's choices, under its row, set in from it. */\n.fd-column-choices { grid-column: 1 / -1; display: grid; gap: 6px; padding-inline-start: 10px; margin-block-end: 4px; border-inline-start: 2px solid var(--fd-border); }\n.fd-column-written { display: grid; gap: 6px; justify-items: start; }\n.fd-column-choices[hidden], .fd-column-written[hidden] { display: none; }\n/* An option of a choice column shown by a condition on the line: Show when\u2026 under its words, its rules under that. */\n.fd-column-written li > .fd-q-option-when { grid-column: 1 / -1; justify-self: start; border: 0; background-color: transparent; box-shadow: none; padding: 0; min-height: 0; font-weight: 400; font-size: 12.5px; }\n.fd-column-written li > .fd-q-option-when-box { grid-column: 1 / -1; padding-inline-start: 0; }\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 > :is(input, textarea) { font: inherit; color: inherit; background: none; border: 0; outline: none; width: 100%; box-sizing: border-box; padding: 6px 0; margin: 0; }\n.fd-line > :is(input, textarea)::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 > :is(input, textarea):focus, .fd-designer .fd-line > :is(input, textarea):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/* A page's title takes the row; where the row has no room for it and its buttons, they go under it, the title whole. */\n.fd-step-head-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.fd-step-title-box { flex: 1 1 14rem; min-width: 0; }\n.fd-step-tools { flex: none; display: inline-flex; align-items: center; gap: 8px; }\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/* Where the toolbox cannot sit beside the page \u2014 a phone, a tablet held upright \u2014 it waits behind a + so the page starts\n   near the top: the survey's in the bar beside the card picked (at the foot of a phone's screen), in place of the + that\n   adds a question there; the screen's in a bar at the foot of the screen. Pressed, it comes up in a sheet. */\n.fd-rail-button.fd-rail-tools, .fd-foot-bar { display: none; }\n@container (max-width: 900px) {\n  .fd-survey-body > .fd-rail, .fd-q-rail > .fd-rail-question { display: none; }\n  .fd-q-rail > .fd-rail-tools { display: grid; }\n}\n@container (max-width: 1000px) {\n  .fd-screen-body > .fd-rail { display: none; }\n  .fd-screen-body > .fd-foot-bar {\n    position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 4; justify-self: center; display: flex; 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  }\n  .fd-foot-bar > .fd-rail-tools { display: grid; }\n}\n/* The sheet: up from the foot of the screen, over the page dimmed under it; the editor's side in it, its tabs beside its \u00D7. */\n.fd-tools-backdrop { z-index: 55; padding: 48px 0 0; place-items: end stretch; }\n.fd-tools-sheet {\n  position: relative; box-sizing: border-box; width: 100%; max-height: min(78vh, 720px); overflow: auto; overscroll-behavior: contain;\n  background: var(--fd-surface); color: var(--fd-text); border-radius: 14px 14px 0 0; box-shadow: 0 -12px 40px rgba(15, 20, 25, 0.22);\n  padding: 10px 6px calc(12px + env(safe-area-inset-bottom, 0px)); animation: fd-sheet-up 180ms cubic-bezier(0, 0, 0.2, 1);\n}\n@keyframes fd-sheet-up { from { opacity: 0; transform: translateY(24px); } }\n.fd-tools-sheet-close { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 1; width: 36px; height: 36px; font-size: 22px; }\n.fd-tools-sheet > .fd-rail { position: static; max-height: none; overflow: visible; border: 0; border-radius: 0; padding: 0; background: none; }\n.fd-tools-sheet .fd-rail-tabs { margin-inline-end: 48px; }\n.fd-tools-sheet .fd-tools { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }\n@media (prefers-reduced-motion: reduce) { .fd-tools-sheet { animation: none; } }\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: calc(12px + env(safe-area-inset-bottom, 0px)); 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

@@ -22,7 +22,9 @@ exports.DESIGNER_CSS = `
   display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
   background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 10px 14px;
 }
-.fd-designer-title { font-size: 17px; font-weight: 600; flex: 1 1 220px; max-width: 420px; min-width: 0; }
+.fd-designer-title { font-size: 17px; font-weight: 600; flex: 1 1 220px; max-width: 420px; min-width: 0; line-height: 1.3; }
+/* A title's box that wraps its words where its room ends (growing-box.ts): one row, as tall as its words. */
+.fd-growing { display: block; box-sizing: border-box; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; }
 /* Where the page stands; pressed, the versions published. */
 .fd-designer-status-box { display: inline-flex; }
 .fd-designer-status { all: unset; box-sizing: border-box; cursor: pointer; color: var(--fd-muted); font-size: 13px; padding: 4px 8px; border-radius: 6px; }
@@ -99,9 +101,10 @@ exports.DESIGNER_CSS = `
 .fd-step-when { color: var(--fd-muted); font-size: 13px; }
 .fd-when { display: grid; gap: 6px; justify-items: start; color: var(--fd-muted); font-size: 13px; }
 .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; }
-.fd-when-rules { display: grid; gap: 6px; }
-.fd-when-rule, .fd-when-match-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
-.fd-when .fd-select { width: auto; min-width: 140px; }
+/* No wider than the room they have: a choice's long words shrink its box, on a phone too. */
+.fd-when-rules { display: grid; gap: 6px; max-width: 100%; min-width: 0; }
+.fd-when-rule, .fd-when-match-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; max-width: 100%; min-width: 0; }
+.fd-when .fd-select { width: auto; min-width: 140px; max-width: 100%; }
 .fd-when-custom code { font-size: 12.5px; color: var(--fd-text); }
 .fd-q-when { padding-inline: 4px; }
 .fd-step-cards { display: grid; gap: 10px; position: relative; }
@@ -193,7 +196,7 @@ exports.DESIGNER_CSS = `
 .fd-bar-break { display: none; }
 @container (min-width: 521px) {
   .fd-bar-break { display: block; flex-basis: 100%; height: 0; order: 1; }
-  .fd-designer-bar > :is(.fd-mode, .fd-look-button) { order: 2; }
+  .fd-bar-rest > :is(.fd-mode, .fd-look-button) { order: 2; }
 }
 /* On a narrow bar the ways to look at the page share one row: their words alone, each on one line. */
 @container (max-width: 520px) {
@@ -201,6 +204,36 @@ exports.DESIGNER_CSS = `
   .fd-mode-button { flex: 1 1 auto; justify-content: center; padding-inline: 6px; white-space: nowrap; }
   .fd-mode-button > .fd-dicon { display: none; }
 }
+/* A phone's bar: one row — the title, Publish, More — which is all of it that stays on screen as the page scrolls; the
+   rest under More, dropped below the row while it is open, in the order the keys go through it (chrome.ts). Wider,
+   the box holding the rest is no box at all: its parts sit in the bar's rows. */
+.fd-bar-rest { display: contents; }
+.fd-bar-more { display: none; }
+/* The bar itself by the editor's width; its parts, below, by the bar's own. Its boxes 10px in from its edge, as wider:
+   never a box drawn in a box. */
+@container (max-width: 620px) {
+  .fd-designer-bar { padding: 10px; gap: 8px; flex-wrap: nowrap; }
+}
+@container (max-width: 620px) {
+  .fd-designer-bar > .fd-designer-title { flex: 1 1 0; max-width: none; font-size: 15px; padding-inline: 8px; }
+  .fd-designer-bar > .fd-button-primary { flex: none; padding-inline: 12px; }
+  .fd-bar-more { display: inline-grid; place-items: center; flex: none; width: 36px; padding-inline: 0; }
+  .fd-bar-more > .fd-dicon { width: 20px; height: 20px; }
+  .fd-designer-bar > .fd-bar-rest { display: none; }
+  .fd-designer-bar.fd-bar-unfolded > .fd-bar-rest {
+    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; position: absolute; z-index: 1; inset-inline: -1px; top: calc(100% + 6px);
+    max-height: calc(100vh - 100% - 24px); overflow: auto; box-sizing: border-box; padding: 12px;
+    background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: 0 18px 44px rgba(15, 20, 25, 0.18);
+    animation: fd-menu-in 120ms cubic-bezier(0, 0, 0.2, 1); transform-origin: top center;
+  }
+  .fd-bar-rest > * { order: 0; }
+  .fd-bar-rest > :is(.fd-spacer, .fd-bar-break) { display: none; }
+  .fd-bar-rest > :is(.fd-designer-status-box, .fd-mode) { flex: 1 1 100%; }
+  .fd-bar-rest > .fd-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); box-sizing: border-box; }
+  .fd-bar-rest > .fd-mode-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .fd-bar-rest .fd-mode-button { justify-content: center; min-width: 0; min-height: 32px; }
+}
+@media (prefers-reduced-motion: reduce) { .fd-designer-bar.fd-bar-unfolded > .fd-bar-rest { animation: none; } }
 .fd-try { display: grid; gap: 14px; }
 .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; }
 .fd-try-group { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--fd-page); border: 1px solid var(--fd-border); }
@@ -319,6 +352,9 @@ exports.DESIGNER_CSS = `
 .fd-canvas-section-title:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
 .fd-canvas-untitled { color: var(--fd-muted); font-weight: 500; font-style: italic; font-size: 13px; }
 .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; }
+/* Typed in, the title takes the rest of its line after the fold's mark, and wraps there. */
+.fd-section-title:has(> .fd-canvas-section-title-input:not([hidden])) { display: flex; align-items: baseline; gap: 4px; }
+.fd-section-title > .fd-canvas-section-title-input.fd-growing { flex: 1 1 auto; min-width: min(12em, 100%); }
 .fd-canvas-section-title-input:focus { border-bottom: 1px solid var(--fd-accent); }
 .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; }
 /* A field's ring sits in the gap around it: picking or hovering one moves nothing. */
@@ -338,6 +374,7 @@ exports.DESIGNER_CSS = `
   font: inherit; font-weight: var(--fd-label-weight); color: var(--fd-text); border: 0; border-bottom: 1px dashed var(--fd-border-strong);
   background: none; padding: 0 0 1px; outline: none; max-width: 100%; min-width: 4ch; field-sizing: content; cursor: text;
 }
+.fd-canvas-label-input.fd-growing { display: inline-block; flex: 0 1 auto; }
 .fd-canvas-label-input:focus { border-bottom: 2px solid var(--fd-accent); padding-bottom: 0; }
 /* Typed in where they stand, the line under the words is the focus: no ring round them too. */
 .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; }
@@ -398,6 +435,12 @@ exports.DESIGNER_CSS = `
 .fd-canvas-menu-items { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
 .fd-canvas-menu-item { font: inherit; font-size: 12.5px; }
 .fd-canvas-menu-print { border-style: dashed; }
+/* A divider of the gear menu: a short upright line between its neighbours; an item that opens a menu of its own, its words then ›. */
+.fd-canvas-menu-divider { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; align-self: stretch; padding: 2px 5px; border-radius: 4px; }
+.fd-canvas-menu-rule { display: block; width: 1px; height: 18px; background: var(--fd-border-strong); }
+.fd-canvas-menu-divider:focus-visible { outline: 2px solid var(--fd-focus, var(--fd-accent)); outline-offset: 1px; }
+.fd-canvas-menu-more { margin-inline-start: 4px; color: var(--fd-muted); }
+.fd-canvas-menu-more:dir(rtl) { display: inline-block; transform: scaleX(-1); }
 .fd-canvas-header-card { display: grid; gap: 10px; justify-items: stretch; }
 /* Not at the card's edge here, as the viewer's are: no reaching out to it. */
 .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; }
@@ -513,10 +556,10 @@ exports.DESIGNER_CSS = `
 .fd-survey-column { position: relative; width: 100%; max-width: 770px; margin-inline: auto; display: grid; gap: 12px; }
 .fd-survey-column > .fd-button { justify-self: start; }
 .fd-line { position: relative; display: block; border-block-end: 1px solid transparent; }
-.fd-line > input { font: inherit; color: inherit; background: none; border: 0; outline: none; width: 100%; box-sizing: border-box; padding: 6px 0; margin: 0; }
-.fd-line > input::placeholder { color: var(--fd-muted); }
+.fd-line > :is(input, textarea) { font: inherit; color: inherit; background: none; border: 0; outline: none; width: 100%; box-sizing: border-box; padding: 6px 0; margin: 0; }
+.fd-line > :is(input, textarea)::placeholder { color: var(--fd-muted); }
 /* The growing line is the focus here, as in Google Forms: no ring around it too. */
-.fd-designer .fd-line > input:focus, .fd-designer .fd-line > input:focus-visible { outline: none; box-shadow: none; }
+.fd-designer .fd-line > :is(input, textarea):focus, .fd-designer .fd-line > :is(input, textarea):focus-visible { outline: none; box-shadow: none; }
 .fd-line:hover { border-block-end-color: var(--fd-border); }
 .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); }
 .fd-line:focus-within::after { transform: scaleX(1); }
@@ -532,8 +575,10 @@ exports.DESIGNER_CSS = `
   background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 0 8px 8px 8px;
 }
 .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; }
-.fd-step-head-row { display: flex; gap: 8px; align-items: center; }
-.fd-step-title-box { flex: 1; min-width: 0; }
+/* A page's title takes the row; where the row has no room for it and its buttons, they go under it, the title whole. */
+.fd-step-head-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.fd-step-title-box { flex: 1 1 14rem; min-width: 0; }
+.fd-step-tools { flex: none; display: inline-flex; align-items: center; gap: 8px; }
 .fd-survey-canvas .fd-step-title { font-size: 22px; font-weight: 400; }
 .fd-survey-canvas .fd-step-selected { border: 0; }
 .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); }
@@ -636,6 +681,36 @@ exports.DESIGNER_CSS = `
 .fd-rail-button:hover { background: color-mix(in srgb, var(--fd-text) 7%, transparent); color: var(--fd-text); }
 .fd-rail-button:focus-visible { outline: 2px solid var(--fd-focus); }
 .fd-rail-button > .fd-dicon { width: 22px; height: 22px; }
+/* Where the toolbox cannot sit beside the page — a phone, a tablet held upright — it waits behind a + so the page starts
+   near the top: the survey's in the bar beside the card picked (at the foot of a phone's screen), in place of the + that
+   adds a question there; the screen's in a bar at the foot of the screen. Pressed, it comes up in a sheet. */
+.fd-rail-button.fd-rail-tools, .fd-foot-bar { display: none; }
+@container (max-width: 900px) {
+  .fd-survey-body > .fd-rail, .fd-q-rail > .fd-rail-question { display: none; }
+  .fd-q-rail > .fd-rail-tools { display: grid; }
+}
+@container (max-width: 1000px) {
+  .fd-screen-body > .fd-rail { display: none; }
+  .fd-screen-body > .fd-foot-bar {
+    position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 4; justify-self: center; display: flex; gap: 2px; padding: 4px;
+    background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px;
+    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);
+  }
+  .fd-foot-bar > .fd-rail-tools { display: grid; }
+}
+/* The sheet: up from the foot of the screen, over the page dimmed under it; the editor's side in it, its tabs beside its ×. */
+.fd-tools-backdrop { z-index: 55; padding: 48px 0 0; place-items: end stretch; }
+.fd-tools-sheet {
+  position: relative; box-sizing: border-box; width: 100%; max-height: min(78vh, 720px); overflow: auto; overscroll-behavior: contain;
+  background: var(--fd-surface); color: var(--fd-text); border-radius: 14px 14px 0 0; box-shadow: 0 -12px 40px rgba(15, 20, 25, 0.22);
+  padding: 10px 6px calc(12px + env(safe-area-inset-bottom, 0px)); animation: fd-sheet-up 180ms cubic-bezier(0, 0, 0.2, 1);
+}
+@keyframes fd-sheet-up { from { opacity: 0; transform: translateY(24px); } }
+.fd-tools-sheet-close { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 1; width: 36px; height: 36px; font-size: 22px; }
+.fd-tools-sheet > .fd-rail { position: static; max-height: none; overflow: visible; border: 0; border-radius: 0; padding: 0; background: none; }
+.fd-tools-sheet .fd-rail-tabs { margin-inline-end: 48px; }
+.fd-tools-sheet .fd-tools { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
+@media (prefers-reduced-motion: reduce) { .fd-tools-sheet { animation: none; } }
 @container (max-width: 620px) {
   .fd-survey-canvas { padding-inline: 10px; }
   /* A question's words the width of its card, its kind under them. */

package/src/lib/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/styles.ts"],"names":[],"mappings":";;;AA2rBA,sDAMC;AAjsBD,mDAAsD;AACtD,iDAAoD;AACpD,+DAAkE;AAClE,iDAAoD;AACpD,+CAAkD;AAClD,iDAAoD;AACpD,iDAAoD;AACpD,mDAAsD;AACtD,qDAAwD;AACxD,6CAAgD;AAChD,qDAAwD;AACxD,+CAAkD;AAClD,qDAAwD;AAExD,iFAAiF;AACpE,QAAA,YAAY,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwqBrC,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,GAAG,qCAAoB,CAAC;IAC7T,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":";;;AAswBA,sDAMC;AA5wBD,mDAAsD;AACtD,iDAAoD;AACpD,+DAAkE;AAClE,iDAAoD;AACpD,+CAAkD;AAClD,iDAAoD;AACpD,iDAAoD;AACpD,mDAAsD;AACtD,qDAAwD;AACxD,6CAAgD;AAChD,qDAAwD;AACxD,+CAAkD;AAClD,qDAAwD;AAExD,iFAAiF;AACpE,QAAA,YAAY,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmvBrC,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,GAAG,qCAAoB,CAAC;IAC7T,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}