/* Chevron · Kit de ativação — shell comum a todas as ativações físicas (kiosk, totem, painel LED).
   Depende de styles.css (tokens do design system). Nada aqui é específico de mapa. */

:root{
  /* escala de motion por magnitude — a duração comunica o tamanho do salto */
  --dur:350ms;                 /* valor corrente, trocado em runtime por setDur() */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-crossfade:300ms;       /* conteúdo troca no mesmo slot */
  --dur-card:450ms;            /* card entra/sai */
  --dur-step:600ms;            /* reenquadre curto (mesmo contexto) */
  --dur-zoom:900ms;            /* mudança de contexto (mundo → região) */
  --dur-return:1200ms;         /* volta ao início — mais lenta que a ida */
  /* superfície padrão de ativação — chapada; sem vinheta radial (não é da marca) */
  --act-bg:var(--blue-900);
  /* alvo mínimo de toque */
  --hit-min:44px;
}

*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a1626;font-family:var(--font-body);min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
a{color:var(--cvx-light-blue);text-decoration:none}
a:hover{color:#8ed6f2}

/* ---------- palco escalado (letterbox) — a arte é sempre autoral em px lógicos ---------- */
.stage{position:absolute;top:50%;left:50%;transform-origin:center}
.frame{position:relative;overflow:hidden;color:#fff;transform-origin:center;background:var(--act-bg);box-shadow:var(--shadow-lg)}

/* ---------- marca ---------- */
.logo{position:absolute;top:36px;left:52px;width:80px;height:auto;z-index:6}

/* ---------- guias de zona ergonômica (dev) ---------- */
.zguide{position:absolute;left:0;right:0;border-top:1px dashed rgba(255,255,255,.13);font-family:var(--font-condensed);font-size:11px;color:rgba(255,255,255,.30);padding:2px 6px;z-index:5;pointer-events:none}

/* ---------- camadas de UI que se cruzam no mesmo palco ---------- */
.ui{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease)}
.ui.active{opacity:1}
.ui.active .hit{pointer-events:auto}

/* ---------- scrim de cabeçalho: repete o fundo e oculta o que se move atrás do texto ---------- */
.scrim{position:absolute;top:0;left:0;right:0;height:300px;z-index:2;pointer-events:none;background:var(--act-bg);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 88px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 88px),transparent 100%);
  transition:opacity var(--dur) var(--ease),height var(--dur) var(--ease)}

/* ---------- tipografia de ativação ---------- */
.kicker{position:absolute;left:52px;right:52px;font-family:var(--font-condensed);font-weight:700;font-size:21px;letter-spacing:.06em;color:var(--cvx-light-blue)}
.title{position:absolute;left:52px;right:52px;font-weight:700;line-height:1.12}
.lead{position:absolute;left:52px;right:52px;font-size:16px;line-height:1.5;color:var(--text-body)}
.note{position:absolute;left:52px;right:52px;font-family:var(--font-condensed);font-size:15px;color:var(--text-caption)}
.invite{position:absolute;left:52px;right:52px;text-align:center;font-family:var(--font-condensed);font-size:19px;color:var(--text-muted)}
.gtitle{position:absolute;left:52px;right:52px;text-align:center;font-weight:700;line-height:1.14}

/* ---------- legenda ---------- */
.legend{position:absolute;left:52px;right:52px;display:flex;gap:12px;align-items:center;font-family:var(--font-condensed);font-size:18px;color:var(--text-body)}
.sw{width:16px;height:16px;border-radius:4px;flex:none}

