@fieldia/widgets 0.6.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +2 -2
  2. package/src/lib/styles.d.mts +1 -1
  3. package/src/lib/styles.d.ts +1 -1
  4. package/src/lib/styles.js +31 -1
  5. package/src/lib/styles.js.map +1 -1
  6. package/src/lib/styles.mjs +31 -1
  7. package/src/lib/styles.mjs.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fieldia/widgets",
3
- "version": "0.6.0",
3
+ "version": "0.8.0",
4
4
  "description": "Fieldia field inputs in plain DOM, with the underline and outlined skins.",
5
5
  "license": "MIT",
6
6
  "homepage": "https://fieldia.dev",
@@ -21,7 +21,7 @@
21
21
  "./package.json": "./package.json"
22
22
  },
23
23
  "dependencies": {
24
- "@fieldia/core": "0.6.0",
24
+ "@fieldia/core": "0.8.0",
25
25
  "tslib": "^2.8.1"
26
26
  },
27
27
  "sideEffects": false,
package/src/lib/styles.d.mts CHANGED
@@ -11,6 +11,6 @@
11
11
  * Written with logical properties (inline/block, start/end), so a right-to-left
12
12
  * form mirrors without a second stylesheet.
13
13
  */
14
- export declare const FIELDIA_CSS = "\n/* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. */\n.fd-form, .fd-theme {\n --fd-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Noto Sans Arabic\", sans-serif;\n --fd-text: #212529;\n --fd-muted: #6b7280;\n --fd-page: #f2f3f5;\n --fd-surface: #ffffff;\n --fd-border: #cfd4da;\n --fd-border-strong: #9aa3ad;\n --fd-accent: #002855;\n --fd-accent-text: #ffffff;\n --fd-accent-soft: #e6ebf2;\n --fd-focus: #002855;\n --fd-focus-ring: none;\n --fd-error: #c62828;\n --fd-error-soft: #fdecea;\n --fd-success: #2e7d32;\n --fd-success-soft: #e8f5e9;\n --fd-warning: #8a5300;\n --fd-warning-soft: #fff4e0;\n --fd-info: #0b5cad;\n --fd-info-soft: #e7f0fb;\n --fd-radius: 0px;\n --fd-control-radius: 0px;\n --fd-pad-y: 3px;\n --fd-pad-x: 4px;\n --fd-input-border: 0 0 1px 0;\n --fd-label-weight: 600;\n --fd-gap-x: 32px;\n --fd-gap-y: 14px;\n container-type: inline-size;\n font-family: var(--fd-font);\n font-size: 14px;\n line-height: 1.45;\n color: var(--fd-text);\n -webkit-text-size-adjust: 100%;\n}\n.fd-form[data-fd-skin=\"outlined\"], .fd-theme[data-fd-skin=\"outlined\"] {\n --fd-text: rgba(0, 0, 0, 0.88);\n --fd-muted: rgba(0, 0, 0, 0.55);\n --fd-page: #f5f5f5;\n --fd-border: #d9d9d9;\n --fd-border-strong: #bfbfbf;\n --fd-accent: #1677ff;\n --fd-accent-soft: #e6f4ff;\n --fd-focus: #1677ff;\n --fd-focus-ring: 0 0 0 2px rgba(5, 145, 255, 0.12);\n --fd-error: #ff4d4f;\n --fd-error-soft: #fff2f0;\n --fd-radius: 8px;\n --fd-control-radius: 6px;\n --fd-pad-y: 4px;\n --fd-pad-x: 11px;\n --fd-input-border: 1px;\n --fd-label-weight: 400;\n --fd-gap-x: 24px;\n --fd-gap-y: 18px;\n}\n.fd-form *, .fd-form *::before, .fd-form *::after { box-sizing: border-box; }\n.fd-form [hidden] { display: none !important; }\n\n/* ---- page frame ---------------------------------------------------------- */\n.fd-page-head { display: grid; gap: 4px; margin-block-end: 20px; }\n.fd-page-title { font-size: 22px; font-weight: 650; margin: 0; line-height: 1.25; }\n.fd-page-description { color: var(--fd-muted); margin: 0; }\n\n/* ---- how wide a page goes, and Save above its sections ----------------------- */\n.fd-form[data-max-width=\"narrow\"] { --fd-page-max: 640px; }\n.fd-form[data-max-width=\"medium\"] { --fd-page-max: 900px; }\n.fd-form[data-max-width=\"wide\"] { --fd-page-max: 1180px; }\n.fd-form[data-max-width=\"full\"] { --fd-page-max: none; }\n.fd-form[data-max-width] > .fd-content:not(:has(> .fd-sheet-page)) { max-width: var(--fd-page-max); margin-inline: auto; }\n.fd-actions.fd-actions-top { margin-block-start: 0; padding-block-end: 14px; margin-block-end: 18px; border-block-end: 1px solid var(--fd-border); }\n\n/* ---- icons: drawn with lines in the colour of the words beside them ------------ */\n.fd-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }\n.fd-section-title .fd-icon, .fd-tab .fd-icon, .fd-button .fd-icon, .fd-step-title .fd-icon { margin-inline-end: 0.4em; }\n.fd-section-title .fd-icon { color: var(--fd-muted); }\n\n/* ---- fields ---------------------------------------------------------------- */\n.fd-grid {\n display: grid;\n grid-template-columns: repeat(var(--fd-columns, 1), minmax(0, 1fr));\n gap: var(--fd-gap-y) var(--fd-gap-x);\n align-items: start;\n}\n.fd-field { display: grid; gap: 4px; min-width: 0; grid-column: span min(var(--fd-span, 1), var(--fd-columns, 1)); }\n.fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }\n.fd-field.fd-required > .fd-label::after { content: \" *\"; color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::after { content: \"\"; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::before { content: \"* \"; color: var(--fd-error); }\n.fd-help { color: var(--fd-muted); font-size: 12.5px; }\n.fd-error { color: var(--fd-error); font-size: 12.5px; }\n.fd-warning {\n color: var(--fd-warning); background: var(--fd-warning-soft); font-size: 12.5px;\n padding: 3px 8px; border-radius: var(--fd-control-radius); justify-self: start;\n}\n\n/* underline: label beside the value, the way a Flectra sheet reads */\n.fd-form[data-fd-skin=\"underline\"] .fd-field {\n /* One label width for every field, so a field spanning two columns lines up with its neighbours. */\n grid-template-columns: var(--fd-label-width, 11em) minmax(0, 1fr);\n column-gap: 12px;\n align-items: baseline;\n}\n.fd-form[data-fd-skin=\"underline\"] .fd-field > .fd-label { grid-column: 1; }\n/* A table of lines needs the full width: its label sits above it. */\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] > * { grid-column: 1 !important; }\n.fd-form[data-fd-skin=\"underline\"] .fd-field > :not(.fd-label) { grid-column: 2; }\n/* A label beside every value needs room twice over: the underline skin stacks its columns sooner. */\n@container (max-width: 760px) {\n .fd-form[data-fd-skin=\"underline\"] .fd-grid { grid-template-columns: minmax(0, 1fr); }\n .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-column: auto; }\n /* A section that says how many columns it keeps here keeps them, in either skin. */\n .fd-form .fd-grid[data-columns-medium] { grid-template-columns: repeat(var(--fd-columns-medium), minmax(0, 1fr)); }\n .fd-form .fd-grid[data-columns-medium] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-medium)); }\n /* Kept side by side here, the underline skin's fields have no room for a label beside: it goes above. */\n .fd-form[data-fd-skin=\"underline\"] .fd-grid[data-columns-medium]:not([data-columns-medium=\"1\"]) .fd-field { grid-template-columns: minmax(0, 1fr); }\n .fd-form[data-fd-skin=\"underline\"] .fd-grid[data-columns-medium]:not([data-columns-medium=\"1\"]) .fd-field > * { grid-column: 1 !important; }\n}\n@container (max-width: 520px) {\n .fd-grid { grid-template-columns: minmax(0, 1fr); }\n .fd-field { grid-column: auto; }\n .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-template-columns: minmax(0, 1fr); }\n .fd-form[data-fd-skin=\"underline\"] .fd-field > * { grid-column: 1 !important; }\n /* The narrow count, or one column when only the medium one was given. */\n .fd-form .fd-grid[data-columns-medium], .fd-form .fd-grid[data-columns-narrow] { grid-template-columns: repeat(var(--fd-columns-narrow, 1), minmax(0, 1fr)); }\n .fd-form .fd-grid[data-columns-medium] > .fd-field, .fd-form .fd-grid[data-columns-narrow] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-narrow, 1)); }\n}\n\n/* ---- inputs ---------------------------------------------------------------- */\n.fd-input {\n width: 100%;\n min-width: 0;\n font: inherit;\n color: inherit;\n background: var(--fd-surface);\n border: solid var(--fd-border);\n border-width: var(--fd-input-border);\n border-radius: var(--fd-control-radius);\n padding: var(--fd-pad-y) var(--fd-pad-x);\n min-height: 30px;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-input::placeholder { color: var(--fd-muted); opacity: 0.8; }\n.fd-input:hover { border-color: var(--fd-border-strong); }\n.fd-input:focus { outline: none; border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }\n.fd-form[data-fd-skin=\"underline\"] .fd-input { background: transparent; }\n.fd-form[data-fd-skin=\"underline\"] .fd-input:focus { box-shadow: 0 1px 0 0 var(--fd-focus); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field.fd-required .fd-input { border-color: var(--fd-accent); }\n.fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[readonly] { background: rgba(0, 0, 0, 0.04); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }\n.fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[aria-invalid=\"true\"]:focus { box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06); }\n.fd-textarea { resize: vertical; min-height: 64px; }\n.fd-select { appearance: auto; }\n.fd-number { display: flex; align-items: baseline; gap: 6px; }\n.fd-number-input { font-variant-numeric: tabular-nums; }\n.fd-currency { color: var(--fd-muted); font-size: 12.5px; font-weight: 600; }\n/* With the currency after it, the amount ends right beside it. */\n.fd-currency-after > .fd-number-input { text-align: end; }\n/* A picked currency is a small box of its own beside the amount. */\n.fd-currency-picked { align-items: center; }\n.fd-currency-picked > :not(.fd-number-input) { flex: 0 0 104px; min-width: 0; }\n.fd-currency-picked > .fd-number-input { flex: 1 1 auto; min-width: 0; }\n.fd-pending { color: var(--fd-muted); font-style: italic; }\n.fd-pending:empty::before { content: \"\u2014\"; }\n\n.fd-checkbox, .fd-choice input { width: 16px; height: 16px; accent-color: var(--fd-accent); margin: 0; }\n.fd-switch {\n appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; position: relative;\n background: var(--fd-border-strong); cursor: pointer; transition: background 0.2s ease;\n}\n.fd-switch::after {\n content: \"\"; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 16px; height: 16px;\n border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25);\n}\n.fd-switch:checked { background: var(--fd-accent); }\n.fd-switch:checked::after { transform: translateX(14px); }\n[dir=\"rtl\"] .fd-switch:checked::after { transform: translateX(-14px); }\n.fd-choices { display: flex; flex-wrap: wrap; gap: 6px 18px; }\n.fd-choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }\n.fd-points { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-points button {\n font: inherit; cursor: pointer; border: 1px solid var(--fd-border); background: var(--fd-surface);\n color: var(--fd-text); border-radius: var(--fd-control-radius); min-width: 34px; height: 34px; padding: 0 8px;\n}\n.fd-points button.fd-on { background: var(--fd-accent); color: var(--fd-accent-text); border-color: var(--fd-accent); }\n.fd-rating button { border: none; background: none; font-size: 24px; color: var(--fd-border-strong); padding: 0 2px; min-width: 0; }\n.fd-rating button.fd-on { background: none; color: #f5a623; }\n.fd-points button:disabled, .fd-choice input:disabled { cursor: default; }\n.fd-form :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-form .fd-input:focus-visible { outline: none; }\n\n/* ---- pickers: many2one, many2many, reference ------------------------------ */\n.fd-combo { position: relative; display: flex; align-items: center; min-width: 0; }\n.fd-combo-input { padding-inline-end: 28px; }\n.fd-combo-clear {\n position: absolute; inset-inline-end: 4px; border: none; background: none; cursor: pointer; color: var(--fd-muted);\n font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-clear:hover { color: var(--fd-text); background: var(--fd-page); }\n/* A link that can be opened has its open button beside the clear button. */\n.fd-combo:has(> .fd-combo-open:not([hidden])) .fd-combo-input { padding-inline-end: 52px; }\n.fd-combo-open {\n position: absolute; inset-inline-end: 28px; border: none; background: none; cursor: pointer; color: var(--fd-accent);\n font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-open:hover { background: var(--fd-page); }\n.fd-listbox {\n position: absolute; inset-inline: 0; inset-block-start: calc(100% + 2px); z-index: 20; margin: 0; padding: 4px 0;\n list-style: none; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px);\n box-shadow: 0 8px 24px rgba(15, 20, 25, 0.12); max-height: 240px; overflow-y: auto;\n}\n.fd-option { padding: 6px 12px; cursor: pointer; }\n.fd-option:hover, .fd-option.fd-active { background: var(--fd-accent-soft); }\n.fd-option-create { color: var(--fd-accent); border-block-start: 1px solid var(--fd-border); }\n.fd-empty { padding: 6px 12px; color: var(--fd-muted); font-style: italic; }\n.fd-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-chips { display: contents; list-style: none; margin: 0; padding: 0; }\n.fd-chip {\n display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 10px; border-radius: 999px;\n background: var(--fd-accent-soft); color: var(--fd-text); font-size: 13px; line-height: 22px;\n}\n.fd-chip-remove { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 999px; }\n.fd-chip-remove:hover { color: var(--fd-error); }\n.fd-tags .fd-combo { flex: 1 1 140px; }\n.fd-reference { display: grid; grid-template-columns: minmax(7em, 34%) minmax(0, 1fr); gap: 8px; }\n\n/* ---- one2many lines ------------------------------------------------------- */\n.fd-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }\n/* The table scrolls sideways inside its own box; the grid around it must not grow to the table's width. */\n/* position: relative keeps the cells' hidden labels inside the scroll box; without it they widen the page. */\n.fd-lines-scroll { overflow-x: auto; min-width: 0; position: relative; }\n.fd-lines-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }\n.fd-lines-table th { text-align: start; font-weight: 600; color: var(--fd-muted); font-size: 12.5px; padding: 6px 8px; border-block-end: 1px solid var(--fd-border); white-space: nowrap; }\n.fd-lines-table td { padding: 4px 8px; border-block-end: 1px solid var(--fd-border); vertical-align: top; min-width: 7em; }\n.fd-lines-table td.fd-lines-tools, .fd-lines-table th.fd-lines-tools { width: 32px; min-width: 32px; padding-inline: 0; text-align: center; }\n.fd-lines-table .fd-input { min-height: 28px; }\n/* A yes/no cell sits level with the inputs beside it. */\n.fd-lines-table td > .fd-checkbox, .fd-lines-table td > .fd-switch { margin-block-start: 6px; }\n.fd-line-delete { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; }\n.fd-line-delete:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-lines-totals td { padding: 8px; font-weight: 600; border-block-start: 1px solid var(--fd-border); font-variant-numeric: tabular-nums; }\n.fd-lines-adds { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-self: start; }\n/* A section heads the lines below it; a note reads as a remark between them. */\n.fd-line-section td { background: var(--fd-page); }\n.fd-line-section .fd-input { font-weight: 600; }\n.fd-line-note .fd-input { font-style: italic; }\n.fd-cell-error { color: var(--fd-error); font-size: 12px; }\n.fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n\n/* ---- files, images, rich text, json ------------------------------------ */\n.fd-file { display: grid; gap: 8px; justify-items: start; padding: 6px 0; border-radius: var(--fd-control-radius); }\n.fd-file.fd-dragging { outline: 2px dashed var(--fd-accent); outline-offset: 4px; }\n.fd-file-pick { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; cursor: pointer; }\n.fd-file-chosen { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }\n.fd-file-name { font-variant-numeric: tabular-nums; }\n.fd-image-pick {\n width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { max-width: 160px; max-height: 160px; border-radius: var(--fd-control-radius); border: 1px solid var(--fd-border); object-fit: cover; background: var(--fd-page); }\n.fd-richtext { min-height: 96px; line-height: 1.5; overflow-wrap: anywhere; }\n.fd-richtext-box { display: grid; gap: 0; min-width: 0; }\n.fd-richtext-box > .fd-richtext { border-start-start-radius: 0; border-start-end-radius: 0; }\n.fd-richtext-bar {\n display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; min-width: 0;\n border: 1px solid var(--fd-border); border-block-end: none; border-start-start-radius: var(--fd-control-radius); border-start-end-radius: var(--fd-control-radius);\n background: var(--fd-page);\n}\n.fd-richtext-style { font: inherit; font-size: 12.5px; padding: 3px 6px; margin-inline-end: 4px; border: 1px solid var(--fd-border); border-radius: 4px; background: var(--fd-surface); color: var(--fd-text); }\n.fd-richtext-tool {\n display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px;\n background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 14px;\n}\n.fd-richtext-tool:hover { background: var(--fd-surface); }\n.fd-richtext-tool[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); }\n.fd-richtext-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }\n.fd-richtext-tool svg circle { fill: currentColor; stroke: none; }\n.fd-link-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--fd-border); border-block-end: none; background: var(--fd-surface); }\n.fd-link-row > .fd-input { flex: 1 1 200px; min-width: 0; }\n.fd-richtext[contenteditable=\"false\"] { background: transparent; border-color: transparent; padding-inline: 0; min-height: 0; }\n.fd-richtext p { margin: 0 0 6px; }\n.fd-code { font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; font-size: 12.5px; min-height: 96px; }\n\n/* ---- sections, tabs ---------------------------------------------------- */\n.fd-sections { display: grid; gap: 24px; }\n.fd-section { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }\n.fd-section-title { font-size: 15px; font-weight: 650; padding: 0; margin: 0; float: inline-start; width: 100%; }\n.fd-section-title + * { clear: both; }\n.fd-form[data-fd-skin=\"underline\"] .fd-section-title {\n text-transform: uppercase; letter-spacing: 0.05em; font-size: 12.5px; color: var(--fd-muted);\n border-block-end: 1px solid var(--fd-border); padding-block-end: 6px; width: 100%;\n}\n.fd-section-description { color: var(--fd-muted); margin: 0; }\n.fd-section-toggle {\n font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;\n display: inline-flex; align-items: center; gap: 8px; text-align: start;\n}\n.fd-section-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n.fd-section-chevron {\n width: 0.5em; height: 0.5em; border: solid currentColor; border-width: 0 2px 2px 0;\n transform: rotate(45deg); margin-block-start: -0.2em; transition: transform 0.15s ease; flex: none;\n}\n.fd-section-folded .fd-section-chevron { transform: rotate(-45deg); margin-block-start: 0; }\n[dir=\"rtl\"] .fd-section-folded .fd-section-chevron { transform: rotate(135deg); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-sections > .fd-section {\n background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 20px 24px;\n}\n.fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; }\n.fd-tab {\n font: inherit; background: none; border: none; cursor: pointer; padding: 8px 14px; color: var(--fd-muted);\n border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap;\n}\n.fd-tab[aria-selected=\"true\"] { color: var(--fd-accent); border-block-end-color: var(--fd-accent); font-weight: 600; }\n.fd-tabpanel { padding-block: 16px; display: grid; gap: 16px; }\n\n/* ---- buttons ---------------------------------------------------------- */\n.fd-button {\n font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; justify-content: center;\n min-height: 32px; padding: 4px 14px; border-radius: var(--fd-control-radius);\n border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text);\n}\n.fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }\n.fd-button-danger { color: var(--fd-error); border-color: var(--fd-error); }\n.fd-button-danger:hover { background: var(--fd-error); color: #fff; }\n.fd-button-link { border-color: transparent; background: none; color: var(--fd-accent); padding-inline: 4px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-button { border-radius: 3px; }\n.fd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.fd-actions-end { justify-content: flex-end; margin-block-start: 24px; }\n\n/* ---- record sheet --------------------------------------------------------- */\n.fd-sheet-page { background: var(--fd-page); padding: 0 0 32px; min-width: 0; }\n.fd-header {\n display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;\n background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); padding: 8px 16px;\n}\n.fd-statusbar { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; }\n.fd-statusbar li { display: flex; }\n.fd-statusbar button, .fd-statusbar span {\n font: inherit; font-size: 13px; border: none; background: var(--fd-page); color: var(--fd-muted);\n padding: 5px 18px 5px 22px; margin-inline-start: -6px; white-space: nowrap;\n clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);\n}\n.fd-statusbar li:first-child button, .fd-statusbar li:first-child span { margin-inline-start: 0; padding-inline-start: 14px;\n clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }\n.fd-statusbar button { cursor: pointer; }\n.fd-statusbar [aria-current=\"step\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n[dir=\"rtl\"] .fd-statusbar button, [dir=\"rtl\"] .fd-statusbar span { transform: scaleX(-1); }\n[dir=\"rtl\"] .fd-statusbar button > *, [dir=\"rtl\"] .fd-statusbar span > * { display: inline-block; transform: scaleX(-1); }\n.fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: var(--fd-page-max, 1180px); margin: 16px auto 0; padding-inline: 16px; }\n/* Save and Discard closing the sheet, when the page puts them at its foot. */\n.fd-sheet-foot { margin: 4px -28px -28px; padding: 12px 28px; border-block-start: 1px solid var(--fd-border); border-end-start-radius: inherit; border-end-end-radius: inherit; }\n.fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }\n@container (max-width: 860px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }\n.fd-card {\n position: relative; background: var(--fd-surface); border: 1px solid var(--fd-border);\n border-radius: var(--fd-radius); padding: 24px 28px 28px; display: grid; gap: 18px; min-width: 0;\n}\n.fd-ribbon-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }\n.fd-ribbon {\n position: absolute; inset-block-start: 18px; inset-inline-end: -42px; transform: rotate(45deg); width: 160px;\n text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; color: #fff; background: var(--fd-muted);\n text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none;\n}\n[dir=\"rtl\"] .fd-ribbon { transform: rotate(-45deg); }\n.fd-ribbon.fd-tone-danger { background: var(--fd-error); }\n.fd-ribbon.fd-tone-success { background: var(--fd-success); }\n.fd-ribbon.fd-tone-warning { background: #d97706; }\n.fd-ribbon.fd-tone-info { background: var(--fd-info); }\n.fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; }\n.fd-alert-message { flex: 1 1 auto; min-width: 0; }\n.fd-alert-close { border: none; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 4px; opacity: 0.75; }\n.fd-alert-close:hover { opacity: 1; }\n.fd-alert-close:focus-visible { outline: 2px solid var(--fd-focus); opacity: 1; }\n.fd-alert.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-alert.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-alert.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-alert.fd-tone-info, .fd-alert:not([class*=\"fd-tone-\"]) { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; margin: -24px -28px 0; border-block-end: 1px solid var(--fd-border); }\n.fd-stats:empty { display: none; }\n/* A visible ribbon owns the corner: stat buttons keep clear of it. */\n.fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stats { padding-inline-end: 104px; }\n.fd-stat {\n font: inherit; background: none; border: none; border-inline-start: 1px solid var(--fd-border); cursor: pointer;\n padding: 8px 18px; display: grid; justify-items: start; line-height: 1.2; color: var(--fd-text); min-width: 120px;\n}\n.fd-stat:hover { background: var(--fd-page); }\n.fd-stat:has(> .fd-icon) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }\n.fd-stat > .fd-icon { width: 22px; height: 22px; color: var(--fd-muted); }\n.fd-stat-words { display: grid; justify-items: start; }\n.fd-stat-value { font-weight: 700; font-size: 15px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n.fd-stat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-title-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }\n.fd-title { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }\n.fd-avatar { flex: none; }\n.fd-avatar > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar > * { grid-column: 1 !important; }\n.fd-avatar .fd-image-pick {\n width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { width: 88px; height: 88px; }\n.fd-avatar .fd-file-pick .fd-help { display: none; }\n.fd-avatar .fd-file-name { display: none; }\n.fd-avatar .fd-file { justify-items: center; gap: 2px; padding: 0; }\n.fd-avatar .fd-file-chosen { gap: 2px 8px; justify-content: center; font-size: 12.5px; }\n/* The title and subtitle themselves: big, their labels only for screen readers. */\n.fd-title > .fd-field .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-title > .fd-field { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-title > .fd-field > * { grid-column: 1; }\n.fd-title > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n/* Fields over and under the title: one row, each label beside its control. */\n.fd-title-above, .fd-title-below { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }\n.fd-title-above { margin-block-end: 4px; }\n.fd-title-below { margin-block-start: 6px; }\n.fd-form .fd-title-above > .fd-field, .fd-form .fd-title-below > .fd-field { display: flex; align-items: center; gap: 8px; grid-template-columns: none; }\n.fd-form .fd-title-above > .fd-field > *, .fd-form .fd-title-below > .fd-field > * { grid-column: auto !important; }\n.fd-title-above .fd-label:empty, .fd-title-below .fd-label:empty { display: none; }\n/* A choice over the title, such as Individual or Company, speaks for itself: its label is for screen readers. */\n.fd-title-above > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-title-statusbar { display: flex; }\n/* Badges over the title. */\n.fd-badges { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-badge {\n display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 10px;\n border-radius: 999px; border: 1px solid var(--fd-border); background: var(--fd-page); color: var(--fd-muted);\n}\n.fd-badge .fd-icon { width: 13px; height: 13px; }\n.fd-badge.fd-tone-info { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-badge.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-badge.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-badge.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-side { display: grid; gap: 12px; align-content: start; min-width: 0; }\n\n/* ---- wizard -------------------------------------------------------------- */\n.fd-wizard { display: grid; gap: 20px; }\n.fd-progress { display: grid; gap: 8px; }\n.fd-progress-text { color: var(--fd-muted); font-size: 13px; }\n.fd-value-text { display: block; padding-block: 6px; font-variant-numeric: tabular-nums; }\n.fd-date-pick { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }\n.fd-date-pick > .fd-input { flex: 1 1 auto; min-width: 0; }\n.fd-calendar-button {\n flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-muted);\n}\n.fd-calendar-button:hover, .fd-calendar-button[aria-expanded=\"true\"] { color: var(--fd-text); background: var(--fd-page); }\n.fd-calendar-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }\n.fd-calendar {\n position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0; z-index: 30; padding: 8px;\n background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n box-shadow: 0 8px 24px rgba(15, 20, 25, 0.14);\n}\n.fd-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; }\n.fd-calendar-head button { border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; color: var(--fd-text); }\n.fd-calendar-head button:hover { background: var(--fd-page); }\n.fd-calendar-title { font-weight: 600; }\n.fd-calendar-grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }\n.fd-calendar-grid th { font-size: 11.5px; font-weight: 600; color: var(--fd-muted); padding: 4px 0; width: 34px; text-align: center; }\n.fd-calendar-grid .fd-week { color: var(--fd-accent); font-weight: 600; border-inline-end: 1px solid var(--fd-border); }\n.fd-calendar-grid td { padding: 1px; }\n.fd-calendar-grid td button {\n width: 32px; height: 30px; border: none; border-radius: 4px; background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 13px;\n}\n.fd-calendar-grid td button:hover { background: var(--fd-accent-soft); }\n.fd-calendar-grid td button.fd-outside { color: var(--fd-muted); opacity: 0.6; }\n.fd-calendar-grid td button[aria-current=\"date\"] { box-shadow: inset 0 0 0 1px var(--fd-accent); }\n.fd-calendar-grid td button[aria-selected=\"true\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n.fd-calendar-grid td button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-properties { display: grid; gap: 8px; min-width: 0; }\n.fd-property { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }\n.fd-property > label { color: var(--fd-muted); font-size: 13px; }\n.fd-property[data-type=\"boolean\"] > :last-child { justify-self: start; }\n@container (max-width: 520px) { .fd-property { grid-template-columns: minmax(0, 1fr); gap: 4px; } }\n.fd-progressbar {\n position: relative; height: 22px; min-width: 120px; border-radius: 999px; overflow: hidden;\n background: var(--fd-page); border: 1px solid var(--fd-border); font-variant-numeric: tabular-nums;\n}\n.fd-progressbar-fill { height: 100%; background: var(--fd-success); transition: width 0.2s ease; }\n.fd-progressbar[data-tone=\"warning\"] .fd-progressbar-fill { background: #d97706; }\n.fd-progressbar[data-tone=\"danger\"] .fd-progressbar-fill { background: var(--fd-error); }\n.fd-progressbar[data-tone=\"info\"] .fd-progressbar-fill { background: var(--fd-info); }\n.fd-progressbar-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--fd-text); }\n.fd-progressbar-edit { display: flex; align-items: center; gap: 12px; min-width: 0; }\n.fd-progressbar-edit > .fd-progressbar { flex: 1 1 auto; }\n.fd-progressbar-edit > .fd-input { flex: 0 0 96px; }\n.fd-progress-bar { height: 4px; background: var(--fd-border); border-radius: 999px; overflow: hidden; }\n.fd-progress-bar > span { display: block; height: 100%; background: var(--fd-accent); transition: width 0.25s ease; }\n.fd-step { display: grid; gap: 18px; }\n.fd-step-title { font-size: 18px; font-weight: 650; margin: 0; }\n.fd-wizard-nav { display: flex; gap: 8px; justify-content: space-between; }\n/* A clickable wizard's steps: numbered, the current one filled, those behind it ticked. */\n.fd-steps-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: fd-step; }\n.fd-steps-list > li { counter-increment: fd-step; }\n.fd-step-link {\n font: inherit; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-muted); border-radius: 999px; padding: 4px 12px 4px 6px;\n}\n.fd-step-link::before {\n content: counter(fd-step); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;\n background: var(--fd-page); color: var(--fd-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;\n}\n.fd-step-link:hover { border-color: var(--fd-accent); color: var(--fd-text); }\n.fd-step-link:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-step-link.fd-step-done { color: var(--fd-text); }\n.fd-step-link.fd-step-done::before { content: \"\u2713\"; background: var(--fd-accent-soft); color: var(--fd-accent); }\n/* Skipped is not done: no tick, no colour. */\n.fd-step-link.fd-step-skipped { border-style: dashed; color: var(--fd-muted); }\n.fd-step-link.fd-step-skipped::before { content: \"\u2013\"; background: var(--fd-page); color: var(--fd-muted); }\n.fd-step-link[aria-current=\"step\"] { border-color: var(--fd-accent); color: var(--fd-accent); font-weight: 600; }\n.fd-step-link[aria-current=\"step\"]::before { content: counter(fd-step); background: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-wizard-nav .fd-spacer { flex: 1; }\n\n/* ---- text, status, dialog ------------------------------------------------- */\n.fd-text-heading { font-size: 16px; font-weight: 650; margin: 0; }\n.fd-text-paragraph { margin: 0; }\n.fd-text-note { margin: 0; color: var(--fd-muted); font-size: 13px; }\n.fd-status { min-height: 1.4em; color: var(--fd-muted); font-size: 13px; }\n.fd-status.fd-status-error { color: var(--fd-error); }\n.fd-status.fd-status-saved { color: var(--fd-success); }\n.fd-draft { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; margin-block-end: 16px;\n background: var(--fd-info-soft); border: 1px solid #a9c8ef; border-radius: var(--fd-control-radius); }\n.fd-done { padding: 40px 0; text-align: center; display: grid; gap: 12px; justify-items: center; }\n.fd-done-title { font-size: 20px; font-weight: 650; margin: 0; }\n.fd-dialog-backdrop { position: fixed; inset: 0; background: rgba(15, 20, 25, 0.45); display: grid; place-items: center; z-index: 1000; padding: 16px; }\n.fd-dialog {\n background: var(--fd-surface); color: var(--fd-text); border-radius: max(var(--fd-radius), 6px); max-width: 420px; width: 100%;\n padding: 20px 22px; display: grid; gap: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: var(--fd-font);\n}\n.fd-dialog p { margin: 0; }\n/* A page in a dialog: a head with its title and \u00D7, a body that scrolls, a foot with Discard and Save & Close. */\n.fd-form-dialog {\n display: flex; flex-direction: column; width: 100%; max-height: min(90vh, 100%); min-height: 0;\n background: var(--fd-page); color: var(--fd-text); border-radius: max(var(--fd-radius), 8px);\n box-shadow: 0 24px 64px rgba(15, 20, 25, 0.3); overflow: hidden;\n}\n.fd-form-dialog:focus { outline: none; }\n.fd-form-dialog.fd-size-small { max-width: 440px; }\n.fd-form-dialog.fd-size-medium { max-width: 760px; }\n.fd-form-dialog.fd-size-large { max-width: 1080px; }\n.fd-form-dialog-backdrop:has(> .fd-size-full) { padding: 0; }\n.fd-form-dialog.fd-size-full { max-width: none; max-height: none; height: 100%; border-radius: 0; }\n.fd-form-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--fd-border); background: var(--fd-surface); }\n.fd-form-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }\n.fd-dialog-close { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 4px; color: var(--fd-muted); }\n.fd-dialog-close:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-form-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; container-type: inline-size; }\n.fd-form-dialog-body .fd-sheet-layout { margin-block-start: 12px; }\n/* The dialog's head names the page; a record in a dialog leaves its side panel (the chatter) to the full page. */\n.fd-form-dialog-body .fd-page-title { display: none; }\n.fd-form-dialog-body .fd-page-head:not(:has(.fd-page-description)) { display: none; }\n.fd-form-dialog-body .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); }\n.fd-form-dialog-body .fd-side { display: none; }\n/* Search more\u2026: a search box over a list of rows. */\n.fd-search-body { display: grid; gap: 12px; align-content: start; }\n.fd-search-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: auto; max-height: min(60vh, 520px); }\n.fd-search-list .fd-option { padding: 8px 12px; }\n.fd-search-list .fd-option + .fd-option { border-block-start: 1px solid var(--fd-border); }\n.fd-search-list .fd-empty { padding: 10px 12px; color: var(--fd-muted); }\n/* A page with no sheet of its own sits on the dialog's surface, clear of its edges. */\n.fd-form-dialog-body:not(:has(.fd-sheet-layout)) { background: var(--fd-surface); padding: 16px 20px 20px; }\n.fd-form-dialog-foot { padding: 12px 16px; border-block-start: 1px solid var(--fd-border); background: var(--fd-surface); margin: 0; }\n@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } }\n";
14
+ export declare const FIELDIA_CSS = "\n/* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. */\n.fd-form, .fd-theme {\n --fd-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Noto Sans Arabic\", sans-serif;\n --fd-text: #212529;\n --fd-muted: #6b7280;\n --fd-page: #f2f3f5;\n --fd-surface: #ffffff;\n --fd-border: #cfd4da;\n --fd-border-strong: #9aa3ad;\n --fd-accent: #002855;\n --fd-accent-text: #ffffff;\n --fd-accent-soft: #e6ebf2;\n --fd-focus: #002855;\n --fd-focus-ring: none;\n --fd-error: #c62828;\n --fd-error-soft: #fdecea;\n --fd-success: #2e7d32;\n --fd-success-soft: #e8f5e9;\n --fd-warning: #8a5300;\n --fd-warning-soft: #fff4e0;\n --fd-info: #0b5cad;\n --fd-info-soft: #e7f0fb;\n --fd-radius: 0px;\n --fd-control-radius: 0px;\n --fd-pad-y: 3px;\n --fd-pad-x: 4px;\n --fd-input-border: 0 0 1px 0;\n --fd-label-weight: 600;\n --fd-gap-x: 32px;\n --fd-gap-y: 14px;\n container-type: inline-size;\n font-family: var(--fd-font);\n font-size: 14px;\n line-height: 1.45;\n color: var(--fd-text);\n -webkit-text-size-adjust: 100%;\n}\n.fd-form[data-fd-skin=\"outlined\"], .fd-theme[data-fd-skin=\"outlined\"] {\n --fd-text: rgba(0, 0, 0, 0.88);\n --fd-muted: rgba(0, 0, 0, 0.55);\n --fd-page: #f5f5f5;\n --fd-border: #d9d9d9;\n --fd-border-strong: #bfbfbf;\n --fd-accent: #1677ff;\n --fd-accent-soft: #e6f4ff;\n --fd-focus: #1677ff;\n --fd-focus-ring: 0 0 0 2px rgba(5, 145, 255, 0.12);\n --fd-error: #ff4d4f;\n --fd-error-soft: #fff2f0;\n --fd-radius: 8px;\n --fd-control-radius: 6px;\n --fd-pad-y: 4px;\n --fd-pad-x: 11px;\n --fd-input-border: 1px;\n --fd-label-weight: 400;\n --fd-gap-x: 24px;\n --fd-gap-y: 18px;\n}\n.fd-form *, .fd-form *::before, .fd-form *::after { box-sizing: border-box; }\n.fd-form [hidden] { display: none !important; }\n\n/* ---- page frame ---------------------------------------------------------- */\n.fd-page-head { display: grid; gap: 4px; margin-block-end: 20px; }\n.fd-page-title { font-size: 22px; font-weight: 650; margin: 0; line-height: 1.25; }\n.fd-page-description { color: var(--fd-muted); margin: 0; }\n\n/* ---- how wide a page goes, and Save above its sections ----------------------- */\n.fd-form[data-max-width=\"narrow\"] { --fd-page-max: 640px; }\n.fd-form[data-max-width=\"medium\"] { --fd-page-max: 900px; }\n.fd-form[data-max-width=\"wide\"] { --fd-page-max: 1180px; }\n.fd-form[data-max-width=\"full\"] { --fd-page-max: none; }\n.fd-form[data-max-width] > .fd-content:not(:has(> .fd-sheet-page)) { max-width: var(--fd-page-max); margin-inline: auto; }\n.fd-actions.fd-actions-top { margin-block-start: 0; padding-block-end: 14px; margin-block-end: 18px; border-block-end: 1px solid var(--fd-border); }\n\n/* ---- icons: drawn with lines in the colour of the words beside them ------------ */\n.fd-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }\n.fd-section-title .fd-icon, .fd-tab .fd-icon, .fd-button .fd-icon, .fd-step-title .fd-icon { margin-inline-end: 0.4em; }\n.fd-section-title .fd-icon { color: var(--fd-muted); }\n\n/* ---- fields ---------------------------------------------------------------- */\n.fd-grid {\n display: grid;\n grid-template-columns: repeat(var(--fd-columns, 1), minmax(0, 1fr));\n gap: var(--fd-gap-y) var(--fd-gap-x);\n align-items: start;\n}\n.fd-field { display: grid; gap: 4px; min-width: 0; grid-column: span min(var(--fd-span, 1), var(--fd-columns, 1)); }\n.fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }\n/* The \u2713 of a field filled in right, by its label. */\n.fd-valid-mark { color: var(--fd-success); width: 1em; height: 1em; margin-inline-start: 6px; vertical-align: -0.15em; stroke-width: 2.4; }\n.fd-field.fd-required > .fd-label::after { content: \" *\"; color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::after { content: \"\"; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::before { content: \"* \"; color: var(--fd-error); }\n.fd-help { color: var(--fd-muted); font-size: 12.5px; }\n.fd-error { color: var(--fd-error); font-size: 12.5px; }\n.fd-warning {\n color: var(--fd-warning); background: var(--fd-warning-soft); font-size: 12.5px;\n padding: 3px 8px; border-radius: var(--fd-control-radius); justify-self: start;\n}\n\n/* underline: label beside the value, the way a Flectra sheet reads */\n.fd-form[data-fd-skin=\"underline\"] .fd-field {\n /* One label width for every field, so a field spanning two columns lines up with its neighbours. */\n grid-template-columns: var(--fd-label-width, 11em) minmax(0, 1fr);\n column-gap: 12px;\n align-items: baseline;\n}\n.fd-form[data-fd-skin=\"underline\"] .fd-field > .fd-label { grid-column: 1; }\n/* A table of lines needs the full width: its label sits above it. */\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] > * { grid-column: 1 !important; }\n.fd-form[data-fd-skin=\"underline\"] .fd-field > :not(.fd-label) { grid-column: 2; }\n/* A label beside every value needs room twice over: the underline skin stacks its columns sooner. */\n@container (max-width: 760px) {\n .fd-form[data-fd-skin=\"underline\"] .fd-grid { grid-template-columns: minmax(0, 1fr); }\n .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-column: auto; }\n /* A section that says how many columns it keeps here keeps them, in either skin. */\n .fd-form .fd-grid[data-columns-medium] { grid-template-columns: repeat(var(--fd-columns-medium), minmax(0, 1fr)); }\n .fd-form .fd-grid[data-columns-medium] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-medium)); }\n /* Kept side by side here, the underline skin's fields have no room for a label beside: it goes above. */\n .fd-form[data-fd-skin=\"underline\"] .fd-grid[data-columns-medium]:not([data-columns-medium=\"1\"]) .fd-field { grid-template-columns: minmax(0, 1fr); }\n .fd-form[data-fd-skin=\"underline\"] .fd-grid[data-columns-medium]:not([data-columns-medium=\"1\"]) .fd-field > * { grid-column: 1 !important; }\n}\n@container (max-width: 520px) {\n .fd-grid { grid-template-columns: minmax(0, 1fr); }\n .fd-field { grid-column: auto; }\n .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-template-columns: minmax(0, 1fr); }\n .fd-form[data-fd-skin=\"underline\"] .fd-field > * { grid-column: 1 !important; }\n /* The narrow count, or one column when only the medium one was given. */\n .fd-form .fd-grid[data-columns-medium], .fd-form .fd-grid[data-columns-narrow] { grid-template-columns: repeat(var(--fd-columns-narrow, 1), minmax(0, 1fr)); }\n .fd-form .fd-grid[data-columns-medium] > .fd-field, .fd-form .fd-grid[data-columns-narrow] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-narrow, 1)); }\n}\n\n/* ---- inputs ---------------------------------------------------------------- */\n.fd-input {\n width: 100%;\n min-width: 0;\n font: inherit;\n color: inherit;\n background: var(--fd-surface);\n border: solid var(--fd-border);\n border-width: var(--fd-input-border);\n border-radius: var(--fd-control-radius);\n padding: var(--fd-pad-y) var(--fd-pad-x);\n min-height: 30px;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-input::placeholder { color: var(--fd-muted); opacity: 0.8; }\n.fd-input:hover { border-color: var(--fd-border-strong); }\n.fd-input:focus { outline: none; border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }\n.fd-form[data-fd-skin=\"underline\"] .fd-input { background: transparent; }\n.fd-form[data-fd-skin=\"underline\"] .fd-input:focus { box-shadow: 0 1px 0 0 var(--fd-focus); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field.fd-required .fd-input { border-color: var(--fd-accent); }\n.fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[readonly] { background: rgba(0, 0, 0, 0.04); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }\n/* A whole form locked reads as a record: plain values in either skin, no boxes, and no prompts to type. */\n.fd-form[data-readonly] .fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; color: var(--fd-text); }\n.fd-form[data-readonly] .fd-input::placeholder { color: transparent; }\n.fd-form[data-readonly] select.fd-input:disabled { appearance: none; background: transparent; border-color: transparent; padding-inline: 0; color: var(--fd-text); opacity: 1; }\n.fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[aria-invalid=\"true\"]:focus { box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06); }\n.fd-textarea { resize: vertical; min-height: 64px; }\n.fd-select { appearance: auto; }\n.fd-number { display: flex; align-items: baseline; gap: 6px; }\n.fd-number-input { font-variant-numeric: tabular-nums; }\n.fd-currency { color: var(--fd-muted); font-size: 12.5px; font-weight: 600; }\n/* With the currency after it, the amount ends right beside it. */\n.fd-currency-after > .fd-number-input { text-align: end; }\n/* A picked currency is a small box of its own beside the amount. */\n.fd-currency-picked { align-items: center; }\n.fd-currency-picked > :not(.fd-number-input) { flex: 0 0 104px; min-width: 0; }\n.fd-currency-picked > .fd-number-input { flex: 1 1 auto; min-width: 0; }\n.fd-pending { color: var(--fd-muted); font-style: italic; }\n.fd-pending:empty::before { content: \"\u2014\"; }\n\n.fd-checkbox, .fd-choice input { width: 16px; height: 16px; accent-color: var(--fd-accent); margin: 0; }\n.fd-switch {\n appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; position: relative;\n background: var(--fd-border-strong); cursor: pointer; transition: background 0.2s ease;\n}\n.fd-switch::after {\n content: \"\"; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 16px; height: 16px;\n border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25);\n}\n.fd-switch:checked { background: var(--fd-accent); }\n.fd-switch:checked::after { transform: translateX(14px); }\n[dir=\"rtl\"] .fd-switch:checked::after { transform: translateX(-14px); }\n.fd-choices { display: flex; flex-wrap: wrap; gap: 6px 18px; }\n.fd-choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }\n.fd-points { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-points button {\n font: inherit; cursor: pointer; border: 1px solid var(--fd-border); background: var(--fd-surface);\n color: var(--fd-text); border-radius: var(--fd-control-radius); min-width: 34px; height: 34px; padding: 0 8px;\n}\n.fd-points button.fd-on { background: var(--fd-accent); color: var(--fd-accent-text); border-color: var(--fd-accent); }\n.fd-rating button { border: none; background: none; font-size: 24px; color: var(--fd-border-strong); padding: 0 2px; min-width: 0; }\n.fd-rating button.fd-on { background: none; color: #f5a623; }\n.fd-points button:disabled, .fd-choice input:disabled { cursor: default; }\n.fd-form :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-form .fd-input:focus-visible { outline: none; }\n\n/* ---- pickers: many2one, many2many, reference ------------------------------ */\n.fd-combo { position: relative; display: flex; align-items: center; min-width: 0; }\n.fd-combo-input { padding-inline-end: 28px; }\n.fd-combo-clear {\n position: absolute; inset-inline-end: 4px; border: none; background: none; cursor: pointer; color: var(--fd-muted);\n font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-clear:hover { color: var(--fd-text); background: var(--fd-page); }\n/* A link that can be opened has its open button beside the clear button. */\n.fd-combo:has(> .fd-combo-open:not([hidden])) .fd-combo-input { padding-inline-end: 52px; }\n.fd-combo-open {\n position: absolute; inset-inline-end: 28px; border: none; background: none; cursor: pointer; color: var(--fd-accent);\n font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-open:hover { background: var(--fd-page); }\n.fd-listbox {\n position: absolute; inset-inline: 0; inset-block-start: calc(100% + 2px); z-index: 20; margin: 0; padding: 4px 0;\n list-style: none; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px);\n box-shadow: 0 8px 24px rgba(15, 20, 25, 0.12); max-height: 240px; overflow-y: auto;\n}\n.fd-option { padding: 6px 12px; cursor: pointer; }\n.fd-option:hover, .fd-option.fd-active { background: var(--fd-accent-soft); }\n.fd-option-create { color: var(--fd-accent); border-block-start: 1px solid var(--fd-border); }\n.fd-empty { padding: 6px 12px; color: var(--fd-muted); font-style: italic; }\n.fd-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-chips { display: contents; list-style: none; margin: 0; padding: 0; }\n.fd-chip {\n display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 10px; border-radius: 999px;\n background: var(--fd-accent-soft); color: var(--fd-text); font-size: 13px; line-height: 22px;\n}\n.fd-chip-remove { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 999px; }\n.fd-chip-remove:hover { color: var(--fd-error); }\n.fd-tags .fd-combo { flex: 1 1 140px; }\n.fd-reference { display: grid; grid-template-columns: minmax(7em, 34%) minmax(0, 1fr); gap: 8px; }\n\n/* ---- one2many lines ------------------------------------------------------- */\n.fd-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }\n/* The table scrolls sideways inside its own box; the grid around it must not grow to the table's width. */\n/* position: relative keeps the cells' hidden labels inside the scroll box; without it they widen the page. */\n.fd-lines-scroll { overflow-x: auto; min-width: 0; position: relative; }\n.fd-lines-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }\n.fd-lines-table th { text-align: start; font-weight: 600; color: var(--fd-muted); font-size: 12.5px; padding: 6px 8px; border-block-end: 1px solid var(--fd-border); white-space: nowrap; }\n.fd-lines-table td { padding: 4px 8px; border-block-end: 1px solid var(--fd-border); vertical-align: top; min-width: 7em; }\n.fd-lines-table td.fd-lines-tools, .fd-lines-table th.fd-lines-tools { width: 32px; min-width: 32px; padding-inline: 0; text-align: center; }\n.fd-lines-table .fd-input { min-height: 28px; }\n/* A yes/no cell sits level with the inputs beside it. */\n.fd-lines-table td > .fd-checkbox, .fd-lines-table td > .fd-switch { margin-block-start: 6px; }\n.fd-line-delete { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; }\n.fd-line-delete:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-lines-totals td { padding: 8px; font-weight: 600; border-block-start: 1px solid var(--fd-border); font-variant-numeric: tabular-nums; }\n.fd-lines-adds { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-self: start; }\n/* A section heads the lines below it; a note reads as a remark between them. */\n.fd-line-section td { background: var(--fd-page); }\n.fd-line-section .fd-input { font-weight: 600; }\n.fd-line-note .fd-input { font-style: italic; }\n.fd-cell-error { color: var(--fd-error); font-size: 12px; }\n.fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n\n/* ---- files, images, rich text, json ------------------------------------ */\n.fd-file { display: grid; gap: 8px; justify-items: start; padding: 6px 0; border-radius: var(--fd-control-radius); }\n.fd-file.fd-dragging { outline: 2px dashed var(--fd-accent); outline-offset: 4px; }\n.fd-file-pick { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; cursor: pointer; }\n.fd-file-chosen { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }\n.fd-file-name { font-variant-numeric: tabular-nums; }\n.fd-image-pick {\n width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { max-width: 160px; max-height: 160px; border-radius: var(--fd-control-radius); border: 1px solid var(--fd-border); object-fit: cover; background: var(--fd-page); }\n.fd-richtext { min-height: 96px; line-height: 1.5; overflow-wrap: anywhere; }\n.fd-richtext-box { display: grid; gap: 0; min-width: 0; }\n.fd-richtext-box > .fd-richtext { border-start-start-radius: 0; border-start-end-radius: 0; }\n.fd-richtext-bar {\n display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; min-width: 0;\n border: 1px solid var(--fd-border); border-block-end: none; border-start-start-radius: var(--fd-control-radius); border-start-end-radius: var(--fd-control-radius);\n background: var(--fd-page);\n}\n.fd-richtext-style { font: inherit; font-size: 12.5px; padding: 3px 6px; margin-inline-end: 4px; border: 1px solid var(--fd-border); border-radius: 4px; background: var(--fd-surface); color: var(--fd-text); }\n.fd-richtext-tool {\n display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px;\n background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 14px;\n}\n.fd-richtext-tool:hover { background: var(--fd-surface); }\n.fd-richtext-tool[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); }\n.fd-richtext-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }\n.fd-richtext-tool svg circle { fill: currentColor; stroke: none; }\n.fd-link-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--fd-border); border-block-end: none; background: var(--fd-surface); }\n.fd-link-row > .fd-input { flex: 1 1 200px; min-width: 0; }\n.fd-richtext[contenteditable=\"false\"] { background: transparent; border-color: transparent; padding-inline: 0; min-height: 0; }\n.fd-richtext p { margin: 0 0 6px; }\n.fd-code { font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; font-size: 12.5px; min-height: 96px; }\n\n/* ---- sections, tabs ---------------------------------------------------- */\n.fd-sections { display: grid; gap: 24px; }\n.fd-section { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }\n.fd-section-title { font-size: 15px; font-weight: 650; padding: 0; margin: 0; float: inline-start; width: 100%; }\n.fd-section-title + * { clear: both; }\n.fd-form[data-fd-skin=\"underline\"] .fd-section-title {\n text-transform: uppercase; letter-spacing: 0.05em; font-size: 12.5px; color: var(--fd-muted);\n border-block-end: 1px solid var(--fd-border); padding-block-end: 6px; width: 100%;\n}\n.fd-section-description { color: var(--fd-muted); margin: 0; }\n.fd-section-toggle {\n font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;\n display: inline-flex; align-items: center; gap: 8px; text-align: start;\n}\n.fd-section-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n.fd-section-chevron {\n width: 0.5em; height: 0.5em; border: solid currentColor; border-width: 0 2px 2px 0;\n transform: rotate(45deg); margin-block-start: -0.2em; transition: transform 0.15s ease; flex: none;\n}\n.fd-section-folded .fd-section-chevron { transform: rotate(-45deg); margin-block-start: 0; }\n[dir=\"rtl\"] .fd-section-folded .fd-section-chevron { transform: rotate(135deg); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-sections > .fd-section {\n background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 20px 24px;\n}\n.fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; }\n.fd-tab {\n font: inherit; background: none; border: none; cursor: pointer; padding: 8px 14px; color: var(--fd-muted);\n border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap;\n}\n.fd-tab[aria-selected=\"true\"] { color: var(--fd-accent); border-block-end-color: var(--fd-accent); font-weight: 600; }\n.fd-tabpanel { padding-block: 16px; display: grid; gap: 16px; }\n\n/* ---- buttons ---------------------------------------------------------- */\n.fd-button {\n font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; justify-content: center;\n min-height: 32px; padding: 4px 14px; border-radius: var(--fd-control-radius);\n border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text);\n}\n.fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }\n.fd-button-danger { color: var(--fd-error); border-color: var(--fd-error); }\n.fd-button-danger:hover { background: var(--fd-error); color: #fff; }\n.fd-button-link { border-color: transparent; background: none; color: var(--fd-accent); padding-inline: 4px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-button { border-radius: 3px; }\n.fd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.fd-actions-end { justify-content: flex-end; margin-block-start: 24px; }\n\n/* ---- record sheet --------------------------------------------------------- */\n.fd-sheet-page { background: var(--fd-page); padding: 0 0 32px; min-width: 0; }\n.fd-header {\n display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;\n background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); padding: 8px 16px;\n}\n.fd-statusbar { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; }\n.fd-statusbar li { display: flex; }\n.fd-statusbar button, .fd-statusbar span {\n font: inherit; font-size: 13px; border: none; background: var(--fd-page); color: var(--fd-muted);\n padding: 5px 18px 5px 22px; margin-inline-start: -6px; white-space: nowrap;\n clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);\n}\n.fd-statusbar li:first-child button, .fd-statusbar li:first-child span { margin-inline-start: 0; padding-inline-start: 14px;\n clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }\n.fd-statusbar button { cursor: pointer; }\n.fd-statusbar [aria-current=\"step\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n[dir=\"rtl\"] .fd-statusbar button, [dir=\"rtl\"] .fd-statusbar span { transform: scaleX(-1); }\n[dir=\"rtl\"] .fd-statusbar button > *, [dir=\"rtl\"] .fd-statusbar span > * { display: inline-block; transform: scaleX(-1); }\n.fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: var(--fd-page-max, 1180px); margin: 16px auto 0; padding-inline: 16px; }\n/* The sheet keeps its own height: a long side panel beside it must not stretch it. */\n.fd-sheet-layout { align-items: start; }\n/* Save and Discard closing the sheet, when the page puts them at its foot. */\n.fd-sheet-foot { margin: 4px -28px -28px; padding: 12px 28px; border-block-start: 1px solid var(--fd-border); border-end-start-radius: inherit; border-end-end-radius: inherit; }\n.fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }\n@container (max-width: 860px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }\n.fd-card {\n position: relative; background: var(--fd-surface); border: 1px solid var(--fd-border);\n border-radius: var(--fd-radius); padding: 24px 28px 28px; display: grid; gap: 18px; min-width: 0;\n}\n.fd-ribbon-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }\n.fd-ribbon {\n position: absolute; inset-block-start: 18px; inset-inline-end: -42px; transform: rotate(45deg); width: 160px;\n text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; color: #fff; background: var(--fd-muted);\n text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none;\n}\n[dir=\"rtl\"] .fd-ribbon { transform: rotate(-45deg); }\n.fd-ribbon.fd-tone-danger { background: var(--fd-error); }\n.fd-ribbon.fd-tone-success { background: var(--fd-success); }\n.fd-ribbon.fd-tone-warning { background: #d97706; }\n.fd-ribbon.fd-tone-info { background: var(--fd-info); }\n.fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; }\n.fd-alert-message { flex: 1 1 auto; min-width: 0; }\n.fd-alert-close { border: none; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 4px; opacity: 0.75; }\n.fd-alert-close:hover { opacity: 1; }\n.fd-alert-close:focus-visible { outline: 2px solid var(--fd-focus); opacity: 1; }\n.fd-alert.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-alert.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-alert.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-alert.fd-tone-info, .fd-alert:not([class*=\"fd-tone-\"]) { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; margin: -24px -28px 0; border-block-end: 1px solid var(--fd-border); }\n.fd-stats:empty { display: none; }\n/* A visible ribbon owns the corner: stat buttons keep clear of it. */\n.fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stats { padding-inline-end: 104px; }\n.fd-stat {\n font: inherit; background: none; border: none; border-inline-start: 1px solid var(--fd-border); cursor: pointer;\n padding: 8px 18px; display: grid; justify-items: start; line-height: 1.2; color: var(--fd-text); min-width: 120px;\n}\n.fd-stat:hover { background: var(--fd-page); }\n.fd-stat:has(> .fd-icon) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }\n.fd-stat > .fd-icon { width: 22px; height: 22px; color: var(--fd-muted); }\n.fd-stat-words { display: grid; justify-items: start; }\n.fd-stat-value { font-weight: 700; font-size: 15px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n.fd-stat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-title-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }\n.fd-title { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }\n.fd-avatar { flex: none; }\n.fd-avatar > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar > * { grid-column: 1 !important; }\n.fd-avatar .fd-image-pick {\n width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { width: 88px; height: 88px; }\n.fd-avatar .fd-file-pick .fd-help { display: none; }\n.fd-avatar .fd-file-name { display: none; }\n.fd-avatar .fd-file { justify-items: center; gap: 2px; padding: 0; }\n.fd-avatar .fd-file-chosen { gap: 2px 8px; justify-content: center; font-size: 12.5px; }\n/* The title and subtitle themselves: big, their labels only for screen readers. */\n.fd-title > .fd-field .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-title > .fd-field { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-title > .fd-field > * { grid-column: 1; }\n.fd-title > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n/* Fields over and under the title: one row, each label beside its control. */\n.fd-title-above, .fd-title-below { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }\n.fd-title-above { margin-block-end: 4px; }\n.fd-title-below { margin-block-start: 6px; }\n.fd-form .fd-title-above > .fd-field, .fd-form .fd-title-below > .fd-field { display: flex; align-items: center; gap: 8px; grid-template-columns: none; }\n.fd-form .fd-title-above > .fd-field > *, .fd-form .fd-title-below > .fd-field > * { grid-column: auto !important; }\n.fd-title-above .fd-label:empty, .fd-title-below .fd-label:empty { display: none; }\n/* A choice over the title, such as Individual or Company, speaks for itself: its label is for screen readers. */\n.fd-title-above > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-title-statusbar { display: flex; }\n/* Badges over the title. */\n.fd-badges { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-badge {\n display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 10px;\n border-radius: 999px; border: 1px solid var(--fd-border); background: var(--fd-page); color: var(--fd-muted);\n}\n.fd-badge .fd-icon { width: 13px; height: 13px; }\n.fd-badge.fd-tone-info { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-badge.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-badge.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-badge.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-side { display: grid; gap: 12px; align-content: start; min-width: 0; }\n\n/* ---- wizard -------------------------------------------------------------- */\n.fd-wizard { display: grid; gap: 20px; }\n.fd-progress { display: grid; gap: 8px; }\n.fd-progress-text { color: var(--fd-muted); font-size: 13px; }\n.fd-value-text { display: block; padding-block: 6px; font-variant-numeric: tabular-nums; }\n.fd-date-pick { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }\n.fd-date-pick > .fd-input { flex: 1 1 auto; min-width: 0; }\n.fd-calendar-button {\n flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-muted);\n}\n.fd-calendar-button:hover, .fd-calendar-button[aria-expanded=\"true\"] { color: var(--fd-text); background: var(--fd-page); }\n.fd-calendar-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }\n.fd-calendar {\n position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0; z-index: 30; padding: 8px;\n background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n box-shadow: 0 8px 24px rgba(15, 20, 25, 0.14);\n}\n.fd-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; }\n.fd-calendar-head button { border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; color: var(--fd-text); }\n.fd-calendar-head button:hover { background: var(--fd-page); }\n.fd-calendar-title { font-weight: 600; }\n.fd-calendar-grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }\n.fd-calendar-grid th { font-size: 11.5px; font-weight: 600; color: var(--fd-muted); padding: 4px 0; width: 34px; text-align: center; }\n.fd-calendar-grid .fd-week { color: var(--fd-accent); font-weight: 600; border-inline-end: 1px solid var(--fd-border); }\n.fd-calendar-grid td { padding: 1px; }\n.fd-calendar-grid td button {\n width: 32px; height: 30px; border: none; border-radius: 4px; background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 13px;\n}\n.fd-calendar-grid td button:hover { background: var(--fd-accent-soft); }\n.fd-calendar-grid td button.fd-outside { color: var(--fd-muted); opacity: 0.6; }\n.fd-calendar-grid td button[aria-current=\"date\"] { box-shadow: inset 0 0 0 1px var(--fd-accent); }\n.fd-calendar-grid td button[aria-selected=\"true\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n.fd-calendar-grid td button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-properties { display: grid; gap: 8px; min-width: 0; }\n.fd-property { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }\n.fd-property > label { color: var(--fd-muted); font-size: 13px; }\n.fd-property[data-type=\"boolean\"] > :last-child { justify-self: start; }\n@container (max-width: 520px) { .fd-property { grid-template-columns: minmax(0, 1fr); gap: 4px; } }\n.fd-progressbar {\n position: relative; height: 22px; min-width: 120px; border-radius: 999px; overflow: hidden;\n background: var(--fd-page); border: 1px solid var(--fd-border); font-variant-numeric: tabular-nums;\n}\n.fd-progressbar-fill { height: 100%; background: var(--fd-success); transition: width 0.2s ease; }\n.fd-progressbar[data-tone=\"warning\"] .fd-progressbar-fill { background: #d97706; }\n.fd-progressbar[data-tone=\"danger\"] .fd-progressbar-fill { background: var(--fd-error); }\n.fd-progressbar[data-tone=\"info\"] .fd-progressbar-fill { background: var(--fd-info); }\n.fd-progressbar-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--fd-text); }\n.fd-progressbar-edit { display: flex; align-items: center; gap: 12px; min-width: 0; }\n.fd-progressbar-edit > .fd-progressbar { flex: 1 1 auto; }\n.fd-progressbar-edit > .fd-input { flex: 0 0 96px; }\n.fd-progress-bar { height: 4px; background: var(--fd-border); border-radius: 999px; overflow: hidden; }\n.fd-progress-bar > span { display: block; height: 100%; background: var(--fd-accent); transition: width 0.25s ease; }\n.fd-step { display: grid; gap: 18px; }\n.fd-step-title { font-size: 18px; font-weight: 650; margin: 0; }\n.fd-wizard-nav { display: flex; gap: 8px; justify-content: space-between; }\n/* A clickable wizard's steps: numbered, the current one filled, those behind it ticked. */\n.fd-steps-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: fd-step; }\n.fd-steps-list > li { counter-increment: fd-step; }\n.fd-step-link {\n font: inherit; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-muted); border-radius: 999px; padding: 4px 12px 4px 6px;\n}\n.fd-step-link::before {\n content: counter(fd-step); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;\n background: var(--fd-page); color: var(--fd-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;\n}\n.fd-step-link:hover { border-color: var(--fd-accent); color: var(--fd-text); }\n.fd-step-link:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-step-link.fd-step-done { color: var(--fd-text); }\n.fd-step-link.fd-step-done::before { content: \"\u2713\"; background: var(--fd-accent-soft); color: var(--fd-accent); }\n/* Skipped is not done: no tick, no colour. */\n.fd-step-link.fd-step-skipped { border-style: dashed; color: var(--fd-muted); }\n.fd-step-link.fd-step-skipped::before { content: \"\u2013\"; background: var(--fd-page); color: var(--fd-muted); }\n.fd-step-link[aria-current=\"step\"] { border-color: var(--fd-accent); color: var(--fd-accent); font-weight: 600; }\n.fd-step-link[aria-current=\"step\"]::before { content: counter(fd-step); background: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-wizard-nav .fd-spacer { flex: 1; }\n\n/* ---- text, status, dialog ------------------------------------------------- */\n.fd-text-heading { font-size: 16px; font-weight: 650; margin: 0; }\n.fd-text-paragraph { margin: 0; }\n.fd-text-note { margin: 0; color: var(--fd-muted); font-size: 13px; }\n.fd-status { min-height: 1.4em; color: var(--fd-muted); font-size: 13px; }\n.fd-status-box { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }\n.fd-status-box .fd-retry { font-size: 13px; }\n/* Said to screen readers only. */\n.fd-announce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n/* The server out of reach: a banner over the page, with Retry. */\n.fd-banner {\n display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; margin-block-end: 16px;\n border: 1px solid #f0c47a; border-radius: var(--fd-control-radius); background: var(--fd-warning-soft); color: var(--fd-warning); font-size: 13.5px;\n}\n.fd-banner-text { flex: 1 1 16em; min-width: 0; }\n.fd-content > .fd-banner:has(+ .fd-draft + .fd-sheet-page), .fd-content > .fd-banner:has(+ .fd-sheet-page) { margin: 12px 16px 0; }\n/* The status as a toast in a corner, or as a bar across the top. */\n.fd-status-box.fd-toast {\n position: fixed; inset-block-end: max(20px, env(safe-area-inset-bottom, 0px)); inset-inline-end: 20px; z-index: 900;\n padding: 10px 16px; border-radius: 8px; background: var(--fd-text); box-shadow: 0 8px 24px rgba(15, 20, 25, 0.25);\n}\n/* Light words on the dark toast, saved or not: the status's own colours are for a light ground. */\n.fd-toast .fd-status, .fd-toast .fd-status.fd-status-saved, .fd-toast .fd-status.fd-status-error { color: var(--fd-surface); font-size: 13.5px; min-height: 0; }\n.fd-toast .fd-retry { color: var(--fd-surface); text-decoration: underline; }\n.fd-toast:has(.fd-status-error) { background: var(--fd-error); }\n.fd-status-box.fd-status-bar { display: flex; justify-content: center; min-height: 32px; padding: 6px 16px; background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); }\n.fd-status-bar .fd-status-error { color: var(--fd-error); }\n.fd-status.fd-status-error { color: var(--fd-error); }\n.fd-status.fd-status-saved { color: var(--fd-success); }\n.fd-draft { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; margin-block-end: 16px;\n background: var(--fd-info-soft); border: 1px solid #a9c8ef; border-radius: var(--fd-control-radius); }\n.fd-done { padding: 40px 0; text-align: center; display: grid; gap: 12px; justify-items: center; }\n.fd-done-title { font-size: 20px; font-weight: 650; margin: 0; }\n.fd-dialog-backdrop { position: fixed; inset: 0; background: rgba(15, 20, 25, 0.45); display: grid; place-items: center; z-index: 1000; padding: 16px; }\n.fd-dialog {\n background: var(--fd-surface); color: var(--fd-text); border-radius: max(var(--fd-radius), 6px); max-width: 420px; width: 100%;\n padding: 20px 22px; display: grid; gap: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: var(--fd-font);\n}\n.fd-dialog p { margin: 0; }\n/* A page in a dialog: a head with its title and \u00D7, a body that scrolls, a foot with Discard and Save & Close. */\n.fd-form-dialog {\n display: flex; flex-direction: column; width: 100%; max-height: min(90vh, 100%); min-height: 0;\n background: var(--fd-page); color: var(--fd-text); border-radius: max(var(--fd-radius), 8px);\n box-shadow: 0 24px 64px rgba(15, 20, 25, 0.3); overflow: hidden;\n}\n.fd-form-dialog:focus { outline: none; }\n.fd-form-dialog.fd-size-small { max-width: 440px; }\n.fd-form-dialog.fd-size-medium { max-width: 760px; }\n.fd-form-dialog.fd-size-large { max-width: 1080px; }\n.fd-form-dialog-backdrop:has(> .fd-size-full) { padding: 0; }\n.fd-form-dialog.fd-size-full { max-width: none; max-height: none; height: 100%; border-radius: 0; }\n.fd-form-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--fd-border); background: var(--fd-surface); }\n.fd-form-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }\n.fd-dialog-close { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 4px; color: var(--fd-muted); }\n.fd-dialog-close:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-form-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; container-type: inline-size; }\n.fd-form-dialog-body .fd-sheet-layout { margin-block-start: 12px; }\n/* The dialog's head names the page; a record in a dialog leaves its side panel (the chatter) to the full page. */\n.fd-form-dialog-body .fd-page-title { display: none; }\n.fd-form-dialog-body .fd-page-head:not(:has(.fd-page-description)) { display: none; }\n.fd-form-dialog-body .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); }\n.fd-form-dialog-body .fd-side { display: none; }\n/* Search more\u2026: a search box over a list of rows. */\n.fd-search-body { display: grid; gap: 12px; align-content: start; }\n.fd-search-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: auto; max-height: min(60vh, 520px); }\n.fd-search-list .fd-option { padding: 8px 12px; }\n.fd-search-list .fd-option + .fd-option { border-block-start: 1px solid var(--fd-border); }\n.fd-search-list .fd-empty { padding: 10px 12px; color: var(--fd-muted); }\n/* A page with no sheet of its own sits on the dialog's surface, clear of its edges. */\n.fd-form-dialog-body:not(:has(.fd-sheet-layout)) { background: var(--fd-surface); padding: 16px 20px 20px; }\n.fd-form-dialog-foot { padding: 12px 16px; border-block-start: 1px solid var(--fd-border); background: var(--fd-surface); margin: 0; }\n@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } }\n";
15
15
  /** Add Fieldia's stylesheet to a document, once. */
