/* ProChart-styled editor. Tokens inlined from the ProChart design system; the
   three ui_kits/eform-builder snapshots (upload / analyze / editor-v2) are the
   visual source of truth. Functional selectors the JS depends on
   (.field-overlay/.rh, .layer-row, .marquee-rect, .guide-line, .context-menu,
   .pv-*, payment popup, #props-form/#align-panel toggles, …) are preserved. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ProChart palette */
  --c-brand-900:#16233f; --c-brand-800:#1e2d4a; --c-brand-700:#2a3c5e;
  --c-accent:#2563eb; --c-accent-hover:#1d4ed8; --c-accent-active:#1e40af;
  --c-accent-soft:rgba(37,99,235,.14); --c-accent-tint:#eef4ff;
  --c-bg:#f4f6fb; --c-surface:#fff; --c-surface-2:#f8faff;
  --c-border:#e4eaf3; --c-border-strong:#cdd9ea; --c-control-border:#7d8ba0;
  --c-text:#1a2233; --c-text-muted:#5b667a; --c-text-faint:#667085;
  --c-on-brand:#fff; --c-on-brand-muted:#9fb2cf;
  --c-success:#187a45; --c-success-bg:#e6f4ea;
  --c-warn:#8a5000; --c-danger:#c0392b; --c-danger-bg:#fdecea;
  --c-dirty-border:#8a5000; --c-dirty-bg:#fffaf0;
  --c-focus-on-dark:#60a5fa;
  --action-hover:rgba(26,34,51,.04); --action-selected:rgba(37,99,235,.12);
  --shadow-sm:0 1px 2px rgba(16,24,42,.06);
  --shadow-md:0 6px 18px rgba(16,24,42,.12);
  --shadow-lg:0 18px 48px rgba(16,24,42,.20);
  --r-sm:6px; --r-md:8px; --r-lg:12px;
  /* Type scale — one ramp replacing ~16 ad-hoc sizes (fractional / near values
     collapsed to the nearest step). */
  --text-2xs:9px; --text-xs:11px; --text-sm:12px; --text-base:13px;
  --text-md:14px; --text-lg:16px; --text-xl:19px; --text-2xl:24px;
  --ease:cubic-bezier(.4,0,.2,1);
  --font:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Field-type colour coding */
  --ft-text:#2563eb; --ft-checkbox:#187a45; --ft-textarea:#7c3aed;
  --ft-date:#8a5000; --ft-signature:#c0392b; --ft-drawing:#08758f; --ft-selected:#8a5a00;
  --target-min:24px; --target-comfort:40px;
  /* Snap-guide line + preview-mockup palette (single-sourced here, not inlined) */
  --guide-line:#ff2d92;
  --pv-field-border:#aaa; --pv-drawing-border:#888;
  --pv-bg:rgba(255,255,255,.65); --pv-readonly-bg:rgba(235,235,235,.7);
  --pv-readonly-text:#555; --pv-bottombar-bg:#f3f4f6;

  /* Legacy aliases — keep existing rules (payment popup, preview, context menu,
     guides, etc.) and any leftover markup styled correctly. */
  --bg:var(--c-bg); --surface:var(--c-surface); --border:var(--c-border);
  --text:var(--c-text); --muted:var(--c-text-muted);
  --primary:var(--c-accent); --primary-dark:var(--c-accent-hover);
  --danger:var(--c-danger);
  --field-text:var(--ft-text); --field-checkbox:var(--ft-checkbox);
  --field-textarea:var(--ft-textarea); --field-date:var(--ft-date);
  --field-signature:var(--ft-signature); --field-selected:var(--ft-selected);
}

body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size:var(--text-base);
  -webkit-font-smoothing: antialiased;
}

/* One high-contrast focus language across the application. Dark header controls
   use a dedicated token so the ring remains visible against navy chrome. */
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):focus-visible {
  outline:2px solid var(--c-accent);
  outline-offset:2px;
}
header :where(a, button, [tabindex], [contenteditable="true"]):focus-visible {
  outline-color:var(--c-focus-on-dark);
}

