/* Open Sauce Sans (fonte da Flight Class). O .woff2 do pacote 5.3.0 vem corrompido; o .woff é válido. */
@font-face { font-family: "Open Sauce Sans"; font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/open-sauce-sans@5.3.0/files/open-sauce-sans-latin-400-normal.woff") format("woff"); }
@font-face { font-family: "Open Sauce Sans"; font-weight: 600; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/open-sauce-sans@5.3.0/files/open-sauce-sans-latin-600-normal.woff") format("woff"); }
@font-face { font-family: "Open Sauce Sans"; font-weight: 700; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/open-sauce-sans@5.3.0/files/open-sauce-sans-latin-700-normal.woff") format("woff"); }

:root {
  --bg: #000;
  --ink: #fff;
  --muted: rgba(255, 255, 255, 0.64);
  --faint: rgba(255, 255, 255, 0.5); /* 5,3:1 no preto: legível em texto pequeno */
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --card: #0a0d12;
  --card-2: #10151c;
  --blue: #38b6ff;
  --blue-deep: #0098dc;
  --blue-dark: #005aa5;
  --cyan: #1fe0ff;
  --r: 18px;
  --r-sm: 12px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font: "Open Sauce Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --avionic: "B612", "B612 Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100dvh; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
b, strong { font-weight: 700; }

/* ---------- topo ---------- */
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px max(clamp(16px, 6vw, 72px), env(safe-area-inset-left)); background: #000; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.brand-logo { display: block; height: 46px; width: auto; }
.brand-product { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.22); font-weight: 600; font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; }
/* no voo, uma barra só (a do voo, com Sair): a do app sai para a cabine respirar */
body.in-flight .topbar { display: none; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--blue), var(--blue-dark)); display: grid; place-items: center; }
.brand-mark svg { width: 20px; height: 20px; fill: #fff; }
.brand-word { font-weight: 700; font-size: 1.2rem; letter-spacing: 0.01em; white-space: nowrap; }
.brand-by { color: var(--faint); font-size: 0.8rem; border-left: 1px solid var(--line); padding-left: 10px; white-space: nowrap; }
.top-right { display: flex; align-items: center; gap: 16px; }
.lang { display: flex; padding: 3px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.lang button { min-width: 40px; min-height: 32px; padding: 2px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; transition: background 0.25s var(--ease), color 0.2s; }
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { background: var(--blue-deep); color: #fff; }
.fleet { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); }
.fleet button { min-height: 32px; padding: 3px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; transition: background 0.2s, color 0.2s; }
.fleet button:hover { color: var(--ink); }
.fleet button[aria-pressed="true"] { background: var(--ink); color: #000; }
.ring-bg { stroke: var(--line); }
.ring-fg { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset 0.8s ease; }

/* ---------- telas ---------- */
main { min-height: calc(100dvh - var(--top-h, 76px)); }
.screen { display: none; }
.screen.is-active { display: block; animation: enter 0.45s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#screen-hangar, #screen-debrief { max-width: 1180px; margin: 0 auto; padding: 28px 16px 64px; }

.eyebrow { color: var(--blue); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; font-weight: 600; margin: 0 0 12px; }
/* o avião da vez e, ao lado, os que ainda vão chegar */
.hero-ac { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; margin: 0 0 12px; }
.hero-ac .eyebrow { margin: 0; }
.ac-soon { margin: 0; color: var(--faint); font-size: 0.85rem; }
h1 { font-size: clamp(2.4rem, 7vw, 5.2rem); line-height: 1.02; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 18px; }
.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); margin: 0; max-width: 680px; }
h2 { font-size: 1.35rem; font-weight: 600; margin: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }

.pill, .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.pill.you { border-color: var(--blue); color: var(--blue); }
.pill.time { border-color: var(--cyan); color: var(--cyan); }
.badge.on { border-color: var(--blue); color: var(--blue); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; letter-spacing: -0.01em; transition: background 0.2s, border-color 0.2s, transform 0.16s var(--ease), box-shadow 0.3s; }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--blue-deep); color: #fff; }
.btn.primary:hover { background: #14aaee; }
.btn.ghost { background: rgba(255, 255, 255, 0.06); border-color: transparent; color: var(--ink); }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn.big { min-height: 52px; padding: 12px 32px; font-size: 1.05rem; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.chip { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); font-size: 0.88rem; font-weight: 600; }
.chip:hover { border-color: var(--blue); }
.chip[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); }
.chip.ghost { background: transparent; color: var(--muted); }
.icon-btn { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font-size: 0.85rem; font-weight: 600; }
.icon-btn:hover, .icon-btn[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); }
.linkish { background: none; border: 0; padding: 0; color: var(--blue); font-weight: 600; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: #7fd0ff; }
.linkish:disabled { color: var(--muted); text-decoration: none; cursor: default; }

/* ---------- hangar ---------- */
#screen-hangar { max-width: none; margin: 0; padding: 0 0 72px; }
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(340px, 48vh, 480px); padding: clamp(28px, 6vw, 72px); margin: 0 0 8px; border: 0; border-radius: 0; background: #03060a; }
.hero-ac { display: grid; gap: 4px; margin: 0 0 16px; }
.hero .eyebrow { display: flex; align-items: center; gap: 12px; letter-spacing: 0.18em; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; }
.hero .eyebrow::before { content: ""; width: 28px; height: 2px; background: #0098dc; }
.ac-soon { margin: 10px 0 0; color: var(--faint); font-size: 0.78rem; letter-spacing: 0.02em; }
.hero-bg { position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat; transform-origin: 62% 45%; transition: background-image 0.6s; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.74) 36%, rgba(0, 0, 0, 0.12) 78%), linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent 46%); }
.hero-in { max-width: 560px; animation: rise 0.8s var(--ease) both 0.1s; }
.hero h1 { font-size: clamp(2.5rem, 6.2vw, 4.6rem); margin-bottom: 12px; }
.hero-sub { color: var(--muted); font-size: clamp(1.02rem, 1.6vw, 1.2rem); margin: 0 0 26px; max-width: 540px; text-wrap: pretty; }
.hero-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--muted); font-size: 0.85rem; }
.hero-go { display: grid; justify-items: start; gap: 8px; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; color: var(--muted); font-size: 0.85rem; }
.hp-bar { position: relative; width: 168px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.hp-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--blue); transition: width 0.9s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

.rows { display: grid; gap: 40px; }
.rows + .row { margin-top: 40px; }
.row-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.row-n { min-width: 1.6em; font-family: var(--avionic); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; color: var(--blue); }
.row-head :is(h2, h3) { font-size: 1.12rem; font-weight: 600; margin: 0; }
/* hangar: procedimentos normais e não normais em blocos separados, como no QRH */
.group { display: grid; gap: 22px; }
.group + .group { margin-top: 56px; }
.group-head { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.group-head h2 { margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; }
.group-head p { margin: 0; color: var(--muted); font-size: 0.92rem; }
/* fases e panes fechadas: uma linha com o nome, a contagem e a seta (abre com um toque) */
.group.fold { gap: 0; max-width: 1100px; margin: 0; padding: 0 clamp(28px, 6vw, 72px); }
.group.fold + .group.fold { margin-top: 0; }
.fold > summary.group-head { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 0 2px; list-style: none; cursor: pointer; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0; background: transparent; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary.group-head:hover { background: transparent; }
.fold > summary h2 { flex: 1; font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 600; letter-spacing: -0.03em; }
.fold > summary:hover .sop-arrow { border-color: var(--blue); }
.fold[open] > summary .sop-arrow { transform: rotate(-135deg); }
.fold[open] > summary { margin-bottom: 22px; }
.fold-n { color: var(--faint); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
/* degraus da fase: assistir → guiado → sozinho → Prova (feitos com ✓, o da vez em azul) */
/* os degraus da fase: etapas em texto (sem moldura de botão, porque não são para tocar) */
.levels { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 4px; margin: 0 0 4px; padding: 0; list-style: none; }
.levels li { color: var(--faint); font-size: 0.8rem; font-weight: 600; }
.levels li + li::before { content: "›"; margin: 0 8px; color: var(--faint); font-weight: 400; }
.levels li.done { color: var(--muted); }
.levels li.done::after { content: none; }
.levels li.now { color: var(--blue-deep); }
.review-pill { min-height: 36px; padding: 6px 14px; font-size: 0.82rem; }
/* termo tocável (siglas e nomes de controle): sublinhado pontilhado; o cartão sobe embaixo */
button.term { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline dotted; text-decoration-color: currentColor; text-underline-offset: 3px; cursor: help; }
button.term:hover { color: var(--ink); }
.term-card { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 90; display: grid; gap: 4px; width: min(420px, calc(100vw - 32px)); padding: 14px 16px; transform: translateX(-50%); border: 1px solid var(--line-strong); border-radius: 14px; background: #0b1016; box-shadow: 0 24px 60px -20px #000; font-size: 0.92rem; animation: rise 0.25s var(--ease) both; }
.term-card b { color: var(--blue); }
.term-card span { color: var(--ink); line-height: 1.4; }
.term-card small { color: var(--faint); }
.term-card.in-flight { left: 16px; transform: none; }
/* o ⓘ do passo: o porquê e a fonte abrem no mesmo cartão do termo; a área de toque é maior que o desenho */
button.why { position: relative; display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; margin-left: 0.25em; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--faint); vertical-align: -0.16em; cursor: pointer; }
button.why::after { content: ""; position: absolute; inset: -12px; }
button.why svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
button.why:hover, button.why:focus-visible { color: var(--blue); }
button.why:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.row-count { margin-left: auto; font-family: var(--avionic); font-size: 0.78rem; color: var(--faint); }
.row-count.full { color: var(--blue); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; perspective: 1200px; }
.row .cards { display: grid; grid-template-columns: 1fr; gap: 0; perspective: none; }
.row .card3d { aspect-ratio: auto; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 0 4px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0; background: transparent; box-shadow: none; }
.row .card3d:hover { background: rgba(255, 255, 255, 0.04); }
.row .c3-photo, .row .c3-shade { display: none; }
.row .c3-n { position: static; padding: 0; border: 0; background: transparent; color: #0098dc; font-size: 0.85rem; letter-spacing: 0.08em; }
.row .c3-name { position: static; left: auto; right: auto; bottom: auto; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; text-shadow: none; }
.row .c3-done { position: static; margin-left: auto; background: transparent; border: 0; color: var(--faint); }

.card3d { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; display: block; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; color: var(--ink); text-align: left; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: border-color 0.25s, box-shadow 0.4s; animation: cardin 0.6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.card3d:hover { border-color: rgba(255, 255, 255, 0.34); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.9); }
.card3d:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.c3-photo { position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 20%, #12304a, #05080c 70%) center / cover no-repeat; filter: saturate(0.9) brightness(0.9); transition: transform 1.4s var(--ease), filter 0.4s; }
.card3d:hover .c3-photo { transform: scale(1.03); }
.c3-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 28%, rgba(0, 0, 0, 0.88)); }
.c3-n { position: absolute; left: 12px; top: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); font-family: var(--avionic); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; }
.c3-done { position: absolute; right: 12px; top: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--line-strong); color: var(--ink); font-size: 0.75rem; font-weight: 700; }
.c3-name { position: absolute; left: 14px; right: 14px; bottom: 12px; font-size: 1.02rem; font-weight: 600; line-height: 1.2; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); overflow-wrap: anywhere; }
/* sistema que ainda vai chegar: a foto apagada e nada reage ao mouse (não é botão) */
.card3d.is-soon { cursor: default; }
.card3d.is-soon:hover { box-shadow: none; }
.card3d.is-soon .c3-photo { filter: saturate(0.3) brightness(0.55); transform: none; }
.card3d.is-soon .c3-name { color: var(--muted); }
/* fora da demo, sem assinatura: a foto mais escura e a etiqueta da assinatura no canto (abre a assinatura) */
.card3d.is-locked .c3-photo { filter: saturate(0.5) brightness(0.6); }
.card3d.is-locked .c3-name { color: var(--muted); }
.c3-lock { position: absolute; right: 12px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); color: var(--ink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.c3-lock svg { width: 10px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.card3d.is-locked .c3-done { display: none; }
.row .c3-lock { position: static; margin-left: auto; background: transparent; color: var(--faint); }
@keyframes cardin { from { opacity: 0; transform: translateY(16px) scale(0.98); } }

.sop-box { margin-top: 44px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; }
.sop-box summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; list-style: none; cursor: pointer; font-weight: 600; }
.sop-box summary::-webkit-details-marker { display: none; }
.sop-box summary:hover .sop-arrow { border-color: var(--blue); }
.sop-arrow { flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.3s var(--ease), border-color 0.2s; }
.sop-box[open] .sop-arrow { transform: rotate(-135deg); }
.sop-box .builder { padding: 0 20px 20px; animation: rise 0.4s var(--ease) both; }

.builder { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field span { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
textarea, select { width: 100%; background: var(--card-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 12px 14px; resize: vertical; }
textarea:focus, select:focus { border-color: var(--blue); outline: none; }
.drop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); transition: border-color 0.2s, background 0.2s; }
.drop.is-over { border-color: var(--blue); background: rgba(56, 182, 255, 0.06); }
.drop.has-file { border-style: solid; border-color: rgba(56, 182, 255, 0.5); }
.drop-text { color: var(--muted); font-size: 0.88rem; min-width: 0; overflow-wrap: anywhere; }
.builder-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.gen-out:empty { display: none; }
.gen-out { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 6px; justify-items: start; }
.gen-out p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.gen-out p.err { color: var(--ink); border-left: 2px solid var(--ink); padding-left: 10px; }
.gen-out p.ok { color: var(--blue); }
#my-missions { margin-top: 16px; }
/* hangar: o SOP da empresa, os treinos gerados e o rodapé na mesma coluna das listas (fases, panes, sistemas) */
#screen-hangar > .sop-box, #screen-hangar > #my-missions, #screen-hangar > .foot { --pad: clamp(28px, 6vw, 72px); max-width: calc(1100px - 2 * var(--pad)); margin-left: var(--pad); margin-right: var(--pad); }
#screen-hangar > .sop-box { margin-top: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0; background: transparent; }
#screen-hangar > .sop-box > summary { min-height: 64px; padding: 0 2px; color: var(--muted); }
#screen-hangar > .sop-box > summary:hover { color: var(--ink); }
#screen-hangar > .sop-box .builder { padding: 0 2px 24px; }
#my-missions:empty { display: none; }
.foot { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--faint); font-size: 0.85rem; }
.foot p { margin: 0 0 6px; }
.foot p:empty { display: none; }

/* ---------- antes do voo (ficha) ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.66); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s; }
.sheet.is-open .sheet-scrim { opacity: 1; }
.sheet-panel { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line-strong); border-radius: 24px; background: #07090d; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.95); opacity: 0; transform: translateY(20px) scale(0.97); transition: opacity 0.3s, transform 0.45s var(--ease); }
.sheet.is-open .sheet-panel { opacity: 1; transform: none; }
.sheet-photo { position: relative; height: 176px; background: #05080c 50% 50% / 112% auto no-repeat; }
.sheet-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 9, 13, 0.1) 30%, #07090d 98%); }
.sheet-x { position: absolute; right: 12px; top: 12px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); font-size: 1.35rem; line-height: 1; }
.sheet-x:hover { border-color: var(--blue); }
.sheet-body { padding: 10px 20px 20px; }
.sheet-body .eyebrow { margin-bottom: 4px; }
.sheet-body h2 { margin: 0 0 18px; font-size: 1.65rem; line-height: 1.15; }
.sheet-label { margin: 0 0 8px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
.choice button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-2); text-align: left; transition: border-color 0.2s, background 0.25s, transform 0.15s; }
.choice button b { font-size: 1.1rem; }
.choice button span { font-size: 0.78rem; color: var(--muted); }
.choice button:hover:not(:disabled) { border-color: var(--line-strong); }
.choice button:active:not(:disabled) { transform: scale(0.98); }
.choice button[aria-checked="true"] { border-color: var(--blue); background: linear-gradient(160deg, rgba(56, 182, 255, 0.22), rgba(0, 90, 165, 0.1)); }
.choice button[aria-checked="true"] b { color: var(--blue); }
/* os 4 degraus na ficha: em fila no computador, 2 × 2 no celular; feito leva ✓ */
.choice.levels4 { grid-template-columns: repeat(4, 1fr); }
.choice.levels4 button { min-height: 58px; padding: 10px 12px; }
.choice.levels4 button b { font-size: 0.98rem; }
.choice button.done b::after { content: " ✓"; color: var(--muted); font-weight: 600; }
.choice button:disabled { opacity: 0.32; cursor: not-allowed; }
.sheet-note { margin: -8px 0 16px; font-size: 0.82rem; color: var(--muted); }
.sheet-teach { display: grid; gap: 4px; margin: -8px 0 18px; padding: 0; list-style: none; font-size: 0.86rem; color: var(--muted); }
.sheet-teach:empty { display: none; }
.sheet-teach li { position: relative; padding-left: 14px; }
.sheet-teach li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.sheet-mic { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin: 14px 0 0; font-size: 0.8rem; color: var(--faint); text-align: center; }

/* ---------- passe de cabine ---------- */
.pass-open { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 2px; border: 0; background: transparent; font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.pass-open:hover { color: #fff; }
.pass-open .dot { display: none; }
.pass-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pass-open .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.pass-open.is-active { border-color: rgba(56, 182, 255, 0.5); }
.pass-open.is-active .dot { background: var(--blue); }
.pass-open .short { display: none; }
.pass .sheet-body { padding-top: 24px; }
.pass-lead { margin: -10px 0 16px; color: var(--muted); font-size: 0.9rem; }
.pass-mode { margin: 0 0 16px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.pass .choice { margin-bottom: 14px; }
.pass .choice button { min-height: 56px; padding: 10px 14px; }
.choice.plans { grid-template-columns: repeat(2, 1fr); }
.choice.plans button b { font-size: 1rem; }
/* o anual diz quanto sai mais barato que o mensal */
.choice.plans button small { font-size: 0.74rem; font-weight: 600; color: var(--ink); }
.pass-form .field { margin: 0 0 12px; }
.pass-form input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--card-2); }
.pass-form input:focus { border-color: var(--blue); outline: none; }
.pass-form input[aria-invalid="true"] { border-color: var(--ink); }
.pass-small { margin: 4px 0 14px; font-size: 0.78rem; line-height: 1.4; color: var(--faint); }
.pass-where { margin: 10px 0 0; text-align: center; }
.pass-error { margin: 0 0 12px; font-size: 0.86rem; font-weight: 600; }
.pass-error::before { content: "✕ "; }
.pass-text { margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.pass-summary { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); font-weight: 600; }
.pass-actions { display: grid; gap: 8px; margin: 0 0 12px; }
.pass-waiting { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pass-waiting .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: blink 1.4s infinite; }
#pass-back { display: block; margin: 6px auto 0; }
.pass-big { margin: 0 0 6px; font-size: 1.5rem; font-weight: 600; color: var(--blue); }
#pass-result .btn { margin-top: 10px; }
.pass-more { margin: 14px 0 0; text-align: center; }
/* a Prova pediu o passe: o porquê, em cima */
.pass-reason { margin: -6px 0 16px; padding: 10px 12px; border: 1px solid rgba(56, 182, 255, 0.35); border-radius: 12px; background: rgba(56, 182, 255, 0.08); font-size: 0.86rem; line-height: 1.4; }
/* aparelhos da conta (no limite, o aluno escolhe de qual sair) */
.pass-devices { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.pass-devices li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); }
.pass-devices li span { font-weight: 600; color: var(--ink); }
.pass-devices li small { grid-column: 1; color: var(--faint); font-size: 0.78rem; }
.pass-devices li :is(.btn, .linkish) { grid-column: 2; grid-row: 1 / span 2; }
.pass-devices li .btn { min-height: 40px; padding: 6px 14px; font-size: 0.84rem; }
/* quem está na conta, os aparelhos e Sair */
.pass-account { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--muted); }
.pass-account p { margin: 0 0 8px; }
.pass-account summary { cursor: pointer; }
.pass-account details { margin: 0 0 8px; }
.pass-account details[open] summary { margin-bottom: 8px; }
.pass-acc-end { margin: 12px 0 0 !important; }
.linkish.quiet { color: var(--faint); font-weight: 500; }
.linkish.quiet:hover { color: var(--muted); }
/* compra: o resumo antes de pagar e o aceite dos termos */
.pass-deal { margin: 4px 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); }
.pass-deal b { display: block; margin: 0 0 4px; }
.pass-deal p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.pass-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-size: 0.86rem; line-height: 1.45; color: var(--muted); cursor: pointer; }
.pass-form .pass-check input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--blue); cursor: pointer; }
.pass-form .pass-check input[aria-invalid="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
:is(.pass-check, .pass-small) a { color: var(--blue); font-weight: 600; text-underline-offset: 3px; }
.pass-legal { margin: 18px 0 0; text-align: center; font-size: 0.76rem; color: var(--faint); }
.pass-legal a, .foot-legal a { color: var(--faint); text-underline-offset: 3px; }
.pass-legal a:hover, .foot-legal a:hover { color: var(--ink); }
.btn.danger { background: transparent; border-color: rgba(255, 128, 128, 0.55); color: #ff9c9c; }
.btn.danger:hover { border-color: #ff8080; }
#mic-status:empty { display: none; }
#mic-status { flex-basis: 100%; color: var(--muted); }

/* ---------- tutorial dentro da fase ---------- */
.tour { position: fixed; inset: 0; z-index: 70; opacity: 0; transition: opacity 0.3s; }
.tour.is-open { opacity: 1; }
.tour.no-spot { background: rgba(0, 0, 0, 0.62); }
.tour-spot { position: fixed; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.64); pointer-events: none; transition: left 0.5s var(--ease), top 0.5s var(--ease), width 0.5s var(--ease), height 0.5s var(--ease); }
.tour.no-spot .tour-spot { display: none; }
.tour-card { position: fixed; left: 50%; top: 50%; width: min(390px, calc(100vw - 24px)); padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(7, 9, 13, 0.97); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.95); transition: left 0.5s var(--ease), top 0.5s var(--ease); }
.tour-card.in { animation: tourin 0.45s var(--ease); }
@keyframes tourin { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.tour-top { display: flex; align-items: center; gap: 10px; min-height: 22px; margin-bottom: 6px; }
.tour-kicker { flex: 1; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); transition: width 0.35s var(--ease), background 0.3s; }
.tour-dots i.on { width: 18px; background: var(--blue); }
.tour-dots i.done { background: rgba(56, 182, 255, 0.5); }
#tour-skip { color: var(--muted); font-size: 0.82rem; }
.tour-card h3 { margin: 0 0 6px; font-size: 1.22rem; font-weight: 600; line-height: 1.2; }
.tour-card p { margin: 0 0 10px; color: var(--muted); font-size: 0.95rem; }
.tour-list { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.tour-list li { position: relative; padding-left: 16px; font-size: 0.92rem; }
.tour-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.tour-never { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); cursor: pointer; }
.tour-never input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }

/* ---------- debrief ---------- */
.debrief { max-width: 860px; margin: 0 auto; padding: clamp(20px, 4vw, 40px); }
.debrief h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
/* para lembrar: o que fazer, o porquê e a fonte, um item por cartão */
.deb-remember { margin: 0 0 24px; }
.deb-remember ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.deb-remember li { display: grid; gap: 4px; padding: 10px 0; border: 0; border-radius: 0; background: transparent; }
.deb-remember li b { font-weight: 600; }
/* linha a linha: fechado (só para quem quiser) */
.deb-all { margin: 0 0 24px; }
.deb-all > summary { padding: 8px 0; color: var(--muted); font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.deb-all[open] > summary { margin-bottom: 12px; }
.small-title { font-size: 1rem; color: var(--muted); font-weight: 600; margin: 0 0 10px; }
.brief-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }

/* ---------- voo ---------- */
/* no voo a barra do app sai (o Sair fica na barra do voo): a tela do voo ocupa a altura toda */
.flight.is-active { display: grid; grid-template-rows: auto 4px 1fr auto; height: 100dvh; animation: none; }
.hud-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; flex-wrap: wrap; }
.hud-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.hud-title strong { font-size: 1rem; font-weight: 600; margin-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.hud-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.hud-meta > span + span::before { content: "·"; margin-right: 10px; color: var(--faint); }
.hud-meta .you { color: var(--blue); font-weight: 600; }
.hud-meta .time { color: var(--ink); }
.hud-actions { display: flex; gap: 8px; }
.hud-actions .ico { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.timeline { display: flex; gap: 2px; padding: 0 16px; opacity: 0.9; }
.timeline i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); }
/* a vez do piloto só um tom mais clara: o azul fica para o item atual e o acerto */
.timeline i.mine { background: rgba(255, 255, 255, 0.2); }
.timeline i.ai { background: rgba(255, 255, 255, 0.34); }
.timeline i.hit, .timeline i.miss { background: rgba(255, 255, 255, 0.34); }
.timeline i.now { background: var(--blue-deep); }
/* na Prova a linha do tempo mostra só o andamento: acerto e erro ficam para o debriefing */
.flight.prova .timeline i.hit, .flight.prova .timeline i.miss { background: rgba(255, 255, 255, 0.34); }
@keyframes blink { 50% { opacity: 0.35; } }

.stage-wrap { position: relative; overflow: hidden; background: #000; min-height: 0; }
.stage { position: absolute; inset: 0; overflow: hidden; }
.view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s; }
/* a foto que sai some devagar, mas o toque já é da foto nova (senão um toque rápido cai num controle da outra vista) */
.view:not(.is-active) { pointer-events: none; }
.view.is-active { opacity: 1; visibility: visible; }
.view-backdrop { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(30px) brightness(0.32) saturate(1.1); }
.view-box { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 0.95s cubic-bezier(0.2, 0.7, 0.1, 1); will-change: transform; }
.stage.is-free.is-panning, .stage.is-free.is-panning .hs { cursor: grabbing; }
.view-box.no-anim { transition: none; }
.view-img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; opacity: 0; transition: opacity 0.5s; }
.view.is-loaded .view-img { opacity: 1; }
/* cold & dark: a foto desligada fica por cima; ao energizar ela some e as telas "acendem" */
.view-dark { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; user-select: none; -webkit-user-drag: none; transition: opacity 1.6s ease 0.25s; }
.stage.is-dark .view-dark { opacity: 1; transition: opacity 0.8s ease; }
.stage.is-dark .view:not(.dark-ready) .view-img { opacity: 0; }
.stage.is-dark .view-backdrop { filter: blur(30px) brightness(0.2) saturate(1.1); }
.stage.power-instant .view-dark, .stage.power-instant .view-img { transition: none; }
.view-credit { position: absolute; right: 10px; bottom: 8px; font-size: 0.7rem; color: rgba(255, 255, 255, 0.55); text-decoration: none; background: rgba(0, 0, 0, 0.5); padding: 2px 8px; border-radius: 999px; z-index: 3; }
/* com a lista do procedimento aberta ao lado, o aviso da captura vai para a esquerda dela */
@media (min-width: 641px) {
  .stage-wrap:has(.proc:not([hidden])) .view-credit { right: 308px; }
}
.view-error { display: none; position: absolute; inset: 0; place-items: center; text-align: center; padding: 24px; color: var(--muted); }
.view.is-error .view-error { display: grid; }