16
16
  export declare function installStyles(document: Document): void;
package/src/lib/styles.d.ts CHANGED
@@ -11,6 +11,6 @@
11
11
  * Written with logical properties (inline/block, start/end), so a right-to-left
12
12
  * form mirrors without a second stylesheet.
13
13
  */
14
- export declare const FIELDIA_CSS = "\n/* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. */\n.fd-form, .fd-theme {\n --fd-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Noto Sans Arabic\", sans-serif;\n --fd-text: #212529;\n --fd-muted: #6b7280;\n --fd-page: #f2f3f5;\n --fd-surface: #ffffff;\n --fd-border: #cfd4da;\n --fd-border-strong: #9aa3ad;\n --fd-accent: #002855;\n --fd-accent-text: #ffffff;\n --fd-accent-soft: #e6ebf2;\n --fd-focus: #002855;\n --fd-focus-ring: none;\n --fd-error: #c62828;\n --fd-error-soft: #fdecea;\n --fd-success: #2e7d32;\n --fd-success-soft: #e8f5e9;\n --fd-warning: #8a5300;\n --fd-warning-soft: #fff4e0;\n --fd-info: #0b5cad;\n --fd-info-soft: #e7f0fb;\n --fd-radius: 0px;\n --fd-control-radius: 0px;\n --fd-pad-y: 3px;\n --fd-pad-x: 4px;\n --fd-input-border: 0 0 1px 0;\n --fd-label-weight: 600;\n --fd-gap-x: 32px;\n --fd-gap-y: 14px;\n container-type: inline-size;\n font-family: var(--fd-font);\n font-size: 14px;\n line-height: 1.45;\n color: var(--fd-text);\n -webkit-text-size-adjust: 100%;\n}\n.fd-form[data-fd-skin=\"outlined\"], .fd-theme[data-fd-skin=\"outlined\"] {\n --fd-text: rgba(0, 0, 0, 0.88);\n --fd-muted: rgba(0, 0, 0, 0.55);\n --fd-page: #f5f5f5;\n --fd-border: #d9d9d9;\n --fd-border-strong: #bfbfbf;\n --fd-accent: #1677ff;\n --fd-accent-soft: #e6f4ff;\n --fd-focus: #1677ff;\n --fd-focus-ring: 0 0 0 2px rgba(5, 145, 255, 0.12);\n --fd-error: #ff4d4f;\n --fd-error-soft: #fff2f0;\n --fd-radius: 8px;\n --fd-control-radius: 6px;\n --fd-pad-y: 4px;\n --fd-pad-x: 11px;\n --fd-input-border: 1px;\n --fd-label-weight: 400;\n --fd-gap-x: 24px;\n --fd-gap-y: 18px;\n}\n.fd-form *, .fd-form *::before, .fd-form *::after { box-sizing: border-box; }\n.fd-form [hidden] { display: none !important; }\n\n/* ---- page frame ---------------------------------------------------------- */\n.fd-page-head { display: grid; gap: 4px; margin-block-end: 20px; }\n.fd-page-title { font-size: 22px; font-weight: 650; margin: 0; line-height: 1.25; }\n.fd-page-description { color: var(--fd-muted); margin: 0; }\n\n/* ---- how wide a page goes, and Save above its sections ----------------------- */\n.fd-form[data-max-width=\"narrow\"] { --fd-page-max: 640px; }\n.fd-form[data-max-width=\"medium\"] { --fd-page-max: 900px; }\n.fd-form[data-max-width=\"wide\"] { --fd-page-max: 1180px; }\n.fd-form[data-max-width=\"full\"] { --fd-page-max: none; }\n.fd-form[data-max-width] > .fd-content:not(:has(> .fd-sheet-page)) { max-width: var(--fd-page-max); margin-inline: auto; }\n.fd-actions.fd-actions-top { margin-block-start: 0; padding-block-end: 14px; margin-block-end: 18px; border-block-end: 1px solid var(--fd-border); }\n\n/* ---- icons: drawn with lines in the colour of the words beside them ------------ */\n.fd-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }\n.fd-section-title .fd-icon, .fd-tab .fd-icon, .fd-button .fd-icon, .fd-step-title .fd-icon { margin-inline-end: 0.4em; }\n.fd-section-title .fd-icon { color: var(--fd-muted); }\n\n/* ---- fields ---------------------------------------------------------------- */\n.fd-grid {\n display: grid;\n grid-template-columns: repeat(var(--fd-columns, 1), minmax(0, 1fr));\n gap: var(--fd-gap-y) var(--fd-gap-x);\n align-items: start;\n}\n.fd-field { display: grid; gap: 4px; min-width: 0; grid-column: span min(var(--fd-span, 1), var(--fd-columns, 1)); }\n.fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }\n.fd-field.fd-required > .fd-label::after { content: \" *\"; color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::after { content: \"\"; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::before { content: \"* \"; color: var(--fd-error); }\n.fd-help { color: var(--fd-muted); font-size: 12.5px; }\n.fd-error { color: var(--fd-error); font-size: 12.5px; }\n.fd-warning {\n color: var(--fd-warning); background: var(--fd-warning-soft); font-size: 12.5px;\n padding: 3px 8px; border-radius: var(--fd-control-radius); justify-self: start;\n}\n\n/* underline: label beside the value, the way a Flectra sheet reads */\n.fd-form[data-fd-skin=\"underline\"] .fd-field {\n /* One label width for every field, so a field spanning two columns lines up with its neighbours. */\n grid-template-columns: var(--fd-label-width, 11em) minmax(0, 1fr);\n column-gap: 12px;\n align-items: baseline;\n}\n.fd-form[data-fd-skin=\"underline\"] .fd-field > .fd-label { grid-column: 1; }\n/* A table of lines needs the full width: its label sits above it. */\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] > * { grid-column: 1 !important; }\n.fd-form[data-fd-skin=\"underline\"] .fd-field > :not(.fd-label) { grid-column: 2; }\n/* A label beside every value needs room twice over: the underline skin stacks its columns sooner. */\n@container (max-width: 760px) {\n .fd-form[data-fd-skin=\"underline\"] .fd-grid { grid-template-columns: minmax(0, 1fr); }\n .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-column: auto; }\n /* A section that says how many columns it keeps here keeps them, in either skin. */\n .fd-form .fd-grid[data-columns-medium] { grid-template-columns: repeat(var(--fd-columns-medium), minmax(0, 1fr)); }\n .fd-form .fd-grid[data-columns-medium] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-medium)); }\n /* Kept side by side here, the underline skin's fields have no room for a label beside: it goes above. */\n .fd-form[data-fd-skin=\"underline\"] .fd-grid[data-columns-medium]:not([data-columns-medium=\"1\"]) .fd-field { grid-template-columns: minmax(0, 1fr); }\n .fd-form[data-fd-skin=\"underline\"] .fd-grid[data-columns-medium]:not([data-columns-medium=\"1\"]) .fd-field > * { grid-column: 1 !important; }\n}\n@container (max-width: 520px) {\n .fd-grid { grid-template-columns: minmax(0, 1fr); }\n .fd-field { grid-column: auto; }\n .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-template-columns: minmax(0, 1fr); }\n .fd-form[data-fd-skin=\"underline\"] .fd-field > * { grid-column: 1 !important; }\n /* The narrow count, or one column when only the medium one was given. */\n .fd-form .fd-grid[data-columns-medium], .fd-form .fd-grid[data-columns-narrow] { grid-template-columns: repeat(var(--fd-columns-narrow, 1), minmax(0, 1fr)); }\n .fd-form .fd-grid[data-columns-medium] > .fd-field, .fd-form .fd-grid[data-columns-narrow] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-narrow, 1)); }\n}\n\n/* ---- inputs ---------------------------------------------------------------- */\n.fd-input {\n width: 100%;\n min-width: 0;\n font: inherit;\n color: inherit;\n background: var(--fd-surface);\n border: solid var(--fd-border);\n border-width: var(--fd-input-border);\n border-radius: var(--fd-control-radius);\n padding: var(--fd-pad-y) var(--fd-pad-x);\n min-height: 30px;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-input::placeholder { color: var(--fd-muted); opacity: 0.8; }\n.fd-input:hover { border-color: var(--fd-border-strong); }\n.fd-input:focus { outline: none; border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }\n.fd-form[data-fd-skin=\"underline\"] .fd-input { background: transparent; }\n.fd-form[data-fd-skin=\"underline\"] .fd-input:focus { box-shadow: 0 1px 0 0 var(--fd-focus); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field.fd-required .fd-input { border-color: var(--fd-accent); }\n.fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[readonly] { background: rgba(0, 0, 0, 0.04); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }\n.fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[aria-invalid=\"true\"]:focus { box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06); }\n.fd-textarea { resize: vertical; min-height: 64px; }\n.fd-select { appearance: auto; }\n.fd-number { display: flex; align-items: baseline; gap: 6px; }\n.fd-number-input { font-variant-numeric: tabular-nums; }\n.fd-currency { color: var(--fd-muted); font-size: 12.5px; font-weight: 600; }\n/* With the currency after it, the amount ends right beside it. */\n.fd-currency-after > .fd-number-input { text-align: end; }\n/* A picked currency is a small box of its own beside the amount. */\n.fd-currency-picked { align-items: center; }\n.fd-currency-picked > :not(.fd-number-input) { flex: 0 0 104px; min-width: 0; }\n.fd-currency-picked > .fd-number-input { flex: 1 1 auto; min-width: 0; }\n.fd-pending { color: var(--fd-muted); font-style: italic; }\n.fd-pending:empty::before { content: \"\u2014\"; }\n\n.fd-checkbox, .fd-choice input { width: 16px; height: 16px; accent-color: var(--fd-accent); margin: 0; }\n.fd-switch {\n appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; position: relative;\n background: var(--fd-border-strong); cursor: pointer; transition: background 0.2s ease;\n}\n.fd-switch::after {\n content: \"\"; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 16px; height: 16px;\n border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25);\n}\n.fd-switch:checked { background: var(--fd-accent); }\n.fd-switch:checked::after { transform: translateX(14px); }\n[dir=\"rtl\"] .fd-switch:checked::after { transform: translateX(-14px); }\n.fd-choices { display: flex; flex-wrap: wrap; gap: 6px 18px; }\n.fd-choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }\n.fd-points { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-points button {\n font: inherit; cursor: pointer; border: 1px solid var(--fd-border); background: var(--fd-surface);\n color: var(--fd-text); border-radius: var(--fd-control-radius); min-width: 34px; height: 34px; padding: 0 8px;\n}\n.fd-points button.fd-on { background: var(--fd-accent); color: var(--fd-accent-text); border-color: var(--fd-accent); }\n.fd-rating button { border: none; background: none; font-size: 24px; color: var(--fd-border-strong); padding: 0 2px; min-width: 0; }\n.fd-rating button.fd-on { background: none; color: #f5a623; }\n.fd-points button:disabled, .fd-choice input:disabled { cursor: default; }\n.fd-form :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-form .fd-input:focus-visible { outline: none; }\n\n/* ---- pickers: many2one, many2many, reference ------------------------------ */\n.fd-combo { position: relative; display: flex; align-items: center; min-width: 0; }\n.fd-combo-input { padding-inline-end: 28px; }\n.fd-combo-clear {\n position: absolute; inset-inline-end: 4px; border: none; background: none; cursor: pointer; color: var(--fd-muted);\n font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-clear:hover { color: var(--fd-text); background: var(--fd-page); }\n/* A link that can be opened has its open button beside the clear button. */\n.fd-combo:has(> .fd-combo-open:not([hidden])) .fd-combo-input { padding-inline-end: 52px; }\n.fd-combo-open {\n position: absolute; inset-inline-end: 28px; border: none; background: none; cursor: pointer; color: var(--fd-accent);\n font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-open:hover { background: var(--fd-page); }\n.fd-listbox {\n position: absolute; inset-inline: 0; inset-block-start: calc(100% + 2px); z-index: 20; margin: 0; padding: 4px 0;\n list-style: none; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px);\n box-shadow: 0 8px 24px rgba(15, 20, 25, 0.12); max-height: 240px; overflow-y: auto;\n}\n.fd-option { padding: 6px 12px; cursor: pointer; }\n.fd-option:hover, .fd-option.fd-active { background: var(--fd-accent-soft); }\n.fd-option-create { color: var(--fd-accent); border-block-start: 1px solid var(--fd-border); }\n.fd-empty { padding: 6px 12px; color: var(--fd-muted); font-style: italic; }\n.fd-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-chips { display: contents; list-style: none; margin: 0; padding: 0; }\n.fd-chip {\n display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 10px; border-radius: 999px;\n background: var(--fd-accent-soft); color: var(--fd-text); font-size: 13px; line-height: 22px;\n}\n.fd-chip-remove { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 999px; }\n.fd-chip-remove:hover { color: var(--fd-error); }\n.fd-tags .fd-combo { flex: 1 1 140px; }\n.fd-reference { display: grid; grid-template-columns: minmax(7em, 34%) minmax(0, 1fr); gap: 8px; }\n\n/* ---- one2many lines ------------------------------------------------------- */\n.fd-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }\n/* The table scrolls sideways inside its own box; the grid around it must not grow to the table's width. */\n/* position: relative keeps the cells' hidden labels inside the scroll box; without it they widen the page. */\n.fd-lines-scroll { overflow-x: auto; min-width: 0; position: relative; }\n.fd-lines-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }\n.fd-lines-table th { text-align: start; font-weight: 600; color: var(--fd-muted); font-size: 12.5px; padding: 6px 8px; border-block-end: 1px solid var(--fd-border); white-space: nowrap; }\n.fd-lines-table td { padding: 4px 8px; border-block-end: 1px solid var(--fd-border); vertical-align: top; min-width: 7em; }\n.fd-lines-table td.fd-lines-tools, .fd-lines-table th.fd-lines-tools { width: 32px; min-width: 32px; padding-inline: 0; text-align: center; }\n.fd-lines-table .fd-input { min-height: 28px; }\n/* A yes/no cell sits level with the inputs beside it. */\n.fd-lines-table td > .fd-checkbox, .fd-lines-table td > .fd-switch { margin-block-start: 6px; }\n.fd-line-delete { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; }\n.fd-line-delete:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-lines-totals td { padding: 8px; font-weight: 600; border-block-start: 1px solid var(--fd-border); font-variant-numeric: tabular-nums; }\n.fd-lines-adds { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-self: start; }\n/* A section heads the lines below it; a note reads as a remark between them. */\n.fd-line-section td { background: var(--fd-page); }\n.fd-line-section .fd-input { font-weight: 600; }\n.fd-line-note .fd-input { font-style: italic; }\n.fd-cell-error { color: var(--fd-error); font-size: 12px; }\n.fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n\n/* ---- files, images, rich text, json ------------------------------------ */\n.fd-file { display: grid; gap: 8px; justify-items: start; padding: 6px 0; border-radius: var(--fd-control-radius); }\n.fd-file.fd-dragging { outline: 2px dashed var(--fd-accent); outline-offset: 4px; }\n.fd-file-pick { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; cursor: pointer; }\n.fd-file-chosen { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }\n.fd-file-name { font-variant-numeric: tabular-nums; }\n.fd-image-pick {\n width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { max-width: 160px; max-height: 160px; border-radius: var(--fd-control-radius); border: 1px solid var(--fd-border); object-fit: cover; background: var(--fd-page); }\n.fd-richtext { min-height: 96px; line-height: 1.5; overflow-wrap: anywhere; }\n.fd-richtext-box { display: grid; gap: 0; min-width: 0; }\n.fd-richtext-box > .fd-richtext { border-start-start-radius: 0; border-start-end-radius: 0; }\n.fd-richtext-bar {\n display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; min-width: 0;\n border: 1px solid var(--fd-border); border-block-end: none; border-start-start-radius: var(--fd-control-radius); border-start-end-radius: var(--fd-control-radius);\n background: var(--fd-page);\n}\n.fd-richtext-style { font: inherit; font-size: 12.5px; padding: 3px 6px; margin-inline-end: 4px; border: 1px solid var(--fd-border); border-radius: 4px; background: var(--fd-surface); color: var(--fd-text); }\n.fd-richtext-tool {\n display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px;\n background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 14px;\n}\n.fd-richtext-tool:hover { background: var(--fd-surface); }\n.fd-richtext-tool[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); }\n.fd-richtext-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }\n.fd-richtext-tool svg circle { fill: currentColor; stroke: none; }\n.fd-link-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--fd-border); border-block-end: none; background: var(--fd-surface); }\n.fd-link-row > .fd-input { flex: 1 1 200px; min-width: 0; }\n.fd-richtext[contenteditable=\"false\"] { background: transparent; border-color: transparent; padding-inline: 0; min-height: 0; }\n.fd-richtext p { margin: 0 0 6px; }\n.fd-code { font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; font-size: 12.5px; min-height: 96px; }\n\n/* ---- sections, tabs ---------------------------------------------------- */\n.fd-sections { display: grid; gap: 24px; }\n.fd-section { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }\n.fd-section-title { font-size: 15px; font-weight: 650; padding: 0; margin: 0; float: inline-start; width: 100%; }\n.fd-section-title + * { clear: both; }\n.fd-form[data-fd-skin=\"underline\"] .fd-section-title {\n text-transform: uppercase; letter-spacing: 0.05em; font-size: 12.5px; color: var(--fd-muted);\n border-block-end: 1px solid var(--fd-border); padding-block-end: 6px; width: 100%;\n}\n.fd-section-description { color: var(--fd-muted); margin: 0; }\n.fd-section-toggle {\n font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;\n display: inline-flex; align-items: center; gap: 8px; text-align: start;\n}\n.fd-section-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n.fd-section-chevron {\n width: 0.5em; height: 0.5em; border: solid currentColor; border-width: 0 2px 2px 0;\n transform: rotate(45deg); margin-block-start: -0.2em; transition: transform 0.15s ease; flex: none;\n}\n.fd-section-folded .fd-section-chevron { transform: rotate(-45deg); margin-block-start: 0; }\n[dir=\"rtl\"] .fd-section-folded .fd-section-chevron { transform: rotate(135deg); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-sections > .fd-section {\n background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 20px 24px;\n}\n.fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; }\n.fd-tab {\n font: inherit; background: none; border: none; cursor: pointer; padding: 8px 14px; color: var(--fd-muted);\n border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap;\n}\n.fd-tab[aria-selected=\"true\"] { color: var(--fd-accent); border-block-end-color: var(--fd-accent); font-weight: 600; }\n.fd-tabpanel { padding-block: 16px; display: grid; gap: 16px; }\n\n/* ---- buttons ---------------------------------------------------------- */\n.fd-button {\n font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; justify-content: center;\n min-height: 32px; padding: 4px 14px; border-radius: var(--fd-control-radius);\n border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text);\n}\n.fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }\n.fd-button-danger { color: var(--fd-error); border-color: var(--fd-error); }\n.fd-button-danger:hover { background: var(--fd-error); color: #fff; }\n.fd-button-link { border-color: transparent; background: none; color: var(--fd-accent); padding-inline: 4px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-button { border-radius: 3px; }\n.fd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.fd-actions-end { justify-content: flex-end; margin-block-start: 24px; }\n\n/* ---- record sheet --------------------------------------------------------- */\n.fd-sheet-page { background: var(--fd-page); padding: 0 0 32px; min-width: 0; }\n.fd-header {\n display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;\n background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); padding: 8px 16px;\n}\n.fd-statusbar { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; }\n.fd-statusbar li { display: flex; }\n.fd-statusbar button, .fd-statusbar span {\n font: inherit; font-size: 13px; border: none; background: var(--fd-page); color: var(--fd-muted);\n padding: 5px 18px 5px 22px; margin-inline-start: -6px; white-space: nowrap;\n clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);\n}\n.fd-statusbar li:first-child button, .fd-statusbar li:first-child span { margin-inline-start: 0; padding-inline-start: 14px;\n clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }\n.fd-statusbar button { cursor: pointer; }\n.fd-statusbar [aria-current=\"step\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n[dir=\"rtl\"] .fd-statusbar button, [dir=\"rtl\"] .fd-statusbar span { transform: scaleX(-1); }\n[dir=\"rtl\"] .fd-statusbar button > *, [dir=\"rtl\"] .fd-statusbar span > * { display: inline-block; transform: scaleX(-1); }\n.fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: var(--fd-page-max, 1180px); margin: 16px auto 0; padding-inline: 16px; }\n/* Save and Discard closing the sheet, when the page puts them at its foot. */\n.fd-sheet-foot { margin: 4px -28px -28px; padding: 12px 28px; border-block-start: 1px solid var(--fd-border); border-end-start-radius: inherit; border-end-end-radius: inherit; }\n.fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }\n@container (max-width: 860px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }\n.fd-card {\n position: relative; background: var(--fd-surface); border: 1px solid var(--fd-border);\n border-radius: var(--fd-radius); padding: 24px 28px 28px; display: grid; gap: 18px; min-width: 0;\n}\n.fd-ribbon-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }\n.fd-ribbon {\n position: absolute; inset-block-start: 18px; inset-inline-end: -42px; transform: rotate(45deg); width: 160px;\n text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; color: #fff; background: var(--fd-muted);\n text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none;\n}\n[dir=\"rtl\"] .fd-ribbon { transform: rotate(-45deg); }\n.fd-ribbon.fd-tone-danger { background: var(--fd-error); }\n.fd-ribbon.fd-tone-success { background: var(--fd-success); }\n.fd-ribbon.fd-tone-warning { background: #d97706; }\n.fd-ribbon.fd-tone-info { background: var(--fd-info); }\n.fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; }\n.fd-alert-message { flex: 1 1 auto; min-width: 0; }\n.fd-alert-close { border: none; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 4px; opacity: 0.75; }\n.fd-alert-close:hover { opacity: 1; }\n.fd-alert-close:focus-visible { outline: 2px solid var(--fd-focus); opacity: 1; }\n.fd-alert.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-alert.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-alert.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-alert.fd-tone-info, .fd-alert:not([class*=\"fd-tone-\"]) { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; margin: -24px -28px 0; border-block-end: 1px solid var(--fd-border); }\n.fd-stats:empty { display: none; }\n/* A visible ribbon owns the corner: stat buttons keep clear of it. */\n.fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stats { padding-inline-end: 104px; }\n.fd-stat {\n font: inherit; background: none; border: none; border-inline-start: 1px solid var(--fd-border); cursor: pointer;\n padding: 8px 18px; display: grid; justify-items: start; line-height: 1.2; color: var(--fd-text); min-width: 120px;\n}\n.fd-stat:hover { background: var(--fd-page); }\n.fd-stat:has(> .fd-icon) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }\n.fd-stat > .fd-icon { width: 22px; height: 22px; color: var(--fd-muted); }\n.fd-stat-words { display: grid; justify-items: start; }\n.fd-stat-value { font-weight: 700; font-size: 15px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n.fd-stat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-title-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }\n.fd-title { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }\n.fd-avatar { flex: none; }\n.fd-avatar > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar > * { grid-column: 1 !important; }\n.fd-avatar .fd-image-pick {\n width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { width: 88px; height: 88px; }\n.fd-avatar .fd-file-pick .fd-help { display: none; }\n.fd-avatar .fd-file-name { display: none; }\n.fd-avatar .fd-file { justify-items: center; gap: 2px; padding: 0; }\n.fd-avatar .fd-file-chosen { gap: 2px 8px; justify-content: center; font-size: 12.5px; }\n/* The title and subtitle themselves: big, their labels only for screen readers. */\n.fd-title > .fd-field .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-title > .fd-field { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-title > .fd-field > * { grid-column: 1; }\n.fd-title > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n/* Fields over and under the title: one row, each label beside its control. */\n.fd-title-above, .fd-title-below { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }\n.fd-title-above { margin-block-end: 4px; }\n.fd-title-below { margin-block-start: 6px; }\n.fd-form .fd-title-above > .fd-field, .fd-form .fd-title-below > .fd-field { display: flex; align-items: center; gap: 8px; grid-template-columns: none; }\n.fd-form .fd-title-above > .fd-field > *, .fd-form .fd-title-below > .fd-field > * { grid-column: auto !important; }\n.fd-title-above .fd-label:empty, .fd-title-below .fd-label:empty { display: none; }\n/* A choice over the title, such as Individual or Company, speaks for itself: its label is for screen readers. */\n.fd-title-above > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-title-statusbar { display: flex; }\n/* Badges over the title. */\n.fd-badges { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-badge {\n display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 10px;\n border-radius: 999px; border: 1px solid var(--fd-border); background: var(--fd-page); color: var(--fd-muted);\n}\n.fd-badge .fd-icon { width: 13px; height: 13px; }\n.fd-badge.fd-tone-info { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-badge.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-badge.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-badge.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-side { display: grid; gap: 12px; align-content: start; min-width: 0; }\n\n/* ---- wizard -------------------------------------------------------------- */\n.fd-wizard { display: grid; gap: 20px; }\n.fd-progress { display: grid; gap: 8px; }\n.fd-progress-text { color: var(--fd-muted); font-size: 13px; }\n.fd-value-text { display: block; padding-block: 6px; font-variant-numeric: tabular-nums; }\n.fd-date-pick { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }\n.fd-date-pick > .fd-input { flex: 1 1 auto; min-width: 0; }\n.fd-calendar-button {\n flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-muted);\n}\n.fd-calendar-button:hover, .fd-calendar-button[aria-expanded=\"true\"] { color: var(--fd-text); background: var(--fd-page); }\n.fd-calendar-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }\n.fd-calendar {\n position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0; z-index: 30; padding: 8px;\n background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n box-shadow: 0 8px 24px rgba(15, 20, 25, 0.14);\n}\n.fd-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; }\n.fd-calendar-head button { border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; color: var(--fd-text); }\n.fd-calendar-head button:hover { background: var(--fd-page); }\n.fd-calendar-title { font-weight: 600; }\n.fd-calendar-grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }\n.fd-calendar-grid th { font-size: 11.5px; font-weight: 600; color: var(--fd-muted); padding: 4px 0; width: 34px; text-align: center; }\n.fd-calendar-grid .fd-week { color: var(--fd-accent); font-weight: 600; border-inline-end: 1px solid var(--fd-border); }\n.fd-calendar-grid td { padding: 1px; }\n.fd-calendar-grid td button {\n width: 32px; height: 30px; border: none; border-radius: 4px; background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 13px;\n}\n.fd-calendar-grid td button:hover { background: var(--fd-accent-soft); }\n.fd-calendar-grid td button.fd-outside { color: var(--fd-muted); opacity: 0.6; }\n.fd-calendar-grid td button[aria-current=\"date\"] { box-shadow: inset 0 0 0 1px var(--fd-accent); }\n.fd-calendar-grid td button[aria-selected=\"true\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n.fd-calendar-grid td button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-properties { display: grid; gap: 8px; min-width: 0; }\n.fd-property { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }\n.fd-property > label { color: var(--fd-muted); font-size: 13px; }\n.fd-property[data-type=\"boolean\"] > :last-child { justify-self: start; }\n@container (max-width: 520px) { .fd-property { grid-template-columns: minmax(0, 1fr); gap: 4px; } }\n.fd-progressbar {\n position: relative; height: 22px; min-width: 120px; border-radius: 999px; overflow: hidden;\n background: var(--fd-page); border: 1px solid var(--fd-border); font-variant-numeric: tabular-nums;\n}\n.fd-progressbar-fill { height: 100%; background: var(--fd-success); transition: width 0.2s ease; }\n.fd-progressbar[data-tone=\"warning\"] .fd-progressbar-fill { background: #d97706; }\n.fd-progressbar[data-tone=\"danger\"] .fd-progressbar-fill { background: var(--fd-error); }\n.fd-progressbar[data-tone=\"info\"] .fd-progressbar-fill { background: var(--fd-info); }\n.fd-progressbar-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--fd-text); }\n.fd-progressbar-edit { display: flex; align-items: center; gap: 12px; min-width: 0; }\n.fd-progressbar-edit > .fd-progressbar { flex: 1 1 auto; }\n.fd-progressbar-edit > .fd-input { flex: 0 0 96px; }\n.fd-progress-bar { height: 4px; background: var(--fd-border); border-radius: 999px; overflow: hidden; }\n.fd-progress-bar > span { display: block; height: 100%; background: var(--fd-accent); transition: width 0.25s ease; }\n.fd-step { display: grid; gap: 18px; }\n.fd-step-title { font-size: 18px; font-weight: 650; margin: 0; }\n.fd-wizard-nav { display: flex; gap: 8px; justify-content: space-between; }\n/* A clickable wizard's steps: numbered, the current one filled, those behind it ticked. */\n.fd-steps-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: fd-step; }\n.fd-steps-list > li { counter-increment: fd-step; }\n.fd-step-link {\n font: inherit; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-muted); border-radius: 999px; padding: 4px 12px 4px 6px;\n}\n.fd-step-link::before {\n content: counter(fd-step); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;\n background: var(--fd-page); color: var(--fd-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;\n}\n.fd-step-link:hover { border-color: var(--fd-accent); color: var(--fd-text); }\n.fd-step-link:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-step-link.fd-step-done { color: var(--fd-text); }\n.fd-step-link.fd-step-done::before { content: \"\u2713\"; background: var(--fd-accent-soft); color: var(--fd-accent); }\n/* Skipped is not done: no tick, no colour. */\n.fd-step-link.fd-step-skipped { border-style: dashed; color: var(--fd-muted); }\n.fd-step-link.fd-step-skipped::before { content: \"\u2013\"; background: var(--fd-page); color: var(--fd-muted); }\n.fd-step-link[aria-current=\"step\"] { border-color: var(--fd-accent); color: var(--fd-accent); font-weight: 600; }\n.fd-step-link[aria-current=\"step\"]::before { content: counter(fd-step); background: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-wizard-nav .fd-spacer { flex: 1; }\n\n/* ---- text, status, dialog ------------------------------------------------- */\n.fd-text-heading { font-size: 16px; font-weight: 650; margin: 0; }\n.fd-text-paragraph { margin: 0; }\n.fd-text-note { margin: 0; color: var(--fd-muted); font-size: 13px; }\n.fd-status { min-height: 1.4em; color: var(--fd-muted); font-size: 13px; }\n.fd-status.fd-status-error { color: var(--fd-error); }\n.fd-status.fd-status-saved { color: var(--fd-success); }\n.fd-draft { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; margin-block-end: 16px;\n background: var(--fd-info-soft); border: 1px solid #a9c8ef; border-radius: var(--fd-control-radius); }\n.fd-done { padding: 40px 0; text-align: center; display: grid; gap: 12px; justify-items: center; }\n.fd-done-title { font-size: 20px; font-weight: 650; margin: 0; }\n.fd-dialog-backdrop { position: fixed; inset: 0; background: rgba(15, 20, 25, 0.45); display: grid; place-items: center; z-index: 1000; padding: 16px; }\n.fd-dialog {\n background: var(--fd-surface); color: var(--fd-text); border-radius: max(var(--fd-radius), 6px); max-width: 420px; width: 100%;\n padding: 20px 22px; display: grid; gap: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: var(--fd-font);\n}\n.fd-dialog p { margin: 0; }\n/* A page in a dialog: a head with its title and \u00D7, a body that scrolls, a foot with Discard and Save & Close. */\n.fd-form-dialog {\n display: flex; flex-direction: column; width: 100%; max-height: min(90vh, 100%); min-height: 0;\n background: var(--fd-page); color: var(--fd-text); border-radius: max(var(--fd-radius), 8px);\n box-shadow: 0 24px 64px rgba(15, 20, 25, 0.3); overflow: hidden;\n}\n.fd-form-dialog:focus { outline: none; }\n.fd-form-dialog.fd-size-small { max-width: 440px; }\n.fd-form-dialog.fd-size-medium { max-width: 760px; }\n.fd-form-dialog.fd-size-large { max-width: 1080px; }\n.fd-form-dialog-backdrop:has(> .fd-size-full) { padding: 0; }\n.fd-form-dialog.fd-size-full { max-width: none; max-height: none; height: 100%; border-radius: 0; }\n.fd-form-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--fd-border); background: var(--fd-surface); }\n.fd-form-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }\n.fd-dialog-close { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 4px; color: var(--fd-muted); }\n.fd-dialog-close:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-form-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; container-type: inline-size; }\n.fd-form-dialog-body .fd-sheet-layout { margin-block-start: 12px; }\n/* The dialog's head names the page; a record in a dialog leaves its side panel (the chatter) to the full page. */\n.fd-form-dialog-body .fd-page-title { display: none; }\n.fd-form-dialog-body .fd-page-head:not(:has(.fd-page-description)) { display: none; }\n.fd-form-dialog-body .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); }\n.fd-form-dialog-body .fd-side { display: none; }\n/* Search more\u2026: a search box over a list of rows. */\n.fd-search-body { display: grid; gap: 12px; align-content: start; }\n.fd-search-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: auto; max-height: min(60vh, 520px); }\n.fd-search-list .fd-option { padding: 8px 12px; }\n.fd-search-list .fd-option + .fd-option { border-block-start: 1px solid var(--fd-border); }\n.fd-search-list .fd-empty { padding: 10px 12px; color: var(--fd-muted); }\n/* A page with no sheet of its own sits on the dialog's surface, clear of its edges. */\n.fd-form-dialog-body:not(:has(.fd-sheet-layout)) { background: var(--fd-surface); padding: 16px 20px 20px; }\n.fd-form-dialog-foot { padding: 12px 16px; border-block-start: 1px solid var(--fd-border); background: var(--fd-surface); margin: 0; }\n@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } }\n";
14
+ export declare const FIELDIA_CSS = "\n/* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. */\n.fd-form, .fd-theme {\n --fd-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Noto Sans Arabic\", sans-serif;\n --fd-text: #212529;\n --fd-muted: #6b7280;\n --fd-page: #f2f3f5;\n --fd-surface: #ffffff;\n --fd-border: #cfd4da;\n --fd-border-strong: #9aa3ad;\n --fd-accent: #002855;\n --fd-accent-text: #ffffff;\n --fd-accent-soft: #e6ebf2;\n --fd-focus: #002855;\n --fd-focus-ring: none;\n --fd-error: #c62828;\n --fd-error-soft: #fdecea;\n --fd-success: #2e7d32;\n --fd-success-soft: #e8f5e9;\n --fd-warning: #8a5300;\n --fd-warning-soft: #fff4e0;\n --fd-info: #0b5cad;\n --fd-info-soft: #e7f0fb;\n --fd-radius: 0px;\n --fd-control-radius: 0px;\n --fd-pad-y: 3px;\n --fd-pad-x: 4px;\n --fd-input-border: 0 0 1px 0;\n --fd-label-weight: 600;\n --fd-gap-x: 32px;\n --fd-gap-y: 14px;\n container-type: inline-size;\n font-family: var(--fd-font);\n font-size: 14px;\n line-height: 1.45;\n color: var(--fd-text);\n -webkit-text-size-adjust: 100%;\n}\n.fd-form[data-fd-skin=\"outlined\"], .fd-theme[data-fd-skin=\"outlined\"] {\n --fd-text: rgba(0, 0, 0, 0.88);\n --fd-muted: rgba(0, 0, 0, 0.55);\n --fd-page: #f5f5f5;\n --fd-border: #d9d9d9;\n --fd-border-strong: #bfbfbf;\n --fd-accent: #1677ff;\n --fd-accent-soft: #e6f4ff;\n --fd-focus: #1677ff;\n --fd-focus-ring: 0 0 0 2px rgba(5, 145, 255, 0.12);\n --fd-error: #ff4d4f;\n --fd-error-soft: #fff2f0;\n --fd-radius: 8px;\n --fd-control-radius: 6px;\n --fd-pad-y: 4px;\n --fd-pad-x: 11px;\n --fd-input-border: 1px;\n --fd-label-weight: 400;\n --fd-gap-x: 24px;\n --fd-gap-y: 18px;\n}\n.fd-form *, .fd-form *::before, .fd-form *::after { box-sizing: border-box; }\n.fd-form [hidden] { display: none !important; }\n\n/* ---- page frame ---------------------------------------------------------- */\n.fd-page-head { display: grid; gap: 4px; margin-block-end: 20px; }\n.fd-page-title { font-size: 22px; font-weight: 650; margin: 0; line-height: 1.25; }\n.fd-page-description { color: var(--fd-muted); margin: 0; }\n\n/* ---- how wide a page goes, and Save above its sections ----------------------- */\n.fd-form[data-max-width=\"narrow\"] { --fd-page-max: 640px; }\n.fd-form[data-max-width=\"medium\"] { --fd-page-max: 900px; }\n.fd-form[data-max-width=\"wide\"] { --fd-page-max: 1180px; }\n.fd-form[data-max-width=\"full\"] { --fd-page-max: none; }\n.fd-form[data-max-width] > .fd-content:not(:has(> .fd-sheet-page)) { max-width: var(--fd-page-max); margin-inline: auto; }\n.fd-actions.fd-actions-top { margin-block-start: 0; padding-block-end: 14px; margin-block-end: 18px; border-block-end: 1px solid var(--fd-border); }\n\n/* ---- icons: drawn with lines in the colour of the words beside them ------------ */\n.fd-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }\n.fd-section-title .fd-icon, .fd-tab .fd-icon, .fd-button .fd-icon, .fd-step-title .fd-icon { margin-inline-end: 0.4em; }\n.fd-section-title .fd-icon { color: var(--fd-muted); }\n\n/* ---- fields ---------------------------------------------------------------- */\n.fd-grid {\n display: grid;\n grid-template-columns: repeat(var(--fd-columns, 1), minmax(0, 1fr));\n gap: var(--fd-gap-y) var(--fd-gap-x);\n align-items: start;\n}\n.fd-field { display: grid; gap: 4px; min-width: 0; grid-column: span min(var(--fd-span, 1), var(--fd-columns, 1)); }\n.fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }\n/* The \u2713 of a field filled in right, by its label. */\n.fd-valid-mark { color: var(--fd-success); width: 1em; height: 1em; margin-inline-start: 6px; vertical-align: -0.15em; stroke-width: 2.4; }\n.fd-field.fd-required > .fd-label::after { content: \" *\"; color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::after { content: \"\"; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::before { content: \"* \"; color: var(--fd-error); }\n.fd-help { color: var(--fd-muted); font-size: 12.5px; }\n.fd-error { color: var(--fd-error); font-size: 12.5px; }\n.fd-warning {\n color: var(--fd-warning); background: var(--fd-warning-soft); font-size: 12.5px;\n padding: 3px 8px; border-radius: var(--fd-control-radius); justify-self: start;\n}\n\n/* underline: label beside the value, the way a Flectra sheet reads */\n.fd-form[data-fd-skin=\"underline\"] .fd-field {\n /* One label width for every field, so a field spanning two columns lines up with its neighbours. */\n grid-template-columns: var(--fd-label-width, 11em) minmax(0, 1fr);\n column-gap: 12px;\n align-items: baseline;\n}\n.fd-form[data-fd-skin=\"underline\"] .fd-field > .fd-label { grid-column: 1; }\n/* A table of lines needs the full width: its label sits above it. */\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] > * { grid-column: 1 !important; }\n.fd-form[data-fd-skin=\"underline\"] .fd-field > :not(.fd-label) { grid-column: 2; }\n/* A label beside every value needs room twice over: the underline skin stacks its columns sooner. */\n@container (max-width: 760px) {\n .fd-form[data-fd-skin=\"underline\"] .fd-grid { grid-template-columns: minmax(0, 1fr); }\n .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-column: auto; }\n /* A section that says how many columns it keeps here keeps them, in either skin. */\n .fd-form .fd-grid[data-columns-medium] { grid-template-columns: repeat(var(--fd-columns-medium), minmax(0, 1fr)); }\n .fd-form .fd-grid[data-columns-medium] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-medium)); }\n /* Kept side by side here, the underline skin's fields have no room for a label beside: it goes above. */\n .fd-form[data-fd-skin=\"underline\"] .fd-grid[data-columns-medium]:not([data-columns-medium=\"1\"]) .fd-field { grid-template-columns: minmax(0, 1fr); }\n .fd-form[data-fd-skin=\"underline\"] .fd-grid[data-columns-medium]:not([data-columns-medium=\"1\"]) .fd-field > * { grid-column: 1 !important; }\n}\n@container (max-width: 520px) {\n .fd-grid { grid-template-columns: minmax(0, 1fr); }\n .fd-field { grid-column: auto; }\n .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-template-columns: minmax(0, 1fr); }\n .fd-form[data-fd-skin=\"underline\"] .fd-field > * { grid-column: 1 !important; }\n /* The narrow count, or one column when only the medium one was given. */\n .fd-form .fd-grid[data-columns-medium], .fd-form .fd-grid[data-columns-narrow] { grid-template-columns: repeat(var(--fd-columns-narrow, 1), minmax(0, 1fr)); }\n .fd-form .fd-grid[data-columns-medium] > .fd-field, .fd-form .fd-grid[data-columns-narrow] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-narrow, 1)); }\n}\n\n/* ---- inputs ---------------------------------------------------------------- */\n.fd-input {\n width: 100%;\n min-width: 0;\n font: inherit;\n color: inherit;\n background: var(--fd-surface);\n border: solid var(--fd-border);\n border-width: var(--fd-input-border);\n border-radius: var(--fd-control-radius);\n padding: var(--fd-pad-y) var(--fd-pad-x);\n min-height: 30px;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-input::placeholder { color: var(--fd-muted); opacity: 0.8; }\n.fd-input:hover { border-color: var(--fd-border-strong); }\n.fd-input:focus { outline: none; border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }\n.fd-form[data-fd-skin=\"underline\"] .fd-input { background: transparent; }\n.fd-form[data-fd-skin=\"underline\"] .fd-input:focus { box-shadow: 0 1px 0 0 var(--fd-focus); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field.fd-required .fd-input { border-color: var(--fd-accent); }\n.fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[readonly] { background: rgba(0, 0, 0, 0.04); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }\n/* A whole form locked reads as a record: plain values in either skin, no boxes, and no prompts to type. */\n.fd-form[data-readonly] .fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; color: var(--fd-text); }\n.fd-form[data-readonly] .fd-input::placeholder { color: transparent; }\n.fd-form[data-readonly] select.fd-input:disabled { appearance: none; background: transparent; border-color: transparent; padding-inline: 0; color: var(--fd-text); opacity: 1; }\n.fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[aria-invalid=\"true\"]:focus { box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06); }\n.fd-textarea { resize: vertical; min-height: 64px; }\n.fd-select { appearance: auto; }\n.fd-number { display: flex; align-items: baseline; gap: 6px; }\n.fd-number-input { font-variant-numeric: tabular-nums; }\n.fd-currency { color: var(--fd-muted); font-size: 12.5px; font-weight: 600; }\n/* With the currency after it, the amount ends right beside it. */\n.fd-currency-after > .fd-number-input { text-align: end; }\n/* A picked currency is a small box of its own beside the amount. */\n.fd-currency-picked { align-items: center; }\n.fd-currency-picked > :not(.fd-number-input) { flex: 0 0 104px; min-width: 0; }\n.fd-currency-picked > .fd-number-input { flex: 1 1 auto; min-width: 0; }\n.fd-pending { color: var(--fd-muted); font-style: italic; }\n.fd-pending:empty::before { content: \"\u2014\"; }\n\n.fd-checkbox, .fd-choice input { width: 16px; height: 16px; accent-color: var(--fd-accent); margin: 0; }\n.fd-switch {\n appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; position: relative;\n background: var(--fd-border-strong); cursor: pointer; transition: background 0.2s ease;\n}\n.fd-switch::after {\n content: \"\"; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 16px; height: 16px;\n border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25);\n}\n.fd-switch:checked { background: var(--fd-accent); }\n.fd-switch:checked::after { transform: translateX(14px); }\n[dir=\"rtl\"] .fd-switch:checked::after { transform: translateX(-14px); }\n.fd-choices { display: flex; flex-wrap: wrap; gap: 6px 18px; }\n.fd-choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }\n.fd-points { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-points button {\n font: inherit; cursor: pointer; border: 1px solid var(--fd-border); background: var(--fd-surface);\n color: var(--fd-text); border-radius: var(--fd-control-radius); min-width: 34px; height: 34px; padding: 0 8px;\n}\n.fd-points button.fd-on { background: var(--fd-accent); color: var(--fd-accent-text); border-color: var(--fd-accent); }\n.fd-rating button { border: none; background: none; font-size: 24px; color: var(--fd-border-strong); padding: 0 2px; min-width: 0; }\n.fd-rating button.fd-on { background: none; color: #f5a623; }\n.fd-points button:disabled, .fd-choice input:disabled { cursor: default; }\n.fd-form :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-form .fd-input:focus-visible { outline: none; }\n\n/* ---- pickers: many2one, many2many, reference ------------------------------ */\n.fd-combo { position: relative; display: flex; align-items: center; min-width: 0; }\n.fd-combo-input { padding-inline-end: 28px; }\n.fd-combo-clear {\n position: absolute; inset-inline-end: 4px; border: none; background: none; cursor: pointer; color: var(--fd-muted);\n font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-clear:hover { color: var(--fd-text); background: var(--fd-page); }\n/* A link that can be opened has its open button beside the clear button. */\n.fd-combo:has(> .fd-combo-open:not([hidden])) .fd-combo-input { padding-inline-end: 52px; }\n.fd-combo-open {\n position: absolute; inset-inline-end: 28px; border: none; background: none; cursor: pointer; color: var(--fd-accent);\n font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-open:hover { background: var(--fd-page); }\n.fd-listbox {\n position: absolute; inset-inline: 0; inset-block-start: calc(100% + 2px); z-index: 20; margin: 0; padding: 4px 0;\n list-style: none; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px);\n box-shadow: 0 8px 24px rgba(15, 20, 25, 0.12); max-height: 240px; overflow-y: auto;\n}\n.fd-option { padding: 6px 12px; cursor: pointer; }\n.fd-option:hover, .fd-option.fd-active { background: var(--fd-accent-soft); }\n.fd-option-create { color: var(--fd-accent); border-block-start: 1px solid var(--fd-border); }\n.fd-empty { padding: 6px 12px; color: var(--fd-muted); font-style: italic; }\n.fd-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-chips { display: contents; list-style: none; margin: 0; padding: 0; }\n.fd-chip {\n display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 10px; border-radius: 999px;\n background: var(--fd-accent-soft); color: var(--fd-text); font-size: 13px; line-height: 22px;\n}\n.fd-chip-remove { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 999px; }\n.fd-chip-remove:hover { color: var(--fd-error); }\n.fd-tags .fd-combo { flex: 1 1 140px; }\n.fd-reference { display: grid; grid-template-columns: minmax(7em, 34%) minmax(0, 1fr); gap: 8px; }\n\n/* ---- one2many lines ------------------------------------------------------- */\n.fd-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }\n/* The table scrolls sideways inside its own box; the grid around it must not grow to the table's width. */\n/* position: relative keeps the cells' hidden labels inside the scroll box; without it they widen the page. */\n.fd-lines-scroll { overflow-x: auto; min-width: 0; position: relative; }\n.fd-lines-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }\n.fd-lines-table th { text-align: start; font-weight: 600; color: var(--fd-muted); font-size: 12.5px; padding: 6px 8px; border-block-end: 1px solid var(--fd-border); white-space: nowrap; }\n.fd-lines-table td { padding: 4px 8px; border-block-end: 1px solid var(--fd-border); vertical-align: top; min-width: 7em; }\n.fd-lines-table td.fd-lines-tools, .fd-lines-table th.fd-lines-tools { width: 32px; min-width: 32px; padding-inline: 0; text-align: center; }\n.fd-lines-table .fd-input { min-height: 28px; }\n/* A yes/no cell sits level with the inputs beside it. */\n.fd-lines-table td > .fd-checkbox, .fd-lines-table td > .fd-switch { margin-block-start: 6px; }\n.fd-line-delete { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; }\n.fd-line-delete:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-lines-totals td { padding: 8px; font-weight: 600; border-block-start: 1px solid var(--fd-border); font-variant-numeric: tabular-nums; }\n.fd-lines-adds { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-self: start; }\n/* A section heads the lines below it; a note reads as a remark between them. */\n.fd-line-section td { background: var(--fd-page); }\n.fd-line-section .fd-input { font-weight: 600; }\n.fd-line-note .fd-input { font-style: italic; }\n.fd-cell-error { color: var(--fd-error); font-size: 12px; }\n.fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n\n/* ---- files, images, rich text, json ------------------------------------ */\n.fd-file { display: grid; gap: 8px; justify-items: start; padding: 6px 0; border-radius: var(--fd-control-radius); }\n.fd-file.fd-dragging { outline: 2px dashed var(--fd-accent); outline-offset: 4px; }\n.fd-file-pick { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; cursor: pointer; }\n.fd-file-chosen { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }\n.fd-file-name { font-variant-numeric: tabular-nums; }\n.fd-image-pick {\n width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { max-width: 160px; max-height: 160px; border-radius: var(--fd-control-radius); border: 1px solid var(--fd-border); object-fit: cover; background: var(--fd-page); }\n.fd-richtext { min-height: 96px; line-height: 1.5; overflow-wrap: anywhere; }\n.fd-richtext-box { display: grid; gap: 0; min-width: 0; }\n.fd-richtext-box > .fd-richtext { border-start-start-radius: 0; border-start-end-radius: 0; }\n.fd-richtext-bar {\n display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; min-width: 0;\n border: 1px solid var(--fd-border); border-block-end: none; border-start-start-radius: var(--fd-control-radius); border-start-end-radius: var(--fd-control-radius);\n background: var(--fd-page);\n}\n.fd-richtext-style { font: inherit; font-size: 12.5px; padding: 3px 6px; margin-inline-end: 4px; border: 1px solid var(--fd-border); border-radius: 4px; background: var(--fd-surface); color: var(--fd-text); }\n.fd-richtext-tool {\n display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px;\n background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 14px;\n}\n.fd-richtext-tool:hover { background: var(--fd-surface); }\n.fd-richtext-tool[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); }\n.fd-richtext-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }\n.fd-richtext-tool svg circle { fill: currentColor; stroke: none; }\n.fd-link-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--fd-border); border-block-end: none; background: var(--fd-surface); }\n.fd-link-row > .fd-input { flex: 1 1 200px; min-width: 0; }\n.fd-richtext[contenteditable=\"false\"] { background: transparent; border-color: transparent; padding-inline: 0; min-height: 0; }\n.fd-richtext p { margin: 0 0 6px; }\n.fd-code { font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; font-size: 12.5px; min-height: 96px; }\n\n/* ---- sections, tabs ---------------------------------------------------- */\n.fd-sections { display: grid; gap: 24px; }\n.fd-section { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }\n.fd-section-title { font-size: 15px; font-weight: 650; padding: 0; margin: 0; float: inline-start; width: 100%; }\n.fd-section-title + * { clear: both; }\n.fd-form[data-fd-skin=\"underline\"] .fd-section-title {\n text-transform: uppercase; letter-spacing: 0.05em; font-size: 12.5px; color: var(--fd-muted);\n border-block-end: 1px solid var(--fd-border); padding-block-end: 6px; width: 100%;\n}\n.fd-section-description { color: var(--fd-muted); margin: 0; }\n.fd-section-toggle {\n font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;\n display: inline-flex; align-items: center; gap: 8px; text-align: start;\n}\n.fd-section-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n.fd-section-chevron {\n width: 0.5em; height: 0.5em; border: solid currentColor; border-width: 0 2px 2px 0;\n transform: rotate(45deg); margin-block-start: -0.2em; transition: transform 0.15s ease; flex: none;\n}\n.fd-section-folded .fd-section-chevron { transform: rotate(-45deg); margin-block-start: 0; }\n[dir=\"rtl\"] .fd-section-folded .fd-section-chevron { transform: rotate(135deg); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-sections > .fd-section {\n background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 20px 24px;\n}\n.fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; }\n.fd-tab {\n font: inherit; background: none; border: none; cursor: pointer; padding: 8px 14px; color: var(--fd-muted);\n border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap;\n}\n.fd-tab[aria-selected=\"true\"] { color: var(--fd-accent); border-block-end-color: var(--fd-accent); font-weight: 600; }\n.fd-tabpanel { padding-block: 16px; display: grid; gap: 16px; }\n\n/* ---- buttons ---------------------------------------------------------- */\n.fd-button {\n font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; justify-content: center;\n min-height: 32px; padding: 4px 14px; border-radius: var(--fd-control-radius);\n border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text);\n}\n.fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }\n.fd-button-danger { color: var(--fd-error); border-color: var(--fd-error); }\n.fd-button-danger:hover { background: var(--fd-error); color: #fff; }\n.fd-button-link { border-color: transparent; background: none; color: var(--fd-accent); padding-inline: 4px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-button { border-radius: 3px; }\n.fd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.fd-actions-end { justify-content: flex-end; margin-block-start: 24px; }\n\n/* ---- record sheet --------------------------------------------------------- */\n.fd-sheet-page { background: var(--fd-page); padding: 0 0 32px; min-width: 0; }\n.fd-header {\n display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;\n background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); padding: 8px 16px;\n}\n.fd-statusbar { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; }\n.fd-statusbar li { display: flex; }\n.fd-statusbar button, .fd-statusbar span {\n font: inherit; font-size: 13px; border: none; background: var(--fd-page); color: var(--fd-muted);\n padding: 5px 18px 5px 22px; margin-inline-start: -6px; white-space: nowrap;\n clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);\n}\n.fd-statusbar li:first-child button, .fd-statusbar li:first-child span { margin-inline-start: 0; padding-inline-start: 14px;\n clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }\n.fd-statusbar button { cursor: pointer; }\n.fd-statusbar [aria-current=\"step\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n[dir=\"rtl\"] .fd-statusbar button, [dir=\"rtl\"] .fd-statusbar span { transform: scaleX(-1); }\n[dir=\"rtl\"] .fd-statusbar button > *, [dir=\"rtl\"] .fd-statusbar span > * { display: inline-block; transform: scaleX(-1); }\n.fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: var(--fd-page-max, 1180px); margin: 16px auto 0; padding-inline: 16px; }\n/* The sheet keeps its own height: a long side panel beside it must not stretch it. */\n.fd-sheet-layout { align-items: start; }\n/* Save and Discard closing the sheet, when the page puts them at its foot. */\n.fd-sheet-foot { margin: 4px -28px -28px; padding: 12px 28px; border-block-start: 1px solid var(--fd-border); border-end-start-radius: inherit; border-end-end-radius: inherit; }\n.fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }\n@container (max-width: 860px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }\n.fd-card {\n position: relative; background: var(--fd-surface); border: 1px solid var(--fd-border);\n border-radius: var(--fd-radius); padding: 24px 28px 28px; display: grid; gap: 18px; min-width: 0;\n}\n.fd-ribbon-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }\n.fd-ribbon {\n position: absolute; inset-block-start: 18px; inset-inline-end: -42px; transform: rotate(45deg); width: 160px;\n text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; color: #fff; background: var(--fd-muted);\n text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none;\n}\n[dir=\"rtl\"] .fd-ribbon { transform: rotate(-45deg); }\n.fd-ribbon.fd-tone-danger { background: var(--fd-error); }\n.fd-ribbon.fd-tone-success { background: var(--fd-success); }\n.fd-ribbon.fd-tone-warning { background: #d97706; }\n.fd-ribbon.fd-tone-info { background: var(--fd-info); }\n.fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; }\n.fd-alert-message { flex: 1 1 auto; min-width: 0; }\n.fd-alert-close { border: none; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 4px; opacity: 0.75; }\n.fd-alert-close:hover { opacity: 1; }\n.fd-alert-close:focus-visible { outline: 2px solid var(--fd-focus); opacity: 1; }\n.fd-alert.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-alert.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-alert.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-alert.fd-tone-info, .fd-alert:not([class*=\"fd-tone-\"]) { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; margin: -24px -28px 0; border-block-end: 1px solid var(--fd-border); }\n.fd-stats:empty { display: none; }\n/* A visible ribbon owns the corner: stat buttons keep clear of it. */\n.fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stats { padding-inline-end: 104px; }\n.fd-stat {\n font: inherit; background: none; border: none; border-inline-start: 1px solid var(--fd-border); cursor: pointer;\n padding: 8px 18px; display: grid; justify-items: start; line-height: 1.2; color: var(--fd-text); min-width: 120px;\n}\n.fd-stat:hover { background: var(--fd-page); }\n.fd-stat:has(> .fd-icon) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }\n.fd-stat > .fd-icon { width: 22px; height: 22px; color: var(--fd-muted); }\n.fd-stat-words { display: grid; justify-items: start; }\n.fd-stat-value { font-weight: 700; font-size: 15px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n.fd-stat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-title-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }\n.fd-title { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }\n.fd-avatar { flex: none; }\n.fd-avatar > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar > * { grid-column: 1 !important; }\n.fd-avatar .fd-image-pick {\n width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { width: 88px; height: 88px; }\n.fd-avatar .fd-file-pick .fd-help { display: none; }\n.fd-avatar .fd-file-name { display: none; }\n.fd-avatar .fd-file { justify-items: center; gap: 2px; padding: 0; }\n.fd-avatar .fd-file-chosen { gap: 2px 8px; justify-content: center; font-size: 12.5px; }\n/* The title and subtitle themselves: big, their labels only for screen readers. */\n.fd-title > .fd-field .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-title > .fd-field { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-title > .fd-field > * { grid-column: 1; }\n.fd-title > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n/* Fields over and under the title: one row, each label beside its control. */\n.fd-title-above, .fd-title-below { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }\n.fd-title-above { margin-block-end: 4px; }\n.fd-title-below { margin-block-start: 6px; }\n.fd-form .fd-title-above > .fd-field, .fd-form .fd-title-below > .fd-field { display: flex; align-items: center; gap: 8px; grid-template-columns: none; }\n.fd-form .fd-title-above > .fd-field > *, .fd-form .fd-title-below > .fd-field > * { grid-column: auto !important; }\n.fd-title-above .fd-label:empty, .fd-title-below .fd-label:empty { display: none; }\n/* A choice over the title, such as Individual or Company, speaks for itself: its label is for screen readers. */\n.fd-title-above > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-title-statusbar { display: flex; }\n/* Badges over the title. */\n.fd-badges { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-badge {\n display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 10px;\n border-radius: 999px; border: 1px solid var(--fd-border); background: var(--fd-page); color: var(--fd-muted);\n}\n.fd-badge .fd-icon { width: 13px; height: 13px; }\n.fd-badge.fd-tone-info { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-badge.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-badge.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-badge.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-side { display: grid; gap: 12px; align-content: start; min-width: 0; }\n\n/* ---- wizard -------------------------------------------------------------- */\n.fd-wizard { display: grid; gap: 20px; }\n.fd-progress { display: grid; gap: 8px; }\n.fd-progress-text { color: var(--fd-muted); font-size: 13px; }\n.fd-value-text { display: block; padding-block: 6px; font-variant-numeric: tabular-nums; }\n.fd-date-pick { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }\n.fd-date-pick > .fd-input { flex: 1 1 auto; min-width: 0; }\n.fd-calendar-button {\n flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-muted);\n}\n.fd-calendar-button:hover, .fd-calendar-button[aria-expanded=\"true\"] { color: var(--fd-text); background: var(--fd-page); }\n.fd-calendar-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }\n.fd-calendar {\n position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0; z-index: 30; padding: 8px;\n background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n box-shadow: 0 8px 24px rgba(15, 20, 25, 0.14);\n}\n.fd-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; }\n.fd-calendar-head button { border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; color: var(--fd-text); }\n.fd-calendar-head button:hover { background: var(--fd-page); }\n.fd-calendar-title { font-weight: 600; }\n.fd-calendar-grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }\n.fd-calendar-grid th { font-size: 11.5px; font-weight: 600; color: var(--fd-muted); padding: 4px 0; width: 34px; text-align: center; }\n.fd-calendar-grid .fd-week { color: var(--fd-accent); font-weight: 600; border-inline-end: 1px solid var(--fd-border); }\n.fd-calendar-grid td { padding: 1px; }\n.fd-calendar-grid td button {\n width: 32px; height: 30px; border: none; border-radius: 4px; background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 13px;\n}\n.fd-calendar-grid td button:hover { background: var(--fd-accent-soft); }\n.fd-calendar-grid td button.fd-outside { color: var(--fd-muted); opacity: 0.6; }\n.fd-calendar-grid td button[aria-current=\"date\"] { box-shadow: inset 0 0 0 1px var(--fd-accent); }\n.fd-calendar-grid td button[aria-selected=\"true\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n.fd-calendar-grid td button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-properties { display: grid; gap: 8px; min-width: 0; }\n.fd-property { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }\n.fd-property > label { color: var(--fd-muted); font-size: 13px; }\n.fd-property[data-type=\"boolean\"] > :last-child { justify-self: start; }\n@container (max-width: 520px) { .fd-property { grid-template-columns: minmax(0, 1fr); gap: 4px; } }\n.fd-progressbar {\n position: relative; height: 22px; min-width: 120px; border-radius: 999px; overflow: hidden;\n background: var(--fd-page); border: 1px solid var(--fd-border); font-variant-numeric: tabular-nums;\n}\n.fd-progressbar-fill { height: 100%; background: var(--fd-success); transition: width 0.2s ease; }\n.fd-progressbar[data-tone=\"warning\"] .fd-progressbar-fill { background: #d97706; }\n.fd-progressbar[data-tone=\"danger\"] .fd-progressbar-fill { background: var(--fd-error); }\n.fd-progressbar[data-tone=\"info\"] .fd-progressbar-fill { background: var(--fd-info); }\n.fd-progressbar-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--fd-text); }\n.fd-progressbar-edit { display: flex; align-items: center; gap: 12px; min-width: 0; }\n.fd-progressbar-edit > .fd-progressbar { flex: 1 1 auto; }\n.fd-progressbar-edit > .fd-input { flex: 0 0 96px; }\n.fd-progress-bar { height: 4px; background: var(--fd-border); border-radius: 999px; overflow: hidden; }\n.fd-progress-bar > span { display: block; height: 100%; background: var(--fd-accent); transition: width 0.25s ease; }\n.fd-step { display: grid; gap: 18px; }\n.fd-step-title { font-size: 18px; font-weight: 650; margin: 0; }\n.fd-wizard-nav { display: flex; gap: 8px; justify-content: space-between; }\n/* A clickable wizard's steps: numbered, the current one filled, those behind it ticked. */\n.fd-steps-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: fd-step; }\n.fd-steps-list > li { counter-increment: fd-step; }\n.fd-step-link {\n font: inherit; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-muted); border-radius: 999px; padding: 4px 12px 4px 6px;\n}\n.fd-step-link::before {\n content: counter(fd-step); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;\n background: var(--fd-page); color: var(--fd-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;\n}\n.fd-step-link:hover { border-color: var(--fd-accent); color: var(--fd-text); }\n.fd-step-link:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-step-link.fd-step-done { color: var(--fd-text); }\n.fd-step-link.fd-step-done::before { content: \"\u2713\"; background: var(--fd-accent-soft); color: var(--fd-accent); }\n/* Skipped is not done: no tick, no colour. */\n.fd-step-link.fd-step-skipped { border-style: dashed; color: var(--fd-muted); }\n.fd-step-link.fd-step-skipped::before { content: \"\u2013\"; background: var(--fd-page); color: var(--fd-muted); }\n.fd-step-link[aria-current=\"step\"] { border-color: var(--fd-accent); color: var(--fd-accent); font-weight: 600; }\n.fd-step-link[aria-current=\"step\"]::before { content: counter(fd-step); background: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-wizard-nav .fd-spacer { flex: 1; }\n\n/* ---- text, status, dialog ------------------------------------------------- */\n.fd-text-heading { font-size: 16px; font-weight: 650; margin: 0; }\n.fd-text-paragraph { margin: 0; }\n.fd-text-note { margin: 0; color: var(--fd-muted); font-size: 13px; }\n.fd-status { min-height: 1.4em; color: var(--fd-muted); font-size: 13px; }\n.fd-status-box { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }\n.fd-status-box .fd-retry { font-size: 13px; }\n/* Said to screen readers only. */\n.fd-announce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n/* The server out of reach: a banner over the page, with Retry. */\n.fd-banner {\n display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; margin-block-end: 16px;\n border: 1px solid #f0c47a; border-radius: var(--fd-control-radius); background: var(--fd-warning-soft); color: var(--fd-warning); font-size: 13.5px;\n}\n.fd-banner-text { flex: 1 1 16em; min-width: 0; }\n.fd-content > .fd-banner:has(+ .fd-draft + .fd-sheet-page), .fd-content > .fd-banner:has(+ .fd-sheet-page) { margin: 12px 16px 0; }\n/* The status as a toast in a corner, or as a bar across the top. */\n.fd-status-box.fd-toast {\n position: fixed; inset-block-end: max(20px, env(safe-area-inset-bottom, 0px)); inset-inline-end: 20px; z-index: 900;\n padding: 10px 16px; border-radius: 8px; background: var(--fd-text); box-shadow: 0 8px 24px rgba(15, 20, 25, 0.25);\n}\n/* Light words on the dark toast, saved or not: the status's own colours are for a light ground. */\n.fd-toast .fd-status, .fd-toast .fd-status.fd-status-saved, .fd-toast .fd-status.fd-status-error { color: var(--fd-surface); font-size: 13.5px; min-height: 0; }\n.fd-toast .fd-retry { color: var(--fd-surface); text-decoration: underline; }\n.fd-toast:has(.fd-status-error) { background: var(--fd-error); }\n.fd-status-box.fd-status-bar { display: flex; justify-content: center; min-height: 32px; padding: 6px 16px; background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); }\n.fd-status-bar .fd-status-error { color: var(--fd-error); }\n.fd-status.fd-status-error { color: var(--fd-error); }\n.fd-status.fd-status-saved { color: var(--fd-success); }\n.fd-draft { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; margin-block-end: 16px;\n background: var(--fd-info-soft); border: 1px solid #a9c8ef; border-radius: var(--fd-control-radius); }\n.fd-done { padding: 40px 0; text-align: center; display: grid; gap: 12px; justify-items: center; }\n.fd-done-title { font-size: 20px; font-weight: 650; margin: 0; }\n.fd-dialog-backdrop { position: fixed; inset: 0; background: rgba(15, 20, 25, 0.45); display: grid; place-items: center; z-index: 1000; padding: 16px; }\n.fd-dialog {\n background: var(--fd-surface); color: var(--fd-text); border-radius: max(var(--fd-radius), 6px); max-width: 420px; width: 100%;\n padding: 20px 22px; display: grid; gap: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: var(--fd-font);\n}\n.fd-dialog p { margin: 0; }\n/* A page in a dialog: a head with its title and \u00D7, a body that scrolls, a foot with Discard and Save & Close. */\n.fd-form-dialog {\n display: flex; flex-direction: column; width: 100%; max-height: min(90vh, 100%); min-height: 0;\n background: var(--fd-page); color: var(--fd-text); border-radius: max(var(--fd-radius), 8px);\n box-shadow: 0 24px 64px rgba(15, 20, 25, 0.3); overflow: hidden;\n}\n.fd-form-dialog:focus { outline: none; }\n.fd-form-dialog.fd-size-small { max-width: 440px; }\n.fd-form-dialog.fd-size-medium { max-width: 760px; }\n.fd-form-dialog.fd-size-large { max-width: 1080px; }\n.fd-form-dialog-backdrop:has(> .fd-size-full) { padding: 0; }\n.fd-form-dialog.fd-size-full { max-width: none; max-height: none; height: 100%; border-radius: 0; }\n.fd-form-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--fd-border); background: var(--fd-surface); }\n.fd-form-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }\n.fd-dialog-close { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 4px; color: var(--fd-muted); }\n.fd-dialog-close:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-form-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; container-type: inline-size; }\n.fd-form-dialog-body .fd-sheet-layout { margin-block-start: 12px; }\n/* The dialog's head names the page; a record in a dialog leaves its side panel (the chatter) to the full page. */\n.fd-form-dialog-body .fd-page-title { display: none; }\n.fd-form-dialog-body .fd-page-head:not(:has(.fd-page-description)) { display: none; }\n.fd-form-dialog-body .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); }\n.fd-form-dialog-body .fd-side { display: none; }\n/* Search more\u2026: a search box over a list of rows. */\n.fd-search-body { display: grid; gap: 12px; align-content: start; }\n.fd-search-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: auto; max-height: min(60vh, 520px); }\n.fd-search-list .fd-option { padding: 8px 12px; }\n.fd-search-list .fd-option + .fd-option { border-block-start: 1px solid var(--fd-border); }\n.fd-search-list .fd-empty { padding: 10px 12px; color: var(--fd-muted); }\n/* A page with no sheet of its own sits on the dialog's surface, clear of its edges. */\n.fd-form-dialog-body:not(:has(.fd-sheet-layout)) { background: var(--fd-surface); padding: 16px 20px 20px; }\n.fd-form-dialog-foot { padding: 12px 16px; border-block-start: 1px solid var(--fd-border); background: var(--fd-surface); margin: 0; }\n@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } }\n";
15
15
  /** Add Fieldia's stylesheet to a document, once. */
