/* =========================================================
   SKYVIDYA — Design System Web
   Portado do slide deck para layout responsivo scroll-snap
   editorial suíço × cartográfico moderno × HUD aeroespacial
   ========================================================= */

/* ---------------------------------------------------------
   Fontes
   --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

/* ---------------------------------------------------------
   Tokens globais
   --------------------------------------------------------- */
:root {
  /* Ink (dark base) */
  --ink-1000: #06070A;
  --ink-900:  #0A0B0D;
  --ink-800:  #14161A;
  --ink-700:  #1B1E24;
  --ink-600:  #262A33;
  --ink-500:  #353A45;
  --line:     #232830;
  --line-soft:#1A1D23;

  /* Paper (light variant — reservado para temas futuros) */
  --paper-100: #FFFFFF;
  --paper-200: #F4F1EA;
  --paper-300: #ECE6DA;
  --paper-400: #D9D2C2;

  /* Texto */
  --text-strong: #F6F4EE;
  --text-base:   #C9CBD1;
  --text-soft:   #8A8F99;
  --text-mute:   #5A5F6A;

  /* Brand */
  --skyvidya-coral:       #FF5C2E;
  --skyvidya-coral-deep:  #E04217;
  --skyvidya-coral-soft:  #FF8763;
  --skyvidya-cyan:        #4ED2D2;
  --skyvidya-cyan-deep:   #2BA8A8;
  --skyvidya-success:     #4EE08E;
  --skyvidya-warn:        #F6C612;

  /* Data — sequencial (profundidade/exposição) viridis-cyan */
  --seq-1: #1E1F4A;
  --seq-2: #2C3A8A;
  --seq-3: #2A6FA8;
  --seq-4: #1FA7B0;
  --seq-5: #5FD6A4;
  --seq-6: #D9F37C;
  --seq-7: #FFFAA8;

  /* Data — divergente (mudança, antes↔depois) teal–neutro–coral */
  --div-n3: #1FA7B0;
  --div-n2: #5FBFC6;
  --div-n1: #B6DCDE;
  --div-0:  #E8E4DA;
  --div-p1: #F4B79A;
  --div-p2: #FF8763;
  --div-p3: #FF5C2E;

  /* Tipografia */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-italic:  "Instrument Serif", "Source Serif Pro", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body:    "Inter Tight", "Inter", system-ui, sans-serif;

  /* Escala tipográfica — web responsiva (rem) */
  --t-mono:     0.75rem;   /* 12px — HUD labels */
  --t-micro:    0.8125rem; /* 13px */
  --t-small:    0.875rem;  /* 14px */
  --t-body:     1rem;      /* 16px */
  --t-lede:     1.25rem;   /* 20px */
  --t-h4:       1.5rem;    /* 24px */
  --t-h3:       1.875rem;  /* 30px */
  --t-h2:       2.5rem;    /* 40px */
  --t-h1:       3.5rem;    /* 56px */
  --t-display:  5rem;      /* 80px */
  --t-mega:     8rem;      /* 128px — capítulos */

  /* Espaçamento (baseline 8px) */
  --pad-x:      clamp(24px, 5vw, 96px);
  --pad-y:      clamp(48px, 6vh, 88px);
  --gap-col:    clamp(16px, 2vw, 32px);

  /* Misc */
  --radius:     6px;
  --radius-lg:  10px;
  --tracking-eyebrow: 0.18em;
  --tracking-mono:    0.04em;

  /* Tema escuro (padrão) */
  --bg:          var(--ink-900);
  --bg1:         var(--ink-800);
  --bg2:         var(--ink-700);
  --fg:          var(--text-strong);
  --fg-mid:      var(--text-base);
  --fg-soft:     var(--text-soft);
  --fg-mute:     var(--text-mute);
  --rule:        var(--line);
  --rule-soft:   var(--line-soft);
  --grid-tint:   rgba(255, 255, 255, 0.025);
  --glass:       rgba(10, 11, 13, 0.88);
}

/* ---------------------------------------------------------
   Reset + base
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

/* Textura de grade sutil — presente em seções */
.deck-section {
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-tint) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-tint) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  background-position: -1px -1px, -1px -1px;
}

/* Gradiente radial coral — seções de divisor */
.deck-section--divider {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-tint) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-tint) 1px, transparent 1px),
    radial-gradient(ellipse 70% 50% at 25% 60%, color-mix(in srgb, var(--skyvidya-coral) 8%, transparent), transparent 70%);
  background-size: 80px 80px, 80px 80px, 100% 100%;
}

