/* Formutto palette and shared layout; authored form themes stay local. */
:root {
  --accent: #126e61;
  --accent-cta: #126e61;
  --accent-hover: #0d554b;
  --ink: #363636;
  --text-muted: #57615e;
  --text-on-accent: #ffffff;
  --text-on-accent-muted: #e1eeea;
  --surface: #ffffff;
  --surface-subtle: #f1f3f2;
  --surface-hover: #e7ece9;
  --surface-selected: #e4efec;
  --canvas: #f5f6f5;
  --line: #cbd2ce;
  --control-line: #74827b;
  --state-success: #126e61;
  --state-success-bg: #e4efec;
  --state-warning: #825310;
  --state-warning-bg: #fff4df;
  --state-error: #a3332a;
  --state-error-bg: #fff0ed;
  --state-disabled: #5d6561;
  --state-disabled-bg: #e6e9e7;
  --shadow-color: #243d3420;
  --overlay: #202e29a6;
  --auth-surface: var(--surface);
  --auth-ink: var(--ink);
  --booking-ink: var(--ink);
  --booking-muted: var(--text-muted);
  --booking-line: var(--control-line);
  --booking-surface: var(--surface-subtle);
  --booking-paper: var(--surface);
  --booking-default-accent: var(--accent);
  color: var(--ink);
  background: var(--canvas);
}

/* Application shell and secondary copy */
.sidebar, .topbar, .stat, .form-list, .editor-panel, .receipt-card,
.receipt-empty, .create-dialog, .template-card { background: var(--surface); border-color: var(--line); }
.brand, .stat strong, .text-button, .create-dialog, .template-card,
.empty h2, .receipt-heading strong { color: var(--ink); }
.workspace, .sidebar-bottom, .form-list-row, .editor-tabs, .field-list,
.field-item, .publish-status, .embed-block, .receipt-card details { border-color: var(--line); }
.workspace-avatar, .user-avatar, .sidebar-note, .help-strip,
.field-settings, .preview-panel, .note-box, .template-variables,
.code-output, .mail-preview { background: var(--surface-subtle); border-color: var(--line); color: var(--ink); }
.workspace small, .nav-label, .sidebar-note p, .sidebar-bottom small,
.topbar, .crumb, .eyebrow, .page-heading p, .stat span, .stat small,
.list-heading h2 span, .form-row-name small, .form-date, .help-strip p,
.template-card p, .template-card small, .dialog-footnote,
.editor-meta, .save-status, .section-heading p, .control > span,
.field-item > span, .field-settings code, .toggle, .preview-toolbar > strong,
.preview-caption, .helper, .template-variables code, .publish-status p,
.publish-checklist, .code-output, .empty, .receipt-heading small,
.receipt-card details, .mail-preview { color: var(--text-muted); }
.brand-dot, .sidebar-note > span, .help-strip > span, .help-strip strong,
.template-variables strong, .embed-block h3, .link-button, .empty-icon { color: var(--accent); }
.local-pill { color: var(--text-muted); background: var(--surface-subtle); border-color: var(--line); }
.local-pill i { background: var(--state-success); }
.form-icon, .template-icon { color: var(--accent); background: var(--surface-selected); border-color: var(--line); }
.form-icon.muted { color: var(--text-muted); background: var(--surface-subtle); border-color: var(--line); }
.chip.green { color: var(--state-success); background: var(--state-success-bg); }
.chip.gray { color: var(--text-muted); background: var(--surface-subtle); }
.chip.red { color: var(--state-error); background: var(--state-error-bg); }
.save-status.dirty, .warning-text { color: var(--state-warning); }
#toast { color: var(--text-on-accent); background: var(--ink); }
.create-dialog { box-shadow: 0 30px 100px var(--shadow-color); }
.create-dialog::backdrop { background: var(--overlay); }

/* A firm brand anchor replaces the former pale-green welcome panel. */
.welcome-panel { background: var(--accent); border-color: var(--accent); }
.welcome-panel h2, .welcome-kicker, .btn.welcome-button { color: var(--text-on-accent); }
.welcome-panel p { color: var(--text-on-accent-muted); }
.btn.welcome-button:hover { color: var(--text-on-accent); background: var(--accent-hover); }
.art-card.back { background: var(--accent-hover); border-color: var(--text-on-accent-muted); }
.art-card.front { background: var(--surface); box-shadow: 0 14px 20px var(--shadow-color); }
.art-dot, .art-line { background: var(--surface-selected); }
.art-line.title, .art-button { background: var(--accent); }
.art-input { background: var(--surface-subtle); border-color: var(--line); }
.art-button { color: var(--text-on-accent); }
.art-star { color: var(--text-on-accent-muted); }