16
16
  export declare function installStyles(document: Document): void;
package/src/lib/styles.js CHANGED
@@ -104,6 +104,8 @@ exports.FIELDIA_CSS = `
104
104
  }
105
105
  .fd-field { display: grid; gap: 4px; min-width: 0; grid-column: span min(var(--fd-span, 1), var(--fd-columns, 1)); }
106
106
  .fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }
107
+ /* The ✓ of a field filled in right, by its label. */
108
+ .fd-valid-mark { color: var(--fd-success); width: 1em; height: 1em; margin-inline-start: 6px; vertical-align: -0.15em; stroke-width: 2.4; }
107
109
  .fd-field.fd-required > .fd-label::after { content: " *"; color: var(--fd-error); }
108
110
  .fd-form[data-fd-skin="outlined"] .fd-field.fd-required > .fd-label::after { content: ""; }
109
111
  .fd-form[data-fd-skin="outlined"] .fd-field.fd-required > .fd-label::before { content: "* "; color: var(--fd-error); }
@@ -169,6 +171,10 @@ exports.FIELDIA_CSS = `
169
171
  .fd-form[data-fd-skin="underline"] .fd-field.fd-required .fd-input { border-color: var(--fd-accent); }
170
172
  .fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; }
171
173
  .fd-form[data-fd-skin="outlined"] .fd-input[readonly] { background: rgba(0, 0, 0, 0.04); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }
