/* static/css/form-cards.css — v1.7.507 (batch 163): THE CARD FORM.

   The stylesheet of templates/form_cards.html (the opt-in "cards" look of the
   public registration form; the classic templates/form.html is untouched).
   Visual: the owner's approved sample B — a near-black page, a soft accent
   glow, a nested glass card, spring motion, a glowing progress line — with a
   day mode on the same `data-form-theme` axis the classic form uses
   (form.js's toggleFormTheme flips it; the card form starts DARK).

   THE 245 RULE: every colour is a TOKEN, declared only in the token blocks
   below (`:root, html[data-form-theme=…]`); every rule after them reads
   var(--…). The one exception is the capture overlays copied from form.html
   at the end of this file (#passportModal, #cam…, #rxlb …) — always-dark
   camera / lightbox overlays, exempt for the reason form.html's own entries
   in tests/test_v17245_token_coherence.py give.

   The tenant hooks: `--form-brand-accent` (+ its measured ink) is written by
   the template when the organisation chose an accent; the logo is markup. */

/* ── TOKENS · night (the card form's default) ─────────────────────────── */
:root, html[data-form-theme="auto"], html[data-form-theme="dark"] {
  --form-accent-default:     #34d399;
  --form-accent-default-ink: #04110b;
  --form-bg:           #070709;
  --form-card-bg:      #0e0e12;
  --form-shell:        rgba(255,255,255,.045);
  --form-shell-edge:   rgba(255,255,255,.09);
  --form-page-text:    #f3f3f5;
  --form-page-muted:   #a9a9b3;
  --form-card-text:    #f3f3f5;
  --form-card-muted:   #a9a9b3;
  --form-faint:        #8a8a95;
  --form-input-bg:     rgba(255,255,255,.04);
  --form-input-border: rgba(255,255,255,.16);
  --form-input-placeholder: #84848f;   /* v1.7.508: 4.8:1 on the input (AA) */
  --form-divider:      rgba(255,255,255,.09);
  --form-inset:        rgba(255,255,255,.07);
  --form-shadow-deep:  rgba(0,0,0,.9);
  --form-scrim:        rgba(0,0,0,.35);
  --form-glow-b:       rgba(99,102,241,.10);
  --form-panel-bg:     #16161b;
  --form-panel-text:   #f3f3f5;
  --form-panel-border: rgba(255,255,255,.12);
  --form-surface-2:    rgba(255,255,255,.05);
  --form-hover:        rgba(255,255,255,.07);
  --form-disabled-bg:  #2a2a31;
  --form-ok-text:#86efac;      --form-ok-bed:#052e16;   --form-ok-edge:#166534;
  --form-warn-text:#fcd34d;    --form-warn-bed:#1c1407; --form-warn-edge:#92400e;
  --form-danger-text:#fda4af;  --form-danger-bed:#2d0a12; --form-danger-edge:#9f1239;
  --form-info-text:#93c5fd;    --form-info-bed:#111a2b; --form-info-edge:#1e40af;
  --form-note-text:#c4b5fd;    --form-note-bed:#1e1333; --form-note-edge:#4c1d95;
  --danger:  #fb7185;
  --success: #22c55e;
  --text:    #f3f3f5;
  --muted:   #a9a9b3;
  --border:  rgba(255,255,255,.16);
  --card:    #0e0e12;
  --bg:      #070709;
  color-scheme: dark;
}
/* ── TOKENS · day (the toggle) ────────────────────────────────────────── */
html[data-form-theme="light"] {
  --form-accent-default:     #0a8559;   /* v1.7.508: white on it 4.7:1, its text tint on the chip bed 5.5:1 (AA) */
  --form-accent-default-ink: #ffffff;
  --form-bg:           #f3f3ef;
  --form-card-bg:      #ffffff;
  --form-shell:        rgba(0,0,0,.035);
  --form-shell-edge:   rgba(0,0,0,.08);
  --form-page-text:    #111114;
  --form-page-muted:   #4f4f59;
  --form-card-text:    #111114;
  --form-card-muted:   #4f4f59;
  --form-faint:        #6b6b75;
  --form-input-bg:     #ffffff;
  --form-input-border: rgba(0,0,0,.2);
  --form-input-placeholder: #71717a;   /* v1.7.508: 4.8:1 on white (AA) */
  --form-divider:      rgba(0,0,0,.08);
  --form-inset:        rgba(255,255,255,.9);
  --form-shadow-deep:  rgba(15,23,42,.18);
  --form-scrim:        rgba(255,255,255,.7);
  --form-glow-b:       rgba(99,102,241,.08);
  --form-panel-bg:     #ffffff;
  --form-panel-text:   #111114;
  --form-panel-border: #e5e7eb;
  --form-surface-2:    #f7f7f4;
  --form-hover:        #efefea;
  --form-disabled-bg:  #b8b8c0;
  --form-ok-text:#166534;      --form-ok-bed:#f0fdf4;   --form-ok-edge:#86efac;
  --form-warn-text:#92400e;    --form-warn-bed:#fffbeb; --form-warn-edge:#fcd34d;
  --form-danger-text:#9f1239;  --form-danger-bed:#fff1f2; --form-danger-edge:#fda4af;
  --form-info-text:#1e3a8a;    --form-info-bed:#dbeafe; --form-info-edge:#93c5fd;
  --form-note-text:#4c1d95;    --form-note-bed:#ede9fe; --form-note-edge:#c4b5fd;
  --danger:  #be123c;
  --success: #15803d;
  --text:    #111114;
  --muted:   #4f4f59;
  --border:  rgba(0,0,0,.2);
  --card:    #ffffff;
  --bg:      #f3f3ef;
  color-scheme: light;
}
/* ── derived tokens (no literal: everything from the two blocks above) ── */
html[data-form-look="cards"] {
  --form-accent:      var(--form-brand-accent, var(--form-accent-default));
  --form-accent-ink:  var(--form-brand-accent-ink, var(--form-accent-default-ink));
  --form-accent-soft: color-mix(in srgb, var(--form-accent) 13%, transparent);
  --form-accent-edge: color-mix(in srgb, var(--form-accent) 32%, transparent);
  --form-accent-glow: color-mix(in srgb, var(--form-accent) 55%, transparent);
  --form-accent-text: color-mix(in srgb, var(--form-accent) 78%, var(--form-card-text));
  --form-glow-a:      color-mix(in srgb, var(--form-accent) 16%, transparent);
  /* form.js and the copied overlays read the shell's names */
  --primary:      var(--form-accent);
  --primary-dark: var(--form-accent);
  --on-primary:   var(--form-accent-ink);
  --text-2:       var(--form-card-muted);   /* v1.7.508: base.css paints every <label> with it — the shell's value was unreadable on a day card */
  --radius:       14px;
  --rxc-R: 30px;
  --rxc-r: 23px;
  --rxc-spring: cubic-bezier(.32,.72,0,1);
  --rxc-field-h: 50px;    /* v1.7.508: ONE height for every one-line control, chip and button */
}

/* ── the page ─────────────────────────────────────────────────────────── */
html[data-form-look="cards"], html[data-form-look="cards"] body {
  background: var(--form-bg) !important;
  color: var(--form-page-text);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
html[data-form-look="cards"] body { min-height: 100dvh; transition: background .4s ease; overflow-x: hidden; }
html[data-form-look="cards"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 15% 0%, var(--form-glow-a), transparent 60%),
              radial-gradient(50% 40% at 100% 100%, var(--form-glow-b), transparent 60%);
}
.rxc-app {
  position: relative; z-index: 2; max-width: 520px; margin: 0 auto;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh; display: flex; flex-direction: column; box-sizing: border-box;
}
.rxc-app *, .rxc-app *::before, .rxc-app *::after { box-sizing: border-box; }

