/* identity-figma.css (story eman-identity-1105). Load AFTER samf-ds.css and site.css; everything is scoped under body.idn-figma.
   Only var(--ds-*) tokens (and site.css aliases of them); no hex. Theme = data-ds-theme/data-theme on <html> (set by the layout from samf_theme).
   Figma frames: login-*, landing-register-* (marshal). Dark = green-tinted photo + glass card + white inputs + mint pill buttons. */

/* ---- Page: background photo under a theme-aware tint ---- */
.idn-figma { position: relative; isolation: isolate; background: var(--ds-bg-page); color: var(--ds-text-primary); font-family: var(--ds-font-body); overflow-x: hidden; }
.idn-figma::before { content: ""; position: fixed; inset-block: -12%; inset-inline: 0; z-index: -2; /* -12% crops the black letterbox bars of the source jpg */
  background: url("../img/idn-bg-marshals.jpg") 78% 50% / cover no-repeat; }
.idn-figma::after { content: ""; position: fixed; inset: 0; z-index: -1; /* tint: page colour over the photo; dark = Figma green night, light = washed */
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ds-samf-green-dark) 40%, color-mix(in srgb, var(--ds-bg-page) 60%, transparent)), color-mix(in srgb, var(--ds-bg-page) 94%, transparent) 85%); }
[data-ds-theme="light"] .idn-figma::after { background: color-mix(in srgb, var(--ds-bg-page) 88%, transparent); }
[data-ds-theme="light"] .idn-figma::before { filter: grayscale(.4); }

/* ---- Header pill (brand + language + theme) ---- */
.idn-figma .site-header { background: color-mix(in srgb, var(--ds-bg-page) 35%, transparent); border-color: var(--ds-border-default); }
.idn-figma .lang-switch { background: var(--ds-bg-primary); color: var(--ds-text-on-primary); border-color: transparent; border-radius: var(--ds-radius-full); font-weight: 700; text-transform: uppercase; }
.idn-figma .lang-switch:hover { background: var(--ds-bg-primary-hover); }
.idn-figma button.theme-toggle { border-radius: var(--ds-radius-full); }

/* ---- Card: glass panel, hairline border ---- */
.idn-figma .card { width: min(560px, calc(100% - 2rem)); margin: var(--ds-space-32) auto; padding: var(--ds-space-32);
  background: color-mix(in srgb, var(--ds-bg-surface) 72%, transparent); -webkit-backdrop-filter: var(--ds-glass-blur); backdrop-filter: var(--ds-glass-blur);
  border: var(--ds-border-width) solid var(--ds-border-default); border-radius: var(--ds-radius-20); box-shadow: var(--ds-elevation-lg); }
.idn-figma .card.card-wide { width: min(720px, calc(100% - 2rem)); }
@media (max-width: 600px) { .idn-figma .card { margin-block: var(--ds-space-16); padding: var(--ds-space-20); border-radius: var(--ds-radius-16); } }

/* ---- Headings / text ---- */
.idn-figma h2.page-title { font: var(--ds-type-desktop-heading-h4); text-transform: none; text-align: start; margin-block-end: var(--ds-space-8); }
.idn-figma .page-lead { color: var(--ds-text-secondary); margin-block-end: var(--ds-space-24); }
.idn-figma h3 { font: var(--ds-type-desktop-heading-h6); color: var(--ds-text-accent-a11y); margin-block: var(--ds-space-16) var(--ds-space-12); }
.idn-figma a { color: var(--ds-text-accent-a11y); font-weight: 600; text-underline-offset: 3px; }
.idn-figma .muted { color: var(--ds-text-secondary); font: var(--ds-type-desktop-body-b4); }
@media (max-width: 600px) { .idn-figma h2.page-title { font: var(--ds-type-mobile-heading-h3); } }

/* ---- Fields: white input, 48 high, radius 8 ---- */
.idn-figma label { color: var(--ds-text-primary); font: var(--ds-type-desktop-label-l4); }
.idn-figma input:not([type="radio"]):not([type="checkbox"]) { background: var(--ds-bg-input); color: var(--ds-text-on-input); border: var(--ds-border-width) solid var(--ds-border-input-a11y); border-radius: var(--ds-radius-8); text-align: start; }
.idn-figma input:not([type="radio"]):not([type="checkbox"]):hover { border-color: var(--ds-border-strong-a11y); }
.idn-figma input:not([type="radio"]):not([type="checkbox"]):focus { border-color: var(--ds-border-selected); outline: var(--ds-focus-ring); outline-offset: 2px; }
.idn-figma input[type="email"], .idn-figma input[type="tel"], .idn-figma input[type="number"] { direction: ltr; text-align: start; }
.idn-figma input::placeholder { color: var(--ds-text-placeholder); }
.idn-figma .pw-field input { padding-inline-end: 6rem; }
.idn-figma button.pw-toggle { color: var(--ds-text-on-input); inset-inline-end: var(--ds-space-8); }
.idn-figma button.pw-toggle:hover { color: var(--ds-bg-primary-pressed); }