174
+ /* A whole form locked reads as a record: plain values in either skin, no boxes, and no prompts to type. */
175
+ .fd-form[data-readonly] .fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; color: var(--fd-text); }
176
+ .fd-form[data-readonly] .fd-input::placeholder { color: transparent; }
177
+ .fd-form[data-readonly] select.fd-input:disabled { appearance: none; background: transparent; border-color: transparent; padding-inline: 0; color: var(--fd-text); opacity: 1; }
172
178
  .fd-input[aria-invalid="true"] { border-color: var(--fd-error); }
173
179
  .fd-form[data-fd-skin="outlined"] .fd-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06); }
174
180
  .fd-textarea { resize: vertical; min-height: 64px; }
@@ -374,9 +380,11 @@ exports.FIELDIA_CSS = `
374
380
  [dir="rtl"] .fd-statusbar button, [dir="rtl"] .fd-statusbar span { transform: scaleX(-1); }
375
381
  [dir="rtl"] .fd-statusbar button > *, [dir="rtl"] .fd-statusbar span > * { display: inline-block; transform: scaleX(-1); }
376
382
  .fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: var(--fd-page-max, 1180px); margin: 16px auto 0; padding-inline: 16px; }
383
+ /* The sheet keeps its own height: a long side panel beside it must not stretch it. */
384
+ .fd-sheet-layout { align-items: start; }
377
385
  /* Save and Discard closing the sheet, when the page puts them at its foot. */
378
386
  .fd-sheet-foot { margin: 4px -28px -28px; padding: 12px 28px; border-block-start: 1px solid var(--fd-border); border-end-start-radius: inherit; border-end-end-radius: inherit; }
379
- .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
387
+ .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
380
388
  @container (max-width: 860px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }
381
389
  .fd-card {
382
390
  position: relative; background: var(--fd-surface); border: 1px solid var(--fd-border);
@@ -545,6 +553,28 @@ exports.FIELDIA_CSS = `
545
553
  .fd-text-paragraph { margin: 0; }