/* Controls: strong selected/focus states, readable disabled labels. */
.btn { color: var(--ink); background: var(--surface); }
.btn.secondary, .btn.outline, .btn.row-button, .btn.preset, .list-filter {
  color: var(--ink); background: var(--surface); border-color: var(--control-line);
}
.btn.nav, .btn.site-nav, .btn.tab, .btn.back, .btn.icon, .btn.field-name,
.btn.device { color: var(--text-muted); }
.btn.nav { background: var(--surface-subtle); }
.btn.quiet, .preview-toolbar, .device-switch { color: var(--ink); background: var(--surface-subtle); border-color: var(--line); }
.btn.nav.active { color: var(--text-on-accent); background: var(--accent); }
.btn.site-nav.selected { color: var(--accent); background: var(--surface-selected); }
.btn.tab.selected { color: var(--accent); border-bottom-color: var(--accent); }
.field-item.selected { background: var(--surface-selected); }
.btn.field-name { color: var(--ink); }
.btn.device.selected { color: var(--text-on-accent); background: var(--accent); box-shadow: none; }
.btn.primary { color: var(--text-on-accent); background: var(--accent-cta); box-shadow: none; }
.btn.primary:hover, .btn.nav.active:hover, .btn.device.selected:hover { color: var(--text-on-accent); background: var(--accent-hover); }
.btn.secondary:hover, .btn.outline:hover, .btn.row-button:hover,
.btn.preset:hover, .btn.quiet:hover, .btn.site-nav:hover,
.btn.nav:not(.active):hover, .btn.icon:hover, .list-filter:hover,
.template-card:hover { background: var(--surface-hover); border-color: var(--accent); color: var(--ink); }
.btn.danger-text { color: var(--state-error); }
.btn.danger-text:hover { background: var(--state-error-bg); }
.btn.danger { color: var(--text-on-accent); background: var(--state-error); box-shadow: none; }
.btn.danger:hover { opacity: .88; }
.btn.danger:disabled { opacity: .56; }
.delete-dialog { max-width: 480px; }
.delete-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.danger-zone { margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.danger-zone h3 { margin: 0 0 8px; }
.danger-zone .helper { margin: 0 0 8px; }
.control input, .control select, .control textarea, .add-field-row select {
  color: var(--ink); background: var(--surface); border-color: var(--control-line);
}
.control input::placeholder, .control textarea::placeholder { color: var(--text-muted); }
.code-output { border-color: var(--control-line); }
.toggle input { accent-color: var(--accent); }
:focus-visible, .control input:focus, .control textarea:focus, .control select:focus { outline-color: var(--accent); }
.btn:disabled, .btn:disabled:hover { opacity: 1; color: var(--state-disabled); background: var(--state-disabled-bg); border-color: var(--control-line); box-shadow: none; }
.login-screen { background: var(--canvas); }
.login-card { box-shadow: 0 12px 60px var(--shadow-color); }
.login-card p { color: var(--text-muted); }
.login-card .login-message { color: var(--state-error); }

/* Public form accents/backgrounds remain the author's --form-* values. */
body.public-page { background: var(--canvas); }
.public-card { color: var(--ink); box-shadow: 0 12px 60px var(--shadow-color); }
.preview-card.public-card { box-shadow: 0 3px 14px var(--shadow-color); }
.demo-banner, .optional { color: var(--text-muted); background: var(--surface-subtle); }
.public-header p, .form-steps li, .field-hint, .form-brand,
.form-brand strong, .review-fields dt, .receipt-id { color: var(--text-muted); }
.form-steps, .review-fields dd { border-color: var(--line); }
.form-steps .current { color: var(--form-accent, var(--accent)); }
.required { color: var(--state-error); background: var(--state-error-bg); }
.form-field input:not([type=checkbox]), .form-field textarea, .form-field select {
  color: var(--ink); background: var(--surface); border-color: var(--control-line);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-muted); }
.form-secondary { color: var(--ink); background: var(--surface); border-color: var(--control-line); }
.form-secondary:hover { background: var(--surface-hover); }
.form-primary { color: var(--text-on-accent); }
.form-primary:disabled, .form-secondary:disabled { opacity: 1; color: var(--state-disabled); background: var(--state-disabled-bg); border-color: var(--control-line); }
.public-error { color: var(--state-error); background: var(--state-error-bg); border-color: var(--state-error); }
.completion-icon, .local-receipt { color: var(--state-success); background: var(--state-success-bg); }
.booking-picker button:disabled { opacity: 1; color: var(--state-disabled); background: var(--state-disabled-bg); }
.booking-picker button:disabled small { color: var(--state-disabled); }
.booking-picker button:not(:disabled):not(.selected):hover { background: var(--surface-hover); border-color: var(--booking-accent); }
.booking-picker button.selected { color: var(--text-on-accent); }
.booking-picker button.selected small { color: var(--text-on-accent); }