/* ---- Radio / checkbox: .radio-card = white row, selected = border-selected ring ---- */
.idn-figma .radio-card, .idn-figma .check-row { display: flex; align-items: center; gap: var(--ds-space-12); margin-block: var(--ds-space-12) 0; padding: var(--ds-space-16); min-height: 56px;
  background: var(--ds-bg-input); color: var(--ds-text-on-input); border: var(--ds-border-width) solid var(--ds-border-input); border-radius: var(--ds-radius-8); cursor: pointer; }
.idn-figma .radio-card:hover { border-color: var(--ds-border-strong-a11y); }
.idn-figma .radio-card:has(input:checked) { border-color: var(--ds-border-selected); box-shadow: 0 0 0 var(--ds-border-width) var(--ds-border-selected); }
.idn-figma .radio-card:has(input:focus-visible), .idn-figma .check-row:has(input:focus-visible) { outline: var(--ds-focus-ring); outline-offset: 2px; }
.idn-figma input[type="radio"], .idn-figma input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 20px; min-height: 20px; height: 20px; padding: 0; margin: 0;
  background: var(--ds-bg-input); border: var(--ds-border-width) solid var(--ds-border-input-a11y); display: inline-grid; place-content: center; cursor: pointer; }
.idn-figma input[type="radio"] { border-radius: var(--ds-radius-full); }
.idn-figma input[type="checkbox"] { border-radius: var(--ds-radius-4); }
.idn-figma input[type="radio"]::before { content: ""; width: 10px; height: 10px; border-radius: var(--ds-radius-full); background: var(--ds-bg-primary-pressed); transform: scale(0); transition: transform .12s; }
.idn-figma input[type="checkbox"]::before { content: "\2713"; font-size: 14px; line-height: 1; font-weight: 700; color: var(--ds-text-on-primary); transform: scale(0); transition: transform .12s; }
.idn-figma input[type="radio"]:checked, .idn-figma input[type="checkbox"]:checked { border-color: var(--ds-border-selected); }
.idn-figma input[type="checkbox"]:checked { background: var(--ds-bg-primary); }
.idn-figma input[type="radio"]:checked::before, .idn-figma input[type="checkbox"]:checked::before { transform: scale(1); }
.idn-figma input[type="radio"]:disabled, .idn-figma input[type="checkbox"]:disabled { border-color: var(--ds-border-default); cursor: not-allowed; }
.idn-figma .radio-card strong { font: var(--ds-type-desktop-label-l4); }

/* ---- Buttons: pill; primary = mint (dark) / dark green (light); secondary = outline ---- */
.idn-figma button, .idn-figma .btn, .idn-figma .button { width: auto; min-width: 140px; border-radius: var(--ds-radius-full); gap: var(--ds-space-8); }
.idn-figma form > button[type="submit"], .idn-figma .btn-block { width: 100%; }
.idn-figma button.secondary, .idn-figma .btn-secondary { background: transparent; color: var(--ds-text-primary); border: var(--ds-border-width) solid var(--ds-border-strong-a11y); }
.idn-figma button.secondary:hover, .idn-figma .btn-secondary:hover { background: var(--ds-bg-hover); }
.idn-figma .btn-next::after { content: "\2192"; }
[dir="rtl"] .idn-figma .btn-next::after, .idn-figma[dir="rtl"] .btn-next::after { content: "\2190"; }
@media (max-width: 600px) { .idn-figma button, .idn-figma .btn, .idn-figma .button { width: 100%; } }

/* ---- Alerts: keep site.css bar+icon; retune colours to DS status text tokens ---- */
.idn-figma .alert, .idn-figma .error, .idn-figma .notice { border-radius: var(--ds-radius-8); background: color-mix(in srgb, var(--alert) 14%, var(--ds-bg-surface)); }
.idn-figma .alert-error, .idn-figma .error { --alert: var(--ds-text-error); }
.idn-figma .alert-success, .idn-figma .notice { --alert: var(--ds-text-success); }
.idn-figma .alert-info { --alert: var(--ds-text-info-a11y); }
.idn-figma .field-error { color: var(--ds-text-error); }
.idn-figma input[aria-invalid="true"] { border-color: var(--ds-text-error); box-shadow: 0 0 0 1px var(--ds-text-error); }