/* header pill: logo · event · day/night */
.rxc-head {
  margin: calc(14px + env(safe-area-inset-top, 0px)) 0 0; padding: 8px 8px 8px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-radius: 999px; background: var(--form-shell); border: 1px solid var(--form-shell-edge); min-height: 52px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.rxc-ev { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rxc-logo { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: contain; background: var(--form-card-bg); }
.rxc-logo-text { display: grid; place-items: center; background: var(--form-page-text); color: var(--form-bg); font-weight: 700; font-size: 13px; }
.rxc-ev-t { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.rxc-ev-t b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--form-page-text); }
.rxc-ev-t span { display: block; font-size: 11.5px; line-height: 1.3; color: var(--form-page-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the day/night switch — form.js's toggleFormTheme; one icon per state */
.form-theme-toggle {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-radius: 999px; border: 1px solid var(--form-shell-edge); background: var(--form-scrim);
  color: var(--form-page-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: transform .35s var(--rxc-spring), border-color .3s;
}
.form-theme-toggle:hover { border-color: var(--form-accent-edge); }
.form-theme-toggle:active { transform: scale(.96); }
.form-theme-toggle svg { width: 14px; height: 14px; }
.form-theme-toggle .sun-icon, .form-theme-toggle .sun-label,
.form-theme-toggle .moon-icon, .form-theme-toggle .moon-label { display: none; }
html[data-form-theme="dark"] .form-theme-toggle .sun-icon,
html[data-form-theme="dark"] .form-theme-toggle .sun-label,
html[data-form-theme="auto"] .form-theme-toggle .sun-icon,
html[data-form-theme="auto"] .form-theme-toggle .sun-label { display: inline; }
html[data-form-theme="light"] .form-theme-toggle .moon-icon,
html[data-form-theme="light"] .form-theme-toggle .moon-label { display: inline; }

/* progress */
.rxc-prog { height: 2px; background: var(--form-divider); border-radius: 2px; overflow: hidden; margin: 18px 6px 10px; }
.rxc-prog b { display: block; height: 100%; width: 0; background: var(--form-accent);
  transition: width .9s var(--rxc-spring); box-shadow: 0 0 12px var(--form-accent-glow); }
.rxc-steps { font-size: 11.5px; color: var(--form-page-muted); display: flex; justify-content: space-between; gap: 12px;
  margin: 0 6px 12px; letter-spacing: .02em; }
.rxc-steps #rxcCardLbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rxc-banner { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; font-size: 13px; font-weight: 600;
  background: var(--form-info-bed); color: var(--form-info-text); border: 1px solid var(--form-info-edge); }
/* v1.7.509 (batch 165): the three edit-door strips (form.html's banners, same wording) */
.rxc-banner-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 500; }
.rxc-banner-edit a { color: inherit; font-weight: 600; text-decoration: none; }
.rxc-banner-edit strong { flex: 1 1 200px; }
.rxc-banner-edit .rxc-sep { opacity: .4; }
.rxc-banner-note { background: var(--form-note-bed); color: var(--form-note-text); border-color: var(--form-note-edge); }
.rxc-banner-warn { background: var(--form-warn-bed); color: var(--form-warn-text); border-color: var(--form-warn-edge); }

/* the error summary — the same list form.js links to the fields (v1.7.359) */
#rxErrorSummary { margin: 0 0 12px; padding: 13px 15px; border-radius: 14px; font-size: 13.5px; line-height: 1.5;
  background: var(--form-danger-bed); color: var(--form-danger-text); border: 1px solid var(--form-danger-edge); }
#rxErrorSummary ul { margin: 6px 0 0; padding-left: 18px; }
.alert-error li a { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }

/* ── the card: a glass shell around a solid core ─────────────────────── */
.rxc-shell { position: relative; border-radius: var(--rxc-R); background: var(--form-shell); border: 1px solid var(--form-shell-edge);
  padding: 7px; box-shadow: 0 30px 80px -30px var(--form-shadow-deep); }
.rxc-core { border-radius: var(--rxc-r); background: var(--form-card-bg); color: var(--form-card-text);
  box-shadow: inset 0 1px 1px var(--form-inset), inset 0 -40px 80px -60px var(--form-accent-soft);
  padding: 28px 22px 22px; }
.rxc-form { display: block; }
.rxc-form.rxc-enter { animation: rxcIn .6s var(--rxc-spring) both; }
.rxc-form.rxc-enter-back { animation: rxcInBack .6s var(--rxc-spring) both; }
@keyframes rxcIn { from { opacity: 0; transform: translateX(24px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes rxcInBack { from { opacity: 0; transform: translateX(-24px) scale(.985); } to { opacity: 1; transform: none; } }

.rxc-break { margin: 0 0 18px; }
.rxc-eyebrow { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--form-accent);
  box-shadow: 0 0 10px var(--form-accent-glow); }   /* v1.7.508: the dash only — the rail says "Step n of N", the h2 the card */
.rxc-title { font-size: 27px; line-height: 1.1; letter-spacing: -.025em; margin: 14px 0 0; font-weight: 600; color: var(--form-card-text); text-wrap: balance; }
.rxc-lead { margin: 10px 0 0; color: var(--form-card-muted); font-size: 15px; line-height: 1.5; max-width: 40ch; }
/* v1.7.529 (batch 186): a generated card title is for a screen reader only — no "About you" on screen */
.rxc-break .rx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.rxc-break-gen .rxc-lead { margin-top: 12px; }
.rxc-q { min-width: 0; }

/* ── the card's question grid (v1.7.508 polish) ──────────────────────────
   One `.rxc-grid` per card, a direct child of #mainForm after the card's
   break (form.js's stepper shows / hides it whole). One column on a phone;
   from 700 px the short questions (`.rxc-q-half`: text, email, phone,
   number, date, nationality, select, radio, checkbox, company) pair up two
   to a row, while files, textareas, picture choices and notices
   (`.rxc-q-full`) take the whole row. The grid gap replaces the blocks'
   own bottom margin, so every row is spaced the same. */
.rxc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 20px; align-items: start; }
.rxc-grid > .rxc-q.rxc-off { display: none; }       /* hidden by its rule: no empty cell */
.rxc-grid > .rxc-q > .field-group { margin-bottom: 0; }
@media (min-width: 700px) {
  .rxc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
  .rxc-grid > .rxc-q-full { grid-column: 1 / -1; }
}

/* ── questions (the classic blocks' classes, in the card look) ───────── */
.rxc-form .field-group { margin-bottom: 18px; min-width: 0; }
.rxc-form .field-group > label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--form-card-muted); margin-bottom: 7px; }
.rxc-form .field-group label .req { color: var(--danger); margin-left: 2px; }
.rxc-form .field-group input[type=text], .rxc-form .field-group input[type=email],
.rxc-form .field-group input[type=tel], .rxc-form .field-group input[type=date],
.rxc-form .field-group input[type=number], .rxc-form .field-group select,
.rxc-form .field-group textarea {
  width: 100%; max-width: 100%; min-width: 0; font: inherit; font-size: 16px; color: var(--form-card-text);
  background: var(--form-input-bg); border: 1px solid var(--form-input-border); border-radius: var(--radius);
  padding: 0 15px; height: var(--rxc-field-h); min-height: 0; line-height: normal; outline: none; box-shadow: inset 0 1px 1px var(--form-inset);
  transition: border-color .4s var(--rxc-spring), box-shadow .4s var(--rxc-spring), background .4s;
}
.rxc-form .field-group select { -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer;
  /* the chevron, drawn in tokens (no image, no literal) so the text starts on the inputs' left edge */
  background-image: linear-gradient(45deg, transparent 50%, var(--form-card-muted) 50%),
                    linear-gradient(135deg, var(--form-card-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.rxc-form .field-group select option { color: var(--form-panel-text); background: var(--form-panel-bg); }
.rxc-form .field-group textarea { height: auto; min-height: 110px; padding: 13px 15px; line-height: 1.5; resize: vertical; }
.rxc-form .field-group input::placeholder, .rxc-form .field-group textarea::placeholder { color: var(--form-input-placeholder); }
.rxc-form .field-group input:not([type=radio]):not([type=checkbox]):focus, .rxc-form .field-group select:focus, .rxc-form .field-group textarea:focus {
  border-color: var(--form-accent); box-shadow: 0 0 0 4px var(--form-accent-soft), inset 0 1px 1px var(--form-inset); }
.rxc-form .field-group input[disabled], .rxc-form .field-group select[disabled] { color: var(--form-card-muted); }
.rxc-form .field-group .rx-help { font-size: 12.5px; line-height: 1.45; margin-top: 7px; color: var(--form-faint); overflow-wrap: anywhere; }
.rxc-form .field-group .rx-legacy { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px;
  border: 2px dashed var(--border); border-radius: 12px; font-size: 14px; color: var(--form-card-muted); }
/* radio / checkbox / picture tiles: the inline borders read --border/--primary.
   v1.7.508: the option row starts right under the label (no extra offset),
   every chip is a field's height with a 1 px edge like the inputs, and its
   dot + text sit on the row's centre line. */
.rxc-form .field-group .rxc-opts { margin-top: 0 !important; gap: 8px !important; }
.rxc-form .field-group label[data-radio], .rxc-form .field-group [data-cbreq] label,
.rxc-form .field-group label:has(> input[type=checkbox]) {
  border-radius: 999px !important; border-width: 1px !important; min-height: var(--rxc-field-h); padding: 0 16px 0 14px !important;
  gap: 9px !important; font-size: 15px !important; font-weight: 500; line-height: 1.2; background: var(--form-input-bg); color: var(--form-card-text); }
.rxc-form .field-group label[data-radio] input, .rxc-form .field-group label:has(> input[type=checkbox]) input { margin: 0; flex: none; width: 16px; height: 16px; }
.rxc-form .field-group label[data-imgopt] { border-radius: 16px !important; border-width: 1px !important; background: var(--form-input-bg);
  color: var(--form-card-text); margin: 0; }
.rxc-form .field-group label[data-radio], .rxc-form .field-group label:has(> input[type=checkbox]) { margin: 0; }
.rxc-form .field-group .rxc-opts-img { margin-top: 0 !important; }
.rxc-form .field-group input[type=radio], .rxc-form .field-group input[type=checkbox] { accent-color: var(--form-accent); }
/* a clicked dot gets no glow square (base.css's input:focus); the keyboard still sees a ring */
.rxc-form .field-group input[type=radio]:focus, .rxc-form .field-group input[type=checkbox]:focus { box-shadow: none; outline: none; }
.rxc-form .field-group input[type=radio]:focus-visible, .rxc-form .field-group input[type=checkbox]:focus-visible {
  outline: 2px solid var(--form-accent); outline-offset: 2px; }
/* date: day / month / year (v1.7.209) */
.rxc-form .rx-date-parts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.2fr); gap: 8px; align-items: stretch; }
.rxc-form .rx-date-parts > * { min-width: 0; height: var(--rxc-field-h); }
.rxc-form .rx-date-parts input { padding-left: 14px; padding-right: 10px; }
.rxc-form .rx-date-parts select { padding-left: 14px; padding-right: 30px; background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; }
.rxc-form .rx-date-parts input[type=number] { -moz-appearance: textfield; }
.rxc-form .rx-date-parts input[type=number]::-webkit-outer-spin-button,
.rxc-form .rx-date-parts input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rxc-form .rx-date-echo { font-size: 13px; margin-top: 7px; min-height: 18px; color: var(--form-card-muted); }
.rxc-form .rx-date-echo:empty { min-height: 0; margin-top: 0; }   /* v1.7.508: no blank band under an empty date */
.rxc-form .rx-date-echo.bad { color: var(--form-danger-text); font-weight: 600; }
.rxc-form .rx-date.rx-invalid .rx-date-parts input, .rxc-form .rx-date.rx-invalid .rx-date-parts select { border-color: var(--form-danger-edge); }
/* phone */
.rxc-form .phone-wrap { display: flex; align-items: stretch; gap: 0; min-width: 0; height: var(--rxc-field-h); }
.rxc-form .phone-code-wrap { display: flex; }
.rxc-form .phone-code-btn { display: flex; align-items: center; gap: 6px; padding: 0 12px 0 14px; height: 100%; min-width: 84px; line-height: 1; font: inherit;
  border: 1px solid var(--form-input-border); border-right: none; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--form-surface-2); color: var(--form-card-text); font-size: 16px; cursor: pointer; white-space: nowrap; }