/* Gradiente capa — hero com coral+cyan */
.deck-section--hero {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-tint) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-tint) 1px, transparent 1px),
    radial-gradient(ellipse 70% 40% at 15% 15%, rgba(255,92,46,.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 85%, rgba(78,210,210,.06) 0%, transparent 55%);
  background-size: 80px 80px, 80px 80px, 100% 100%, 100% 100%;
}

/* ---------------------------------------------------------
   Container e Grid
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-col);
}

.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: span 12; }
  .grid-12 { grid-template-columns: 1fr; }
}

/* Stack e Row */
.stack { display: flex; flex-direction: column; }
.row   { display: flex; flex-direction: row; }
.grow  { flex: 1; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }
.gap-4 { gap: 32px; }
.gap-5 { gap: 48px; }
.gap-6 { gap: 64px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 48px; }
.mt-6 { margin-top: 64px; }
.mt-auto { margin-top: auto; }

/* ---------------------------------------------------------
   HUD — barra de status superior/inferior
   --------------------------------------------------------- */
.hud {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--fg-soft);
  text-transform: uppercase;
  padding: 0 var(--pad-x);
}
.hud--top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-soft);
  height: 52px;
}
.hud--page {
  padding-top: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule-soft);
}
.hud .sep { flex: 1; height: 1px; background: var(--rule); }
.hud .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--skyvidya-coral); display: inline-block; margin-right: 6px; }
.hud .dot--cyan { background: var(--skyvidya-cyan); }
.hud .dot--ok   { background: var(--skyvidya-success); animation: hud-pulse 2.5s ease-in-out infinite; }

@keyframes hud-pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }

/* Mobile: os itens + gaps de 20px pediam ~437px numa tela de 375px, então o
   "Sair" saía cortado e a página deslizava para o lado. Aperta o espaçamento
   e dispensa o selo de versão, que não é acionável. */
@media (max-width: 760px) {
  .hud--top { gap: 10px; padding: 0 12px; }
  .hud-version { display: none; }
  .hud--top > span:not(.sep):not(.hud-version) {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ---------------------------------------------------------
   Brand mark
   --------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.brand-dot {
  width: 8px;
  height: 8px;
  background: var(--skyvidya-coral);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255,92,46,.7);
  animation: hud-pulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   Primitivas tipográficas
   --------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-soft);
}
.eyebrow .num { color: var(--skyvidya-coral); }

.h-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--fg);
}
.h-1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: 1.0;
  letter-spacing: -0.028em;
  text-wrap: balance;
  color: var(--fg);
}
.h-2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--fg);
}
.h-3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--fg);
}

.italic-accent {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.coral  { color: var(--skyvidya-coral) !important; }
.cyan   { color: var(--skyvidya-cyan) !important; }
.soft   { color: var(--fg-soft) !important; }
.muted  { color: var(--fg-mute) !important; }
.success{ color: var(--skyvidya-success) !important; }
.warn   { color: var(--skyvidya-warn) !important; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.4;
  color: var(--fg-mid);
  text-wrap: pretty;
}
.body-text {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--fg-mid);
  text-wrap: pretty;
}
.small-text {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-soft);
}
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* Sublinhado coral accent */
.u-coral {
  text-decoration: underline;
  text-decoration-color: var(--skyvidya-coral);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}

/* Numeral de capítulo (mega) */
.numeral {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-mega);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--fg-mute);
  user-select: none;
}
.numeral.solid {
  color: var(--fg);
  -webkit-text-stroke: 0;
}

/* Coordinate badge */
.coord-badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--skyvidya-coral);
  letter-spacing: 0.04em;
}
.coord-badge .pip { width: 8px; height: 8px; background: var(--skyvidya-coral); border-radius: 50%; }

/* ---------------------------------------------------------
   Cards e brackets
   --------------------------------------------------------- */
.card {
  border: 1px solid var(--rule);
  background: var(--bg1);
  padding: 24px;
  border-radius: var(--radius);
  position: relative;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.card:hover {
  border-color: rgba(255,92,46,0.3);
  background: var(--bg2);
  transform: translateY(-2px);
}
.card--glass {
  background: var(--glass);
  backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,0.06);
}

.brackets { position: relative; }
.brackets::before, .brackets::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--skyvidya-coral);
  pointer-events: none;
}
.brackets::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.brackets::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ---------------------------------------------------------
   KPI
   --------------------------------------------------------- */