/* ---- Stepper (_RegisterStepper: ol.stepper > li.step.is-done|is-current|is-todo > .step-dot + .step-label) ---- */
.idn-figma .stepper { display: flex; gap: var(--ds-space-8); list-style: none; margin: 0 0 var(--ds-space-24); padding: 0; }
.idn-figma .step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-6); text-align: center; position: relative; font: var(--ds-type-desktop-body-b4); color: var(--ds-text-secondary); }
.idn-figma .step-dot { width: 32px; height: 32px; border-radius: var(--ds-radius-full); display: grid; place-items: center; font: var(--ds-type-mobile-body-m-strong); border: var(--ds-border-width) solid var(--ds-border-strong-a11y); background: transparent; color: var(--ds-text-secondary); z-index: 1; }
.idn-figma .step::before { content: ""; position: absolute; inset-block-start: 16px; inset-inline: calc(-50% + 16px) calc(50% + 16px); height: 2px; background: var(--ds-border-default); }
.idn-figma .step:first-child::before { content: none; }
.idn-figma .step.is-done::before, .idn-figma .step.is-current::before { background: var(--ds-bg-primary); }
.idn-figma .step.is-done .step-dot { background: var(--ds-bg-primary); border-color: var(--ds-bg-primary); color: var(--ds-text-on-primary); }
.idn-figma .step.is-current .step-dot { border-color: var(--ds-border-selected); color: var(--ds-text-accent-a11y); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-bg-primary) 30%, transparent); }
.idn-figma .step.is-current { color: var(--ds-text-primary); font-weight: 700; }
@media (max-width: 480px) { .idn-figma .step-label { display: none; } .idn-figma .step.is-current .step-label { display: block; position: absolute; inset-block-start: 40px; white-space: nowrap; } .idn-figma .stepper { margin-block-end: var(--ds-space-32); } }

/* ---- OTP boxes: digits stay LTR (site.css), white boxes like inputs ---- */
.idn-figma .otp-boxes { gap: var(--ds-space-12); }
.idn-figma .otp-box { background: var(--ds-bg-input); color: var(--ds-text-on-input); border-radius: var(--ds-radius-8); border: var(--ds-border-width) solid var(--ds-border-input-a11y); font: var(--ds-type-desktop-heading-h5); text-align: center; }
.idn-figma .otp-box:focus { border-color: var(--ds-border-selected); outline: var(--ds-focus-ring); outline-offset: 2px; }
.idn-figma .otp-box[aria-invalid="true"], .idn-figma .otp-boxes.error .otp-box { border-color: var(--ds-text-error); box-shadow: 0 0 0 1px var(--ds-text-error); }

/* ---- Links row, QR ---- */
.idn-figma .login-links { color: var(--ds-text-secondary); }
.idn-figma .forgot-link { color: var(--ds-text-accent-a11y); }

/* ---- Plan hooks: wide column, glass panel, actions row outside the card ---- */
.idn-figma .auth { width: min(880px, calc(100% - 2rem)); margin: var(--ds-space-32) auto; }
.idn-figma .auth-title { font: var(--ds-type-desktop-heading-h3); color: var(--ds-text-primary); text-transform: none; text-align: start; margin: 0 0 var(--ds-space-12); }
.idn-figma .auth-panel { padding: var(--ds-space-32); background: color-mix(in srgb, var(--ds-bg-surface) 72%, transparent); -webkit-backdrop-filter: var(--ds-glass-blur); backdrop-filter: var(--ds-glass-blur);
  border: var(--ds-border-width) solid var(--ds-border-default); border-radius: var(--ds-radius-20); box-shadow: var(--ds-elevation-lg); }
.idn-figma .card-title { font: var(--ds-type-desktop-heading-h6); color: var(--ds-text-accent-a11y); margin: 0 0 var(--ds-space-16); }
.idn-figma .auth-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ds-space-16); margin-block-start: var(--ds-space-24); }
.idn-figma .auth-actions button, .idn-figma .auth-actions .btn { width: auto; }
.idn-figma .auth-hero { background: transparent; }
.idn-figma .field-hint { color: var(--ds-text-secondary); font: var(--ds-type-desktop-body-b4); margin-block-start: var(--ds-space-6); }
.idn-figma .summary-box { padding: var(--ds-space-16); border: var(--ds-border-width) solid var(--ds-border-default); border-radius: var(--ds-radius-8); background: color-mix(in srgb, var(--ds-bg-page) 40%, transparent); color: var(--ds-text-secondary); }
@media (max-width: 600px) { .idn-figma .auth { margin-block: var(--ds-space-16); } .idn-figma .auth-panel { padding: var(--ds-space-20); border-radius: var(--ds-radius-16); }
  .idn-figma .auth-title { font: var(--ds-type-mobile-heading-h3); } .idn-figma .auth-actions { align-items: stretch; } .idn-figma .auth-actions button, .idn-figma .auth-actions .btn { width: 100%; } }

