/* IDRO Flow — component stylesheet (v2: paper, indigo ink, firoozeh on the camera).
   Semantic tokens only (tokens.css); the only literal colours are inside the mock
   viewfinder, which stands in for a camera in previews. RTL is the default.
   The motion and size variables below mirror tokens.json's duration, easing and
   size families with identical values, so the bundle also runs where only the
   colour tokens were copied. */
:root {
  --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-sweep: 540ms; --dur-slower: 720ms;
  --dur-link: 1100ms; --dur-loop: 1350ms; --dur-glow: 1200ms; --dur-hold: 2800ms; --dur-return: 1800ms; --dur-breathe: 2400ms;
  --dur-exit: 180ms; --dur-count: 3000ms; --stagger: 40ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --size-sheet: 430px; --size-sheet-min: 850px; --size-touch: 48px; --size-control: 52px; --size-control-overlay: 56px;
  --size-option: 68px; --size-tile: 44px; --size-badge: 76px; --size-glyph: 112px; --size-icon: 24px; --size-symbol: 13px;
  --size-thread: 2px; --size-checking: 4px; --size-guide-max: 320px; --size-stage-max: 440px;
  --idro-inset: var(--space-24);
}

/* ---- Base ---------------------------------------------------------------- */
.idro-root {
  margin: 0;
  color: var(--text);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  direction: rtl;
  text-align: start;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
.idro-root *, .idro-root *::before, .idro-root *::after { box-sizing: border-box; }
.idro-root [hidden] { display: none !important; }
.idro-root :where(p, h1, h2, h3, strong, span) { overflow-wrap: anywhere; }
.idro-root :where(button, summary, a):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.idro-root a { color: var(--primary-ink); text-underline-offset: 3px; }
.idro-fa { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

/* ---- Page, sheet, phone frame -------------------------------------------- */
.idro-page { min-height: 100%; padding: var(--space-32) var(--space-20); background: var(--canvas); }
.idro-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--size-sheet);
  min-height: min(var(--size-sheet-min), calc(100svh - 64px));
  margin: 0 auto;
  padding: var(--idro-inset) var(--idro-inset) var(--space-20);
  border: 1px solid var(--surface);
  border-radius: var(--radius-26);
  background: var(--surface);
  box-shadow: var(--shadow-sheet);
}
.idro-sheet--bleed {
  max-width: none;
  min-height: 100%;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: max(var(--space-20), env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.idro-phone {
  position: relative;
  width: 390px;
  height: 800px;
  padding: 10px;
  border-radius: 44px;
  background: var(--stage);
  box-shadow: var(--shadow-sheet), 0 0 0 1px var(--outline);
}
.idro-phone-screen { position: relative; height: 100%; overflow: hidden auto; border-radius: 36px; background: var(--surface); isolation: isolate; scrollbar-width: none; overscroll-behavior: contain; }
.idro-phone-screen::-webkit-scrollbar { display: none; }
.idro-phone-screen > .idro-sheet { min-height: 100%; }

/* ---- Header, thread, meta ------------------------------------------------ */
.idro-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 36px; margin: 0 0 var(--space-6); gap: var(--space-8); }
.idro-header-title { min-width: 0; text-align: center; }
.idro-header-side { display: flex; align-items: center; min-width: 0; }
.idro-header-side--end { justify-content: flex-end; }
.idro-eyebrow { margin: 0 0 2px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; unicode-bidi: plaintext; }
.idro-h1 { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.6; }
.idro-timer { margin: 0; padding: 2px 8px; border: 1px solid var(--outline); border-radius: var(--radius-8); color: var(--muted); background: var(--surface-raised); font-size: 12px; font-weight: 500; line-height: 1.6; font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.idro-timer.is-low { border-color: var(--error-outline); color: var(--error); background: var(--error-surface); animation: idro-fade var(--dur-base) var(--ease-out) both; }
.idro-summary { margin: 0 0 var(--space-12); color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }
.idro-thread { display: flex; direction: ltr; height: var(--size-thread); margin: 0 calc(-1 * var(--idro-inset)) var(--space-16); gap: var(--space-6); }
.idro-thread-seg { position: relative; flex: 1; overflow: hidden; border-radius: 1px; background: var(--track); }
.idro-thread-seg:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.idro-thread-seg:last-child { border-start-start-radius: 0; border-end-start-radius: 0; }
.idro-thread-seg > i { position: absolute; inset: 0; background: var(--primary); transform-origin: 0 50%; transform: scaleX(0); }
.idro-thread-seg[data-state="done"] > i { transform: scaleX(1); animation: idro-advance var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--stagger) * 2); }
.idro-thread-seg[data-state="active"] > i { transform: scaleX(1); background: var(--accent); opacity: .45; animation: idro-live var(--dur-breathe) var(--ease-in-out) infinite; }