/* ---------- botões ---------- */
.touchbar{position:absolute;left:52px;right:52px;display:flex;gap:18px}
.btn{flex:1;display:flex;align-items:center;justify-content:center;gap:14px;border-radius:var(--radius-md);color:#fff;font-family:var(--font-body);font-weight:var(--fw-bold);font-size:22px;padding:15px 20px;border:none;box-shadow:var(--shadow-md);cursor:pointer;min-height:var(--hit-min)}
.btn.primary{background:var(--action)}
.btn.ghost{background:var(--surface-ghost);border:2px solid rgba(255,255,255,.28);font-weight:700;box-shadow:none}
.chev{display:inline-block;width:22px;height:14px;position:relative}
.chev i{position:absolute;left:0;width:100%;height:44%;background:#fff;clip-path:polygon(0 0,50% 60%,100% 0,100% 40%,50% 100%,0 40%)}
.chev i:nth-child(2){bottom:0}
.chev.r{transform:rotate(-90deg)}.chev.l{transform:rotate(90deg)}
.nav{position:absolute;width:70px;height:58px;border-radius:var(--radius-md);background:var(--surface-ghost);border:2px solid rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:var(--fw-bold);cursor:pointer}
.navchev{display:inline-block;width:20px;height:13px;position:relative}
.navchev i{position:absolute;left:0;width:100%;height:44%;background:#fff;clip-path:polygon(0 0,50% 60%,100% 0,100% 40%,50% 100%,0 40%)}
.navchev i:nth-child(2){bottom:0}.navchev.l{transform:rotate(90deg)}

/* ---------- card inferior ---------- */
.card{position:absolute;background:var(--surface-raised);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:7;
  opacity:0;transform:translateY(30px);pointer-events:none;transition:opacity var(--dur-card) var(--ease),transform var(--dur-card) var(--ease)}
.card.open{opacity:1;transform:translateY(0);pointer-events:auto}
.card-inner{transition:opacity 150ms var(--ease)}
.card-body{padding:16px 18px 20px}
.card-kicker{font-family:var(--font-condensed);font-weight:700;font-size:15px;letter-spacing:var(--ls-eyebrow);color:var(--cvx-light-blue);margin-bottom:5px}
.card-name{font-family:var(--font-condensed);font-weight:700;font-size:20px;letter-spacing:.06em;color:var(--cvx-light-blue);margin-bottom:8px}
.card-text{font-size:16px;line-height:1.46;color:rgba(255,255,255,.85)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:14px;padding-top:13px;border-top:1px solid var(--border-hairline);flex-wrap:wrap}
.card-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;background:var(--action);border:2px solid rgba(255,255,255,.5);color:#fff;font-size:20px;font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;cursor:pointer}

/* ---------- paginação (passos dentro de um mesmo contexto) ---------- */
.card-pg{display:flex;align-items:center;gap:14px}
.pgcount{display:flex;align-items:center;gap:8px}
.pgcount .d{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.26)}
.pgcount .d.on{background:var(--cvx-light-blue)}
.pgadv{display:flex;align-items:center;gap:10px;background:var(--action);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-body);font-weight:800;font-size:16px;padding:11px 18px;cursor:pointer;min-height:var(--hit-min)}

/* ---------- código de cor de dados (operador / não-operador) ---------- */
.card-legend{display:flex;gap:18px;font-family:var(--font-condensed);font-size:15px;color:var(--text-body)}
.card-legend i{display:inline-block;width:13px;height:13px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.card-legend i.op{background:#7a0e2e}
.card-legend i.non{background:#e6201c}

/* ---------- rótulos sobre a arte, com linha-guia ---------- */
.blabels{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity var(--dur-crossfade) var(--ease)}
.blabels.on{opacity:1}
.blead{position:absolute;inset:0;overflow:visible}
.blead line{stroke:rgba(255,255,255,.55);stroke-width:1.3}
.blead circle{fill:rgba(255,255,255,.8)}
.blabel{position:absolute;transform:translateY(-50%);font-family:var(--font-condensed);font-weight:700;font-size:19px;letter-spacing:.01em;color:#eef5fc;white-space:nowrap;padding:3px 9px 3px 10px;border-radius:6px;background:rgba(7,20,38,.82);border:1px solid rgba(255,255,255,.16)}
.blabel.op{border-left:5px solid #a2233a}
.blabel.non{border-left:5px solid #e6201c}

/* ---------- HUD de desenvolvimento (remover na produção) ---------- */
.hud{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;z-index:50;
  background:rgba(7,20,38,.88);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 12px;backdrop-filter:blur(8px);
  font-family:var(--font-condensed);color:#cdd8ea;font-size:13px;flex-wrap:wrap;max-width:96vw;justify-content:center}
.hud button{font-family:inherit;font-size:13px;font-weight:700;color:#fff;background:var(--action);border:none;border-radius:8px;padding:8px 12px;cursor:pointer}
.hud button.sec{background:rgba(255,255,255,.10)}
.hud .lab{min-width:190px;text-align:center;color:#eaf3fb}
.hud .tim{color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.hud .tgl{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.hud .sep{width:1px;height:22px;background:rgba(255,255,255,.16)}