.kpi {
  border: 1px solid var(--rule);
  background: var(--bg1);
  padding: 24px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kpi .kpi-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.kpi .kpi-num .unit { font-size: 0.45em; color: var(--fg-soft); letter-spacing: -0.01em; margin-left: 4px; }
.kpi .kpi-lbl { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-soft); }
.kpi .kpi-ctx { font-size: var(--t-small); line-height: 1.5; color: var(--fg-mid); }
.kpi .kpi-delta {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.04em;
  color: var(--skyvidya-coral);
  padding: 3px 8px;
  border: 1px solid var(--rule);
  white-space: nowrap;
  align-self: flex-start;
}
.kpi.kpi--ok .kpi-delta { color: var(--skyvidya-success); }
.kpi.kpi--warn .kpi-delta { color: var(--skyvidya-warn); }

/* ---------------------------------------------------------
   Bar row (gráfico de barras horizontal)
   --------------------------------------------------------- */
.bar-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.bar-row .br-lab {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--fg-mid);
  text-transform: uppercase;
}
.bar-row .br-bar {
  height: 12px;
  background: var(--bg2);
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
.bar-row .br-bar i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--skyvidya-coral);
  border-radius: 2px;
}
.bar-row .br-bar.cyan i { background: var(--skyvidya-cyan); }
.bar-row .br-val {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--fg);
  text-align: right;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   Map frame e componentes cartográficos
   --------------------------------------------------------- */
.map-frame {
  position: relative;
  background: var(--bg1);
  border: 1px solid var(--rule);
  overflow: hidden;
  border-radius: var(--radius);
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.map-attrib {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  padding: 2px 6px;
  border-radius: 3px;
}
.map-scale {
  position: absolute;
  bottom: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-soft);
  letter-spacing: 0.04em;
}
.map-scale .bar {
  display: flex; width: 120px; height: 6px; border: 1px solid var(--fg-mute);
}
.map-scale .bar span { flex: 1; }
.map-scale .bar span:nth-child(odd) { background: var(--fg-soft); }

.legend {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mid);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(4px);
  border-radius: var(--radius);
}
.legend .lrow { display: flex; align-items: center; gap: 8px; }
.legend .sq { width: 12px; height: 12px; flex-shrink: 0; border-radius: 2px; }

/* ---------------------------------------------------------
   Map embed — iframe real com lazy-load e skeleton
   --------------------------------------------------------- */
.map-frame--embed {
  height: clamp(440px, 60vh, 640px);
  cursor: pointer; /* chamariz: clicar abre o mapa completo */
}
iframe.map-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none; /* preview não-interativo: clique cai no frame → navega */
}

/* Skeleton de loading */
.map-skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 100%);
  transition: opacity .5s ease;
}
.map-skeleton.is-loaded {
  opacity: 0;
  pointer-events: none;
}
.map-skeleton__pulse {
  width: 56px;
  height: 56px;
  border: 2px solid var(--rule);
  border-top-color: var(--skyvidya-coral);
  border-radius: 50%;
  animation: map-spin 1s linear infinite;
}
.map-skeleton__label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@keyframes map-spin { to { transform: rotate(360deg); } }

/* Botão toggle de interação com mapa */
.map-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: color .2s, border-color .2s;
}
.map-toggle:hover { color: var(--skyvidya-coral); border-color: rgba(255,92,46,.4); }
.map-frame.is-active .map-toggle {
  color: var(--skyvidya-cyan);
  border-color: rgba(78,210,210,.5);
}
.map-toggle__icon { font-size: 11px; }

/* Mobile fallback: ocultar iframe, mostrar CTA */
.map-mobile-fallback {
  display: none;
  padding: 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--fg-mute);
}
@media (max-width: 900px) {
  /* mobile-first: mini-mapa continua visível como chamariz tocável (→ mapa completo) */
  .map-frame--embed { height: clamp(260px, 46vh, 420px); }
  .map-mobile-fallback { display: none; }
}

/* ---------------------------------------------------------
   Legenda sobre o mapa (capítulos) — colapsável
   Usa <details>/<summary>: colapsa sem JavaScript e mantém o
   comportamento no teclado.
   --------------------------------------------------------- */
.legend-collapse { display: block; }
.legend-collapse > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 2px;
}
.legend-collapse > summary::-webkit-details-marker { display: none; }
.legend-collapse > summary::after {
  content: '▾';
  margin-left: auto;
  font-size: 9px;
  color: var(--fg-mute);
  transition: transform .25s;
}
.legend-collapse[open] > summary::after { transform: rotate(180deg); }
.legend-collapse > summary:hover { color: var(--skyvidya-coral); }
/* fechada, sobra só o título — libera o mapa */
.legend-collapse:not([open]) > summary { margin-bottom: 0; }