/* ---- Login method cards (anchors or radios) ---- */
.idn-figma .method-card { display: flex; align-items: center; gap: var(--ds-space-12); padding: var(--ds-space-16); min-height: 56px; margin-block-start: var(--ds-space-12); text-decoration: none; font-weight: 600;
  background: var(--ds-bg-input); color: var(--ds-text-on-input); border: var(--ds-border-width) solid var(--ds-border-input); border-radius: var(--ds-radius-8); }
.idn-figma .method-card::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: var(--ds-radius-full); border: var(--ds-border-width) solid var(--ds-border-input-a11y); background: var(--ds-bg-input); }
.idn-figma .method-card.is-selected { border-color: var(--ds-border-selected); box-shadow: 0 0 0 var(--ds-border-width) var(--ds-border-selected); }
.idn-figma .method-card.is-selected::before { border-color: var(--ds-border-selected); background: radial-gradient(circle, var(--ds-bg-primary-pressed) 0 4px, var(--ds-bg-input) 5px); }

/* ---- Phone field (prefix chip + input) ---- */
.idn-figma .phone-field { display: flex; align-items: stretch; direction: ltr; border-radius: var(--ds-radius-8); overflow: hidden; background: var(--ds-bg-input); }
.idn-figma .phone-field .phone-prefix { display: flex; align-items: center; padding-inline: var(--ds-space-12); color: var(--ds-text-on-input); border-inline-end: var(--ds-border-width) solid var(--ds-border-input-a11y); }
.idn-figma .phone-field input { flex: 1; border: 0; border-radius: 0; }

/* ---- Nafath confirm: ring + white number tile ---- */
.idn-figma .nafath-ring { display: grid; place-items: center; width: 220px; max-width: 100%; aspect-ratio: 1; margin: var(--ds-space-16) auto; border-radius: var(--ds-radius-full);
  background: conic-gradient(var(--ds-bg-primary) var(--ring, 75%), var(--ds-border-default) 0); -webkit-mask: radial-gradient(circle, transparent 0 0); }
.idn-figma .nafath-ring { -webkit-mask: none; mask: none; position: relative; }
.idn-figma .nafath-ring::before { content: ""; position: absolute; inset: 8px; border-radius: var(--ds-radius-full); background: color-mix(in srgb, var(--ds-bg-surface) 90%, transparent); }
.idn-figma .nafath-tile, .idn-figma .nafath-number { position: relative; display: grid; place-items: center; width: 136px; max-width: 70%; aspect-ratio: 1; border-radius: var(--ds-radius-20); background: var(--ds-bg-input); color: var(--ds-text-on-input); font: var(--ds-type-desktop-heading-h3); direction: ltr; }
.idn-figma .nafath-ring.is-expired { --ring: 0%; opacity: .6; }
.idn-figma .nafath-ring.is-rejected { background: var(--ds-text-error); }
.idn-figma .is-expired .nafath-tile, .idn-figma .is-expired .nafath-number { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .idn-figma * { transition: none !important; } }

/* ---- Integration hooks (senior): classes the Razor juniors used ---- */
.idn-figma .method-card .method-radio { display: none; }
.idn-figma .method-cards { display: block; }
.idn-figma .auth-form { margin: 0; }
.idn-figma .radio-cards { display: grid; gap: var(--ds-space-12); }
.idn-figma .auth-signin, .idn-figma .back-link { color: var(--ds-text-accent-a11y); text-decoration: none; font-weight: 600; }
.idn-figma .nafath-confirm { color: var(--ds-text-secondary); text-align: center; }
.idn-figma .stepper-login { display: none; }

/* Review fixes (eman-identity-1105): the pill/100%-width button rules above must not stretch the show-password toggle
   over the field (icon landed mid-field and over the placeholder); dark primary pill needs a dark label on mint. */
.idn-figma button.pw-toggle { width: auto; min-width: 0; border-radius: var(--ds-radius-8); }
.idn-figma .pw-field input { padding-inline-end: 3.25rem; }
[data-theme="dark"] .idn-figma button:not(.secondary):not(.pw-toggle):not(.theme-toggle), [data-theme="dark"] .idn-figma .btn-primary { color: var(--ds-bg-page); }
[data-theme="dark"] .idn-figma button.theme-toggle { color: #fff; border-color: #fff; }