/* web/styles.css — tokens and layout per docs/design/DESIGN.md */

:root {
  --bg-0: #0F1419;
  --bg-1: #1A222B;
  --bg-2: #242E39;
  --border: #33404D;
  --text-1: #F2F5F7;
  --text-2: #9FADB9;
  /* Third neutral, for fine print that must stay legible without
     competing with body text. Added when a rule referenced it and
     silently fell back to body colour instead. */
  --text-3: #8A97A3;   /* 5.4:1 on bg-1 — AA with room, not on the line */
  --accent: #2E6FA8; /* on-accent beyazla 5.3:1 (AA) — design-review bulgusu */
  --on-accent: #FFFFFF;
  --rec: #D64545;
  --ok: #3FA46A;
  --warn: #C9922E;
  --radius: 8px;
  --radius-lg: 12px;
}

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

html, body {
  /* min-height, NOT height: a fixed 100% box makes Chromium release
     position:sticky after one viewport of scroll (design-review BLOCKER). */
  min-height: 100%;
  background: var(--bg-0);
  color: var(--text-1);
  /* V1: system stack, self-hosted brand fonts pending (DESIGN.md §3).
     Leelawadee UI / Noto Sans Thai guarantee Thai glyph coverage. */
  font-family: system-ui, "Segoe UI", Roboto, "Noto Sans", "Leelawadee UI",
    "Noto Sans Thai", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
:lang(th) { line-height: 1.7; }

.app { min-height: 100vh; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.screen[hidden] { display: none; }
/* An author `display` declaration outranks the UA rule for [hidden], so
   every class that sets display must opt back in — otherwise
   `node.hidden = true` silently does nothing and the element stays on
   screen (found on the panel: a hidden "delete all history" button was
   rendering; the same bug hid nothing on the interview controls either).
   The deliberate space-reserving exceptions below are more specific and
   still win. */
.btn[hidden], .level[hidden], .stat-strip[hidden], .latest-card[hidden],
.record-detail[hidden], .record-actions[hidden], .field-label[hidden],
/* Anything that sets its own display must be listed here, or the hidden
   attribute stops working: an unlisted .summary-body kept 469px of
   collapsed answer on the page (measured 2026-09-11). */
.summary-body[hidden],
/* The divider between "sign in with Apple" and the e-mail form: with the
   Apple button hidden it was a rule with nothing on either side of it
   (design review 2026-09-21). */
.auth-or[hidden] {
  display: none;
}

/* ---------- cards & typography ---------- */
.card {
  width: 100%;
  max-width: 560px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.card.center { text-align: center; }
.brand { font-size: 24px; font-weight: 600; letter-spacing: 0.2px; }
.section-title { font-size: 18px; font-weight: 600; margin-top: 16px; }
.muted { color: var(--text-2); margin-top: 8px; }
.footnote { color: var(--text-2); font-size: 13px; margin-top: 24px; }
.centered-note { text-align: center; padding: 0 24px 16px; }

/* ---------- buttons ---------- */
.btn {
  font: inherit;
  text-decoration: none; /* .btn also dresses <a> links on marketing pages */
  display: inline-block;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 12px 24px;
  min-height: 44px;
  cursor: pointer;
  margin-top: 16px;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Premium button system (rev 4): depth via gradient + inner highlight,
   never neon. White on the LIGHTEST gradient stop is 5.1:1 (AA). */
.btn {
  border-radius: 10px; font-weight: 600; letter-spacing: 0.2px;
  transition: background-color 200ms ease-out, border-color 200ms ease-out,
              transform 150ms ease-out, box-shadow 200ms ease-out;
}
.btn-primary {
  background: linear-gradient(180deg, #35739F 0%, #275B8C 100%);
  color: var(--on-accent);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px -12px rgba(46, 111, 168, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #3B7DAC 0%, #2C6598 100%);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: rgba(36, 46, 57, 0.6);
  color: var(--text-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.btn-secondary:hover { background: #2C3945; border-color: #46586B; }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover { transform: none; }
}

.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.lang-grid .btn { margin-top: 0; }

.row { display: flex; justify-content: center; flex-wrap: wrap; }
.row.gap { gap: 12px; }

.field { margin-top: 16px; text-align: left; }
.field-label {
  display: block;
  color: var(--text-2);
  font-size: 14px;
  margin-bottom: 6px;
}
.select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  color: var(--text-1);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.consent-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  margin-top: 24px;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
}
.consent-row input {
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex: none;
}

.alert {
  margin-top: 24px;
  border: 1px solid var(--rec);
  border-radius: var(--radius);
  padding: 16px;
  text-align: left;
}
.alert h3 { font-size: 16px; }
.alert p { color: var(--text-2); margin-top: 4px; }

.spinner {
  width: 32px; height: 32px; margin: 0 auto 16px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- interview screen ---------- */
.screen-interview { justify-content: center; padding: 0; }

.topbar {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-wrap: wrap; /* narrow screens: items drop whole to the next row */
  align-items: center;
  gap: 8px 12px;
  padding: 12px 16px;
}
.progress { color: var(--text-2); font-size: 14px; }
.pill {
  font-size: 13px;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap; /* pills wrap as units, never break mid-text */
}
.pill-rec { color: var(--text-1); border-color: var(--rec); }

/* End-interview: quiet by default, unmistakable once armed (two-tap guard).
   Sits at the topbar's right edge; the REC pill stays rightmost while
   recording. Standard button radius (not the pill shape) so an ACTION never
   masquerades as an info badge; 44px touch target per DESIGN.md §7. */
.btn-end {
  margin: 0 0 0 auto;
  padding: 8px 16px;
  min-height: 44px;
  font-size: 13px;
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
  white-space: nowrap;
}
.btn-end:hover { color: var(--text-1); border-color: var(--rec); }
.btn-end.armed {
  color: var(--text-1);
  /* darker than --rec on purpose: #F2F5F7 on #B23838 = 5.4:1 (AA) */
  background: #B23838;
  border-color: #B23838;
}
.rec-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rec); margin-right: 6px;
  animation: pulse 1.4s ease-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* live mic level: proof the officer hears you (bars fill as you speak) */
.level { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: 8px; }
.level i { width: 3px; background: var(--border); border-radius: 1px; }
.level i:nth-child(1) { height: 4px; }
.level i:nth-child(2) { height: 6px; }
.level i:nth-child(3) { height: 8px; }
.level i:nth-child(4) { height: 10px; }
.level i:nth-child(5) { height: 12px; }
.level i.on { background: var(--accent); }

.stage { width: 100%; display: flex; justify-content: center; align-items: flex-start; padding: 0 16px; }
.stage-panel {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: min(960px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-1);
}
.stage-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.stage-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 220ms ease-out;
}
.stage-video.visible { opacity: 1; }
/* Live avatar stream can arrive square (e.g. 512x512): letterbox it exactly
   like the pre-rendered clips (pipeline pad color 0x10151B) instead of
   cropping, so the officer's framing never jumps when the flow falls back
   from live avatar to clips (design-review bulgusu, ADR-002). */
#avatar-video { object-fit: contain; background: #10151B; }

/* Desktop: subtitle overlays the bottom of the 16:9 scene. Below 1024px it
   becomes a block UNDER the video so the officer is never covered
   (DESIGN.md §3/§7). */
.subtitle {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;          /* same reason as .pip: never dimmed by an overlay */
  padding: 16px 24px;
  background: rgba(15, 20, 25, 0.82);
  font-size: 18px;
  text-align: center;
}
@media (max-width: 1023px) {
  .subtitle { position: static; background: var(--bg-1); border-top: 1px solid var(--border); }
}

.pip {
  position: absolute;
  right: 16px; top: 16px; /* top corner: never covers the subtitle strip */
  /* Above the tap prompt (.clip-tap, z-index 4): the applicant must be able
     to see their own framing at every moment, so no overlay may dim it or
     steal its touch target (DESIGN.md, design-review 2026-09-09). */
  z-index: 5;
  width: 176px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-1);
}

.controls {
  width: 100%;
  max-width: 960px;
  min-height: 68px; /* reserved: buttons come and go, the stage must not */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px 16px;
}
.controls .btn { margin-top: 8px; }
.timer { color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 120px; }

/* The officer must sit STILL. Every element around the stage that toggles
   during a turn (recording pill, timer, hints) keeps its space and only
   turns invisible — otherwise the centred layout nudges the video up and
   down on each state change (user report: "adamın ekranı oynuyor"). */
.screen-interview .topbar { min-height: 56px; }
.screen-interview #rec-indicator[hidden] {
  display: inline-flex; visibility: hidden;
}
.screen-interview #timer[hidden] { display: inline; visibility: hidden; }
.screen-interview #auto-hint[hidden],
.screen-interview #poc-note[hidden] {
  display: block; visibility: hidden;
}
.screen-interview #auto-hint, .screen-interview #poc-note { min-height: 20px; }

/* ---------- summary ---------- */
.summary-list { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.summary-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.summary-item h3 { font-size: 16px; font-weight: 600; }
.summary-item .meta { color: var(--text-2); font-size: 13px; margin-top: 4px; }
.summary-item .transcript { color: var(--text-2); font-size: 14px; margin-top: 8px; font-style: italic; }
.summary-item audio, .summary-item video { width: 100%; margin-top: 12px; border-radius: var(--radius); }
.summary-item .row { justify-content: flex-start; }

.ai-feedback { color: var(--text-2); font-size: 14px; margin-top: 8px; }
/* Status labels (DESIGN.md §4): informational, neutral text — the variant
   only tints the border. Not a reward badge. */
.rating {
  display: inline-block;
  font-size: 13px;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 12px;
  margin-top: 8px;
}
/* Verdict bands (DESIGN.md §4 rev 3): border tint only; 'normal' stays on
   the neutral border color — the accent is reserved for ACTIONS. */
.rating-success { border-color: var(--ok); }
.rating-normal { border-color: var(--border); }
.rating-risky { border-color: var(--warn); }
.rating-fail { border-color: var(--rec); }
#ai-report { margin-top: 24px; }
.ai-score { margin-top: 12px; color: var(--text-1); }
.ai-score .rating { margin-left: 8px; }

/* ---------- marketing pages (index/visas/faq — DESIGN.md palette) ---------- */
.site { display: flex; flex-direction: column; min-height: 100vh; }

/* Sticky, blur-backed header: the "kurumsal" frame around every page. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15, 20, 25, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-nav {
  display: flex; align-items: center; gap: 8px 20px;
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 8px 24px; min-height: 64px;
  flex-wrap: wrap;
}
@media (min-width: 1101px) {
  .site-nav { flex-wrap: nowrap; }
  .nav-links { flex: 1; justify-content: center; flex-wrap: nowrap; }
}
.nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav-right .btn { white-space: nowrap; margin-top: 0; padding: 10px 20px; }
.nav-divider { width: 1px; height: 22px; background: var(--border); flex: none; }
@media (max-width: 1100px) {
  .site-nav { padding: 6px 16px; min-height: 0; }
  .nav-right { gap: 10px; }
  .nav-right .btn { padding: 9px 14px; font-size: 14px; }
  .lang-select { min-width: 96px; font-size: 13px; }
}
.brand-mark {
  color: var(--text-1); font-weight: 600; font-size: 17px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
}
.brand-logo { flex: none; display: block; }
.site-nav .nav-link {
  color: var(--text-2); text-decoration: none; font-size: 14px;
  padding: 8px 4px; min-height: 44px;
  display: inline-flex; align-items: center;
  position: relative; white-space: nowrap;
}
.site-nav .nav-link::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 8px;
  border-bottom: 2px solid var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 180ms ease-out;
}
.site-nav .nav-link:hover { color: var(--text-1); }
.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after { transform: scaleX(1); }
.site-nav .nav-link.active { color: var(--text-1); }
@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-link::after { transition: none; }
}
.nav-link:focus-visible, .brand-mark:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.site-nav .nav-cta { margin-left: auto; }
.site-nav .btn { margin-top: 0; padding: 10px 20px; }
/* No flex-wrap here: ≤1100px the menu is the collapsed column (below),
   ≥1101px it must stay one row — an unconditional `wrap` LATER in the
   cascade was overriding the desktop nowrap (design-review BLOCKER). */
.nav-links { display: flex; align-items: center; gap: 4px 18px; }
.nav-toggle { display: none; }
@media (max-width: 1100px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 44px; height: 44px; padding: 10px;
    background: transparent; border: 1px solid var(--border);
    border-radius: var(--radius); cursor: pointer;
    margin-left: auto;
  }
  .nav-toggle span {
    display: block; height: 2px; width: 100%;
    background: var(--text-1); border-radius: 2px;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav-links {
    display: none; width: 100%; flex-direction: column;
    align-items: flex-start; padding: 8px 0;
  }
  .nav-links.open { display: flex; }
  .nav-right { width: 100%; justify-content: flex-end; margin-left: 0; }
}

.lang-row { display: flex; }
.lang-select {
  width: auto; min-width: 108px;
  font-size: 14px; color: var(--text-2);
  background: transparent; border-color: transparent;
  cursor: pointer;
}
.lang-select:hover { color: var(--text-1); border-color: var(--border); }

/* ---- Cinematic hero (Konsept A) + dosya/MRZ dokunuşları (Konsept B) ---- */
.mrz-strip {
  font: 12px/2 Consolas, "Courier New", monospace;
  letter-spacing: 2px; color: var(--text-2);
  border-bottom: 1px solid var(--border);
  padding: 4px 24px; white-space: nowrap; overflow: hidden;
  background: var(--bg-0);
}
.hero-cinema {
  position: relative;
  height: min(88vh, 760px); min-height: 560px;
  overflow: hidden;
}
.hero-cinema > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  filter: brightness(0.62);
}
.hero-cinema::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 20, 25, 0.82) 0%, rgba(15, 20, 25, 0.25) 38%,
    rgba(15, 20, 25, 0.94) 84%);
}
.hero-cinema .hud { position: absolute; z-index: 3; }
.hud-doc {
  top: 24px; left: 24px;
  font: 11px/1.6 Consolas, "Courier New", monospace;
  letter-spacing: 3px; color: var(--text-2);
  background: rgba(15, 20, 25, 0.55); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 5px 12px;
}
/* Truthful HUD: the officer IS live AI — no fake "recording" claim. */
.hud-live {
  top: 24px; right: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 14px; font-size: 12px; letter-spacing: 1px;
  color: var(--text-1);
  background: rgba(15, 20, 25, 0.55);
}
.hud-live i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
}
/* Vize damgası (Konsept B): dolgusuz, --ok konturlu, hafif eğik.
   top:96 — .hud-live pilinin altına, dönüş payıyla birlikte çakışmasız
   (design-re-check BLOCKER'ı: köşeye bağımsız sabitlenmiş iki öğe her
   masaüstü genişliğinde üst üste biniyordu). */