.rxc-form .phone-number-input { flex: 1; min-width: 0; border-radius: 0 var(--radius) var(--radius) 0 !important; border-left: none !important; height: 100% !important; }
.rxc-form .phone-dd { position: absolute; top: 100%; left: 0; width: 280px; max-width: calc(100vw - 40px); z-index: 9999; overflow: hidden;
  color: var(--form-panel-text); background: var(--form-panel-bg); border: 1px solid var(--form-panel-border);
  border-radius: var(--radius); box-shadow: 0 18px 40px -12px var(--form-shadow-deep); }
.rxc-form .field-group .phone-dd input.phone-dd-search { width: 100%; padding: 10px 12px; min-height: 0; border: none;
  border-bottom: 1px solid var(--form-panel-border); border-radius: 0; font-size: 16px; outline: none;
  color: var(--form-panel-text); background: var(--form-panel-bg); box-shadow: none; }
.rxc-form .phone-dd ul { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.rxc-form .phone-dd ul li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 14px; cursor: pointer;
  border-bottom: 1px solid var(--form-panel-border); }
.rxc-form .phone-dd ul li:hover { background: var(--form-hover); }
.rxc-form .phone-dd ul li .dial { color: var(--form-card-muted); font-size: 13px; margin-left: auto; }
/* nationality */
.rxc-form .nat-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 9999; margin: 4px 0 0; padding: 0; list-style: none;
  max-height: 240px; overflow-y: auto; color: var(--form-panel-text); background: var(--form-panel-bg);
  border: 1px solid var(--form-panel-border); border-radius: var(--radius); box-shadow: 0 18px 40px -12px var(--form-shadow-deep); }
.rxc-form .nat-dropdown li { padding: 10px 12px; font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--form-panel-border); }
.rxc-form .nat-dropdown li:hover, .rxc-form .nat-dropdown li.nat-active { background: var(--form-hover); color: var(--form-accent-text); }
/* uploads */
.rxc-form .file-upload-area { position: relative; border: 1px dashed var(--form-input-border); border-radius: 18px; padding: 22px 16px;
  text-align: center; cursor: pointer; background: var(--form-input-bg); transition: border-color .4s var(--rxc-spring), background .4s; }