/* ---- Screen: entry and exit choreography --------------------------------- */
.idro-screen { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.idro-screen > * { animation: idro-rise var(--dur-slow) var(--ease-out) both; }
/* An instruction screen fits a 390×664 viewport without scrolling: tighter hero, one title line, the button pinned. */
.idro-screen[data-phase="instructions"] .idro-hero, .idro-screen[data-phase="retry"] .idro-hero { margin: var(--space-8) 0 var(--space-16); }
.idro-screen[data-phase="instructions"] .idro-hero h2 { max-width: none; margin-bottom: var(--space-6); font-size: 21px; line-height: 1.55; }
.idro-screen[data-phase="instructions"] .idro-hero p, .idro-screen[data-phase="retry"] .idro-hero p { max-width: 36ch; font-size: 15px; line-height: 1.7; }
.idro-screen[data-phase="instructions"] .idro-scene { margin-bottom: var(--space-14); }
.idro-screen[data-phase="instructions"] .idro-actions, .idro-screen[data-phase="retry"] .idro-actions, .idro-screen[data-phase="welcome"] .idro-actions { padding-block-start: var(--space-16); }
.idro-screen > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.idro-screen > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.idro-screen > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.idro-screen > :nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.idro-screen > :nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
.idro-screen > :nth-child(n + 7) { animation-delay: calc(var(--stagger) * 6); }
.idro-screen.is-leaving > * { animation: idro-exit var(--dur-exit) var(--ease-exit) both; }
.idro-screen[data-phase="verifying"] .idro-hero, .idro-screen[data-phase="finished"] .idro-hero { margin-block: auto; padding-block: var(--space-36); }

/* ---- Hero and glyph ------------------------------------------------------ */
.idro-hero { display: flex; flex-direction: column; align-items: center; margin: var(--space-20) 0 var(--space-24); text-align: center; }
.idro-hero--welcome { margin-block-start: var(--space-28); }
.idro-glyph { display: grid; place-items: center; width: var(--size-glyph); height: var(--size-glyph); margin: 0 0 var(--space-18); color: var(--icon); }
.idro-glyph svg { display: block; width: 100%; height: 100%; overflow: visible; }
.idro-glyph svg > [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: idro-draw var(--dur-slower) var(--ease-out) forwards; animation-delay: 180ms; }
.idro-glyph svg > [pathLength]:nth-child(2) { animation-delay: 300ms; }
.idro-glyph svg > [pathLength]:nth-child(3) { animation-delay: 420ms; }
.idro-glyph svg > [pathLength]:nth-child(4) { animation-delay: 540ms; }
.idro-glyph svg > [pathLength]:nth-child(n + 5) { animation-delay: 660ms; }
.idro-hero h2 { max-width: 21ch; margin: 0 0 var(--space-10); color: var(--text); font-size: 23px; font-weight: 650; line-height: 1.6; }
.idro-hero p { max-width: 32ch; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.idro-hero--float .idro-glyph { animation: idro-float var(--dur-breathe) var(--ease-in-out) infinite; }
.idro-hero--seal .idro-glyph { padding: 18px; border-radius: var(--radius-circle); color: var(--success); background: var(--success-surface); animation: idro-pop var(--dur-slow) var(--ease-spring) both, idro-glow var(--dur-glow) var(--ease-out) 900ms both; }
.idro-hero--seal .idro-glyph svg > [pathLength]:nth-child(1) { animation-delay: 200ms; }
.idro-hero--seal .idro-glyph svg > [pathLength]:nth-child(2) { animation-duration: var(--dur-slow); animation-delay: 820ms; }
.idro-hero--compact { margin: var(--space-12) 0 var(--space-16); }
.idro-hero--compact .idro-glyph { width: 64px; height: 64px; margin-bottom: var(--space-12); }
.idro-hero--compact h2 { max-width: none; font-size: 20px; line-height: 1.55; }
/* A retry screen carries a notice above the hero, so the hero gives back room. */
.idro-screen[data-phase="retry"] .idro-hero { margin: var(--space-4) 0 var(--space-16); }
.idro-screen[data-phase="retry"] .idro-hero h2 { font-size: 20px; line-height: 1.55; }
.idro-screen[data-phase="retry"] .idro-hero p { font-size: 15px; line-height: 1.7; }

/* ---- Scenes: miniatures of the viewfinder, one per step --------------------- */
.idro-scene { position: relative; display: block; width: 180px; height: 124px; margin: 0 0 var(--space-18); overflow: hidden; border: 1px solid var(--outline); border-radius: var(--radius-16); background: radial-gradient(120% 90% at 50% 30%, #3a3650 0%, #1c1a2e 52%, #0b0a14 100%); box-shadow: inset 0 1px 0 #ffffff14; }
.idro-screen[data-phase="retry"] .idro-scene, .idro-hero--compact .idro-scene { width: 150px; height: 104px; margin-bottom: var(--space-12); }
.idro-scene svg { display: block; width: 100%; height: 100%; overflow: visible; }
.idro-scene .s-oval, .idro-scene .s-corner { fill: none; stroke: var(--guide); stroke-width: 2; stroke-linecap: round; }
.idro-scene .s-card { fill: #ffffff0f; }
.idro-scene .s-faint { fill: #ffffff1c; }
.idro-scene .s-faint--quiet { fill: #ffffff10; }
.idro-scene .s-mrz { fill: #ffffff30; }
.idro-scene .s-fold { stroke: var(--guide); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 3 3; opacity: .8; }
.idro-scene .s-sweep--tall { animation-name: idro-scene-sweep-tall; }
.idro-scene .s-corners { transform-box: view-box; transform-origin: 90px 62px; animation: idro-scene-converge 3600ms var(--ease-in-out) infinite; }
.idro-scene .s-corners .s-corner { animation: idro-scene-ink 3600ms var(--ease-in-out) infinite; }
/* The declaration lesson, on a 6 s clock: card rises 0.4–1.6 s, brackets snap 1.6–2.0 s, speaking 2.2–4.8 s, hold, fade back by 6 s. */
.idro-scene--declaration .s-corners { transform-origin: 90px 97px; animation: idro-scene-decl-corners 6000ms var(--ease-in-out) infinite; }
.idro-scene--declaration .s-corners .s-corner { animation: idro-scene-decl-ink 6000ms var(--ease-in-out) infinite; }
.idro-scene--declaration .s-card-hand { animation: idro-scene-card 6000ms var(--ease-out) infinite; }
.idro-scene--declaration .s-card-face { fill: #ffffff26; stroke: var(--guide-soft); stroke-width: 1.5; }
.idro-scene--declaration .s-mouth { fill: #ffffff99; transform-box: fill-box; transform-origin: center; animation: idro-scene-mouth 6000ms linear infinite; }
.idro-scene--declaration .s-bar { animation: idro-scene-talk 6000ms linear infinite; animation-delay: calc(var(--i) * -140ms); }
.idro-scene .s-sweep { stroke: var(--on-stage-accent); stroke-width: 2; stroke-linecap: round; opacity: 0; animation: idro-scene-sweep 3600ms var(--ease-in-out) infinite; }
.idro-scene .s-lens { fill: #ffffff0d; }
.idro-scene .s-figure { animation: idro-scene-focus 6000ms var(--ease-in-out) infinite; }
.idro-scene .s-head { transform-box: view-box; transform-origin: 90px 62px; animation: idro-scene-turn 6000ms var(--ease-in-out) infinite; }
.idro-scene .s-silhouette { fill: #ffffff1f; stroke: var(--guide-soft); stroke-width: 1.5; }
.idro-scene .s-glasses { fill: #ffffff12; stroke: #ffffffb3; stroke-width: 1.5; stroke-linecap: round; transform-box: view-box; transform-origin: 90px 55px; animation: idro-scene-glasses 6000ms var(--ease-in-out) infinite; }
.idro-scene .s-hat { fill: #ffffff2e; stroke: var(--guide-soft); stroke-width: 1.5; stroke-linejoin: round; transform-box: view-box; transform-origin: 90px 42px; animation: idro-scene-hat 6000ms var(--ease-in-out) infinite; }
.idro-scene .s-rim, .idro-scene .s-side { fill: none; stroke-linecap: round; }
.idro-scene .s-rim { stroke: var(--guide); stroke-width: 1.5; opacity: .22; animation: idro-scene-rim 6000ms var(--ease-in-out) infinite; }
.idro-scene .s-rim--still { animation: none; }
.idro-scene .s-side { stroke: var(--on-stage-accent); stroke-width: 2.5; opacity: 0; filter: drop-shadow(0 0 4px #7ee3d699); animation: idro-scene-side 6000ms var(--ease-in-out) infinite; }
.idro-scene .s-bar { fill: var(--on-stage-accent); transform-box: fill-box; transform-origin: center bottom; animation: idro-scene-bar 1100ms var(--ease-in-out) infinite; animation-delay: calc(var(--i) * 160ms); }

/* ---- Partner lockup: two badges, one chain ------------------------------- */
/* 160×88. The badges overlap by 20px; a ring around each is the chain, interlocked at the overlap. */
.idro-lockup { position: relative; display: block; isolation: isolate; direction: ltr; width: 160px; height: 88px; margin: 0 0 var(--space-20); }
.idro-badge { position: absolute; top: 6px; display: grid; place-items: center; width: var(--size-badge); height: var(--size-badge); overflow: hidden; border: 0; border-radius: var(--radius-circle); background: var(--badge-surface); box-shadow: var(--shadow-badge); animation: idro-pop var(--dur-slow) var(--ease-spring) both; }
.idro-badge--vendor { left: 14px; z-index: 1; background: var(--primary-soft); }
.idro-badge--platform { left: 70px; z-index: 0; animation-delay: 80ms; }
.idro-badge-initial { color: var(--primary-ink); font-size: 22px; font-weight: 650; }
.idro-badge-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.idro-badge-platform-logo { display: block; width: 72%; height: 72%; object-fit: contain; transform: translateX(2px); }
.idro-chain { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.idro-chain-ring { fill: none; stroke: var(--primary-outline); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); animation: idro-draw var(--dur-slower) var(--ease-out) 260ms forwards; }
.idro-chain-ring--platform { animation-delay: 340ms; }

/* ---- Document options ---------------------------------------------------- */
.idro-section-label { margin: 0 0 var(--space-12); color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.6; }
.idro-options { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; gap: var(--space-10); }
.idro-option {
  display: grid;
  grid-template-columns: var(--size-tile) minmax(0, 1fr) 20px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: var(--size-option);
  padding: 11px var(--space-14) 11px var(--space-16);
  gap: var(--space-14);
  border: 1px solid var(--outline);
  border-radius: var(--radius-16);
  color: var(--text);
  background: var(--surface);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.idro-option:active { transform: translateY(1px); }
.idro-option[aria-pressed="true"] { border-color: var(--primary-outline); background: var(--primary-soft); box-shadow: var(--shadow-selected); }
.idro-option:disabled { border-color: var(--outline); box-shadow: none; cursor: not-allowed; }
.idro-option-icon { display: grid; place-items: center; width: var(--size-tile); height: var(--size-tile); border-radius: var(--radius-12); color: var(--icon); background: var(--primary-soft); transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.idro-option[aria-pressed="true"] .idro-option-icon { color: var(--on-primary); background: var(--primary); }
.idro-option-icon .idro-icon { width: var(--size-icon); height: var(--size-icon); color: inherit; }
.idro-option-icon svg { display: block; width: var(--size-icon); height: var(--size-icon); }
.idro-option-copy { display: grid; min-width: 0; gap: var(--space-2); }
.idro-option-copy strong { font-size: 16px; font-weight: 600; line-height: 1.6; }
.idro-option-copy span { color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.6; }
.idro-choice { position: relative; display: block; width: 20px; height: 20px; border: 1.5px solid var(--choice); border-radius: var(--radius-circle); background: var(--surface); transition: background-color var(--dur-instant), border-color var(--dur-instant); }
[aria-pressed="true"] > .idro-choice { border-color: var(--primary); background: var(--primary); }
[aria-pressed="true"] > .idro-choice::after { content: ""; position: absolute; inset: 5px auto auto 5px; width: 8px; height: 5px; border-left: 2px solid var(--on-primary); border-bottom: 2px solid var(--on-primary); transform: rotate(-45deg); animation: idro-mark-pop var(--dur-base) var(--ease-spring) both; }

/* ---- Tips, notice, attempts, privacy, ready chip ------------------------- */
.idro-tips { display: grid; margin: 0 0 var(--space-14); padding: 0; gap: var(--space-10); list-style: none; }
.idro-tips li { display: flex; align-items: flex-start; min-width: 0; gap: var(--space-10); }
.idro-tips .idro-icon { width: 20px; height: 20px; margin-top: 2px; }
.idro-tips span { min-width: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.7; }
.idro-icon { display: inline-grid; flex: 0 0 auto; place-items: center; width: var(--size-icon); height: var(--size-icon); color: var(--icon); }
.idro-icon svg { display: block; width: 100%; height: 100%; }
.idro-notice { margin: 0 0 var(--space-18); padding: 15px var(--space-16); border: 1px solid var(--notice-outline); border-radius: var(--radius-12); color: var(--notice-text); background: var(--notice-surface); animation: idro-rise var(--dur-slow) var(--ease-out) both; }
.idro-notice h3 { margin: 0 0 5px; font-size: 16px; font-weight: 650; line-height: 1.6; }
.idro-notice p { margin: 0; font-size: 16px; line-height: 1.8; }
.idro-notice--error { border-color: var(--error-outline); color: var(--error); background: var(--error-surface); }
.idro-attempts { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.idro-privacy { margin: var(--space-14) 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; text-align: center; }

/* ---- Buttons ------------------------------------------------------------- */
.idro-actions { display: flex; flex-direction: column; align-items: stretch; margin-block-start: auto; padding-block-start: var(--space-28); gap: var(--space-10); }
.idro-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 12px var(--space-20);
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--on-primary);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 80%, #ffffff), var(--primary));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 28%, transparent);
  font: inherit;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.6;
  text-align: center;
  touch-action: manipulation;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.idro-btn:not(:disabled):active { transform: translateY(1px); background: var(--primary-hover); box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 22%, transparent); }
.idro-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.idro-btn--secondary { min-height: 56px; color: var(--primary-ink); background: var(--primary-soft); border-color: transparent; box-shadow: none; }
.idro-btn--secondary:not(:disabled):active { background: var(--primary-soft-active); box-shadow: none; }
.idro-btn:disabled { color: var(--disabled-text); background: var(--disabled-surface); border-color: transparent; box-shadow: none; cursor: not-allowed; }
.idro-btn > .idro-btn-label { grid-area: 1 / 1; transition: opacity var(--dur-fast) var(--ease-out); }
.idro-btn > .idro-link-spinner { grid-area: 1 / 1; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.idro-btn.is-loading { pointer-events: none; }
.idro-btn.is-loading > .idro-btn-label { opacity: 0; }
.idro-btn.is-loading > .idro-link-spinner { opacity: 1; }
/* Over the camera, controls are glass: the viewfinder shows through them, a
   hairline of light draws their edge, and they stack — the action on top,
   the quiet «توقف» beneath it. */
.idro-btn--overlay { flex: 0 0 auto; width: min(100%, 320px); min-height: 56px; border-color: #ffffff33; border-radius: 16px; color: var(--on-overlay); background: #000000a6; box-shadow: var(--shadow-overlay-button); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.idro-btn--overlay:not(:disabled):active { background: #000000c2; box-shadow: 0 3px 10px #00000059; }
.idro-btn--overlay:disabled { color: var(--on-overlay); background: #00000073; border-color: #ffffff1f; box-shadow: none; opacity: .72; }
.idro-btn-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-inline-end: var(--space-8); vertical-align: -3px; }
.idro-btn-mark svg { display: block; width: 100%; height: 100%; }
.idro-btn--overlay:focus-visible { box-shadow: 0 0 0 3px var(--camera), 0 0 0 6px var(--on-overlay); }
/* The record control: a 68px glass ring with a red dot that breathes until tapped. */
.idro-record { position: relative; display: grid; place-items: center; width: 68px; height: 68px; padding: 0; border: 2px solid var(--guide); border-radius: var(--radius-circle); background: var(--overlay-glass); box-shadow: inset 0 1px 0 var(--overlay-control), var(--shadow-overlay-button); cursor: pointer; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: transform var(--dur-instant) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.idro-record-dot { display: block; width: 30px; height: 30px; border-radius: var(--radius-circle); background: var(--record-strong); box-shadow: 0 0 0 0 #ff3b4766; animation: idro-record-breathe var(--dur-breathe) var(--ease-in-out) infinite; transition: transform var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out); }
.idro-record:active { transform: scale(.94); }
.idro-record:active .idro-record-dot { transform: scale(.88); }
.idro-record.is-armed { opacity: 0; pointer-events: none; }
.idro-record:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--camera), 0 0 0 6px var(--on-overlay); }
/* The back chevron: a 40px glass disc at the top-left of the camera; the only way out of a capture. */
.idro-back { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); z-index: 46; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff3d; border-radius: var(--radius-circle); color: var(--on-overlay); background: linear-gradient(180deg, #ffffff1f, #ffffff0a), var(--overlay-glass); box-shadow: inset 0 1px 0 #ffffff38, 0 4px 14px #0000004d; cursor: pointer; backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out); animation: idro-fade var(--dur-base) var(--ease-out) both; }
.idro-back svg { display: block; width: 20px; height: 20px; margin-left: -2px; }
.idro-back svg path { stroke-width: 2.2; }
.idro-back:active { transform: scale(.94); background: var(--overlay-control); }
.idro-back:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--camera), 0 0 0 6px var(--on-overlay); }
.idro-camera--full ~ .idro-back { position: fixed; }
.idro-phone-screen .idro-camera--full ~ .idro-back { position: absolute; }

/* ---- The link spinner: IDRO's two rings crossing ------------------------- */
.idro-link-spinner { position: relative; display: inline-block; width: 28px; height: 16px; }
.idro-link-spinner i { position: absolute; top: 0; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; opacity: .9; }
.idro-link-spinner i:nth-child(1) { left: 0; animation: idro-link-a var(--dur-link) var(--ease-in-out) infinite; }
.idro-link-spinner i:nth-child(2) { right: 0; animation: idro-link-b var(--dur-link) var(--ease-in-out) infinite; }
.idro-link-spinner--large { width: 56px; height: 32px; }
.idro-link-spinner--large i { width: 32px; height: 32px; border-width: 2.5px; }

/* ---- Camera stage -------------------------------------------------------- */
.idro-camera { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 230px; height: min(var(--size-stage-max), 52dvh); margin: 0; overflow: hidden; border-radius: var(--radius-18); background: var(--stage); isolation: isolate; animation: idro-rise var(--dur-slow) var(--ease-out) both; }
.idro-video, .idro-viewfinder { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--stage); }
.idro-viewfinder { background: radial-gradient(120% 90% at 50% 38%, #3a3650 0%, #1c1a2e 48%, #0b0a14 100%); animation: idro-drift 9s var(--ease-in-out) infinite alternate; }
.idro-camera--full { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; height: 100dvh; min-height: 0; border-radius: 0; background: var(--camera); }
.idro-phone-screen .idro-camera--full { position: absolute; height: 100%; }
.idro-camera--full .idro-video, .idro-camera--full .idro-viewfinder { object-fit: cover; }
.idro-camera--full .idro-video { background: var(--camera); }
/* The guide. Masked guides darken everything outside themselves (a huge spread
   shadow follows the rounded shape), so the frame reads instantly and the
   camera stays visible through the scrim. */
.idro-guide { position: absolute; top: 50%; left: 50%; z-index: 1; width: 84%; max-width: var(--size-guide-max); aspect-ratio: 1.586; border: 2px solid var(--guide); border-radius: var(--radius-12); transform: translate(-50%, -50%); pointer-events: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); animation: idro-breathe var(--dur-breathe) var(--ease-in-out) infinite; }
.idro-guide--mask { box-shadow: 0 0 0 9999px var(--mask); animation: idro-breathe-still var(--dur-breathe) var(--ease-in-out) infinite; }
/* Faces live in a circle: the mask draws the shape; the only line is the arc's
   track on the circle's edge, and a soft inner vignette settles the face. */
.idro-camera[data-kind="face"] .idro-guide { top: 48%; width: 82%; max-width: 340px; height: auto; aspect-ratio: 1; border: 0; border-radius: 50%; }
.idro-camera[data-kind="declaration"] .idro-guide { top: 42%; width: 68%; max-width: 280px; height: auto; aspect-ratio: 1; border: 0; border-radius: 50%; }
.idro-camera[data-kind="declaration"] .idro-count { top: 42%; }
.idro-camera[data-kind="declaration"] .idro-zone { top: 70%; }
/* The circle's mask has a feathered edge: a blurred band of the same scrim just outside the circle, so the face sits in a soft lens, not a punched hole. */
.idro-camera[data-kind="face"] .idro-guide--mask { box-shadow: 0 0 0 9999px var(--mask), 0 0 22px 8px var(--mask); }
.idro-camera[data-kind="declaration"] .idro-guide--mask { box-shadow: 0 0 0 9999px var(--mask), 0 0 18px 6px var(--mask); }
.idro-camera[data-kind="face"] .idro-guide--mask.is-steady, .idro-camera[data-kind="declaration"] .idro-guide--mask.is-steady { box-shadow: 0 0 0 9999px var(--mask), 0 0 22px 8px var(--mask), var(--shadow-steady); }
/* A passport and a booklet are captured fully open: two stacked pages (each a little smaller than
   the card frame) on a dashed fold, in one tall guide of ratio .72. The outer corners bracket the
   whole document; a tick at each end of the fold marks where the two pages meet. */
.idro-camera[data-kind="document"][data-doc="passport"] .idro-guide, .idro-camera[data-kind="document"][data-doc="booklet"] .idro-guide { top: 46%; width: 82%; max-width: 330px; aspect-ratio: .72; }
/* The fold: a 40px gutter that darkens toward the crease, a pill-dashed line (round caps) that fades
   out before the edges, and a tick at each edge in line with the bracket arms. */
.idro-fold { position: absolute; top: 50%; right: 0; left: 0; height: 40px; transform: translateY(-50%); background: linear-gradient(to bottom, transparent, #00000040 50%, transparent); animation: idro-fold-in var(--dur-slow) var(--ease-out) 120ms backwards; }
.idro-fold-line { position: absolute; top: 0; right: 14px; left: 14px; width: calc(100% - 28px); height: 100%; overflow: visible; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.idro-fold-line line { stroke: var(--guide); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 7 9; opacity: .85; transition: stroke var(--dur-base) var(--ease-out); }
.idro-fold::before, .idro-fold::after { content: ""; position: absolute; top: 50%; width: 2.5px; height: 22px; border-radius: 1.25px; background: var(--guide); transform: translateY(-50%); transition: background-color var(--dur-base) var(--ease-out); }
.idro-fold::before { left: -2px; }
.idro-fold::after { right: -2px; }
/* Leaf captions: tiny pills tucked inside the start corner of each page (not .idro-page, the sheet wrapper). */
.idro-leaf { position: absolute; inset-inline-start: 10px; z-index: 1; width: fit-content; padding: 3px 9px; border-radius: var(--radius-pill); color: var(--guide); background: var(--mask); font-size: 11px; font-weight: 500; line-height: 1.5; white-space: nowrap; animation: idro-fade var(--dur-base) var(--ease-out) 420ms backwards; }
.idro-leaf--top { top: 9px; }
.idro-leaf--bottom { top: calc(50% + 13px); }
.idro-guide.is-steady .idro-fold-line line { stroke: var(--on-stage-accent); }
.idro-guide.is-steady .idro-fold::before, .idro-guide.is-steady .idro-fold::after { background: var(--on-stage-accent); }
.idro-guide.is-steady .idro-leaf { color: var(--on-stage-accent); }
/* On mount the two halves part from the fold: the upper brackets rise, the lower ones drop, the crease draws out from the middle. */
.idro-camera[data-doc="passport"] .idro-corner:nth-child(1), .idro-camera[data-doc="passport"] .idro-corner:nth-child(2), .idro-camera[data-doc="booklet"] .idro-corner:nth-child(1), .idro-camera[data-doc="booklet"] .idro-corner:nth-child(2) { animation: idro-unfold-top var(--dur-slow) var(--ease-out) backwards; }
.idro-camera[data-doc="passport"] .idro-corner:nth-child(3), .idro-camera[data-doc="passport"] .idro-corner:nth-child(4), .idro-camera[data-doc="booklet"] .idro-corner:nth-child(3), .idro-camera[data-doc="booklet"] .idro-corner:nth-child(4) { animation: idro-unfold-bottom var(--dur-slow) var(--ease-out) backwards; }
.idro-guide--brackets { border-color: transparent; }
.idro-corner { position: absolute; width: 30px; height: 30px; border: 2px solid var(--guide); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.idro-corner:nth-child(1) { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius-12); }
.idro-corner:nth-child(2) { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: var(--radius-12); }
.idro-corner:nth-child(3) { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: var(--radius-12); }
.idro-corner:nth-child(4) { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius-12); }
.idro-guide.is-steady { border-color: var(--on-stage-accent); box-shadow: var(--shadow-steady); }
.idro-guide--mask.is-steady { box-shadow: 0 0 0 9999px var(--mask), var(--shadow-steady); }
.idro-guide--brackets.is-steady { border-color: transparent; }
.idro-guide.is-steady .idro-corner { border-color: var(--on-stage-accent); }
.idro-guide.is-steady .idro-corner:nth-child(1) { transform: translate(var(--space-4), var(--space-4)); }
.idro-guide.is-steady .idro-corner:nth-child(2) { transform: translate(calc(-1 * var(--space-4)), var(--space-4)); }
.idro-guide.is-steady .idro-corner:nth-child(3) { transform: translate(var(--space-4), calc(-1 * var(--space-4))); }
.idro-guide.is-steady .idro-corner:nth-child(4) { transform: translate(calc(-1 * var(--space-4)), calc(-1 * var(--space-4))); }
/* The sweep: one firoozeh line crosses the document frame while the sharpest frame is chosen. */
.idro-sweep { position: absolute; inset-inline: 6px; top: 0; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, var(--on-stage-accent), transparent); opacity: 0; pointer-events: none; }
.idro-sweep.is-running { animation: idro-sweep var(--dur-sweep) var(--ease-in-out) both; }
/* The arc: a faint track just outside the circle and a firoozeh stroke that sweeps once around it over the turn window. */
/* The rim: faint at rest; during the turn it brightens and a highlight glows on the side to turn toward; done, it lights up whole. */
.idro-arc { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.idro-arc circle, .idro-arc path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.idro-arc .rim { stroke: var(--guide); stroke-width: 2; opacity: .22; transition: stroke var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); }
.idro-arc .side { stroke: var(--on-stage-accent); stroke-width: 3.5; opacity: 0; filter: drop-shadow(0 0 8px #7ee3d699); transition: opacity var(--dur-base) var(--ease-out); }
.idro-arc.is-running .rim { stroke: var(--on-stage-accent); opacity: .42; }
.idro-arc.is-running[data-side="left"] .side-left, .idro-arc.is-running[data-side="right"] .side-right { opacity: 1; animation: idro-rim-pulse var(--dur-link) var(--ease-in-out) infinite; }
.idro-arc.is-lit .rim { stroke: var(--on-stage-accent); opacity: 1; filter: drop-shadow(0 0 7px #7ee3d680); }
.idro-guide-label { position: absolute; inset-inline: var(--space-12); bottom: var(--space-12); z-index: 2; width: fit-content; max-width: calc(100% - 24px); margin: 0 auto; padding: 7px var(--space-12); border-radius: var(--radius-9); color: var(--on-stage); background: var(--stage-scrim); font-size: 13px; line-height: 1.6; text-align: center; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
/* Full screen: the top row holds only the back chevron (left) and the recording badge (right); the label pill sits centred on its own line beneath. */
.idro-camera--full .idro-guide-label { inset-inline: auto; right: auto; left: 50%; top: calc(74px + env(safe-area-inset-top, 0px)); bottom: auto; max-width: calc(100% - 96px); margin: 0; padding: 0; border-radius: 0; background: none; color: var(--on-overlay); font-size: 15px; font-weight: 500; letter-spacing: .01em; text-shadow: 0 1px 3px #0000008c; transform: translateX(-50%); }
/* A soft gradient at the top keeps the label and the chevron legible on any picture, like the footer below. */
.idro-camera--full::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 170px; background: linear-gradient(to bottom, #0000008c, transparent); pointer-events: none; }
/* The recording state is not shown: nothing on the picture says "live". It stays in the stage as a
   visually hidden status so assistive tech and the test tooling can still read it. */
.idro-rec { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.idro-rec-inline { display: flex; align-items: center; justify-content: center; margin: var(--space-10) 0; gap: 7px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.idro-rec-inline::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--record); }
.idro-zone { position: absolute; top: 63%; left: 50%; z-index: 1; display: flex; align-items: flex-end; justify-content: center; width: 66%; max-width: 460px; aspect-ratio: 1.586; transform: translate(-50%, -50%); pointer-events: none; }
.idro-zone .idro-corner { width: 22px; height: 22px; border-width: 2px; opacity: .85; }
.idro-zone .idro-corner:nth-child(1) { border-top-left-radius: var(--radius-14); }
.idro-zone .idro-corner:nth-child(2) { border-top-right-radius: var(--radius-14); }
.idro-zone .idro-corner:nth-child(3) { border-bottom-left-radius: var(--radius-14); }
.idro-zone .idro-corner:nth-child(4) { border-bottom-right-radius: var(--radius-14); }
.idro-zone span { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 56px); overflow: hidden; padding: 4px var(--space-10); border-radius: var(--radius-pill); color: var(--on-overlay); background: var(--overlay-scrim); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.idro-shutter { position: absolute; inset: 0; z-index: 4; background: var(--on-stage); opacity: 0; pointer-events: none; }
.idro-shutter.is-flash { animation: idro-shutter var(--dur-fast) var(--ease-out) both; }
.idro-guidance { min-height: 1.5em; margin: var(--space-12) 0 0; color: var(--muted-strong); font-size: 14px; font-weight: 600; line-height: 1.8; text-align: center; }
.idro-guidance--overlay { position: absolute; inset-inline: var(--space-16); bottom: calc(var(--idro-footer) + var(--space-16) + env(safe-area-inset-bottom, 0px)); z-index: 45; margin: 0; color: var(--on-overlay); font-size: 15px; font-weight: 500; line-height: 1.7; text-shadow: 0 1px 3px #0000008c; }
/* The footer over the camera: --idro-footer is its height above the safe area (padding + pill + gap + quiet button). */
.idro-overlay-actions { --idro-footer: 116px; position: absolute; inset-inline: 0; bottom: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; margin: 0; padding: var(--space-36) var(--space-16) calc(24px + env(safe-area-inset-bottom, 0px)); gap: var(--space-10); background: linear-gradient(to top, var(--overlay-gradient), transparent); }
.idro-camera--full ~ .idro-guidance--overlay, .idro-camera--full ~ .idro-phrases--overlay { --idro-footer: 116px; }
.idro-camera--full ~ .idro-guidance--overlay, .idro-camera--full ~ .idro-overlay-actions, .idro-camera--full ~ .idro-phrases--overlay { position: fixed; }
.idro-phone-screen .idro-camera--full ~ .idro-guidance--overlay, .idro-phone-screen .idro-camera--full ~ .idro-overlay-actions, .idro-phone-screen .idro-camera--full ~ .idro-phrases--overlay { position: absolute; }

/* ---- Turn prompt: on the rim of the face circle, never over the face ----- */
.idro-turn { position: absolute; inset: 0; z-index: 3; pointer-events: none; animation: idro-fade var(--dur-base) var(--ease-out) both; }
.idro-turn-chev { position: absolute; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; color: var(--on-stage-accent); filter: drop-shadow(0 0 6px #7ee3d680); transform: translateY(-50%); }
.idro-turn[data-direction="left"] .idro-turn-chev { left: -18px; }
.idro-turn[data-direction="right"] .idro-turn-chev { right: -18px; }
.idro-turn-chev svg { display: block; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.idro-turn[data-direction="left"][data-phase="turn"] .idro-turn-chev svg, .idro-turn[data-direction="right"][data-phase="return"] .idro-turn-chev svg { animation: idro-turn-left var(--dur-link) var(--ease-in-out) infinite; }
.idro-turn[data-direction="right"][data-phase="turn"] .idro-turn-chev svg, .idro-turn[data-direction="left"][data-phase="return"] .idro-turn-chev svg { animation: idro-turn-right var(--dur-link) var(--ease-in-out) infinite; }
.idro-turn[data-phase="return"] .idro-turn-chev { color: var(--on-stage); filter: none; }
.idro-turn-text { position: absolute; top: calc(100% + 18px); left: 50%; width: max-content; max-width: 320px; padding: 8px var(--space-16); border-radius: var(--radius-pill); color: var(--on-overlay); background: var(--overlay-scrim-strong); font-size: 17px; font-weight: 700; line-height: 1.5; text-align: center; transform: translateX(-50%); }

/* ---- Countdown ring: the declaration's quiet margins --------------------- */
.idro-count { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; place-items: center; width: 64px; height: 64px; transform: translate(-50%, -50%); color: var(--on-stage); pointer-events: none; }
.idro-count svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.idro-count circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.idro-count .idro-count-track { stroke: var(--guide); opacity: .3; }
.idro-count .idro-count-ring { stroke: var(--on-stage-accent); stroke-dasharray: 138.2; stroke-dashoffset: 0; }
.idro-count.is-running .idro-count-ring { animation: idro-ring var(--dur-count) linear forwards; }
.idro-count b { position: relative; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---- Declaration sentence, checking, scan, evidence ---------------------- */
.idro-phrases { margin: 0 0 var(--space-16); padding: var(--space-16) var(--space-18); max-height: 36dvh; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--notice-outline); border-radius: var(--radius-12); background: var(--notice-surface); transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.idro-phrases-label { display: block; margin: 0 0 var(--space-4); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
.idro-phrases p { margin: 0; color: var(--text); font-size: 17px; font-weight: 500; line-height: 1.95; }
.idro-phrases p + p { margin-top: var(--space-12); }
.idro-phrases.is-live { border-color: var(--primary-outline); }
.idro-phrases--overlay { position: absolute; inset-inline: var(--space-12); bottom: calc(var(--idro-footer, 148px) + var(--space-8) + env(safe-area-inset-bottom, 0px)); z-index: 45; max-height: 22dvh; margin: 0; padding: var(--space-12) var(--space-16); border: 1px solid var(--overlay-control); border-radius: var(--radius-16); color: var(--on-overlay); background: var(--overlay-scrim); box-shadow: inset 0 1px 0 var(--overlay-control); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.idro-phrases--overlay .idro-phrases-label { color: var(--on-overlay); opacity: .7; }
.idro-phrases--overlay p { color: var(--on-overlay); font-size: 17px; line-height: 1.9; }
.idro-phrases--overlay.is-live { border-color: var(--on-stage-accent); box-shadow: inset 0 1px 0 var(--overlay-control), 0 0 0 1px #7ee3d640; }
.idro-checking { display: grid; place-items: center; min-height: 120px; margin: 0 0 22px; color: var(--muted); text-align: center; }
.idro-checking p { margin: 0; font-size: 16px; line-height: 1.8; }
.idro-checking .idro-link-spinner { margin: 0 0 var(--space-14); color: var(--primary-ink); }
.idro-checking .idro-meta-text { margin-top: var(--space-12); font-size: 13px; line-height: 1.7; }
.idro-checking-line { width: 100%; max-width: 240px; height: var(--size-checking); margin: 18px auto 0; overflow: hidden; border-radius: 4px; background: var(--track); direction: ltr; }
.idro-checking-line > i { display: block; width: 36%; height: 100%; border-radius: inherit; background: var(--primary); animation: idro-checking var(--dur-loop) var(--ease-in-out) infinite; }
.idro-scan { position: relative; width: 168px; aspect-ratio: 1.586; margin: 0 auto var(--space-16); overflow: hidden; border: 1px solid var(--outline); border-radius: var(--radius-10); background: var(--surface-raised); }
.idro-scan img { display: block; width: 100%; height: 100%; object-fit: cover; }
.idro-checking[data-doc="passport"] .idro-scan, .idro-checking[data-doc="booklet"] .idro-scan { width: 118px; aspect-ratio: .72; }
.idro-scan::after { content: ""; position: absolute; inset: -40% 0; background: linear-gradient(to bottom, transparent 42%, var(--accent-soft) 50%, transparent 58%); opacity: .9; animation: idro-shimmer var(--dur-breathe) var(--ease-in-out) infinite; }
.idro-evidence { margin: var(--space-20) 0 0; padding: 0; border-top: 1px solid var(--outline); color: var(--muted); }
.idro-evidence > summary { min-height: var(--size-touch); padding: var(--space-12) 0; color: var(--muted-strong); font-size: 14px; line-height: 1.7; cursor: pointer; list-style: none; }
.idro-evidence > summary::-webkit-details-marker { display: none; }
.idro-evidence > summary::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-start: var(--space-8); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-base) var(--ease-out); }
.idro-evidence[open] > summary { margin-bottom: var(--space-6); }
.idro-evidence[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.idro-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; gap: var(--space-12); }
.idro-previews figure { min-width: 0; margin: 0; animation: idro-rise var(--dur-slow) var(--ease-out) both; }
.idro-previews figure:nth-child(2) { animation-delay: var(--stagger); }
.idro-previews figcaption { margin: 0 0 7px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.idro-well { height: 180px; overflow: hidden; border: 1px solid var(--outline); border-radius: var(--radius-10); background: var(--surface-raised); }
.idro-well img { display: block; width: 100%; height: 100%; object-fit: contain; }
.idro-well--empty { display: grid; place-items: center; color: var(--muted); font-size: 13px; }

/* ---- Status line and provider footer ------------------------------------- */
.idro-message { min-height: 0; margin: var(--space-12) 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; text-align: center; transition: opacity var(--dur-fast) var(--ease-out); }
.idro-message:empty { display: none; }
.idro-message.is-error { color: var(--error); }
.idro-message.is-swapping { opacity: 0; }
.idro-provider { display: flex; align-items: center; justify-content: center; margin: var(--space-14) 0 0; padding: 0; gap: var(--space-6); color: var(--subtle); font-size: 11px; font-weight: 400; line-height: 1.7; text-align: center; }
.idro-provider-symbol { display: inline-block; flex: none; width: var(--size-symbol); height: var(--size-symbol); }
.idro-provider-symbol svg { display: block; width: 100%; height: 100%; }
.idro-skeleton { border-radius: var(--radius-10); background: linear-gradient(90deg, var(--surface-raised) 25%, var(--track) 50%, var(--surface-raised) 75%); background-size: 200% 100%; animation: idro-skeleton var(--dur-breathe) var(--ease-in-out) infinite; }

/* ---- Keyframes ----------------------------------------------------------- */
@keyframes idro-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes idro-exit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
@keyframes idro-draw { to { stroke-dashoffset: 0; } }
@keyframes idro-advance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes idro-live { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
@keyframes idro-breathe { 0%, 100% { opacity: .9; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.015); } }
@keyframes idro-breathe-still { 0%, 100% { opacity: .92; } 50% { opacity: 1; } }
@keyframes idro-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes idro-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes idro-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes idro-glow { 0% { box-shadow: 0 0 0 0 transparent; } 40% { box-shadow: var(--shadow-glow); } 100% { box-shadow: 0 0 0 16px transparent; } }
@keyframes idro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes idro-unfold-top { from { transform: translateY(44px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes idro-unfold-bottom { from { transform: translateY(-44px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes idro-fold-in { from { transform: translateY(-50%) scaleX(0); opacity: 0; } to { transform: translateY(-50%) scaleX(1); opacity: 1; } }
@keyframes idro-mark-pop { 0% { transform: rotate(-45deg) scale(.6); opacity: 0; } 60% { transform: rotate(-45deg) scale(1.08); opacity: 1; } 100% { transform: rotate(-45deg) scale(1); opacity: 1; } }
@keyframes idro-checking { from { transform: translateX(-105%); } to { transform: translateX(285%); } }
@keyframes idro-turn-left { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(-8px); opacity: .8; } }
@keyframes idro-turn-right { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(8px); opacity: .8; } }
@keyframes idro-shutter { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes idro-sweep { 0% { top: 4%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 96%; opacity: 0; } }
@keyframes idro-record-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 #ff3b4766; } 50% { transform: scale(1.06); box-shadow: 0 0 0 8px #ff3b4700; } }
@keyframes idro-link-a { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }
@keyframes idro-link-b { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-12px); } }
@keyframes idro-ring { to { stroke-dashoffset: 138.2; } }
@keyframes idro-shimmer { from { transform: translateY(-30%); } to { transform: translateY(30%); } }
@keyframes idro-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes idro-drift { from { background-position: 48% 40%; background-size: 100% 100%; } to { background-position: 52% 44%; background-size: 108% 108%; } }
@keyframes idro-scene-sweep { 0%, 56% { transform: translateY(0); opacity: 0; } 60% { opacity: 1; } 80% { transform: translateY(56px); opacity: 1; } 84%, 100% { transform: translateY(56px); opacity: 0; } }
@keyframes idro-scene-sweep-tall { 0%, 56% { transform: translateY(0); opacity: 0; } 60% { opacity: 1; } 80% { transform: translateY(98px); opacity: 1; } 84%, 100% { transform: translateY(98px); opacity: 0; } }
@keyframes idro-scene-converge { 0%, 62%, 100% { transform: scale(1); } 78%, 90% { transform: scale(.95); } }
@keyframes idro-scene-ink { 0%, 62%, 100% { stroke: var(--guide); } 78%, 90% { stroke: var(--on-stage-accent); } }
/* The face lesson, on a 6 s clock: hat off at 1.0–1.6 s, glasses off at 1.9–2.5 s, focus at 2.7–3.3 s, the head turns and the arc completes at 3.5–4.6 s, hold, then everything fades back by 6 s. */
@keyframes idro-scene-hat { 0%, 16% { transform: none; opacity: 1; } 27%, 90% { transform: translateY(-16px) rotate(-8deg); opacity: 0; } 96%, 100% { transform: none; opacity: 1; } }
@keyframes idro-scene-glasses { 0%, 32% { transform: none; opacity: 1; } 42%, 90% { transform: translateY(9px); opacity: 0; } 96%, 100% { transform: none; opacity: 1; } }
@keyframes idro-scene-focus { 0%, 44% { filter: blur(1.6px); opacity: .72; } 55%, 90% { filter: blur(0); opacity: 1; } 97%, 100% { filter: blur(1.6px); opacity: .72; } }
@keyframes idro-scene-turn { 0%, 58% { transform: none; } 66%, 72% { transform: translateX(-6px) rotate(-4deg) scaleX(.86); } 80%, 100% { transform: none; } }
@keyframes idro-scene-rim { 0%, 56% { stroke: var(--guide); opacity: .22; filter: none; } 60%, 72% { stroke: var(--on-stage-accent); opacity: .42; filter: none; } 78%, 90% { stroke: var(--on-stage-accent); opacity: 1; filter: drop-shadow(0 0 4px #7ee3d680); } 96%, 100% { stroke: var(--guide); opacity: .22; filter: none; } }
@keyframes idro-scene-side { 0%, 58% { opacity: 0; } 62% { opacity: 1; } 66% { opacity: .55; } 70% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes idro-rim-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes idro-scene-card { 0%, 6% { transform: translateY(48px); opacity: 0; } 12% { opacity: 1; } 24% { transform: translateY(-3px); opacity: 1; } 29%, 88% { transform: translateY(0); opacity: 1; } 95%, 100% { transform: translateY(48px); opacity: 0; } }
@keyframes idro-scene-decl-corners { 0%, 26%, 100% { transform: scale(1); } 32%, 88% { transform: scale(.95); } 94% { transform: scale(1); } }
@keyframes idro-scene-decl-ink { 0%, 26%, 100% { stroke: var(--guide); } 32%, 88% { stroke: var(--on-stage-accent); } 94% { stroke: var(--guide); } }
@keyframes idro-scene-mouth { 0%, 36% { transform: scaleY(.5); } 38% { transform: scaleY(1.9); } 40% { transform: scaleY(.6); } 42.5% { transform: scaleY(1.5); } 45% { transform: scaleY(.5); } 47% { transform: scaleY(2); } 49.5% { transform: scaleY(.8); } 52% { transform: scaleY(1.6); } 54% { transform: scaleY(.5); } 56.5% { transform: scaleY(1.8); } 59% { transform: scaleY(.7); } 61% { transform: scaleY(1.4); } 63.5% { transform: scaleY(.5); } 66% { transform: scaleY(1.9); } 68% { transform: scaleY(.9); } 70.5% { transform: scaleY(1.5); } 73% { transform: scaleY(.5); } 75% { transform: scaleY(1.7); } 77.5% { transform: scaleY(.6); } 80%, 100% { transform: scaleY(.5); } }
@keyframes idro-scene-talk { 0%, 36% { transform: scaleY(.25); } 38% { transform: scaleY(1); } 40% { transform: scaleY(.4); } 42% { transform: scaleY(.9); } 44% { transform: scaleY(.3); } 46% { transform: scaleY(.8); } 48% { transform: scaleY(.5); } 50% { transform: scaleY(1); } 52% { transform: scaleY(.3); } 54% { transform: scaleY(.7); } 56% { transform: scaleY(.4); } 58% { transform: scaleY(1); } 60% { transform: scaleY(.35); } 62% { transform: scaleY(.8); } 64% { transform: scaleY(.5); } 66% { transform: scaleY(1); } 68% { transform: scaleY(.3); } 70% { transform: scaleY(.9); } 72% { transform: scaleY(.45); } 74% { transform: scaleY(.8); } 76% { transform: scaleY(.3); } 78% { transform: scaleY(.6); } 80%, 100% { transform: scaleY(.25); } }
@keyframes idro-scene-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* ---- Narrow phones and short viewports ----------------------------------- */
@media (max-width: 360px) {
  .idro-sheet { --idro-inset: 18px; }
  .idro-hero { margin-block: var(--space-16) var(--space-20); }
  .idro-glyph { width: 94px; height: 94px; margin-bottom: var(--space-14); }
  .idro-hero h2 { font-size: 20px; }
  .idro-option { padding-inline: var(--space-12); gap: var(--space-10); }
  .idro-tips li { gap: var(--space-10); }
  .idro-actions { padding-block-start: 22px; }
  .idro-previews { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 650px) and (max-width: 480px) {
  .idro-hero { margin-block: var(--space-12) var(--space-16); }
  .idro-glyph { width: 80px; height: 80px; margin-bottom: var(--space-12); }
  .idro-screen[data-phase="verifying"] .idro-hero, .idro-screen[data-phase="finished"] .idro-hero { padding-block: var(--space-24); }
}
@media (hover: hover) {
  .idro-option:hover { border-color: var(--outline-hover); }
  .idro-option[aria-pressed="true"]:hover { border-color: var(--primary-outline); background: var(--primary-soft-hover); }
  .idro-btn:not(:disabled):hover { background: var(--primary-hover); }
  .idro-btn--secondary:not(:disabled):hover { background: var(--primary-soft); border-color: var(--outline-hover); }
  .idro-back:hover, .idro-record:hover { background: var(--overlay-control); }
}

/* ---- Reduced motion and forced colours ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .idro-root *, .idro-root *::before, .idro-root *::after { animation: none !important; transition: none !important; }
  .idro-screen > *, .idro-notice, .idro-camera { opacity: 1; transform: none; }
  .idro-glyph svg > [pathLength], .idro-chain-ring { stroke-dashoffset: 0; }
  .idro-thread-seg > i { opacity: 1; }
  .idro-thread-seg[data-state="active"] > i { opacity: .6; }
  .idro-guide, .idro-count, .idro-zone { transform: translate(-50%, -50%); }
  .idro-checking-line > i { transform: translateX(90%); }
  .idro-count .idro-count-ring { stroke-dashoffset: 0; }
  .idro-arc.is-running .side { animation: none; }
  .idro-scene .s-rim { stroke: var(--on-stage-accent); opacity: 1; }
  .idro-link-spinner i:nth-child(1) { transform: translateX(6px); }
  .idro-link-spinner i:nth-child(2) { transform: translateX(-6px); }
  .idro-viewfinder { background-size: 100% 100%; }
  .idro-scene .s-sweep { opacity: 0; }
  .idro-scene .s-bar { transform: scaleY(.7); }
  .idro-scene .s-hat, .idro-scene .s-glasses { opacity: 0; }
  .idro-scene .s-figure { filter: none; opacity: 1; }
  .idro-scene--declaration .s-card-hand { transform: none; opacity: 1; }
  .idro-scene--declaration .s-corners { transform: scale(.95); }
  .idro-scene--declaration .s-corners .s-corner { stroke: var(--on-stage-accent); }
  .idro-scene--declaration .s-mouth { transform: scaleY(1); }
}
@media (forced-colors: active) {
  .idro-choice, .idro-guide, .idro-corner { border-color: CanvasText; }
  [aria-pressed="true"] > .idro-choice { background: Highlight; border-color: Highlight; }
  .idro-thread-seg > i, .idro-checking-line > i { background: Highlight; }
  .idro-btn { border-color: ButtonText; }
  .idro-arc circle, .idro-arc path { stroke: CanvasText; filter: none; }
}