.stamp {
  position: absolute; z-index: 3; top: 96px; right: 24px;
  transform: rotate(7deg);
  border: 2.5px solid var(--ok); color: var(--ok);
  border-radius: 6px; padding: 7px 16px;
  font-weight: 700; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase;
  background: rgba(15, 20, 25, 0.72);
}
.hero-content {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 36px;
  text-align: center; padding: 0 24px;
}
.hero-line {
  display: inline-block; background: rgba(15, 20, 25, 0.78);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 24px; font-size: 18px; margin-bottom: 24px;
  max-width: 90%;
}
.hero-content h1 {
  font-size: clamp(30px, 5vw, 54px); line-height: 1.1;
  letter-spacing: -0.8px; color: var(--text-1);
  max-width: 900px; margin: 0 auto 12px;
}
.hero-content .hero-sub {
  color: var(--text-2); font-size: 18px; line-height: 1.55;
  max-width: 640px; margin: 0 auto 24px;
}
.hero-content .hero-actions { justify-content: center; }
.hero-content .trust-row { justify-content: center; }
.hero-content .trust-row .pill { background: rgba(15, 20, 25, 0.6); }
.hero-content .hero-note { max-width: 640px; margin: 14px auto 0; }

.hero {
  width: 100%; max-width: 1120px; margin: 0 auto; padding: 72px 24px 48px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
  position: relative;
}
/* Muted depth glow — deep desaturated blue, far from neon (DESIGN.md §1). */
.hero::before {
  content: ""; position: absolute; inset: -40px 0 auto 0; height: 420px;
  background: radial-gradient(600px 320px at 30% 20%,
              rgba(46, 111, 168, 0.16), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { font-size: 46px; line-height: 1.12; color: var(--text-1); letter-spacing: -0.8px; }
.hero .hero-sub { margin-top: 18px; color: var(--text-2); font-size: 18px; line-height: 1.6; max-width: 520px; }

/* Factual trust chips (no invented numbers — product facts only). */
.trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.trust-row .pill { background: var(--bg-1); }

/* Browser-chrome frame around product shots: reads as "real software". */
.browser-frame {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-1); margin: 0;
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.7);
}
.browser-frame .chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.browser-frame .chrome i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--border);
}
.browser-frame img { display: block; width: 100%; max-width: 100%; height: auto; }
.browser-frame figcaption {
  padding: 10px 14px; font-size: 12px; color: var(--text-2);
  border-top: 1px solid var(--border);
}