.rxc-form .file-upload-area:hover, .rxc-form .file-upload-area.drag-over { border-color: var(--form-accent); background: var(--form-accent-soft); }
.rxc-form .file-upload-area input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.rxc-form .file-upload-area.photo-area input[type=file] { width: 1px; height: 1px; inset: auto auto 0 0; pointer-events: none; }
.rxc-form .file-upload-area .icon { font-size: 28px; margin-bottom: 8px; }
.rxc-form .file-upload-area .hint { font-size: 13px; color: var(--form-card-muted); margin-top: 4px; }
.rxc-form .upload-actions { display: flex; gap: 8px; margin-top: 10px; }
.rxc-form .upload-actions button { flex: 1; min-height: 46px; padding: 10px; border-radius: 999px; border: 1px solid var(--form-input-border);
  background: var(--form-surface-2); color: var(--form-card-text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; transition: border-color .3s, background .3s; }
.rxc-form .upload-actions button:hover { border-color: var(--form-accent); }
.rxc-form .rx-choose-again { font-size: 12.5px; line-height: 1.45; color: var(--form-card-muted); padding: 8px 10px;
  border-left: 3px solid var(--form-input-border); background: var(--form-surface-2); border-radius: 8px; }
.rxc-form .section-divider { border: none; border-top: 1px solid var(--form-divider); margin: 22px 0; }
.rxc-form .row2 { display: block; }

/* errors in place (v1.7.359) */
.rxc-form .field-group.field-error > input, .rxc-form .field-group.field-error > select, .rxc-form .field-group.field-error > textarea,
.rxc-form .field-group.field-error .rx-date-parts input, .rxc-form .field-group.field-error .rx-date-parts select,
.rxc-form .field-group.field-error .phone-wrap, .rxc-form .field-group.field-error .file-upload-area {
  border-color: var(--danger) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent) !important; }
.field-error-msg { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--danger); }
.field-error-msg::before { content: "!"; flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--danger); color: var(--form-card-bg);
  font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }

/* ── the document chooser and the prefill note ───────────────────────── */
.rxc-doc { margin: 0 0 14px; }
.rxc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rxc-chip { font: inherit; font-size: 14px; min-height: 44px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--form-input-border); background: var(--form-input-bg); color: var(--form-card-text);
  transition: border-color .4s var(--rxc-spring), background .4s var(--rxc-spring), box-shadow .4s; }
.rxc-chip.on { border-color: var(--form-accent); background: var(--form-accent-soft); color: var(--form-accent-text); font-weight: 600;
  box-shadow: 0 0 0 4px var(--form-accent-soft); }
.rxc-doc-line, .rxc-doc-only { margin: 10px 0 0; font-size: 13px; color: var(--form-card-muted); }
.rxc-doc-only { margin: 0 0 12px; display: flex; gap: 8px; align-items: center; }
.rxc-doc-only::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--form-accent); box-shadow: 0 0 10px var(--form-accent-glow); }
.rxc-doc:not([data-kind="passport"]) + .field-group .btn-scan-passport { display: none; }   /* v1.7.514: an ID's front carries no code lines */
/* v1.7.514 (batch 170): the back of an ID card, under the front */
.rxc-back { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--form-divider); }
.rxc-back[hidden] { display: none; }
/* v1.7.514 (batch 170): "Check what we read" — the image beside the read
   fields on a desktop card, above them on a phone.
   v1.7.528 (batch 185): a full-width cell right under the document question
   of the same card (not a card of its own); side by side from 900 px. */
.rxc-checkcell { grid-column: 1 / -1; margin-top: 4px; padding: 20px; border-radius: var(--radius);
  border: 1px solid var(--form-accent-edge); background: var(--form-accent-soft); }
.rxc-checkcell[hidden] { display: none; }
.rxc-check-title { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.3; color: var(--form-card-text); }
.rxc-check-lead { margin: 6px 0 16px; font-size: 14px; line-height: 1.5; color: var(--form-card-muted); }
.rxc-checkcard { display: flex; flex-direction: column; gap: 16px; }
.rxc-check-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rxc-check-img { margin: 0; border: 1px solid var(--form-input-border); border-radius: var(--radius); background: var(--form-input-bg);
  padding: 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; min-height: 120px; }
.rxc-check-img img { display: block; width: 100%; max-height: 320px; object-fit: contain; border-radius: 8px; }
.rxc-check-img figcaption { font-size: 12.5px; color: var(--form-card-muted); text-align: center; }
.rxc-check-none { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.45;
  color: var(--form-warn-text); background: var(--form-warn-bed); border: 1px solid var(--form-warn-edge); }
.rxc-check-fields { display: flex; flex-direction: column; gap: 10px; }
.rxc-check-row { display: flex; flex-direction: column; gap: 4px; }
.rxc-check-row > span { font-size: 12.5px; color: var(--form-faint); }
.rxc-check-row input, .rxc-check-row select { font: inherit; font-size: 15px; height: var(--rxc-field-h); padding: 0 12px; border-radius: var(--radius);
  border: 1px solid var(--form-input-border); background: var(--form-input-bg); color: var(--form-card-text); min-width: 0; width: 100%; }
.rxc-check-row .rxc-src { font-size: 12px; color: var(--form-card-muted); }
.rxc-check-row .rxc-src[data-src="read"] { color: var(--form-accent-text); }
.rxc-check-confirm > label:first-child { font-size: 13px; color: var(--form-card-muted); }
/* the tick keeps the consent box's own shape (a `.field-group > label` is a block caption otherwise) */
.rxc-form .rxc-check-confirm > label.rxc-check-tick { display: flex; align-items: center; gap: 12px; margin: 0;
  border-radius: var(--radius) !important; padding: 14px 15px !important; font-size: 14px !important; font-weight: 400;
  line-height: 1.45; color: var(--form-card-text); }
.rxc-form .rxc-check-confirm > label.rxc-check-tick input { width: 20px; height: 20px; margin: 0; }
@media (min-width: 900px) {   /* v1.7.528 (batch 185): side by side from 900 px (was 700) */
  .rxc-check-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .rxc-check-img { position: sticky; top: 16px; }
}
@media (max-width: 420px) {
  .rxc-checkcell { padding: 16px 14px; }
}
.rxc-prefill { display: flex; align-items: center; gap: 10px; margin-top: 7px; font-size: 12.5px; color: var(--form-accent-text); }
.rxc-prefill button { font: inherit; font-weight: 600; font-size: 12.5px; background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--form-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.field-group.rxc-prefilled input, .field-group.rxc-prefilled select { border-color: var(--form-accent-edge); }

/* ── the stepper's own buttons (form.js builds .fstep-nav) ───────────── */
.rxc-form .fstep-nav { flex-wrap: wrap; }
.rxc-form .fstep-nav > span { display: none; }   /* the header carries "Step n of N" */
/* card 1: form.js hides Back with visibility — take it out so Next is the whole row */
.rxc-form .fstep-nav .btn-outline[style*="visibility: hidden"] { display: none; }
.rxc-form .fstep-nav .btn-outline { font: inherit; font-weight: 600; font-size: 15px; height: 52px; min-height: 0; padding: 0 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  background: transparent; color: var(--form-card-muted); border: 1px solid var(--form-input-border); cursor: pointer;
  transition: border-color .3s, color .3s, transform .35s var(--rxc-spring); }
.rxc-form .fstep-nav .btn-outline:hover { color: var(--form-card-text); border-color: var(--form-faint); }
.rxc-form .submit-btn, .rxc-form .fstep-nav .submit-btn {
  flex: 1; width: auto; height: 52px; min-height: 0; padding: 0 22px; margin-top: 0; border: 1px solid transparent; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  background: var(--form-accent); color: var(--form-accent-ink); font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
  box-shadow: 0 10px 30px -12px var(--form-accent-glow); transition: transform .35s var(--rxc-spring), box-shadow .4s, filter .15s; }
.rxc-form #submitBtn { width: 100%; margin-top: 14px; }
.rxc-form .submit-btn:hover { box-shadow: 0 14px 36px -12px var(--form-accent-glow); }
.rxc-form .submit-btn:active, .rxc-form .fstep-nav .btn-outline:active { transform: scale(.97); }
.rxc-form .submit-btn:disabled { background: var(--form-disabled-bg); color: var(--form-card-muted); box-shadow: none; cursor: not-allowed; }
.rxc-form .fstep-nav .submit-btn::after { content: " "; }
/* the ready state (v1.7.157 / v1.7.302): the resting fill desaturates */
form.sb-armed .submit-btn#submitBtn:not(.sb-ready):not(:disabled) { filter: grayscale(.85) opacity(.6); box-shadow: none; }
form.sb-armed .submit-btn#submitBtn.sb-ready:not(:disabled) { filter: none; }

/* ── the Last check ──────────────────────────────────────────────────── */
.rxc-review { margin: 0 0 16px; }
.rxc-kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; gap: 0; font-size: 14px; }
.rxc-kv > div { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--form-divider); min-width: 0; overflow-wrap: anywhere; }
.rxc-kv > .rxc-e { padding-right: 0; }
.rxc-kv .rxc-k { color: var(--form-faint); }
.rxc-kv .rxc-v { font-weight: 500; color: var(--form-card-text); }
.rxc-kv .rxc-v img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; display: block; }
.rxc-kv .rxc-e { text-align: right; }
.rxc-kv .rxc-e button { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--form-accent-text); background: none; border: 0;
  cursor: pointer; padding: 2px 0; min-height: 32px; }