.overline { font-size:var(--text-xs); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--c-text-faint); }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.sub { font-size:var(--text-sm); color:var(--c-text-muted); }
.hidden { display: none !important; }
svg.ic { width:1em; height:1em; stroke:currentColor; stroke-width:2;
  fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* ── Header (shared ProChart navy chrome) ────────────────────────────── */
header {
  background: var(--c-brand-800);
  color: var(--c-on-brand);
  height: 52px;
  flex-shrink: 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.brand .mark { width:24px; height:24px; border-radius:6px;
  background:var(--c-accent); display:flex; align-items:center;
  justify-content:center; color:#fff; }
.brand .mark svg { width:15px; height:15px; }
.brand-name { font-weight:700; font-size:var(--text-lg); letter-spacing:-.01em; }
.brand-name .em { color:var(--c-on-brand-muted); font-weight:500; }

.home-btn { width:34px; height:34px; border:none; background:none; cursor:pointer;
  color:var(--c-on-brand-muted); border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s var(--ease),color .12s var(--ease); }
.home-btn:hover { background:rgba(255,255,255,.10); color:#fff; }
.home-btn svg { width:18px; height:18px; }
.h-div { width:1px; height:24px; background:rgba(255,255,255,.16); flex-shrink:0; }

.doc-title-h { display:flex; align-items:center; gap:8px; min-width:0;
  padding:3px 9px; border-radius:7px; cursor:text; border:1px solid transparent;
  transition:background .12s var(--ease),border-color .12s var(--ease); }
.doc-title-h:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.20); }
.doc-edit-ic { color:var(--c-on-brand-muted); display:flex; flex-shrink:0; }
.doc-edit-ic svg { width:14px; height:14px; }
.doc-title-h:hover .doc-edit-ic { color:#fff; }

/* Editable form name (kept id #form-name-label; styled like design's #form-name) */
#form-name-label {
  font-weight:600; font-size:var(--text-lg); color:#fff; outline:none; cursor:text;
  max-width:300px; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  -webkit-user-modify:read-write-plaintext-only;
  border-bottom:1px dashed rgba(255,255,255,.38); padding:0 2px 1px; }
#form-name-label:focus { border-bottom-color:var(--c-accent); border-bottom-style:solid; }
#form-name-label[contenteditable]:empty::before {
  content: attr(data-placeholder); color: var(--c-on-brand-muted); }

/* Step pills */
.step-indicator { display:flex; align-items:center; gap:6px; margin-left:auto; }
.step-list { display:contents; list-style:none; margin:0; padding:0; }
.step-summary { display:none; margin-left:auto; min-width:0; color:var(--c-on-brand-muted);
  font-size:var(--text-sm); line-height:1.25; }
.step-summary strong { display:block; color:var(--c-on-brand); font-size:var(--text-base);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.step-indicator .step { display:flex; align-items:center; gap:7px; padding:5px 12px;
  border-radius:999px; font-size:var(--text-base); font-weight:500;
  color:var(--c-on-brand-muted); white-space:nowrap; }
.step-indicator .step > span:first-child { width:19px; height:19px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--text-xs); font-weight:700; background:var(--c-brand-700);
  color:var(--c-on-brand-muted); }
.step-indicator .step.active { color:#fff; background:rgba(255,255,255,.08); }
.step-indicator .step.active > span:first-child { background:var(--c-accent); color:#fff; }
.step-indicator .step.done { color:#cfe6da; }
.step-indicator .step.done > span:first-child { background:var(--c-success); color:#fff; }

.header-right { display:flex; align-items:center; gap:8px; }

/* Editor-only header chrome — visible only on the editor step. */
.home-btn, .doc-title-h, .header-right, .h-div.editor-only { display: none; }
body[data-step="3"] .home-btn,
body[data-step="3"] .doc-title-h,
body[data-step="3"] .header-right { display: flex; }
body[data-step="3"] .h-div.editor-only { display: block; }

/* ── Small-screen notice (editor step only) ──────────────────────────── */
/* The precision editor is first-class at 1024px and above. Below that, keep a
   persistent notice visible; upload, analysis, checkout and recovery remain usable. */
.desktop-banner { display: none; align-items: center; gap: 10px;
  padding: 8px 14px; background: var(--c-dirty-bg);
  border-bottom: 1px solid var(--c-dirty-border); color: var(--c-warn);
  font-size: var(--text-base); font-weight: 500; }
.desktop-banner > .ic { width: 16px; height: 16px; flex: none; }
.desktop-banner span { flex: 1; min-width: 0; }
@media (max-width: 1023px) {
  body[data-step="3"] .desktop-banner { display:flex; }
}

/* ── Step panels ─────────────────────────────────────────────────────── */
.step-panel { display: none; flex: 1; overflow: hidden; }
.step-panel.active { display: flex; flex-direction: column; }

/* ── Button system ───────────────────────────────────────────────────── */
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-quiet, .btn-export {
  font-family: inherit; font-size:var(--text-base); font-weight: 600;
  border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  min-height:36px; line-height: 1;
  border: 1px solid transparent; text-decoration: none;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.btn svg, .btn-primary svg, .btn-secondary svg, .btn-ghost svg, .btn-quiet svg, .btn-export svg { width:15px; height:15px; }
.btn-primary, .btn-export { background: var(--c-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover, .btn-export:hover { background: var(--c-accent-hover); }
.btn-primary:active, .btn-export:active { background: var(--c-accent-active); }
.btn-ghost, .btn-secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); }
.btn-ghost:hover, .btn-secondary:hover { background: var(--action-hover); border-color: var(--c-text-faint); }
.btn-quiet { background: transparent; color: var(--c-text-muted); padding: 8px 11px; }
.btn-quiet:hover { background: var(--action-hover); color: var(--c-text); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled, .btn-success:disabled { opacity:.6; cursor:default; }
.btn-secondary.active { background: var(--c-accent); color:#fff; border-color: var(--c-accent); }
.btn-success { background: var(--c-success); color:#fff; box-shadow: var(--shadow-sm); }
.btn-success:hover { background: color-mix(in srgb, var(--c-success) 86%, #000); }
/* Preview button turns red while preview mode is active (click again to exit). */
#btn-preview.active { background: var(--c-danger); color:#fff; border-color: var(--c-danger); }
#btn-preview.active:hover { background: color-mix(in srgb, var(--c-danger) 86%, #000); }
/* Preview toggle: "Preview" at rest, red "✕ Exit Preview" while active (.active). */
#btn-preview .ic-x { display:none; }
body.previewing #btn-preview .ic-x { display:inline-block; }

.preview-group { display:inline-flex; align-items:center; gap:6px; }
/* Preview-only controls: hidden until preview mode is active. */
.preview-only { display:none; }
body.previewing .preview-only { display:inline-flex; }
/* Print-like state uses a neutral fill rather than the normal blue active state. */
#btn-printlike.active {
  background: var(--action-hover); color: var(--c-text); border-color: var(--c-text-faint); }
.preview-mode-split { align-items:stretch; }
.preview-mode-split #btn-toggle-fields { border-top-right-radius:0; border-bottom-right-radius:0; }
.preview-mode-caret { min-width:30px; padding-left:7px; padding-right:7px; margin-left:-1px;
  border-top-left-radius:0; border-bottom-left-radius:0; }
.preview-mode-caret .ic { width:11px; }
.preview-mode-caret[aria-expanded="true"] { background:var(--action-hover); }

/* ── Step 1: Upload ──────────────────────────────────────────────────── */
.workspace { flex:1; overflow-y:auto; }
.workspace-inner { max-width:760px; margin:0 auto; padding:34px 32px 56px; }
.page-head { margin-bottom:22px; }
.page-head .overline { display:block; margin-bottom:8px; }
.page-head h1 { font-size:var(--text-2xl); font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.page-head p { color:var(--c-text-muted); margin-top:7px; font-size:var(--text-md); max-width:60ch; }

.upload-card { background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:14px; }
.privacy-notice { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px;
  padding:12px 14px; border:1px solid #c8d9f4; border-left:4px solid var(--c-accent);
  border-radius:var(--r-md); background:var(--c-accent-tint); color:var(--c-text);
  font-size:var(--text-sm); line-height:1.5; }
.privacy-notice .ic { width:18px; height:18px; flex:0 0 auto; margin-top:1px;
  color:var(--c-accent); }
.privacy-notice strong { display:block; margin-bottom:2px; font-size:var(--text-base); }
.privacy-notice a { color:var(--c-accent-active); font-weight:600; }
.drop-zone { border:2px dashed var(--c-border-strong); border-radius:var(--r-md);
  padding:34px 24px 32px; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:6px; background:var(--c-surface-2);
  transition:background .15s var(--ease),border-color .15s var(--ease); }
.drop-zone.drag-over { border-color:var(--c-accent); background:var(--c-accent-tint); }
.drop-ic { width:54px; height:54px; border-radius:14px; background:var(--c-accent-tint);
  color:var(--c-accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:8px; transition:transform .15s var(--ease); }
.drop-ic svg { width:26px; height:26px; }
.drop-zone.drag-over .drop-ic { transform:translateY(-2px); }
.drop-zone h2, .drop-zone p:not(.sub):not(.types) { font-size:var(--text-lg); font-weight:600; letter-spacing:-.01em; }
.drop-zone .sub { font-size:var(--text-base); color:var(--c-text-muted); }
.drop-zone .types { margin-top:2px; font-size:var(--text-xs); color:var(--c-text-faint);
  font-family:var(--mono); letter-spacing:.02em; }
label.btn-primary, .drop-zone label { margin-top:12px; }

/* Import-ZIP + Redeem rows */
.import-row { display:flex; align-items:center; gap:14px; margin-top:14px;
  padding:14px 16px; background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm); }
.import-ic { width:34px; height:34px; border-radius:var(--r-sm); flex-shrink:0;
  background:var(--c-bg); color:var(--c-text-muted); display:flex;
  align-items:center; justify-content:center; }
.import-ic svg { width:17px; height:17px; }
.import-txt { flex:1; min-width:0; }
.import-txt strong { display:block; font-size:var(--text-base); font-weight:600; }
.import-txt span { font-size:var(--text-sm); color:var(--c-text-muted); }

.upload-status { margin-top:14px; padding:10px 14px; border-radius:var(--r-sm);
  font-size:var(--text-base); background:var(--c-accent-tint); color:var(--c-accent); }
.upload-status.error { background:var(--c-danger-bg); color:var(--c-danger); }

/* Saved sessions */
.sessions { margin-top:32px; }
.sessions-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.count-badge { font-size:var(--text-xs); font-weight:600; color:var(--c-text-muted);
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:999px; padding:1px 9px; font-variant-numeric:tabular-nums; }
.saved-sessions-grid { display:grid;
  grid-template-columns:repeat(auto-fill,minmax(208px,1fr)); gap:14px; }
.saved-sessions-grid .saved-session-card { position:relative; background:var(--c-surface);
  border:1px solid var(--c-border); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); cursor:pointer; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease); }
.saved-sessions-grid .saved-session-card:hover { border-color:var(--c-border-strong);
  box-shadow:var(--shadow-md); transform:translateY(-2px); }
.session-open { appearance:none; -webkit-appearance:none; border:0; padding:0; margin:0;
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer;
  display:flex; flex:1; min-width:0; flex-direction:column; }
.saved-session-card:has(.session-open:hover),
.saved-session-card:has(.session-open:focus-visible) { border-color:var(--c-border-strong);
  box-shadow:var(--shadow-md); transform:translateY(-2px); }
.session-open:focus-visible { outline:3px solid var(--c-accent); outline-offset:-3px; }
/* Session-card inner structure (thumb + body + resume hint + delete) */
.session-thumb { height:108px; background:var(--c-surface-2); border-bottom:1px solid var(--c-border);
  position:relative; display:flex; align-items:center; justify-content:center;
  color:var(--c-text-faint); font-family:"Times New Roman",Georgia,serif; font-size:var(--text-sm);
  text-align:center; padding:0 14px; overflow:hidden; }
.session-thumb img { width:100%; height:100%; object-fit:contain; object-position:top center; display:block; }
.session-thumb .pages { position:absolute; top:8px; right:8px; font-family:var(--mono);
  font-size:var(--text-2xs); font-weight:500; color:var(--c-text-muted); background:var(--c-surface);
  border:1px solid var(--c-border); border-radius:999px; padding:1px 7px; box-shadow:var(--shadow-sm); }
.session-body { padding:11px 12px 12px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.session-title { font-size:var(--text-base); font-weight:600; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.session-meta { font-size:var(--text-sm); color:var(--c-text-muted); display:flex; align-items:center; gap:5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.session-retention { align-self:flex-start; width:auto; max-width:100%; padding:2px 7px;
  border-radius:999px; border:1px solid var(--c-border-strong); background:var(--c-surface-2);
  color:var(--c-text-muted); font-size:var(--text-xs); font-weight:600; }
.retention-temporary .session-retention { border-color:#d2dbe8; }
.retention-purchased .session-retention { border-color:color-mix(in srgb,var(--c-success) 38%,#fff);
  background:var(--c-success-bg); color:var(--c-success); }
.saved-session-card.payment-issue { border-color:color-mix(in srgb,var(--c-warn) 46%,#fff); }
.payment-issue .session-retention { border-color:color-mix(in srgb,var(--c-warn) 46%,#fff);
  background:var(--c-dirty-bg); color:var(--c-warn); }
.session-meta svg { width:12px; height:12px; flex-shrink:0; color:var(--c-text-faint); }
.session-resume { margin-top:7px; display:flex; align-items:center; gap:5px; font-size:var(--text-sm);
  font-weight:600; color:var(--c-accent); opacity:0; transform:translateX(-3px);
  transition:opacity .15s var(--ease),transform .15s var(--ease); }
.session-resume svg { width:14px; height:14px; }
.saved-session-card:hover .session-resume,
.session-open:focus-visible .session-resume { opacity:1; transform:translateX(0); }
.session-del { position:absolute; top:8px; left:8px; width:28px; height:28px; z-index:1;
  border:1px solid var(--c-border); background:var(--c-surface); border-radius:var(--r-sm);
  color:var(--c-text-faint); cursor:pointer; display:flex; align-items:center; justify-content:center;
  line-height:0; opacity:0; box-shadow:var(--shadow-sm);
  transition:opacity .15s var(--ease),background .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease); }
.saved-session-card:hover .session-del,
.session-del:focus-visible { opacity:1; }
.session-del:hover { background:var(--c-danger-bg); color:var(--c-danger);
  border-color:color-mix(in srgb,var(--c-danger) 28%,#fff); }
.session-del:disabled { opacity:.62; cursor:not-allowed; }
.session-del svg { width:14px; height:14px; }
@media (hover:none), (pointer:coarse) { .session-del { width:40px; height:40px; opacity:1; } }
.saved-session-empty { grid-column:1/-1; color:var(--c-text-muted); font-size:var(--text-base); padding:2px 0; }
.sessions-load-more { grid-column:1/-1; justify-self:center; }
.saved-session-card.opening { opacity:.72; cursor:progress; }

/* ── Step 2: Analyze ─────────────────────────────────────────────────── */
#step-2 { align-items:center; justify-content:center; }
.scene { flex:1; display:flex; align-items:center; justify-content:center; padding:32px; overflow-y:auto; }
.analyze-card { width:560px; max-width:100%; background:var(--c-surface);
  border:1px solid var(--c-border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); padding:30px 32px; min-height:266px;
  display:flex; flex-direction:column; justify-content:center; }

.analyzing { display:flex; flex-direction:column; align-items:center; gap:13px; text-align:center; }
.analyzing.hide { display:none; }
.spin-wrap { position:relative; width:64px; height:64px; display:flex; align-items:center; justify-content:center; }
.ring { position:absolute; inset:0; border-radius:50%; border:4px solid var(--c-accent-tint);
  border-top-color:var(--c-accent); animation:spin .85s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.status-word { font-size:var(--text-xl); font-weight:700; letter-spacing:-.01em; color:var(--c-text);
  display:inline-flex; align-items:baseline; }
.dots { display:inline-flex; }
.dots span { animation:dotPulse 1.4s var(--ease) infinite; }
.dots span:nth-child(2) { animation-delay:.2s; }
.dots span:nth-child(3) { animation-delay:.4s; }
@keyframes dotPulse { 0%,70%,100% { opacity:.18; } 35% { opacity:1; } }
.bar { width:100%; height:6px; background:var(--c-bg); border-radius:999px; overflow:hidden; margin-top:6px; }
.bar > i { display:block; height:100%; width:4%; background:var(--c-accent); border-radius:999px; transition:width .5s var(--ease); }
.analyze-error { font-size:var(--text-sm); color:var(--c-danger); margin-top:2px; }

.done-block { display:none; flex-direction:column; align-items:center; gap:11px; text-align:center; }
.done-block.show { display:flex; }
.check-badge { width:64px; height:64px; border-radius:50%; background:var(--c-success-bg);
  color:var(--c-success); display:flex; align-items:center; justify-content:center; animation:pop .35s var(--ease); }
.check-badge svg { width:30px; height:30px; }
@keyframes pop { from { transform:scale(.7); opacity:0; } to { transform:scale(1); opacity:1; } }
.done-block h2 { font-size:var(--text-xl); font-weight:700; letter-spacing:-.01em; }
.done-block p { font-size:var(--text-md); color:var(--c-text-muted); }

.foot { margin-top:24px; padding-top:18px; border-top:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.foot.hide { display:none; }
.foot .hint { font-size:var(--text-sm); color:var(--c-text-faint); display:flex; align-items:center; gap:6px; }
.foot .hint .mono { color:var(--c-text-muted); }
.foot-actions { display:flex; align-items:center; gap:8px; }
#analyze-retry.hide { display:none; }
/* On failure the spinner ring keeps its position but stops spinning (danger tint),
   and the animated dots are hidden — so it reads as stopped, not still working. */
.analyzing.error .ring { animation:none; border-color:var(--c-danger-bg); border-top-color:var(--c-danger); }
.analyzing.error .dots { display:none; }

/* ── Step 1 refinements: result card, recovery disclosure, sessions collapse ── */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }
.drop-zone:focus-within { border-color:var(--c-accent); background:var(--c-accent-tint); }
label.btn:focus-within { outline:2px solid var(--c-accent); outline-offset:2px; }

.btn-sm { min-height:32px; padding:6px 11px; font-size:var(--text-sm); }
.btn-sm svg { width:13px; height:13px; }

/* Uploaded result card — shown via body.has-file, replaces the drop zone */
.result-card { display:none; align-items:stretch; gap:16px; margin-top:14px;
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:16px; }
body.has-file .upload-card { display:none; }
body.has-file .result-card { display:flex; }
.result-thumb { width:78px; flex-shrink:0; border-radius:var(--r-sm);
  border:1px solid var(--c-border-strong); background:var(--c-surface-2);
  position:relative; display:flex; align-items:center; justify-content:center;
  color:var(--c-accent); overflow:hidden; }
.result-thumb img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.result-thumb .ext { position:absolute; bottom:0; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:var(--text-2xs); font-weight:600; letter-spacing:.06em;
  color:var(--c-text-faint); background:var(--c-surface); padding:2px 0; border-top:1px solid var(--c-border); }
.result-main { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.result-badge { display:inline-flex; align-items:center; gap:5px; font-size:var(--text-2xs);
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--c-success); }
.result-badge svg { width:13px; height:13px; }
.result-name { font-size:var(--text-lg); font-weight:600; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-meta { font-size:var(--text-sm); color:var(--c-text-muted);
  font-family:var(--mono); font-variant-numeric:tabular-nums; }
.result-tools { display:flex; gap:7px; margin-top:9px; }
.result-tools .btn { margin-top:0; justify-content:center; }
.result-cta { display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  gap:9px; flex-shrink:0; max-width:220px; }
.phi-note { display:flex; align-items:flex-start; gap:6px; font-size:var(--text-sm);
  line-height:1.4; color:var(--c-warn); text-align:right; font-weight:500; }
.phi-note svg { width:14px; height:14px; flex-shrink:0; margin-top:1px; }

/* Recovery disclosure — Import ZIP + Redeem key, collapsed by default */
/* Pricing at a glance (step 1) — quiet inline row, not a banner */
.pricing-strip { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin-top:18px;
  font-size:var(--text-sm); color:var(--c-text-faint); }
.price-item { display:inline-flex; align-items:center; gap:6px; line-height:1.4; }
.price-item svg { width:13px; height:13px; flex-shrink:0; color:var(--c-success); stroke:var(--c-success); }
.price-item strong { color:var(--c-text); font-weight:600; }

.recovery { margin-top:14px; }
.recovery-toggle { display:inline-flex; align-items:center; gap:8px; background:none; border:none;
  font-family:inherit; font-size:var(--text-sm); font-weight:500; color:var(--c-text-muted);
  min-height:32px; cursor:pointer; padding:6px 6px 6px 4px; border-radius:var(--r-sm); transition:color .12s var(--ease); }
.recovery-toggle:hover { color:var(--c-text); }
.recovery-toggle .chev { width:13px; height:13px; transition:transform .15s var(--ease); }
.recovery.open .recovery-toggle .chev { transform:rotate(90deg); }
.recovery-panel { display:none; margin-top:8px; flex-direction:column; gap:10px; }
.recovery.open .recovery-panel { display:flex; }
.recovery-panel .import-row { margin-top:0; }
.key-field { display:flex; gap:8px; align-items:center; }
.key-input { font-family:var(--mono); font-size:var(--text-sm); letter-spacing:.04em;
  border:1px solid var(--c-control-border); border-radius:var(--r-sm); padding:8px 10px;
  width:160px; color:var(--c-text); background:var(--c-surface); }
.key-input:focus { outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft); }
.key-input::placeholder { color:var(--c-text-faint); }

/* Saved-sessions lead copy + collapse controls */
.sessions-lead { color:var(--c-text-muted); font-size:var(--text-base); margin:-6px 0 16px; max-width:60ch; }
body.has-file .sessions { margin-top:22px; }
body.has-file .sessions-lead { display:none; }
.sessions-clear { margin-left:auto; border:none; background:none; font-family:inherit;
  font-size:var(--text-sm); font-weight:500; color:var(--c-text-muted); cursor:pointer;
  min-height:32px; padding:4px 8px; border-radius:var(--r-sm); transition:background .12s var(--ease),color .12s var(--ease); }
.sessions-clear:hover { background:var(--action-hover); color:var(--c-text); }
.sessions-collapse { display:none; border:none; background:none; font-family:inherit;
  font-size:var(--text-sm); font-weight:500; color:var(--c-text-muted); cursor:pointer;
  min-height:32px; padding:4px 8px; border-radius:var(--r-sm); align-items:center; gap:5px;
  transition:background .12s var(--ease),color .12s var(--ease); }
.sessions-collapse:hover { background:var(--action-hover); color:var(--c-text); }
.sessions-collapse svg { width:14px; height:14px; }
body.has-file .sessions.open .sessions-collapse { display:inline-flex; }
.sessions-collapsed { display:none; width:100%; align-items:center; gap:11px;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); padding:12px 15px; font-family:inherit; font-size:var(--text-base);
  font-weight:600; color:var(--c-text); cursor:pointer; text-align:left;
  transition:border-color .12s var(--ease),background .12s var(--ease); }
.sessions-collapsed:hover { border-color:var(--c-border-strong); background:var(--c-surface-2); }
.sessions-collapsed .lead-ic { width:30px; height:30px; border-radius:var(--r-sm); flex-shrink:0;
  background:var(--c-accent-tint); color:var(--c-accent); display:flex; align-items:center; justify-content:center; }
.sessions-collapsed .lead-ic svg { width:16px; height:16px; }
.sessions-collapsed .chev { width:15px; height:15px; margin-left:auto; color:var(--c-text-faint); }
body.has-file .sessions:not(.open) .sessions-head,
body.has-file .sessions:not(.open) .saved-sessions-grid { display:none; }
body.has-file .sessions:not(.open) .sessions-collapsed { display:flex; }

/* ── Step 3: Editor ──────────────────────────────────────────────────── */
.editor-layout { display:flex; flex:1; overflow:hidden; width:100%; }

/* Page rail */
.page-list { width:98px; background:var(--c-surface); border-right:1px solid var(--c-border);
  display:flex; flex-direction:column; gap:10px; padding:12px 10px; overflow-y:auto; flex-shrink:0; }
.page-list .rail-head { display:flex; align-items:center; justify-content:space-between; }
.page-tab { cursor:pointer; position:relative; }
.page-open { appearance:none; -webkit-appearance:none; display:block; width:100%; padding:0;
  border:0; background:none; color:inherit; font:inherit; text-align:inherit; cursor:pointer;
  border-radius:var(--r-md); }
.page-open:focus-visible { outline:3px solid var(--c-accent); outline-offset:2px; }
.page-tab .thumb { width:100%; min-height:122px; background:#fff; border:1px solid var(--c-border);
  border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  color:var(--c-text-faint); font-size:var(--text-xs); box-shadow:var(--shadow-sm); overflow:hidden;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease); }
.page-tab .thumb img { width:100%; display:block; }
.page-tab:hover .thumb { border-color:var(--c-border-strong); }
.page-tab.active .thumb { border-color:var(--c-accent); box-shadow:0 0 0 2px var(--c-accent-soft); }
.page-tab .cap { display:block; text-align:center; font-size:var(--text-xs); font-weight:500;
  color:var(--c-text-muted); margin-top:5px; }
.page-tab.active .cap { color:var(--c-accent); }
.page-tab.excluded .thumb { opacity:.4; filter:grayscale(1); border-style:dashed; }
.page-tab.excluded .cap { color:var(--c-text-faint); text-decoration:line-through; }
.page-excl-btn { position:absolute; top:5px; right:5px; width:28px; height:28px;
  border:1px solid var(--c-border); background:rgba(255,255,255,.94); border-radius:var(--r-sm);
  color:var(--c-text-faint); cursor:pointer; display:flex; align-items:center; justify-content:center;
  line-height:0; box-shadow:var(--shadow-sm); opacity:0;
  transition:opacity .15s var(--ease),background .12s var(--ease),color .12s var(--ease); }
.page-tab:hover .page-excl-btn, .page-tab.excluded .page-excl-btn,
.page-excl-btn:focus-visible { opacity:1; }
.page-excl-btn:hover { background:var(--c-danger-bg); color:var(--c-danger); }
.page-tab.excluded .page-excl-btn { color:var(--c-success); }
.page-excl-btn svg { width:12px; height:12px; }

/* Canvas excluded banner */
.excluded-banner { position:absolute; inset:0; z-index:25; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; background:rgba(244,246,251,.78);
  color:var(--c-text-muted); font-size:var(--text-base); font-weight:600; backdrop-filter:saturate(.6); }

/* Layers panel */
.layers-panel { width:200px; background:var(--c-surface); border-right:1px solid var(--c-border);
  display:flex; flex-direction:column; flex-shrink:0; overflow:hidden; }
.layers-head { padding:12px 12px 10px; display:flex; flex-direction:column; gap:9px;
  border-bottom:1px solid var(--c-border); }
.layers-title { display:flex; align-items:center; gap:8px; }
.layers-title .count-badge { background:var(--c-bg); border:none; }
.search-wrap { position:relative; display:flex; align-items:center; }
.search-wrap svg { position:absolute; left:9px; width:14px; height:14px; color:var(--c-text-faint); pointer-events:none; }
#layer-search { width:100%; padding:7px 8px 7px 30px; border:1px solid var(--c-control-border);
  border-radius:var(--r-sm); font-size:var(--text-base); font-family:inherit; color:var(--c-text); background:var(--c-surface); }
#layer-search::placeholder { color:var(--c-text-faint); }
#layer-search:focus { outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft); }

.layer-list { flex:1; overflow-y:auto; padding:6px; }
.layer-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--r-sm);
  font-size:var(--text-base); cursor:pointer; transition:background .12s var(--ease); }
.layer-row:hover { background:var(--action-hover); }
.layer-row.selected { background:var(--action-selected); }
.layer-row.selected .layer-name { color:var(--c-accent); font-weight:600; }
/* The type-dot doubles as a click-to-check "done" review toggle: the button is
   the (padded, transparent) hit area; the inner .layer-dot is the visible 9px
   square, hollow normally and filled with its own type colour when done. */
.layer-dot-btn { border:none; background:none; padding:0; margin:0; cursor:pointer;
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin:-5px 0 -5px -7px; border-radius:var(--r-sm);
  transition:background .12s var(--ease); }
.layer-dot-btn:hover { background:var(--action-hover); }
.layer-dot { width:9px; height:9px; border-radius:2px; border:2px solid currentColor;
  color:var(--c-text-faint); flex-shrink:0; box-sizing:border-box;
  transition:background .12s var(--ease); }
.layer-dot[data-type="text"]{color:var(--ft-text);}
.layer-dot[data-type="checkbox"]{color:var(--ft-checkbox);}
.layer-dot[data-type="textarea"]{color:var(--ft-textarea);}
.layer-dot[data-type="date"]{color:var(--ft-date);}
.layer-dot[data-type="signature"]{color:var(--ft-signature);}
.layer-dot[data-type="drawing"]{color:var(--ft-drawing);}
.layer-dot.done { background:currentColor; }
.layer-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border:0; background:none; padding:3px 1px; min-width:0; text-align:left; cursor:pointer;
  font-family:var(--mono); font-size:var(--text-sm); color:var(--c-text); }
.layer-row.done .layer-name { text-decoration:line-through; color:var(--c-text-muted); }
.layer-act { border:none; background:none; cursor:pointer; padding:2px 3px; line-height:1;
  min-width:28px; min-height:28px;
  color:var(--c-text-faint); border-radius:4px; font-size:var(--text-sm); opacity:.55;
  transition:opacity .12s,background .12s,color .12s; }
.layer-row:hover .layer-act { opacity:1; }
.layer-act:hover { background:var(--c-accent-tint); color:var(--c-accent); }
.layer-rename { flex:1; font-size:var(--text-sm); font-family:var(--mono); padding:1px 4px;
  border:1px solid var(--c-accent); border-radius:4px; }
.layer-empty { color:var(--c-text-muted); font-size:var(--text-sm); padding:8px; text-align:center; }

/* Collapse / expand: .collapsed narrows the panel to a slim re-open rail. */
.panel-chev { margin-left:auto; width:28px; height:28px; border:none; background:none;
  border-radius:var(--r-sm); color:var(--c-text-faint); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; }
.panel-chev:hover { background:var(--action-hover); color:var(--c-text); }
.panel-chev svg { width:14px; height:14px; }
.layers-reopen { display:none; }
.layers-panel.collapsed { width:28px; }
.layers-panel.collapsed .layers-head,
.layers-panel.collapsed .layer-list,
.layers-panel.collapsed .legend { display:none; }
.layers-panel.collapsed .layers-reopen { display:flex; flex:1; flex-direction:column;
  align-items:center; gap:8px; padding:10px 0; border:none; background:none; cursor:pointer;
  color:var(--c-text-muted); font:inherit; }
.layers-panel.collapsed .layers-reopen:hover { background:var(--action-hover); color:var(--c-text); }
.layers-reopen .reopen-label { writing-mode:vertical-rl; font-size:var(--text-xs);
  font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.layers-reopen svg { width:14px; height:14px; flex-shrink:0; }
.layers-reopen .count-badge { background:var(--c-bg); border:none; }

/* Legend */
.legend { border-top:1px solid var(--c-border); padding:10px 12px; display:flex; flex-direction:column; gap:7px; }
.legend-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; }
.legend-item { display:flex; align-items:center; gap:6px; font-size:var(--text-xs); color:var(--c-text-muted); }
.legend-dot { width:9px; height:9px; border-radius:2px; border:2px solid; }
.legend-dot.text{border-color:var(--ft-text);}
.legend-dot.checkbox{border-color:var(--ft-checkbox);}
.legend-dot.textarea{border-color:var(--ft-textarea);}
.legend-dot.date{border-color:var(--ft-date);}
.legend-dot.signature{border-color:var(--ft-signature);}
.legend-dot.drawing{border-color:var(--ft-drawing);}

/* Canvas */
.canvas-area { flex:1; display:flex; flex-direction:column; overflow:hidden;
  background:var(--c-bg); min-width:0; position:relative; }
.canvas-toolbar { background:var(--c-surface); border-bottom:1px solid var(--c-border);
  padding:7px 12px; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tb-left { display:flex; align-items:center; gap:6px; }
.tb-right { margin-left:auto; display:flex; align-items:center; gap:6px; }
.tb-group { display:flex; align-items:center; gap:4px; }
.tb-div { width:1px; height:20px; background:var(--c-border-strong); margin:0 7px; flex-shrink:0; }
/* "|" divider in .tb-right separating the Preview group from the distinct Save action. */
.tb-sep { user-select:none; line-height:1; font-size:var(--text-lg); color:var(--c-text-faint); }
.tb-sep-div { margin:0 2px; color:var(--c-border-strong); }

.icon-toggle { width:32px; height:32px; padding:0; justify-content:center;
  border:1px solid var(--c-border-strong); border-radius:var(--r-sm); background:var(--c-surface);
  color:var(--c-text-muted); cursor:pointer; display:inline-flex; align-items:center;
  transition:all .12s var(--ease); }
.icon-toggle svg { width:16px; height:16px; }
.icon-toggle:hover { background:var(--action-hover); color:var(--c-text); }
.icon-toggle.on { background:var(--c-accent-tint); border-color:var(--c-accent); color:var(--c-accent); }
/* Split toggle: main icon button + narrow caret opening a dropdown */
.split-toggle { display:inline-flex; }
.split-toggle > .icon-toggle:first-child { border-top-right-radius:0; border-bottom-right-radius:0; }
.split-caret { width:26px; margin-left:-1px; border-top-left-radius:0; border-bottom-left-radius:0; }
.split-caret svg { width:11px; height:11px; }
.split-caret[aria-expanded="true"] { background:var(--action-hover); color:var(--c-text); }
/* Editor tool group (cursor / add-field) + labelled toolbar buttons */
.tool-group { display:flex; align-items:center; gap:3px; }
.tb-label { font-size:var(--text-xs); font-weight:600; color:var(--c-text-faint);
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; margin:0 1px; }
.tool-btn-labeled { width:auto; padding:0 10px; gap:6px; }
.tool-btn-labeled span { font-size:var(--text-sm); font-weight:500; white-space:nowrap; }

.last-saved { font-size:var(--text-sm); color:var(--c-text-faint); white-space:nowrap;
  display:flex; align-items:center; gap:5px; margin-right:4px; }
.last-saved svg { width:13px; height:13px; color:var(--c-success); }

.zoom-wrap { display:flex; align-items:center; height:32px; border:1px solid var(--c-border-strong);
  border-radius:var(--r-sm); background:var(--c-surface); overflow:hidden;
  transition:border-color .12s var(--ease),box-shadow .12s var(--ease); }
.zoom-wrap:focus-within { border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft); }
.zoom-ic { border:none; background:none; cursor:pointer; color:var(--c-text-faint);
  display:flex; align-items:center; justify-content:center; width:30px; height:100%; flex-shrink:0;
  font-size:var(--text-lg); transition:background .12s var(--ease),color .12s var(--ease); }
.zoom-ic:first-child { border-right:1px solid var(--c-border); }
.zoom-ic:last-child { border-left:1px solid var(--c-border); }
.zoom-ic:hover { background:var(--action-hover); color:var(--c-accent); }
.zoom-ic svg { width:15px; height:15px; }
.zoom-wrap select, #zoom-preset { border:none; background:none; outline:none; font-family:inherit;
  font-size:var(--text-base); font-weight:500; color:var(--c-text); cursor:pointer; padding:0 6px;
  height:100%; text-align:center; font-variant-numeric:tabular-nums; max-width:104px; }

/* Field-type palette (floats bottom-right of the workspace) */
.field-palette { position:absolute; bottom:48px; right:20px; z-index:50; width:188px;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); padding:9px; display:flex; flex-direction:column; gap:2px; }
.field-palette:not([open]) { display:none; }
.field-palette > summary { list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:10px; padding:2px 5px 8px; }
.field-palette > summary::-webkit-details-marker { display:none; }
.field-palette:not([open]) > summary { padding-bottom:2px; }
.fp-chev { color:var(--c-text-faint); width:15px; height:15px; transition:transform .15s var(--ease); }
.field-palette[open] .fp-chev { transform:rotate(180deg); }
.fp-item { display:flex; align-items:center; gap:9px; padding:7px 8px; border:none; background:none;
  border-radius:var(--r-sm); cursor:pointer; font-family:inherit; font-size:var(--text-base); font-weight:500;
  color:var(--c-text); text-align:left; width:100%;
  transition:background .12s var(--ease),color .12s var(--ease); }
.fp-item:hover { background:var(--c-accent-tint); color:var(--c-accent); }
.fp-dot { width:11px; height:11px; border-radius:3px; border:2px solid; flex-shrink:0; }
.fp-item[data-type="text"] .fp-dot{border-color:var(--ft-text);}
.fp-item[data-type="checkbox"] .fp-dot{border-color:var(--ft-checkbox);}
.fp-item[data-type="textarea"] .fp-dot{border-color:var(--ft-textarea);}
.fp-item[data-type="date"] .fp-dot{border-color:var(--ft-date);}
.fp-item[data-type="signature"] .fp-dot{border-color:var(--ft-signature);}
.fp-item[data-type="drawing"] .fp-dot{border-color:var(--ft-drawing);}
.fp-item .plus { margin-left:auto; color:var(--c-text-faint); display:flex; opacity:0;
  transition:opacity .12s var(--ease),color .12s var(--ease); }
.fp-item:hover .plus { opacity:1; color:var(--c-accent); }
.fp-item .plus svg { width:14px; height:14px; }
/* Armed field type (create mode) — mirrors .field-overlay.selected so the palette
   button and the placed field read as the same "selected" state. The right-hand
   plus is a hover-only affordance, so hide it once a type is selected. */
.fp-item.active { background:color-mix(in srgb,var(--ft-selected) 16%,transparent);
  box-shadow:inset 0 0 0 1.5px var(--ft-selected); color:var(--c-text); }
.fp-item.active .plus { opacity:0; }

/* Attention pulse when the toolbar "Add Field" button is clicked. */
@keyframes fp-pulse {
  0%   { outline:2px solid color-mix(in srgb,var(--c-accent) 75%,transparent); outline-offset:0; }
  100% { outline:2px solid transparent; outline-offset:8px; }
}
.field-palette.pulse { animation:fp-pulse .55s var(--ease); }

/* Form-options panel — bottom-left of the workspace (mirrors the field palette) */
.form-options { position:absolute; bottom:48px; left:20px; z-index:50; width:262px;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); padding:9px; }
.form-options > summary { list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:10px; padding:2px 5px; }
.form-options > summary::-webkit-details-marker { display:none; }
.form-options[open] .fp-chev { transform:rotate(180deg); }
.form-options[open] > summary { padding-bottom:8px; }
.fo-body { display:flex; flex-direction:column; gap:10px; }
.fo-body .field-group { display:flex; flex-direction:column; gap:4px; }
.fo-body label { font-size:var(--text-sm); font-weight:500; color:var(--c-text); }
.fo-body select, .fo-body input[type="text"] { width:100%; min-height:36px; padding:7px 9px;
  border:1px solid var(--c-control-border); border-radius:var(--r-sm); background:var(--c-surface);
  color:var(--c-text); font:inherit; }
.fo-body select:focus, .fo-body input[type="text"]:focus { border-color:var(--c-accent);
  box-shadow:0 0 0 3px var(--c-accent-soft); }
.fo-body .hint { font-size:var(--text-xs); color:var(--c-text-faint); }
#form-sig-hint { color:var(--c-danger); font-weight:500; margin:0; }
.form-options.docked { position:static; inset:auto; z-index:auto; width:100%; max-height:46%;
  flex:0 0 auto; overflow:auto; border-width:1px 0 0; border-radius:0;
  box-shadow:none; background:var(--c-surface); }
.form-options.docked > summary { min-height:40px; padding:8px 12px; }
.form-options.docked[open] > summary { padding-bottom:8px; }
.form-options.docked .fo-body { padding:0 7px 7px; }

/* Bottom-button preset radios */
.bb-group { display:flex; flex-direction:column; gap:5px; }
.bb-opt { display:flex; align-items:center; gap:8px; font-size:var(--text-sm); font-weight:500;
  min-height:32px; color:var(--c-text); cursor:pointer; }
.bb-opt input { accent-color:var(--c-accent); cursor:pointer; margin:0; flex-shrink:0; }
/* Disabled preset → clearly locked out: dimmed + struck through (sibling combinator
   so the label text styles even without :has support). */
.bb-opt input:disabled { cursor:not-allowed; }
.bb-opt input:disabled + .bb-lbl { color:var(--c-text-faint); cursor:not-allowed;
  text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--c-text-faint) 80%,transparent); }
.bb-opt input:disabled + .bb-lbl .bb-rec { color:var(--c-text-faint); }
.bb-drawn { margin-top:3px; }
.bb-rec { font-size:var(--text-2xs); font-weight:600; color:var(--c-accent);
  text-transform:uppercase; letter-spacing:.04em; }

/* `safe center` keeps the page centred when it fits, but falls back to flex-start
   when it's wider than the viewport (zoomed in) — otherwise the left edge overflows
   out of reach and the canvas "jumps"/can't be scrolled to. */
.canvas-scroll { flex:1; overflow:auto; display:flex; justify-content:safe center; padding:28px; }
.form-canvas { display:flex; flex-direction:column; gap:24px; align-items:center; }
.page-scale-box { overflow:visible; flex-shrink:0; }
.page-wrapper { position:relative; align-self:flex-start; background:#fff; width:750px;
  box-shadow:var(--shadow-md); border-radius:2px; cursor:default; --zoom:1; }
.page-wrapper.add-mode { cursor:crosshair; }
.page-wrapper img.bg-img { display:block; width:750px; }

/* Field overlays. No overflow:hidden — it clipped the outer half of the resize
   handles (they sit at negative offsets), leaving only the inner quadrant grabbable;
   the label clips itself (ellipsis + max-width). container-type:size is safe here:
   overlay geometry is always set explicitly in style, never by content. */
.field-overlay { position:absolute; border:1.5px solid currentColor;
  border-color:color-mix(in srgb,currentColor 60%,transparent); border-radius:2px;
  background:color-mix(in srgb,currentColor 13%,transparent); cursor:move;
  display:flex; align-items:center; padding:0 2px; container-type:size; user-select:none;
  line-height:1.1; transition:box-shadow .1s,background .12s var(--ease),border-color .12s var(--ease); }
.field-overlay:hover { border-color:currentColor; background:color-mix(in srgb,currentColor 24%,transparent); }
.field-overlay .field-label { font-size:var(--text-2xs); color:inherit; pointer-events:none; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100%; opacity:.85; font-family:var(--mono); }
/* No min-height here: the overlay must show the field's TRUE stored height (WYSIWYG
   with the export) — the storage floors (normalizeField/minSize/enforce_min_text_height)
   keep fields tall enough to stay grabbable. */
.field-overlay[data-type="text"]{color:var(--ft-text);}
.field-overlay[data-type="date"]{color:var(--ft-date);}
.field-overlay[data-type="checkbox"]{color:var(--ft-checkbox);}
.field-overlay[data-type="textarea"]{color:var(--ft-textarea);}
.field-overlay[data-type="signature"]{color:var(--ft-signature);}
.field-overlay[data-type="drawing"]{color:var(--ft-drawing);}
.field-overlay.selected { border-color:#fff!important;
  box-shadow:0 0 0 1px #fff, 0 0 0 3px var(--ft-selected);
  background:color-mix(in srgb,var(--ft-selected) 18%,transparent); z-index:10; }
.field-overlay:focus-visible { outline:3px solid var(--c-accent); outline-offset:3px; }
.field-overlay.locked { border-style:dashed; opacity:.72; }
/* Resize handles. Sizes/offsets counter-scale via calc(px / var(--zoom)) — the
   page-wrapper's transform:scale() cancels out, so handles stay a constant ~9px
   on screen from 25% to 300% zoom (canvas.js sets --zoom on the wrapper). */
.field-overlay .rh { position:absolute; background:var(--ft-selected);
  border:1px solid #fff; border-radius:999px; display:none; pointer-events:auto; z-index:11; }
.field-overlay.selected .rh { display:block; }
/* Corners — resize both axes */
.field-overlay .rh-nw, .field-overlay .rh-ne, .field-overlay .rh-sw, .field-overlay .rh-se {
  width:calc(9px / var(--zoom,1)); height:calc(9px / var(--zoom,1)); }
.field-overlay .rh-nw { top:calc(-5px / var(--zoom,1)); left:calc(-5px / var(--zoom,1)); cursor:nwse-resize; }
.field-overlay .rh-ne { top:calc(-5px / var(--zoom,1)); right:calc(-5px / var(--zoom,1)); cursor:nesw-resize; }
.field-overlay .rh-sw { bottom:calc(-5px / var(--zoom,1)); left:calc(-5px / var(--zoom,1)); cursor:nesw-resize; }
.field-overlay .rh-se { bottom:calc(-5px / var(--zoom,1)); right:calc(-5px / var(--zoom,1)); cursor:nwse-resize; }
/* Edge midpoints — resize one axis; pill shape signals the direction */
.field-overlay .rh-n, .field-overlay .rh-s {
  width:calc(13px / var(--zoom,1)); height:calc(5px / var(--zoom,1));
  left:50%; transform:translateX(-50%); cursor:ns-resize; }
.field-overlay .rh-n { top:calc(-3px / var(--zoom,1)); }
.field-overlay .rh-s { bottom:calc(-3px / var(--zoom,1)); }
.field-overlay .rh-e, .field-overlay .rh-w {
  width:calc(5px / var(--zoom,1)); height:calc(13px / var(--zoom,1));
  top:50%; transform:translateY(-50%); cursor:ew-resize; }
.field-overlay .rh-e { right:calc(-3px / var(--zoom,1)); }
.field-overlay .rh-w { left:calc(-3px / var(--zoom,1)); }
/* Tiny fields (e.g. 12×12 checkboxes): the midpoints would crowd the corners —
   hide them per axis; the corners still resize both axes. Model-px thresholds. */
@container (max-width: 30px) {
  .field-overlay.selected .rh-n, .field-overlay.selected .rh-s { display:none; }
}
@container (max-height: 24px) {
  .field-overlay.selected .rh-e, .field-overlay.selected .rh-w { display:none; }
}

/* Status bar */
.status-bar { flex-shrink:0; display:flex; align-items:center; gap:9px; padding:6px 14px;
  background:var(--c-surface); border-top:1px solid var(--c-border); font-size:var(--text-sm);
  color:var(--c-text-muted); font-variant-numeric:tabular-nums; }
.status-sep { color:var(--c-border-strong); }
.status-coords { margin-left:auto; color:var(--c-text-faint); }

/* ── Properties panel ────────────────────────────────────────────────── */
.props-panel { width:236px; background:var(--c-surface); border-left:1px solid var(--c-border);
  display:flex; flex-direction:column; flex-shrink:0; overflow:hidden; }
.props-placeholder { display:flex; align-items:center; justify-content:center; flex:1;
  padding:20px; text-align:center; color:var(--c-text-muted); font-size:var(--text-base); }
.props-head { padding:14px 16px; border-bottom:1px solid var(--c-border); display:flex; flex-direction:column; gap:9px; }
.ph-title { display:flex; align-items:center; justify-content:space-between; }
.type-chip { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px;
  color:var(--ft-text); background:color-mix(in srgb,var(--ft-text) 10%,#fff); }
.type-chip .dot { width:8px; height:8px; border-radius:2px; border:2px solid; border-color:var(--ft-text); }
.props-fieldname { font-family:var(--mono); font-size:var(--text-base); font-weight:500; color:var(--c-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.props-form { display:flex; flex-direction:column; flex:1; overflow:hidden; }
.props-scroll { flex:1; overflow-y:auto; overflow-x:hidden; }
.props-section { padding:14px 16px; border-bottom:1px solid var(--c-border); display:flex; flex-direction:column; gap:11px; }
.props-section > .overline { margin-bottom:-1px; }
.field-group { display:flex; flex-direction:column; gap:5px; }
.field-group > label, .field-label-row > label { font-size:var(--text-sm); font-weight:600; color:var(--c-text-muted);
  display:flex; align-items:baseline; gap:6px; }
.field-label-row { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.field-group .hint { font-size:var(--text-xs); font-weight:400; color:var(--c-text-faint); }
/* Info (?) tooltip triggers next to each control's label */
.info-tip { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  flex-shrink:0; border:1px solid var(--c-border-strong); border-radius:50%; color:var(--c-text-faint);
  padding:0; background:var(--c-surface); font-family:inherit; font-size:10px; font-weight:700;
  line-height:1; cursor:help; user-select:none; }
.info-tip:hover, .info-tip:focus-visible { border-color:var(--c-accent); color:var(--c-accent);
  outline:none; box-shadow:0 0 0 3px var(--c-accent-soft); }
.field-check .info-tip { margin-left:auto; }
.field-group input[type="text"], .field-group input[type="number"], .field-group select, .field-group textarea {
  padding:7px 9px; border:1px solid var(--c-control-border); border-radius:var(--r-sm);
  font-size:var(--text-base); color:var(--c-text); background:var(--c-surface); width:100%; font-family:inherit; }
.field-group textarea { resize:vertical; min-height:54px; line-height:1.4; }
.field-group input.mono { font-family:var(--mono); font-size:var(--text-sm); }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus { outline:none;
  border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft); }
.field-group input.is-dirty, .field-group input:disabled, .field-group textarea:disabled { background:var(--c-surface-2); }
/* Inline checkbox rows (prechecked / readonly / date-picker) */
.field-check { flex-direction:row; align-items:center; gap:8px; justify-content:flex-start; }
.field-check input[type="checkbox"] { width:auto; }

.coords-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.coord-field { display:flex; align-items:center; gap:8px; border:1px solid var(--c-border-strong);
  border-radius:var(--r-sm); padding:0 10px; height:34px; background:var(--c-surface);
  transition:border-color .12s var(--ease),box-shadow .12s var(--ease); }
.coord-field:focus-within { border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft); }
.coord-field .k { font-family:var(--mono); font-size:var(--text-xs); font-weight:500; color:var(--c-text-faint);
  width:10px; text-align:center; flex-shrink:0; }
.coord-field input { border:none; outline:none; background:none; font-family:var(--mono);
  font-size:var(--text-base); color:var(--c-text); width:100%; min-width:0; padding:0; -moz-appearance:textfield; }
.coord-field input::-webkit-outer-spin-button, .coord-field input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Position d-pad */
.pos-b { display:flex; align-items:center; gap:13px; }
.dpad { display:grid; grid-template-columns:repeat(3,30px); grid-template-rows:repeat(3,30px); gap:3px; flex-shrink:0; }
.dp { border:1px solid var(--c-border-strong); background:var(--c-surface); border-radius:var(--r-sm);
  color:var(--c-text-muted); cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;
  transition:background .12s var(--ease),border-color .12s var(--ease),color .12s var(--ease); }
.dp:hover { background:var(--c-accent-tint); border-color:var(--c-accent); color:var(--c-accent); }
.dp:disabled { opacity:.4; cursor:default; }
.dp:disabled:hover { background:var(--c-surface); border-color:var(--c-border-strong); color:var(--c-text-muted); }
.coord-field:has(input:disabled) { opacity:.55; }
.dp svg { width:14px; height:14px; }
.dp-up{grid-area:1/2;} .dp-left{grid-area:2/1;} .dp-right{grid-area:2/3;} .dp-down{grid-area:3/2;}
.dp-center{grid-area:2/2; display:flex; align-items:center; justify-content:center; color:var(--c-text-faint);}
.dp-center svg{ width:15px; height:15px; }
.pos-b-vals { display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; }

.props-foot { padding:12px 16px; border-top:1px solid var(--c-border); }
.btn-danger { width:100%; justify-content:center; background:var(--c-danger-bg); color:var(--c-danger);
  border:1px solid color-mix(in srgb,var(--c-danger) 28%,#fff); padding:8px; border-radius:var(--r-sm);
  font-size:var(--text-base); font-weight:600; font-family:inherit; cursor:pointer; display:inline-flex;
  align-items:center; gap:6px; transition:background .15s var(--ease); }
.btn-danger:hover { background:color-mix(in srgb,var(--c-danger) 14%,#fff); }
.btn-danger svg { width:15px; height:15px; }

/* Multi-select alignment panel */
.align-panel { display:flex; flex-direction:column; gap:12px; padding:14px 16px; overflow-y:auto; }
.align-panel h3 { font-size:var(--text-md); font-weight:600; }
.align-hint { font-size:var(--text-xs); color:var(--c-text-muted); margin:-6px 0 2px; line-height:1.4; }
.align-group { display:flex; flex-direction:column; gap:5px; }
.align-group-title { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--c-text-muted); }
/* One labelled row per action: icon + name + plain-language description */
.align-row { display:flex; align-items:center; gap:10px; width:100%; padding:7px 9px; text-align:left;
  background:var(--c-surface); color:var(--c-text); border:1px solid var(--c-border-strong);
  border-radius:var(--r-sm); cursor:pointer; font-family:inherit;
  transition:background .12s var(--ease),border-color .12s var(--ease); }
.align-row:hover:not(:disabled) { background:var(--action-hover); border-color:var(--c-text-faint); }
.align-row:disabled { opacity:.6; cursor:default; }
.align-row .ic { font-size:18px; color:var(--c-text-muted); flex-shrink:0; }
.ar-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.ar-label { font-size:var(--text-sm); font-weight:600; }
.ar-desc { font-size:var(--text-xs); color:var(--c-text-muted); line-height:1.25; }
/* "Match to" segmented control for the equalize-size actions */
.equalize-ref { display:flex; border:1px solid var(--c-border-strong); border-radius:var(--r-sm); overflow:hidden; }
.er-opt { flex:1; padding:5px 8px; font-size:var(--text-xs); font-weight:600; font-family:inherit;
  background:var(--c-surface); color:var(--c-text-muted); border:none; cursor:pointer; }
.er-opt + .er-opt { border-left:1px solid var(--c-border-strong); }
.er-opt.active { background:var(--c-accent); color:#fff; }

/* Shared props-panel tooltip (driven by tooltip.js) */
#tooltip { position:fixed; z-index:200; max-width:220px; padding:8px 10px; border-radius:var(--r-sm);
  background:var(--c-text); color:#fff; font-size:var(--text-sm); line-height:1.4;
  box-shadow:var(--shadow-lg); pointer-events:none; opacity:0; transition:opacity .12s var(--ease); }
#tooltip.show { opacity:1; }

/* ── Dialogs ─────────────────────────────────────────────────────────── */
.dialog-backdrop { position:fixed; inset:0; background:rgba(16,24,42,.45); display:flex;
  align-items:center; justify-content:center; z-index:100; padding:16px; overflow-y:auto; }
.dialog { background:var(--c-surface); border-radius:var(--r-lg); padding:26px; width:380px;
  max-width:100%; max-height:calc(100dvh - 32px); overflow:auto; display:flex;
  flex-direction:column; gap:16px; box-shadow:var(--shadow-lg); }
.dialog h3 { font-size:var(--text-lg); font-weight:700; }
.dialog label { display:flex; flex-direction:column; gap:6px; font-size:var(--text-base); font-weight:500; color:var(--c-text-muted); }
.dialog input[type="text"] { padding:8px 12px; border:1px solid var(--c-control-border);
  border-radius:var(--r-sm); font-size:var(--text-md); width:100%; font-family:inherit; }
.dialog input[type="text"]:focus { outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft); }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
#readiness-blockers, #readiness-warnings { display:flex; flex-direction:column; gap:7px;
  color:var(--c-text-muted); font-size:var(--text-base); line-height:1.4; }
#readiness-blockers:not(:empty) { color:var(--c-danger); }
#readiness-warnings:not(:empty) { color:var(--c-warn); }
#readiness-blockers ul, #readiness-warnings ul { display:flex; flex-direction:column;
  gap:5px; margin:0; padding-left:20px; }
#readiness-summary { padding:9px 11px; border-radius:var(--r-sm); background:var(--c-surface-2);
  color:var(--c-text); }

/* Payment popup */
.payment-message { font-size:var(--text-md); color:var(--c-text); line-height:1.45; margin:0; }
.payment-key-box { display:flex; flex-direction:column; gap:6px; }
.payment-key-box label { font-size:var(--text-sm); color:var(--c-text-muted); }
.payment-key-box code { display:block; padding:10px 12px; background:var(--c-bg);
  border:1px dashed var(--c-border-strong); border-radius:var(--r-sm); font-family:var(--mono);
  font-size:var(--text-base); word-break:break-all; user-select:all; }
.payment-key-box .copy-key { align-self:flex-start; font-size:var(--text-sm); padding:5px 11px;
  border:1px solid var(--c-border-strong); border-radius:var(--r-sm); background:var(--c-surface);
  color:var(--c-text-muted); cursor:pointer; font-family:inherit; text-decoration:none; }
.payment-key-box .copy-key:hover { border-color:var(--c-accent); color:var(--c-accent); }

/* ── Unified checkout dialog (#checkout-dialog) ─────────────────────────
   One dialog, six modes on [data-mode]; the .co-* blocks show/hide per mode
   so JS only flips the attribute (setCheckoutMode in sessions.js). */
.dialog-checkout { width:440px; }
.dialog-checkout .co-block { display:none; }
.dialog-checkout[data-mode="checkout"] .co-name,
.dialog-checkout[data-mode="checkout"] .co-pitch,
.dialog-checkout[data-mode="download"] .co-name,
.dialog-checkout[data-mode="download"] .co-recovery-action,
.dialog-checkout[data-mode="redirecting"] .co-busy,
.dialog-checkout[data-mode="confirming"] .co-busy,
.dialog-checkout[data-mode="success"] .co-success,
.dialog-checkout[data-mode="error"] .co-error { display:flex; flex-direction:column; gap:12px; }
.dialog-checkout[data-mode="download"] .co-key:not(.hidden),
.dialog-checkout[data-mode="success"] .co-key:not(.hidden) { display:flex; flex-direction:column; gap:12px; }
.co-recovery-action .btn-secondary { align-self:flex-start; }
/* No actions while handing off / confirming — nothing the user should click. */
.dialog-checkout[data-mode="redirecting"] .dialog-actions,
.dialog-checkout[data-mode="confirming"] .dialog-actions { display:none; }

/* ── Stripe-return payment gate (body.stripe-return, set pre-paint in index.html) ──
   Turns the confirming/error dialog into a dedicated payment page: no step panel
   behind it, no header chrome, opaque app-background backdrop. sessions.js lifts
   the class in showStep() / on dialog dismiss. */
body.stripe-return .step-panel { display:none; }
body.stripe-return header { visibility:hidden; }
body.stripe-return #checkout-dialog { background:var(--c-bg); }

/* Pre-JS spinner so the gate never reads as a hung blank page while modules load.
   Sits under the dialog backdrop (z-index 100); vanishes when the class lifts. */
body.stripe-return::after {
  content:''; position:fixed; inset:0; margin:auto;
  width:30px; height:30px; border-radius:50%;
  border:3px solid var(--c-accent-tint); border-top-color:var(--c-accent);
  animation:spin .85s linear infinite; z-index:99;
}
@media (prefers-reduced-motion: reduce) { body.stripe-return::after { animation:none; } }

.co-benefits { list-style:none; display:flex; flex-direction:column; gap:7px; margin:0; padding:0; }
.co-benefits li { position:relative; padding-left:24px; font-size:var(--text-base); color:var(--c-text); line-height:1.4; }
.co-benefits li::before { content:'✓'; position:absolute; left:0; top:0; width:16px; height:16px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--c-success-bg); color:var(--c-success); font-size:var(--text-xs); font-weight:700; }
.co-price { display:flex; align-items:baseline; justify-content:space-between;
  border-top:1px solid var(--c-border); padding-top:11px;
  font-size:var(--text-base); color:var(--c-text-muted); }
.co-price strong { font-size:var(--text-lg); color:var(--c-text); letter-spacing:-.01em; }
.co-trust { display:flex; align-items:center; gap:6px; margin:0;
  font-size:var(--text-sm); color:var(--c-text-faint); }
.co-trust svg { width:13px; height:13px; flex-shrink:0; }

.co-busy { align-items:center; text-align:center; padding:10px 0 4px; }
.co-spinner { width:30px; height:30px; border-radius:50%; border:3px solid var(--c-accent-tint);
  border-top-color:var(--c-accent); animation:spin .85s linear infinite; }
@media (prefers-reduced-motion: reduce) { .co-spinner { animation:none; } }
.co-busy-msg { margin:0; font-size:var(--text-md); color:var(--c-text); line-height:1.45; }

.co-dl-status { margin:0; padding:8px 12px; border-radius:var(--r-sm);
  font-size:var(--text-base); line-height:1.4; background:var(--c-bg); color:var(--c-text-muted); }
.co-dl-status.ok { background:var(--c-success-bg); color:var(--c-success); }
.co-dl-status.fail { background:var(--c-danger-bg); color:var(--c-danger); }
.co-key-label { font-size:var(--text-sm); font-weight:600; color:var(--c-text); }
.co-key-actions { display:flex; gap:8px; }
.co-key-note { margin:0; font-size:var(--text-sm); color:var(--c-text-muted); line-height:1.4; }
.co-emailed { margin:0; font-size:var(--text-base); color:var(--c-text-muted); line-height:1.45; }
.co-emailed:empty { display:none; }

.co-error-msg { margin:0; font-size:var(--text-md); color:var(--c-text); line-height:1.45; }
.co-error-help { margin:0; padding:9px 12px; border-radius:var(--r-sm); background:var(--c-bg);
  font-size:var(--text-sm); color:var(--c-text-muted); line-height:1.45; }

/* Inline validation feedback (duplicate ID, empty export name, etc.) */
.input-error { border-color:var(--c-danger) !important; box-shadow:0 0 0 3px var(--c-danger-bg) !important; }
.err-hint { font-size:var(--text-xs); color:var(--c-danger); }

/* Text-only inline action (e.g. "Retry" in the saved-sessions error state) */
.link-btn { background:none; border:none; padding:0; font:inherit; color:var(--c-accent);
  text-decoration:underline; cursor:pointer; }

/* ── Canvas gestures ─────────────────────────────────────────────────── */
.marquee-rect { position:absolute; border:1px solid var(--c-accent);
  background:rgba(37,99,235,.12); pointer-events:none; z-index:40; }
.create-ghost { position:absolute; border:1.5px dashed var(--c-accent);
  background:rgba(37,99,235,.08); pointer-events:none; z-index:40; }
body.space-pan .page-wrapper, body.space-pan .field-overlay { cursor:grab !important; }
body.panning, body.panning * { cursor:grabbing !important; }

/* Grid overlay + smart guides */
.grid-overlay { position:absolute; inset:0; pointer-events:none; display:none;
  background-image:
    linear-gradient(to right,  rgba(37,99,235,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37,99,235,.10) 1px, transparent 1px);
  background-size:var(--grid-size,10px) var(--grid-size,10px); }
body.show-grid .grid-overlay { display:block; }
.guide-line { position:absolute; background:var(--guide-line); pointer-events:none; z-index:45; }
.guide-line.v { top:0; bottom:0; width:1px; }
.guide-line.h { left:0; right:0; height:1px; }

/* ── Preview mode ────────────────────────────────────────────────────── */
.page-wrapper.preview-mode .field-overlay { display:none !important; }
.preview-layer { position:absolute; inset:0; z-index:30; }
.pv-input, .pv-textarea { position:absolute; border:1px solid var(--pv-field-border); background:var(--pv-bg);
  font-family:sans-serif; font-size:var(--text-sm); padding:0 2px; color:var(--c-text); }
.pv-textarea { resize:none; }
/* Read-only fields (export emits the readonly attr) — subtly greyed, non-editable. */
.pv-input[readonly], .pv-textarea[readonly] { background:var(--pv-readonly-bg); color:var(--pv-readonly-text); }
.pv-checkbox { position:absolute; margin:0; }
/* Print-like view: strip the editor affordances so fields render transparent-over-image,
   exactly like the exported/printed form (mirrors class="noborder" + transparent bg).
   Transparent border, not none — the export's print CSS keeps the 1px border-box border
   so screen/print/editor geometry stay identical. */
body.previewing-print .pv-input, body.previewing-print .pv-textarea {
  border-color:transparent; background:transparent; font-size:var(--text-sm); }
body.previewing-print .pv-sig, body.previewing-print .pv-drawing {
  border-color:transparent; background:transparent; }
.pv-sig { position:absolute; border:2px dotted var(--c-accent); background:var(--pv-bg);
  color:var(--c-text-muted); font-size:var(--text-xs); display:flex; align-items:center; justify-content:center; }
.pv-drawing { position:absolute; border:1px solid var(--pv-drawing-border); background:transparent;
  color:var(--c-text-muted); font-size:var(--text-xs); display:flex; align-items:center; justify-content:center; }
/* Mockup of the exported #BottomButtons bar, shown at the bottom of the form in preview */
.preview-bottombar { position:relative; z-index:31; margin-top:8px; width:750px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:10px 12px; background:var(--pv-bottombar-bg); border:1px dashed var(--c-border); border-radius:var(--r-sm); }
.preview-bottombar .pbb-subject { font-size:var(--text-sm); color:var(--c-text-muted); }
.preview-bottombar .pbb-subject input { width:180px; margin-left:4px; }
.preview-bottombar button { padding:3px 10px; font-family:inherit; font-size:var(--text-sm);
  border:1px solid var(--c-border); border-radius:var(--r-sm); background:var(--c-surface); color:var(--c-text); cursor:default; }
.export-disclaimer { max-width:540px; }
.export-checklist { margin:16px 0 6px; padding:0; color:var(--c-text); list-style:none; counter-reset:export-check; }
.export-checklist li { counter-increment:export-check; display:grid; grid-template-columns:28px 1fr;
  column-gap:10px; padding:10px 0; border-top:1px solid var(--c-border); }
.export-checklist li::before { content:counter(export-check); display:grid; place-items:center; width:24px; height:24px;
  border-radius:50%; background:var(--action-hover); color:var(--c-accent); font-weight:700; font-size:var(--text-sm); }
.export-checklist strong,.export-checklist span { grid-column:2; }
.export-checklist strong { line-height:1.35; }
.export-checklist span { margin-top:2px; color:var(--c-text-muted); font-size:var(--text-sm); line-height:1.45; }
.preview-bottombar .pbb-fax { margin-left:auto; font-size:var(--text-xs); color:var(--c-text-faint); }

/* ── Context menu ────────────────────────────────────────────────────── */
.context-menu { position:fixed; z-index:200; min-width:168px; background:var(--c-surface);
  border:1px solid var(--c-border); border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  padding:4px; font-size:var(--text-base); user-select:none; }
.ctx-item { padding:6px 12px; border-radius:5px; cursor:pointer; }
.ctx-item:hover { background:var(--action-hover); }
.ctx-item.disabled { color:var(--c-text-faint); opacity:.5; cursor:default; }
.ctx-item.disabled:hover { background:transparent; }
.ctx-item.danger { color:var(--c-danger); }
.ctx-sep { height:1px; background:var(--c-border); margin:4px 6px; }
.ctx-check { display:inline-block; width:16px; color:var(--c-accent); }

/* ── Toasts (unified non-blocking notifications; replaces native alert()) ── */
/* Bottom-center: the bottom corners are taken by the field palette (right) and
   the form-options panel (left), so corner toasts covered real controls. */
.toast-region { position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:300;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  max-width:min(420px, calc(100vw - 32px)); pointer-events:none; }
.toast { pointer-events:auto; display:flex; align-items:flex-start; gap:9px;
  padding:10px 12px; border-radius:var(--r-md); background:var(--c-surface);
  border:1px solid var(--c-border-strong); border-left:3px solid var(--c-text-muted);
  box-shadow:var(--shadow-lg); color:var(--c-text); font-size:var(--text-base); cursor:pointer;
  opacity:0; transform:translateY(8px); transition:opacity .18s var(--ease), transform .18s var(--ease); }
.toast.show { opacity:1; transform:none; }
.toast .toast-ic { flex-shrink:0; display:flex; margin-top:1px; }
.toast .toast-ic svg { width:16px; height:16px; }
.toast .toast-msg { min-width:0; }
.toast-error   { border-left-color:var(--c-danger); }
.toast-error   .toast-ic { color:var(--c-danger); }
.toast-success { border-left-color:var(--c-success); }
.toast-success .toast-ic { color:var(--c-success); }
.toast-info    { border-left-color:var(--c-accent); }
.toast-info    .toast-ic { color:var(--c-accent); }
/* Inline toast action (e.g. "Undo" after a delete) */
.toast-action { margin-left:6px; flex-shrink:0; align-self:center; border:none; background:none;
  font:inherit; font-weight:700; color:var(--c-accent); cursor:pointer; padding:2px 6px;
  border-radius:var(--r-sm); }
.toast-action:hover { background:var(--c-accent-tint); }

/* ── Skip link (visually hidden until keyboard-focused) ─────────────────── */
.skip-link { position:absolute; left:12px; top:-48px; z-index:400; padding:8px 14px;
  background:var(--c-brand-800); color:#fff; font-size:var(--text-base); font-weight:600;
  border-radius:var(--r-sm); text-decoration:none; transition:top .12s var(--ease); }
.skip-link:focus { top:8px; }

/* ── Unsaved-changes indicator (header) + autosave status (toolbar) ─────── */
.dirty-dot { width:8px; height:8px; border-radius:50%; background:var(--c-dirty-border);
  flex-shrink:0; box-shadow:0 0 0 3px rgba(214,158,46,.22); }
.last-saved.is-dirty { color:var(--c-warn); }
.last-saved.is-dirty svg { display:none; }

/* ── Upload progress bar (XHR-driven, under the status line) ────────────── */
.upload-progress { margin-top:8px; }
.upload-progress .bar { margin-top:0; }

/* ── Analyze sub-line (live per-page field count) ───────────────────────── */
.analyze-sub { font-size:var(--text-sm); color:var(--c-text-muted); margin-top:2px;
  min-height:1.2em; font-variant-numeric:tabular-nums; }

/* ── Saved-sessions skeleton loader ─────────────────────────────────────── */
.saved-session-card.skeleton { pointer-events:none; }
.saved-session-card.skeleton .session-thumb,
.saved-session-card.skeleton .sk-line {
  background:linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-border) 50%, var(--c-surface-2) 75%);
  background-size:200% 100%; animation:skShimmer 1.4s ease-in-out infinite; }
.saved-session-card.skeleton .sk-line { height:11px; border-radius:4px; margin-top:2px; }
@keyframes skShimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ── Confirm / shortcuts dialogs ────────────────────────────────────────── */
.dialog-body { font-size:var(--text-md); color:var(--c-text-muted); line-height:1.45; margin:0; }
/* .btn-danger is width:100% for the props-panel footer — not inside dialog actions. */
.dialog-actions .btn-danger, .btn-danger.dialog-danger { width:auto; padding:8px 14px; }
.dialog.dialog-wide { width:520px; }
/* Payment dialog success state */
.dialog.dialog-success h3 { color:var(--c-success); display:flex; align-items:center; gap:8px; }
.dialog.dialog-success h3::before { content:'✓'; display:inline-flex; align-items:center;
  justify-content:center; width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:var(--c-success-bg); color:var(--c-success); font-size:var(--text-base); }

/* Editor help + keyboard-shortcut cheat sheet */
.help-quick-start { display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin:14px 0 22px; padding:14px; border:1px solid var(--c-border); border-radius:var(--r-md);
  background:var(--c-accent-soft); }
.help-quick-start strong { display:block; color:var(--c-text); font-size:var(--text-base); }
.help-quick-start p { margin:3px 0 0; color:var(--c-text-muted); font-size:var(--text-sm); line-height:1.4; }
.help-quick-start .btn-secondary { flex-shrink:0; }
.help-shortcuts-title { display:block; margin-bottom:10px; }
.kbd-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; }
.kbd-group { display:flex; flex-direction:column; gap:7px; min-width:0; }
.kbd-group:last-child { grid-column:span 2; }
.kbd-row { display:flex; align-items:center; gap:10px; font-size:var(--text-base); }
.kbd-keys { display:inline-flex; align-items:center; gap:3px; flex-shrink:0; min-width:118px; }
.kbd-plus { color:var(--c-text-faint); font-size:var(--text-xs); }
kbd { font-family:var(--mono); font-size:var(--text-xs); font-weight:500; color:var(--c-text);
  background:var(--c-surface-2); border:1px solid var(--c-border-strong);
  border-bottom-width:2px; border-radius:5px; padding:2px 6px; line-height:1.2; white-space:nowrap; }
.kbd-desc { color:var(--c-text-muted); min-width:0; }

/* One-time editor quick start. Non-modal by design: the highlighted editor
   target remains available while the user reads or dismisses the coachmark. */
.quick-start { position:fixed; z-index:260; width:min(360px,calc(100vw - 24px));
  padding:18px; background:var(--c-surface); border:1px solid var(--c-accent);
  border-radius:var(--r-lg); box-shadow:0 18px 48px rgba(16,24,42,.22); color:var(--c-text); }
.quick-start.quick-start-welcome { left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(420px,calc(100vw - 24px)); }
.quick-start-head { display:flex; align-items:center; min-height:28px; gap:10px; }
.quick-start-progress { margin-left:auto; color:var(--c-text-faint); font-size:var(--text-xs);
  font-variant-numeric:tabular-nums; }
.quick-start-close { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  margin:-5px -5px -5px 0; padding:0; border:0; border-radius:var(--r-sm); background:transparent;
  color:var(--c-text-muted); font:500 22px/1 var(--font); cursor:pointer; }
.quick-start-close:hover, .quick-start-close:focus-visible { color:var(--c-text); background:var(--c-surface-2); }
.quick-start h2 { margin:9px 0 6px; font-size:var(--text-lg); line-height:1.25; }
.quick-start p { margin:0; color:var(--c-text-muted); font-size:var(--text-base); line-height:1.5; }
.quick-start-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.quick-start-nav { display:flex; align-items:center; gap:8px; margin-left:auto; }
.quick-start-target { outline:3px solid var(--c-accent) !important; outline-offset:4px !important;
  box-shadow:0 0 0 7px rgba(37,99,235,.15) !important; }

/* ── Context-menu items are real <button>s (keyboard menu) ──────────────── */
.ctx-item { display:block; width:100%; text-align:left; border:none; background:none;
  font-family:inherit; font-size:var(--text-base); color:var(--c-text); }
.ctx-item:focus-visible { outline:2px solid var(--c-accent); outline-offset:-2px;
  background:var(--action-selected); }
.ctx-item.danger { color:var(--c-danger); }

/* ── Empty-page hint (no fields yet) ────────────────────────────────────── */
.canvas-empty { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; text-align:center; padding:0 60px;
  pointer-events:none; color:var(--c-text-muted); }
.canvas-empty strong { font-size:var(--text-lg); color:var(--c-text); background:rgba(255,255,255,.82);
  padding:2px 10px; border-radius:var(--r-sm); }
.canvas-empty span { font-size:var(--text-base); background:rgba(255,255,255,.82);
  padding:2px 10px; border-radius:var(--r-sm); line-height:1.5; }

/* ── Preview mode hides the editing chrome (WYSIWYG) ────────────────────── */
body.previewing .layers-panel,
body.previewing .props-panel,
body.previewing .field-palette,
body.previewing .form-options,
body.previewing .canvas-empty,
body.previewing #btn-help,
body.previewing .tb-left > *:not(.zoom-wrap) { display:none; }

/* ── Responsive product shell ───────────────────────────────────────────
   Editor precision is supported at 1024px+. All other steps remain fully
   usable down to a 320px viewport. */
@media (max-width:1599px) and (min-width:1024px) {
  .canvas-toolbar { align-items:stretch; flex-direction:column; gap:6px; }
  .tb-left, .tb-right { width:100%; min-width:0; }
  .tb-left { flex-wrap:wrap; }
  .tb-right { margin-left:0; justify-content:flex-end; flex-wrap:wrap; }
}

@media (max-width:1279px) and (min-width:1024px) {
  .page-list { width:64px; padding:9px 6px; gap:8px; }
  .page-tab .thumb { min-height:74px; border-radius:var(--r-sm); }
  .page-tab .cap { font-size:var(--text-2xs); }
  .page-excl-btn { top:3px; right:3px; }
  .layers-panel.collapsed { width:32px; }
  .props-panel { width:236px; }
  .canvas-scroll { padding:20px; }
}

@media (max-width:1023px) {
  .editor-layout { min-width:0; }
  .editor-layout .page-list,
  .editor-layout .layers-panel,
  .editor-layout .props-panel,
  .editor-layout .form-options,
  .editor-layout .status-bar { display:none; }
  .editor-layout .canvas-toolbar { align-items:stretch; flex-direction:column; gap:6px;
    overflow-x:auto; }
  .editor-layout .tb-left, .editor-layout .tb-right { min-width:max-content; }
  .editor-layout .tb-right { margin-left:0; }
  .canvas-scroll { justify-content:flex-start; padding:16px; }
  .field-palette { right:12px; bottom:12px; }
}

@media (max-width:900px) {
  header { gap:10px; padding-inline:12px; }
  .step-indicator { display:none; }
  .step-summary { display:block; }
  body[data-step="3"] .step-summary { margin-left:0; }
  body[data-step="3"] .doc-title-h { max-width:34vw; }
  body[data-step="3"] #form-name-label { max-width:26vw; }
}

@media (max-width:640px) {
  header { height:50px; gap:8px; padding-inline:10px; }
  .brand { gap:6px; }
  .brand-name { font-size:var(--text-base); }
  .brand-name .em { display:none; }
  .brand .mark { width:22px; height:22px; }
  .step-summary { font-size:var(--text-xs); }
  .step-summary strong { font-size:var(--text-sm); }
  body[data-step="3"] .doc-title-h,
  body[data-step="3"] .h-div.editor-only { display:none; }
  body[data-step="3"] .header-right { margin-left:auto; }

  .workspace-inner { padding:22px 16px 40px; }
  .page-head { margin-bottom:16px; }
  .page-head h1 { font-size:var(--text-xl); }
  .page-head p { font-size:var(--text-base); }
  .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-quiet, .btn-export { min-height:40px; }
  .privacy-notice { padding:11px 12px; }
  .upload-card { padding:10px; }
  .drop-zone { padding:26px 14px 24px; }
  .drop-ic { width:48px; height:48px; }
  .result-card, body.has-file .result-card { flex-direction:column; gap:12px; padding:13px; }
  .result-thumb { width:100%; height:116px; }
  .result-cta { width:100%; max-width:none; align-items:stretch; }
  .result-cta .btn, .result-tools .btn { justify-content:center; }
  .phi-note { text-align:left; }
  .result-tools { flex-wrap:wrap; }
  .pricing-strip { flex-direction:column; align-items:flex-start; gap:7px; }
  .import-row { align-items:flex-start; flex-wrap:wrap; padding:12px; }
  .import-txt { min-width:calc(100% - 50px); }
  .import-row > .btn, .import-row > label.btn { margin-left:48px; }
  .key-field { width:100%; flex-wrap:wrap; }
  .key-input { width:100%; min-height:40px; }
  .sessions { margin-top:24px; }
  .sessions-head { flex-wrap:wrap; }
  .sessions-clear { margin-left:0; }
  .saved-sessions-grid { grid-template-columns:1fr; }

  .scene { padding:16px; align-items:flex-start; }
  .analyze-card { width:100%; min-height:0; padding:24px 18px; margin-block:auto; }
  .failure-actions, .success-actions { flex-wrap:wrap; }

  .dialog-backdrop { padding:12px; align-items:flex-start; }
  .dialog { width:100%; max-height:calc(100dvh - 24px); padding:20px; margin-block:auto; }
  .dialog-actions { flex-direction:column-reverse; align-items:stretch; }
  .export-disclaimer .dialog-actions { flex-direction:column; }
  .dialog-actions > * { width:100%; justify-content:center; }
  .co-key-actions { flex-direction:column; }
  .kbd-grid { grid-template-columns:1fr; }
  .kbd-group:last-child { grid-column:auto; }
  .help-quick-start { align-items:stretch; flex-direction:column; }
  .help-quick-start .btn-secondary { justify-content:center; }
  .desktop-banner { align-items:flex-start; padding:8px 10px; line-height:1.35; }
  .editor-layout .canvas-toolbar { padding-inline:8px; }
  .editor-layout .field-palette { max-width:calc(100vw - 24px); }
}

@media (max-width:360px) {
  .home-btn { width:32px; height:32px; }
  body[data-step="3"] .brand-name { display:none; }
  .workspace-inner { padding-inline:12px; }
  .drop-zone { padding-inline:10px; }
  .import-row > .btn, .import-row > label.btn { width:100%; margin-left:0; justify-content:center; }
}

@media (prefers-reduced-motion: reduce) {
  .ring { animation-duration:2.2s; }
  .dots span { animation:none; opacity:.5; }
  .saved-session-card.skeleton .session-thumb,
  .saved-session-card.skeleton .sk-line { animation:none; }
  *,*::before,*::after { transition:none !important; }
}
/* Public policy links remain reachable from upload and checkout states. */
.policy-links { display:flex; justify-content:center; gap:16px; padding:10px 16px; font-size:13px; }
.policy-links a { color:var(--c-text-muted); }