/* ---- Dossier design system: the hero's art direction, site-wide ---- */
/* Numbered mono section labels (language-neutral, pure CSS counters). */
body.landing { counter-reset: sec; }
body.landing .section > .section-h::before,
body.landing .cta-band .section-h::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  display: block;
  font: 12px/1 Consolas, "Courier New", monospace;
  letter-spacing: 4px; color: var(--accent);
  margin-bottom: 12px;
}
/* Cards: quiet at rest, alive on hover; mono type tags. */
.info-card {
  transition: border-color 200ms ease-out, transform 200ms ease-out;
}
.info-card:hover {
  border-color: #46586B; transform: translateY(-2px);
}
.info-card .pill, .folder-tabs label {
  font-family: Consolas, "Courier New", monospace;
  letter-spacing: 2px; font-size: 12px;
}

/* Docs/FAQ: archive numbering on every item. */
.faq-list { counter-reset: q; }
.faq-item h3::before {
  counter-increment: q;
  content: counter(q, decimal-leading-zero) " — ";
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px; letter-spacing: 2px; color: var(--accent);
}

/* Divider echo of the passport strip before the footer. */
.mrz-mini { border-top: 1px solid var(--border); opacity: 0.55; }
/* Forms: quiet uppercase mono-adjacent labels (auth + interview).
   Thai is exempt per DESIGN.md §3 (no text-transform on th). */
.field-label {
  text-transform: uppercase; font-size: 12px; letter-spacing: 1.5px;
}
.field-label:lang(th), :lang(th) .field-label {
  text-transform: none; letter-spacing: normal;
}
@media (prefers-reduced-motion: reduce) {
  .info-card { transition: none; }
  .info-card:hover {
    transform: none;
  }
}

/* Sample questions: manila-folder tabs (pure CSS radio switcher). */
.folder input[type="radio"] { position: absolute; opacity: 0; }
.folder-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.folder-tabs label {
  font: 13px/1 Consolas, "Courier New", monospace; letter-spacing: 2px;
  color: var(--text-2); cursor: pointer;
  padding: 12px 22px; min-height: 44px; display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 10px 10px 0 0; background: var(--bg-0);
  position: relative; top: 1px;
}
.folder-panels {
  border: 1px solid var(--border); border-radius: 0 var(--radius-lg)
  var(--radius-lg) var(--radius-lg); background: var(--bg-1); padding: 28px;
}
.folder-panel { display: none; }
.folder-panel ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.folder-panel li {
  color: var(--text-1); font-size: 16px; line-height: 1.55;
  padding-left: 44px; position: relative;
}
.folder-panel li::before {
  content: "Q" counter(fq); counter-increment: fq;
  position: absolute; left: 0; top: 1px;
  font: 12px/1.4 Consolas, "Courier New", monospace; letter-spacing: 1px;
  color: var(--accent); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 6px;
}
.folder-panel { counter-reset: fq; }
#ext-b1b2:checked ~ .folder-tabs label[for="ext-b1b2"],
#ext-f1:checked ~ .folder-tabs label[for="ext-f1"],
#ext-j1:checked ~ .folder-tabs label[for="ext-j1"],
#ext-h1b:checked ~ .folder-tabs label[for="ext-h1b"] {
  color: var(--text-1); background: var(--bg-1);
  border-color: var(--border); z-index: 1;
}
#ext-b1b2:focus-visible ~ .folder-tabs label[for="ext-b1b2"],
#ext-f1:focus-visible ~ .folder-tabs label[for="ext-f1"],
#ext-j1:focus-visible ~ .folder-tabs label[for="ext-j1"],
#ext-h1b:focus-visible ~ .folder-tabs label[for="ext-h1b"] {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
#ext-b1b2:checked ~ .folder-panels .fp-b1b2,
#ext-f1:checked ~ .folder-panels .fp-f1,
#ext-j1:checked ~ .folder-panels .fp-j1,
#ext-h1b:checked ~ .folder-panels .fp-h1b { display: block; }