/* recorte de cada posição do controle (captura do simulador, mesma câmera da vista) */
.patch-layer { position: absolute; inset: 0; pointer-events: none; }
.patch { position: absolute; overflow: hidden; }
/* filtros de cor dos recortes (sem display: none, que desligaria os filtros) */
.patch-fits { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* borda esfumada do tamanho da margem do recorte: a emenda com a foto some */
.patch.has-edge {
  --edge-x: linear-gradient(90deg, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent);
  --edge-y: linear-gradient(180deg, transparent, #000 var(--fy), #000 calc(100% - var(--fy)), transparent);
  -webkit-mask-image: var(--edge-x), var(--edge-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--edge-x), var(--edge-y);
  mask-composite: intersect;
}
.patch[hidden] { display: none; }
.patch img, .patch video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.patch video[hidden] { display: none; }
.view:not(.is-loaded) .patch-layer { visibility: hidden; }
/* PFD desenhado por cima da tela de cada PFD da foto (fases em voo): o quadrado vai aos 4 cantos da tela por uma
   homografia; o que passa da foto fica de fora. O fundo é o preto da tela na foto e o desenho fica com a luz dela */
.pfd-screen-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; visibility: hidden; }
.stage.screens-on .pfd-screen-layer { visibility: visible; }
.stage.is-dark .pfd-screen-layer, .view:not(.is-loaded) .pfd-screen-layer { visibility: hidden; }
.pfd-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #1a1b1e; pointer-events: auto; cursor: pointer; }
.pfd-screen .pfd-svg { width: 100%; height: 100%; opacity: 0.42; }
.pfd-screen .pfd-bg { fill: transparent; }
.view:not(.is-active) .pfd-screen, .stage.map-mode .pfd-screen { pointer-events: none; }
/* tela desenhada sem ponto de toque (o ISIS): o toque passa para a foto */
.pfd-screen.is-passive { pointer-events: none; cursor: default; }
/* ISIS: a luz do ISIS da foto (mais clara que a dos PFDs) */
.pfd-screen .isis-svg { display: block; width: 100%; height: 100%; opacity: 0.7; }
/* E/WD: a luz do E/WD da foto */
.pfd-screen .ewd-svg { display: block; width: 100%; height: 100%; opacity: 0.5; }
.pfd-screen[data-kind="ewd"], .pfd-screen[data-kind="nd"] { background: #17181b; }
/* MCDU: a página de cada lado com a luz do MCDU da foto; a borda escura cobre a beira do vidro (texto antigo) */
.pfd-screen[data-kind="mcdu"] { background: #121316; box-shadow: 0 0 0 12px #121316; }
.mcdu-draw { box-sizing: border-box; width: 100%; height: 100%; padding: 4% 3%; display: grid; grid-template-rows: repeat(14, 1fr); font-family: "B612 Mono", ui-monospace, monospace; font-weight: 700; opacity: 0.68; }
.mcdu-draw .mr { grid-template-columns: repeat(24, 1fr); }
.mcdu-draw .mr span { font-size: 38px; }
.mcdu-draw .mr span.s { font-size: 29px; }
/* ND: a luz do ND da foto */
.pfd-screen .nd-svg { display: block; width: 100%; height: 100%; opacity: 0.48; }
.hs-layer { position: absolute; inset: 0; pointer-events: none; }
.hs { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; border-radius: 50%; padding: 0; background: transparent; border: calc(2px * var(--inv, 1)) solid transparent; transition: border-color 0.2s, background 0.2s; pointer-events: auto; }
.view:not(.is-active) .hs { pointer-events: none; }
.hs.is-screen { transform: none; aspect-ratio: auto; border-radius: 2px; }
/* botão quadrado do painel: o contorno é do tamanho e do formato do botão (cantos levemente arredondados) */
.hs.is-box { transform: none; aspect-ratio: auto; border-radius: 14%; }
.hs.is-screen.is-target { background: transparent; }
/* controle de formato próprio (faixa do AP DISC, manche, roda do trim): o contorno é o desenho dele */
.hs.is-shape { transform: none; aspect-ratio: auto; }
.hs.is-poly, .hs.is-poly.is-target { border-color: transparent; background: transparent; box-shadow: none; border-radius: 0; }
/* o toque vale dentro do contorno, não no retângulo em volta (o AP DISC fica junto da cabeça do manche) */
.hs.is-poly { pointer-events: none; }
.hs-poly { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hs-poly polygon { fill: transparent; stroke: transparent; stroke-width: 2; pointer-events: visibleFill; cursor: pointer; }
/* o contorno liga o toque por conta própria: na vista escondida (só transparente) e no modo de marcar pontos ele
   desliga junto com o resto */
.view:not(.is-active) .hs-poly polygon, .stage.map-mode .hs-poly polygon { pointer-events: none; }
.hs.is-poly:hover .hs-poly polygon, .hs.is-poly:focus-visible .hs-poly polygon { stroke: rgba(56, 182, 255, 0.7); fill: rgba(56, 182, 255, 0.08); }
.hs.is-target .hs-poly polygon, .hs.is-you .hs-poly polygon, .hs.is-ai .hs-poly polygon { stroke: #0098dc; fill: rgba(0, 152, 220, 0.1); }
/* manetes, speed brake e flaps: o ponto acompanha o punho quando a alavanca anda */
.hs.is-mover { transition: border-color 0.2s, background 0.2s, left 0.6s var(--ease-out), top 0.6s var(--ease-out); }
.hs.is-poly.is-you::before { display: none; }
.stage.is-panning .hs-poly polygon { cursor: grabbing; }
.hs-tag { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, calc(-6px * var(--inv, 1))); white-space: nowrap; font-size: calc(13px * var(--inv, 1)); font-weight: 600; padding: calc(3px * var(--inv, 1)) calc(10px * var(--inv, 1)); border-radius: 999px; background: rgba(0, 0, 0, 0.82); color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.2s; border: calc(1px * var(--inv, 1)) solid var(--line-strong); }
.hs:hover, .hs:focus-visible { border-color: rgba(56, 182, 255, 0.7); background: rgba(56, 182, 255, 0.08); }
.hs:hover .hs-tag, .hs:focus-visible .hs-tag { opacity: 1; }
.hs::after { content: ""; position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); width: calc(6px * var(--inv, 1)); height: calc(6px * var(--inv, 1)); border-radius: 50%; transform: translate(-50%, -50%); background: rgba(56, 182, 255, 0.85); opacity: 0; transition: opacity 0.2s; }
/* Prova: os pontos só sugerem onde dá para tocar, bem de leve (a cabine fica limpa) */
.stage.hint-all .hs::after { opacity: 0.3; }
.hs.is-target::after { opacity: 0; }
.hs.is-target { border-color: var(--blue); background: rgba(56, 182, 255, 0.1); box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.3); }
.hs.is-target .hs-tag { opacity: 1; border-color: var(--blue); }
/* com um controle pedido, só o nome dele aparece (fora do mapinha): nada de nomes um em cima do outro */
.stage:not(.map-mode):has(.hs.is-target) .hs:not(.is-target) .hs-tag { opacity: 0; }
.hs.is-ai { border-color: rgba(255, 255, 255, 0.85); animation: flash 2.2s ease; }
.hs.is-ai .hs-tag, .hs.is-you .hs-tag { opacity: 1; }
.hs.is-you { border-color: #fff; animation: flash 2.2s ease; }
@keyframes flash { 0% { background: rgba(255, 255, 255, 0.22); } 100% { background: transparent; } }
/* contorno próprio (tela, manche, faixa do AP DISC): o destaque de quem mexeu fica no desenho, não no retângulo em volta */
.hs.is-poly.is-ai, .hs.is-poly.is-you { border-color: transparent; animation: none; }
.hs.is-poly.is-ai .hs-poly polygon, .hs.is-poly.is-you .hs-poly polygon { animation: polyflash 2.2s ease; }
@keyframes polyflash { 0% { fill: rgba(255, 255, 255, 0.22); } 100% { fill: rgba(0, 152, 220, 0.1); } }
@media (prefers-reduced-motion: reduce) { .hs.is-poly.is-ai .hs-poly polygon, .hs.is-poly.is-you .hs-poly polygon { animation: none; } }
.stage.map-mode { cursor: crosshair; }
.stage.map-mode .hs { border-color: rgba(31, 224, 255, 0.6); pointer-events: none; }
.stage.map-mode .hs .hs-tag { opacity: 1; }

.view-tabs { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px); display: flex; gap: 6px; z-index: 5; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.view-tabs::-webkit-scrollbar { display: none; }
/* abas leves: cada uma é um vidro pequeno sobre a foto, sem moldura em volta de todas */
.view-tabs { gap: 4px; }
.view-tabs button { flex: none; white-space: nowrap; min-height: 34px; padding: 4px 14px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, 0.38); backdrop-filter: blur(16px); color: rgba(255, 255, 255, 0.78); font-size: 0.78rem; font-weight: 600; letter-spacing: -0.01em; transition: background 0.2s, color 0.2s; }
.view-tabs button:hover { color: var(--ink); background: rgba(0, 0, 0, 0.55); }
.view-tabs button[aria-pressed="true"] { background: var(--blue-deep); color: #fff; }

.pfd { position: absolute; left: 12px; bottom: 12px; width: clamp(168px, 17vw, 236px); z-index: 4; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 12px 28px -16px #000; }
.pfd { transition: opacity 0.25s ease, visibility 0.25s, box-shadow 0.2s, border-color 0.2s; }
/* o PFD desenhado também confere o PFD: foco do teclado e o anel da vez, como os pontos da foto */
.pfd[tabindex="0"] { cursor: pointer; }
.pfd:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pfd.is-target { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(56, 182, 255, 0.9), 0 0 0 7px rgba(56, 182, 255, 0.22), 0 12px 28px -16px #000; }
/* controle da vez ou luz MASTER atrás do PFD: ele some quase todo e deixa tocar no que está embaixo */
.pfd.is-faded { opacity: 0.12; pointer-events: none; }
/* o PFD da foto já está grande na tela: a cópia do canto sai inteira (não fica um fantasma por cima dele) */
.pfd.is-dup { opacity: 0; visibility: hidden; pointer-events: none; }

.lens-host { position: absolute; z-index: 6; width: min(440px, calc(100vw - 24px)); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.25s, transform 0.25s, left 0.45s var(--ease), top 0.45s var(--ease); }
.lens-host.docked { left: auto; top: auto; right: 12px; bottom: 12px; }
.lens-host.docked.dock-left { right: auto; left: 12px; }
.lens-host.is-open { opacity: 1; transform: none; pointer-events: auto; }
.sel { padding: 14px; border-radius: 22px; background: rgba(12, 14, 18, 0.72); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(22px) saturate(1.2); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.85); }
.sel-head { display: flex; flex-direction: column; gap: 1px; margin-bottom: 10px; }
.sel-actor { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.sel-actor:empty { display: none; }
.sel-name { font-size: 0.92rem; font-weight: 600; line-height: 1.25; }
.sel-opts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
.sel-opts.many { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.sel-opt { min-height: 44px; padding: 6px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--avionic); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; transition: background 0.18s, color 0.18s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.sel-opts:has(.sel-shot) { display: flex; gap: 12px; padding: 0; border-radius: 0; background: transparent; }
.sel-opts:has(.sel-shot) .sel-pill { display: none; }
.sel-opt:has(.sel-shot) { min-height: 0; padding: 14px 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); }
.sel-opt:has(.sel-shot)[aria-pressed="true"] { background: rgba(0, 152, 220, 0.16); box-shadow: inset 0 0 0 2px #0098dc; color: #fff; }
.sel-shot { display: block; width: auto; height: 112px; max-width: 100%; object-fit: contain; background: transparent; border-radius: 0; }
.sel-opt:not(:disabled):hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.sel-opt[aria-pressed="true"] { background: var(--ink); color: #000; }
.sel.is-static .sel-opt { cursor: default; }
.sel-opt:disabled { opacity: 1; }
.sel.is-checked .sel-opt[aria-pressed="true"] { background: var(--blue); }
.sel.is-done { border-color: rgba(56, 182, 255, 0.6); }
.sel.is-done .sel-opt[aria-pressed="true"] { background: var(--blue); }
.sel.is-reject { animation: reject 0.4s ease; }
@keyframes reject { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.sel-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.76rem; color: var(--faint); }
.sel-close { display: block; margin: 8px 0 0 auto; font-size: 0.76rem; }
.sel-note { margin: 8px 0 0; font-size: 0.7rem; color: var(--faint); }

.alert { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.88); border: 1px solid var(--line-strong); font-family: var(--avionic); font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.alert .master { padding: 6px 10px; border-radius: 6px; font-size: 0.78rem; letter-spacing: 0.06em; animation: blink 0.6s infinite; }
.alert.warning .master { background: #e01b1b; color: #fff; }
.alert.warning #alert-text { color: #ff4a4a; }
.alert.caution .master { background: #f29a00; color: #000; }
.alert.caution #alert-text { color: #ffae2b; }
/* MASTER apertado: som e luz param, o título do ECAM fica enquanto durar a pane */
.alert.is-quiet .master { display: none; }
.alert.is-quiet { padding-left: 16px; }
/* luz MASTER WARN / MASTER CAUT do glareshield, por cima da foto (apagada, vale o botão da foto) */
.lamp-layer { position: absolute; inset: 0; pointer-events: none; }
.mlamp { position: absolute; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0.2em; font-family: var(--avionic); font-weight: 700; line-height: 1; letter-spacing: 0.04em; border-radius: 1px; }
.mlamp.is-on { display: flex; }
.mlamp.warn { color: #ff3b2e; background: radial-gradient(circle, rgba(255, 50, 30, 0.3), rgba(40, 0, 0, 0.6) 72%); text-shadow: 0 0 1px #ff3b2e, 0 0 3px rgba(255, 60, 40, 0.9); box-shadow: 0 0 6px rgba(255, 40, 20, 0.5); animation: lampflash 0.5s steps(1) infinite; }
.mlamp.caut { color: #ffb21e; background: radial-gradient(circle, rgba(255, 170, 20, 0.28), rgba(40, 25, 0, 0.6) 72%); text-shadow: 0 0 1px #ffb21e, 0 0 3px rgba(255, 170, 30, 0.9); box-shadow: 0 0 6px rgba(255, 160, 20, 0.45); }
@keyframes lampflash { 50% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .mlamp.warn { animation: none; } }

.pause-cover { position: absolute; inset: 0; z-index: 9; display: grid; place-content: center; gap: 16px; text-align: center; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(6px); }
.pause-cover[hidden] { display: none; }
.pause-cover p { font-size: 2rem; font-weight: 600; margin: 0; }
.mapper { position: absolute; right: 12px; top: 12px; width: 280px; z-index: 8; display: grid; gap: 8px; padding: 14px; }
.mapper[hidden] { display: none; }
.mapper p { margin: 0; }
.mapper textarea { font-family: var(--avionic); font-size: 0.75rem; }

.comms { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #050608; min-height: 116px; }
.line { min-width: 0; }
.who { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.who-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.who.talking .who-dot { background: var(--ink); animation: blink 1s ease-in-out infinite; }
.who.you { color: var(--blue); }
.who.you .who-dot { background: var(--blue); }
.who.missed { color: var(--ink); }
.callout { margin: 0; font-size: clamp(1.2rem, 2.3vw, 1.75rem); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.callout .q { color: var(--blue); }
.hint { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.hint:empty { display: none; }
.feedback { margin: 6px 0 0; font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.feedback:empty { display: none; }
.feedback.ok { color: var(--blue); }
.feedback.bad { color: var(--ink); }
/* o que o passo pede (callout e ação) e o que já foi feito */
.parts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.parts[hidden] { display: none; }
.parts li { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.parts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--faint); }
.parts li.done { color: var(--ink); border-color: var(--blue); }
.parts li.done::before { content: ""; background: var(--blue); border-color: var(--blue); }
.go-control { min-height: 36px; padding: 4px 14px; font-size: 0.86rem; }
.go-control[hidden] { display: none; }
kbd { font: 600 0.68rem/1 var(--font); padding: 2px 5px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); }
/* com teclado e mouse, o número de cada resposta vira atalho */
@media (hover: hover) and (pointer: fine) {
  .answers .chip[data-key]::before { content: attr(data-key); display: inline-block; margin-right: 8px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line-strong); font-size: 0.7rem; color: var(--muted); }
}
@media (hover: none) { .go-control kbd { display: none; } }
.side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 0; }
.answers { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 460px; }
.answers:empty { display: none; }
.answers .label { font-size: 0.76rem; color: var(--faint); align-self: center; margin-right: 2px; }
.mic { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--faint); max-width: 320px; }
.mic-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.mic.listening .mic-dot { background: var(--blue); animation: blink 1.4s infinite; }
.mic.paused .mic-dot { background: var(--muted); }
.mic .heard { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.comms.your-turn { box-shadow: inset 3px 0 0 var(--blue); }
/* A faixa de fala tem altura fixa: a foto da cabine não muda de tamanho de um passo para o outro.
   O texto mais longo do roteiro cabe nela: fala de até 91 caracteres (2 linhas) e dica de até 160 (2 linhas). */
.comms { position: relative; height: 210px; min-height: 0; align-items: start; overflow: hidden; }
.callout { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.callout.long { font-size: clamp(1.05rem, 1.6vw, 1.22rem); }
.hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hint:empty { display: none; }
.feedback { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parts { flex-wrap: nowrap; overflow: hidden; }
.side { max-height: 100%; overflow: hidden; }
.answers .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* três respostas longas + o microfone cabem na faixa de altura fixa */
.comms .answers { gap: 4px; max-width: 560px; }
.comms .answers .chip { min-height: 32px; padding: 4px 12px; font-size: 0.82rem; }
/* o que falta (falar/mexer) e o retorno dividem a última linha: tudo cabe nos 172 px */
.comms .line { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
.comms .line > .who, .comms .line > .callout, .comms .line > .hint { grid-column: 1 / -1; }
.comms .who { margin-bottom: 2px; }
.comms .hint { line-height: 1.35; }
.comms .expect, .comms .src-line { margin: 2px 0 0; font-size: 0.78rem; line-height: 1.35; }
.comms .expect { color: var(--ink); white-space: pre-line; }
.comms .src-line { color: var(--faint); letter-spacing: 0.03em; }
.comms .line > .expect, .comms .line > .src-line { grid-column: 1 / -1; }
.comms .parts, .comms .feedback { margin: 6px 0 0; max-width: 100%; }
.turn-clock { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: rgba(255, 255, 255, 0.28); transform-origin: left center; animation: turn-clock var(--dur, 15s) linear forwards; pointer-events: none; }
.turn-clock[hidden] { display: none; }
.is-paused .turn-clock { animation-play-state: paused; }
@keyframes turn-clock { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.comms.missed { box-shadow: inset 3px 0 0 var(--ink); }

/* ---------- debrief ---------- */
.deb-head { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.deb-head h1 { margin-bottom: 6px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 28px; }
.stat { padding: 0; border: 0; background: transparent; }
.stat b { display: block; font-size: 1.2rem; font-weight: 600; font-family: var(--avionic); color: var(--ink); }
.stat span { font-size: 0.8rem; color: var(--muted); }
.deb-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 6px; }
.deb-list li { display: grid; grid-template-columns: 22px 64px 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.deb-list li.ai { opacity: 0.55; }
.deb-list .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--muted); align-self: center; }
.deb-list li.hit .dot { background: var(--blue); border-color: var(--blue); }
.deb-list li.ai .dot { border-color: var(--faint); border-style: dotted; }
.deb-list .who { font-size: 0.75rem; color: var(--faint); font-weight: 600; }
.deb-list .what b { font-weight: 600; }
.deb-list .what small { display: block; color: var(--muted); font-size: 0.8rem; }
.deb-list .pts { font-family: var(--avionic); color: var(--blue); font-weight: 700; }
.deb-list li.miss .pts { color: var(--muted); }
/* voo inteiro: o debriefing de cada fase abre tocando na linha da fase */
.deb-phases { display: grid; gap: 8px; margin: 0 0 28px; }
.deb-phase { border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); }
.deb-phase summary { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto auto 1em; gap: 12px; align-items: center; min-height: 52px; padding: 10px 14px; cursor: pointer; list-style: none; }
.deb-phase summary::-webkit-details-marker { display: none; }
.deb-phase summary::after { content: "▾"; color: var(--faint); }
.deb-phase[open] summary::after { content: "▴"; }
.deb-phase summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 12px; }
.dp-n { font-family: var(--avionic); font-size: 0.85rem; font-weight: 700; color: var(--blue); }
.dp-name { font-weight: 600; }
.dp-name small { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 600; color: var(--blue); }
.dp-role { font-size: 0.75rem; font-weight: 600; color: var(--faint); }
.dp-score { font-family: var(--avionic); font-weight: 700; }
.deb-phase .deb-list { margin: 0; padding: 0 10px 10px; }

/* voo inteiro: entre uma fase e a outra */
.chain { max-width: 720px; margin: clamp(16px, 6vh, 64px) auto; padding: 0; overflow: hidden; }
.chain-photo { height: clamp(140px, 26vh, 240px); background: #05080c 50% 50% / cover no-repeat; position: relative; }
.chain-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 40%, var(--card) 98%); }
.chain-body { padding: 4px clamp(20px, 4vw, 36px) clamp(20px, 4vw, 32px); }
.chain-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--muted); font-size: 0.85rem; }
.chain-progress .hp-bar { flex: 1; max-width: 240px; }
.chain-done { margin: 0 0 6px; color: var(--muted); font-size: 0.9rem; }
.chain h1 { margin: 0 0 10px; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.1; }
.chain .lead { margin-bottom: 24px; font-size: 1rem; }

/* ---------- toasts ---------- */
.toasts { position: fixed; top: 136px; right: 16px; z-index: 60; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast { padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; font-weight: 600; background: #10151c; border: 1px solid var(--line-strong); animation: toast 0.3s ease both; }
.toast.ok { background: var(--blue-deep); color: #fff; border-color: transparent; }
.toast.bad { background: #000; border: 1.5px solid #fff; }
.toast.out { animation: toastout 0.3s ease both; }
@keyframes toast { from { opacity: 0; transform: translateY(-8px); } }
@keyframes toastout { to { opacity: 0; transform: translateY(-8px); } }

/* ---------- MCDU: preparar e conferir o FMS ---------- */
.fms { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(6px); }
.fms-panel { width: min(1120px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 18px 20px 20px; border: 1px solid var(--line-strong); border-radius: 20px; background: #07090d; }
.fms-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.fms-head .eyebrow { margin-bottom: 2px; }
.fms-head h2 { font-size: 1.3rem; }
.fms-body { display: grid; grid-template-columns: minmax(320px, 430px) 1fr; gap: 22px; align-items: start; }
.fms-side { display: grid; gap: 14px; min-width: 0; }
.fms-task h3, .fms-docs h3 { margin: 0 0 8px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.fms-task ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fms-task li { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: var(--card-2); font-size: 0.86rem; color: var(--muted); }
.fms-task li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--faint); transform: translateY(1px); }
.fms-task li.done { color: var(--ink); }
.fms-task li.done::before { background: var(--blue); border-color: var(--blue); }
.fms-tabs { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 999px; }
.fms-tabs button { min-height: 30px; padding: 2px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.fms-tabs button[aria-selected="true"] { background: var(--ink); color: #000; }
/* documento impresso (OFP, loadsheet do ACARS): colunas fixas, sem quebrar; rola de lado se faltar espaço */
.fms-doc { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #0b0d10; font-family: "B612 Mono", var(--avionic); font-size: 0.78rem; line-height: 1.5; color: #dfe6ee; white-space: pre; overflow-x: auto; max-height: 62vh; overflow-y: auto; }
.fms-doc b { color: #fff; }
.fms-doc .doc-note { display: block; margin-top: 10px; white-space: normal; color: var(--faint); font-family: var(--font); font-size: 0.72rem; }
.fms-note { margin: -6px 0 10px; font-size: 0.82rem; color: var(--muted); }
.fms-note:empty { display: none; }
.fms-note.bad { color: var(--ink); }
.fms-count { letter-spacing: 0.06em; color: var(--muted); }
.fms-peek { display: none; }

.mcdu { --rowh: 21px; --big: 17px; --small: 12.5px; max-width: 430px; margin: 0 auto; padding: 14px 12px 12px; border: 1px solid #3a4148; border-radius: 14px; background: linear-gradient(#2b3035, #22262a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 48px -24px #000; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.mcdu-head { display: grid; grid-template-columns: 26px auto 26px; justify-content: center; gap: 8px; }
.mcdu-lsk { display: grid; grid-template-rows: repeat(14, var(--rowh)); padding: 10px 0; }
.mcdu-lsk button { grid-row: span 1; align-self: center; height: 16px; padding: 0; border: 1px solid #4a525a; border-radius: 3px; background: linear-gradient(#3a4148, #2a3036); box-shadow: 0 1px 0 #0e1013; }
.mcdu-lsk button:nth-child(1) { grid-row: 3; } .mcdu-lsk button:nth-child(2) { grid-row: 5; } .mcdu-lsk button:nth-child(3) { grid-row: 7; }
.mcdu-lsk button:nth-child(4) { grid-row: 9; } .mcdu-lsk button:nth-child(5) { grid-row: 11; } .mcdu-lsk button:nth-child(6) { grid-row: 13; }
.mcdu-lsk button:active, .mcdu-fn button:active, .mcdu-lower button:active { transform: translateY(1px); box-shadow: none; }
.mcdu-fn { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 12px 4px 8px; }
.mcdu-fn button, .mcdu-lower button { min-height: 34px; padding: 2px 3px; border: 1px solid #454c54; border-radius: 5px; background: linear-gradient(#262a2f, #1b1f23); color: #eef2f5; font: 700 0.6rem/1.1 var(--font); letter-spacing: 0.02em; box-shadow: 0 2px 0 #0b0d0f, inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.mcdu-fn button:hover, .mcdu-lower button:hover, .mcdu-lsk button:hover { border-color: #6b747d; }
.mcdu-lower { display: grid; grid-template-columns: 1fr 1.55fr; gap: 10px; margin: 0 4px; }
.mcdu-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-content: start; }
.mcdu-num { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 6px; }
.mcdu-alpha { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; align-content: start; }
.mcdu-num button, .mcdu-alpha button { font-size: 0.82rem; min-height: 32px; }
.mcdu-lower button[data-k="PREV"], .mcdu-lower button[data-k="NEXT"], .mcdu-lower button[data-k="UP"], .mcdu-lower button[data-k="DOWN"] { font-size: 1rem; }
.mcdu button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* procedimento da fase: quem faz cada item (PF/PM), o atual marcado, ✓ e ✕ no que passou */
.proc { position: absolute; z-index: 5; right: 12px; top: 108px; bottom: 12px; width: 284px; display: flex; flex-direction: column; border-radius: 12px; background: rgba(4, 6, 9, 0.66); backdrop-filter: blur(14px); }
.proc.is-both { width: min(560px, calc(100% - 24px)); }
.proc[hidden] { display: none; }
.proc-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 0 12px; }
.proc-head { margin: 0; padding: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.proc-switch { display: flex; gap: 4px; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.proc-switch button { border: 0; border-radius: 999px; padding: 4px 10px; background: transparent; color: var(--muted); font: 600 0.72rem/1 var(--font); cursor: pointer; }
.proc-switch button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.proc-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.proc-seat { margin: 4px 12px 6px; font-size: 0.72rem; line-height: 1.35; color: var(--faint); }
.proc-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 8px 8px; }
.proc-split[hidden] { display: none; }
.proc-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.proc-col-h { margin: 0 0 4px; padding: 0 6px; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.proc-col.is-you .proc-col-h { color: var(--blue); }
.proc-col .proc-list { padding-bottom: 4px; }
.sheet-note { margin: 8px 0 0; font-size: 0.78rem; line-height: 1.4; color: var(--muted); }
.proc-list { flex: 1; min-height: 0; margin: 0; padding: 0 6px 8px; list-style: none; overflow: auto; }
.proc-list li { display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding: 6px 8px; border-radius: 6px; font-size: 0.82rem; line-height: 1.42; color: var(--faint); }
.proc-list li.mine { color: var(--ink); }
.proc-list li.past { opacity: 0.55; }
.proc-list li.now { background: rgba(56, 182, 255, 0.14); box-shadow: inset 2px 0 0 var(--blue); }
.proc-who { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
/* Prova e pane surpresa: no lugar dos próximos itens, só o aviso */
.proc-list li.more { display: block; padding-left: 52px; color: var(--faint); font-style: italic; }
.proc-list li.mine .proc-who { color: var(--blue); }
.proc-list li.ok .proc-who::after, .proc-list li.miss .proc-who::after { content: none; }
.proc-what b { font-weight: 600; color: var(--ink); }

/* cartão do checklist (CL) como o impresso: papel claro, letra preta, pontilhado até a resposta */
.cl { position: absolute; z-index: 6; left: 12px; top: 60px; width: 300px; max-height: calc(100% - 72px); display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); font-family: var(--avionic); }
.cl[hidden] { display: none; }
.cl-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; }
.cl-title { flex: 1; min-width: 0; }
.cl-note:empty { display: none; }
.cl-toggle { flex: none; padding: 4px 10px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 0.68rem; letter-spacing: 0.04em; cursor: pointer; opacity: 0.8; }
.cl-toggle:hover { opacity: 1; }
.cl-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cl-list { flex: 1; min-height: 0; margin: 0; padding: 6px 8px 10px; list-style: none; overflow: auto; }
.cl.is-collapsed .cl-list { display: none; }
.cl-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px; padding: 3px 4px; border-radius: 4px; font-size: 0.74rem; line-height: 1.35; }
.cl-dots { min-width: 12px; border-bottom: 1px dotted currentColor; opacity: 0.5; transform: translateY(-3px); }
.cl.paper { background: #f3f0e6; color: #111; }
.cl.paper .cl-head { background: #111; color: #f3f0e6; }
.cl.paper li.done { color: rgba(0, 0, 0, 0.42); }
.cl.paper li.now { background: rgba(56, 182, 255, 0.22); box-shadow: inset 3px 0 0 #1f8fd6; }
.cl.paper li.cl-line { display: block; height: 0; margin: 6px 2px; padding: 0; border-top: 2px solid #111; border-radius: 0; }
/* E/WD do ECAM: título vermelho sublinhado, ação em azul (a fazer) e em branco (feita) */
.cl.ecam { background: #000; color: #fff; border: 1px solid #2a2a2a; }
.cl.ecam .cl-head { color: #ff3b2e; }
.cl.ecam .cl-title { text-decoration: underline; text-underline-offset: 3px; }
.cl.ecam .cl-note { color: #ff3b2e; }
.cl.ecam .cl-toggle { color: #bbb; }
.cl.ecam .cl-list li { color: #2fd0ff; }
.cl.ecam .cl-list li.done { color: #fff; }
.cl.ecam .cl-list li.ec-cond { display: block; color: #fff; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  /* uma coluna: fala, dica e as respostas numa linha que rola de lado (a altura não muda) */
  .comms { grid-template-columns: 1fr; align-items: start; gap: 10px; height: 268px; }
  .side { align-items: flex-start; max-width: 100%; }
  .answers { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .answers .chip { flex: none; max-width: 80vw; }
  /* o retorno (microfone, "ainda falta") entra no lugar da dica enquanto aparece: até 2 linhas, sem cortar */
  .comms:has(.feedback:not(:empty)) .hint { display: none; }
  .comms:has(.feedback:not(:empty)) .parts { order: 1; }
  .comms .feedback:not(:empty) { grid-column: 1 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }
}
@media (max-width: 900px) {
  .fms { padding: 0; }
  .fms-panel { min-height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; padding: 14px; }
  .fms-body { grid-template-columns: minmax(300px, 400px) minmax(240px, 1fr); gap: 16px; }
}
/* celular: o MCDU inteiro na tela; tarefa e documentos abrem pela linha de cima */
@media (max-width: 720px) {
  .fms-head { align-items: center; margin-bottom: 10px; }
  .fms-head h2 { font-size: 1.05rem; }
  .fms-head .btn { flex: none; min-height: 40px; padding: 0 14px; font-size: 0.86rem; white-space: nowrap; }
  .fms-peek { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); color: var(--ink); font: 600 0.82rem/1.3 var(--font); text-align: left; }
  .fms-peek-cue::before { content: "▾"; color: var(--muted); }
  .fms-peek[aria-expanded="true"] .fms-peek-cue::before { content: "▴"; }
  .fms-peek:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .fms-body { display: flex; flex-direction: column; gap: 12px; }
  .fms-side { order: -1; display: none; }
  .fms-panel.show-side .fms-side { display: grid; }
  .mcdu { --rowh: 17px; --big: 15px; --small: 11px; padding: 10px 8px; }
  .mcdu-fn { margin: 10px 2px 6px; }
  .mcdu-fn button, .mcdu-lower button, .mcdu-num button, .mcdu-alpha button { min-height: 30px; }
}
@media (max-width: 640px) {
  .choice.levels4 { grid-template-columns: 1fr 1fr; }
  /* debriefing no celular: o próximo passo em cima, na largura toda (perto do polegar) */
  .debrief .brief-actions { flex-direction: column-reverse; }
  .debrief .brief-actions .btn { width: 100%; }
  .brand-by { display: none; }
  .brand-logo { height: 34px; }
  .brand { gap: 9px; }
  .brand-product { padding-left: 9px; font-size: 0.92rem; }
  .top-right { gap: 10px; }
  .pass-open { padding: 4px 12px; }
  .pass-open .long { display: none; }
  .pass-open .short { display: inline; }
  .pass-devices li { grid-template-columns: minmax(0, 1fr); }
  .pass-devices li .btn { grid-column: 1; grid-row: auto; width: 100%; margin-top: 6px; }
  .pass-devices li .linkish { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
  /* voo inteiro no celular: os dois botões na largura toda, o Seguir embaixo (perto do polegar) */
  .chain .brief-actions { flex-direction: column; }
  .chain .brief-actions .btn { width: 100%; }
  .lang button { min-width: 32px; padding: 2px 6px; }
  #screen-hangar, #screen-debrief { padding-top: 16px; }
  .hero { min-height: 440px; padding: 22px; border-radius: 22px; margin-bottom: 32px; }
  .hero::before { background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 8%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.2)); }
  .hero .btn.big { width: 100%; }
  .rows { gap: 30px; }
  .rows + .row { margin-top: 30px; }
  /* no celular cada bloco é uma fileira que desliza para o lado */
  .cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; }
  .row .cards { grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .cards::-webkit-scrollbar { display: none; }
  .card3d { scroll-snap-align: start; }
  .sheet { place-items: end center; padding: 0; }
  .sheet-panel { width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(48px); }
  .sheet-photo { height: 150px; }
  .tour-card { padding: 14px 16px; }
  .deb-head { flex-direction: column; align-items: flex-start; }
  /* quem fez o item (PF/PM/Bruno) continua visível: vai numa linha pequena em cima */
  .deb-list li { grid-template-columns: 18px 1fr auto; grid-template-areas: "dot who pts" "dot what pts"; row-gap: 2px; }
  .deb-list .dot { grid-area: dot; }
  .deb-list .who { grid-area: who; }
  .deb-list .what { grid-area: what; }
  .deb-list .pts { grid-area: pts; }
  /* barra do voo numa faixa só: fase e andamento à esquerda, os três botões como ícones à direita */
  .hud-top { flex-wrap: nowrap; gap: 8px; padding: 6px 6px 6px 14px; }
  .hud-title { flex: 1; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 1px; }
  .hud-title strong { max-width: 100%; margin: 0; font-size: 0.95rem; }
  .hud-meta { gap: 6px; max-width: 100%; overflow: hidden; font-size: 0.74rem; }
  .hud-meta > span + span::before { margin-right: 6px; }
  .view-credit { right: 8px; bottom: 6px; padding: 1px 7px; font-size: 0.6rem; }
  .pfd { width: 150px; left: 8px; bottom: 8px; }
  .lens-host, .lens-host.docked, .lens-host.docked.dock-left { width: auto; left: 8px; right: 8px; bottom: 8px; top: auto; }
  /* na corrida o PFD fica embaixo: o seletor sobe para não cobrir velocidade e FMA */
  .pfd:not([hidden]) ~ .lens-host.docked { top: 52px; bottom: auto; }
  .alert { top: 52px; max-width: calc(100% - 16px); }
  .view-tabs { left: 8px; top: 8px; max-width: calc(100% - 16px); }
  /* celular: mapinha menor no canto e a lista do procedimento por cima da cabine quando aberta */
  .proc, .proc.is-both { left: 8px; right: 8px; top: 52px; bottom: 8px; width: auto; }
  /* cartão do checklist embaixo, sem cobrir a parte de cima da cabine; recolhe pelo botão */
  .cl { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 44%; }
  .view-tabs button { min-height: 30px; padding: 2px 10px; font-size: 0.75rem; }
  .comms { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); min-height: 0; }
  /* fala no alto e o que se toca no pé da tela (polegar); o microfone sobe para a linha de quem fala.
     A faixa continua com altura fixa (a foto não pula). Falar e mexer no mesmo passo: "Abrir o controle"
     e as respostas ganham uma linha inteira cada e a dica sai (a fala já diz o que fazer). */
  .comms { display: flex; flex-direction: column; gap: 10px; height: calc(216px + env(safe-area-inset-bottom)); }
  .comms .line { flex: 1; min-height: 0; overflow: hidden; align-content: start; }
  .comms .side { flex: none; align-items: stretch; gap: 8px; }
  .comms .go-control { align-self: flex-start; }
  .comms .answers .label { flex: none; white-space: nowrap; }
  .comms:has(#go-control:not([hidden])):has(#answers .chip) .hint { display: none; }
  .comms .mic { position: absolute; top: 12px; right: 14px; max-width: 46%; }
  .mapper { width: calc(100% - 16px); right: 8px; }
}
/* celular deitado: a cabine ocupa a altura toda à esquerda; fala, respostas e comandos do voo à direita */
@media (orientation: landscape) and (max-height: 520px) {
  .flight.is-active {
    grid-template-columns: minmax(0, 1fr) clamp(240px, 38vw, 360px);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "stage hud" "stage timeline" "stage comms";
  }
  .flight .stage-wrap { grid-area: stage; }
  /* título e ícones numa linha, o andamento embaixo dela */
  .flight .hud-top { grid-area: hud; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "meta meta"; align-items: center; gap: 0 8px; padding: 4px 6px 8px 12px; border-left: 1px solid var(--line); }
  .flight .hud-title { display: contents; }
  .flight .hud-title strong { grid-area: title; max-width: 100%; margin: 0; font-size: 0.9rem; }
  .flight .hud-meta { grid-area: meta; flex-wrap: wrap; gap: 6px; font-size: 0.74rem; }
  .flight .hud-meta > span + span::before { margin-right: 6px; }
  .flight .hud-actions { grid-area: actions; }
  .flight .timeline { grid-area: timeline; padding: 6px 12px; border-left: 1px solid var(--line); }
  .flight .comms { grid-area: comms; grid-template-columns: 1fr; align-items: start; align-content: start; gap: 10px; height: auto; min-height: 0; overflow: auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 0; border-left: 1px solid var(--line); }
  .flight .side { align-items: flex-start; }
  .flight .answers { justify-content: flex-start; }
  .flight .callout { font-size: 1.05rem; }
  .flight .pfd { width: 150px; left: 8px; bottom: 8px; }
}
/* celular (em pé ou deitado): Procedimento, Pausar e Sair viram ícones de 42 px; o nome continua no botão
   para leitor de tela */
@media (max-width: 640px), (orientation: landscape) and (max-height: 520px) {
  .hud-actions { flex: none; gap: 2px; }
  .hud-actions .icon-btn { position: relative; display: grid; place-items: center; width: 42px; height: 42px; min-height: 42px; padding: 0; border-color: transparent; }
  .hud-actions .icon-btn[aria-pressed="true"] { border-color: var(--blue); }
  .hud-actions .ico { display: block; }
  .hud-actions .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 380px) {
  .brand-word { font-size: 1.05rem; }
  .brand-mark { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- acabamento (25/10/2026): limpo, rótulos em frase, camadas sem contorno, movimento suave ---------- */
:root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --spring: cubic-bezier(0.34, 1.45, 0.64, 1); }

/* rótulos em frase, não em caixa alta */
.eyebrow { text-transform: none; letter-spacing: 0; font-size: 0.92rem; }
.sheet-label { text-transform: none; letter-spacing: 0; font-size: 0.86rem; color: var(--muted); }
.tour-kicker, .sel-actor, .who, .fms-task h3, .fms-docs h3, .proc-head { text-transform: none; letter-spacing: 0; }
.who { font-size: 0.82rem; }
.sel-actor { font-size: 0.8rem; }
.proc-head { font-size: 0.82rem; }
.tour-kicker { font-size: 0.84rem; }
.fms-task h3, .fms-docs h3 { font-size: 0.88rem; }

/* camadas sem contorno: escolha e botão secundário são uma camada clara, não uma linha em volta */
.choice button { border-color: transparent; background: rgba(255, 255, 255, 0.06); transition: background-color 0.2s, color 0.2s, transform 0.16s var(--ease-out); }
.choice button:hover:not(:disabled) { border-color: transparent; background: rgba(255, 255, 255, 0.1); }
.choice button[aria-checked="true"] { border-color: transparent; background: rgba(56, 182, 255, 0.16); }
.btn.ghost { border-color: transparent; background: rgba(255, 255, 255, 0.08); }
.btn.ghost:hover { border-color: transparent; background: rgba(255, 255, 255, 0.13); }
.chip { border-color: transparent; background: rgba(255, 255, 255, 0.08); transition: background-color 0.2s, color 0.2s, transform 0.16s var(--ease-out); }
.chip:hover { border-color: transparent; background: rgba(56, 182, 255, 0.16); }
.icon-btn { border-color: transparent; background: rgba(255, 255, 255, 0.06); transition: background-color 0.2s, color 0.2s, transform 0.16s var(--ease-out); }
.icon-btn:hover, .icon-btn[aria-pressed="true"] { border-color: transparent; background: rgba(56, 182, 255, 0.16); }
.hud-actions .icon-btn[aria-pressed="true"] { border-color: transparent; }
.card, .sop-box, .sheet-panel, .lang { border-color: transparent; }
.sheet-x { border-color: transparent; background: rgba(255, 255, 255, 0.12); }
.term-card { border-color: transparent; background: #121820; }

/* toque: o botão afunda um pouco e volta, para responder na hora */
.btn, .chip, .choice button, .icon-btn { -webkit-tap-highlight-color: transparent; }
.btn:active:not([disabled]), .chip:active, .icon-btn:active { transform: scale(0.96); }

/* telas entram com um deslize curto; o fim da fase chega em cascata */
.screen.is-active { animation: enter 0.38s var(--ease-out) both; }
#screen-debrief.is-active .debrief > * { animation: rise 0.5s var(--ease-out) both; }
#screen-debrief.is-active .debrief > :nth-child(2) { animation-delay: 0.05s; }
#screen-debrief.is-active .debrief > :nth-child(3) { animation-delay: 0.1s; }
#screen-debrief.is-active .debrief > :nth-child(4) { animation-delay: 0.15s; }
#screen-debrief.is-active .debrief > :nth-child(5) { animation-delay: 0.2s; }
#screen-debrief.is-active .debrief > :nth-child(6) { animation-delay: 0.25s; }
#screen-debrief.is-active .debrief > :nth-child(n + 7) { animation-delay: 0.3s; }

/* cada passo novo da faixa entra deslizando */
.callout.swap { animation: swapin 0.32s var(--ease-out) both; }
@keyframes swapin { from { opacity: 0; transform: translateY(6px); } }

/* o número do resultado sobe; os degraus mostram o ✓ do que acabou de fazer e acendem o próximo */
.count { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }
.deb-levels { margin: 4px 0 22px; }
.levels li.just::after { display: inline-block; animation: pop 0.5s var(--spring) both 0.45s; }
.deb-levels li.now { animation: litup 0.6s var(--ease-out) both 0.7s; }
@keyframes pop { from { opacity: 0; transform: scale(0.2); } }
@keyframes litup { from { color: var(--faint); } }

/* ficha da fase: "Começar" sempre à vista; a voz sem legenda (homem ou mulher já diz tudo) */
#go-btn { position: sticky; bottom: 12px; z-index: 3; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.9); }
#choice-voice button { min-height: 48px; }
#choice-voice button span { display: none; }

@media (prefers-reduced-motion: reduce) {
  .callout.swap, #screen-debrief.is-active .debrief > *, .levels li.just::after, .deb-levels li.now { animation: none; }
}

/* hangar: botões do topo e cartões das fases como camadas; a lista que abre chega deslizando */
.pass-open { border: 0; background: transparent; color: rgba(255, 255, 255, 0.72); }
.pass-open:hover { background: transparent; color: #fff; }
.pass-open.is-active { background: transparent; color: #fff; }
.pass-open:active { transform: scale(0.96); }
.card3d { border-color: transparent; }
.card3d:hover { border-color: transparent; }
.c3-n, .c3-done { border-color: transparent; }
.fold[open] > :not(summary) { animation: rise 0.42s var(--ease-out) both; }
.fold > summary .sop-arrow { transition: transform 0.3s var(--ease-out), border-color 0.2s; }
@media (prefers-reduced-motion: reduce) { .fold[open] > :not(summary) { animation: none; } }

/* ---------- 2ª rodada (25/10/2026) ---------- */
/* segmento: as opções numa fila, numa camada só; o destaque azul desliza até a escolhida */
.choice.seg { position: relative; display: flex; gap: 4px; margin: 0; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.choice.seg button { position: relative; z-index: 1; flex: 1 1 0; flex-direction: row; justify-content: center; align-items: center; gap: 6px; min-height: 46px; padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; text-align: center; white-space: nowrap; }
.choice.seg button[aria-checked="true"] { background: transparent; }
.choice.seg button[aria-checked="true"] b,
.choice.seg button[aria-checked="true"] span { color: #fff; }
.choice.seg button b { font-size: 0.95rem; font-weight: 600; }
.choice.seg button span { display: none; }
.seg-pill { position: absolute; left: 0; top: 4px; bottom: 4px; z-index: 0; border-radius: 999px; background: #0098dc; opacity: 0; transition: transform 0.34s var(--ease-out), width 0.34s var(--ease-out), opacity 0.2s; pointer-events: none; }
.seg-desc { min-height: 1.45em; margin: 10px 2px 20px; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.seg-desc.swap { animation: swapin 0.3s var(--ease-out) both; }
.sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.sheet-row-label { color: var(--muted); font-size: 0.9rem; }
.sheet-row .choice.seg { flex: 0 1 auto; min-width: 200px; }
.sheet-row .choice.seg button { min-height: 40px; }
#choice-role.seg button span { display: inline; font-size: 0.8rem; color: var(--muted); }
#choice-opt.seg { margin: 0 0 16px; }
#go-btn { margin-top: 10px; }
@media (max-width: 420px) {
  .sheet-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .sheet-row .choice.seg { min-width: 0; }
  .choice.seg.levels4 button { padding: 6px 4px; }
  .choice.seg.levels4 button b { font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) { .seg-pill, .seg-desc.swap { transition: none; animation: none; } }
/* seletor: camada sem contorno; o destaque da posição desliza (branco na vez de escolher, azul no feito) */
.sel { border-color: transparent; }
.sel.is-done { border-color: transparent; }
.sel-opts { position: relative; }
.sel-opt { position: relative; z-index: 1; transition: color 0.25s; }
.sel-opt[aria-pressed="true"], .sel.is-checked .sel-opt[aria-pressed="true"], .sel.is-done .sel-opt[aria-pressed="true"] { background: transparent; color: #fff; }
.sel-pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--blue-deep); opacity: 0; transition: transform 0.34s var(--ease-out), width 0.34s var(--ease-out), height 0.34s var(--ease-out), background-color 0.25s, opacity 0.2s; pointer-events: none; }
.sel.is-checked .sel-pill, .sel.is-done .sel-pill { background: var(--blue-deep); }
/* anel do controle pedido: respira devagar para chamar o olho; o acerto solta uma onda azul */
.hs.is-target { box-shadow: 0 0 0 calc(2px * var(--inv, 1)) rgba(0, 152, 220, 0.9); }
.hs.is-silence { border-color: #ff3b2e; box-shadow: 0 0 0 calc(3px * var(--inv, 1)) rgba(255, 59, 46, 0.55); }
@keyframes ringpulse { 50% { box-shadow: 0 0 0 calc(9px * var(--inv, 1)) rgba(56, 182, 255, 0.1); } }
.hs.is-you::before { content: ""; position: absolute; inset: calc(-2px * var(--inv, 1)); border-radius: 50%; border: calc(2px * var(--inv, 1)) solid var(--blue); animation: ripple 0.7s var(--ease-out) both; pointer-events: none; }
/* a onda do toque segue o formato do contorno (retângulo do botão ou da tela) */
.hs.is-box.is-you::before, .hs.is-screen.is-you::before { border-radius: inherit; }
@keyframes ripple { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .hs.is-target, .hs.is-you::before { animation: none; } .sel-pill { transition: none; } }
/* segmento de duas opções sem script (Entrar | Criar conta): o destaque desliza com :has() */
.choice.seg2::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 5px); border-radius: 10px; background: rgba(56, 182, 255, 0.18); transition: transform 0.34s var(--ease-out), opacity 0.2s; pointer-events: none; }
.choice.seg2:has(> button:nth-of-type(2)[aria-checked="true"])::before { transform: translateX(calc(100% + 2px)); }
.choice.seg2:not(:has([aria-checked="true"]))::before { opacity: 0; }
.pass #acc-tabs { margin-bottom: 18px; }
.pass #acc-tabs button { min-height: 44px; padding: 6px 10px; }
/* campos: camada clara, contorno só no foco */
.pass-form input { border-color: transparent; background: rgba(255, 255, 255, 0.07); transition: border-color 0.2s, background-color 0.2s; }
.pass-form input:focus { border-color: var(--blue); background: rgba(255, 255, 255, 0.09); }
.pass-form input[aria-invalid="true"] { border-color: rgba(255, 255, 255, 0.6); }
/* a etapa do passe que entra (conta, código, compra, resultado) chega deslizando */
.pass-step:not([hidden]) { animation: rise 0.36s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .choice.seg2::before { transition: none; } .pass-step:not([hidden]) { animation: none; } }
/* tutorial: cartão em camada (sem contorno), borda do destaque mais leve e o texto chegando em cascata */
.tour-card { border-color: transparent; background: rgba(16, 21, 28, 0.98); }
.tour-spot { border: 1px solid rgba(255, 255, 255, 0.55); }
.tour-card.in h3 { animation: rise 0.42s var(--ease-out) both 0.05s; }
.tour-card.in p { animation: rise 0.42s var(--ease-out) both 0.12s; }
.tour-card.in .tour-list li { animation: rise 0.42s var(--ease-out) both 0.18s; }
.tour-card.in .tour-list li:nth-child(2) { animation-delay: 0.24s; }
.tour-card.in .tour-list li:nth-child(3) { animation-delay: 0.3s; }
.tour-card.in .tour-list li:nth-child(n + 4) { animation-delay: 0.36s; }
.tour-card.in .tour-foot { animation: rise 0.42s var(--ease-out) both 0.2s; }
@media (prefers-reduced-motion: reduce) { .tour-card.in :is(h3, p, .tour-list li, .tour-foot) { animation: none; } }

/* ---------- telas que faltavam (25/10/2026): compra, desistência, MCDU e voo inteiro ---------- */
/* caixas de informação viram camadas (sem linha em volta, nem tracejado) */
.pass-mode { border: 0; background: rgba(255, 255, 255, 0.05); }
.pass-summary, .pass-deal, .pass-devices li, .stat, .deb-phase { border-color: transparent; }
.pass-account { border-top-color: rgba(255, 255, 255, 0.08); }
/* resultado do passe e da desistência: o título chega com um pulo curto */
#pass-result:not([hidden]) #pass-result-title { animation: pop 0.45s var(--spring) both 0.1s; }
/* MCDU: "Voltar à cabine" é a saída, não a tarefa: fica discreto */
#fms-done { border-color: transparent; background: rgba(255, 255, 255, 0.1); color: var(--ink); }
#fms-done:hover { background: rgba(255, 255, 255, 0.16); }
/* fim do voo inteiro: os números entram em cascata */
#screen-debrief.is-active .stat { animation: rise 0.45s var(--ease-out) both; }
#screen-debrief.is-active .stat:nth-child(2) { animation-delay: 0.08s; }
#screen-debrief.is-active .stat:nth-child(3) { animation-delay: 0.16s; }
#screen-debrief.is-active .stat:nth-child(n + 4) { animation-delay: 0.24s; }
/* entre as fases: a foto aparece, depois o texto e os botões; a barra enche */
#screen-chain.is-active .chain-photo { animation: enter 0.6s var(--ease-out) both; }
#screen-chain.is-active .chain-body > * { animation: rise 0.45s var(--ease-out) both; }
#screen-chain.is-active .chain-body > :nth-child(2) { animation-delay: 0.06s; }
#screen-chain.is-active .chain-body > :nth-child(3) { animation-delay: 0.12s; }
#screen-chain.is-active .chain-body > :nth-child(4) { animation-delay: 0.18s; }
#screen-chain.is-active .chain-body > :nth-child(n + 5) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  #pass-result:not([hidden]) #pass-result-title, #screen-debrief.is-active .stat, #screen-chain.is-active .chain-photo, #screen-chain.is-active .chain-body > * { animation: none; }
}

/* ---------- escuro suave (25/10/2026): grafite em vez de preto puro, branco quente, menos peso ---------- */
:root {
  --bg: #0e1116;
  --ink: #edf1f5;
  --muted: rgba(237, 241, 245, 0.66);
  --faint: rgba(237, 241, 245, 0.48);
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --card: #151a21;
  --card-2: #1b2129;
  --sheet: #171c23;
}
body { line-height: 1.55; }
b, strong { font-weight: 600; }
.topbar { background: rgba(14, 17, 22, 0.84); border-bottom-color: transparent; }
.hero { border-color: transparent; background: #0b0e12; }
.sheet-panel { background: var(--sheet); }
.sheet-photo::after { background: linear-gradient(180deg, rgba(23, 28, 35, 0.08) 30%, var(--sheet) 98%); }
.term-card { background: #1e242d; }
.comms { background: #12161c; border-top-color: transparent; }
.proc { background: rgba(18, 22, 28, 0.88); }
.pause-cover { background: rgba(14, 17, 22, 0.8); }
.fms { background: rgba(14, 17, 22, 0.9); }
.fms-panel { background: var(--sheet); border-color: transparent; }
.sel { background: rgba(26, 31, 39, 0.97); }
.tour-card { background: rgba(26, 32, 41, 0.98); }

/* idioma: um botão com o atual; as opções abrem num cartão embaixo */
.top-right { gap: 10px; }
.lang-wrap { position: relative; }
.lang-toggle { min-width: 44px; min-height: 36px; padding: 4px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--ink); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; transition: background-color 0.2s, transform 0.16s var(--ease-out); }
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.14); }
.lang-toggle:active { transform: scale(0.96); }
.lang { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; flex-direction: column; gap: 2px; padding: 4px; border-radius: 14px; background: #1e242d; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8); animation: rise 0.22s var(--ease-out) both; }
.lang button { min-width: 72px; min-height: 38px; border-radius: 10px; font-size: 0.8rem; }

/* linha do tempo do voo: mais fina e calma */
.timeline i { height: 2px; background: rgba(255, 255, 255, 0.06); }
.timeline i.mine { background: rgba(255, 255, 255, 0.14); }
.timeline i.ai { background: rgba(255, 255, 255, 0.24); }

/* microfone: só o ícone (riscado se bloqueado); o texto aparece só enquanto ouve */
.mic-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mic-ico .slash { display: none; }
.mic.denied .mic-ico .slash { display: inline; }
.mic.listening { color: var(--blue); }
.mic.listening .mic-ico { animation: blink 1.4s infinite; }
.mic #mic-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mic.listening #mic-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

@media (prefers-reduced-motion: reduce) { .lang, .mic.listening .mic-ico { animation: none; } }

/* ---------- limpo (25/10/2026, 4ª rodada): menos caixa, foto real clara, um destaque por tela ---------- */
/* topo: "Entrar" e o idioma são texto; o fundo só no toque/hover; o ponto só com o passe ativo */
.pass-open, .lang-toggle { background: transparent; }
.pass-open:hover, .lang-toggle:hover, .lang-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); }
.pass-open .dot { display: none; }
.pass-open.is-active .dot { display: inline-block; }
.pass-open.is-active { background: rgba(56, 182, 255, 0.12); }
/* hangar: a cabine em voo, clara; a sombra só onde fica o texto (embaixo e à esquerda) */
.hero { background: #0b0e12; }
.hero-bg { background-position: 32% 58%; filter: saturate(1.05); }
.hero::before { background: linear-gradient(90deg, rgba(11, 14, 18, 0.88) 0%, rgba(11, 14, 18, 0.68) 40%, rgba(11, 14, 18, 0.14) 64%, rgba(11, 14, 18, 0) 76%), linear-gradient(0deg, rgba(11, 14, 18, 0.6) 0%, rgba(11, 14, 18, 0) 46%); }
.hero-sub { margin-bottom: 28px; }
.hero-progress { margin-bottom: 18px; }
@media (max-width: 640px) {
  .hero { min-height: 470px; }
  .hero-bg { background-position: 24% 50%; }
  .hero::before { background: linear-gradient(0deg, rgba(11, 14, 18, 0.97) 0%, rgba(11, 14, 18, 0.86) 40%, rgba(11, 14, 18, 0.2) 70%, rgba(11, 14, 18, 0) 86%); }
}
/* número da fase no cartão: menor e sem caixa (a foto fala mais) */
.c3-n { padding: 2px 8px; background: rgba(11, 14, 18, 0.45); font-size: 0.72rem; }
/* ficha: a foto mais clara e sem número em cima; a função e a voz numa linha que abre */
.sheet-photo { background-size: cover; }
.sheet-photo::after { background: linear-gradient(180deg, rgba(23, 28, 35, 0) 40%, var(--sheet) 100%); }
.sheet-more { margin: 4px 0 6px; }
.sheet-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 2px; list-style: none; cursor: pointer; color: var(--muted); font-size: 0.9rem; border-radius: 10px; }
.sheet-more > summary::-webkit-details-marker { display: none; }
.sheet-more > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sheet-more-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 600; white-space: nowrap; }
.sheet-more-cta::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.3s var(--ease-out); }
.sheet-more[open] .sheet-more-cta::after { transform: translateY(2px) rotate(-135deg); }
.sheet-more[open] > summary { margin-bottom: 6px; }
.sheet-more[open] > .sheet-row { animation: rise 0.36s var(--ease-out) both; }
.sheet-more[open] > .sheet-row + .sheet-row { animation-delay: 0.05s; }
/* voo: a vez do aluno sem a faixa azul na lateral (o "Sua vez" já diz); termo com sublinhado leve */
.comms.your-turn, .comms.missed { box-shadow: none; }
.callout button.term { text-decoration-color: rgba(56, 182, 255, 0.45); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
/* sem o mapinha, o procedimento sobe (fica logo abaixo das abas) */
.proc { top: 60px; }
/* fim da fase no celular: o próximo passo em cima, sozinho na linha; voltar e refazer lado a lado embaixo */
@media (max-width: 640px) {
  .debrief .brief-actions { flex-direction: row; flex-wrap: wrap; }
  .debrief .brief-actions .btn { width: auto; flex: 1 1 0; padding-inline: 14px; white-space: nowrap; }
  .debrief .brief-actions .btn.primary { order: -1; flex-basis: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .sheet-more[open] > .sheet-row, .sheet-more-cta::after { animation: none; transition: none; } }

/* a coluna dos documentos não empurra a janela do MCDU para os lados (o OFP rola dentro dele) */
.fms-side > * { min-width: 0; }
/* o MCDU em foto não tem largura própria (é a foto): o lugar dele ocupa a coluna inteira, até 440 px */
.fms-mcdu { width: 100%; max-width: 440px; margin-inline: auto; }

/* ---------- sistemas (25/10/2026): aula na foto real do painel; a câmera vai até os botões ---------- */
#screen-system.is-active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); height: calc(100dvh - var(--top-h, 76px)); }
.sys-stage { position: relative; min-height: 0; overflow: hidden; background: #0b0e12; -webkit-tap-highlight-color: transparent; }
.sys-stage.is-tap { cursor: crosshair; }
.sys-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s; }
.sys-view.is-active { opacity: 1; visibility: visible; }
.sys-box { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 0.9s var(--ease-out); will-change: transform; }
.sys-box.no-anim, .sys-spot.no-anim { transition: none; }
.sys-img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; opacity: 0; transition: opacity 0.4s; }
.sys-view.is-loaded .sys-img { opacity: 1; }
.sys-err { display: none; position: absolute; inset: 0; z-index: 2; align-content: center; justify-items: center; gap: 14px; padding: 24px; background: rgba(11, 14, 18, 0.86); color: var(--muted); text-align: center; }
.sys-err p { margin: 0; max-width: 340px; }
.sys-view.is-error .sys-err { display: grid; }
/* a mesma foto desfocada atrás: numa tela alta e estreita, o que sobra em volta do painel não fica vazio */
.sys-backdrop { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(28px) brightness(0.32) saturate(1.1); pointer-events: none; }
/* o painel do sistema fica aceso; o resto da foto escurece (o destaque desliza junto com a câmera) */
.sys-spot { position: absolute; border-radius: calc(14px * var(--inv, 1)); box-shadow: 0 0 0 4000px rgba(11, 14, 18, 0.46); pointer-events: none; transition: left 0.9s var(--ease-out), top 0.9s var(--ease-out), width 0.9s var(--ease-out), height 0.9s var(--ease-out); }
.sys-marks { position: absolute; inset: 0; pointer-events: none; }
/* anel de cada botão da parte: chega com um pulo curto e respira devagar, como o controle pedido no voo */
.sys-mark { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; border-radius: 50%; border: calc(2px * var(--inv, 1)) solid var(--blue-deep); background: rgba(0, 152, 220, 0.08); animation: markin 0.5s var(--spring) both; animation-delay: calc(0.45s + var(--i, 0) * 0.12s); }
.sys-mark.box { transform: none; aspect-ratio: auto; border-radius: calc(10px * var(--inv, 1)); background: rgba(56, 182, 255, 0.06); }
.sys-mark.answer { animation-delay: 0.1s, 0.6s; }
@keyframes markin { from { opacity: 0; scale: 0.5; } }
.sys-tag { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, calc(-7px * var(--inv, 1))); padding: calc(3px * var(--inv, 1)) calc(9px * var(--inv, 1)); border-radius: 999px; background: rgba(11, 14, 18, 0.88); color: #fff; font-size: calc(12.5px * var(--inv, 1)); font-weight: 600; line-height: 1.25; letter-spacing: 0.02em; white-space: nowrap; }
.sys-mark.below .sys-tag { bottom: auto; top: 100%; transform: translate(-50%, calc(7px * var(--inv, 1))); }
/* onde o aluno tocou, quando errou */
.sys-tap { position: absolute; width: calc(14px * var(--inv, 1)); height: calc(14px * var(--inv, 1)); transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 calc(4px * var(--inv, 1)) rgba(255, 255, 255, 0.2); animation: markin 0.35s var(--spring) both; }
#sys-credit { z-index: 3; }
#sys-credit:empty { display: none; }

/* a aula: o que é, a fonte e um botão para seguir (sempre no mesmo lugar) */
.sys-panel { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 16px 28px 22px; background: var(--sheet); }
.sys-head { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.sys-exit { flex: none; min-height: 40px; padding: 6px 14px 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 0.9rem; font-weight: 600; transition: background-color 0.2s, color 0.2s; }
.sys-exit::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-1px) rotate(45deg); }
.sys-exit:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.sys-bar { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.sys-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: rgba(255, 255, 255, 0.28); transition: width 0.5s var(--ease-out); }
.sys-body { flex: 1; }
.sys-body > * { animation: rise 0.42s var(--ease-out) both; }
.sys-body > :nth-child(2) { animation-delay: 0.05s; }
.sys-body > :nth-child(3) { animation-delay: 0.1s; }
.sys-body > :nth-child(n + 4) { animation-delay: 0.15s; }
.sys-body.is-same > * { animation: none; }
.sys-body.is-same > .sys-feedback:not(:empty) { animation: rise 0.3s var(--ease-out) both; }
.sys-kicker { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }
.sys-body h2 { margin: 0 0 14px; font-size: clamp(1.5rem, 2.3vw, 1.95rem); line-height: 1.15; letter-spacing: -0.01em; outline: none; }
.sys-text { margin: 0 0 16px; font-size: 1.08rem; line-height: 1.6; }
.sys-lead { font-size: 1.22rem; line-height: 1.5; }
.sys-rem { margin: 0 0 16px; padding: 18px 20px; border-radius: 14px; background: rgba(56, 182, 255, 0.09); font-size: 1.22rem; font-weight: 600; line-height: 1.45; }
.sys-src { margin: 0; color: var(--faint); font-family: var(--avionic); font-size: 0.78rem; letter-spacing: 0.01em; }
.sys-hint { margin: 2px 0 10px; color: var(--muted); }
.sys-opts { display: grid; gap: 8px; margin: 4px 0 14px; }
.sys-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--ink); font-size: 1rem; text-align: left; transition: background-color 0.2s, opacity 0.3s, transform 0.16s var(--ease-out); }
.sys-opt span { flex: 1; }
.sys-opt:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.sys-opt:active:not(:disabled) { transform: scale(0.98); }
.sys-opt:disabled { cursor: default; }
.sys-opt.is-right { background: rgba(56, 182, 255, 0.18); }
.sys-opt.is-wrong { opacity: 0.6; }
.sys-opt.is-off { opacity: 0.4; }
.sys-opt i { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; animation: pop 0.4s var(--spring) both; }
.sys-opt.is-right i { background: var(--blue); color: #000; }
.sys-opt.is-wrong i { background: rgba(255, 255, 255, 0.16); }
.sys-opt i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sys-feedback { min-height: 1.6em; margin: 0 0 8px; font-weight: 600; }
.sys-feedback.ok { color: var(--blue); }
.sys-rev-head { margin-top: 6px; }
.sys-rev { display: flex; flex-wrap: wrap; gap: 8px; }
.sys-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; }
.sys-actions .btn { flex: 0 1 auto; min-width: 0; padding-inline: 22px; white-space: nowrap; }
.sys-actions .btn.primary { flex: 1 1 auto; }
/* no resultado, o próximo sistema fica sozinho na linha de cima; "Fazer de novo" embaixo */
.sys-actions.is-result .btn { flex: 1 1 100%; white-space: normal; }
.sys-actions.is-result .btn.primary { order: -1; }
.sys-actions .btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  #screen-system.is-active { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 42dvh) auto; height: auto; min-height: calc(100dvh - var(--top-h, 76px)); }
  .sys-panel { overflow: visible; padding: 14px 16px 0; }
  .sys-head { margin-bottom: 18px; }
  .sys-opt { min-height: 50px; }
  /* a resposta do teste aparece acima dos botões fixos de baixo */
  .sys-feedback { scroll-margin-bottom: 96px; }
  .sys-actions { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(23, 28, 35, 0), var(--sheet) 28%); }
  .sys-tag { font-size: calc(11.5px * var(--inv, 1)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  #screen-system.is-active { grid-template-columns: minmax(0, 1fr) clamp(236px, 40vw, 320px); grid-template-rows: none; height: calc(100dvh - var(--top-h, 76px)); }
  .sys-panel { overflow-y: auto; padding: 10px 16px 0; }
  .sys-actions { position: sticky; bottom: 0; margin: 0 -16px; padding: 10px 16px; background: linear-gradient(180deg, rgba(23, 28, 35, 0), var(--sheet) 28%); }
  /* coluna estreita: "Voltar" e "Próximo" lado a lado; a rolagem deixa o que ganha foco acima da barra */
  .sys-actions:not(.is-result) { flex-wrap: nowrap; }
  .sys-actions .btn { padding-inline: 14px; }
  .sys-panel { scroll-padding-bottom: 96px; }
  /* no resultado, os botões descem com o texto: presos embaixo, tapariam o "Vale rever" numa tela tão baixa */
  .sys-actions.is-result { position: static; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .sys-box, .sys-spot, .sys-bar i { transition: none; }
  .sys-mark, .sys-tap, .sys-body > *, .sys-body.is-same > .sys-feedback:not(:empty), .sys-opt i { animation: none; }
}

/* narração: o botão de som ao lado da barra (ligado = a aula lê e segue sozinha) */
.sys-sound { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); transition: background-color 0.2s, color 0.2s, transform 0.16s var(--ease-out); }
.sys-sound:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.sys-sound:active { transform: scale(0.94); }
.sys-sound[aria-pressed="true"] { color: var(--blue); }
.sys-sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sys-sound svg path:first-child { fill: currentColor; stroke: none; }
.sys-sound[aria-pressed="true"] .off, .sys-sound[aria-pressed="false"] .on { display: none; }
/* leitor de tela: qual opção é a certa e qual foi a escolhida */
.sys-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* o caminho da parte pelas linhas impressas no painel: desenha, depois os pontos correm */
.sys-flow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sys-flow path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fl-under { stroke: rgba(11, 14, 18, 0.55); opacity: 0; animation: flfade 0.3s ease forwards; animation-delay: calc(0.75s + var(--i, 0) * 0.25s); }
.fl-line { stroke: var(--blue); stroke-dasharray: 1 1; animation: fldraw 0.9s var(--ease-out) both; animation-delay: calc(0.8s + var(--i, 0) * 0.25s); }
.fl-dots { stroke: #eaf6ff; opacity: 0; }
@keyframes fldraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes flfade { to { opacity: 1; } }

/* alvos da prova pelo teclado: invisíveis, só o foco aparece (o mouse e o dedo tocam a foto) */
.sys-hots { position: absolute; inset: 0; pointer-events: none; }
/* o toque e o mouse passam direto para a foto (vale o ponto tocado, não o alvo vizinho que encosta) */
.sys-hot { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; pointer-events: none; }
.sys-hot.box { transform: none; aspect-ratio: auto; border-radius: calc(10px * var(--inv, 1)); }
.sys-hot:focus-visible { outline: calc(2px * var(--inv, 1)) solid #fff; outline-offset: calc(3px * var(--inv, 1)); }
/* sem a foto, a prova não tem alvo (nem pelo teclado) */
.sys-view:not(.is-loaded) .sys-hot, .sys-view.is-error .sys-hot { visibility: hidden; }

/* diagrama do sistema: blocos em cascata, linhas e o caminho do passo correndo */
.sys-diagram { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 22px 18px; background: radial-gradient(120% 90% at 50% 40%, #121821, #0b0e12 75%); opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s; }
.sys-diagram.is-active { opacity: 1; visibility: visible; }
.sys-diagram svg { display: block; width: 100%; max-width: 720px; height: 100%; overflow: visible; }
.dg-node rect { fill: #1d242d; }
.dg-node.k-src rect { fill: rgba(56, 182, 255, 0.15); }
.dg-node.k-bus rect, .dg-node.k-sys rect { fill: #26303b; }
.dg-node.k-valve rect { fill: #202831; }
.dg-node.k-emer rect { fill: #161b22; stroke: rgba(255, 255, 255, 0.3); stroke-width: 0.25; stroke-dasharray: 0.9 0.7; }
.dg-node.k-warn rect { fill: rgba(255, 96, 86, 0.16); }
.dg-node text { fill: var(--ink); text-anchor: middle; font-family: var(--font); font-size: 3.5px; font-weight: 600; }
.dg-node text.panel { font-family: var(--avionic); font-size: 3.4px; font-weight: 700; letter-spacing: 0.02em; }
.dg-node .dg-sub { fill: var(--muted); font-size: 2.9px; font-weight: 400; }
.dg-dot.c-green { fill: #4ade80; }
.dg-dot.c-blue { fill: var(--blue); }
.dg-dot.c-yellow { fill: #facc15; }
.dg-band { fill: rgba(255, 255, 255, 0.035); }
.dg-band-label, .dg-cap, .dg-note { fill: var(--faint); font-family: var(--font); font-size: 3px; text-anchor: middle; }
.dg-edge path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dg-line { stroke: rgba(255, 255, 255, 0.2); stroke-width: 0.45; marker-end: url(#dg-arrow); }
.dg-edge.dash .dg-line { stroke-dasharray: 1.2 1; }
#dg-arrow path, #dg-arrow-s path { fill: rgba(255, 255, 255, 0.4); }
.dg-edge.both .dg-line { marker-start: url(#dg-arrow-s); }
.dg-run { stroke: var(--blue); stroke-width: 0.75; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.dg-dots { stroke: #eaf6ff; stroke-width: 0.95; stroke-dasharray: 0.01 3; opacity: 0; }
.dg-edge.is-flow .dg-run { opacity: 1; animation: fldraw 0.9s var(--ease-out) both; animation-delay: calc(0.45s + var(--i, 0) * 0.08s); }
.dg-edge.is-flow .dg-dots { animation: flfade 0.3s ease forwards, dgdots 1.1s linear infinite; animation-delay: 1.3s, 1.3s; }
@keyframes dgdots { to { stroke-dashoffset: -3.01; } }
.sys-diagram .dg-node { opacity: 0; transform: translateY(1.6px); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.sys-diagram .dg-line, .sys-diagram .dg-band, .sys-diagram :is(.dg-cap, .dg-note, .dg-band-label) { opacity: 0; transition: opacity 0.5s ease 0.3s; }
.sys-diagram.is-built .dg-node { opacity: 1; transform: none; }
.sys-diagram.is-built .dg-node.is-off { opacity: 0.3; }
.sys-diagram.is-built :is(.dg-line, .dg-band, .dg-cap, .dg-note, .dg-band-label) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fl-under, .fl-line, .dg-edge.is-flow .dg-run { animation: none; opacity: 1; stroke-dashoffset: 0; }
  .dg-edge.is-flow .dg-dots { animation: none; }
  .sys-diagram .dg-node, .sys-diagram .dg-line { transition: none; }
}

/* celular: o diagrama usa a largura toda (letra maior); deitado, a coluna do texto fica mais estreita */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px), (orientation: landscape) and (max-height: 520px) {
  .sys-diagram { padding: 10px 6px; }
}

/* ---------- sistemas a fundo (25/10/2026): página do sistema com módulos, botão por botão, panes e prova ---------- */
/* cores das luzes dos botões do painel (legenda acesa); o azul é o mesmo da marca */
:root { --l-amber: #ffb340; --l-red: #ff6259; --l-green: #4ade80; --l-blue: var(--blue); --l-white: #f4f6f8; }

/* módulos da página do sistema: o número (feito, o ✓), o nome, o que tem e a nota */
.sys-mods { display: grid; gap: 8px; margin: 6px 0 14px; }
.sys-mod { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 14px 18px 14px 14px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.045); color: var(--ink); text-align: left; transition: background-color 0.2s, transform 0.16s var(--ease-out); }
.sys-mod:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.sys-mod:active:not(:disabled) { transform: scale(0.985); }
.sys-mod:disabled { opacity: 0.5; cursor: default; }
.sys-mod-n { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--muted); font-size: 0.95rem; font-weight: 700; }
.sys-mod.is-done .sys-mod-n { background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.sys-mod-n svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sys-mod-t { display: grid; flex: 1; gap: 2px; min-width: 0; }
.sys-mod-t b { font-size: 1.04rem; font-weight: 600; }
.sys-mod-t small { color: var(--muted); font-size: 0.88rem; line-height: 1.35; }
.sys-mod em { flex: none; color: var(--faint); font-size: 0.82rem; font-style: normal; font-weight: 600; white-space: nowrap; }
.sys-deep-err { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

/* o nome do botão como está escrito no painel */
.sys-body h2.sys-label { font-family: var(--avionic); letter-spacing: 0.02em; }

/* cada posição do botão: a legenda na cor da luz (com a cor por escrito embaixo) e o que acontece */
.sys-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.sys-pos { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--avionic); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.03em; }
.sys-pos[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #000; }
.sys-pos-detail { display: grid; gap: 10px; margin: 0 0 14px; }
.sys-pos-photo { width: min(100%, 280px); height: auto; border-radius: 10px; background: #05070a; }
.sys-states { display: grid; margin: 0 0 14px; padding: 0; list-style: none; }
.sys-states li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.sys-states li:last-child { border-bottom: 1px solid var(--line); }
.sys-pb { display: grid; justify-items: center; gap: 4px; padding: 7px 4px 6px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 9px; background: #05070a; color: var(--faint); }
.sys-pb b { font-family: var(--avionic); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.1; text-align: center; }
.sys-pb small { color: var(--muted); font-size: 0.7rem; line-height: 1; }
.sys-pb.l-amber { color: var(--l-amber); }
.sys-pb.l-red { color: var(--l-red); }
.sys-pb.l-green { color: var(--l-green); }
.sys-pb.l-blue { color: var(--l-blue); }
.sys-pb.l-white { color: var(--l-white); }
.sys-pb.l-none { border-style: dashed; border-color: var(--line-strong); }
/* posição com foto do simulador: a luz de verdade em cima, o nome e a cor embaixo */
.sys-pb.is-photo { padding: 4px 4px 6px; }
.sys-pb.is-photo img { display: block; width: 100%; height: 34px; object-fit: contain; border-radius: 4px; }
/* ação sem legenda no painel (apertar, segurar) */
.sys-pb.is-act { border-color: var(--line-strong); background: transparent; color: var(--ink); }
.sys-pb.is-act b { font-family: var(--font); font-size: 0.82rem; font-weight: 600; letter-spacing: 0; }
.sys-state { font-size: 1rem; line-height: 1.5; }
.sys-note { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(56, 182, 255, 0.09); font-size: 0.98rem; line-height: 1.45; }

/* o código das luzes: uma lâmpada de cada cor (apagada = painel pronto) */
.sys-lights { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.sys-lights li { display: flex; align-items: center; gap: 12px; font-size: 1rem; line-height: 1.4; }
.sys-lamp { flex: none; width: 34px; height: 22px; border: 1px solid var(--line-strong); border-radius: 6px; background: #05070a; }
.sys-lamp.l-amber { border-color: var(--l-amber); background: var(--l-amber); }
.sys-lamp.l-red { border-color: var(--l-red); background: var(--l-red); }
.sys-lamp.l-green { border-color: var(--l-green); background: var(--l-green); }
.sys-lamp.l-blue { border-color: var(--l-blue); background: var(--l-blue); }
.sys-lamp.l-white { border-color: var(--l-white); background: var(--l-white); }
/* a mesma cor numa luz de verdade do simulador, com o nome de onde ela é */
.sys-lamp-photo { display: grid; flex: none; gap: 4px; width: 96px; margin: 0; }
.sys-lamp-photo img { display: block; width: 100%; height: 42px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #05070a; }
.sys-lamp-photo figcaption { color: var(--faint); font-size: 0.68rem; line-height: 1.25; }

/* pane: o alerta do ECAM e as linhas de ação como na tela do avião (item, pontilhado, ação) */
.sys-ecam { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0 0 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #05070a; }
.sys-ecam span { flex: none; color: var(--faint); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; }
.sys-ecam b { min-width: 0; font-family: var(--avionic); font-size: 0.92rem; letter-spacing: 0.03em; overflow-wrap: anywhere; }
.sys-ecam-box { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #05070a; font-family: var(--avionic); font-size: 0.86rem; line-height: 1.35; }
.sys-ecam-box p { margin: 0; }
.sys-ecam-box .sys-ecam-t { margin-bottom: 8px; font-weight: 700; letter-spacing: 0.03em; }
.sys-ecam-box .ln { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.sys-ecam-box .ln span { min-width: 0; }
.sys-ecam-box .ln i { flex: 1; min-width: 14px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-3px); }
.sys-ecam-box .ln b { flex: none; color: var(--blue); }
.sys-ecam-box .ln.is-cond { padding-top: 6px; color: var(--muted); }

/* depois da resposta: o porquê (a fonte vem embaixo) */
.sys-why { margin: -2px 0 8px; color: var(--muted); font-size: 0.98rem; line-height: 1.5; }

/* prova do curso: as erradas com a certa, o porquê e a fonte */
.sys-miss { display: grid; gap: 16px; margin: 0 0 16px; padding: 0 0 0 20px; }
.sys-miss li { display: grid; gap: 4px; }
.sys-miss li::marker { color: var(--faint); }
.sys-miss b { font-weight: 600; line-height: 1.4; }
.sys-miss span { color: var(--blue); font-weight: 600; }
.sys-miss small { color: var(--muted); font-size: 0.92rem; line-height: 1.45; }

/* anel da pane na cor da luz que acende ali */
.sys-mark.l-amber { border-color: var(--l-amber); background: rgba(255, 179, 64, 0.14); }
.sys-mark.l-red { border-color: var(--l-red); background: rgba(255, 98, 89, 0.16); }
.sys-mark.l-amber .sys-tag { color: var(--l-amber); }
.sys-mark.l-red .sys-tag { color: var(--l-red); }

/* caminho de pane no diagrama (a AC BUS 2 nas essenciais): só aparece quando corre */
.dg-edge.alt:not(.is-flow) { display: none; }

@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px), (orientation: landscape) and (max-height: 520px) {
  .sys-states li { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
  .sys-mod { min-height: 58px; padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sys-mod { transition: none; }
}

/* a janela da posição: a palavra da posição, grande. A foto do botão fica na cabine, não numa miniatura borrada. */
.lens-host { width: min(420px, calc(100vw - 32px)); }
.sel { padding: 18px 18px 14px; border-radius: 24px; background: rgba(8, 10, 14, 0.94); border: 1px solid rgba(255, 255, 255, 0.1); }
.sel-name { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.03em; }
.sel-opts, .sel-opts.many { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; background: transparent; border-radius: 0; }
.sel-opts .sel-pill { display: none; }
.sel-opt { flex: 1 1 120px; min-height: 56px; padding: 12px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; letter-spacing: 0.06em; box-shadow: none; }
.sel-opt[aria-pressed="true"], .sel.is-checked .sel-opt[aria-pressed="true"], .sel.is-done .sel-opt[aria-pressed="true"] { background: #0098dc; color: #fff; box-shadow: none; }
.sel-foot .linkish, .sel-close { text-decoration: none; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.68rem; font-weight: 700; }

/* luzes reais do teste de fogo, do lado da conferência */
.comms .line > .looks { grid-column: 1 / -1; }
.comms .looks { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 0; }
.comms .looks figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.comms .looks img { height: 72px; width: auto; max-width: 140px; object-fit: contain; border-radius: 8px; background: #14181e; }
.comms .looks figcaption { font-size: 0.68rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.62); }
.comms.has-looks { height: auto; max-height: 46vh; overflow: auto; }

/* os 3 s do APU START, no meio da cabine */
#count { position: absolute; left: 50%; top: 42%; z-index: 8; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 0; padding: 4px 28px 14px; border-radius: 32px; background: rgba(5, 6, 8, 0.82); pointer-events: none; }
#count[hidden] { display: none; }
#count b { font-size: clamp(5rem, 14vw, 9rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.85; color: #fff; font-variant-numeric: tabular-nums; }
#count span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #0098dc; }
#count b.is-tick { animation: count-pop 0.28s ease; }
@keyframes count-pop { from { transform: scale(1.16); opacity: 0.35; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #count b.is-tick { animation: none; } }

/* ---------- liquid glass (31/10/2026) ----------
   A foto da cabine ocupa a tela toda e os comandos flutuam por cima em vidro: translúcido, desfocado, com
   um filete de luz na borda de cima. Nada de neon: a cor continua a da Flight Class (azul só no que age). */
:root {
  --glass-tint: rgba(15, 19, 25, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.13);
  --glass-hi: rgba(255, 255, 255, 0.22);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 42%, rgba(255, 255, 255, 0));
  --glass-blur: blur(26px) saturate(1.8);
  --glass-shadow: 0 18px 46px -20px rgba(0, 0, 0, 0.75);
  /* azul dos botões com texto branco: 4,8:1 (o #0098dc dava 3,2:1) */
  --btn-blue: #0077c0;
  --btn-blue-hover: #006fb3;
}
.topbar, .flight .hud-top, .flight .comms, .view-tabs, .sel, .sheet-panel, .tour-card, .proc, .alert, .lang, #count {
  background: var(--glass-sheen), var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}
.btn.primary { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%), var(--btn-blue); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px -14px rgba(0, 0, 0, 0.9); }
.btn.primary:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%), var(--btn-blue-hover); }
.btn.ghost, .chip, .icon-btn { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
.btn.ghost:hover, .chip:hover, .icon-btn:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.2); color: var(--ink); }
.icon-btn[aria-pressed="true"], .chip[aria-pressed="true"] { background: rgba(56, 182, 255, 0.16); border-color: rgba(56, 182, 255, 0.55); color: #8fd3ff; }

/* topo do app: vidro que deixa a lista passar desfocada por baixo (antes o texto aparecia através do logo) */
.topbar { position: sticky; top: 8px; margin: 8px clamp(8px, 2vw, 16px) 0; padding: 10px clamp(12px, 3vw, 22px); border-radius: 22px; }
.brand-logo { height: 40px; }

/* rótulos em frase, sem caixa alta espaçada */
.who, .sel-actor, .sheet-label, .eyebrow, .hero .eyebrow, .sel-foot .linkish, .sel-close, #count span { text-transform: none; letter-spacing: 0; }
.who { font-size: 0.82rem; }
.sel-actor { font-size: 0.78rem; }
.sheet-label { font-size: 0.82rem; }
.hero .eyebrow { font-size: 0.92rem; }
.hero .eyebrow::before { display: none; }

/* voo: a cabine na tela toda; barra de cima e fala flutuando (no celular deitado fica a coluna da direita) */
@media not all and (orientation: landscape) and (max-height: 520px) {
  .flight.is-active { display: block; position: relative; height: 100dvh; overflow: hidden; }
  .flight .stage-wrap { position: absolute; inset: 0; }
  .flight .hud-top { position: absolute; z-index: 30; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; border-radius: 20px; padding: 6px 8px 6px 16px; }
  .flight .timeline { position: absolute; z-index: 31; top: 0; left: 0; right: 0; padding: 0; gap: 1px; opacity: 1; }
  .flight .timeline i { height: 3px; border-radius: 0; }
  .flight .comms { position: absolute; z-index: 30; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 24px; height: auto; min-height: 0; max-height: 42vh; overflow: auto; padding: 14px 18px; }
  .view-tabs { top: calc(var(--hud-h, 52px) + 20px); left: 12px; padding: 3px; gap: 2px; border-radius: 999px; max-width: calc(100% - 24px); }
  .view-tabs button { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: rgba(255, 255, 255, 0.76); }
  .view-tabs button:hover { background: rgba(255, 255, 255, 0.1); }
  .view-tabs button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.92); color: #0b0e12; }
  /* o alerta (MASTER WARN) fica abaixo das abas, sem tapar "Teto · fogo" */
  .alert { top: calc(var(--hud-h, 52px) + 68px); }
  .proc { top: calc(var(--hud-h, 52px) + 68px); bottom: calc(var(--comms-h, 120px) + 22px); right: 12px; border-radius: 22px; }
  .cl { top: calc(var(--hud-h, 52px) + 68px); max-height: calc(100% - var(--hud-h, 52px) - var(--comms-h, 120px) - 100px); }
  .pfd { bottom: calc(var(--comms-h, 120px) + 22px); left: 12px; border-radius: 14px; }
  .lens-host.docked { bottom: calc(var(--comms-h, 120px) + 22px); }
  .view-credit { bottom: calc(var(--comms-h, 120px) + 26px); }
}
@media (max-width: 640px) {
  .topbar { top: 6px; margin: 6px 8px 0; padding: 8px 12px; border-radius: 18px; }
  .brand-logo { height: 32px; }
  .flight .hud-top { left: 8px; right: 8px; top: calc(8px + env(safe-area-inset-top)); border-radius: 18px; padding: 4px 4px 4px 14px; }
  /* a caixa da fala tem o tamanho da fala da vez (muda com o idioma e com as respostas): sem altura mínima vazia */
  .flight .comms { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); border-radius: 22px; padding: 12px 14px; height: auto; min-height: 0; max-height: 50dvh; }
  .flight .comms .mic { top: 12px; right: 14px; }
  .view-tabs { top: calc(var(--hud-h, 52px) + 14px); left: 8px; max-width: calc(100% - 16px); }
  .alert { top: calc(var(--hud-h, 52px) + 58px); }
  .proc, .proc.is-both { top: calc(var(--hud-h, 52px) + 14px); bottom: calc(var(--comms-h, 196px) + 16px); left: 8px; right: 8px; }
  .cl { left: 8px; right: 8px; top: auto; bottom: calc(var(--comms-h, 196px) + 16px); }
  .lens-host, .lens-host.docked, .lens-host.docked.dock-left { left: 8px; right: 8px; top: auto; bottom: calc(var(--comms-h, 196px) + 16px); }
  .pfd { left: 8px; bottom: calc(var(--comms-h, 196px) + 16px); }
  .pfd:not([hidden]) ~ .lens-host.docked { top: calc(var(--hud-h, 52px) + 58px); bottom: auto; }
  .view-credit { bottom: calc(var(--comms-h, 196px) + 20px); }
}
/* respostas sem fila que rola de lado: quebram em linhas e todas ficam à vista */
@media (max-width: 900px) {
  .answers, .comms .answers { flex-wrap: wrap; overflow: visible; max-width: 100%; }
  .answers .chip, .comms .answers .chip { flex: 0 1 auto; max-width: 100%; }
}
/* celular deitado: a coluna da direita em vidro, encostada na cabine */
@media (orientation: landscape) and (max-height: 520px) {
  .flight .hud-top, .flight .timeline, .flight .comms { border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0; box-shadow: none; }
}

/* ficha da fase: o "Começar" fica numa base de vidro só dele, sem boiar por cima das escolhas */
#go-btn { position: static; }
.sheet-go { position: sticky; bottom: 0; z-index: 3; margin: 14px -20px -20px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); background: var(--glass-sheen), rgba(18, 22, 29, 0.88); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-edge); }
.sheet-go #go-btn { margin: 0; }
.sheet-go .sheet-mic { margin: 10px 0 0; }
/* a fala inteira, sem "…": o painel de vidro cresce até a metade da tela e rola se passar disso */
.flight .callout, .flight .hint { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
/* a janela do controle fica sempre por cima do vidro da fala e da barra (é o que o aluno precisa tocar) */
.flight .lens-host { z-index: 35; }
/* a foto anda com o dedo (arrastar e pinça): o navegador não rola nem dá zoom na página por cima dela */
.flight .stage { touch-action: none; cursor: grab; }
.flight .stage.is-panning, .flight .stage.is-panning .hs { cursor: grabbing; }
.flight .stage .hs { cursor: pointer; }
/* a fonte do passo mora no ⓘ, junto do porquê: embaixo da fala ela só ocupava espaço */
.flight .src-line { display: none !important; }
/* aula: "Voltar" e "Próximo" sempre à vista, numa base de vidro no pé do painel (no PC também) */
.sys-actions { position: sticky; bottom: -22px; z-index: 2; margin: 18px -28px -22px; padding: 14px 28px calc(16px + env(safe-area-inset-bottom)); background: var(--glass-sheen), rgba(18, 22, 29, 0.86); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-edge); }
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px), (orientation: landscape) and (max-height: 520px) {
  .sys-actions { bottom: 0; margin: 14px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}
.sys-panel { scroll-padding-bottom: 110px; }
/* pausa e "Sair do voo?" */
.flight .pause-cover { z-index: 40; }
.pause-cover .paused-note { margin: -6px 0 4px; font-size: 1rem; font-weight: 400; color: var(--muted); }
.paused-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* o cartão do checklist não rouba o toque dos controles que ficam embaixo dele (só o botão de recolher é dele) */
.cl { pointer-events: none; }
.cl .cl-toggle { pointer-events: auto; }
.sheet-panel { border-radius: 28px; }
@media (max-width: 640px) { .sheet-panel { border-radius: 26px 26px 0 0; } }

/* janela do controle e tutorial: vidro com mais leitura (a foto atrás pode ser clara) */
.sel { background: var(--glass-sheen), rgba(12, 15, 20, 0.8); border-radius: 26px; }
.tour-card { background: var(--glass-sheen), rgba(12, 15, 20, 0.84); border-radius: 22px; }
.sel-opt { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.sel-opt[aria-pressed="true"], .sel.is-checked .sel-opt[aria-pressed="true"], .sel.is-done .sel-opt[aria-pressed="true"] { background: var(--btn-blue); }
.pause-cover { background: rgba(10, 12, 16, 0.42); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
@media (prefers-reduced-transparency: reduce) {
  .topbar, .flight .hud-top, .flight .comms, .view-tabs, .sel, .sheet-panel, .tour-card, .proc, .alert, .lang, #count, .sheet-go { background: #12161c; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Toque no celular: link, termo do glossário e abas pequenas ganham área de toque de ~44 px sem mudar o desenho
   (Testar microfone, Ver o tutorial, Trocar função ou modo, o "Fechar" da janela, Minhas / Os dois) */
@media (pointer: coarse) {
  .linkish, button.term, .proc-switch button { position: relative; }
  .linkish::after, button.term::after { content: ""; position: absolute; inset: -12px -6px; }
  .proc-switch button::after { content: ""; position: absolute; inset: -12px -2px; }
}