/* The included HTML/API example shares legible product chrome. */
.site-header, .site-footer, .custom-review dd { border-color: var(--line); }
.site-header p, .custom-intro > p, .custom-intro small, .custom-description,
.custom-field label, .custom-review dt, .custom-receipt, .site-footer { color: var(--text-muted); }
.custom-note { color: var(--ink); background: var(--surface-subtle); }
.custom-field label span { color: var(--state-error); }
.custom-field input:not([type=checkbox]), .custom-field select, .custom-field textarea {
  color: var(--ink); background: var(--surface); border-color: var(--control-line);
}
.custom-field input:focus, .custom-field select:focus, .custom-field textarea:focus { outline-color: var(--accent); }
.custom-check input { accent-color: var(--accent); }
.custom-submit { color: var(--text-on-accent); background: var(--accent-cta); }
.custom-submit:hover { background: var(--accent-hover); }
.custom-back { color: var(--ink); background: var(--surface-hover); }
.custom-submit:disabled, .custom-back:disabled { opacity: 1; color: var(--state-disabled); background: var(--state-disabled-bg); }
.custom-error { color: var(--state-error); background: var(--state-error-bg); }

/* Readability. The finite PC/SP scale and spacing contract live in docs/02-design.md. */
:root {
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --type-body: 18px;
  --type-ui: 16px;
  --type-caption: 14px;
  --type-minor: 20px;
  --type-section: 24px;
  --type-welcome: 28px;
  --type-title: 32px;
  --type-decoration: 12px;
  --type-input: 16px;
  --leading-body: 1.8;
  --leading-ui: 1.6;
  --leading-heading: 1.5;
  --tracking-body: 0;
  --tracking-heading: -0.02em;
  --tracking-label: 0.12em;
  --tracking-button: 0;
  --sec: 32px;
  --sec-large: 48px;
  font-size: var(--type-body);
}
body { font-family: var(--font-body); font-size: var(--type-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
button, input, select, textarea { font-family: inherit; }
button, a, summary { touch-action: manipulation; }
h1, h2, h3 { line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); overflow-wrap: anywhere; }
p, small, label, code { overflow-wrap: anywhere; }
p { margin: 0 0 16px; }
.btn, .btn.nav, .btn.site-nav, .btn.row-button, .btn.quiet, .btn.back,
.btn.tab, .btn.field-name, .btn.outline, .btn.device, .btn.preset,
.btn.danger-text, .btn.welcome-button, .login-card .btn, .auth-logout,
.page-heading .btn, .editor-actions .btn {
  font-size: var(--type-ui); line-height: var(--leading-ui); letter-spacing: var(--tracking-button);
  min-width: 44px; min-height: 48px; padding: 12px 16px; white-space: normal; overflow-wrap: anywhere;
}
.btn { gap: 8px; }
.btn.icon { font-size: var(--type-minor); width: 44px; min-width: 44px; min-height: 44px; padding: 8px; }
.btn.back, .btn.danger-text, .btn.welcome-button { padding: 8px 0; }
.btn.nav { margin: 0 0 8px; gap: 8px; }
.btn.field-name { min-width: 44px; padding: 8px; }
.btn.device { padding: 8px 12px; }
.btn.preset::before { margin: 0; flex-shrink: 0; }
.text-button { display: inline-block; font-size: var(--type-ui); line-height: var(--leading-ui); min-width: 44px; min-height: 44px; padding: 8px 0; overflow-wrap: anywhere; }
.link-button, .fatal-error a { display: flex; align-items: center; width: fit-content; max-width: 100%; min-width: 44px; min-height: 48px; font-size: var(--type-ui); line-height: var(--leading-ui); margin: 16px 0; padding: 8px 0; overflow-wrap: anywhere; }

/* Shell: allow navigation and headings to grow instead of shrinking text. */
.sidebar { width: 256px; padding: 24px 16px; overflow-y: auto; }
.brand { min-height: 48px; padding: 0; gap: 8px; font-size: var(--type-welcome); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.brand-dot { font-size: var(--type-caption); margin: 0 0 8px; }
.workspace { margin: 24px 0; padding: 12px; gap: 8px; }
.workspace-avatar, .user-avatar { width: 32px; height: 32px; flex-shrink: 0; font-size: var(--type-ui); }
.workspace strong, .sidebar-bottom strong { font-size: var(--type-ui); line-height: var(--leading-ui); }
.workspace small, .sidebar-bottom small { font-size: var(--type-caption); line-height: var(--leading-ui); margin-top: 4px; letter-spacing: var(--tracking-body); }
.nav-label { font-size: var(--type-caption); letter-spacing: var(--tracking-body); padding: 0 8px; margin: 0 0 8px; }
.sidebar-sites { margin-top: 24px; }
.sidebar-note { margin: 32px 0 24px; padding: 16px; }
.sidebar-note > span { font-size: var(--type-section); margin-bottom: 8px; }
.sidebar-note strong { font-size: var(--type-ui); line-height: var(--leading-ui); }
.sidebar-note p { font-size: var(--type-caption); line-height: var(--leading-body); margin: 8px 0 0; }
.sidebar-bottom { gap: 8px; padding: 16px 0 0; margin-top: auto; }
.main-shell { width: calc(100% - 256px); margin-left: 256px; min-width: 0; }
.topbar { height: auto; min-height: 80px; padding: 16px 32px; gap: 16px; flex-wrap: wrap; font-size: var(--type-caption); line-height: var(--leading-ui); }
.topbar > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crumb { margin: 0 8px; }
.local-pill { font-size: var(--type-caption); padding: 4px 8px; gap: 8px; flex-shrink: 0; }
.dashboard-main { padding: 40px 32px; max-width: 1280px; }
.page-heading { flex-wrap: wrap; margin-bottom: var(--sec); gap: 24px; }
.page-heading > div { min-width: 0; flex: 1; }
.eyebrow, .welcome-kicker, .public-eyebrow { font-size: var(--type-caption); letter-spacing: var(--tracking-label); line-height: var(--leading-ui); margin-bottom: 8px; }
h1, .editor-heading h1, .public-header h1, .preview-card .public-header h1, .custom-intro h1, .fatal-error h1 { font-size: var(--type-title); line-height: var(--leading-heading); margin: 0 0 16px; }
.page-heading p, .welcome-panel p, .section-heading p, .public-header p, .preview-card .public-header p,
.login-card p, .custom-intro > p, .custom-description, #custom-root > p { font-size: var(--type-body); line-height: var(--leading-body); }
.page-heading p { max-width: 40em; margin: 0; }
.welcome-panel { min-height: 0; padding: 32px; gap: 32px; align-items: center; }
.welcome-panel > div:first-child { min-width: 0; }
.welcome-panel h2 { font-size: var(--type-welcome); line-height: var(--leading-heading); margin: 16px 0; }
.welcome-panel p { margin: 16px 0; max-width: 40em; }
.btn.welcome-button { margin-top: 8px; }
.welcome-art { width: 216px; height: 224px; margin-right: 0; }
.art-button { font-size: var(--type-decoration); margin-top: 16px; padding: 4px; }
.art-card.front { padding: 16px; }
.art-line { margin: 12px 0 8px; }
.art-line.title { margin: 0 0 16px; }
.art-dot { margin-bottom: 8px; }
.art-star { font-size: var(--type-title); }
.stats-row { gap: 16px; margin: 24px 0 var(--sec); }
.stat { padding: 24px; }
.stat > div { gap: 8px; flex-wrap: wrap; }
.stat span { font-size: var(--type-ui); }
.stat strong { font-size: var(--type-title); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.stat small { font-size: var(--type-caption); line-height: var(--leading-body); margin-top: 8px; }
.list-heading { gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.list-heading h2, .section-heading h2, .dialog-heading h2, .login-card h1, .custom-layout h2 { font-size: var(--type-section); line-height: var(--leading-heading); margin: 0 0 8px; }
.list-heading h2 { margin: 0; }
.list-heading h2 span { font-size: var(--type-caption); padding-left: 8px; }
.list-filter { font-size: var(--type-caption); padding: 8px 12px; }
.form-list-row { padding: 24px; gap: 16px; flex-wrap: wrap; }
.form-icon { width: 48px; height: 48px; flex-shrink: 0; font-size: var(--type-section); }
.form-row-name { min-width: 0; flex: 1 1 200px; }
.form-row-name small { font-size: var(--type-caption); line-height: var(--leading-body); margin-top: 4px; }
.chip { font-size: var(--type-caption); line-height: var(--leading-ui); padding: 4px 8px; }
.form-date { font-size: var(--type-caption); min-width: 144px; }
.help-strip { padding: 24px; gap: 16px; margin-top: var(--sec); }
.help-strip > span, .empty-icon { font-size: var(--type-section); }
.help-strip strong { font-size: var(--type-ui); }
.help-strip p { font-size: var(--type-caption); line-height: var(--leading-body); margin: 8px 0 0; }
#toast { bottom: 24px; padding: 16px 24px; font-size: var(--type-ui); line-height: var(--leading-body); }

/* Template and editor controls keep their full label at narrow widths. */
.create-dialog { width: min(880px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 32px; }
.dialog-heading { gap: 16px; margin-bottom: 24px; }
.dialog-heading > div { min-width: 0; }
.dialog-heading .btn { flex-shrink: 0; }
.template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.template-card { padding: 24px; min-width: 0; }
.template-card:hover { transform: none; }
.template-icon { width: 48px; height: 48px; font-size: var(--type-section); margin-bottom: 16px; }
.template-card strong { font-size: var(--type-minor); line-height: var(--leading-heading); }
.template-card p { font-size: var(--type-body); line-height: var(--leading-body); margin: 8px 0 16px; }
.template-card small { font-size: var(--type-caption); line-height: var(--leading-body); }
.dialog-footnote { font-size: var(--type-caption); line-height: var(--leading-body); margin: 24px 0 0; }
.editor-main { padding: 32px; }
.editor-heading { gap: 24px; margin-bottom: var(--sec); flex-wrap: wrap; }
.editor-heading > div:first-child { min-width: 0; flex: 1; }
.editor-heading h1 { margin-bottom: 8px; }
.editor-meta { font-size: var(--type-caption); gap: 8px; flex-wrap: wrap; }
.editor-actions { gap: 16px; flex-wrap: wrap; }
.save-status { font-size: var(--type-caption); }
.editor-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.editor-panel, .preview-panel { min-width: 0; }
.editor-tabs { gap: 4px; padding: 8px 8px 0; }
.btn.tab { padding: 12px 4px; }
.editor-content { padding: 24px; }
.section-heading { margin-bottom: 24px; }
.section-heading p { margin: 0; }
.control { gap: 8px; margin-bottom: 24px; font-size: var(--type-ui); }
.control > span, .login-card .control span { font-size: var(--type-ui); line-height: var(--leading-ui); }
.control input, .control select, .control textarea, .login-card input, .add-field-row select,
.form-field input:not([type=checkbox]), .form-field select, .form-field textarea,
.preview-card .form-field input:not([type=checkbox]), .preview-card .form-field select, .preview-card .form-field textarea,
.booking-slot-editor input:not([type=checkbox]), .custom-field input:not([type=checkbox]), .custom-field select, .custom-field textarea, .code-output {
  font-size: var(--type-input); line-height: var(--leading-body); padding: 12px 16px; min-height: 48px; min-width: 0;
}
input[type=checkbox] { font-size: var(--type-input); }
.control input[type=color] { padding: 4px; width: 112px; }
.field-list { margin-top: 24px; }
.field-item { padding: 8px; gap: 4px; }
.field-item > span { font-size: var(--type-caption); margin-right: 4px; }
.add-field-row { gap: 8px; margin: 16px 0 24px; flex-wrap: wrap; }
.add-field-row select { flex: 1 1 144px; }
.field-settings { padding: 24px; }
.field-settings-heading { gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.field-settings h3, .embed-block h3, .empty h2 { font-size: var(--type-minor); line-height: var(--leading-heading); margin: 0; }
.field-settings code { font-size: var(--type-caption); }
.toggle { font-size: var(--type-ui); line-height: var(--leading-ui); gap: 8px; margin: 16px 0 24px; min-height: 48px; padding: 8px 0; }
.toggle input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; }
.preview-panel { top: 24px; }
.preview-toolbar { padding: 16px; gap: 16px; flex-wrap: wrap; }
.preview-toolbar > strong { font-size: var(--type-ui); line-height: var(--leading-ui); }
.device-switch { padding: 4px; gap: 4px; }
.preview-caption { padding: 16px 16px 0; font-size: var(--type-caption); line-height: var(--leading-body); }
.preview-viewport { padding: 24px 16px; max-height: 960px; }
.preview-card.public-card { padding: 24px; }
.design-presets { gap: 8px; margin-bottom: 24px; }
.note-box { font-size: var(--type-ui); line-height: var(--leading-body); padding: 16px; margin: 16px 0 24px; }
.helper, .template-variables code { font-size: var(--type-ui); line-height: var(--leading-body); }
.template-variables { padding: 16px; margin-top: 24px; }
.template-variables strong { font-size: var(--type-ui); margin-bottom: 8px; }
.publish-status { padding: 16px; }
.publish-status p { font-size: var(--type-caption); line-height: var(--leading-body); margin: 8px 0 0; }
.publish-checklist { padding-left: 24px; font-size: var(--type-ui); line-height: var(--leading-body); margin: 24px 0; overflow-wrap: anywhere; }
.embed-block { margin-top: var(--sec); padding-top: 16px; }
.embed-block h3 { margin: 24px 0 8px; }
.code-output { margin: 8px 0 16px; }
.failure-controls { gap: 8px; }
.warning-text { font-size: var(--type-ui); line-height: var(--leading-body); }
.empty { padding: 48px 24px; font-size: var(--type-body); line-height: var(--leading-body); }
.empty h2 { margin: 24px 0 16px; }
.empty p { font-size: var(--type-body); }
.receipt-empty { margin-top: 24px; }
.receipt-list { gap: 16px; margin-top: 24px; }
.receipt-card { padding: 24px; }
.receipt-heading { gap: 16px; flex-wrap: wrap; }
.receipt-heading strong { font-size: var(--type-ui); line-height: var(--leading-ui); overflow-wrap: anywhere; }
.receipt-heading small { font-size: var(--type-caption); line-height: var(--leading-body); margin-top: 8px; }
.receipt-heading .chip { font-size: var(--type-caption); }
.receipt-card details { padding: 16px 0; font-size: var(--type-ui); }
.receipt-card summary { padding: 8px 0; min-height: 48px; min-width: 44px; }
.mail-preview { font-size: var(--type-ui); line-height: var(--leading-body); padding: 16px; margin-top: 16px; }
.mail-preview pre { margin: 16px 0; }
.receipt-card .btn { margin-top: 16px; }
.loading, .fatal-error { padding: 48px 24px; }
.login-screen { padding: 32px 24px; }
.login-card { max-width: 528px; padding: 32px; gap: 24px; }
.login-card p { margin: 0; }

/* Public forms use the same scale in the live preview and standalone view. */
body.public-page { padding: 40px 16px; }
.public-card { max-width: 720px; padding: 40px 48px; }
.demo-banner { padding: 12px 16px; margin-bottom: 32px; font-size: var(--type-caption); line-height: var(--leading-body); }
.public-header { margin-bottom: 32px; }
.public-header h1, .preview-card .public-header h1 { margin: 8px 0 16px; }
.public-header p { margin: 0; max-width: 40em; }
.form-steps { gap: 16px; padding: 0 0 24px; margin: 0 0 24px; }
.form-steps li { font-size: var(--type-caption); line-height: var(--leading-ui); }
.form-field > label, .preview-card .form-field > label { font-size: var(--type-ui); line-height: var(--leading-ui); gap: 8px; margin-bottom: 8px; }
.required, .optional { font-size: var(--type-caption); line-height: var(--leading-ui); padding: 4px 8px; }
.field-hint { font-size: var(--type-caption); line-height: var(--leading-body); margin-top: 8px; }
.check-label { min-height: 48px; padding: 8px 0; }
.check-label input { width: 20px; height: 20px; margin: 4px 0 0; padding: 0; min-height: 0; }
.form-primary, .form-secondary { min-width: 44px; min-height: 56px; padding: 16px 24px; font-size: var(--type-ui); line-height: var(--leading-ui); letter-spacing: var(--tracking-button); }
.form-primary { margin-top: 32px; }
.public-actions { gap: 16px; margin-top: 32px; }
.form-brand { font-size: var(--type-caption); margin-top: 32px; }
.form-brand strong { font-size: var(--type-ui); letter-spacing: var(--tracking-body); }
.public-error { font-size: var(--type-body); line-height: var(--leading-body); padding: 16px; margin-top: 24px; }
.review-fields dt { font-size: var(--type-ui); line-height: var(--leading-ui); padding: 16px 0 8px; }
.review-fields dd { font-size: var(--type-body); line-height: var(--leading-body); padding: 0 0 16px; }
.completion-icon { width: 64px; height: 64px; font-size: var(--type-section); margin: 24px 0; }
.local-receipt { font-size: var(--type-body); line-height: var(--leading-body); padding: 16px; margin: 24px 0; }
.receipt-id { font-size: var(--type-caption); line-height: var(--leading-body); margin: 24px 0; }
.booking-heading h2 { font-size: var(--type-section); line-height: var(--leading-heading); margin: 0 0 8px; }
.booking-picker { container-type: inline-size; }
.booking-heading p, .booking-hint, .booking-empty, .booking-settings > p { font-size: var(--type-body); line-height: var(--leading-body); margin: 0 0 24px; }
.booking-month { margin: 24px 0 16px; gap: 8px; }
.booking-month strong { font-size: var(--type-minor); }
.booking-month button { display: inline-flex; align-items: center; justify-content: center; width: 48px; min-width: 48px; height: 48px; padding: 8px; font-size: var(--type-minor); }
.booking-month button svg { display: block; width: 20px; height: 20px; flex: none; }
.booking-grid { grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 4px; overflow-x: auto; }
.booking-weekday { font-size: var(--type-caption); padding: 8px 0; }
.booking-day { min-width: 44px; min-height: 64px; padding: 8px 4px; gap: 4px; font-size: var(--type-ui); }
.booking-day small { font-size: var(--type-caption); }
.booking-legend, .booking-scroll-hint { font-size: var(--type-caption); line-height: var(--leading-body); margin: 16px 0 24px; }
.booking-scroll-hint { display: none; color: var(--text-muted); }
.booking-time-section h3 { font-size: var(--type-minor); margin: 0 0 16px; }
.booking-time { min-width: 44px; min-height: 64px; padding: 16px 8px; gap: 8px; }
.booking-time strong { font-size: var(--type-ui); }
.booking-time span { font-size: var(--type-caption); }
.booking-summary { gap: 8px; margin: 0 0 24px; padding: 16px; font-size: var(--type-body); line-height: var(--leading-body); }
.booking-summary strong { font-size: var(--type-ui); }
.booking-settings { margin-bottom: 24px; padding: 16px; }
.booking-settings h3 { font-size: var(--type-minor); margin: 0 0 8px; }
.booking-slot-editor { gap: 8px; padding: 16px 0; }
.booking-day-editor { margin: 0 0 16px; padding: 16px; background: var(--booking-surface); border-radius: 8px; }
.booking-day-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.booking-day-head .control { flex: 1; max-width: 240px; margin: 0; }
.booking-day-head input { width: 100%; min-width: 0; }
.booking-day-editor .booking-slot-editor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.booking-slot-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.booking-slot-actions .toggle { margin: 0; }
.booking-day-editor > .btn { margin-top: 16px; }
.booking-slot-editor .control > span, .booking-slot-editor .toggle, .booking-settings .btn { font-size: var(--type-ui); }

/* HTML/API example and its embed host. */
.site-header { padding: 32px; gap: 24px; flex-wrap: wrap; }
.site-header a { display: block; min-height: 48px; font-size: var(--type-welcome); letter-spacing: var(--tracking-label); }
.site-header a span, .site-header p { font-size: var(--type-caption); line-height: var(--leading-ui); letter-spacing: var(--tracking-label); }
.site-header p { margin: 0; }
.custom-layout { max-width: 1280px; padding: 48px 32px; gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.custom-layout > section { min-width: 0; }
.custom-intro h1 { margin: 24px 0; }
.custom-intro small { font-size: var(--type-caption); line-height: var(--leading-body); }
.custom-note { padding: 16px; font-size: var(--type-ui); line-height: var(--leading-body); margin: 32px 0 24px; }
.custom-description { margin: 0 0 32px; }
.custom-field { margin: 24px 0; }
.custom-field label { font-size: var(--type-ui); line-height: var(--leading-ui); margin-bottom: 8px; }
.custom-check { gap: 8px; }
.custom-check label { min-width: 44px; min-height: 48px; display: flex; align-items: center; padding: 8px 0; margin: 0; }
.custom-check input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; }
.custom-submit, .custom-back { min-width: 44px; min-height: 56px; font-size: var(--type-ui); line-height: var(--leading-ui); letter-spacing: var(--tracking-button); padding: 16px 24px; }
.custom-submit { margin: 24px 0; }
.booking-next { display: block; width: 100%; margin: 24px 0 0; }
.booking-back { margin-bottom: 24px; }
.booking-back + .custom-field { margin-top: 0; }
.preview-card > [hidden] { display: none; }
.custom-error { padding: 16px; font-size: var(--type-body); line-height: var(--leading-body); }
.custom-review dt { font-size: var(--type-ui); margin-top: 24px; }
.custom-review dd { font-size: var(--type-body); line-height: var(--leading-body); margin: 8px 0; padding-bottom: 16px; }
.custom-receipt, .site-footer { font-size: var(--type-caption); line-height: var(--leading-body); }
.site-footer { padding: 24px 32px; letter-spacing: var(--tracking-label); }

@media (max-width: 1200px) {
  .sidebar { width: 224px; padding: 24px 16px; }
  .brand-dot { display: none; }
  .workspace-avatar { display: none; }
  .main-shell { margin-left: 224px; width: calc(100% - 224px); }
  .dashboard-main, .editor-main { padding: 32px 24px; }
  .editor-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .preview-panel { position: static; }
  .preview-viewport { max-height: none; }
  .welcome-art { display: none; }
  .stat { padding: 16px; }
  .form-date { display: none; }
  .custom-layout { gap: 32px; }
}
@media (max-width: 950px) {
  .custom-layout { grid-template-columns: minmax(0, 1fr); }
  .editor-actions { flex-direction: row; align-items: center; }
}
@media (max-width: 700px) {
  .booking-day-editor .booking-slot-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-day-head { flex-wrap: wrap; }
  :root {
    --type-body: 16px;
    --type-ui: 14px;
    --type-caption: 12px;
    --type-minor: 18px;
    --type-section: 22px;
    --type-welcome: 26px;
    --type-title: 30px;
    --type-decoration: 10px;
    --sec: 24px;
    --sec-large: 32px;
  }
  .sidebar { width: 100%; padding: 16px; gap: 8px; }
  .brand { padding: 0; }
  .brand-dot { display: inline; }
  .btn.nav { margin: 0; padding: 12px 8px; }
  .main-shell { width: 100%; margin: 0; }
  .topbar { min-height: 64px; padding: 16px; gap: 8px; }
  .topbar > span:first-child { flex-basis: 100%; }
  .topbar .auth-logout { margin-left: auto; }
  .dashboard-main { padding: 32px 16px; }
  .page-heading { gap: 16px; margin-bottom: 24px; }
  .welcome-panel { padding: 24px; }
  .stats-row { gap: 8px; margin: 24px 0; }
  .stat { padding: 16px 12px; }
  .stat > div { gap: 8px; }
  .form-list-row { padding: 16px; gap: 8px; }
  .form-row-name { flex-basis: 160px; }
  .help-strip { padding: 16px; gap: 8px; }
  .create-dialog { padding: 24px 16px; }
  .template-grid { grid-template-columns: minmax(0, 1fr); }
  .template-card { display: flex; padding: 16px; }
  .template-card p { margin: 8px 0 16px; }
  .template-icon { margin-bottom: 16px; }
  .editor-main { padding: 24px 16px; }
  .editor-heading { flex-direction: column; align-items: stretch; gap: 16px; }
  .editor-actions { justify-content: space-between; gap: 8px; }
  .editor-content, .field-settings { padding: 16px; }
  .editor-tabs { padding: 4px 4px 0; gap: 4px; }
  .btn.tab { padding: 12px 4px; }
  .preview-toolbar { padding: 16px; gap: 8px; }
  .preview-viewport { padding: 16px 8px; }
  .preview-card.public-card { padding: 24px 16px; }
  .receipt-card { padding: 16px; }
  .login-screen { padding: 24px 16px; }
  .login-card { padding: 24px; }
  body.public-page { padding: 16px 8px; }
  .public-card { padding: 24px 16px; }
  .public-actions { flex-direction: column-reverse; }
  .demo-banner { padding: 12px; }
  .site-header { padding: 24px 16px; gap: 16px; }
  .custom-layout { padding: 32px 16px; gap: 32px; }
  .custom-note { margin: 24px 0; }
  .site-footer { padding: 24px 16px; }
}
.preview-frame.sp {
  --type-body: 16px;
  --type-ui: 14px;
  --type-caption: 12px;
  --type-minor: 18px;
  --type-section: 22px;
  --type-welcome: 26px;
  --type-title: 30px;
  --type-decoration: 10px;
}
.preview-frame.pc {
  --type-body: 18px;
  --type-ui: 16px;
  --type-caption: 14px;
  --type-minor: 20px;
  --type-section: 24px;
  --type-welcome: 28px;
  --type-title: 32px;
  --type-decoration: 12px;
}
.preview-frame.sp .public-card { padding: 24px 16px; }
@media (max-width: 480px) {
  .stats-row { grid-template-columns: minmax(0, 1fr); }
  .stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px; }
  .stat > div { display: contents; }
  .stat strong { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .stat small { margin: 0; }
}
@media (max-width: 360px) {
  .welcome-panel { padding: 24px 16px; }
}
@container (max-width: 331px) {
  .booking-scroll-hint { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .template-card, .preview-frame, #toast { transition: none; }
}

/* Catalog choices respond to the form container, including narrow desktop previews. */
.image-choice-field { container-type: inline-size; border: 0; padding: 0; margin: 0; min-width: 0; }
.image-choice-field[hidden] { display: none; }
.image-choice-field legend { font-size: var(--type-ui); line-height: var(--leading-ui); font-weight: 700; padding: 0; margin-bottom: 16px; overflow-wrap: anywhere; }
.image-choice-field legend .required, .image-choice-field legend .optional { display: inline-block; margin-left: 8px; }
.catalog-choice-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.catalog-select-all { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: var(--type-ui); line-height: var(--leading-ui); cursor: pointer; }
.catalog-count, .catalog-choice-state { font-size: var(--type-caption); line-height: var(--leading-body); color: var(--text-muted); }
.image-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.catalog-choice { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--control-line); border-radius: var(--form-radius, 8px); color: var(--ink); background: var(--surface); cursor: pointer; overflow-wrap: anywhere; }
.catalog-choice.selected { border-color: var(--form-accent, var(--accent)); box-shadow: inset 0 0 0 1px var(--form-accent, var(--accent)); background: var(--surface-selected); }
.catalog-choice:focus-within { outline: 2px solid var(--form-accent, var(--accent)); outline-offset: 2px; }
.catalog-choice-heading { display: flex; align-items: flex-start; gap: 8px; font-size: var(--type-ui); line-height: var(--leading-body); }
.catalog-choice-description { font-size: var(--type-body); line-height: var(--leading-body); white-space: pre-wrap; }
.catalog-choice-state { margin-top: auto; font-weight: 700; }
.catalog-choice input[type=checkbox], .catalog-select-all input[type=checkbox] { width: 20px; height: 20px; min-height: 20px; margin: 4px 0 0; flex: none; accent-color: var(--form-accent, var(--accent)); }
.catalog-cover { display: grid; place-items: center; width: 100%; max-width: 160px; aspect-ratio: 3 / 4; align-self: center; background: var(--surface-subtle); color: var(--text-muted); }
.catalog-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.catalog-cover [hidden] { display: none; }
.catalog-image-fallback { padding: 16px; font-size: var(--type-caption); line-height: var(--leading-body); text-align: center; }
.catalog-error { color: var(--state-error); font-size: var(--type-ui); line-height: var(--leading-body); margin: 16px 0 0; }
.catalog-error[hidden] { display: none; }
.catalog-editor { display: grid; gap: 24px; margin: 24px 0; }
.catalog-editor h3, .catalog-editor h4 { margin: 0; font-size: var(--type-minor); line-height: var(--leading-heading); }
.catalog-choice-editor { display: grid; gap: 16px; padding: 24px 0; border-top: 1px solid var(--line); min-width: 0; }
.catalog-choice-editor .control, .catalog-choice-editor .helper { margin: 0; }
.catalog-choice-editor .control input[type=file] { width: 100%; min-width: 0; font: inherit; font-size: 16px; padding: 8px; min-height: 48px; }
.catalog-choice-editor input[type=file]::file-selector-button { min-height: 48px; padding: 8px 16px; margin-right: 8px; font: inherit; }
.catalog-editor-cover { display: flex; justify-content: center; }
.catalog-choice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.custom-form > .image-choice-field { margin: 24px 0; }
@container (max-width: 440px) {
  .image-choice-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Bounded production lists use the existing 700px typography tokens. */
.production-list-controls { display: grid; gap: 16px; margin: 24px 0; }
.production-list-controls .control { max-width: 400px; margin: 0; }
.production-pagination { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: var(--type-ui); line-height: var(--leading-ui); }
.production-pagination .btn { min-height: 48px; }
.receipt-detail { margin-top: 16px; }
.abuse-notice { margin-bottom: 24px; overflow-wrap: anywhere; }
.abuse-notice p { margin: 8px 0 0; font-size: var(--type-body); line-height: var(--leading-body); }