/* Visa dossier rows (visas.html): big mono code + profile + questions. */
.visa-file { border-top: 1px solid var(--border); }
.visa-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 28px;
  padding: 32px 0; border-bottom: 1px solid var(--border);
}
.visa-code {
  font: 700 30px/1.1 Consolas, "Courier New", monospace;
  letter-spacing: 1px; color: var(--accent);
}
.visa-row h3 { font-size: 19px; color: var(--text-1); margin-bottom: 8px; }
.visa-row > div > p { color: var(--text-2); line-height: 1.6; max-width: 640px; }
.qlist { list-style: none; display: flex; flex-direction: column; gap: 12px;
         margin-top: 18px; counter-reset: fq; }
.qlist li {
  color: var(--text-1); font-size: 15px; line-height: 1.55;
  padding-left: 44px; position: relative;
}
.qlist li::before {
  content: "Q" counter(fq); counter-increment: fq;
  position: absolute; left: 0; top: 0;
  font: 12px/1.4 Consolas, "Courier New", monospace; letter-spacing: 1px;
  color: var(--accent); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 6px;
}
@media (max-width: 700px) {
  .visa-row { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .visa-code { font-size: 24px; }
}

/* "Nasıl çalışır": vertical case-file timeline instead of cards. */
.timeline { position: relative; padding-left: 56px; max-width: 720px; }
.timeline::before {
  content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px;
  border-left: 1px solid var(--border);
}
.tl-item { position: relative; padding: 0 0 32px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: counter(tl, decimal-leading-zero); counter-increment: tl;
  position: absolute; left: -56px; top: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 13px/1 Consolas, "Courier New", monospace; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 8px;
  background: var(--bg-0);
}
.timeline { counter-reset: tl; }
.tl-item h3 { font-size: 18px; color: var(--text-1); margin-bottom: 8px; padding-top: 8px; }
.tl-item p { color: var(--text-2); line-height: 1.6; max-width: 560px; }

/* Feature spec-sheet: hairline rows, mono labels — a dossier data page. */
.spec { border-top: 1px solid var(--border); }
.spec-row {
  display: grid; grid-template-columns: 260px 1fr; gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--border);
}
.spec-row h3 {
  font: 600 14px/1.5 "Segoe UI", Inter, system-ui, sans-serif;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-1);
}
.spec-row p { color: var(--text-2); line-height: 1.6; max-width: 640px; }

/* Pricing: consular fee schedule instead of four identical cards. */
.fee-table { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.fee-row {
  display: grid; grid-template-columns: 1fr auto minmax(150px, auto);
  gap: 20px; align-items: center;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  background: var(--bg-0);
}
.fee-row:last-child { border-bottom: none; }
.fee-row.featured { background: var(--bg-1); }
.fee-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fee-name h3 { font-size: 16px; color: var(--text-1); font-weight: 600; }
.fee-name .stamp-inline {
  border: 2px solid var(--ok); color: var(--ok); border-radius: 6px;
  padding: 3px 9px; font-weight: 700; font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; transform: rotate(-2deg);
}
.fee-note { color: var(--text-2); font-size: 14px; margin-top: 4px; max-width: 520px; }
.fee-price {
  font-size: 26px; color: var(--text-1); letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fee-action { text-align: right; }
.fee-action .btn { margin-top: 0; }
.fee-action .pill { white-space: nowrap; }
@media (max-width: 700px) {
  .spec-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .fee-row { grid-template-columns: 1fr auto; }
  .fee-action { grid-column: 1 / -1; text-align: left; }
}

/* Closing CTA band */
.cta-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-1); }
.cta-band .section { text-align: center; padding: 48px 24px; }
.cta-band .section-h { margin-bottom: 6px; }
.cta-band .section-sub { margin: 0 auto 20px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { margin-top: 20px; }
.hero-visual {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-1);
}
.hero-visual img { display: block; width: 100%; max-width: 100%; }
.hero-visual figcaption {
  padding: 10px 14px; font-size: 12px; color: var(--text-2);
  border-top: 1px solid var(--border);
}