.rxc-empty { font-size: 14px; color: var(--form-card-muted); margin: 0; }
.rx-consent { display: flex; gap: 12px; align-items: flex-start; padding: 14px 15px; margin: 4px 0 0; border-radius: var(--radius);
  border: 1px solid var(--form-input-border); background: var(--form-input-bg); font-size: 14px; line-height: 1.45; cursor: pointer;
  color: var(--form-card-text); transition: border-color .4s var(--rxc-spring), background .4s; }
.rx-consent:has(input:checked) { border-color: var(--form-accent); background: var(--form-accent-soft); }
.rx-consent span { font-weight: 400; }
.rx-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--form-accent); }
.rx-consent a, .rx-privacy a { color: var(--form-brand-link, var(--form-accent-text)); }   /* batch 225 (v1.7.571): a tenant accent's measured ink */
html .rxc-form .ug-row .ug-link { color: var(--form-brand-link, var(--form-accent-text)); }   /* batch 225 (v1.7.571, SWEEP-225 C2): "See examples ›", the same ink */
.rxc-form .phone-dd ul li:focus { background: var(--form-hover); outline: 2px solid var(--form-brand-link, var(--form-accent-text)); outline-offset: -2px; }   /* batch 225 (v1.7.571, SWEEP-225 K6) */
.rxc-form .rx-privacy { color: var(--form-card-muted); }

/* footer */
.powered-by { display: flex; width: max-content; margin: 20px auto 0; padding: 5px 11px; border-radius: 999px; font-size: 11px;
  color: var(--form-page-muted); border: 1px solid var(--form-shell-edge); text-decoration: none; opacity: 1; }   /* batch 225 (v1.7.571, SWEEP-225 C10): no fade */
.powered-by:hover { opacity: 1; color: var(--form-page-text); }

/* ── desktop: a real card, not a phone column on an empty page ───────────
   From 700 px the column widens to 812 px (a 780 px card at 900 px and up)
   with roomier padding; the header pill and the progress rail follow it. */