546
554
  .fd-text-note { margin: 0; color: var(--fd-muted); font-size: 13px; }
547
555
  .fd-status { min-height: 1.4em; color: var(--fd-muted); font-size: 13px; }
556
+ .fd-status-box { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
557
+ .fd-status-box .fd-retry { font-size: 13px; }
558
+ /* Said to screen readers only. */
559
+ .fd-announce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
560
+ /* The server out of reach: a banner over the page, with Retry. */
561
+ .fd-banner {
562
+ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; margin-block-end: 16px;
563
+ border: 1px solid #f0c47a; border-radius: var(--fd-control-radius); background: var(--fd-warning-soft); color: var(--fd-warning); font-size: 13.5px;
564
+ }
565
+ .fd-banner-text { flex: 1 1 16em; min-width: 0; }
566
+ .fd-content > .fd-banner:has(+ .fd-draft + .fd-sheet-page), .fd-content > .fd-banner:has(+ .fd-sheet-page) { margin: 12px 16px 0; }
567
+ /* The status as a toast in a corner, or as a bar across the top. */
568
+ .fd-status-box.fd-toast {
569
+ position: fixed; inset-block-end: max(20px, env(safe-area-inset-bottom, 0px)); inset-inline-end: 20px; z-index: 900;
570
+ padding: 10px 16px; border-radius: 8px; background: var(--fd-text); box-shadow: 0 8px 24px rgba(15, 20, 25, 0.25);
571
+ }
572
+ /* Light words on the dark toast, saved or not: the status's own colours are for a light ground. */
573
+ .fd-toast .fd-status, .fd-toast .fd-status.fd-status-saved, .fd-toast .fd-status.fd-status-error { color: var(--fd-surface); font-size: 13.5px; min-height: 0; }
574
+ .fd-toast .fd-retry { color: var(--fd-surface); text-decoration: underline; }
575
+ .fd-toast:has(.fd-status-error) { background: var(--fd-error); }
576
+ .fd-status-box.fd-status-bar { display: flex; justify-content: center; min-height: 32px; padding: 6px 16px; background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); }
577
+ .fd-status-bar .fd-status-error { color: var(--fd-error); }
548
578
  .fd-status.fd-status-error { color: var(--fd-error); }