.section { width: 100%; max-width: 1040px; margin: 0 auto; padding: 40px 24px; }
.section-h { font-size: 26px; color: var(--text-1); margin-bottom: 8px; }
.section-sub { color: var(--text-2); margin-bottom: 24px; max-width: 640px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.info-card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
}
.info-card h3 { font-size: 16px; color: var(--text-1); margin-bottom: 8px; }
.info-card p { font-size: 14px; color: var(--text-2); line-height: 1.55; }
.info-card a {
  color: var(--text-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.info-card .pill { display: inline-block; margin-bottom: 10px; }



.faq-list { max-width: 720px; }
.faq-item { border-bottom: 1px solid var(--border); padding: 16px 0; }
.faq-item h3 { font-size: 16px; color: var(--text-1); margin-bottom: 8px; }
.faq-item p { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* Multi-column corporate footer */
.site-footer { margin-top: auto; border-top: 1px solid var(--border); background: var(--bg-1); }
.footer-cols {
  width: 100%; max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px; padding: 40px 24px 24px;
}
.footer-col h4 { font-size: 13px; color: var(--text-1); margin-bottom: 12px; letter-spacing: 0.4px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col a {
  color: var(--text-2); text-decoration: none; font-size: 14px;
  display: inline-flex; align-items: center; min-height: 32px;
}
.footer-col a:hover, .footer-col a:focus-visible { color: var(--text-1); }
.footer-col p { color: var(--text-2); font-size: 14px; line-height: 1.6; }
.footer-legal {
  border-top: 1px solid var(--border);
  padding: 20px 24px; text-align: center;
}
.footer-legal p {
  max-width: 820px; margin: 0 auto 8px; font-size: 13px;
  color: var(--text-2); line-height: 1.6;
}
.site-footer > .footer-legal p:last-child { margin-bottom: 0; }

/* Auth pages (login/register/forgot/reset) — same card language as the app */
.auth-wrap { display: flex; justify-content: center; padding: 48px 24px; }
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px;
}
.auth-card h1 { font-size: 22px; color: var(--text-1); margin-bottom: 20px; }
.auth-card .field { margin-top: 14px; }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; color: var(--text-1);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-card .btn { width: 100%; }
.auth-links { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.auth-links a { color: var(--text-2); font-size: 14px; }
.auth-links a:hover, .auth-links a:focus-visible { color: var(--text-1); }
.form-error {
  margin-top: 14px; padding: 10px 12px; font-size: 14px;
  color: var(--text-1); border: 1px solid var(--rec);
  border-radius: var(--radius);
}
.form-ok {
  margin-top: 14px; padding: 10px 12px; font-size: 14px;
  color: var(--text-1); border: 1px solid var(--ok);
  border-radius: var(--radius);
}

/* Contact page: form + info side by side; honeypot invisible to humans */
.contact-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px;
  align-items: start; max-width: 980px;
}
.contact-card { max-width: none; }
textarea.input { resize: vertical; min-height: 120px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.badge {
  display: inline-block; margin-bottom: 16px;
  font-size: 13px; color: var(--text-1);
  border: 1px solid var(--ok); border-radius: 999px; padding: 4px 14px;
}
.shot-frame {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-1); margin: 0;
}
.shot-frame img { display: block; width: 100%; max-width: 100%; height: auto; }
.shot-frame figcaption {
  padding: 10px 14px; font-size: 12px; color: var(--text-2);
  border-top: 1px solid var(--border);
}

/* Alternating visual/text rows (storefront) */
.feature-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: center; margin-top: 24px;
}
.feature-split h3 { font-size: 22px; color: var(--text-1); margin-bottom: 10px; }
.feature-split p { color: var(--text-2); line-height: 1.6; }

/* Pricing lives in the .fee-table (consular fee schedule); the old
   price-card grid was retired with layout rev 5. */

@media (max-width: 820px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile hero: decorative layers (HUD + quote line) drop, and the copy
   moves into normal flow so the container GROWS with the text — a fixed
   height + absolute bottom block clipped the content in every language
   (design-re-check BLOCKER). The portrait stays as a backdrop. */
@media (max-width: 860px) {
  .hud-doc, .hud-live, .hero-cinema .stamp, .hero-line { display: none; }
  .hero-cinema {
    height: auto; min-height: 520px;
    display: flex; align-items: flex-end;
  }
  .hero-content {
    position: relative; bottom: auto; width: 100%;
    padding: 220px 20px 32px;
  }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 32px; }
  .hero h1 { font-size: 30px; }
  .feature-split { grid-template-columns: 1fr; gap: 20px; }
  .feature-split.flip .shot-frame { order: -1; }
}

/* ---------- responsive ---------- */
@media (max-width: 767px) {
  .card { padding: 24px; }
  .subtitle { font-size: 16px; padding: 12px; }
  .pip { width: 112px; right: 8px; top: 8px; }
  .stage { padding: 0 8px; }
  .controls { flex-wrap: wrap; }
  .timer { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-video { transition: none; }
  .rec-dot { animation: none; }
  .spinner { animation-duration: 1.8s; }
  .btn { transition: none; }
}

/* ================= account panel (/panel) — rev 6 =================
   The dossier metaphor carried into the member area: a case-file masthead,
   an aggregate record, a scored result sheet and one card per interview.
   Same palette and mono field labels as the marketing pages; nothing here
   is decorative-only — every colour is paired with a word. */

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.mono { font-family: Consolas, "Courier New", monospace; letter-spacing: 1px; }

.panel-wrap {
  width: 100%; max-width: 1040px; margin: 0 auto;
  padding: 32px 24px 8px; flex: 1;
}

/* ---------- masthead ---------- */
.panel-head {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: flex-end; justify-content: space-between;
  padding: 28px 28px 34px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #212C37 0%, #18202A 100%);
  overflow: hidden;
}
/* Faint engraved rules — security-paper texture, never a visible pattern. */
.panel-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg,
    rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 9px);
}
.panel-head-main, .panel-head-side { position: relative; z-index: 1; }
.panel-head-side {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.panel-head-side .btn { margin-top: 0; }
.panel-title {
  font-size: 30px; line-height: 1.25; font-weight: 600; margin-top: 2px;
}
.panel-sub { color: var(--text-2); margin-top: 6px; max-width: 46ch; }
.panel-owner { color: var(--text-2); font-size: 13px; margin-top: 12px; }
.credit-chip {
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 18px; background: rgba(15, 20, 25, 0.5);
  text-align: center; min-width: 116px;
}
.credit-chip .field-label { margin-bottom: 2px; }
.credit-chip b { font-size: 20px; font-variant-numeric: tabular-nums; }
.panel-mrz {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  border-bottom: 0; border-top: 1px solid var(--border);
  background: rgba(15, 20, 25, 0.55);
}
.panel-status { color: var(--text-2); margin-top: 16px; min-height: 22px; }
.panel-status[hidden] { display: block; visibility: hidden; }

/* ---------- aggregate record ---------- */

/* ---------- latest result sheet ---------- */
.latest-card {
  display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; padding: 28px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.latest-gauge { position: relative; width: 168px; height: 168px; flex: none; }
.gauge { width: 168px; height: 168px; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: #2B3742; stroke-width: 10; }
.gauge-arc {
  fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset 700ms ease-out;
}
.gauge-success { stroke: var(--ok); }
.gauge-normal { stroke: var(--accent); }
.gauge-risky { stroke: var(--warn); }
.gauge-fail { stroke: var(--rec); }
.gauge-none { stroke: #46586B; }
.gauge-figure {
  position: absolute; inset: 0;
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  padding-top: 68px;
}
.gauge-figure b {
  font-size: 40px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.gauge-figure span { color: var(--text-2); font-size: 15px; }
.latest-body { flex: 1; min-width: 260px; }
.latest-body h2 { font-size: 20px; font-weight: 600; }
.latest-meta { color: var(--text-2); font-size: 13px; margin-top: 6px; }
.latest-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.latest-overall { margin-top: 14px; color: var(--text-1); }
.latest-body .footnote { margin-top: 14px; }

/* ---------- record list ---------- */
.panel-section { margin-top: 40px; }
.panel-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.panel-section-head .section-h { margin-bottom: 0; }
.record-list { display: flex; flex-direction: column; gap: 14px; }
.record-card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
  transition: border-color 200ms ease-out;
}
/* Hover brightens the frame but leaves the left edge to the band below. */
.record-card:hover {
  border-top-color: #46586B; border-right-color: #46586B;
  border-bottom-color: #46586B;
}
/* Band tint on the card edge — a rhythm cue that always sits next to the
   score chip, never the only carrier of the verdict. */
.record-success { border-left-color: var(--ok); }
.record-normal { border-left-color: var(--accent); }
.record-risky { border-left-color: var(--warn); }
.record-fail { border-left-color: var(--rec); }
.record-head {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  justify-content: space-between;
}
.record-ident { min-width: 168px; }
.record-no { font-size: 15px; font-weight: 600; }
.record-when { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.record-facts { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.fact-chip {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px 12px; font-size: 13px; color: var(--text-2);
  background: rgba(15, 20, 25, 0.4);
}
.record-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.record-verdict {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  justify-content: flex-end;
}
.record-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.record-actions .btn { margin-top: 0; }

/* Decision stamp as an inline chip — the stamp motif from the hero,
   list-sized. */
.stamp-chip {
  display: inline-block; border: 2px solid var(--ok); color: var(--ok);
  border-radius: 5px; padding: 2px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; transform: rotate(-2deg);
  background: rgba(15, 20, 25, 0.5);
}
.stamp-denied { border-color: var(--rec); color: var(--rec); }
.stamp-chip:lang(th), :lang(th) .stamp-chip {
  text-transform: none; letter-spacing: normal; /* Thai has no letter case */
}

/* ---------- expanded record ---------- */
.record-detail {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 16px;
}
.answer-row {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.answer-head {
  display: flex; gap: 14px; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px;
}
.answer-q { font-weight: 600; flex: 1; min-width: 220px; }
.answer-said {
  color: var(--text-1); margin-bottom: 10px;
  border-left: 2px solid var(--accent); padding-left: 12px;
}
.answer-feedback { color: var(--text-2); }
.answer-row .field-label { margin-bottom: 4px; }

/* ---------- empty state ---------- */
.empty-card {
  background: var(--bg-1); border: 1px dashed var(--border);
  border-radius: var(--radius-lg); padding: 40px 28px; text-align: center;
}
.empty-card h3 { font-size: 20px; font-weight: 600; margin-top: 6px; }
.empty-card .muted { max-width: 48ch; margin: 8px auto 0; }

/* ---------- panel button variants ---------- */
.btn-ghost {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--text-1); border-color: #46586B; }
.btn-sm { padding: 8px 16px; min-height: 44px; font-size: 14px; }
.btn-danger-ghost:hover { color: #F0A0A0; border-color: var(--rec); }
/* Primed destructive button: the red state is announced by the LABEL too
   (it switches to the confirm wording), never by colour alone. */
.btn-danger-ghost.is-armed {
  color: #F2B8B8; border-color: var(--rec);
  background: rgba(214, 69, 69, 0.14);
}

@media (max-width: 720px) {
  .panel-head { padding: 22px 20px 30px; align-items: flex-start; }
  .panel-title { font-size: 24px; }
  .panel-head-side { width: 100%; }
  .panel-head-side .btn { flex: 1; }
  .latest-card { gap: 20px; padding: 22px; }
  .latest-gauge, .gauge { width: 136px; height: 136px; }
  .gauge-figure { padding-top: 54px; }
  .gauge-figure b { font-size: 32px; }
  /* Narrow screens: one band per row. Side by side, the fact chips get a
     column barely one chip wide and stack into a ragged tower. */
  .record-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .record-facts { flex: none; }
  .record-side { width: 100%; align-items: flex-start; }
  .record-verdict { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .gauge-arc { transition: none; }
}

/* Summary screen: the link into the panel is a real link, underlined and at
   full text contrast (an unstyled anchor on the dark card was a previous
   design-review finding). */
#ai-saved a {
  color: var(--text-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#ai-saved a:hover, #ai-saved a:focus-visible { color: #FFFFFF; }

/* ---------- loading skeleton (design-review BLOCKER, rev 6.1) ----------
   While the file is fetched the panel keeps its shape instead of collapsing
   to one line of text. Purely decorative: the announcement lives in the
   role="status" line above it. */
#pan-skeleton[hidden] { display: none; }
#pan-skeleton .latest-card { align-items: center; }
.sk { pointer-events: none; }
.sk-line, .sk-circle {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, #232E39 0%, #2C3947 50%, #232E39 100%);
  background-size: 200% 100%;
  animation: sk-sweep 1400ms linear infinite;
}
.sk-line + .sk-line { margin-top: 10px; }
.sk-sm { width: 42%; height: 10px; }
.sk-md { width: 62%; height: 14px; }
.sk-lg { width: 88%; height: 12px; }
.sk-xl { width: 54%; height: 28px; }
.sk-circle { width: 168px; height: 168px; border-radius: 50%; flex: none; }
.sk-body { flex: 1; min-width: 260px; }
@keyframes sk-sweep {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-line, .sk-circle { animation: none; background: #232E39; }
}

/* ---------- error card ---------- */
#pan-error h3 { font-size: 20px; font-weight: 600; }
#pan-error .muted { max-width: 48ch; margin: 8px auto 0; }

/* ---------- design-review fixes (rev 6.1) ---------- */
/* "Visa denied" chip: --rec on the chip's own dark wash measured ~3.9:1.
   The border keeps the alarm colour; the TEXT moves to the lighter red
   already used for destructive button states (>=4.5:1 AA). */
.stamp-denied { border-color: var(--rec); color: #F0A0A0; }

/* Gauge fill obeys the DESIGN.md motion budget (150-300ms). */
.gauge-arc { transition: stroke-dashoffset 300ms ease-out; }

/* Tablet: four stat cards break 3+1 with auto-fit alone — force 2x2. */
@media (min-width: 721px) and (max-width: 900px) {
}

/* ============ pre-interview briefing (/interview, permission) rev 7 ============
   The old screen was a centred card with a wall of consent text; this is the
   consulate check-in desk: what you are about to do, in order, with the one
   switch that turns the live officer on stated in plain words. */

.brief {
  position: relative;
  width: 100%; max-width: 640px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px 28px;
  text-align: left;
  overflow: hidden;
}
/* Full-bleed MRZ band across the top edge of the card. */
.brief-mrz {
  margin: -26px -28px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(15, 20, 25, 0.55);
}
.brief-title {
  font-size: 26px; line-height: 1.25; font-weight: 600; margin-top: 2px;
}
.brief .muted { margin-top: 8px; }

/* ---------- the three beats ---------- */
.brief-steps {
  list-style: none; margin: 22px 0 0; padding: 18px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
}
.brief-steps li {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--text-1); font-size: 15px;
}
/* Ordinal, not an action: the accent gradient stays reserved for the one
   primary button on the screen (DESIGN.md §2, design-review bulgusu). */
.step-no {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: var(--text-1);
  background: var(--bg-2);
  border: 1px solid var(--border);
}

/* ---------- consent ---------- */
.consent-card {
  margin-top: 22px; padding: 16px 18px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 200ms ease-out;
}
/* Ticked: the card acknowledges it. The class is set in app.js alongside
   the state wording, so the meaning never rests on the colour alone. */
.consent-card.is-on { border-left-color: var(--ok); }
.consent-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.consent-head .field-label { margin-bottom: 0; }
/* The state is spelled out, never signalled by colour alone. */
.consent-state { font-size: 13px; color: var(--text-2); }
.consent-state.is-on { color: #7FD3A3; }
.consent-card .consent-row { margin-top: 0; color: var(--text-1); }
.consent-details { margin-top: 12px; }
.consent-details summary {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-2); font-size: 14px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  list-style: none;
}
.consent-details summary::-webkit-details-marker { display: none; }
.consent-details summary::before {
  content: "+"; margin-right: 8px; font-weight: 700; font-size: 16px;
  color: var(--text-2);
}
.consent-details[open] summary::before { content: "\2212"; } /* minus */
.consent-details summary:hover { color: var(--text-1); }
.consent-details summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
.consent-details p {
  color: var(--text-2); font-size: 13px; line-height: 1.6; margin-top: 10px;
}

/* Out of credits: the briefing collapses to the one fact and the one
   remedy. Everything that only matters to an interview that CAN start —
   the steps, the visa pick, the consent switch, the reassurance list —
   steps aside instead of burying the notice below the fold. */
.brief.credits-exhausted .start-head,
.brief.credits-exhausted .pick-card,
.brief.credits-exhausted #perm-grant,
.brief.credits-exhausted #start-meta,
.brief.credits-exhausted #perm-trust,
.brief.credits-exhausted #perm-note,
.brief.credits-exhausted #perm-browser-warn,
.brief.credits-exhausted #credits-info {
  display: none;
}
.brief.credits-exhausted .alert { margin-top: 18px; }

/* ---------- primary action + reassurance ---------- */
.btn-block { display: block; width: 100%; margin-top: 22px; padding: 14px 24px; }
.brief .footnote { margin-top: 14px; }

.brief-trust {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.brief-trust li {
  position: relative; padding-left: 24px;
  color: var(--text-2); font-size: 13px;
}
.brief-trust li::before {
  content: ""; position: absolute; left: 4px; top: 6px;
  width: 5px; height: 9px;
  border: solid var(--ok); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.brief .alert { margin-top: 20px; }
.brief .alert .btn { margin-top: 12px; }

@media (max-width: 560px) {
  .brief { padding: 22px 20px 24px; border-radius: var(--radius); }
  .brief-mrz { margin: -22px -20px 18px; }
  .brief-title { font-size: 22px; }
}

/* The fallback notice reserves its line like the other toggling hints, so
   the stage does not jump when it appears. */
.screen-interview #avatar-note[hidden] { display: block; visibility: hidden; }
.screen-interview #avatar-note { min-height: 20px; }

/* ---------- account screen: the way out ---------- */
/* Deleting an account is irreversible, so the block that does it is marked
   as dangerous by shape as well as by wording (App Store 5.1.1(v) asks for
   the option; DESIGN.md asks that meaning never rests on colour alone). */
.danger-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--rec);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.danger-card .field { margin-top: 16px; max-width: 340px; }
.danger-card .form-error { margin-top: 14px; }
.danger-card .btn { margin-top: 18px; }

/* Sign in with Apple. Apple's guidelines want their button to look like
   their button — black, their mark, their wording — and at least as
   prominent as the other ways in, so it sits above the form. */
.btn-apple {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 0;
  background: #000000; color: #FFFFFF;
  border: 1px solid #000000; border-radius: 10px;
  font-size: 15px; font-weight: 600;
}
.btn-apple:hover { background: #1A1A1A; border-color: #1A1A1A; }
.btn-apple svg { flex: none; margin-top: -2px; }
.btn-apple[disabled] { opacity: 0.6; }
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 4px; color: var(--text-2); font-size: 13px;
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* A link on its own in a footnote - the privacy policy the app offers a
   signed-out reader. Without a class it fell back to the browser's blue
   underline: 2.1:1 on this ground, and 16px of tap target. */
.footnote-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Form inside a panel section (profile, password). Same card language as
   the danger card, without the warning edge. */
.form-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  max-width: 460px;
}
/* first-of-TYPE, not first-child: the password card starts with a hidden
   <p> (the "you have no password yet" note), so :first-child stopped
   matching the first field and that card alone got 32px of top space where
   the others have 16 (kullanıcı bulgusu: "ikinci üstten anormal"). */
.form-card > .field:first-of-type { margin-top: 0; }
.form-card .footnote { margin-top: 6px; }
/* A settings form has no hero action, so it does not spend the filled
   primary — that stays for the one thing a screen is for. The action still
   reads as an action: accent text on the raised tone (5.4:1). */
.form-card .btn,
.form-card .btn-primary {
  width: 100%; max-width: 240px;
  background: var(--bg-2);
  color: #6FA8D6;
  border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.form-card .btn-primary:hover {
  background: #2C3945; border-color: #46586B; transform: none;
}

/* Plain list of in-product links (used where the site nav is absent). */
.link-list { list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px; }
.link-list a {
  display: block; min-height: 44px; line-height: 44px;
  color: var(--text-1); text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.link-list a::after { content: " ›"; color: var(--text-2); }
.link-list a:hover, .link-list a:focus-visible { color: #FFFFFF; }

/* BLOCKER (design-review): body text inside the panel sections ran the full
   1040px, well past the 70ch limit in DESIGN.md §3. */
.prose { max-width: 62ch; }

/* app-shell focus rings: the tab bar and title bar follow the same pattern
   as every other control instead of relying on the browser default. */
.tab-bar a:focus-visible,
.app-bar-brand:focus-visible,
.app-bar-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  border-radius: 6px;
}

/* The clip tap prompt (app.js showClipTap): shown only when WebKit refuses
   to start the officer's clip on its own. It covers the stage so the tap
   cannot be missed, and it is OUR surface — never the browser's raw video
   controls, which have no place on a consular scene. */
.clip-tap {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* As opaque as the subtitle strip (0.82): the frame underneath is a
     paused video still and can be bright, which dropped the text to
     3.9:1 — below WCAG AA (design-review 2026-09-09). */
  background: rgba(10, 14, 20, 0.82);
  color: #F2F5F8;
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  z-index: 4;
}
.clip-tap::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 16px solid currentColor;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.clip-tap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;   /* inset: the element sits on the edges */
}
.clip-tap[hidden] { display: none; }

/* ================= interview start screen =================
   Rebuilt from the approved prototype (2026-09-11). The old screen made an
   applicant read about thirty lines - a camera-permission title, a
   paragraph, three numbered steps, a bare select, eight lines of consent
   and a disclaimer - before reaching a Start button that sat below the
   fold. Now: headline, two lines, two cards, one action, all of it on a
   390px screen without scrolling. */
.brief-start { display: flex; flex-direction: column; gap: 12px; }
.start-head { display: block; }
.start-title {
  font-size: 25px; line-height: 1.2; font-weight: 650;
  letter-spacing: -0.012em; text-wrap: balance;
}
.start-lede {
  color: var(--text-2); font-size: 14.5px; line-height: 1.5; margin-top: 8px;
}

/* A setting reads as a row: what it is, what it is set to, how to change
   it. The bare <select> dropped mid-paragraph read as an afterthought. */
.pick-card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
}
.pick-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
}
.pick-k {
  display: block; font-size: 11.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-2);
}
.pick-v { display: block; font-size: 16.5px; font-weight: 600; margin-top: 4px; }
.pick-note {
  color: var(--text-2); font-size: 13.5px; line-height: 1.5; margin-top: 8px;
}
.pick-select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.pick-select {
  width: 100%; margin-top: 8px; padding: 12px; font: inherit;
  font-size: 16.5px; font-weight: 600; color: var(--text-1);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* The consent checkbox keeps working and keeps its label; only its skin
   changes, so the switch is a real <input> a screen reader still announces. */
.switch {
  position: relative; flex: 0 0 auto;
  /* The visible track stays 46x27; the TARGET is 44 tall, because this is
     the only yes/no on the screen and a thumb is not a mouse pointer
     (DESIGN.md touch-target floor). */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 44px;
}
.switch input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; z-index: 1;
}
.switch-track {
  width: 46px; height: 27px; border-radius: 999px; background: #3A4653;
  border: 1px solid #485766; position: relative; transition: background .18s;
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 21px;
  height: 21px; border-radius: 50%; background: #fff; transition: left .18s;
}
.switch input:checked + .switch-track {
  background: var(--accent); border-color: #4d8cc4;
}
.switch input:checked + .switch-track::after { left: 21px; }
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-track::after { transition: none; }
}

.start-meta {
  color: var(--text-2); font-size: 12.5px; text-align: center;
  margin-top: -4px;
}
.start-trust { color: var(--text-2); font-size: 12.5px; line-height: 1.5; }

/* The card sits in a flex column now; its old standalone margin would
   double the gap above it. The left accent stays: it is how a ticked
   switch is acknowledged without relying on colour alone. */
.brief-start .consent-card { margin-top: 0; }
.start-fine { color: var(--text-3); font-size: 11.5px; line-height: 1.5; }

/* Thai needs 1.7 to keep its marks off the line above; the global
   :lang(th) rule sits earlier in this file, so these later classes were
   quietly winning with 1.5 (design-review 2026-09-11). Restore it where
   this screen sets a line-height of its own. */
:lang(th) .start-title { line-height: 1.5; }
:lang(th) .start-lede,
:lang(th) .pick-note,
:lang(th) .start-trust,
:lang(th) .start-fine { line-height: 1.7; }

/* On a phone the card's own frame is the widest thing competing with the
   content for height; the screen reads the same with a tighter inset and
   brings the action nearer the first view. */
@media (max-width: 480px) {
  .brief-start { padding: 20px 18px 22px; }
  .brief-start .mrz-strip { margin-bottom: 4px; }
}

/* ================= case file: aggregate strip =================
   Four figures as ONE object. As four stacked cards they cost four screens
   of scrolling on a phone, and each carried a verdict word that only
   repeated its own number (redesign 2026-09-11). */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; margin-top: 20px;
}
.stat-cell { background: var(--bg-1); padding: 12px 4px; text-align: center; }
.stat-figure {
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat-cap {
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-2); margin-top: 4px;
}
.stat-cell.sk { display: flex; flex-direction: column; align-items: center; gap: 6px; }
@media (min-width: 700px) {
  .stat-figure { font-size: 24px; }
  .stat-cap { font-size: 11.5px; }
  .stat-cell { padding: 16px 8px; }
}

/* ================= case file: history rows =================
   A record was a 219px card that repeated the file number, a visa chip, a
   turn count, a duration chip, two verdict chips and two buttons; twenty
   of them made 4,600px of scrolling. The row keeps what someone scanning
   their history reads — the score, what it was, when — and opens the same
   detail panel on tap (redesign 2026-09-11). */
.record-row {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-1); overflow: hidden;
}
.record-row + .record-row { margin-top: 8px; }
.record-open {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; min-height: 56px; background: none; border: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.record-open:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.record-pill {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 9px;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: var(--bg-2); color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.record-pill.band-success { background: rgba(63,164,106,.16); color: #8FE0B0; }
.record-pill.band-normal  { background: rgba(46,111,168,.20); color: #9CC6EA; }
.record-pill.band-risky   { background: rgba(201,146,46,.15); color: #E7C16A; }
.record-pill.band-fail    { background: rgba(214,69,69,.14); color: #E58A8A; }
.record-main { flex: 1; min-width: 0; }
.record-main b {
  display: block; font-size: 14.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.record-main span {
  display: block; font-size: 12px; color: var(--text-2); margin-top: 2px;
}
.record-chev { color: var(--text-2); font-size: 18px; line-height: 1; }
.record-row .record-detail { padding: 0 14px 14px; }
.record-row .record-actions { margin-top: 12px; }

/* The coloured edge is the band's SECOND channel — the row also says the
   band in words. Specificity has to beat .record-row's own border
   shorthand, which silently flattened this to the neutral border. */
.record-row.record-success { border-left: 3px solid var(--ok); }
.record-row.record-normal  { border-left: 3px solid var(--accent); }
.record-row.record-risky   { border-left: 3px solid var(--warn); }
.record-row.record-fail    { border-left: 3px solid var(--rec); }

/* ================= result screen =================
   The verdict used to sit BELOW every question, so an applicant scrolled
   past twelve video players to find out how the interview went. Now the
   result leads and each question is a row that opens on tap (redesign
   2026-09-11). */
.result-head {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-2); padding: 18px 16px; margin-bottom: 20px;
}
.result-head .section-title { margin-bottom: 8px; }
.result-overall {
  color: var(--text-1); font-size: 15px; line-height: 1.55; margin-top: 10px;
}
.result-head .footnote { margin-top: 12px; }

.summary-item {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-1); overflow: hidden;
}
.summary-item + .summary-item { margin-top: 8px; }
.summary-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; min-height: 56px; background: none; border: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.summary-head:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.summary-no {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%;
  background: var(--bg-2); color: var(--text-2); font-size: 12px;
  font-weight: 700; display: grid; place-items: center;
}
.summary-q {
  flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.summary-badge { flex: 0 0 auto; }
.summary-badge .rating { margin: 0; }
.summary-chev { color: var(--text-2); font-size: 18px; line-height: 1; }
.summary-body { padding: 0 14px 14px; display: grid; gap: 10px; }
.summary-body video {
  width: 100%; border-radius: var(--radius); background: #000;
}
.summary-main { flex: 1; min-width: 0; display: block; }
.summary-main .summary-q { display: block; white-space: normal; }
.summary-badge { display: block; margin-top: 4px; }
.summary-head { align-items: flex-start; }
.summary-no { margin-top: 2px; }

/* ================= permission sheet =================
   App Review asked twice for the app to NAME the services and ASK before
   sending (5.1.1(i)/5.1.2(i)). A switch with an explanation under it reads
   as description; this reads as a question, and nothing is sent until it
   is answered. */
.sheet {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: flex-end; justify-content: center;
  background: rgba(8, 11, 15, 0.72); padding: 16px;
}
.sheet[hidden] { display: none; }
.sheet-card {
  width: 100%; max-width: 520px; background: var(--bg-1);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 12px;
  max-height: 88vh; overflow-y: auto;
}
.sheet-title { font-size: 19px; font-weight: 650; line-height: 1.3; }
.sheet-body { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.sheet-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.sheet-list li {
  list-style: none; position: relative; padding-left: 18px;
  font-size: 14px; line-height: 1.45;
}
.sheet-list li::before {
  content: ""; position: absolute; left: 4px; top: 8px; width: 5px;
  height: 5px; border-radius: 50%; background: var(--accent);
}
.sheet-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
@media (min-width: 520px) { .sheet { align-items: center; } }