@media (min-width: 700px) {
  .rxc-app { max-width: 812px; }
  .rxc-core { padding: 38px 40px 32px; }
  .rxc-break { margin-bottom: 26px; }
  .rxc-title { font-size: 30px; }
}
@media (max-width: 420px) {
  .rxc-app { padding-left: 12px; padding-right: 12px; }
  .rxc-core { padding: 24px 16px 18px; }
  .rxc-title { font-size: 24px; }
  .form-theme-toggle .sun-label, .form-theme-toggle .moon-label { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rxc-form.rxc-enter, .rxc-form.rxc-enter-back { animation: none; }
  .rxc-prog b, .rxc-chip, .rx-consent, .form-theme-toggle, .rxc-form .submit-btn, .rxc-form .fstep-nav .btn-outline,
  .rxc-form .field-group input, .rxc-form .field-group select, .rxc-form .field-group textarea, .rxc-form .file-upload-area { transition: none; }
}

/* ══ THE CAPTURE OVERLAYS — copied from templates/form.html (v1.7.506) ════
   Every rule below is form.html's own, verbatim, for the ids and classes
   templates/_form_capture_modals_cards.html carries (and form.js writes):
   the passport scanner, the guided camera, the processing modal, the
   quality/gate badges and the lightbox. Always-dark camera overlays keep
   their literals (the 245 allowlist's camera-overlay entries); the rest read
   the --form-* tokens declared above. Jinja comments became CSS comments. */
  .btn-scan-passport {
    flex:1; padding:9px; border-radius:var(--radius); border:2px solid #7c3aed;
    background:linear-gradient(135deg,#7c3aed,#4f46e5); color:#fff; font-size:13px;
    font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center;
    gap:6px; transition:all .15s; letter-spacing:.2px;
  }
  .btn-scan-passport:hover { filter:brightness(1.12); }

  /* ── Passport Scanner Modal ── */
  #passportModal {
    display:none; position:fixed; inset:0; background:#000; z-index:10000;
    flex-direction:column; align-items:center; overflow-y:auto;
  }
  #passportModal.open { display:flex; }
  #ps-header {
    width:100%; display:flex; align-items:center; gap:12px;
    padding:14px 18px; background:rgba(255,255,255,.06); flex-shrink:0;
  }
  #ps-header h2 { color:#fff; font-size:16px; font-weight:700; flex:1; margin:0; }
  #ps-close-btn {
    background:rgba(255,255,255,.12); border:none; color:#fff; font-size:20px;
    width:34px; height:34px; border-radius:50%; cursor:pointer; display:flex;
    align-items:center; justify-content:center;
  }
  /* Camera area */
  #ps-cam-wrap {
    position:relative; flex-shrink:0;
    width:min(520px,100vw); aspect-ratio:4/3; background:#111; overflow:hidden;
  }
  #ps-video { width:100%; height:100%; object-fit:cover; display:block; }
  #ps-canvas-hidden { display:none; }
  /* passport guide overlay */
  #ps-overlay {
    position:absolute; inset:0; pointer-events:none;
  }
  .ps-dim { position:absolute; background:rgba(0,0,0,.52); }
  #ps-guide-box {
    position:absolute; border:2px solid rgba(255,255,255,.55);
    border-radius:8px; box-shadow:0 0 0 9999px rgba(0,0,0,.52);
    transition:border-color .25s, box-shadow .25s;
    overflow:hidden;
  }
  /* Quality states */
  #ps-guide-box.q-ok   {
    border-color:#fbbf24;
    box-shadow:0 0 0 9999px rgba(0,0,0,.52), 0 0 0 2px #fbbf24;
  }
  #ps-guide-box.q-good {
    border-color:#22c55e;
    box-shadow:0 0 0 9999px rgba(0,0,0,.52), 0 0 0 3px #22c55e, 0 0 18px rgba(34,197,94,.4);
    animation:psGoodPulse 1s ease-in-out infinite;
  }
  @keyframes psGoodPulse {
    0%,100%{ box-shadow:0 0 0 9999px rgba(0,0,0,.52), 0 0 0 3px #22c55e, 0 0 10px rgba(34,197,94,.3); }
    50%    { box-shadow:0 0 0 9999px rgba(0,0,0,.52), 0 0 0 4px #22c55e, 0 0 24px rgba(34,197,94,.6); }
  }
  /* Corner brackets */
  #ps-guide-corner {
    position:absolute; inset:-1px; pointer-events:none;
    background:
      linear-gradient(currentColor,currentColor) top    left  / 20px 3px no-repeat,
      linear-gradient(currentColor,currentColor) top    left  / 3px 20px no-repeat,
      linear-gradient(currentColor,currentColor) top    right / 20px 3px no-repeat,
      linear-gradient(currentColor,currentColor) top    right / 3px 20px no-repeat,
      linear-gradient(currentColor,currentColor) bottom left  / 20px 3px no-repeat,
      linear-gradient(currentColor,currentColor) bottom left  / 3px 20px no-repeat,
      linear-gradient(currentColor,currentColor) bottom right / 20px 3px no-repeat,
      linear-gradient(currentColor,currentColor) bottom right / 3px 20px no-repeat;
    border-radius:8px; color:#fff;
  }
  /* Animated scan line */
  #ps-scan-line {
    position:absolute; left:0; right:0; height:3px; pointer-events:none;
    background:linear-gradient(90deg, transparent 0%, #a78bfa 30%, #7c3aed 50%, #a78bfa 70%, transparent 100%);
    box-shadow:0 0 8px 2px rgba(124,58,237,.6);
    animation:psScanDown 2s linear infinite; display:none; top:0;
  }
  @keyframes psScanDown { 0%{ top:0 } 100%{ top:100% } }
  #ps-guide-box.q-ok  #ps-scan-line,
  #ps-guide-box.q-good #ps-scan-line { display:block; }
  /* Countdown arc (SVG in top-right) */
  #ps-countdown-svg {
    position:absolute; top:6px; right:6px; width:36px; height:36px;
    display:none; filter:drop-shadow(0 0 4px rgba(34,197,94,.5));
  }
  #ps-guide-box.q-good #ps-countdown-svg { display:block; }
  #ps-cd-bg   { fill:none; stroke:rgba(255,255,255,.18); stroke-width:3; }
  #ps-cd-arc  { fill:none; stroke:#22c55e; stroke-width:3;
                stroke-linecap:round; stroke-dasharray:88; stroke-dashoffset:88;
                transform:rotate(-90deg); transform-origin:18px 18px; transition:stroke-dashoffset .15s; }
  /* MRZ stripe hint.

     v1.7.300 — SURVEYED, PRESENT, AND TURNED UP. The passport-
     proportioned frame (1.42:1, set in form.js) and this bottom band
     both already existed, so neither is rebuilt here. What changed is
     WEIGHT: the band was a 30%-white dashed line with a 45%-white 9px
     label, i.e. the faintest thing in the viewfinder — and as of this
     release the two code lines inside it are the ONLY thing that can
     hard-block a passport upload. A band that decides whether the
     upload is accepted must not be the part of the frame the eye skips.

     Still an always-dark camera overlay, so still outside the token
     system by the v1.7.245 allowlist's own reasoning: a viewfinder is
     dark because a viewfinder is dark. */
  #ps-mrz-stripe {
    position:absolute; bottom:0; left:0; right:0; height:22%;
    border-top:2px dashed rgba(255,255,255,.6);
    background:linear-gradient(rgba(124,58,237,0), rgba(124,58,237,.28));
    display:flex; align-items:center; justify-content:center; pointer-events:none;
  }
  #ps-mrz-label {
    font-size:10px; letter-spacing:1.6px; color:rgba(255,255,255,.92);
    font-family:monospace; text-transform:uppercase; font-weight:700;
    text-shadow:0 1px 3px rgba(0,0,0,.8);
  }
  /* Hint bar */
  #ps-hint {
    position:absolute; bottom:0; left:0; right:0;
    padding:7px 14px; background:rgba(0,0,0,.65);
    color:#e2e8f0; font-size:12px; text-align:center; font-weight:600;
    letter-spacing:.2px; transition:color .2s;
  }
  #ps-hint.hint-ok   { color:#fde68a; }
  #ps-hint.hint-good { color:#86efac; }
  #ps-hint.hint-bad  { color:#fca5a5; }
  /* Status light bar */
  #ps-status-bar {
    width:min(520px,100vw); padding:10px 18px;
    display:flex; align-items:center; gap:10px; flex-shrink:0;
    background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07);
  }
  #ps-light {
    width:14px; height:14px; border-radius:50%; flex-shrink:0;
    background:#ef4444; box-shadow:0 0 8px 2px rgba(239,68,68,.6);
    transition:background .25s, box-shadow .25s;
  }
  #ps-light.ok   { background:#fbbf24; box-shadow:0 0 8px 2px rgba(251,191,36,.6); }
  #ps-light.good { background:#22c55e; box-shadow:0 0 8px 2px rgba(34,197,94,.6);
                   animation:psLightPulse .7s ease-in-out infinite; }
  @keyframes psLightPulse {
    0%,100%{ box-shadow:0 0 8px 2px rgba(34,197,94,.5); }
    50%    { box-shadow:0 0 16px 4px rgba(34,197,94,.85); }
  }
  #ps-status-text { font-size:13px; font-weight:600; color:#cbd5e1; }
  /* Controls */
  #ps-controls {
    width:min(520px,100vw); padding:16px 18px; display:flex;
    flex-direction:column; gap:12px; flex-shrink:0;
  }
  #ps-step-cam { display:flex; flex-direction:column; gap:10px; }
  .ps-tip {
    background:rgba(255,255,255,.07); border-radius:8px;
    padding:10px 14px; color:#cbd5e1; font-size:12px; line-height:1.6;
  }
  .ps-tip strong { color:#fff; }
  #ps-scan-btn {
    width:100%; padding:14px; border:none; border-radius:var(--radius);
    background:linear-gradient(135deg,#7c3aed,#4f46e5); color:#fff;
    font-size:16px; font-weight:700; cursor:pointer; transition:filter .15s;
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  #ps-scan-btn:hover { filter:brightness(1.1); }
  #ps-scan-btn:disabled { background:#374151; cursor:not-allowed; filter:none; }
  #ps-flip-btn {
    width:100%; padding:10px; border:1px solid rgba(255,255,255,.2); border-radius:var(--radius);
    background:rgba(255,255,255,.08); color:#cbd5e1; font-size:14px; cursor:pointer;
  }
  /* Scanning overlay */
  #ps-scanning {
    display:none; flex-direction:column; align-items:center; gap:14px;
    padding:24px 18px; color:#fff;
  }
  .ps-spinner {
    width:48px; height:48px; border:4px solid rgba(255,255,255,.15);
    border-top-color:#7c3aed; border-radius:50%; animation:psSpin 0.8s linear infinite;
  }
  @keyframes psSpin { to { transform:rotate(360deg); } }
  #ps-progress-bar-wrap {
    width:100%; background:rgba(255,255,255,.1); border-radius:99px; height:6px; overflow:hidden;
  }
  #ps-progress-bar { height:100%; background:#7c3aed; border-radius:99px; transition:width .3s; width:0%; }
  #ps-scan-status { font-size:13px; color:#94a3b8; }
  /* Results */
  #ps-results { display:none; flex-direction:column; gap:12px; padding:0 0 8px; }
  #ps-result-header { display:flex; align-items:center; gap:8px; }
  #ps-result-icon { font-size:28px; }
  .ps-result-title { font-size:15px; font-weight:700; color:#fff; }
  .ps-result-sub   { font-size:12px; color:#94a3b8; }
  #ps-fields-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
  }
  .ps-field-row { background:rgba(255,255,255,.06); border-radius:6px; padding:8px 10px; }
  .ps-field-label { font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
  .ps-field-input {
    width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.15);
    color:#fff; font-size:13px; padding:2px 0; font-family:inherit; outline:none;
  }
  .ps-field-input:focus { border-bottom-color:#7c3aed; }
  #ps-result-actions { display:flex; gap:8px; margin-top:4px; }
  #ps-use-btn {
    flex:1; padding:12px; border:none; border-radius:var(--radius);
    background:#16a34a; color:#fff; font-size:14px; font-weight:700; cursor:pointer;
  }
  #ps-use-btn:hover { background:#15803d; }
  #ps-retry-btn {
    padding:12px 16px; border:1px solid rgba(255,255,255,.2); border-radius:var(--radius);
    background:rgba(255,255,255,.08); color:#cbd5e1; font-size:14px; cursor:pointer;
  }
  #ps-no-mrz {
    display:none; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3);
    border-radius:8px; padding:14px; color:#fca5a5; font-size:13px; text-align:center;
  }
  /* preview thumb at top of results */
  #ps-thumb { width:100%; max-height:120px; object-fit:cover; border-radius:6px; display:none; }

  /* Camera modal */
  /* v1.7.342 — THE MODAL CENTRED BY CLIPPING. `align-items:center` on a
     scrolling flex box puts the overflow HALF ABOVE the top, where no
     scroll can reach it: after a capture on an iPhone SE the title sat at
     -114px and Use Photo + the quality badge (the refusal!) below the
     fold; on a 720px laptop the same. `margin:auto` on the child centres
     it when it fits and scrolls from the top when it does not. */
  #cameraModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9999;
    overflow-y:auto; padding:16px; }
  #cameraModal.open { display:flex; }
  .cam-wrap { width:100%; max-width:460px; display:flex; flex-direction:column; align-items:stretch; gap:12px;
              margin:auto; }   /* v1.7.342 */
  /* Viewfinder: video + canvas overlay stacked */
  #camViewfinder { position:relative; border-radius:12px; overflow:hidden; background:#000; line-height:0; }
  #cameraVideo { width:100%; display:block; }           /* always visible & playing */
  /* v1.7.192 (his find: "the camera on the phone doesnt follow the natural
     camera view"): every phone's native camera shows the SELFIE preview
     mirrored, because that is what looks natural. Ours showed the raw
     (unmirrored) stream, so faces looked flipped. Mirror the PREVIEW for
     the front camera only.
     v1.7.299 (item 2): and the CAPTURE follows the same answer now
     (`_camIsMirrored` in static/js/form.js drives both this class and
     the canvas draw), so what is saved is what was on screen. A selfie
     is therefore stored as-seen, i.e. mirror-image — owner-accepted, see
     the DEPLOY doc. Rear camera and passport fields are never mirrored,
     in the preview or in the file. */
  #cameraVideo.cam-selfie, #camLiveCanvas.cam-selfie { transform: scaleX(-1); }
  /* v1.7.192: background choice cards */
  .cam-choice { background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.25);
                border-radius:10px; padding:6px; cursor:pointer; font-family:inherit;
                display:flex; flex-direction:column; align-items:center; gap:5px; flex:1;
                max-width:150px; color:#fff; }
  .cam-choice img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px;
                    background:#111; display:block; }
  .cam-choice span { font-size:11.5px; font-weight:600; letter-spacing:.02em; }
  .cam-choice.on { border-color:#22c55e; background:rgba(34,197,94,.16); }
  .cam-choice.on span::before { content:"\2713 "; }
  /* v1.7.193: progress overlay on the plain-background tile */
  .cam-choice-slot { position:relative; width:100%; }
  .cam-prog { position:absolute; inset:0; display:flex; flex-direction:column;
              align-items:center; justify-content:center; gap:6px; padding:8px;
              background:rgba(0,0,0,.55); border-radius:6px; }
  .cam-prog.done { display:none; }
  .cam-prog-bar { width:82%; height:5px; border-radius:99px;
                  background:rgba(255,255,255,.22); overflow:hidden; }
  .cam-prog-bar > i { display:block; height:100%; width:0%; border-radius:99px;
                      background:#22c55e; transition:width .25s ease; }
  .cam-prog-txt { font-size:10.5px; font-weight:600; color:#fff;
                  text-align:center; line-height:1.3; }
  #camLiveCanvas { position:absolute; inset:0; width:100%; height:100%; }
  /* v1.7.342 — the captured still is capped so the choice tiles, the
     buttons AND the quality verdict fit one phone screen; letterboxed on
     black, never cropped, so what is shown is what will be sent. */
  #cameraPreviewImg { display:none; width:100%; border-radius:12px; max-height:48vh; object-fit:contain; background:#000; }
  @media (max-height:760px) {
    #cameraPreviewImg { max-height:40vh; }
    .cam-choice { max-width:112px; }
  }
  #cameraCanvas { display:none; }
  .cam-bar { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
  .cam-btn { padding:10px 20px; border-radius:var(--radius); border:none; font-size:14px; font-weight:600;
    cursor:pointer; display:flex; align-items:center; gap:6px; transition:opacity .15s; }
  .cam-btn:active { opacity:.75; }
  .cam-btn-capture { background:var(--primary); color:#fff; flex:1; justify-content:center; max-width:200px; }
  .cam-btn-retake  { background:#334155; color:#fff; }
  .cam-btn-use     { background:var(--success); color:#fff; flex:1; justify-content:center; }
  .cam-btn-cancel  { background:#475569; color:#fff; }
  .cam-btn-flip    { background:#334155; color:#fff; padding:10px 14px; }
  /* v1.7.157: this strip is a LIGHT surface even on dark-branded (auto)
     forms, so its text/border must be hardcoded dark-on-light — the
     theme vars carry the page's light text and made the filename and
     size invisible (white on white). Same rule as .phone-dd (v1.7.46).
     The forced-dark overrides further down restyle the whole strip. */
  .file-preview { display: flex; align-items: center; gap: 10px; margin-top: 10px;
                  padding: 10px; background: var(--form-surface-2); border-radius: 6px; border: 1px solid var(--form-input-border);
                  color: var(--form-card-text); }
  .file-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
  .file-preview .name { font-size: 13px; font-weight: 500; color: var(--form-card-text); }
  .file-preview .size { font-size: 12px; color: var(--form-card-muted); }
  /* ── Passport quality badge (upload area, light bg) ── */
  .pq-badge { display:flex; align-items:flex-start; gap:10px; margin-top:8px;
              padding:10px 14px; border-radius:8px; font-size:13px; border:1px solid; }
  .pq-badge .pq-icon { font-size:18px; flex-shrink:0; line-height:1.2; }
  .pq-badge .pq-msg  { font-weight:700; margin-bottom:2px; }
  .pq-badge .pq-hint { font-size:12px; opacity:.85; }
  /* v1.7.245: six badges, four families, no !important. The five
     [data-form-theme="dark"] … !important patches that used to sit here
     said the same thing the tokens now say, one theme at a time. */
  .pq-badge.pq-checking { background:var(--form-info-bed);   border-color:var(--form-info-edge);   color:var(--form-info-text); }
  .pq-badge.pq-good     { background:var(--form-ok-bed);     border-color:var(--form-ok-edge);     color:var(--form-ok-text); }
  .pq-badge.pq-fair     { background:var(--form-warn-bed);   border-color:var(--form-warn-edge);   color:var(--form-warn-text); }
  .pq-badge.pq-poor     { background:var(--form-danger-bed); border-color:var(--form-danger-edge); color:var(--form-danger-text); }
  .pq-badge.pq-blocked  { background:var(--form-danger-bed); border-color:var(--form-danger-text); color:var(--form-danger-text); }
  .pq-badge.pq-error    { background:var(--form-surface-2);  border-color:var(--form-input-border); color:var(--form-card-muted); }

  /* v1.7.266 — headshot gate strip. Deliberately QUIETER than .pq-badge:
     this is advice from a model, not a hard verdict from a measurement,
     and it never disables the submit button. A pass is a tick and a few
     grey words; only a real problem raises its voice. */
  .pgate { display:flex; align-items:flex-start; gap:9px; margin-top:8px;
           padding:9px 11px; border:1px solid var(--form-input-border);
           border-radius:8px; font-size:13px; line-height:1.5;
           background:var(--form-surface-2); color:var(--form-card-muted); }
  .pgate .pg-ico { font-size:15px; flex-shrink:0; line-height:1.35; }
  .pgate .pg-msg { font-weight:600; }
  .pgate .pg-sub { font-size:12px; opacity:.9; margin-top:2px; }
  .pgate.pg-checking { background:var(--form-info-bed);   border-color:var(--form-info-edge);   color:var(--form-info-text); }
  .pgate.pg-pass     { background:var(--form-ok-bed);     border-color:var(--form-ok-edge);     color:var(--form-ok-text); }
  .pgate.pg-fail     { background:var(--form-warn-bed);   border-color:var(--form-warn-edge);   color:var(--form-warn-text); }
  .pgate.pg-hard     { background:var(--form-danger-bed); border-color:var(--form-danger-text); color:var(--form-danger-text); }
  .pgate .pg-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .pgate .pg-acts button { font:inherit; font-size:12px; padding:5px 10px;
           border-radius:6px; cursor:pointer; border:1px solid currentColor;
           background:transparent; color:inherit; font-weight:600; }
  /* The override is deliberately the SUBTLE one — available, never the
     obvious next tap. */
  .pgate .pg-acts button.pg-override { border-style:dashed; font-weight:500;
           opacity:.8; }
  .pgate .pg-spin { display:inline-block; width:13px; height:13px;
           border:2px solid currentColor; border-right-color:transparent;
           border-radius:50%; animation:pgspin .7s linear infinite; }
  @keyframes pgspin { to { transform:rotate(360deg); } }
  @keyframes spin { to { transform:rotate(360deg); } }
  /* ── Combined photo processing modal ── */
  #photoModalCard {
    color:var(--form-panel-text);   /* v1.7.46: see .phone-dd note */
    background:var(--form-panel-bg); border-radius:16px; width:100%; max-width:500px;
    box-shadow:0 24px 64px rgba(0,0,0,.35); overflow:hidden; font-family:inherit;
  }
  #pmPreviewWrap {
    margin:14px 20px; border-radius:10px; overflow:hidden; background:var(--form-hover);
    min-height:180px; display:flex; align-items:center; justify-content:center; position:relative;
  }
  #pmSpinner { display:flex; flex-direction:column; align-items:center; gap:12px; padding:32px; }
  .pm-spin-ring {
    width:36px; height:36px; border:3px solid var(--form-panel-border);
    border-top-color:var(--primary); border-radius:50%; animation:spin .75s linear infinite;
  }
  .pm-toggle-pill {
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    display:flex; border-radius:999px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.3);
  }
  .pm-pill-btn {
    padding:5px 14px; font-size:11px; font-weight:700; border:none; cursor:pointer;
    background:color-mix(in srgb, var(--form-panel-bg) 85%, transparent); color:var(--form-panel-text); transition:background .15s,color .15s;
  }
  .pm-pill-active { background:var(--primary) !important; color:#fff !important; }
  #pmOptions { padding:0 20px 14px; display:flex; flex-direction:column; gap:8px; }
  .pm-opt-row {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    /* v1.7.157: the modal card is white even on dark-branded (auto)
       forms — hardcode dark-on-light here; theme-var colours made
       "Replace background — white" unreadable. The forced-dark
       overrides below restyle the whole card. */
    border-radius:9px; border:1px solid var(--form-panel-border); cursor:pointer;
    font-size:13px; color:var(--form-panel-text); user-select:none;
    transition:border-color .15s, background .15s;
  }
  .pm-opt-row:hover { border-color:var(--primary); background:var(--form-hover); }
  .pm-chk { width:16px; height:16px; accent-color:var(--primary); cursor:pointer; flex-shrink:0; }
  .pm-opt-icon { font-size:16px; flex-shrink:0; }
  .pm-opt-text { flex:1; line-height:1.4; }
  .pm-bg-swatch {
    display:inline-block; width:12px; height:12px; border-radius:50%;
    border:1px solid rgba(0,0,0,.2); vertical-align:middle; margin:0 3px;
  }
  .pm-btn-apply {
    flex:1; padding:12px; border:none; border-radius:10px; font-size:14px;
    font-weight:700; cursor:pointer; background:var(--primary); color:#fff;
    opacity:.5; transition:opacity .15s;
  }
  .pm-btn-apply:not(:disabled) { opacity:1; }
  .pm-btn-apply:disabled { cursor:not-allowed; }
  .pm-btn-keep {
    padding:12px 18px; border:1px solid var(--form-panel-border); border-radius:10px; font-size:14px;
    font-weight:600; cursor:pointer; background:var(--form-panel-bg); color:var(--form-panel-text);
    white-space:nowrap; transition:background .15s;
  }
  .pm-btn-keep:hover { background:var(--form-hover); }
  /* v1.7.245: the thirteen [data-form-theme="dark"] … !important rules
     that used to close this section are gone. Every one of them was the
     same declaration with a dark literal in it; the tokens above carry
     the theme now. #pmSub / #pmSpinLabel read --form-card-muted and
     #pmError reads --form-danger-text, below. */
  #pmSub, #pmSpinLabel { color:var(--form-card-muted); }
  #pmError { color:var(--form-danger-text); }
  /* ── In-camera quality badge (dark modal) ── */
  #camQualityBadge { display:none; border-radius:8px; padding:10px 14px; font-size:13px;
                     border:1px solid; flex-direction:column; gap:4px; }
  #camQualityBadge .pq-msg  { font-weight:700; }
  #camQualityBadge .pq-hint { font-size:12px; opacity:.8; }
  #camQualityBadge.pq-checking { background:rgba(14,165,233,.15); border-color:#0ea5e9; color:#7dd3fc; }
  #camQualityBadge.pq-good     { background:rgba(34,197,94,.15);  border-color:#22c55e; color:#86efac; }
  #camQualityBadge.pq-fair     { background:rgba(234,179,8,.15);  border-color:#eab308; color:#fde047; }
  #camQualityBadge.pq-poor     { background:rgba(239,68,68,.15);  border-color:#ef4444; color:#fca5a5; }
  #camQualityBadge.pq-blocked  { background:rgba(220,38,38,.2);   border-color:#dc2626; color:#fca5a5; }
  /* the image lightbox (form.html's own <style> for #rxlb, v1.7.136) */
  #rxlb { position:fixed; inset:0; z-index:10050; background:rgba(8,10,14,.88); display:flex; flex-direction:column; }
  #rxlb[hidden] { display:none; }
  #rxlbBar { display:flex; justify-content:flex-end; padding:10px 12px; flex:none; }
  #rxlbClose { background:rgba(255,255,255,.12); border:none; color:#fff; font-size:20px; line-height:1;
               width:40px; height:40px; border-radius:50%; cursor:pointer; }
  #rxlbWrap { flex:1; overflow:auto; display:flex; align-items:safe center; justify-content:safe center;
              -webkit-overflow-scrolling:touch; padding:0 8px 16px; }
  #rxlbImg { max-width:96vw; max-height:82vh; border-radius:6px; cursor:zoom-in; display:block; margin:auto; }
  #rxlb.rx-zoomed #rxlbImg { max-width:none; max-height:none; cursor:zoom-out; margin:0; }
  #rxlbHint { text-align:center; color:rgba(255,255,255,.65); font-size:12px; padding:0 12px 12px; flex:none; }
  .rxlb-tilezoom { position:absolute; top:5px; right:5px; z-index:2; width:28px; height:28px; border-radius:50%;
                   border:none; background:rgba(8,10,14,.55); color:#fff; font-size:13px; line-height:1;
                   cursor:zoom-in; display:flex; align-items:center; justify-content:center; }
  .rxlb-tilezoom:hover { background:rgba(8,10,14,.8); }