549
579
  .fd-status.fd-status-saved { color: var(--fd-success); }
550
580
  .fd-draft { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; margin-block-end: 16px;
package/src/lib/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles.ts"],"names":[],"mappings":";;;AAilBA,sCAMC;AAvlBD;;;;;;;;;;;;GAYG;AACU,QAAA,WAAW,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+jBpC,CAAC;AAEF,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC,oDAAoD;AACpD,SAAgB,aAAa,CAAC,QAAkB;IAC9C,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,mBAAW,CAAC;IAChC,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles.ts"],"names":[],"mappings":";;;AA+mBA,sCAMC;AArnBD;;;;;;;;;;;;GAYG;AACU,QAAA,WAAW,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6lBpC,CAAC;AAEF,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC,oDAAoD;AACpD,SAAgB,aAAa,CAAC,QAAkB;IAC9C,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,mBAAW,CAAC;IAChC,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}
package/src/lib/styles.mjs CHANGED
@@ -100,6 +100,8 @@ export const FIELDIA_CSS = /* css */ `
100
100
  }
101
101
  .fd-field { display: grid; gap: 4px; min-width: 0; grid-column: span min(var(--fd-span, 1), var(--fd-columns, 1)); }
102
102
  .fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }
103
+ /* The ✓ of a field filled in right, by its label. */
104
+ .fd-valid-mark { color: var(--fd-success); width: 1em; height: 1em; margin-inline-start: 6px; vertical-align: -0.15em; stroke-width: 2.4; }
103
105
  .fd-field.fd-required > .fd-label::after { content: " *"; color: var(--fd-error); }
104
106
  .fd-form[data-fd-skin="outlined"] .fd-field.fd-required > .fd-label::after { content: ""; }
105
107
  .fd-form[data-fd-skin="outlined"] .fd-field.fd-required > .fd-label::before { content: "* "; color: var(--fd-error); }
@@ -165,6 +167,10 @@ export const FIELDIA_CSS = /* css */ `
165
167
  .fd-form[data-fd-skin="underline"] .fd-field.fd-required .fd-input { border-color: var(--fd-accent); }