/* ---------------------------------------------------------
   Marca — logotipo Skyvidya no cabeçalho
   O arquivo é branco sobre transparente (o recorte do "S" deixa
   passar o fundo escuro), por isso não precisa de filtro.
   --------------------------------------------------------- */
.brand-logo {
  height: 20px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   Sair — encerra a sessão nas páginas restritas
   --------------------------------------------------------- */
.btn-logout {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.btn-logout:hover { color: var(--skyvidya-coral); border-color: rgba(255,92,46,.45); }
/* quando divide a barra com o toggle de insights, o toggle já empurra */
.panel-toggle + .btn-logout { margin-left: 10px; }

/* ---------------------------------------------------------
   Capítulos — painel de insights colapsável (ampliar mapa)
   --------------------------------------------------------- */
.page-body.panel-collapsed { grid-template-columns: 1fr !important; }
.page-body.panel-collapsed .side-panel { display: none; }
/* Botão inline na barra do topo (.hud-page) — fica ACIMA do iframe, nunca
   sobre o ✕ do painel de detalhe da célula (que é interno ao mapa). */
.panel-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mid);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border: 1px solid var(--rule);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  box-shadow: -2px 2px 10px rgba(0,0,0,.22);
  transition: color .2s, border-color .2s;
  /* na vertical: rouba pouca largura do mapa */
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.panel-toggle:hover { color: var(--skyvidya-coral); border-color: rgba(255,92,46,.4); }
/* mobile: encolher rótulos e remover separadores p/ o botão caber na barra */
@media (max-width: 760px) {
  .hud-page { gap: 12px; }
  .hud-page > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hud-page .sep { display: none; }
}

/* ---------------------------------------------------------
   Regras decorativas
   --------------------------------------------------------- */
.rule { height: 1px; background: var(--rule); width: 100%; }
.rule--coral { background: var(--skyvidya-coral); height: 2px; width: 64px; }

/* Ramp de cores */
.ramp {
  display: flex;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.ramp > span { flex: 1; }

/* ---------------------------------------------------------
   Navigation rail lateral (deck-runtime)
   --------------------------------------------------------- */
.deck-rail {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
}
.deck-rail .dot-nav {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-mute);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  border: 0;
  padding: 0;
}
.deck-rail .dot-nav:hover,
.deck-rail .dot-nav.active {
  background: var(--skyvidya-coral);
  transform: scale(1.5);
}
@media (max-width: 768px) { .deck-rail { display: none; } }

/* ---------------------------------------------------------
   Seção hero — capa
   --------------------------------------------------------- */
.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.97;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--fg);
}
.hero-lede {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.35;
  color: var(--fg-mid);
  text-wrap: pretty;
}

/* ---------------------------------------------------------
   Cover meta strip
   --------------------------------------------------------- */
.cover-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.cover-meta .cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 24px;
}
.cover-meta .cell:not(:last-child) {
  border-right: 1px solid var(--rule);
  margin-right: 24px;
}
.cover-meta .k { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--fg-mute); }
.cover-meta .v { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.02em; color: var(--fg); }

/* ---------------------------------------------------------
   Tabela prescritiva
   --------------------------------------------------------- */
.presc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
}
.presc-table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.presc-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--fg-mid);
  vertical-align: top;
  line-height: 1.5;
}
.presc-table tr:hover td { background: var(--bg1); }
.badge-critico  { color: var(--skyvidya-coral); }
.badge-baixo    { color: var(--skyvidya-coral-soft); }
.badge-moderado { color: var(--skyvidya-warn); }
.badge-bom      { color: var(--skyvidya-success); }

/* ---------------------------------------------------------
   Layer stack (metodologia)
   --------------------------------------------------------- */
.layer-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.layer-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: background 0.15s;
}
.layer-item:hover { background: color-mix(in srgb, var(--bg1) 80%, transparent); }
.layer-num {
  font-family: var(--font-mono);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--fg-mute);
  text-align: right;
  line-height: 1;
}
.layer-name { font-weight: 600; color: var(--fg); font-size: var(--t-body); }
.layer-sub { font-size: var(--t-small); color: var(--fg-soft); margin-top: 2px; }
.layer-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  color: var(--fg-mute);
  border-radius: 3px;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   Utilidades gerais
   --------------------------------------------------------- */
a { color: inherit; }
strong { font-weight: 600; }
em { font-family: var(--font-italic); font-style: italic; }