/* deploy/einvoice-portal/public/assets/portal.css
   Supplier portal look = the ERP E-Invoicing module (§32.2) + §35 T1/T2
   typography discipline: ONE family (Dubai Font, self-hosted WOFF2, licence
   kept beside the fonts), one type scale, mono ONLY for identifiers.
   Arabic pages keep the same family; GE Dinar One is pre-wired through
   --font-ar-display but its files are NOT shipped (licence not owned).
   The portal CSP allows no inline styles — dynamic values come from JS via
   the CSSOM (e.g. the progress ring sets --p). IBM Plex Mono stays for
   identifiers only; Tahoma exists as a system-font fallback, never served. */

@font-face { font-family: 'Dubai'; font-weight: 400; font-style: normal;
  src: url('/assets/fonts/Dubai-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Dubai'; font-weight: 500; font-style: normal;
  src: url('/assets/fonts/Dubai-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Dubai'; font-weight: 700; font-style: normal;
  src: url('/assets/fonts/Dubai-Bold.woff2') format('woff2'); }

:root {
  --navy: #1F3A5F; --navy-dark: #16294a; --amber: #C8A24A; --amber-soft: #f6efdd;
  --ink: #0f172a; --mute: #64748b; --line: #e2e8f0; --bg: #f8fafc;
  --ok: #15803d; --warn: #b45309; --bad: #b91c1c; --r: 12px;
  --sans: 'Dubai', Tahoma, 'Segoe UI', Arial, sans-serif;
  --font-ar-display: 'Dubai';                 /* drop licensed GE Dinar One here later */
  --mono: 'Dubai', Tahoma, Arial, sans-serif;   /* R20.2 a: ONE font; identifiers get tabular-nums below */
  /* T2 scale (§72: compacted for dense professional forms) */
  --t-meta: 11.5px; --t-label: 12.5px; --t-body: 13.5px; --t-card: 15px; --t-sec: 18px; --t-hero: 24px;
  --lh: 1.5; --lh-ar: 1.7;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.einv-portal {
  margin: 0; font-family: var(--sans); font-size: var(--t-body); color: var(--ink);
  background: var(--bg); line-height: var(--lh); -webkit-text-size-adjust: 100%;
}
[dir="rtl"] body.einv-portal { line-height: var(--lh-ar); }
[dir="rtl"] [class*="eiv"], [dir="rtl"] [class*="einv"] { font-family: var(--font-ar-display), var(--sans); }
[hidden] { display: none !important; }
h1,h2,h3 { color: var(--navy); margin: 0; font-weight: 700; }
a { color: var(--navy); text-underline-offset: 2px; }
.mono, .einv-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
input, select, textarea, button { font: inherit; color: inherit; }
/* §35 owner rule: data fields are English — force LTR even in Arabic mode */
.einv-field input, .einv-field select, .einv-field textarea,
.einv-member input, .eiv-seg { direction: ltr; text-align: start; }
[dir="rtl"] .einv-field input, [dir="rtl"] .einv-field textarea { text-align: left; }
.einv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.einv-opt { color: var(--mute); font-weight: 400; font-size: var(--t-meta); }

/* ---------- top bar ---------- */
.einv-topbar { position: sticky; top: 0; z-index: 40; background: var(--navy); color: #fff;
  border-bottom: 3px solid var(--amber); }
.einv-topbar-in { display: flex; align-items: center; gap: 14px; padding: 10px 32px; max-width: 1680px; margin: 0 auto; }
.einv-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.einv-brand-logo { background: #fff; border-radius: 8px; padding: 3px 8px; display: inline-flex; }
.einv-brand-logo img { height: 34px; width: auto; display: block; }
.einv-brand-text { font-weight: 700; font-size: var(--t-body); min-width: 0; overflow-wrap: anywhere; }
.einv-topbar-right { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.einv-ctx-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--navy-dark);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 4px 12px; font-size: var(--t-meta); color: #e2e8f0; min-width: 0; }
/* EIV-L (§14): the top bar now holds only the logo, the portal name and the
   language switch (.einv-ctx-chip) — supplier/due chips and brand_tag are gone. */
/* V12 (§68.4): the chip sits on the WHITE pagehead card, not the navy topbar —
   translucent dark-alpha tints made it a pink pill with invisible text. */
.einv-saved-chip { font-size: var(--t-meta); padding: 4px 10px; border-radius: 999px; background: #dcfce7;
  color: #166534; border: 1px solid #86efac; }
.einv-saved-chip.saving { background: #fef3c7; color: #8a5a12; border-color: #fcd34d; }
.einv-saved-chip.dirty  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.einv-topbar-right a { white-space: nowrap; }
@media (max-width: 600px) {
  .einv-topbar-in { padding-inline: 16px; gap: 8px; }
  .einv-brand-text { font-size: var(--t-label); line-height: 1.25; }
}

/* ---------- shell grid ---------- */
.einv-main { max-width: 1680px; margin: 0 auto; padding: 22px 32px 90px; }
.eiv-cols { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 420px); gap: 22px; align-items: start; }
/* owner 2026-10-23: no inner scroll in the side column - an expanded card (e.g. "For your invoices later")
   shows at full height and the column scrolls with the page (was sticky + max-height + overflow:auto) */
.eiv-side { position: static; align-self: start; display: grid; gap: 14px; padding-inline-end: 2px; }
.eiv-maincol { min-width: 0; }
@media (max-width: 1100px) {
  .eiv-cols { grid-template-columns: 1fr; }
  .eiv-side { position: static; max-height: none; overflow: visible; order: -1; }
}
@media (max-width: 720px) { .einv-main { padding-inline: 16px; } }

/* ---------- cards (§72: stronger edge + shadow so cards read as distinct) ---------- */
.eiv-card, .einv-card { background: #fff; border: 1px solid #d7dfec; border-radius: var(--r);
  box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.einv-card { padding: 12px 14px; margin: 0 0 12px; }
.einv-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.einv-card-head h2 { font-size: var(--t-card); }
.einv-badge { margin-inline-start: auto; font-family: var(--mono); font-size: var(--t-meta); color: var(--navy);
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 999px; padding: 2px 10px; }

/* V6 details-as-cards */
.eiv-side details.eiv-card { padding: 0; }
.eiv-side summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 10px 14px; font-weight: 500; color: var(--navy); font-size: var(--t-label);
  border-bottom: 1px solid transparent; }
.eiv-side summary::-webkit-details-marker { display: none; }
.eiv-side details[open] > summary { border-bottom-color: var(--line); }
.eiv-cardsum-t { flex: 1; margin: 0; font-size: var(--t-label); font-weight: 600; color: var(--navy); }
.eiv-cardsum-n { font-family: var(--mono); font-size: var(--t-meta); color: var(--mute);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
.eiv-chev { flex: none; width: 8px; height: 8px; border-inline-end: 2px solid var(--mute); border-bottom: 2px solid var(--mute);
  transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
details[open] > summary .eiv-chev { transform: rotate(225deg) translateY(-2px); }
.eiv-cardbody { padding: 10px 14px 14px; }

/* ---------- stepper (single scrollable row, V9) ---------- */
.eiv-stepper { position: sticky; top: 64px; z-index: 30; display: flex; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: thin;
  background: #fff; border: 1px solid #d7dfec; border-radius: var(--r); padding: 6px 10px; margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.eiv-step { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); flex: none;
  border-radius: 999px; background: var(--bg); color: var(--mute); font-size: var(--t-meta); font-weight: 500;
  padding: 5px 12px; cursor: pointer; min-height: 32px; white-space: nowrap; }
.eiv-step i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.eiv-step.active { border-color: var(--navy); color: var(--navy); background: #eef2f7; }
.eiv-step.done i { background: var(--ok); }
.eiv-step.err { border-color: var(--bad); color: var(--bad); }
.eiv-step.err i { background: var(--bad); }
@media (max-width: 720px) { .eiv-stepper { top: 56px; } }

/* ---------- section cards (§72: banded header so each card reads clearly) ---------- */
.eiv-sec { scroll-margin-top: 120px; }
.eiv-sec-head { display: flex; align-items: baseline; gap: 10px; cursor: pointer;
  margin: -12px -14px 10px; padding: 8px 14px; border-bottom: 1px solid var(--line);
  border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9); }
.eiv-sec-no { font-family: var(--mono); font-size: var(--t-meta); color: #fff; background: var(--navy);
  border-radius: 6px; padding: 1px 7px; }
.eiv-sec-head h2 { font-size: var(--t-card); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.eiv-sec-sub { color: var(--mute); font-size: var(--t-meta); margin: 1px 0 6px; }
.eiv-sec-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.eiv-sec.collapsed .eiv-sec-body, .eiv-sec.collapsed .eiv-sec-acts { display: none; }
.eiv-sec.collapsed { padding-bottom: 12px; }
.eiv-sec.collapsed .eiv-sec-head { margin-bottom: -12px; border-bottom-color: transparent; }
.eiv-hidden { display: none !important; }

/* ---------- fields (T2: labels 13, inputs 15, 44px tall) ---------- */
.einv-hidden { display: none !important; }
/* R20.2 d (§63.2 d): density — 36 px inputs (44 px touch on phones), 12 px
   field gaps, 3-col short-field grid at ≥1200 px / 2 at 900–1199 / 1 below. */
.einv-grid { display: grid; grid-template-columns: 1fr; gap: 9px 14px; }
.einv-grid > * { min-width: 0; }
.einv-grid .einv-field, .einv-grid .einv-field-wide { margin: 0; }
.einv-grid .einv-field-wide { grid-column: 1 / -1; }
/* owner 2026-10-20: long values (issuing authority, wave) take two columns */
@media (min-width: 900px) { .einv-grid > .eiv-span2 { grid-column: span 2; } }
@media (min-width: 900px) { .einv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .einv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.einv-field { margin: 6px 0; min-width: 0; }
.einv-opts { margin: 8px 0 2px; }
.einv-opts > summary { list-style: none; cursor: pointer; color: var(--navy); font-weight: 600; font-size: var(--t-label); padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.einv-opts > summary::-webkit-details-marker { display: none; }
.einv-opts > summary .ic { transition: transform .15s; }
.einv-opts[open] > summary .ic { transform: rotate(90deg); }
.einv-opts[hidden] { display: none; }
.einv-field label, .einv-flabel { display: block; font-size: var(--t-label); font-weight: 500; color: var(--navy); margin-bottom: 3px; }
.einv-req { color: var(--bad); font-weight: 700; }
.einv-field input[type=text], .einv-field input[type=email], .einv-field input[type=tel],
.einv-field input[type=date], .einv-field input[type=number], .einv-field select, .einv-field textarea {
  width: 100%; min-height: 33px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px;
  font-size: var(--t-body); color: var(--ink); background: #fff;
}
@media (max-width: 720px) {
  .einv-field input[type=text], .einv-field input[type=email], .einv-field input[type=tel],
  .einv-field input[type=date], .einv-field input[type=number], .einv-field select,
  .eiv-seg button, .eiv-datebtn { min-height: 44px; }
  .eiv-btn, .einv-actions .eiv-btn { min-height: 44px; }
}
.einv-field textarea { min-height: 60px; }
/* owner 2026-10-20: the emirate lists hold short names (longest "Ras Al Khaimah") — no full-column dropdown */
.einv-field select#f_emirate, .einv-field select#f_biz_emirate { max-width: 240px; }
.einv-field input:focus, .einv-field select:focus, .einv-field textarea:focus {
  outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.einv-field input[readonly] { background: var(--bg); color: var(--mute); }
.einv-field.is-mono input { font-family: var(--mono); letter-spacing: .04em; }
.einv-err { color: var(--bad); font-size: var(--t-meta); min-height: 16px; margin-top: 3px; }
.einv-field .einv-help { color: var(--mute); font-size: var(--t-meta); margin: 2px 0 4px; }
.einv-src-tag { display: inline-block; font-size: 11px; font-weight: 500; color: var(--navy);
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 999px; padding: 0 8px; margin-inline-start: 6px; }
.einv-updated { background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 8px;
  font-size: var(--t-label); padding: 8px 12px; margin: 6px 0; }
.eiv-alert-warn { background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; border-radius: 8px;
  padding: 9px 12px; font-size: var(--t-label); margin: 6px 0 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.eiv-linkbtn { border: 0; background: none; color: var(--navy); font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }

/* locked fact tiles — values are DATA: never uppercase, never mono except codes */
/* §39.3 (owner): company tiles 60 / 10 / 10 / 20 — legal name gets the room,
   max-content keeps "CN-1020695" and "18 Oct 2027" on one line (the name
   column gives way first). 600-1099: name on row 1, three tiles on row 2. */
.einv-factrow { display: grid; gap: 10px; margin: 8px 0 2px;
  grid-template-columns: minmax(0, 6fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 2fr); }
.einv-fact:nth-child(1) { grid-row: 1; grid-column: 1; }
.einv-fact:nth-child(2) { grid-row: 1; grid-column: 2; }
.einv-fact:nth-child(3) { grid-row: 1; grid-column: 3; }
.einv-fact:nth-child(4) { grid-row: 1; grid-column: 4; }
@media (max-width: 1099px) {
  .einv-factrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .einv-fact:nth-child(1) { grid-row: 1; grid-column: 1 / 4; }
  .einv-fact:nth-child(2) { grid-row: 2; grid-column: 1; }
  .einv-fact:nth-child(3) { grid-row: 2; grid-column: 2; }
  .einv-fact:nth-child(4) { grid-row: 2; grid-column: 3; }
}
@media (max-width: 600px) {
  .einv-factrow { grid-template-columns: 1fr; }
  .einv-fact:nth-child(1), .einv-fact:nth-child(2), .einv-fact:nth-child(3), .einv-fact:nth-child(4) { grid-row: auto; grid-column: auto; }
}
.einv-fact .v.nowrap { white-space: nowrap; }
.einv-fact { border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; background: var(--bg); position: relative; min-width: 0; }
.einv-fact .k { font-size: var(--t-meta); color: var(--mute); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } /* V10 (§68.4): lock is INLINE before the label (below), no reserved slot needed */
.einv-fact .v { font-size: var(--t-body); font-weight: 500; margin-top: 2px; overflow-wrap: anywhere; }
/* V10 (§68.4): inline lock BEFORE the label (reviewer's option) — the absolute
   top-right lock overlapped the label text in narrow tiles. */
.einv-fact .lock { color: var(--mute); line-height: 0; flex: 0 0 auto; }
.einv-fact.is-expired { border-color: #fecaca; background: #fff7f7; }
.eiv-pill-expired { background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0 8px; }
.einv-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 18px;
  border-top: 1px dashed var(--line); margin-top: 12px; padding-top: 10px; }
@media (max-width: 900px) { .einv-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.einv-info { font-size: var(--t-label); margin: 3px 0; min-width: 0; }
.einv-info .k { color: var(--mute); }
.einv-info .v { font-weight: 500; }
.einv-confirm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px;
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 10px; padding: 10px 14px; }
.einv-confirm .q { font-weight: 500; color: var(--navy); margin-inline-end: auto; }

/* ---------- segmented toggles ---------- */
.eiv-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; }
.eiv-seg button { min-height: 36px; min-width: 56px; border: 0; background: #fff; color: var(--mute);
  font: inherit; font-weight: 500; padding: 6px 16px; cursor: pointer; }
.eiv-seg button + button { border-inline-start: 1px solid var(--line); }
.eiv-seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.eiv-seg button:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

/* ---------- EIV-7 (Oct 2026): aligned question rows ---------- */
/* The licensed-activities seg and the "everything above correct?" confirm row
   sit one under the other; eiv-seg-eq gives both pairs equal-width, equal-
   height buttons centred against the question text (en + ar, 1440 + 390 px).
   Logical properties only — mirrors cleanly in RTL. */
.eiv-seg.eiv-seg-eq, .eiv-seg-eq.einv-confirm-ask { display: flex; align-items: stretch; }
.eiv-seg-eq > button { flex: 1 1 0; min-width: 0; text-align: center; }
.einv-confirm .eiv-seg-eq { margin-inline-start: auto; }
/* UX-4 (cycle 58): the confirm bar — "Something has changed" / "تغيّر شيء ما"
   must not wrap and the two answers must not touch (equal height = the
   align-stretch above; nowrap buttons grow equal at flex 1 1 0). The group
   keeps its two buttons side by side and wraps UNDER the question (the
   .einv-confirm row already flex-wraps). Logical properties only (RTL-safe). */
.einv-confirm-ask { flex-wrap: wrap; gap: 8px; }   /* reviewer: wrap (stack) when the bar is narrower than both buttons */
.einv-confirm-ask > button { white-space: nowrap; }
/* reviewer (cycle 58): .eiv-seg-eq's flex:1 1 0 + min-width:0 squeezed both buttons below the
   "Something has changed" text (106px each at 390px) - keep each at least its own text width */
.einv-confirm-ask.eiv-seg-eq > button { flex: 1 0 auto; min-width: max-content; padding-inline: 14px; }
@media (max-width: 480px) {
  .eiv-seg.eiv-seg-eq, .eiv-seg-eq.einv-confirm-ask { width: 100%; }
}
/* licensed-activities read-only list */
.einv-activity { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 6px 0; }
.einv-activity-k { font-size: var(--t-label); color: var(--mute); margin-bottom: 4px; }
.einv-activity-list { margin: 0; padding-inline-start: 20px; font-weight: 500; }
.einv-activity-list li { margin-block: 2px; }
/* expiring-soon ID warning line (JS-injected under the date field)
   EIV-UX step 10: --amber on white is under 4.5:1 — same message colour
   as every other warning line (token USAGE change only, tokens untouched). */
.eiv-exp-warn { color: var(--warn); font-weight: 600; }

/* ---------- TIN / Peppol ---------- */
.eiv-tinwrap { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.eiv-tinwrap input { width: 150px !important; font-family: var(--mono); letter-spacing: .08em; }
.eiv-tinboxes { display: inline-flex; gap: 4px; }
.eiv-tinboxes b { width: 26px; height: 40px; border: 1px solid var(--line); border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--t-body); color: var(--navy); }
.eiv-tinboxes b.miss { border-color: var(--bad); }
.eiv-peppol-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--t-label);
  background: #eef2f7; border: 1px solid var(--navy); color: var(--navy); border-radius: 999px; padding: 3px 12px; margin-top: 6px; }

/* ---------- date (V8: dd Mmm yyyy text + twin picker) ---------- */
.eiv-datewrap { display: flex; gap: 6px; align-items: stretch; position: relative; }
.eiv-datewrap input[type=text] { flex: 1; }
.eiv-datepick { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.eiv-datewrap input[type=hidden] { display: none; }
.eiv-datebtn { min-height: 36px; width: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--navy); cursor: pointer; font-size: 16px; }
.eiv-datebtn:hover { border-color: var(--navy); }

/* ---------- buttons ---------- */
.eiv-btn, .einv-actions .eiv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 37px; padding: 7px 15px; border-radius: 9px; border: 1px solid var(--navy);
  background: #fff; color: var(--navy); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; }
.eiv-btn:hover { background: #eef2f7; }
.eiv-btn-primary { background: var(--amber); border-color: var(--amber); color: var(--navy-dark); }
.eiv-btn-primary:hover { background: #b8923c; }
.eiv-btn-primary[disabled] { opacity: .45; cursor: not-allowed; }
.eiv-btn-ghost, .einv-actions .eiv-btn-ghost { border-color: var(--line); color: var(--mute); }
.eiv-btn-sm { min-height: 32px; padding: 4px 12px; font-size: var(--t-label); border-radius: 7px; }
.eiv-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: inline-block; }
.eiv-btn.saved .dot { background: var(--ok); }
.eiv-btn.saving .dot { background: var(--amber); animation: eivpulse 1s infinite; }
@keyframes eivpulse { 50% { opacity: .3; } }

/* ---------- actions / QR ---------- */
.einv-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0 2px; }
.einv-saved-hint { color: var(--mute); font-size: var(--t-meta); margin-inline-start: auto; }
.einv-qrbox { text-align: center; margin-top: 4px; }
.einv-qrbox [data-qr] svg { width: 120px; height: 120px; }
.einv-qr-cap { font-size: 11px; color: var(--mute); }

/* ---------- progress ring (right card) ---------- */
.eiv-ringrow { display: flex; align-items: center; gap: 14px; }
.eiv-ring { --p: 0; width: 74px; height: 74px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--amber) calc(var(--p) * 1%), var(--line) 0); display: grid; place-items: center; flex: none; }
.eiv-ring b { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--navy); }
.eiv-ringtxt { min-width: 0; }
.eiv-statusline { font-size: var(--t-body); font-weight: 700; color: var(--navy); }
.eiv-proglabel { font-size: var(--t-label); color: var(--mute); }
.eiv-submit { width: 100%; }
.eiv-ticks { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 4px; }
.eiv-ticks li button { display: flex; width: 100%; align-items: center; gap: 8px; background: none; border: 0;
  padding: 5px 6px; border-radius: 7px; font: inherit; font-size: var(--t-body); color: var(--ink); cursor: pointer; text-align: start; }
.eiv-ticks li button:hover { background: var(--bg); }
.eiv-ticks .tick { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); flex: none;
  display: inline-grid; place-items: center; font-size: 10px; color: #fff; }
.eiv-ticks li.done .tick { background: var(--ok); border-color: var(--ok); }
.eiv-ticks li.err .tick { background: var(--bad); border-color: var(--bad); }
/* V6: the error list is a styled list, not raw bullets */
.eiv-leftlist { list-style: none; font-size: var(--t-label); color: var(--mute); margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.eiv-leftlist li { display: flex; gap: 7px; align-items: baseline; border: 1px solid var(--line);
  background: var(--bg); border-radius: 7px; padding: 5px 9px; }
.eiv-leftlist li::before { content: '•'; color: var(--amber); font-weight: 700; }
.eiv-leftlist a { cursor: pointer; }

/* ---------- Form A card ---------- */
.eiv-ids { background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 10px; padding: 4px 12px; margin: 8px 0; }
.eiv-kv { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgba(200,162,74,.4); }
.eiv-kv:last-child { border-bottom: 0; }
.eiv-kv .k { font-size: var(--t-meta); color: #7a6326; width: 38%; flex: none; padding-top: 2px; }
/* T1: identifiers mono + tabular; names/addresses NOT mono, NOT uppercase */
.eiv-kv .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-body); color: var(--navy);
  font-weight: 500; overflow-wrap: anywhere; flex: 1; }
.eiv-kv .v.eiv-kv-text { font-family: var(--sans); font-weight: 500; }
.eiv-kv .v a { font-weight: 500; }
.eiv-copy { flex: none; width: 30px; height: 30px; min-height: 30px; border: 1px solid var(--line); background: #fff;
  border-radius: 7px; cursor: pointer; color: var(--mute); display: inline-grid; place-items: center; padding: 0; font-size: 14px; }
.eiv-copy:hover { color: var(--navy); border-color: var(--navy); }
.eiv-copy.ok { color: var(--ok); border-color: var(--ok); }
.eiv-side-title { font-size: var(--t-label); font-weight: 700; color: var(--navy); margin: 0 0 4px; }
.eiv-side-sub { font-size: var(--t-meta); color: var(--mute); margin: 0 0 8px; }
.eiv-group { margin: 8px 0; }
.eiv-group h4 { margin: 0 0 2px; font-size: var(--t-meta); color: var(--mute); font-weight: 500; }
.eiv-forma-pending { background: var(--amber-soft); border: 1px dashed var(--amber); border-radius: 8px;
  font-size: var(--t-label); padding: 10px; color: #7a6326; }
.eiv-forma-foot { margin: 10px 0 0; }

/* ---------- documents GCC holds (view-only for supplier) ---------- */
.einv-cred-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.einv-cred-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 12px; background: var(--bg); }
.einv-cred-row .nm { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.einv-cred-row .dt { color: var(--mute); font-size: var(--t-label); min-width: 0; }
.einv-cred-acts { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; flex: none; }
.einv-dim { color: var(--mute); font-size: var(--t-label); }
.eiv-cred-note { margin: 8px 0 0; font-size: 11px; }
.eiv-help-warn { color: var(--warn); }

/* ---------- document tiles (V7 drop-zones) ---------- */
.einv-docs { display: grid; gap: 7px; }
@media (min-width: 900px) { .einv-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.einv-doc { border: 1px solid #d7dfec; border-radius: 10px; padding: 7px 10px; background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.einv-doc-label { font-weight: 500; font-size: var(--t-body); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.einv-doc-hint { font-weight: 400; color: var(--mute); font-size: 11px; }
.einv-doc .pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.einv-doc .pill.req { background: #fee2e2; color: var(--bad); }
.einv-doc .pill.opt { background: var(--bg); color: var(--mute); border: 1px solid var(--line); }
.einv-doc .pill.have { background: #dcfce7; color: var(--ok); }
/* EIV-2: "On file at GCC" reads as satisfied -> same green as Uploaded. */
.einv-doc .pill.onfile { background: #dcfce7; color: var(--ok); border: 1px solid var(--ok); }
/* EIV-8 (plan §11): the GCCAI document-check chip on a document row — the
   same pill family, then its detail list (labels + masked values only).
   The ⚠ chip is a real button: tap shows/hides the .eiv-chk-list. */
.einv-doc .pill.eiv-chip-checking { background: var(--bg); color: var(--mute); border: 1px solid var(--line); }
.einv-doc .pill.eiv-chip-ok { background: #dcfce7; color: var(--ok); }
.einv-doc .pill.eiv-chip-warn { background: var(--amber-soft); color: var(--warn); border: 1px solid var(--warn); }
.einv-doc button.pill.eiv-chip-warn { font: inherit; cursor: pointer; }
.einv-doc .pill.eiv-chip-read { background: var(--amber-soft); color: var(--warn); }
.einv-doc .pill.eiv-chip-err { background: var(--bg); color: var(--mute); border: 1px solid var(--line); }
.einv-doc-file { flex-wrap: wrap; }
.eiv-chk-list { flex-basis: 100%; margin: 4px 0 2px; padding-inline-start: 16px;
  font-size: 11px; font-weight: 400; color: var(--mute); }
.eiv-chk-list li { margin-block-start: 2px; overflow-wrap: anywhere; }
.einv-doc-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.einv-doc-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: 7px; padding: 3px 9px; font-size: var(--t-label); background: var(--bg); }
.einv-doc-del { border: 0; background: none; color: var(--mute); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 5px; }
.einv-doc-del:hover { color: var(--bad); }
/* EIV-2: armed state of the remove button ("Remove?" confirm). */
.einv-doc-del.is-confirm { background: var(--bad); color: #fff; border-radius: 6px;
  font-size: var(--t-meta); font-weight: 600; padding: 3px 8px; }
.einv-docs-help { margin-bottom: 8px; }
.einv-docs-fields { margin-bottom: 12px; }
.einv-dropzone { display: flex; align-items: center; gap: 8px; border: 1.5px dashed var(--line); border-radius: 9px;
  padding: 8px 10px; background: var(--bg); cursor: pointer; transition: border-color .15s, background .15s; }
.einv-dropzone:hover, .einv-dropzone.drag { border-color: var(--navy); background: #eef2f7; }
.einv-dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.einv-drop-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; flex: none;
  display: inline-grid; place-items: center; font-size: 14px; }
.einv-drop-t { font-weight: 500; color: var(--navy); }
.einv-drop-h { font-size: 11px; color: var(--mute); display: block; font-weight: 400; }
.einv-doc-progress { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 6px; }
.einv-doc-progress i { display: block; height: 100%; width: 0; background: var(--amber); transition: width .2s; }
.einv-doc-meta { font-size: 11px; }

/* ---------- members ---------- */
#members-rows .einv-member { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 6px; margin-bottom: 6px; }
#members-rows .einv-member input { min-height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: var(--t-body); }
#members-rows .einv-member input[data-m=tin] { font-family: var(--mono); }
#members-rows .einv-member button { border: 1px solid var(--line); background: #fff; border-radius: 8px; color: var(--mute); cursor: pointer; min-height: 40px; }
@media (max-width: 600px) { #members-rows .einv-member { grid-template-columns: 1fr 1fr auto; }
  #members-rows .einv-member input[data-m=tin] { grid-column: 1 / 3; } }

/* ---------- signature ---------- */
.einv-sig { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
#sig-pad { border: 1px solid var(--line); border-radius: 10px; background: #fff; touch-action: none;
  flex: 1 1 auto; min-width: 0; max-width: 100%; }
.einv-agree label { display: flex; gap: 9px; align-items: flex-start; font-weight: 400; font-size: var(--t-body); color: var(--ink); }
.einv-agree input[type=checkbox] { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--navy); }

/* ---------- review ---------- */
.eiv-review dl { display: grid; grid-template-columns: 40% 1fr; gap: 2px 14px; margin: 6px 0 10px; }
.eiv-review dt { color: var(--mute); font-size: var(--t-label); padding: 3px 0; }
.eiv-review dd { margin: 0; font-size: var(--t-body); font-weight: 500; padding: 3px 0; overflow-wrap: anywhere; }
.eiv-review .eiv-rev-sec { font-size: var(--t-meta); color: var(--navy); font-weight: 700;
  grid-column: 1 / -1; border-bottom: 1px solid var(--line); margin-top: 8px; padding-bottom: 2px; display: flex; }
.eiv-review .eiv-rev-sec button { margin-inline-start: auto; border: 0; background: none; color: var(--navy);
  font: inherit; font-size: var(--t-label); cursor: pointer; text-decoration: underline; }

/* ---------- step / receipt ---------- */
.eiv-steps { counter-reset: st; display: grid; gap: 10px; margin: 12px 0; }
.eiv-stepcard { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; background: #fff; }
.eiv-stepcard .n { counter-increment: st; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.eiv-stepcard .n::before { content: counter(st); }
.eiv-stepcard.done { border-color: var(--ok); background: #f0fdf4; }
.eiv-stepcard.done .n { background: var(--ok); }
.eiv-stepbody { flex: 1; min-width: 0; }
.eiv-step-summary-t { font-size: var(--t-card); margin: 16px 0 4px; }
.eiv-step-next { margin-top: 10px; }
.eiv-sign-btn { cursor: pointer; }
.einv-banner-ok, .einv-banner-done { background: #dcfce7; border: 1px solid #86efac; color: #14532d; border-radius: 10px; padding: 10px 14px; font-weight: 500; margin-bottom: 10px; }

/* ---------- landing / root page (§14 EIV-L: one logo, facts once, light head) ---------- */
.eiv-landing { display: grid; gap: 24px; max-width: 960px; margin: 0 auto; }
.eiv-landing > .eiv-pagehead { display: grid; justify-content: center; justify-items: center; align-items: start; gap: 8px; text-align: center; } /* scoped: the form/step .eiv-pagehead below is a flex row */
.eiv-eyebrow { font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); font-weight: 500; }
.eiv-h1 { font-size: var(--t-hero); margin: 0; }
.eiv-lead { color: var(--mute); font-size: var(--t-body); margin: 0 auto; max-width: 62ch; }
@media (max-width: 600px) { .eiv-cta-btn { width: 100%; } }
.eiv-cta-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px;
  box-shadow: 0 1px 3px rgba(15,23,42,.06); text-align: center; }
.eiv-cta-head { display: grid; gap: 4px; margin-bottom: 16px; }
.eiv-cta-co { font-size: var(--t-card); font-weight: 700; color: var(--ink); }
.eiv-cta-no { font-size: var(--t-label); color: var(--mute); font-variant-numeric: tabular-nums; }
.eiv-cta-btn { width: min(420px, 100%); min-height: 48px; font-size: var(--t-card); padding: 13px 22px; }
.eiv-cta-note { color: var(--mute); font-size: var(--t-meta); margin: 12px 0 0; }
.eiv-cta-eng { color: var(--mute); font-size: var(--t-meta); margin: 4px 0 0; }
/* "How it works": ONE slim 4-step timeline (§14.1); stacks on phone */
.eiv-how { display: grid; gap: 16px; }
.eiv-how-title { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); text-align: center; margin: 0; font-weight: 500; }
.eiv-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.eiv-timeline::before { content: ""; position: absolute; inset-inline: 12.5%; top: 15px; height: 2px; background: var(--line); z-index: 0; } /* centre of step 1 to centre of step 4, behind the circles */
.eiv-tl-step { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.eiv-tl-n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff;
  display: inline-grid; place-items: center; font-weight: 700; font-size: var(--t-body); position: relative; }
.eiv-tl-body { display: grid; gap: 2px; min-width: 0; }
.eiv-tl-body b { font-size: var(--t-label); color: var(--navy); font-weight: 700; }
@media (min-width: 721px) { .eiv-tl-step { flex-direction: column; align-items: center; text-align: center; } .eiv-tl-body { justify-items: center; } .eiv-tl-n { z-index: 1; box-shadow: 0 0 0 4px var(--bg, #f6f7f9); } }
@media (max-width: 720px) { .eiv-timeline { grid-template-columns: 1fr; gap: 8px; } .eiv-timeline::before { display: none; } }
/* info row: checklist / safety / help */
.eiv-inforow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.eiv-inforow-one { grid-template-columns: 1fr; }
@media (max-width: 820px) { .eiv-inforow { grid-template-columns: 1fr; } }
.eiv-infocard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px;
  display: grid; gap: 8px; align-content: start; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.eiv-infocard b { color: var(--navy); font-size: var(--t-label); font-weight: 700; }
.eiv-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--t-label); }
.eiv-checklist li { display: flex; gap: 8px; }
.eiv-checklist li::before { content: "☐"; color: var(--navy); flex: none; }
.eiv-need-note { font-size: var(--t-meta); color: var(--mute); }
.eiv-helpbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.eiv-error-card { text-align: center; }
.einv-error-icon { color: var(--mute); }
.einv-error-title { font-size: var(--t-sec); margin: 8px 0 4px; }
.einv-error-body { color: var(--mute); font-size: var(--t-body); margin: 0; }
.einv-error-help { color: var(--mute); font-size: var(--t-label); }

/* ---------- slide-over View modal + submit dialog (V2: class-based) ---------- */
.eiv-slideover { position: fixed; inset: 0; z-index: 60; background: rgba(15,23,42,.45); }
.eiv-slideover-panel { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(760px, 92vw);
  background: #fff; border-inline-start: 3px solid var(--amber); box-shadow: -8px 0 30px rgba(15,23,42,.3);
  display: flex; flex-direction: column; animation: eivslide .22s ease-out; }
@keyframes eivslide { from { transform: translateX(6%); opacity: .6; } to { transform: none; opacity: 1; } }
[dir="rtl"] .eiv-slideover-panel { animation-name: eivslide-rtl; }
@keyframes eivslide-rtl { from { transform: translateX(-6%); opacity: .6; } to { transform: none; opacity: 1; } }
.eiv-slideover-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--navy); color: #fff; }
.eiv-slideover-head h3 { color: #fff; font-size: var(--t-label); flex: 1; }
.eiv-slideover-close { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 8px;
  min-width: 38px; min-height: 38px; font-size: 18px; cursor: pointer; }
.eiv-slideover iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
.eiv-dialog { position: fixed; inset: 0; z-index: 65; background: rgba(15,23,42,.45); display: grid; place-items: center; }
.eiv-dialog-panel { width: min(460px, 92vw); background: #fff; border-radius: var(--r); overflow: hidden;
  border-top: 3px solid var(--amber); box-shadow: 0 18px 50px rgba(15,23,42,.35); }
.eiv-dialog-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--navy); }
.eiv-dialog-head h3 { color: #fff; font-size: var(--t-card); flex: 1; }
.eiv-dialog-close { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 8px;
  min-width: 34px; min-height: 34px; font-size: 17px; cursor: pointer; }
.eiv-dialog-body { padding: 18px 20px; }
.eiv-dialog-body p { margin: 0 0 16px; font-size: var(--t-body); }
.eiv-dialog-acts { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- footer band (V1/V2) ---------- */
.einv-footer { background: var(--navy-dark); color: #cbd5e1; border-top: 3px solid var(--amber); margin-top: 30px; }
.einv-footer-in { max-width: 1680px; margin: 0 auto; padding: 20px 32px; display: flex; gap: 18px;
  align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; }
.einv-footer-txt { font-size: var(--t-meta); line-height: 1.6; }
.einv-footer-txt b { color: #fff; }
.einv-footer a { color: #e2e8f0; }

/* ---------- phone bottom bar ---------- */
.eiv-bottombar { display: none; }
@media (max-width: 720px) {
  .eiv-bottombar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: #fff; border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
  .eiv-bottombar .eiv-btn { flex: 1; min-width: 0; }
  .einv-actions .eiv-btn-primary, .einv-actions #btn-save { display: none; }
  .einv-main { padding-bottom: 110px; }
}

/* ---------- misc ---------- */
.einv-dim { color: var(--mute); }
.eiv-notice { background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 8px; padding: 8px 12px; font-size: var(--t-label); margin: 8px 0; }
.eiv-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--navy);
  color: #fff; font-size: var(--t-label); border-radius: 999px; padding: 8px 18px; z-index: 70; opacity: 0; transition: opacity .2s; }
.eiv-toast.show { opacity: 1; }
.einv-req-banner { margin-top: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; border-radius: 8px; padding: 8px 12px; }
.eiv-jsnote { font-size: var(--t-meta); color: var(--warn); margin-top: 6px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
/* §35: Arabic typed into a data field */
.einv-field.is-arabic input, .einv-field.is-arabic textarea,
.einv-member input.is-arabic { border-color: var(--bad); background: #fff7f7; }

@media print {
  .einv-topbar, .einv-footer, .eiv-stepper, .einv-actions, .eiv-bottombar, .eiv-side, .eiv-slideover, .eiv-toast, .eiv-dialog { display: none !important; }
  body { background: #fff; }
  .einv-card { box-shadow: none; border: 1px solid #ccc; }
}

/* ---------- R14 (rev.41): Form B pages: ONE family, ONE size ----------
   Everything on the form/step/thank-you pages is 14 px (mono for identifiers
   at the same size); hierarchy comes from weight and colour only. 12 px is
   allowed only on the "from GCC records" tag and badges. The landing hero
   (V1) keeps its own scale. R15: the page header's h1 (20 px) is the single
   exception on these pages. */
body[data-page="form"], body[data-page="step"] {
  --t-meta: 14px; --t-label: 14px; --t-body: 14px; --t-card: 14px;
  font-size: 14px; line-height: 1.5;
}
body[data-page="form"] .einv-src-tag,
body[data-page="step"] .einv-src-tag,
body[data-page="form"] .eiv-pill-expired,
body[data-page="form"] .einv-doc .pill,
body[data-page="step"] .einv-doc .pill,
body[data-page="form"] .einv-badge,
body[data-page="step"] .einv-badge,
body[data-page="form"] .eiv-status-chip,
body[data-page="step"] .eiv-status-chip { font-size: 12px; }
body[data-page="form"] .einv-qr-cap, body[data-page="step"] .einv-qr-cap,
body[data-page="form"] .einv-doc-hint, body[data-page="step"] .einv-doc-hint,
body[data-page="form"] .einv-drop-h, body[data-page="step"] .einv-drop-h,
body[data-page="form"] .einv-doc-meta, body[data-page="step"] .einv-doc-meta,
body[data-page="form"] .eiv-cred-note, body[data-page="step"] .eiv-cred-note { font-size: 14px; }
body[data-page="form"] .eiv-ring b, body[data-page="step"] .eiv-ring b { font-size: 14px; }
body[data-page="form"] .eiv-datebtn, body[data-page="step"] .eiv-datebtn,
body[data-page="form"] .einv-doc-del, body[data-page="step"] .einv-doc-del,
body[data-page="form"] .einv-drop-ico, body[data-page="step"] .einv-drop-ico { font-size: 14px; }
/* tile values: semibold, NOT large */
body[data-page="form"] .einv-fact .v { font-size: 14px; font-weight: 600; }

/* ---------- R15 (rev.41): page header block ---------- */
.eiv-pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  flex-wrap: wrap; padding: 14px 18px; margin: 0 0 14px;
  /* §48.1: same card style as the ERP module page header (white card, line, radius 12) */
  background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.eiv-pagehead-eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber); font-weight: 500; margin: 0 0 2px; }
.eiv-pagehead-h1 { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 4px; line-height: 1.3; }
.eiv-pagehead-meta { margin: 0; color: var(--mute); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.eiv-pagehead-meta b { color: var(--ink); font-weight: 600; }
.eiv-pagehead-meta .sep { color: var(--line); }
.eiv-status-chip { border-radius: 999px; padding: 2px 10px; font-weight: 700; white-space: nowrap; }
.eiv-status-chip.draft { background: #fef3c7; color: #8a5a12; }
.eiv-status-chip.submitted { background: #dbeafe; color: #1e40af; }
.eiv-status-chip.signed { background: #d1fae5; color: #065f46; }
.eiv-pagehead-r { display: flex; align-items: center; gap: 10px; }
@media (max-width: 600px) { .eiv-pagehead { align-items: flex-start; } .eiv-pagehead-r { width: 100%; } }
/* §45.2 R17 — "What are the waves?" info button (slide-over opener) */
.eiv-waves-info { background:none; border:none; color:var(--navy); font-size:14px; padding:0 0 4px; cursor:pointer; text-decoration:underline; }
.eiv-waves-table { width:100%; border-collapse:collapse; font-size:14px; }
.eiv-waves-table th, .eiv-waves-table td { border-bottom:1px solid var(--line); padding:8px 6px; text-align:left; vertical-align:top; }
.eiv-waves-table th { color:var(--navy); font-weight:600; }

/* ── R19 (§57): shared Form B extras ── staff edit tag (both screens),
   ERP staff panel bits that live inside the .einv-formb wrapper. ── */
.einv-staff-tag {
  display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.5;
  color: #7a5b0f; background: #fdf3d7; border: 1px solid #f0dca6;
  border-radius: 999px; padding: 0 7px; margin-inline-start: 6px; vertical-align: 1px;
}
.eiv-crumb { font-size: 12px; color: #64748b; margin: 2px 0 10px; }
.eiv-crumb a { color: #37506f; text-decoration: none; }
.eiv-crumb a:hover { text-decoration: underline; }
.eiv-crumb span { margin: 0 6px; color: #94a3b8; }
.eiv-card-h { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .4px; margin: 10px 0 4px; }
.eiv-card-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.eiv-notes-l { display: block; font-size: 12px; color: #475569; margin: 10px 0 4px; }
.eiv-signed-ok { color: #14532d; }
.eiv-alert-ok, .eiv-alert-info {
  border: 1px solid #bfe6cc; background: #e9f8ef; color: #14532d;
  border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 12px;
}
.eiv-alert-info { border-color: #c7d8f0; background: #eef4fd; color: #1e3a5f; }

/* ── R20 (§63/§64): shared icon system + progress ticks + TIN counter ── */
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75;
      stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; flex: none; }
.ic-sm { width: 12px; height: 12px; }
.eiv-ticks .tick .ic { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; vertical-align: 0; }
.eiv-ticks li.err .tick .ic { stroke: #fff; }
.eiv-tinwrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eiv-tinwrap input[type=text] { flex: 0 1 160px; }
.eiv-tin-count { font-variant-numeric: tabular-nums; font-size: var(--t-meta); color: var(--mute); white-space: nowrap; }
.eiv-tin-count.ok { color: var(--ok); font-weight: 600; }
.einv-fact .k .ic { color: var(--mute); }
.eiv-doc-onfile .ic, .einv-doc-file .ic { color: var(--mute); }

/* ===== EIV-3 (Oct 2026) ===== */
.einv-confirmed { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ok); }
.eiv-golive-wave { grid-column: 1 / -1; justify-self: start; margin-top: -2px; }
.einv-iban-ok { color: var(--ok); margin: 3px 0 0; }
.eiv-eid-warn { color: var(--warn); margin: 3px 0 0; }

/* ---------- EIV-6: "Email me my link" card on the home / link-not-valid pages ---------- */
/* owner 2026-10-27: both fields on ONE line - labels row 1, the two inputs + the button row 2, the trade
   licence hint row 3 (the hint used to push the email field down). Each field box is display: contents so its
   label / input / hint are placed on the form grid directly; under 720px everything stacks in source order. */
.eiv-linkform form { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 4px; align-items: center;
  margin-top: 8px; text-align: start; }
.eiv-linkform .einv-field { display: contents; }
.eiv-linkform .einv-field label { display: block; font-size: var(--t-label); color: var(--mute); margin: 0; }
.eiv-linkform .einv-field p { margin: 0; font-size: var(--t-label); }
.eiv-linkform .einv-field:nth-of-type(2) > label { margin-top: 8px; }
@media (min-width: 721px) {
  .eiv-linkform form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; column-gap: 10px; }
  .eiv-linkform .einv-field:nth-of-type(1) > label { grid-column: 1; grid-row: 1; }
  .eiv-linkform .einv-field:nth-of-type(1) > input { grid-column: 1; grid-row: 2; }
  .eiv-linkform .einv-field:nth-of-type(1) > p { grid-column: 1; grid-row: 3; }
  .eiv-linkform .einv-field:nth-of-type(2) > label { grid-column: 2; grid-row: 1; margin-top: 0; }
  .eiv-linkform .einv-field:nth-of-type(2) > input { grid-column: 2; grid-row: 2; }
  .eiv-linkform form > button { grid-column: 3; grid-row: 2; }
}

/* ===== EIV-7 PART 3 (plan §9.1): place-of-business address + map picker ===== */
.einv-bizmap { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 12px; }
.eiv-biz-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-top: 8px; }
.eiv-biz-paste { display: flex; flex: 1 1 240px; gap: 8px; min-width: 0; }
.eiv-biz-paste input { flex: 1 1 auto; min-width: 0; }
/* owner 2026-10-20: "Use link" wrapped onto two lines — keep it one line, roomier */
.eiv-biz-paste > .eiv-btn { flex: 0 0 auto; white-space: nowrap; padding-inline: 18px; min-width: 110px; }
/* Leaflet needs an explicit height (no inline styles — CSP); tiles fill it. */
.eiv-biz-map { height: 320px; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.eiv-biz-map[hidden] { display: none; }
/* RTL-safe: Leaflet's controls/attributions are absolute, screen-space widgets —
   keep their internals LTR even in an RTL document (arrows stay meaningfully
   left/right in the map's own space). */
.eiv-biz-map .leaflet-container { direction: ltr; text-align: left; font: inherit; font-size: var(--t-meta); }
.eiv-biz-map .leaflet-control-attribution a { color: var(--navy); }
.eiv-biz-status { margin-top: 8px; font-weight: 600; color: var(--ok); }
.eiv-biz-msg { color: var(--mute); margin-top: 6px; }
.eiv-biz-warn { color: var(--warn); font-weight: 600; margin-top: 6px; }
.eiv-biz-static { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 6px; font-size: var(--t-meta); color: var(--mute); }
.eiv-biz-static .einv-mono { color: var(--ink); }
.eiv-biz-static a { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; }
@media (max-width: 520px) { .eiv-biz-map { height: 260px; } .eiv-biz-paste { flex-basis: 100%; } }
/* EIV-GMAP: the Google Places search row above the map + the one-line note
   shown when the page fell back to the basic Leaflet+Esri map. */
.eiv-biz-search { margin-top: 8px; }
.eiv-biz-search > * { display: block; min-width: 0; }
/* owner 2026-10-20: place-of-business address + emirate on ONE line; stacked on phones. */
.eiv-biz-line { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 14px; align-items: start; }
.eiv-biz-line > .einv-field { margin-top: 0; }
@media (max-width: 700px) { .eiv-biz-line { grid-template-columns: 1fr; } }
/* Reviewer 2026-10-20: Google's search element follows the OS dark mode and
   rendered black on the light portal; the portal is light-only, so pin it. */
.eiv-biz-search gmp-place-autocomplete { color-scheme: light; background-color: #fff; border: 1px solid var(--line); border-radius: 10px; }
.eiv-biz-fallback { margin-top: 8px; font-size: var(--t-meta); color: var(--mute); }

/* ================================================================
   EIV-UX (Oct 2026, plan §16): form-page renovation — compact sticky
   head, guided sections, ⓘ tooltips, fix boxes, the documents
   checklist, the slimmer side panel and the confirm bottom sheet.
   The same EIV-L language: light head, white cards, one gold action,
   navy only in the top bar; 8-px spacing; existing tokens only;
   logical properties so RTL mirrors. The ERP staff screen shares this
   file (scoped under div.einv-formb there) and never gets the
   JS-injected guided bits (guided/… classes are set portal-only by
   portal.js, behind body[data-portal]).
   ================================================================ */

/* ---------- step 1: compact sticky head on the form page ---------- */
body[data-portal="1"][data-page="form"] .eiv-pagehead {
  position: sticky; top: 64px; z-index: 34; padding: 10px 16px 8px;
}
@media (max-width: 720px) { body[data-portal="1"][data-page="form"] .eiv-pagehead { top: 56px; } }
body[data-portal="1"][data-page="form"] .eiv-stepper { position: static; }  /* the head is the sticky line */
body[data-portal="1"][data-page="form"] .eiv-sec { scroll-margin-top: 200px; }
.eiv-pagehead.is-stuck .eiv-pagehead-eyebrow, .eiv-pagehead.is-stuck .eiv-pagehead-h1 { display: none; }
.eiv-pagehead.is-stuck { padding-block: 6px; }
/* Reviewer (EIV-UX): on phones the stuck head is ONE slim line (progress + save state); the fact line and the
   PDF button return when the supplier scrolls back up. The old step row is redundant in guided mode (sections +
   head progress + side ticks replace it) and peeked out behind the sticky head. */
@media (max-width: 720px) {
  .eiv-pagehead.is-stuck .eiv-pagehead-meta, .eiv-pagehead.is-stuck .eiv-pagehead-r .eiv-btn { display: none; }
}
body.eiv-guided .eiv-stepper { display: none; }
.eiv-headprog { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; }
.eiv-headprog-bar { flex: 1 1 140px; min-width: 72px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.eiv-headprog-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 999px; background: var(--amber); transition: width .25s; }
.eiv-headprog-txt { font-size: var(--t-meta); color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- step 2: guided sections (classes set portal-only by JS) ---------- */
.eiv-sec-meta { font-size: var(--t-meta); color: var(--mute); font-weight: 400; white-space: nowrap; }
.eiv-sec-head:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; border-radius: calc(var(--r) - 1px); }
.eiv-sec-summary { display: none; }
.eiv-guided .eiv-sec.collapsed .eiv-sec-summary {
  display: flex; align-items: center; gap: 8px; padding: 4px 14px 8px;
  font-size: var(--t-label); min-width: 0;
}
.eiv-guided .eiv-sec.collapsed .eiv-sec-head { margin-bottom: 0; }
.eiv-sec-summary .tickok { color: var(--ok); line-height: 0; flex: none; }
.eiv-sec-summary .sumtxt { min-width: 0; overflow-wrap: anywhere; font-weight: 500; color: var(--ink); }
.eiv-sec-edit { flex: none; margin-inline-start: auto; border: 0; background: none; color: var(--navy);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 6px 8px; min-height: 32px; }
@media (max-width: 720px) { .eiv-sec-edit { min-height: 44px; } }

/* ---------- step 4: gentle errors + per-section fix box ---------- */
.einv-field.is-error input, .einv-field.is-error select, .einv-field.is-error textarea {
  border-color: var(--bad); background: #fff7f7;
}
.eiv-sec-fixes {
  background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; border-radius: 10px;
  padding: 8px 12px; margin: 4px 0 8px; font-size: var(--t-label);
}
.eiv-sec-fixes b { display: block; }
.eiv-sec-fixes ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.eiv-sec-fixes a { color: #7f1d1d; text-decoration: underline; cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 720px) { .eiv-sec-fixes a { min-height: 44px; } }

/* ---------- step 3: label row + ⓘ tooltip (CSS-positioned, no JS lib) ---------- */
.einv-lbl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 3px; }
.einv-lbl > label { margin-bottom: 0; }
.einv-lbl > .einv-help { width: 100%; margin: 0; }
.eiv-info { position: relative; display: inline-flex; line-height: 0; }
.eiv-info-btn { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--navy);
  background: #fff; color: var(--navy); display: inline-grid; place-items: center; padding: 0; cursor: pointer; position: relative; }
.eiv-info-btn:hover { background: #eef2f7; }
/* EIV-UX step 10: invisible 44 px tap area around the small button on phones */
@media (max-width: 720px) { .eiv-info-btn::after { content: ""; position: absolute; inset: -12px; } }
.eiv-info-tip {
  position: absolute; bottom: calc(100% + 8px); inset-inline-start: -8px; z-index: 36; display: none;
  width: min(300px, 74vw); background: var(--navy); color: #fff; font-size: var(--t-meta); font-weight: 400;
  line-height: 1.45; padding: 8px 10px; border-radius: 8px; box-shadow: 0 6px 18px rgba(15,23,42,.25); text-align: start;
}
.eiv-info:hover .eiv-info-tip, .eiv-info:focus-within .eiv-info-tip { display: block; }

/* ---------- step 3: sub-headings inside the grids / sections ---------- */
.einv-subh { margin: 12px 0 2px; font-size: var(--t-meta); font-weight: 700; color: var(--mute); }
.einv-grid > .einv-subh { grid-column: 1 / -1; margin: 4px 0 0; }

/* ---------- step 5: documents as a checklist (one row per document) ---------- */
.eiv-guided .einv-docs { grid-template-columns: 1fr; }
.eiv-doc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.eiv-doc-row > .einv-doc-label { order: 1; flex: 1 1 320px; min-width: 0; }
.eiv-doc-row > .einv-doc-onfile { order: 2; }
.eiv-doc-row > .einv-doc-files { order: 3; margin: 0; }
.eiv-doc-row > .eiv-up-btns { order: 4; margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.eiv-doc-row > .einv-doc-progress { order: 5; flex-basis: 100%; margin-top: 2px; }
.eiv-doc-row > [data-up-pct] { order: 6; }
.eiv-doc-row > .einv-err { order: 7; flex-basis: 100%; }
.eiv-doc-row .einv-dropzone { padding: 7px 12px; }
.eiv-doc-row .einv-drop-t { white-space: nowrap; }
.einv-doc-pct { font-size: var(--t-meta); color: var(--mute); font-variant-numeric: tabular-nums; }
.einv-doc-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); background: #fff; flex: none; }
/* "Take photo" (capture="environment") is a phone control only */
.eiv-cam-btn { display: none; }
@media (max-width: 720px) { .eiv-cam-btn { display: inline-flex; } }

/* ---------- step 6: right panel — the head shows the % under 1200 px,
   so the progress card would only repeat it: hide it there. ---------- */
@media (max-width: 1199px) { body[data-page="form"] #card-progress { display: none; } }

/* ---------- step 7: one big Submit + confirm dialog as a bottom sheet ---------- */
.eiv-btn-lg { min-height: 44px; padding-inline: 22px; font-weight: 700; }
@media (max-width: 720px) {
  .eiv-dialog { place-items: end center; }
  .eiv-dialog-panel { width: 100%; border-radius: var(--r) var(--r) 0 0;
    box-shadow: 0 -12px 40px rgba(15,23,42,.35); padding-bottom: env(safe-area-inset-bottom); }
  .eiv-dialog-acts { flex-direction: column-reverse; }
  .eiv-dialog-acts .eiv-btn { width: 100%; min-height: 48px; }
}

/* ---------- step 10: tap targets on phones ---------- */
@media (max-width: 720px) {
  .eiv-copy, .einv-doc-del, .eiv-step, .eiv-datebtn, .eiv-btn-sm { min-width: 44px; min-height: 44px; }
}

/* owner 2026-10-20: a field filled from the uploaded document stays tinted until edited */
.einv-field.eiv-filled input[type=text], .einv-field.eiv-filled select { background: #f1f8f1; border-color: var(--ok); }
/* owner 2026-10-20: AI indicator while GCCAI reads an upload — a shimmering
   chip with pulsing sparkles, and the fields it may fill shimmer while empty. */
.einv-doc .pill.eiv-chip-checking.eiv-ai-busy { display: inline-flex; align-items: center; gap: 5px; color: #4b3fb5; border-color: #cfc9f5;
  background: linear-gradient(100deg, #f3f1ff 30%, #e4dfff 50%, #f3f1ff 70%); background-size: 220% 100%; animation: eiv-ai-shine 1.6s linear infinite; }
.eiv-ai-ic { color: #6a5cf0; animation: eiv-ai-pulse 1.2s ease-in-out infinite; }
.einv-field.eiv-ai-wait input[type=text] { background: linear-gradient(100deg, #fff 30%, #efecff 50%, #fff 70%); background-size: 220% 100%; animation: eiv-ai-shine 1.6s linear infinite; border-color: #cfc9f5; }
@keyframes eiv-ai-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes eiv-ai-pulse { 0%, 100% { transform: scale(.85) rotate(0deg); opacity: .65; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .einv-doc .pill.eiv-chip-checking.eiv-ai-busy, .eiv-ai-ic, .einv-field.eiv-ai-wait input[type=text] { animation: none; } }
/* owner 2026-10-21: while GCCAI reads an upload the WHOLE document card fades
   and a centred panel shows the AI orb, the message, a moving bar and seconds. */
.einv-doc.eiv-ai-reading { position: relative; }
.einv-doc.eiv-ai-reading > :not(.eiv-ai-overlay) { opacity: .22; filter: grayscale(.6); pointer-events: none; transition: opacity .3s ease; }
.eiv-ai-overlay { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 16px; border-radius: inherit; background: rgba(247, 245, 255, .72); border: 1px solid #d9d3fb;
  animation: eiv-ai-in .25s ease both; text-align: start; }
.eiv-ai-overlay.is-done { animation: eiv-ai-out .3s ease both; }
.eiv-ai-orb { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 30% 30%, #8f84ff, #5a4bd8 60%, #3d2fb0); box-shadow: 0 0 0 0 rgba(106, 92, 240, .45);
  animation: eiv-ai-ring 1.6s ease-out infinite; }
.eiv-ai-orb .eiv-ai-orb-ic { width: 22px; height: 22px; animation: eiv-ai-pulse 1.2s ease-in-out infinite; }
.eiv-ai-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: #3a2f9a; }
.eiv-ai-txt b { font-size: var(--t-body); }
.eiv-ai-sub { font-size: var(--t-meta); color: #5b5490; }
.eiv-ai-bar { display: block; width: min(260px, 60vw); height: 4px; border-radius: 4px; background: #e2ddff; overflow: hidden; margin-top: 3px; }
.eiv-ai-bar > i { display: block; width: 40%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #8f84ff, #5a4bd8); animation: eiv-ai-slide 1.3s ease-in-out infinite; }
@keyframes eiv-ai-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes eiv-ai-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes eiv-ai-ring { 0% { box-shadow: 0 0 0 0 rgba(106, 92, 240, .45); } 100% { box-shadow: 0 0 0 14px rgba(106, 92, 240, 0); } }
@keyframes eiv-ai-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
[dir="rtl"] .eiv-ai-bar > i { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .eiv-ai-overlay, .eiv-ai-orb, .eiv-ai-orb .eiv-ai-orb-ic, .eiv-ai-bar > i { animation: none; } }
/* owner 2026-10-21: the same busy panel for the upload — real % bar, a spinning ring round the orb */
.eiv-ai-bar.is-det > i { width: 0; animation: none; transition: width .2s ease; }
.eiv-ai-orb.eiv-busy-up, .eiv-ai-orb.eiv-busy-prep { position: relative; background: radial-gradient(circle at 30% 30%, #4f7fd6, #1f3a63 70%); animation: none; }
.eiv-ai-orb.eiv-busy-up::after, .eiv-ai-orb.eiv-busy-prep::after { content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: #4f7fd6; border-right-color: #4f7fd6; animation: eiv-busy-spin .9s linear infinite; }
.eiv-ai-orb.eiv-busy-up .eiv-ai-orb-ic, .eiv-ai-orb.eiv-busy-prep .eiv-ai-orb-ic { animation: none; }
@keyframes eiv-busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .eiv-ai-orb.eiv-busy-up::after, .eiv-ai-orb.eiv-busy-prep::after { animation: none; } }
/* owner 2026-10-21: AI-read fields are read-only for the supplier */
.einv-field.eiv-ai-locked input[type=text], .einv-field.eiv-ai-locked input[type=email] { background: #f4f6f9; color: var(--ink); cursor: default; }
.einv-field.eiv-ai-locked.eiv-filled input[type=text] { background: #f1f8f1; }
.einv-field.eiv-ai-locked input[type=text]::placeholder { color: #8a94a6; font-style: italic; }
.eiv-seg.eiv-seg-locked { pointer-events: none; }
.eiv-seg.eiv-seg-locked button[aria-pressed="false"] { opacity: .55; }
.eiv-ai-note { margin-top: 4px; font-size: var(--t-meta); color: var(--mute); }
.eiv-ai-note::before { content: "\1F512\00a0"; }
.eiv-ai-note.is-open { color: #8a5a00; }
/* owner 2026-10-27: the bank-letter result under Bank name - green ok,
   orange (letter older than 6 months / no stamp), red (older than 12 months,
   wrong account name or IBAN). Text lines, no boxes. */
.eiv-bank-notes:empty { display: none; }
.eiv-bank-notes { margin-top: 6px; display: grid; gap: 3px; }
.eiv-bank-note { font-size: var(--t-meta); line-height: 1.45; font-weight: 600; }
.eiv-bank-note.is-ok { color: var(--ok); }
.eiv-bank-note.is-warn { color: #c2410c; }
.eiv-bank-note.is-bad { color: var(--bad); }
.eiv-ai-note.is-open::before { content: "\270E\00a0"; }

/* EIV-9b (plan §10.7): read-only "Verified" panel on the step page
   (reuses the existing green .einv-banner-done; only layout here). */
.eiv-verified { line-height: 1.6; }
.eiv-verified a { color: inherit; text-decoration: underline; }
.eiv-verified-actions { margin: 10px 0 0; }

/* EIV-10a (plan §10.9): the "Request an update" form on the verified page. */
.eiv-upd { margin-top: 10px; }
.eiv-upd [data-upd-form] { margin-top: 10px; display: grid; gap: 6px; max-width: 420px; }
.eiv-upd [data-upd-form] label { display: flex; align-items: center; gap: 8px; font-size: var(--t-body); }
.eiv-upd [data-upd-form] textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  min-height: 64px; background: #fff; }
.eiv-upd [data-upd-form] [data-upd-send] { justify-self: start; }
.eiv-upd-sent { margin-top: 10px; }

/* EIV-13a (cycle 44): read-only staff preview. Amber banner (same pair as
   .einv-updated) + every way INTO a write path hidden: document dropzones,
   camera inputs, all file inputs, Save/Submit (side card, bottom of the
   form, mobile bar) and the verified page's upload/sign/camera/update-request
   controls. portal.js locks the form itself via data-status="preview". */
.eiv-preview-banner { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; gap: 8px;
  background: var(--amber-soft); border-bottom: 1px solid var(--amber); border-radius: 0;
  color: var(--warn); font-weight: 700; padding: 8px 14px; }
body[data-preview] .einv-dropzone, body[data-preview] [data-drop], body[data-preview] [data-cam],
body[data-preview] .eiv-sign-btn, body[data-preview] .eiv-cam-btn,
body[data-preview] input[data-up], body[data-preview] input[capture],
body[data-preview] [data-act="submit"], body[data-preview] [data-act="save"],
body[data-preview] [data-btm-submit], body[data-preview] .eiv-submit,
body[data-preview] [data-upd-toggle], body[data-preview] [data-upd-form] { display: none !important; }

/* EIV-13g (cycle 52, plan §18.4): FTA Decision 13 article tag — a small grey
   pill beside the related field label / document tile title. Inline-block so
   it wraps under the label on narrow screens; nowrap keeps the reference
   itself unbroken. */
.einv-fta { display: inline-block; vertical-align: middle; margin-inline-start: 6px;
  font-size: .68rem; font-weight: 600; line-height: 1.5; color: var(--mute);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 0 8px; white-space: nowrap; }

/* ================================================================
   UX-P2 (cycle 59): Compliance step — fixed-size professional layout,
   scoped to .einv-comp, logical properties (RTL-safe).
   Desktop (>= 900px): each 12-month question is ONE row of a fixed grid
     [question — flexible][Yes/No segmented — 220px][count — 150px slot];
   the count slot is a FIXED grid track, so a rule-hidden count leaves an
   empty reserved slot and the row never jumps. The business row is
   [employees select — 280px][website input — 360px + tick under it].
   Below 900px everything stacks: question -> segmented (full width) ->
   count (150px); the business fields stack full width.
   ================================================================ */
.einv-comp-qrow { padding-block: 9px; border-block-end: 1px solid var(--line); }
.einv-comp-qrow:last-of-type { border-block-end: 0; }
.einv-comp-q { display: block; font-size: 15px; font-weight: 600; color: var(--navy); margin-block-end: 5px; }
.einv-comp-qrow .eiv-seg-slot { display: block; }
.einv-comp-qrow .eiv-seg-slot .eiv-seg { width: 100%; }
.einv-comp .einv-comp-n { display: block; margin-block-start: 6px; }
.einv-comp .einv-comp-n input { inline-size: 150px; }
.einv-comp .einv-err { margin: 3px 0 0; }
.einv-comp-biz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; }
.einv-comp-site { display: block; }
.einv-comp .einv-check { display: flex; gap: 8px; align-items: flex-start; margin-block: 5px 0;
  font-size: var(--t-label); font-weight: 500; color: var(--navy); }
.einv-comp .einv-check input[type=checkbox] { inline-size: 18px; block-size: 18px; margin: 2px 0 0; flex: none; accent-color: var(--navy); }
@media (min-width: 900px) {
  .einv-comp-qrow { display: grid; grid-template-columns: minmax(0, 1fr) 220px 150px; column-gap: 16px; align-items: center; }
  .einv-comp-q { margin-block-end: 0; }
  .einv-comp-qrow .eiv-seg-slot .eiv-seg { width: 220px; }
  .einv-comp .einv-comp-n { margin-block-start: 0; }
  .einv-comp .einv-comp-n input { inline-size: 100px; }
  .einv-comp-biz { grid-template-columns: 280px 360px; }
}

/* EIV-REFS (cycle 71): References card rows (icon · title · size), the whole
   row opens the slide-over viewer ([data-view]). NEW classes only. */
.eiv-ref-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px;
  border-bottom: 1px dashed rgba(200, 162, 74, .4); color: inherit; text-decoration: none; }
.eiv-ref-row:last-child { border-bottom: 0; }
.eiv-ref-row:hover .eiv-ref-t { text-decoration: underline; }
.eiv-ref-row:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 6px; }
.eiv-ref-t { flex: 1 1 auto; min-width: 0; font-size: var(--t-body); font-weight: 500; }
.eiv-ref-sz { flex: none; color: var(--mute); font-size: var(--t-meta); white-space: nowrap; }

/* ---------- EIV-PROFILEDOC (cycle 76): public /verify card ---------- */
/* the amber twin of .einv-banner-ok — same shape, warn tokens only */
.eiv-verify-banner-warn { background: var(--amber-soft); border: 1px solid var(--amber);
  color: var(--warn); border-radius: 10px; padding: 10px 14px; font-weight: 500; margin-bottom: 10px; }
.eiv-verify-rows { display: grid; }
.eiv-verify-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 2px 16px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.eiv-verify-row:last-child { border-bottom: 0; }
.eiv-verify-k { color: var(--mute); font-size: var(--t-label); font-weight: 600; }
.eiv-verify-v { color: var(--ink); font-size: var(--t-body); font-weight: 700; overflow-wrap: anywhere; }
.eiv-verify-actions { margin-top: 16px; }