166
168
  .fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; }
167
169
  .fd-form[data-fd-skin="outlined"] .fd-input[readonly] { background: rgba(0, 0, 0, 0.04); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }
170
+ /* A whole form locked reads as a record: plain values in either skin, no boxes, and no prompts to type. */
171
+ .fd-form[data-readonly] .fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; color: var(--fd-text); }
172
+ .fd-form[data-readonly] .fd-input::placeholder { color: transparent; }
173
+ .fd-form[data-readonly] select.fd-input:disabled { appearance: none; background: transparent; border-color: transparent; padding-inline: 0; color: var(--fd-text); opacity: 1; }
168
174
  .fd-input[aria-invalid="true"] { border-color: var(--fd-error); }
169
175
  .fd-form[data-fd-skin="outlined"] .fd-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06); }
170
176
  .fd-textarea { resize: vertical; min-height: 64px; }
@@ -370,9 +376,11 @@ export const FIELDIA_CSS = /* css */ `
370
376
  [dir="rtl"] .fd-statusbar button, [dir="rtl"] .fd-statusbar span { transform: scaleX(-1); }
371
377
  [dir="rtl"] .fd-statusbar button > *, [dir="rtl"] .fd-statusbar span > * { display: inline-block; transform: scaleX(-1); }
372
378
  .fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: var(--fd-page-max, 1180px); margin: 16px auto 0; padding-inline: 16px; }
379
+ /* The sheet keeps its own height: a long side panel beside it must not stretch it. */
380
+ .fd-sheet-layout { align-items: start; }
373
381
  /* Save and Discard closing the sheet, when the page puts them at its foot. */
374
382
  .fd-sheet-foot { margin: 4px -28px -28px; padding: 12px 28px; border-block-start: 1px solid var(--fd-border); border-end-start-radius: inherit; border-end-end-radius: inherit; }
375
- .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
383
+ .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
376
384
  @container (max-width: 860px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }
377
385
  .fd-card {
378
386
  position: relative; background: var(--fd-surface); border: 1px solid var(--fd-border);
@@ -541,6 +549,28 @@ export const FIELDIA_CSS = /* css */ `
541
549
  .fd-text-paragraph { margin: 0; }
542
550
  .fd-text-note { margin: 0; color: var(--fd-muted); font-size: 13px; }
543
551
  .fd-status { min-height: 1.4em; color: var(--fd-muted); font-size: 13px; }
552
+ .fd-status-box { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
553
+ .fd-status-box .fd-retry { font-size: 13px; }
554
+ /* Said to screen readers only. */
555
+ .fd-announce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
556
+ /* The server out of reach: a banner over the page, with Retry. */
557
+ .fd-banner {
558
+ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; margin-block-end: 16px;
559
+ border: 1px solid #f0c47a; border-radius: var(--fd-control-radius); background: var(--fd-warning-soft); color: var(--fd-warning); font-size: 13.5px;
560
+ }
561
+ .fd-banner-text { flex: 1 1 16em; min-width: 0; }
562
+ .fd-content > .fd-banner:has(+ .fd-draft + .fd-sheet-page), .fd-content > .fd-banner:has(+ .fd-sheet-page) { margin: 12px 16px 0; }
563
+ /* The status as a toast in a corner, or as a bar across the top. */
564
+ .fd-status-box.fd-toast {
565
+ position: fixed; inset-block-end: max(20px, env(safe-area-inset-bottom, 0px)); inset-inline-end: 20px; z-index: 900;
566
+ padding: 10px 16px; border-radius: 8px; background: var(--fd-text); box-shadow: 0 8px 24px rgba(15, 20, 25, 0.25);
567
+ }
568
+ /* Light words on the dark toast, saved or not: the status's own colours are for a light ground. */
569
+ .fd-toast .fd-status, .fd-toast .fd-status.fd-status-saved, .fd-toast .fd-status.fd-status-error { color: var(--fd-surface); font-size: 13.5px; min-height: 0; }
570
+ .fd-toast .fd-retry { color: var(--fd-surface); text-decoration: underline; }
571
+ .fd-toast:has(.fd-status-error) { background: var(--fd-error); }
572
+ .fd-status-box.fd-status-bar { display: flex; justify-content: center; min-height: 32px; padding: 6px 16px; background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); }
573
+ .fd-status-bar .fd-status-error { color: var(--fd-error); }
544
574
  .fd-status.fd-status-error { color: var(--fd-error); }
545
575
  .fd-status.fd-status-saved { color: var(--fd-success); }
546
576
  .fd-draft { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; margin-block-end: 16px;
package/src/lib/styles.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+jBpC,CAAC;AAEF,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC,oDAAoD;AACpD,MAAM,UAAU,aAAa,CAAC,QAAkB;IAC9C,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,WAAW,CAAC;IAChC,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}
1
+ {"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6lBpC,CAAC;AAEF,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC,oDAAoD;AACpD,MAAM,UAAU,aAAa,CAAC,QAAkB;IAC9C,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,WAAW,CAAC;IAChC,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}