/* ── ORBY ASTROLOGY ICON FONT ── */
/*   A fonte tem um só peso físico (~400). Declarar range 100–900
 *   impede que o browser aplique synthetic-lightening quando o
 *   canvas pede weight 200 — mantendo métricas de glyph estáveis
 *   e o offset de measureText calibrado. */
@font-face {
  font-family: 'Orby Astrology';
  src: url('../icons/fonte/OrbyAstrology.woff2?v=1030') format('woff2'),
       url('../icons/fonte/OrbyAstrology.ttf?v=1030') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── ORBY TEXT FONT (inline textual symbols) ── */
@font-face {
  font-family: 'Orby Text';
  src: url('../icons/fonte/orby-text.woff2') format('woff2'),
       url('../icons/fonte/orby-text.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── TOKENS ── */
:root {
  --blue: #1A36C7;
  --creme: #faf4ed;
  --black: #000000;
  --bg: #faf4ed;
  --bg-2: #f0ebe3;
  --bg-3: #e8e2da;
  --surface: rgba(26,54,199,0.10);
  --surface-hover: rgba(26,54,199,0.08);
  --border: #1A36C7;
  --border-bright: #1A36C7;
  --text: #1A36C7;
  --text-dim: rgba(26,54,199,0.55);
  --text-faint: rgba(26,54,199,0.50);
  --gold: #C49A3C;
  --gold-dim: rgba(196,154,60,0.50);
  --gold-rgb: 196,154,60;
  --gold-glow: rgba(196,154,60,0.3);
  --ink: #1A1814;
  --ink-b: #39362A;
  --menta: #b2dadb;
  --blue-glow: rgba(26,54,199,0.3);
  --tension: #ff5050;
  --tension-rgb: 255,80,80;
  --blue-rgb: 26,54,199;
  --text-rgb: 26,54,199;
  --z-sticky: 100;
  --z-tooltip: 1000;
  --z-overlay: 2000;
  --z-lunar: 5000;
  --z-nav: 9000;
  --z-auth: 9999;
  --z-modal: 10000;
  --z-sheet: 10100;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 20px);
  --app-height: 100vh;
  --overlay-sep: rgba(26,54,199,0.15);
  --overlay-dot: rgba(26,54,199,0.25);
  --overlay-dot-active: rgba(26,54,199,0.55);
  --font: 'Archivo', sans-serif;
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-base: 12px;
  --fs-md: 13px;
  --fs-lg: 16px;
  --fw-regular: 400;
  --fw-bold: 700;
  --col-left: 320px;
  --col-center: 1fr;
  --col-report: 380px;
  --col-right: 340px;
  /* Altura típica da .header-top (só padding 20 + conteúdo + 20, sem min-height extra) */
  --header-top-h: 72px;
  --header-h: calc(var(--header-top-h) + var(--safe-top));
  --footer-h: 60px;
  --footer-total-h: calc(var(--footer-h) + var(--safe-bottom));
  --gantt-bottom-gap: 0px; /* canvas draws its own bottom gradient via GANTT_BOTTOM_GAP */
  --chart-safe-top: calc(var(--header-h) + 12px);
  --chart-safe-bottom: calc(var(--footer-total-h) + 12px);
  /* Moldura global: faixa entre header/footer com janela arredondada no miolo.
     --frame-w fica 0 por padrão; vira 12px só no desktop com gráfico ativo. */
  --frame-w: 0px;
  --frame-radius: 16px;
  --split-handle-h: 8px;
  /* Grid mestre: 12 trilhas, gap 8px, padding horizontal 8px. 104px = 2*pad + 11*gap. */
  --grid-master-gap: 8px;
  --grid-master-pad-x: 8px;
  --grid-master-template: repeat(12, minmax(0, 1fr));
  --grid-master-viewport-content: calc(100vw - 2 * var(--grid-master-pad-x) - 11 * var(--grid-master-gap));
  --grid-col: calc((var(--grid-master-viewport-content) - 11 * var(--grid-master-gap)) / 12);
  --half-col: calc(var(--grid-master-viewport-content) / 24);
  --half-grid-col: calc(var(--grid-col) / 2);
  --transit-graph-chevron-w: 42px;
  --transit-graph-chevron-h: 9px;
}

@supports (height: 100dvh) {
  :root {
    --app-height: 100dvh;
  }
}

/* Altura total do header (incl. datebar na home): definida por syncAppHeaderHeight() em app.js */

[data-theme="blunt-dark"] .report-aspect-type.tensao,
[data-theme="dark"] .report-aspect-type.tensao {
  background: rgba(var(--tension-rgb), 0.15);
  color: var(--tension);
}

/* Ícones Unicode (símbolos planetários/signos) — ambos os temas */
.unicode-icon {
  font-weight: 700;
}

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

html, body {
  min-height: 100vh;
  min-height: var(--app-height);
  height: var(--app-height);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
  touch-action: pan-x pan-y;
}

/* ── HEADER ── */
#app-header {
  position: fixed; top: 0; left: 0; right: 0;
  /* Altura = conteúdo (safe + .header-top + datebar na home); --header-h vem de syncAppHeaderHeight() */
  height: auto;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 10%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  isolation: isolate;
  z-index: var(--z-sticky);
}

.ios-standalone #app-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Overlay aberto: header acima do overlay (--z-overlay=2000) para o conteúdo e o
   carto bg passarem POR BAIXO do header translúcido (blur), e não por cima.
   Fica abaixo de nav (9000) e modais (10000), então alertas seguem no topo.
   ov2-overlay-open: OV2 (planeta/casa) em viewport inteiro — o header sobe acima
   dele; o footer-nav (z-nav 9000) já está sempre acima. NÃO reusa
   planet-detail-overlay-open (que carrega regras legadas de header-close). */
html.planet-detail-overlay-open #app-header,
html.ov2-overlay-open #app-header,
html.friends-syn-detail-open #app-header { z-index: calc(var(--z-overlay) + 3); }

.ios-standalone #app-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 10%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: none;
  z-index: 0;
}
.header-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--grid-master-template);
  gap: var(--grid-master-gap);
  padding: 20px var(--grid-master-pad-x);
  box-sizing: border-box;
  flex-shrink: 0;
  align-items: center;
}
.header-datebar {
  position: relative;
  z-index: 1;
  height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text);
  letter-spacing: 0.08em;
}
body:not(:has(#page-home.active)) .header-datebar { display: none; }
#live-date {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.header-transit-report-bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--grid-master-gap);
  height: 20px;
  padding: 0 var(--grid-master-pad-x);
  box-sizing: border-box;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text);
  letter-spacing: 0.08em;
}
/* [hidden] perde para .header-transit-report-bar { display:flex } sem esta regra — faixa ficava visível em Gráficos */
#header-transit-report-bar[hidden] {
  display: none !important;
}
.header-transit-graphs-bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--grid-master-gap);
  height: 20px;
  padding: 0 var(--grid-master-pad-x);
  box-sizing: border-box;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text);
  letter-spacing: 0.08em;
}
#header-transit-graphs-bar[hidden] {
  display: none !important;
}
#header-page-context-bar[hidden] {
  display: none !important;
}
body:not(:has(#page-transits.active)) #header-transit-graphs-bar {
  display: none !important;
}
body:not(:has(#page-transits.active)) #header-transit-report-bar {
  display: none !important;
}
.header-transit-report-bar-label {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  font-family: var(--font, 'Archivo', sans-serif);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

.header-brand {
  grid-column: 1 / 7;
  padding-left: var(--half-col);
  display: flex; flex-direction: column; gap: 1px;
}
.header-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo-l1 {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 1.25em;
  font-size: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.logo-wordmark {
  position: relative;
  display: inline-block;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.logo-l1-text {
  display: inline-block;
}
.logo-cursor-slot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 1em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.logo-underline-cursor {
  display: inline-block;
  font-size: 1.15em;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0;
  vertical-align: bottom;
  transform: scaleX(1.35);
  transform-origin: left center;
}
.header-logo.logo-show-wordmark .logo-wordmark {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.header-logo.logo-show-wordmark .logo-cursor-slot {
  opacity: 0;
  pointer-events: none;
}
.header-logo.logo-show-cursor .logo-wordmark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.header-logo.logo-show-cursor .logo-cursor-slot {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* ── HEADER CONTROLS ── */
.header-controls {
  grid-column: 11 / 13;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: var(--half-col);
}

@media (max-width: 768px) {
  #app-header .header-controls-orby {
    display: none !important;
  }
}

html.planet-detail-overlay-open .header-controls {
  grid-column: 1 / 13;
  justify-self: stretch;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-right: 0;
}
html.planet-detail-overlay-open .header-controls-orby {
  display: flex;
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
  padding-right: var(--half-col);
}
html.planet-detail-overlay-open .header-controls-transit {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 2;
  justify-self: center;
}

/* Fechar no header: não usar 1/12 da viewport (.aspect-overlay-close), senão desktop largo (>~2kpx) explode a altura do #app-header. */
#app-header .aspect-overlay-close {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  flex-shrink: 0;
  border: 1px solid currentColor;
  background: transparent;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
#app-header .overlay-save-btn {
  min-width: 32px;
  height: 32px;
  padding: 4px 8px;
  justify-content: center;
}

:root[data-theme="blunt-light"].planet-detail-overlay-open #app-header .header-controls-transit .overlay-save-btn,
:root[data-theme="blunt-light"].planet-detail-overlay-open #app-header .header-controls-transit .aspect-overlay-close {
  color: var(--gold);
}
:root[data-theme="blunt-light"].planet-detail-overlay-open #app-header .header-controls-transit .aspect-overlay-close {
  border-color: var(--gold);
}
:root[data-theme="blunt-light"].planet-detail-overlay-open #app-header .header-controls-transit .overlay-save-btn svg path {
  stroke: var(--gold);
}
:root[data-theme="blunt-light"].planet-detail-overlay-open #app-header .header-controls-transit .overlay-save-btn.overlay-save-btn--saved {
  color: var(--gold);
}
:root[data-theme="blunt-light"].planet-detail-overlay-open #app-header .header-controls-transit .overlay-save-btn.overlay-save-btn--saved svg path {
  fill: var(--gold);
  stroke: var(--gold);
}

@media (max-width: 768px) {
  /* Layout robusto do header durante overlay de trânsito (mobile):
     reescrevemos o grid de 12 colunas para 1fr auto 1fr e usamos
     `display: contents` em .header-controls para promover seus filhos
     ao grid externo. Resultado garantido em UMA linha:
       [ _ ] [ Salvar + FECHAR ] [ ORBY_ ]
     Sem sobreposição com .header-brand, sem wrap em iPhone. */
  html.planet-detail-overlay-open .header-top {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    column-gap: 8px;
    row-gap: 0;
    align-items: center;
    padding: 12px var(--half-col);
  }
  html.planet-detail-overlay-open .header-brand {
    grid-column: 1;
    grid-row: 1;
    padding-left: 0;
    justify-self: start;
    align-self: center;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 32px;
    z-index: 1;
  }
  html.planet-detail-overlay-open .header-logo {
    display: flex;
    align-items: center;
  }
  html.planet-detail-overlay-open .logo-l1 {
    align-items: center;
    min-height: 32px;
    font-size: 14px;
  }
  html.planet-detail-overlay-open .logo-underline-cursor {
    font-size: 1.1em;
  }
  /* `.header-controls` deixa de ser caixa: seus filhos viram itens
     do grid externo .header-top diretamente. */
  html.planet-detail-overlay-open .header-controls {
    display: contents;
  }
  html.planet-detail-overlay-open .header-controls-transit {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: center;
    align-self: center;
    min-height: 32px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  html.planet-detail-overlay-open #app-header .header-controls-orby {
    grid-column: 3;
    grid-row: 1;
    display: flex !important;
    align-items: center;
    justify-self: end;
    align-self: center;
    padding-right: 0;
    margin-left: 0;
    min-height: 32px;
  }
  html.planet-detail-overlay-open #oracle-btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 4px 6px;
  }
  /* Garante "FECHAR" textual com borda, 10px, caixa-alta, sempre — mesmo em mobile. */
  html.planet-detail-overlay-open #app-header .aspect-overlay-close {
    width: auto;
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid currentColor;
    background: transparent;
    border-radius: 3px;
  }
  html.planet-detail-overlay-open #app-header .overlay-save-btn {
    height: 28px;
    min-width: 28px;
    padding: 0 6px;
  }
}

.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: var(--fs-xs);
  width: 32px;
  height: 32px;
  margin: 8px;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  border-color: var(--border-bright);
  color: var(--text);
}

/* ── MAIN LAYOUT ── */
#app-main {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  height: var(--app-height);
  overflow: hidden;
  line-height: 1.6;
}

/* ── PAGES (SPA) ── */
.page {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
/* Padrão full-page: todas as seções cobrem a tela toda (inset:0).
   SEM padding no nível da página — o offset header/footer fica dentro
   dos containers de scroll para que o conteúdo passe por baixo do
   header/footer e apareça através do blur ao scrollar.
   O header (z-100) e footer (z-9000) ficam acima das páginas (z-5). */
.page.active {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 5;
}
#page-home.active { display: grid; }

/* ── INNER CONTENT SCROLL ── */
.col-inner {
  flex: 1; overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  position: relative;
  padding: calc(var(--header-h) + 16px) 16px var(--footer-total-h);
  -webkit-overflow-scrolling: touch;
}
.col-inner::-webkit-scrollbar { width: 3px; }
.col-inner::-webkit-scrollbar-track { background: transparent; }
.col-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── TOOLTIP ── */
.tooltip {
  position: fixed;
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  pointer-events: none;
  z-index: var(--z-tooltip);
  opacity: 0;
  transition: opacity 0.15s;
  max-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tooltip.visible { opacity: 1; }
/* Tooltip com tabela (fases do Lunar/Céu): o teto de 200px do balão espremia
   as quatro colunas do `ov2-pa-table` em duas linhas cada. Só a largura cede —
   a tipografia e os separadores vêm da mesma folha do painel P&A.
   `.tooltip-meta` entra na mesma regra: os dois blocos sempre aparecem juntos
   nestes tooltips (a tabela só falta quando não há aspecto natal), então a
   largura não pode depender de qual dos dois está presente. */
.tooltip:has(.ov2-pa-table), .tooltip:has(.tooltip-meta) { max-width: 320px; padding: 10px 12px; }

/* Linhas de META: data, posição, distância — fatos soltos, sem tabela.
   Eram linhas de `ov2-pa-table` com `colspan`, e herdavam a largura das
   colunas de aspecto (ditada por texto como "Quadratura"/"Netuno"): um vão
   enorme e sem sentido no meio de "Câncer" e "12°". Texto corrido, uma frase
   por linha, no MESMO idioma do título ("Lua · Lua Cheia em Câncer") — sem
   vão, porque não há coluna nenhuma para abrir um. */
.tooltip-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tooltip-meta-row {
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-dim);
}
/* Separador só quando os DOIS blocos existem — a meta sozinha (fase sem
   aspecto natal) não precisa de linha void embaixo dela. */
.tooltip-meta + .ov2-pa-table {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
/* Ancorado no canto superior ESQUERDO do gráfico — exatamente onde ficava o
   botão de fechar antes de ele ir para a direita. As mesmas variáveis do
   `.transit-close-pill`, para os dois nascerem simétricos.
   Some a sombra de "balão flutuante" e a caixa ganha a borda dos controles:
   agora ela é parte do cromo do gráfico, não um rótulo que persegue o ponteiro. */
.tooltip--canto {
  top: calc(var(--header-h) + var(--frame-w) + 16px);
  left: calc(var(--frame-w) + 16px);
  box-shadow: none;
  border-color: var(--ink);
  /* Mesmo material da janela de leitura (--detail-card-glass-bg): no Celeste,
     bg-3 a 60%; no Observatório o token não existe e cai no --bg-2 de sempre —
     não um fundo novo, é o mesmo vidro que a janela já usa quando abre. */
  background: var(--detail-card-glass-bg, var(--bg-2));
  border-radius: 8px;
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
}
:root[data-theme="blunt-dark"] .tooltip--canto { border-color: var(--gold); }

/* Com a janela de leitura ABERTA o gráfico passa a viver dentro da moldura
   (`.chart-detail-frame`), e o canto superior esquerdo dela é o MESMO ponto
   deste tooltip — as duas regras usam `--header-h`/`--frame-w` idênticos. O
   balão nascia montado sobre a borda de 2px e o raio de 16px da janela, com
   metade dentro e metade fora.
   Recua para DENTRO, folgando o raio, e passa a se ler como parte da janela.
   Vale para os dois gráficos redondos: a moldura é a mesma. */
body.chart-detail-open .tooltip--canto {
  top: calc(var(--header-h) + var(--frame-w) + 16px + 18px);
  left: calc(var(--frame-w) + 16px + 18px);
  max-width: min(320px, calc(50vw - 8px - var(--frame-w) - 52px));
}
.tooltip .ov2-pa-table { width: 100%; }
.tooltip-title {
  font-weight: var(--fw-bold);
  color: var(--text);
  margin-bottom: 4px;
}
.tooltip-aspect {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 9px;
  margin-top: 4px;
}
.tooltip-aspect.harmonico { background: var(--surface); }
.tooltip-aspect.tensao { background: rgba(var(--tension-rgb), 0.15); color: var(--tension); }

/* ─────────────────────────────────────
   PAINEL DE DESCRIÇÃO
───────────────────────────────────── */
#transit-desc-panel .col-inner,
#natal-desc-content {
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.desc-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; padding: 20px;
}
.desc-empty-msg {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.planet-detail { display: none; }
.planet-detail.active {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface);
}

.planet-detail-header {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  padding: 10px var(--grid-master-pad-x);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.planet-detail-symbol {
  grid-column: 1;
  justify-self: center;
  font-size: 28px; line-height: 1;
  color: var(--gold);
}
.planet-detail-name {
  grid-column: 2 / 6;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}
.planet-detail-meta {
  grid-column: 6 / 12;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex; gap: 12px; align-items: center;
}
.planet-detail-meta span {
  display: flex; align-items: center; gap: 4px;
}
.planet-detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  width: 100%;
}
.planet-detail-col-left {
  border-right: 1px solid var(--border);
  padding: 12px 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#ai-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.planet-detail-col-right {
  padding: 12px 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.detail-section { margin-bottom: 20px; }
.detail-section-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-left: -8px;
  margin-right: -8px;
  padding-left: 8px;
  padding-right: 8px;
}
.detail-section-content {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-dim);
}
.detail-section-content strong { color: var(--text); font-weight: var(--fw-bold); }

.aspect-tag {
  display: inline-block;
  border: 1px solid var(--border-bright);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  padding: 2px 8px; margin: 3px 2px;
  color: var(--text-dim);
}
.aspect-tag.harmonico { border-color: var(--gold-dim); color: var(--gold); }
.aspect-tag.tensao { border-color: rgba(var(--tension-rgb), 0.3); color: var(--tension); }

.ai-loading {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--text-faint);
  margin-top: 16px;
}
.ai-loading-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold);
  animation: pulse 1.2s ease-in-out infinite;
}
.ai-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse { 0%,100%{opacity:0.2} 50%{opacity:1} }

.ai-response {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text-dim);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ai-response strong { color: var(--text); }

/* ─────────────────────────────────────
   PAINEL DE TRÂNSITOS
───────────────────────────────────── */
#transit-graph-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
/* Hub Gráficos — Ink & Gold (entrada); grelha sem gap entre cards. */
#transit-graphs-hub {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
  height: 100vh;
  background: transparent;
}
#transit-graphs-hub button {
  padding: 40px 20px !important;
  background-color: var(--transit-hub-btn-bg, #1a1814) !important;
  color: var(--transit-hub-btn-fg, #f4c430) !important;
  border: 1px solid var(--transit-hub-btn-border, #f4c430) !important;
  transition: all 0.25s ease-in-out !important;
}
#transit-graphs-hub button:hover,
#transit-graphs-hub button.active {
  background-color: var(--transit-hub-btn-hover-bg, #b2dadb) !important;
  border-color: var(--transit-hub-btn-hover-border, #b2dadb) !important;
}
#transit-graphs-hub button:hover *,
#transit-graphs-hub button.active * {
  color: var(--transit-hub-btn-hover-fg, #1a1814) !important;
  fill: var(--transit-hub-btn-hover-fg, #1a1814) !important;
}
#transit-graphs-hub button:focus-visible {
  outline: 2px solid var(--transit-hub-btn-focus-ring, #f4c430);
  outline-offset: 2px;
}
#transit-graphs-hub[hidden] {
  display: none !important;
}
.transit-zone-width {
  width: calc(100vw - 16px);
  margin-left: calc(50% - 50vw + 8px);
  margin-right: auto;
  max-width: none;
}
@media (min-width: 900px) {
  .transit-zone-width {
    width: calc(40px + (var(--grid-master-viewport-content)) * 6 / 12);
    margin-left: calc(50% - 50vw + 32px + (var(--grid-master-viewport-content)) * 3 / 12);
  }
}
.transit-graph-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 4px 0 8px;
}
@media (min-width: 640px) {
  .transit-graph-hub-grid:not(.transit-graph-hub-grid--launcher) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .transit-graph-hub-grid:not(.transit-graph-hub-grid--launcher) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.transit-graph-hub-grid--launcher {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
.transit-graph-hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: 118px;
  padding: 12px 8px 14px;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 12%, transparent);
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.transit-graph-hub-card:hover {
  border-color: var(--gold);
}
.transit-graph-hub-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.transit-graph-hub-card--wide {
  grid-column: 1 / -1;
}
@media (min-width: 640px) {
  .transit-graph-hub-grid:not(.transit-graph-hub-grid--launcher) .transit-graph-hub-card--wide {
    grid-column: span 2;
  }
}
@media (min-width: 1100px) {
  .transit-graph-hub-grid:not(.transit-graph-hub-grid--launcher) .transit-graph-hub-card--wide {
    grid-column: span 1;
  }
}
.transit-graph-hub-card__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.35;
}
.transit-graph-hub-card--wide .transit-graph-hub-card__title {
  font-size: 10px;
  letter-spacing: 0.08em;
}
.transit-graph-hub-card.active .transit-graph-hub-card__title {
  color: var(--gold);
}

/* ── Hub master (#transit-graphs-hub) — linha única, título vertical, gap 0 ── */
#transit-graphs-hub .transit-graph-hub-grid {
  display: flex;
  flex-direction: row;
  width: calc((100vw - 16px) * 10 / 12);
  margin: 0 auto;
  gap: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
}
@media (min-width: 900px) {
  #transit-graphs-hub.transit-zone-width {
    width: calc(100vw - 16px);
    margin-left: calc(50% - 50vw + 8px);
    margin-right: auto;
  }
  #transit-graphs-hub .transit-graph-hub-grid {
    width: calc((100vw - 16px) * 7 / 12);
  }
}
#transit-graphs-hub .transit-graph-hub-card {
  flex: 1;
  min-width: 0;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 6px;
}
#transit-graphs-hub .transit-graph-hub-card__title {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--transit-hub-title-color, #f4c430);
}

@supports (-webkit-appearance: none) {
  #transit-graphs-hub .transit-graph-hub-card__title {
    min-height: 100px;
  }
}

.transit-graph-hub-grid--launcher .transit-graph-hub-card__title {
  display: block;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  text-align: left;
  margin: 0;
  padding: 0;
  max-height: none;
  white-space: nowrap;
  line-height: 1.35;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.transit-graph-hub-grid--launcher .transit-graph-hub-card--wide .transit-graph-hub-card__title {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  white-space: normal;
}
.transit-graph-hub-grid--launcher .transit-graph-hub-card {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 4px;
}
.transit-graph-hub-grid--launcher .transit-graph-hub-card--wide {
  grid-column: auto;
}

/* ══ Mercúrio — painel de fase (C5–C8, 12px acima do topo do player)
   Canvas é absolute (full bleed); banner precisa de stack + margin-top:auto. ══ */
.mercury-phase-banner {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  margin-top: auto;
  margin-bottom: 12px;
  z-index: 10;
  width: calc(4 * (var(--grid-master-viewport-content) / 12) + 3 * var(--grid-master-gap));
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(26, 24, 20, 0.88);
  pointer-events: none;
  text-align: center;
  opacity: var(--player-default-opacity, 0.72);
  transition: opacity 0.2s ease;
}
.mercury-phase-banner:hover {
  opacity: 1;
}
.mercury-phase-banner[hidden] {
  display: none !important;
}
.mercury-phase-banner__label {
  display: block;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mercury-phase-banner--direct .mercury-phase-banner__label {
  color: var(--gold);
}
.mercury-phase-banner--retrograde .mercury-phase-banner__label {
  color: var(--tension);
}
.mercury-phase-banner--station .mercury-phase-banner__label {
  color: var(--gold);
}

/* ══ Controles de gráfico — fade idle (harmonia visual) ══ */
.chart-control-fade {
  opacity: var(--chart-controls-opacity, var(--player-default-opacity, 0.72));
  transition: opacity 0.2s ease;
}
.chart-control-fade:hover,
.chart-control-fade:focus-within {
  opacity: 1;
}

/* Canvas ocupa espaço restante em modo flex */
#transit-graph-panel .transit-canvas-area {
  flex: 1;
  min-height: 0;
  position: relative;
}
/* ══ PAINEL TEMPORAL ══ */
/* Container das 3 linhas: nav, transport, timeline */
.tempo-panel {
  flex-shrink: 0;
  background: transparent;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: gap 0.25s ease;
}
/* Collapsed: só a data (clicável para expandir) */
.tempo-panel.tempo-collapsed {
  width: auto !important;
  gap: 0;
}
/* Colapsadas, estas linhas ficam com ALTURA ZERO mas continuam no fluxo, na
   mesma faixa vertical do grupo data+botão — que é absoluto e transborda a
   linha 1. Sendo irmãs POSTERIORES, ganhavam o hit-test e engoliam o clique:
   medido, `elementFromPoint` no centro do botão devolvia `player-row-timeline`.
   Uma linha invisível e sem altura não pode ser alvo. */
.tempo-panel.tempo-collapsed .tempo-row:not(#player-row-nav) {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.tempo-panel.tempo-collapsed #player-row-nav {
  display: flex;
  height: auto;
}
.tempo-panel.tempo-collapsed .tempo-scale-opts {
  display: none !important;
}
.tempo-panel.tempo-collapsed .tempo-date {
  height: 26px;
  pointer-events: auto;
  cursor: pointer;
}
/* O botão acompanha a altura do pill nos dois estados — é o que faz os dois
   lerem como uma linha só, e não como um botão pendurado ao lado da data. */
.tempo-panel.tempo-collapsed .tempo-btn--today {
  height: 26px;
}
@media (max-width: 768px) {
  .tempo-panel.tempo-collapsed .tempo-date,
  .tempo-panel.tempo-collapsed .tempo-btn--today {
    height: 40px;
  }
}

/* Toolbar gráfico (#transit-graph-panel): caixa com borda/blur. Relatório: sem caixa — só a linha de chips (minimalismo). */
.transit-graph-toolbar {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--transit-toolbar-border, var(--border));
  background: var(
    --transit-toolbar-surface,
    color-mix(in srgb, var(--bg) 14%, transparent)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.transit-graph-toolbar.transit-graph-toolbar--compact {
  padding: 8px 10px;
  border-radius: 4px;
  background: var(
    --transit-toolbar-surface-compact,
    color-mix(in srgb, var(--bg) 10%, transparent)
  );
}
.transit-report-toolbar {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* ── Graph toolbar: toggle header (só #transit-graph-toolbar; chevron isolado do relatório) ─ */
.transit-graph-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--transit-toolbar-toggle-color, var(--text-dim));
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.transit-graph-toggle:hover {
  color: var(--transit-toolbar-toggle-hover-color, var(--text));
}

.transit-graph-chevron {
  display: block;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
/* Chevrons: colapsado (aba) → baixo; expandido (no toggle) → cima */
#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-chevron-btn .transit-graph-chevron {
  transform: rotate(180deg);
}
#transit-graph-panel #transit-graph-toolbar:not(.chips-collapsed) .transit-graph-toggle .transit-graph-chevron {
  transform: rotate(0deg);
  flex-shrink: 0;
  margin-right: 0;
  margin-top: 12px;
  opacity: 0.7;
}

#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-title-col,
#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-divider--before-body,
#transit-graph-panel #transit-graph-toolbar.chips-collapsed #transit-graph-launcher-panel,
#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-divider--before-chevron {
  display: none !important;
}

/* Expandido: sem coluna de chevron à direita */
#transit-graph-panel #transit-graph-toolbar:not(.chips-collapsed) .transit-graph-menu-chevron-col,
#transit-graph-panel #transit-graph-toolbar:not(.chips-collapsed) .transit-graph-menu-divider--before-chevron {
  display: none !important;
}
#transit-graph-panel #transit-graph-toolbar:not(.chips-collapsed) .transit-graph-menu-shell {
  grid-template-columns: auto 1fr;
}

.transit-report-toolbar .transit-report-row {
  padding: 0;
  margin: 0;
}
.transit-graph-toolbar[hidden],
.transit-report-toolbar[hidden] {
  display: none !important;
}
/* ══ Menu gráficos (#transit-graph-toolbar): blur + tint (--transit-graph-menu-surface).
   Colapsado: só chevron — mobile largura 1 col do grid mestre; desktop largura 8px+chevron+8px + padding 20px 8px.
   Expandido: mobile cols 1–10; desktop 2,5 col; grelha 1fr | 1px | 4fr | 1px | 1fr.
   Altura intrínseca (shell stretch); launcher com max-height; 5 linhas 1fr repartem só espaço extra na célula. ══ */
#transit-graph-panel #transit-graph-toolbar:not([hidden]) {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 12px;
  width: calc(100vw - 24px);
  max-width: none;
  transform: none;
  z-index: 9;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
  border-radius: 0;
  border: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: var(--player-default-opacity, 0.72);
  transition: opacity 0.2s ease;
}
#transit-graph-panel #transit-graph-toolbar:not([hidden]):hover {
  opacity: 1;
}
@media (min-width: 900px) {
  #transit-graph-panel #transit-graph-toolbar:not([hidden]):not(.chips-collapsed) {
    width: calc(2.5 * (var(--grid-master-viewport-content) / 12));
  }
  #transit-graph-panel #transit-graph-toolbar:not([hidden]).chips-collapsed {
    width: 44px;
    box-sizing: border-box;
    padding: 0;
  }
}
@media (max-width: 899px) {
  /* 10 trilhas + 9 gaps (largura do grid mestre da coluna 1 à 10) */
  #transit-graph-panel #transit-graph-toolbar:not([hidden]):not(.chips-collapsed) {
    width: calc(10 * (var(--grid-master-viewport-content) / 12) + 9 * var(--grid-master-gap));
  }
  #transit-graph-panel #transit-graph-toolbar:not([hidden]).chips-collapsed {
    width: 44px;
    padding: 0;
  }
}

/* ── Aba colapsada: só mobile — 1/3 atrás do header, 2/3 visível ── */
@media (max-width: 768px) {
  #transit-graph-panel #transit-graph-toolbar.chips-collapsed:not([hidden]) {
    top: calc(var(--header-h) - 10px);
    width: 44px;
    height: 30px;
    border-radius: 0 0 10px 10px;
    border: 1px solid var(--border, rgba(128,128,128,0.2));
    border-top: none;
    background: color-mix(in srgb, var(--bg) 25%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0;
    overflow: hidden;
  }
  #transit-graph-panel #transit-graph-toolbar.chips-collapsed:not([hidden]) .transit-graph-menu-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
  }
  #transit-graph-panel #transit-graph-toolbar.chips-collapsed:not([hidden]) .transit-graph-menu-chevron-col {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  #transit-graph-panel #transit-graph-toolbar.chips-collapsed:not([hidden]) .transit-graph-menu-chevron-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 30px;
    pointer-events: auto;
  }
}

#transit-graph-panel #transit-graph-toolbar.transit-graph-toolbar--compact:not([hidden]) {
  padding: 0;
}

@media (min-width: 900px) {
  #transit-graph-panel #transit-graph-toolbar.transit-graph-toolbar--compact:not([hidden]).chips-collapsed {
    padding: 0;
  }
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-menu-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);
  column-gap: 6px;
  align-items: start;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-shell {
  grid-template-columns: minmax(0, 1fr);
}

#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-chevron-col {
  width: 44px;
  min-width: 44px;
}

#transit-graph-panel #transit-graph-toolbar.chips-collapsed .transit-graph-menu-chevron-btn {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-menu-title-col {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  align-self: stretch;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(26, 24, 20, 0.88);
  overflow: hidden;
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-toggle {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: var(--gold);
  width: 100%;
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-menu-divider--before-body,
#transit-graph-panel #transit-graph-toolbar .transit-graph-menu-divider--before-chevron {
  display: none !important;
  width: 0;
  background: none;
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-menu-chevron-col {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-menu-chevron-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(26, 24, 20, 0.88);
  cursor: pointer;
  color: var(--gold);
  -webkit-tap-highlight-color: transparent;
}

#transit-graph-panel #transit-graph-toolbar .transit-graph-toggle-label {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.12em;
  padding-top: 8px;
  padding-bottom: 20px;
  box-sizing: border-box;
}
@media (min-width: 900px) {
  #transit-graph-panel #transit-graph-toolbar .transit-graph-toggle-label {
    padding-left: 0;
  }
}

#transit-graph-panel #transit-graph-toolbar:not([hidden]) #transit-graph-launcher-panel {
  pointer-events: auto;
  position: relative;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  max-height: min(70vh, calc(100vh - var(--header-h) - 40px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Lista launcher: 5 linhas auto — não dependem de altura definida no container */
#transit-graph-launcher-panel .transit-graph-hub-grid--launcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(5, auto);
  row-gap: 6px;
  column-gap: 0;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  background: none;
}
#transit-graph-launcher-panel .transit-graph-hub-grid--launcher .transit-graph-hub-card {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  min-height: 44px;
  border-radius: 6px;
  border: 1px solid var(--gold);
  background: rgba(26, 24, 20, 0.88);
  text-align: center;
  justify-content: center;
  align-items: center;
}
#transit-graph-launcher-panel .transit-graph-hub-grid--launcher .transit-graph-hub-card__title {
  color: var(--gold);
  text-align: center;
}
#transit-graph-launcher-panel .transit-graph-hub-grid--launcher .transit-graph-hub-card.active {
  background: rgba(26, 24, 20, 0.88);
  box-shadow: inset 0 0 0 1px var(--gold);
}
#transit-graph-launcher-panel .transit-graph-hub-grid--launcher .transit-graph-hub-card.active .transit-graph-hub-card__title {
  color: var(--gold);
  font-weight: var(--fw-bold);
}
#transit-graph-launcher-panel .transit-graph-hub-grid--launcher .transit-graph-hub-card:hover {
  opacity: 0.8;
}

#transit-graph-panel #transit-graph-toolbar:not([hidden]) .transit-graph-toggle,
#transit-graph-panel #transit-graph-toolbar:not([hidden]) .transit-graph-menu-chevron-btn {
  pointer-events: auto;
}
/* Relatório: toolbar sticky — fundo transparente, fila sob o header ao rolar */
#transit-desc-content > #transit-report-top:not([hidden]) {
  position: sticky;
  top: calc(var(--header-h) + var(--frame-w) + 8px);
  z-index: 999;
  margin-top: 0;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  padding-bottom: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#transit-desc-content > #transit-report-top:not([hidden]) .transit-report-toolbar {
  margin-top: 0;
}

/* Relatório (data-mode=top): grid 12-col; conteúdo C3–C10 com inset de meia coluna */
#page-transits.active #transit-split[data-mode="top"] #transit-desc-content {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  padding-inline: var(--grid-master-pad-x);
  padding-bottom: calc(128px + var(--footer-total-h));
  min-height: 0;
}
#page-transits.active #transit-split[data-mode="top"] #transit-desc-panel {
  flex: 1;
  min-height: 0;
}
#page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #planet-detail-panel,
#page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #saved-panel,
#page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #seen-panel,
#page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #transit-learn-root {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}
@media (max-width: 1024px) {
  #page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #report-panel {
    grid-column: 1 / 13;
    width: 100%;
    justify-self: center;
    box-sizing: border-box;
    padding-inline: var(--half-col);
  }
  /* Toolbar fixo — abaixo do header; tripa começa 40px depois (JS --tr-tripa-start) */
  #page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #transit-report-top:not([hidden]) {
    position: fixed;
    top: calc(var(--header-h) + 8px);
    left: var(--grid-master-pad-x, 8px);
    right: var(--grid-master-pad-x, 8px);
    width: auto;
    grid-column: auto;
    margin: 0;
    padding-inline: 0;
    transform: none;
  }
  /* Tripa: padding-top dinâmico = fundo do menu expandido + 40px (transit-scrollbar.js) */
  #page-transits.active #transit-split[data-mode="top"] #transit-desc-content {
    padding-top: var(--tr-tripa-start, 200px);
  }
}
@media (min-width: 1025px) {
  #page-transits.active #transit-split[data-mode="top"] {
    /* Coluna real 1fr = grid-master-viewport-content / 12 (--grid-col subtrai gaps duas vezes e fica menor) */
    --tr-1fr: calc(var(--grid-master-viewport-content) / 12);
    /* Menu trânsitos: C2 → C11 (10 colunas, simétrico ao redor do centro C6–C7) */
    --tr-content-left: calc(var(--grid-master-pad-x) + var(--tr-1fr) + var(--grid-master-gap));
    --tr-content-width: calc(10 * var(--tr-1fr) + 9 * var(--grid-master-gap));
    --tr-side-btn-right: calc(var(--frame-w) + var(--grid-master-pad-x));
  }
  #page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #report-panel {
    grid-column: 4 / 10;
    width: 100%;
    padding-inline: var(--half-grid-col);
    box-sizing: border-box;
  }
  #page-transits.active #transit-split[data-mode="top"] #transit-desc-content > #transit-report-top:not([hidden]) {
    position: fixed;
    /* Centralizado entre o topo da moldura e o início da tripa (50% de tsb-inner-h) */
    top: calc(
      var(--header-h) + var(--frame-w) +
      max(0px, (0.5 * (100vh - var(--header-h) - var(--footer-h) - 2 * var(--frame-w)) - var(--tr-menu-control-h, 116px)) / 2)
    );
    left: var(--tr-content-left);
    width: var(--tr-content-width);
    padding-inline: 0;
    transform: none;
    grid-column: auto;
    margin: 0;
    z-index: 999;
  }
  /* SALVOS/SEEN agora in-flow no .transit-report-corner-btns — sem position: fixed */
}
#page-transits.active #transit-split[data-mode="top"] #report-panel {
  margin-top: 0;
}
/* JS (syncFirstCardOffset) posiciona o panel para o primeiro card alinhar
   com o centro do container da scrollbar (50% tsb-inner-h no desktop). padding-inline:0 remove gutter lateral. */
#page-transits.active #transit-split[data-mode="top"] #report-panel .report-content {
  padding-inline: 0;
}

.transit-report-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.transit-report-chip {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 14px;
  min-height: 36px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  color: var(--text);
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.transit-report-chip.active {
  font-weight: var(--fw-bold);
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 40%, var(--border));
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.transit-report-chip--glyph {
  padding: 7px 12px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.transit-report-chip .glyph-orby {
  font-family: 'Orby Astrology', serif;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}
.transit-report-row--time .transit-report-chip span,
.transit-graph-row .transit-report-chip span {
  pointer-events: none;
}

/* Mobile: miniaturizado ao rolar — scale 50% centrado; toque expande de volta */
@media (max-width: 1024px) {
  .transit-report-toolbar-shell {
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    transform-origin: center center;
  }
  .transit-report-toolbar.report-toolbar-minimized .transit-report-toolbar-shell {
    transform: scale(0.5);
  }
}

/* Toolbar relatório: menu 6 colunas (metade C3 → metade C10 no desktop). */
#transit-report-top:not([hidden]) {
  --tr-menu-gold: var(--gold, #F4C430);
  --tr-menu-creme: var(--creme, #EDE0BD);
  --tr-menu-ink: var(--ink, #1A1814);
  --tr-menu-pad: 20px;
  --tr-menu-font-size: 12px;
  --tr-menu-cell-h: calc(var(--tr-menu-pad) * 2 + var(--tr-menu-font-size) * 1.2);
  --tr-menu-control-h: calc(var(--tr-menu-cell-h) * 2 + 8px);
  --tr-report-panel-base-margin: calc(8px + var(--tr-menu-control-h) + 20px);
  --tr-menu-radius: 8px;
}
/* SALVOS/SEEN agora in-flow — sem position: absolute no mobile */
.transit-report-toolbar-shell {
  width: 100%;
  box-sizing: border-box;
}
.transit-report-row.transit-report-row--consolidated {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tr-menu-control-h, 116px);
  transition: gap 0.32s cubic-bezier(.4,0,.2,1);
}
.transit-report-row--consolidated > .transit-report-dropdown-wrap,
.transit-report-row--consolidated > .report-filter-group {
  flex: 1 1 0;
  min-width: 90px;
  max-width: 400px;
  align-self: center;
  transition: opacity 0.22s ease 0.2s, max-width 0.32s cubic-bezier(.4,0,.2,1) 0.12s, min-width 0.32s cubic-bezier(.4,0,.2,1) 0.12s;
}
.report-filter-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.report-filter-group > .transit-report-dropdown-wrap + .transit-report-dropdown-wrap {
  margin-top: -1px;
}
.report-filter-group .transit-report-cascade-value {
  border-radius: 0 0 var(--tr-menu-radius, 8px) var(--tr-menu-radius, 8px);
}
.transit-report-cascade-title--btn {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.transit-report-cascade-title--btn:hover {
  filter: brightness(1.1);
}
/* Trigger 2 linhas: LABEL+CHEVRON (linha 1, gold) / VALOR (linha 2, creme) */
.transit-report-cascade-row-trigger {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  row-gap: 40px;
  color: var(--tr-menu-gold);
  cursor: pointer;
  border-radius: var(--tr-menu-radius, 8px);
  margin-top: 0;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
}
.transit-report-cascade-row-trigger:hover { filter: brightness(1.06); }
/* Divisor de ponta a ponta exatamente na metade do botão */
.transit-report-cascade-row-trigger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--tr-menu-gold) 45%, transparent);
  pointer-events: none;
}
.transit-report-cascade-row-trigger .transit-report-cascade__label {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
  color: var(--tr-menu-gold);
  align-self: center;
}
.transit-report-cascade-row-trigger .transit-report-cascade__chevron {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
}
.transit-report-cascade-row-trigger .transit-report-cascade__right {
  grid-column: 1 / 3;
  grid-row: 2;
  text-align: right;
  color: var(--tr-menu-creme);
  align-self: center;
}
/* ── Cascata TEMPO — 4 células pill ────────────────────────────── */
.report-tempo-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  box-sizing: border-box;
}
.report-tempo-periods {
  display: flex;
  gap: 6px;
}
.report-tempo-period-btn {
  flex: 1 1 0;
  background: rgba(26, 24, 20, 0.88);
  border: 1px solid var(--tr-menu-gold);
  border-radius: 9999px;
  padding: var(--tr-menu-pad);
  text-align: center;
  color: var(--tr-menu-creme);
  font-family: var(--font, 'Archivo', sans-serif);
  font-size: var(--tr-menu-font-size);
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: color 0.15s ease;
}
.report-tempo-period-btn.active {
  background: var(--tr-menu-gold);
  color: var(--tr-menu-ink);
}
.report-tempo-period-btn:hover {
  filter: brightness(1.06);
}
.report-tempo-dates {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(26, 24, 20, 0.88);
  border: 1px solid var(--tr-menu-gold);
  border-radius: 9999px;
  padding: var(--tr-menu-pad);
  gap: 6px;
  font-family: var(--font, 'Archivo', sans-serif);
  font-size: var(--tr-menu-font-size);
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--tr-menu-creme);
}
.report-tempo-date-start,
.report-tempo-date-end {
  flex: 0 0 auto;
  white-space: nowrap;
}
.report-tempo-dates-sep {
  flex: 1 1 auto;
  height: 1px;
  min-width: 12px;
  background: color-mix(in srgb, var(--tr-menu-gold) 45%, transparent);
  align-self: center;
  user-select: none;
}

/* Chevron do trigger combinado de aspectos gira via aria-expanded */
#report-filter-combined-trigger[aria-expanded="true"] .transit-graph-chevron {
  transform: rotate(180deg);
}
/* ── Header TIPO/VALOR empilhado (desktop + mobile) ──────────────────────── */
.report-filter-mobile-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--tr-menu-radius, 8px);
  overflow: hidden;
}
#report-filter-combined-trigger { display: none; }
.report-filter-mobile-tipo-btn[aria-expanded="true"],
.report-filter-mobile-valor-btn[aria-expanded="true"] {
  background: var(--tr-menu-gold, var(--gold, #C49A3C));
  color: var(--tr-menu-ink, var(--ink, #1A1814));
}
.report-filter-mobile-tipo-btn[aria-expanded="true"] .transit-graph-chevron,
.report-filter-mobile-valor-btn[aria-expanded="true"] .transit-graph-chevron { transform: rotate(180deg); }
/* Circles: bookmark (salvo) e checkmark (visto) flanqueando o dot */
.report-toolbar-center-col {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.report-toolbar-middle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.report-toolbar-circle {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, width 0.28s cubic-bezier(.4,0,.2,1), transform 0.2s ease;
}
.report-toolbar-circle svg { width: 20px; height: 20px; }
/* Default: bg ink transparente + ícone gold */
.report-toolbar-circle--saved,
.report-toolbar-circle--seen {
  background: rgba(26, 24, 20, 0.88);
  color: var(--gold, #F4C430);
  border: none;
}
/* Ativo (filtro ligado): fundo gold solar + ícone ink */
.report-toolbar-circle--saved[aria-pressed="true"],
.report-toolbar-circle--seen[aria-pressed="true"] {
  background: var(--gold, #F4C430);
  color: var(--ink, #1A1814);
}
.report-toolbar-circle:hover { opacity: 0.8; }
.report-toolbar-circle:active { transform: scale(0.88); }
/* Circles: ocultos no estado colapsado */
.transit-report-toolbar.report-toolbar-collapsed .report-toolbar-circle {
  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
@media (min-width: 1025px) {
  /* Desktop: menu ocupa C2–C11; dropdowns preenchem todo o espaço disponível */
  .transit-report-row--consolidated > .transit-report-dropdown-wrap,
  .transit-report-row--consolidated > .report-filter-group {
    max-width: none;
  }
  /* Desktop: gap 40px entre os itens do menu (arcos, dropdowns, middle-row) */
  .transit-report-row.transit-report-row--consolidated {
    gap: 40px;
  }
}
/* ── Botão RESETAR — gap entre cascatas (desktop only) ── */
.report-reset-btn {
  display: none;
}
@media (min-width: 1025px) {
  .report-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    padding: 0 20px;
    opacity: 0;
    background: rgba(26, 24, 20, 0.88);
    border: 1px solid var(--tr-menu-gold, var(--gold, #C49A3C));
    border-radius: 9999px;
    color: var(--tr-menu-gold, var(--gold, #C49A3C));
    cursor: pointer;
    font-family: var(--font, 'Archivo', sans-serif);
    font-size: var(--tr-menu-font-size, 12px);
    font-weight: 700;
    font-stretch: 125%;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    transition: max-height 0.28s cubic-bezier(.4,0,.2,1),
                margin-top 0.28s cubic-bezier(.4,0,.2,1),
                padding-top 0.28s cubic-bezier(.4,0,.2,1),
                padding-bottom 0.28s cubic-bezier(.4,0,.2,1),
                opacity 0.22s ease;
  }
  .report-reset-btn.report-reset-btn--active {
    max-height: 44px;
    margin-top: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
    opacity: 1;
  }
  .report-reset-btn:hover { filter: brightness(1.1); }
  .report-toolbar-collapsed .report-reset-btn { display: none !important; }
}
/* 2 colunas dos dropdowns de aspecto/valor */
.report-filter-dropdowns-row {
  display: flex;
  gap: 0;
}
.report-filter-dropdowns-row > .transit-report-dropdown-wrap {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 0.28s ease;
}
/* Split-panel: TIPO 0.85fr | VALOR tab 0.15fr */
.rfdr--tipo #report-filter-dimension-wrap { flex-grow: 85; }
.rfdr--tipo #report-filter-value-wrap    { flex-grow: 15; }
/* Split-panel: TIPO tab 0.15fr | VALOR 0.85fr */
.rfdr--valor #report-filter-dimension-wrap { flex-grow: 15; }
.rfdr--valor #report-filter-value-wrap    { flex-grow: 85; }
/* Tab: aba colapsada com chevron centrado */
.report-filter-cascade-tab {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(26, 24, 20, 0.88);
  border: 1px solid color-mix(in srgb, var(--tr-menu-gold) 55%, transparent);
  border-radius: var(--tr-menu-radius, 8px);
  color: var(--tr-menu-gold);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  z-index: 11;
}
.report-filter-cascade-tab svg {
  display: block;
  width: 60%;
  height: 80%;
}
.report-filter-cascade-tab:hover { filter: brightness(1.1); }
/* Mostrar aba quando o lado está colapsado */
.rfdr--tipo  #report-filter-value-wrap    .report-filter-cascade-tab { display: flex; }
.rfdr--valor #report-filter-dimension-wrap .report-filter-cascade-tab { display: flex; }
/* ── Mobile cascade tab icon (oculto no desktop) ────────────────────────── */
.cascade-mobile-tab-icon {
  display: none;
}
@media (max-width: 1024px) {
  .cascade-mobile-tab-icon {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    color: var(--tr-menu-gold, #F4C430);
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 2;
  }
  /* TEMPO em modo tab (ASPECTO aberto): esconde conteúdo, mostra ›  */
  .rcm--aspecto-open #report-tempo-trigger > :not(.cascade-mobile-tab-icon) { opacity: 0; }
  .rcm--aspecto-open #report-tempo-trigger::after { display: none; }
  .rcm--aspecto-open #report-tempo-trigger .cascade-mobile-tab-icon { opacity: 1; }
  /* ASPECTO em modo tab (TEMPO aberto): esconde conteúdo, mostra ‹ */
  .rcm--tempo-open #report-filter-combined-trigger > :not(.cascade-mobile-tab-icon) { opacity: 0; }
  .rcm--tempo-open #report-filter-combined-trigger::after { display: none; }
  .rcm--tempo-open #report-filter-combined-trigger .cascade-mobile-tab-icon { opacity: 1; }
}
/* Arcos gold — semicírculo verdadeiro: width = height/2 (diâmetro = altura) */
/* Canvas logo unificado — só mobile data-mode=top; oculto nos demais contextos */
.report-arc-logo {
  display: none;
  pointer-events: none;
}
.report-toolbar-arc {
  display: block;
  flex-shrink: 0;
  align-self: center;
  height: var(--tr-menu-control-h, 116px);
  /* +7px = capR(5) + 2×pad(1): espaço para cap visível e stroke sem clip nas bordas */
  width: calc(var(--tr-menu-control-h, 116px) / 2 + 7px);
}
/* Ponto ink — toggle do colapso do toolbar; centraliza entre os arcos */
.report-toolbar-dot {
  flex-shrink: 0;
  align-self: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink, #1A1814);
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.report-toolbar-dot:hover { opacity: 0.85; }
.report-toolbar-dot:active { transform: scale(0.88); }
:root[data-theme="blunt-dark"] .report-toolbar-dot { background: #000; }
@media (min-width: 1025px) {
  .transit-report-toolbar:not(.report-toolbar-collapsed) .report-toolbar-dot {
    width: 26px;
    height: 26px;
  }
}
/* Mobile: centro col 2 row 1 no grid (não dissolve — seletores > seriam ignorados com display:contents) */
@media (max-width: 1024px) {
  .report-toolbar-center-col {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Colapsado: cascatas esvanecem e comprimem horizontalmente; arcos encolhem com delay */
.transit-report-toolbar.report-toolbar-collapsed .transit-report-row--consolidated {
  gap: 0;
}
.transit-report-toolbar.report-toolbar-collapsed .transit-report-row--consolidated > .transit-report-dropdown-wrap,
.transit-report-toolbar.report-toolbar-collapsed .transit-report-row--consolidated > .report-filter-group {
  flex: 0 0 0;
  min-width: 0;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, max-width 0.28s cubic-bezier(.4,0,.2,1) 0.04s, min-width 0.28s cubic-bezier(.4,0,.2,1) 0.04s;
}
/* Mobile — expandido: arcos saem de tela e dot encolhe; cascatas preenchem a largura.
   Sequência expandir : arcos/dot saem (0→280ms) → cascatas abrem (delay 280ms).
   Sequência colapsar : cascatas fecham (0→280ms) → arcos/dot retornam (delay 280ms). */
@media (max-width: 1024px) {
  /* Font-size 1px menor no menu mobile */
  .transit-report-toolbar {
    --tr-menu-font-size: 11px;
  }
  /* Dropdown items: padding vertical reduzido; trigger mantém 20px em todos os lados */
  .transit-report-toolbar:not(.report-toolbar-collapsed) .transit-report-cascade-cell:not(.transit-report-cascade-row-trigger) {
    padding: 8px 20px;
  }
  /* Arco esquerdo: desliza para fora da tela pela esquerda + colapsa largura */
  .transit-report-toolbar:not(.report-toolbar-collapsed) .report-toolbar-arc--left {
    width: 0;
    overflow: hidden;
    transform: translateX(-100%);
    transition: width 0.28s cubic-bezier(.4,0,.2,1), transform 0.28s cubic-bezier(.4,0,.2,1);
  }
  /* Arco direito: desliza para fora da tela pela direita + colapsa largura */
  .transit-report-toolbar:not(.report-toolbar-collapsed) .report-toolbar-arc--right {
    width: 0;
    overflow: hidden;
    transform: translateX(100%);
    transition: width 0.28s cubic-bezier(.4,0,.2,1), transform 0.28s cubic-bezier(.4,0,.2,1);
  }
  /* Arcos retornam com delay ao colapsar */
  .transit-report-toolbar.report-toolbar-collapsed .report-toolbar-arc--left,
  .transit-report-toolbar.report-toolbar-collapsed .report-toolbar-arc--right {
    transition: width 0.28s cubic-bezier(.4,0,.2,1) 0.28s, transform 0.28s cubic-bezier(.4,0,.2,1) 0.28s;
  }
  /* Dot: mantém 52px no mobile expandido (desktop encolhe para 26px — ver @media min-width:1025px) */
  .transit-report-toolbar:not(.report-toolbar-collapsed) .report-toolbar-dot {
    width: 52px;
    height: 52px;
    transition: width 0.28s cubic-bezier(.4,0,.2,1), height 0.28s cubic-bezier(.4,0,.2,1),
                transform 0.2s ease, opacity 0.15s ease;
  }
  .transit-report-toolbar.report-toolbar-collapsed .report-toolbar-dot {
    transition: width 0.28s cubic-bezier(.4,0,.2,1) 0.28s, height 0.28s cubic-bezier(.4,0,.2,1) 0.28s,
                transform 0.2s ease, opacity 0.15s ease;
  }
  /* Cascatas: esperam arcos saírem (delay 0.28s) antes de expandir */
  .transit-report-toolbar:not(.report-toolbar-collapsed) .transit-report-row--consolidated > .transit-report-dropdown-wrap,
  .transit-report-toolbar:not(.report-toolbar-collapsed) .transit-report-row--consolidated > .report-filter-group {
    transition: opacity 0.22s ease 0.28s, max-width 0.32s cubic-bezier(.4,0,.2,1) 0.28s, min-width 0.32s cubic-bezier(.4,0,.2,1) 0.28s;
  }
}
/* ── Mobile modo relatório: layout coluna (v735) ─────────────────────────────
   COLAPSADO: Crescentes C dourados 57×114px nas laterais do dot 52px.
              Grid: 57px | auto | 57px, centralizado. Crescente = border 10px gold,
              background transparent, border-right/left none.
   EXPANDIDO: Barras retas douradas 10px × altura-total-do-grid.
              Grid: auto | 1fr | auto. Barra = background gold, border 1px ink.
   Animação morph: width + border-width + border-radius + background-color. */
@media (max-width: 1024px) {
  /* ── Logo canvas: cobre toda a grelha, z-index 0 atrás dos botões ── */
  #page-transits.active #transit-split[data-mode="top"] .report-arc-logo {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 0;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }
  /* Arc-left/right: ocultos no mobile — logo canvas assume os visuais */
  #page-transits.active #transit-split[data-mode="top"] .report-toolbar-arc--left,
  #page-transits.active #transit-split[data-mode="top"] .report-toolbar-arc--right {
    display: none;
  }
  /* Dot: fundo transparente só no colapsado — canvas desenha o círculo; expandido usa fundo próprio */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar.report-toolbar-collapsed .report-toolbar-dot {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ── Container (todos os estados) ── */
  #page-transits.active #transit-split[data-mode="top"] .transit-report-row--consolidated {
    display: grid;
    grid-template-rows: auto auto;
    column-gap: 0;
    min-height: auto;
    overflow: visible;
  }
  /* Container expandido: 4 linhas | C1(barra) | C2–C3(conteúdo) | C4(barra) */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed) .transit-report-row--consolidated {
    grid-template-columns: 1fr 5fr 5fr 1fr;
    grid-template-rows: repeat(4, auto);
    row-gap: 8px;
  }
  /* Neutraliza colunas dinâmicas de cascata (não aplicáveis no layout vertical) */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed) .transit-report-row--consolidated.rcm--tempo-open,
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed) .transit-report-row--consolidated.rcm--aspecto-open {
    grid-template-columns: 1fr 5fr 5fr 1fr;
  }
  /* Container colapsado: 57px fixo para os crescentes + centralizado */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar.report-toolbar-collapsed .transit-report-row--consolidated {
    grid-template-columns: 57px auto 57px;
    grid-template-rows: var(--tr-menu-control-h, 116px) 0px;
    justify-content: center;
    row-gap: 0;
  }

  /* ── Posicionamento no grid (expandido) ── */
  /* Linhas 1–2: dots + RESETAR (center-col) */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed)
  .transit-report-row--consolidated > .report-toolbar-center-col {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
    justify-self: stretch;
    align-self: stretch;
    min-height: 52px; /* só os círculos — RESETAR anima max-height própria sem reservar espaço fixo */
  }
  /* Linha 3: TEMPO — entre bastões (col 2–3 ≈ C2–C11) */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed)
  .transit-report-row--consolidated > #report-tempo-wrap {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
    align-self: stretch;
    max-width: none;
    min-width: 0;
  }
  /* Linha 4: ASPECTO — entre bastões; dropdown é overlay absolute */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed)
  .transit-report-row--consolidated > .report-filter-group {
    grid-column: 2 / 4;
    grid-row: 4 / 5;
    align-self: stretch;
    max-width: none;
    min-width: 0;
    position: relative;
  }
  /* RESETAR: habilitado no mobile expandido com mesma animação do desktop */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed) .report-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    padding: 0 20px;
    opacity: 0;
    pointer-events: none;
    background: rgba(26, 24, 20, 0.88);
    border: 1px solid var(--tr-menu-gold, var(--gold, #C49A3C));
    border-radius: 9999px;
    color: var(--tr-menu-gold, var(--gold, #C49A3C));
    cursor: pointer;
    font-family: var(--font, 'Archivo', sans-serif);
    font-size: var(--tr-menu-font-size, 12px);
    font-weight: 700;
    font-stretch: 125%;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    transition: max-height 0.28s cubic-bezier(.4,0,.2,1),
                margin-top 0.28s cubic-bezier(.4,0,.2,1),
                padding-top 0.28s cubic-bezier(.4,0,.2,1),
                padding-bottom 0.28s cubic-bezier(.4,0,.2,1),
                opacity 0.22s ease;
  }
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed) .report-reset-btn.report-reset-btn--active {
    max-height: 44px;
    margin-top: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
    opacity: 1;
    pointer-events: auto;
  }
  /* ── Mobile: painel de filtros — overlay absolute (não afeta altura do toolbar) ── */
  /* Painel (dropdowns-row): overlay abaixo do filter-group, fechado por padrão */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed) .report-filter-dropdowns-row {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    border: none;
    border-radius: 0;
    background: transparent;
    transition: max-height 0.28s cubic-bezier(.4,0,.2,1);
  }
  /* Painel aberto */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed)
  .report-filter-dropdowns-row.report-filter-panel--open {
    max-height: 45vh;
    overflow-y: auto;
    border: 1px solid var(--tr-menu-gold, var(--gold, #C49A3C));
    border-radius: var(--tr-menu-radius, 8px);
    background: rgba(26, 24, 20, 0.88);
  }
  /* rfdr--tipo: mostra dimension-wrap; esconde value-wrap */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed)
  .report-filter-dropdowns-row.rfdr--tipo #report-filter-dimension-wrap { flex: 1; }
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed)
  .report-filter-dropdowns-row.rfdr--tipo #report-filter-value-wrap { display: none; }
  /* rfdr--valor: mostra value-wrap; esconde dimension-wrap */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed)
  .report-filter-dropdowns-row.rfdr--valor #report-filter-value-wrap { flex: 1; }
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed)
  .report-filter-dropdowns-row.rfdr--valor #report-filter-dimension-wrap { display: none; }
  /* Dropdown dentro do painel: position static (flui dentro do painel) */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed)
  .report-filter-dropdowns-row .transit-report-dropdown {
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: 0;
  }
  /* Cascade tabs: não necessários no painel mobile */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed)
  .report-filter-dropdowns-row .report-filter-cascade-tab { display: none !important; }
  /* Colapsado: centro col 2 de 3 */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar.report-toolbar-collapsed
  .transit-report-row--consolidated > .report-toolbar-center-col {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
  }

  /* ── Arcos: posição no grid + cancelar translateX de v723 (todos os estados) ── */
  #page-transits.active #transit-split[data-mode="top"] .report-toolbar-arc--left {
    grid-column: 1;
    grid-row: 1 / 3;
    overflow: visible;
    transform: none;
    transition: width 0.32s ease, border-width 0.32s ease, border-radius 0.32s ease, background-color 0.22s ease;
  }
  /* Expandido: arc-right na col 4 */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed) .report-toolbar-arc--right {
    grid-column: 4;
    grid-row: 1 / 3;
    overflow: visible;
    transform: none;
    transition: width 0.32s ease, border-width 0.32s ease, border-radius 0.32s ease, background-color 0.22s ease;
  }
  /* Colapsado: arc-right na col 3 (grid 57px auto 57px) */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar.report-toolbar-collapsed .report-toolbar-arc--right {
    grid-column: 3;
    grid-row: 1;
    overflow: visible;
    transform: none;
    transition: width 0.32s ease, border-width 0.32s ease, border-radius 0.32s ease, background-color 0.22s ease;
  }

  /* ── EXPANDIDO: barras retas douradas 10px centralizadas na coluna 1fr (C1/C12) ── */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed) .report-toolbar-arc--left,
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed) .report-toolbar-arc--right {
    justify-self: center;
    align-self: stretch;
    width: 10px;
    height: auto;
    align-self: stretch;
  }
  /* Cascatas expandidas: overflow:visible para dropdowns position:absolute não serem clipados */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed)
  .transit-report-row--consolidated > .report-filter-group,
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar:not(.report-toolbar-collapsed)
  .transit-report-row--consolidated > #report-tempo-wrap {
    width: auto;
    height: auto;
    max-height: none;
    max-width: none;
    min-width: 0;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.22s ease;
  }

  /* ── COLAPSADO: crescentes C dourados 57×114px em volta do dot ── */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar.report-toolbar-collapsed .report-toolbar-arc--left,
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar.report-toolbar-collapsed .report-toolbar-arc--right {
    grid-row: 1;
    align-self: center;
    width: 57px;
    height: 114px;
  }
  /* Cascatas colapsadas: sem espaço + fade-out, altura colapsa após fade */
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar.report-toolbar-collapsed
  .transit-report-row--consolidated > .report-filter-group,
  #page-transits.active #transit-split[data-mode="top"]
  .transit-report-toolbar.report-toolbar-collapsed
  .transit-report-row--consolidated > #report-tempo-wrap {
    width: 0;
    height: 0;
    max-height: none;
    max-width: 0;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, height 0s linear 0.22s;
  }
}
.transit-report-cascade-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
}
.transit-report-cascade-cell {
  width: 100%;
  box-sizing: border-box;
  padding: var(--tr-menu-pad);
  border: 1px solid var(--tr-menu-gold);
  border-radius: var(--tr-menu-radius, 8px);
  background: rgba(26, 24, 20, 0.88);
  font-family: var(--font, 'Archivo', sans-serif);
  font-size: var(--tr-menu-font-size);
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.transit-report-cascade-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--tr-menu-gold);
  text-align: left;
  border-radius: var(--tr-menu-radius, 8px) var(--tr-menu-radius, 8px) 0 0;
}
.transit-report-cascade__label {
  flex: 1 1 auto;
  min-width: 0;
}
.transit-report-cascade__chevron {
  flex: 0 0 auto;
  width: 28px;
  height: auto;
  opacity: 0.92;
}
.transit-report-cascade-value {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--tr-menu-creme);
  cursor: pointer;
  border-radius: 0 0 var(--tr-menu-radius, 8px) var(--tr-menu-radius, 8px);
  margin-top: -1px;
  border-top: 1px solid color-mix(in srgb, var(--tr-menu-gold) 55%, transparent);
}
.transit-report-cascade-value:hover {
  filter: brightness(1.06);
}
.transit-report-dropdown-wrap.is-open .transit-report-cascade-title {
  border-radius: var(--tr-menu-radius, 8px) var(--tr-menu-radius, 8px) 0 0;
}
.transit-report-dropdown-wrap.is-open .transit-report-cascade-value {
  display: none;
}
.transit-report-dropdown-wrap.is-open .transit-graph-chevron {
  transform: rotate(180deg);
}


.transit-report-period-cycle {
  min-width: 0;
  width: 100%;
}
.transit-report-dropdown-wrap {
  position: relative;
  min-width: 0;
}
.transit-report-aspects-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.transit-report-aspects-trigger .transit-graph-chevron {
  width: 28px;
  height: auto;
  opacity: 0.85;
}
.transit-report-aspects-trigger-suffix {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-bold);
  color: var(--gold);
  letter-spacing: 0.04em;
}
.transit-report-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  max-width: 100%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid var(--tr-menu-gold, var(--gold, #C49A3C));
  margin-top: -1px;
  border-radius: 0;
  background: rgba(26, 24, 20, 0.88);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  /* Limit: mesmo offset de margem que o topo da cascata tem até a moldura */
  max-height: calc(0.75 * (100vh - var(--header-h) - var(--footer-total-h) - 2 * var(--frame-w)));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--tr-menu-gold, var(--gold, #C49A3C)) rgba(26, 24, 20, 0.88);
}
.transit-report-dropdown::-webkit-scrollbar {
  width: 3px;
}
.transit-report-dropdown::-webkit-scrollbar-track {
  background: rgba(26, 24, 20, 0.88);
}
.transit-report-dropdown::-webkit-scrollbar-thumb {
  background: var(--tr-menu-gold, var(--gold, #C49A3C));
  border-radius: 2px;
}
.transit-report-dropdown[hidden] {
  display: none !important;
}
.transit-report-dropdown-sep {
  display: none;
}
.transit-report-dropdown-item {
  display: block;
  width: 100%;
  margin: -1px 0 0;
  border-radius: 0;
  border-right: none;
  border-left: none;
  background: transparent;
  color: var(--tr-menu-creme, var(--creme, #EDE0BD));
  text-align: right;
  cursor: pointer;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.transit-report-dropdown-wrap.is-open .transit-report-dropdown-item:last-child {
  border-radius: 0 0 var(--tr-menu-radius, 8px) var(--tr-menu-radius, 8px);
}
.transit-report-dropdown-item:hover {
  box-shadow: inset 0 0 0 1px var(--tr-menu-gold, var(--gold, #C49A3C));
}
.transit-report-dropdown-item.active {
  background: var(--tr-menu-gold, var(--gold, #C49A3C));
  color: var(--ink, #1A1814);
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.transit-report-saved-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 10px;
  min-height: 0;
  background: color-mix(in srgb, var(--gold, #F4C430) 18%, transparent);
  border: 1.5px solid var(--ink, #1A1814);
  border-radius: var(--tr-menu-radius, 8px);
  color: var(--ink, #1A1814);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.transit-report-saved-btn svg path {
  stroke: var(--ink, #1A1814);
}
.transit-report-saved-btn:hover {
  filter: brightness(0.88);
}
.transit-report-saved-btn--active,
.transit-report-saved-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--gold, #F4C430) 35%, transparent);
  color: var(--ink, #1A1814);
}
.transit-report-saved-btn--active svg path,
.transit-report-saved-btn[aria-pressed="true"] svg path {
  fill: var(--ink, #1A1814);
  stroke: var(--ink, #1A1814);
}

/* ═══════════════════════════════════════════
   PLAYER v2 — 3 linhas independentes (nav · transport · timeline)
   Design unificado com frosted glass + borda gold + cantos arredondados
   ═══════════════════════════════════════════ */

/* ── Linha base ── */
.tempo-row {
  color: var(--player-color, var(--gold));
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}
.tempo-row:not(#player-row-nav) {
  overflow: hidden;
  max-height: 40px;
  opacity: 1;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}

/* ── Botão base ── */
.tempo-btn {
  background: var(--player-surface, color-mix(in srgb, var(--bg) 10%, transparent));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid var(--player-border, var(--border));
  border-radius: 999px;
  color: var(--player-color, var(--gold));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, opacity 0.15s ease;
  flex-shrink: 0;
  padding: 0 10px;
  height: 40px;
  font-size: 8px;
  font-weight: var(--fw-bold);
  font-stretch: expanded;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tempo-btn:hover {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.tempo-btn:active {
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

/* Botão só de ícone (SVG) */
.tempo-btn--icon {
  padding: 6px 8px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
}
.tempo-btn--icon svg {
  display: block;
}

/* Play/Pause: destaque maior */
.tempo-btn--play {
  padding: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: relative;
}
.tempo-btn--play svg, .gantt-player-play svg {
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tempo-btn--play.playing .icon-play, .gantt-player-play.playing .icon-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5) rotate(90deg);
}
.tempo-btn--play:not(.playing) .icon-pause, .gantt-player-play:not(.playing) .icon-pause {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5) rotate(-90deg);
}
.tempo-btn--play.playing .icon-pause,
.tempo-btn--play:not(.playing) .icon-play,
.gantt-player-play.playing .icon-pause,
.gantt-player-play:not(.playing) .icon-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.tempo-btn--play.playing { background: color-mix(in srgb, var(--ink) 18%, transparent); }

/* ─────────────────────
   Row 1 — Navegação: HOJE · data · SEM | MÊS | ANO
   ───────────────────── */
#player-row-nav {
  height: 40px;
  padding: 0;
  justify-content: space-between;
  background: transparent;
  border: none;
}

/* Botão IR PARA HOJE. Só existe quando a data NÃO é hoje — não há mais o
   estado inerte "HOJE": o pill da data já inverte as cores, e um botão que
   não leva a lugar nenhum só ocupava a linha.
   Cores invertidas iguais às do pill, para os dois se lerem como um bloco. */
.tempo-btn--today {
  padding: 0 12px;
  height: 40px;
}
.tempo-btn--today[hidden] { display: none !important; }
:root[data-theme="blunt-light"] .tempo-btn--today {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--gold);
}
:root[data-theme="blunt-dark"] .tempo-btn--today {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--ink);
}

/* Data + IR PARA HOJE: um grupo só, centrado no eixo do gráfico. A data era
   centrada sozinha (`left:50%`), então o botão ao lado dela a tiraria do eixo.
   Centrando o GRUPO, a data cede espaço quando o botão aparece e o conjunto
   continua no meio. */
.tempo-nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Data central */
.tempo-date {
  display: flex;
  align-items: center;
  height: 40px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  font-stretch: expanded;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  border: 2px solid var(--player-border, var(--border));
  transition: height 0.2s ease;
  border-radius: 999px;
  padding: 0 14px;
  box-sizing: border-box;
  background: var(--player-surface, color-mix(in srgb, var(--bg) 10%, transparent));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Data ≠ hoje: cores invertidas (pill sólido fg/bg trocados) nos dois temas. */
:root[data-theme="blunt-light"] .tempo-date--changed {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--gold);
}
:root[data-theme="blunt-dark"] .tempo-date--changed {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--ink);
}

/* Grupo de botões de escala (direita) */
.tempo-scale-opts {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tempo-scale-opts[hidden] { display: none; }
.tempo-scale-opt {
  opacity: 0.5;
}
.tempo-scale-opt.tempo-scale-opt--active {
  opacity: 1;
  background: color-mix(in srgb, var(--ink) 15%, transparent);
}

/* ─────────────────────
   Row 2 — Transport: << · < · play · > · >>
   ───────────────────── */
#player-row-transport {
  height: 40px;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  position: relative;
}
.tempo-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* Mobile: transport centrado — o HOJE saiu desta linha e foi para a da data. */
@media (max-width: 768px) {
  #player-row-transport {
    padding: 0 12px 0 4px;
  }
}

/* ─────────────────────
   Row 3 — Timeline: label · barra · indicador
   ───────────────────── */
#player-row-timeline {
  height: 40px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  border: 1px solid var(--player-border, var(--border));
  background: var(--player-surface, color-mix(in srgb, var(--bg) 10%, transparent));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tempo-scale-label {
  font-size: 8px;
  font-weight: var(--fw-bold);
  font-stretch: expanded;
  letter-spacing: 0.08em;
  color: var(--player-color, var(--gold));
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 0 0 10px;
  margin-right: 16px;
  opacity: 0.7;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tempo-scale-label:hover { opacity: 1; }

/* Wrapper da barra da timeline (preenche o resto da linha) */
.tempo-timeline-wrap {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 0;
}

.tempo-timeline-bar {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--player-color, var(--gold));
  transform: translateY(-50%);
}

.timeline-tick {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 8px;
  background: var(--player-color, var(--gold));
}
.timeline-tick--tall {
  height: 16px;
}

/* Indicador: círculo 24px, centralizado verticalmente na linha */
.tempo-timeline-indicator {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  z-index: 2;
  transition: left 0.05s linear, background 0.15s ease;
}
.tempo-timeline-indicator:hover {
  background: var(--gold);
}
.tempo-timeline-indicator:active { cursor: grabbing; }
/* Celeste invertido: indicador com borda/preenchimento ink (era Solar). */
:root[data-theme="blunt-light"] .tempo-timeline-indicator { border-color: var(--ink); }
:root[data-theme="blunt-light"] .tempo-timeline-indicator:hover { background: var(--ink); }

/* Glow e core (Mercúrio, mesma base do círculo) */
.tempo-timeline-indicator-glow,
.tempo-timeline-indicator-core { display: none; }

.tempo-timeline-wrap {
  cursor: pointer;
}

.transit-canvas-area {
  flex: 1; overflow: hidden;
  position: relative;
}
canvas#transit-canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  object-fit: contain;
  cursor: grab;
  touch-action: none;
  /* iOS: sem lupa/callout de seleção ao tocar/segurar o gráfico */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* Largura/altura em px vêm do JS; evitar 100%×100% que força esticar o bitmap ao redimensionar janela/PWA */
}

/* Lua limiares: fundo Canvas + camada SVG (glifos, hastes, ticks, hit) */
.transit-lunar-interactive {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.transit-lunar-interactive svg {
  display: block;
  width: 100%;
  height: 100%;
}
.transit-lunar-interactive .lunar-moon-mark,
.transit-lunar-interactive .lunar-tension-halo-wrap {
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.16s ease-out;
}
/* Durante o remendo de geometria do zoom os marcadores são reposicionados em
   bloco. A transição acima existe para o hover (scale 1.25) — aplicada ao
   reposicionamento, faria os ~99 glifos deslizarem a cada passo do gesto,
   com sensação de arrasto elástico. Suprimida só nesse intervalo
   (_lunarPatchOverlayGeometry). */
.transit-lunar-interactive.lunar-geom-patching .lunar-moon-mark {
  transition: none;
}
.transit-lunar-interactive .lunar-tension-halo-wrap {
  cursor: default;
}
.transit-lunar-interactive .lunar-moon-mark:focus {
  outline: none;
}
.transit-lunar-interactive .lunar-moon-mark:focus-visible {
  outline: 2px solid var(--gold, #394da1);
  outline-offset: 2px;
}
.transit-lunar-interactive .lunar-spiral-moon-radial {
  transition: opacity 0.5s ease;
}
.transit-lunar-interactive .lunar-arc-titles {
  pointer-events: none;
}
.transit-lunar-interactive .lunar-arc-titles text {
  pointer-events: none;
}

/* ─── TRANSIT PAGE: CANVAS FULL VIEWPORT ───
   Canvas é position:absolute inset:0 → cobre tela toda incluindo atrás
   do header/footer. Sem espaçador ::before — o conteúdo rola por baixo do header (blur).
   ─────────────────────────────────────────── */
#page-transits.active {
  padding-top: 0;
}

/* Remover containing-block do split-container para que
   o canvas absoluto seja relativo ao #page-transits */
#page-transits .split-container {
  position: static;
}

/* Canvas underlay: fullscreen atrás de header/footer */
#transit-graph-panel .transit-canvas-area,
#transit-graph-panel .chart-canvas-underlay,
#page-transits .transit-canvas-area,
#page-transits .chart-canvas-underlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  flex: none;
  min-height: unset;
  overflow: visible;
  touch-action: none;
}

/* Interface layer: controles na área útil entre header e footer */
/* ══════════════════════════════════════════
   MOLDURA GLOBAL — faixa borrada entre header e footer, com janela
   arredondada (16px) no miolo. Fill = bg do hub Observatório (#1A1814)
   a 50% + blur. Haste interna = outline destacado Solar. Decorativa.
══════════════════════════════════════════ */
#app-frame {
  position: fixed;
  left: 0; right: 0;
  top: var(--header-h);
  bottom: var(--footer-h);
  z-index: 5;
  pointer-events: none;
  padding: var(--frame-w);
  /* mesmo material do #app-header Celeste: Ink 85% + blur 5px */
  background: color-mix(in srgb, #1A1814 85%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* vaza o miolo com cantos arredondados: full rect XOR rounded-rect interno */
  -webkit-mask:
    linear-gradient(#000 0 0),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%25' height='100%25' rx='16' ry='16' fill='black'/></svg>") no-repeat center;
  mask:
    linear-gradient(#000 0 0),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%25' height='100%25' rx='16' ry='16' fill='black'/></svg>") no-repeat center;
  -webkit-mask-size: 100% 100%, calc(100% - 2 * var(--frame-w)) calc(100% - 2 * var(--frame-w));
  mask-size: 100% 100%, calc(100% - 2 * var(--frame-w)) calc(100% - 2 * var(--frame-w));
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* Haste interna: elemento separado p/ não ser cortado pela máscara do fill */
#frame-stroke {
  position: fixed;
  left: var(--frame-w); right: var(--frame-w);
  top: calc(var(--header-h) + var(--frame-w));
  bottom: calc(var(--footer-h) + var(--frame-w));
  z-index: 6;
  pointer-events: none;
  border-radius: var(--frame-radius);
  /* haste encostada na borda interna da janela (1px Solar) */
  border: 1px solid var(--gold);
}

/* Moldura aparece SÓ no desktop e SÓ quando um gráfico está na tela
   (html.chart-frame-active, ligado por chart-frame.js). Fora disso fica
   oculta e --frame-w volta a 0, devolvendo os controles ao lugar original. */
#app-frame, #frame-stroke { display: none; }
@media (min-width: 769px) {
  html.chart-frame-active {
    --frame-w: 12px;
    --tsb-inner-h: calc(100vh - var(--header-h) - var(--footer-h) - 2 * var(--frame-w));
    --tsb-col: calc(var(--grid-master-viewport-content) / 12);
  }
  html.chart-frame-active #app-frame,
  html.chart-frame-active #frame-stroke { display: block; }
}

/* ── Moldura Você: sem preenchimento colorido, borda ink, blur mantido ── */
@media (min-width: 769px) {
  html.you-frame-active {
    --frame-w: 12px;
  }
  html.you-frame-active #app-frame,
  html.you-frame-active #frame-stroke { display: block; }

  /* Sem tinta — só os efeitos (blur) permanecem */
  html.you-frame-active #app-frame {
    background: transparent;
  }
  /* Borda ink ao invés de ouro */
  html.you-frame-active #frame-stroke {
    border: 2px solid var(--ink);
  }
  /* Observatório: borda gold solar */
  html[data-theme="blunt-dark"].you-frame-active #frame-stroke {
    border: 2px solid var(--gold);
  }

}

/* ── Botões prev/next de slides da seção Você ─────────────────────────────── */
.you-slide-nav-btn {
  position: fixed;
  width: 26px;
  height: 78px; /* P2: pill compactado — 3× a altura original */
  border-radius: 13px;
  border: 2px solid var(--gold); /* P1: stroke 2px sempre visível */
  background: transparent;
  color: var(--gold);
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* canvas fica clipado durante a transição de altura */
  cursor: pointer;
  z-index: 10;
  /* vertical: centrado no interior da moldura (78px) */
  top: calc(var(--header-h) + var(--frame-w) + (100vh - var(--header-h) - var(--footer-h) - 2 * var(--frame-w) - 78px) / 2);
  transition: height 0.25s ease, top 0.25s ease, background-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.you-slide-nav-btn canvas {
  flex-shrink: 0;
  display: none; /* P3: chevron oculto no compactado */
}
.you-slide-nav-btn:hover {
  /* P4: expandido = 50% da altura interior da moldura, centralizado */
  height: calc((100vh - var(--header-h) - var(--footer-h) - 2 * var(--frame-w)) * 0.5);
  top: calc(var(--header-h) + var(--frame-w) + (100vh - var(--header-h) - var(--footer-h) - 2 * var(--frame-w)) * 0.25);
  background: rgba(26, 24, 20, 0.08);
}
:root[data-theme="blunt-dark"] .you-slide-nav-btn:hover {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
/* P3: display do canvas controlado exclusivamente pelo JS (_bindYouNavBtnHover) */
.you-slide-nav-btn[hidden] { display: none !important; }
:root[data-theme="blunt-light"] .you-slide-nav-btn { border-color: var(--ink); }

/* horizontal: borda do botão a 16px da borda interna da moldura */
.you-slide-nav-btn--prev { left:  calc(var(--frame-w) + 16px); }
.you-slide-nav-btn--next { right: calc(var(--frame-w) + 16px); }

/* Só aparecem no desktop quando a moldura Você está ativa */
@media (min-width: 769px) {
  html.you-frame-active .you-slide-nav-btn:not([hidden]) { display: flex; }
}

/* ── Scrollbar customizada (desktop, vista Relatório de Trânsitos) ──────────
   Caps na menta (#b2dadb, mesma faixa do título) + haste fina + thumb circular.
   Largura = 1 coluna, centralizado entre mid-C9 e borda direita do frame (independente do menu).
   Vertical: 50% topo / 50% trilho /
   50% base do interior da moldura.

   Animação de 3 fases ao expandir:
     1. Caps sobem/descem até as pontas (0.22s)
     2. Haste cresce a partir do centro do thumb + caps alargam (0.20s após fase 1)
     3. Thumb vai para a posição da rolagem (JS timer, 0.16s CSS)

   Recolhimento é o inverso: thumb → centro, haste+caps estreitam, caps ao centro.
   Classes de estado: .is-expanding (fase 1), .is-expanded (fases 1+2 concluídas),
   .is-collapsing (fase 2 do recolhimento). */
/* Tamanho fixo da bolinha = círculo do FAB do footer (.nav-fab = 52px). */
/* Sky zoom scrollbar substitui zoom-full-ctrl; aparece ao centro quando lupa ativada */
#page-transits .orrery-zoom-control .zoom-full-ctrl { display: none !important; }
@media (min-width: 769px) {
  #page-transits.active #sky-zoom-scrollbar:not([hidden]) {
    display: block;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: var(--tsb-col);
    top: calc(var(--header-h) + var(--frame-w) + 0.25 * var(--tsb-inner-h));
    height: calc(0.5 * var(--tsb-inner-h));
    z-index: 11;
    pointer-events: auto;
    overflow: visible;
  }
  /* Split aberto: painel esquerdo ocupa 50vw — centraliza nele */
  #page-transits.active .transit-detail-open #sky-zoom-scrollbar:not([hidden]) {
    left: 25vw;
  }
}
/* Caps: stroke 2px ink em ambos os temas; blunt-light troca menta por gold solar 58% */
#sky-zoom-scrollbar .transit-scrollbar-cap {
  border: 2px solid var(--ink);
  border-radius: 8px;
}
:root[data-theme="blunt-light"] #sky-zoom-scrollbar .transit-scrollbar-cap {
  background: color-mix(in srgb, var(--gold) 58%, transparent);
}
/* blunt-dark: inversão — fundo ink, borda gold (solar) */
:root[data-theme="blunt-dark"] #sky-zoom-scrollbar .transit-scrollbar-cap {
  background: var(--ink);
  border-color: var(--gold);
}
/* Rail: largura = metade da altura das caps (10px), preenchimento ink-b 58%, stroke 2px ink */
#sky-zoom-scrollbar .transit-scrollbar-rail {
  width: calc(var(--tsb-cap-h) / 2);
  background: color-mix(in srgb, var(--ink-b) 58%, transparent);
  border-left: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  box-sizing: border-box;
}
/* blunt-dark: strokes laterais da aste central em solar */
:root[data-theme="blunt-dark"] #sky-zoom-scrollbar .transit-scrollbar-rail {
  border-left-color: var(--gold);
  border-right-color: var(--gold);
}

/* ── Sky zoom: animação de fechamento customizada ───────────────
   R1 (0–120ms): aste central encurta de cima → baixo
   R2 (delay 100ms, dur 200ms): caps encolhem para largura do thumb e convergem ao centro
   R3 (delay 420ms): thumb some por último                                              */
#sky-zoom-scrollbar.is-collapsing .transit-scrollbar-rail {
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
  opacity: 0;
  transition: transform 0.12s ease, opacity 0.1s ease 0.06s;
}
#sky-zoom-scrollbar.is-collapsing .transit-scrollbar-cap {
  left: calc(50% - var(--tsb-thumb) / 2);
  right: calc(50% - var(--tsb-thumb) / 2);
  opacity: 0;
  transition:
    left 0.2s ease 0.1s,
    right 0.2s ease 0.1s,
    top 0.2s ease 0.1s,
    bottom 0.2s ease 0.1s,
    opacity 0.12s ease 0.3s;
}
#sky-zoom-scrollbar.is-collapsing .transit-scrollbar-cap--top {
  top: calc(50% - var(--tsb-cap-h) / 2);
}
#sky-zoom-scrollbar.is-collapsing .transit-scrollbar-cap--bottom {
  bottom: calc(50% - var(--tsb-cap-h) / 2);
}
#sky-zoom-scrollbar.is-collapsing .transit-scrollbar-thumb {
  transform: translateX(-50%) scale(0);
  opacity: 0;
  transition:
    transform 0.18s ease 0.42s,
    opacity 0.15s ease 0.43s;
}

.transit-scrollbar { --tsb-thumb: 52px; --tsb-cap-h: 20px; display: none; }
@media (min-width: 769px) {
  #page-transits.active #transit-scrollbar:not([hidden]) {
    --tsb-step: calc(var(--tsb-col) + var(--grid-master-gap));
    display: block;
    position: fixed;
    width: var(--tsb-col);
    /* centralizado entre mid-C9 e borda direita da moldura — independente do menu */
    left: calc(
      (8.5 * var(--tsb-col) + 8 * var(--grid-master-gap) + 100vw - var(--frame-w)) / 2
      - var(--tsb-col) / 2
    );
    /* container centrado na página: thumb colapsado fica a 50% de tsb-inner-h */
    top: calc(var(--header-h) + var(--frame-w) + 0.25 * var(--tsb-inner-h));
    height: calc(0.5 * var(--tsb-inner-h));
    z-index: 11;
    pointer-events: auto;
    overflow: visible;
  }
}
/* Cap: transições separadas para vertical (fase 1) e horizontal (fase 2) */
.transit-scrollbar-cap {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--tsb-cap-h);
  border-radius: 4px;
  background: #b2dadb;
  border: 1px solid var(--ink);
  box-sizing: border-box;
  transition: top 0.22s ease, bottom 0.22s ease, left 0.2s ease, right 0.2s ease;
}
/* Colapsado (padrão): caps juntos no centro, a 1 coluna de distância (quadrado) */
.transit-scrollbar-cap--top { top: calc(50% - var(--tsb-col) / 2); }
.transit-scrollbar-cap--bottom { bottom: calc(50% - var(--tsb-col) / 2); }

/* Fase 1 (is-expanding): caps vão às pontas verticalmente */
.transit-scrollbar.is-expanding .transit-scrollbar-cap--top { top: 0; }
.transit-scrollbar.is-expanding .transit-scrollbar-cap--bottom { bottom: 0; }

/* Expandido (is-expanded): caps às pontas + alargados (mid-C10 → mid-C12),
   haste visível — a largura extra é col/2 + gap para cada lado */
.transit-scrollbar.is-expanded .transit-scrollbar-cap--top { top: 0; }
.transit-scrollbar.is-expanded .transit-scrollbar-cap--bottom { bottom: 0; }
.transit-scrollbar.is-expanded .transit-scrollbar-cap {
  left: calc(-1 * (var(--tsb-col) / 2 + var(--grid-master-gap)));
  right: calc(-1 * (var(--tsb-col) / 2 + var(--grid-master-gap)));
}
/* Recolhimento fase 2: caps ainda nas pontas mas estreitando */
.transit-scrollbar.is-collapsing .transit-scrollbar-cap--top { top: 0; }
.transit-scrollbar.is-collapsing .transit-scrollbar-cap--bottom { bottom: 0; }

/* Linha dupla: duas hastes de 1px com 4px de gap. Cresce em altura a partir do centro. */
.transit-scrollbar-rail {
  position: absolute;
  top: var(--tsb-cap-h);
  bottom: var(--tsb-cap-h);
  left: 50%;
  width: 4px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: center;
  background: transparent;
  border-left: 1px solid var(--text-dim);
  border-right: 1px solid var(--text-dim);
  box-sizing: content-box;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.transit-scrollbar.is-expanded .transit-scrollbar-rail {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
}
.transit-scrollbar-thumb {
  position: absolute;
  left: 50%;
  /* colapsado: centralizada entre os caps (JS reposiciona ao expandir) */
  top: calc(50% - var(--tsb-thumb) / 2);
  width: var(--tsb-thumb);
  height: var(--tsb-thumb);
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--text);
  border: none;
  padding: 0;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  transition: top 0.16s ease;
}
.transit-scrollbar-thumb:active { cursor: grabbing; }
.transit-scrollbar-thumb:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Esconde a scrollbar nativa do painel de relatório no desktop (a custom assume) */
@media (min-width: 769px) {
  #page-transits.active #transit-split[data-mode="top"] #transit-desc-content {
    scrollbar-width: none;
  }
  #page-transits.active #transit-split[data-mode="top"] #transit-desc-content::-webkit-scrollbar {
    display: none;
  }
}

/* ── Scrollbar mobile: inline após os cards, expande para overlay header→footer ─────
   Colapsado: participa do grid de 12 cols (grid-column 5/9 = centro 4/12).
              Caps menta + haste + thumb na mesma linguagem visual do desktop.
   Expandido (is-expanding/is-expanded/is-collapsing): position:fixed sobre tudo.
   Colapso: is-collapsing adiciona opacity:0 + transição → fade-away. */
@media (max-width: 768px) {
  #page-transits.active #transit-split[data-mode="top"] #transit-scrollbar:not([hidden]) {
    display: block;
    position: relative;
    grid-column: 5 / 9;
    justify-self: center;
    width: 100%;
    /* Altura imposta via JS (syncMobileHeight): aspect-ratio não funciona
       quando todos os filhos são position:absolute — o row contribui 0 ao grid. */
    height: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin: 40px 0 72px;
    z-index: auto;
    overflow: visible;
    /* --tsb-col: gap entre os caps no colapsado (≈ metade da largura do container) */
    --tsb-col: 60px;
  }
  /* Expandido/expandindo: overlay fixed header→footer */
  #page-transits.active #transit-split[data-mode="top"] #transit-scrollbar.is-expanding,
  #page-transits.active #transit-split[data-mode="top"] #transit-scrollbar.is-expanded,
  #page-transits.active #transit-split[data-mode="top"] #transit-scrollbar.is-collapsing {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--header-h) !important;
    bottom: var(--footer-total-h) !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    background: rgba(26, 24, 20, 0.85);
    z-index: 500 !important;
    overflow: visible !important;
    background: none;
    --tsb-col: 60px;
  }
  /* Caps no overlay: largura total (sem o alargamento "para fora" do desktop) */
  #page-transits.active #transit-split[data-mode="top"] #transit-scrollbar.is-expanded .transit-scrollbar-cap,
  #page-transits.active #transit-split[data-mode="top"] #transit-scrollbar.is-expanding .transit-scrollbar-cap,
  #page-transits.active #transit-split[data-mode="top"] #transit-scrollbar.is-collapsing .transit-scrollbar-cap {
    left: 0 !important;
    right: 0 !important;
  }
  /* Fade-out ao colapsar */
  #page-transits.active #transit-split[data-mode="top"] #transit-scrollbar.is-collapsing {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease !important;
  }
  /* Esconde scrollbar nativa no mobile report view também */
  #page-transits.active #transit-split[data-mode="top"] #transit-desc-content {
    scrollbar-width: none;
  }
  #page-transits.active #transit-split[data-mode="top"] #transit-desc-content::-webkit-scrollbar {
    display: none;
  }
  /* Portal overlay: #transit-scrollbar movido para <body> pelo JS (position:fixed
     real, sem dependência de overflow:auto ancestral). Regras sem parent-context. */
  #transit-scrollbar.transit-scrollbar--overlay {
    display: block !important;
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: calc(var(--header-h) + 16px) !important;
    bottom: var(--footer-total-h) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: none !important;
    z-index: 500 !important;
    overflow: visible !important;
    --tsb-col: 60px;
  }
  /* Caps: garantir largura total do overlay (overriding desktop negative left/right) */
  #transit-scrollbar.transit-scrollbar--overlay .transit-scrollbar-cap {
    left: 0 !important;
    right: 0 !important;
  }
  /* Fade-out no colapso */
  #transit-scrollbar.transit-scrollbar--overlay.is-collapsing {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease !important;
  }
}

.chart-controls-layer {
  position: fixed;
  left: var(--frame-w);
  right: var(--frame-w);
  top: calc(var(--chart-safe-top) + var(--frame-w));
  bottom: calc(var(--chart-safe-bottom) + var(--frame-w));
  z-index: 10;
  pointer-events: none;
}
.chart-controls-layer[hidden] {
  display: none !important;
}
.chart-controls-layer > * {
  pointer-events: auto;
}
.chart-controls-right-stack {
  position: absolute;
  top: 0;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 12;
}
#page-transits .chart-controls-layer #transit-graph-toolbar:not([hidden]) {
  position: absolute;
  top: 0;
  left: 12px;
  transform: none;
}
@media (max-width: 899px) {
  #page-transits .chart-controls-layer #transit-graph-toolbar.chips-collapsed:not([hidden]) {
    top: -10px;
  }
}
/* zoom-control dentro do controls-layer usa fixed do base */
#page-transits .chart-controls-layer .tempo-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: 0;
  transition: opacity 0.2s ease, bottom 0.2s ease;
}
/* Colapsado: 16px da moldura no desktop */
@media (min-width: 769px) {
  #page-transits .chart-controls-layer .tempo-panel.tempo-collapsed {
    bottom: 16px;
  }
}
/* ══════════════════════════════════════════
   TRÂNSITOS GANTT — área com scroll vertical
   Desktop: bottom footer+96px; lanes dinâmicas; canvas preenche container.
   Mobile: layout vertical (mock) — chrome DOM + scroll horizontal de colunas.
══════════════════════════════════════════ */
#page-transits .transit-canvas-area.transit-gantt-area {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  top: var(--header-h);
  bottom: var(--footer-total-h);
  display: flex;
  flex-direction: column;
  /* iOS: sem seleção/lupa ao tocar o gráfico */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 769px) {
  #page-transits .transit-canvas-area.transit-gantt-area {
    bottom: calc(var(--footer-total-h) + var(--gantt-bottom-gap));
  }
}
#page-transits .transit-canvas-area.transit-gantt-area #transit-canvas {
  display: block;
  max-height: none;
  flex-shrink: 0;
}
/* Mobile full-bleed: colunas dos trânsitos passam por debaixo do header e do footer */
#page-transits .transit-canvas-area.transit-gantt-area.transit-gantt-mobile {
  top: 0;
  bottom: 0;
  overflow: hidden;
  /* iOS: sem seleção/lupa em toda a área do gráfico (labels, faixas, player) */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Gantt player overlay ─────────────────────────────────── */
.gantt-player-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  z-index: 5;
  color: var(--ink);
}
[data-theme="blunt-dark"] .gantt-player-overlay {
  color: #F4C430;
}
.gantt-player-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  pointer-events: none;
}
.gantt-player-btn {
  pointer-events: all;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.gantt-player-btn:hover { opacity: 1; }
.gantt-player-btn:active { opacity: 0.6; }
/* Toggle expand/recolher só existe no mobile horizontal */
.gantt-player-toggle {
  display: none;
}

/* Mobile vertical: player + HOJE sobrepostos ao fade mint, logo acima do footer */
.transit-gantt-mobile .gantt-player-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--footer-total-h) + 10px);
  height: auto;
  gap: 14px;
}
.transit-gantt-mobile .gantt-player-row {
  gap: 28px;
}

/* Mobile horizontal: player na primeira linha, à direita do leitor de data */
@media (max-width: 768px) {
  /* Faixa gold final encosta no topo do footer — sem o gap do safe-area
     (o #footer-nav fica em bottom:0 com height:--footer-h; o safe-bottom
     embutido em --footer-total-h criava uma faixa morta) */
  #page-transits .transit-canvas-area.transit-gantt-area:not(.transit-gantt-mobile) {
    bottom: var(--footer-h);
  }
  #page-transits .transit-gantt-area:not(.transit-gantt-mobile) .gantt-player-overlay {
    top: auto;
    bottom: 0;
    height: 64px;
    left: 0;
    right: 0;
  }
  /* Recolhido (default): faixa fina; o mesmo chevron do app vira o toggle —
     para cima no colapsado, para baixo no expandido; centro a 75% da largura */
  #page-transits .transit-gantt-area:not(.transit-gantt-mobile) .gantt-player-overlay.gantt-player-collapsed {
    height: 24px;
  }
  #page-transits .transit-gantt-area:not(.transit-gantt-mobile) .gantt-player-overlay.gantt-player-collapsed .gantt-player-row {
    display: none;
  }
  #page-transits .transit-gantt-area:not(.transit-gantt-mobile) .gantt-player-toggle {
    display: flex;
    position: absolute;
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 10px;
  }
  #page-transits .transit-gantt-area:not(.transit-gantt-mobile) .gantt-player-overlay:not(.gantt-player-collapsed) .gantt-player-toggle canvas {
    transform: rotate(180deg);
  }
  #page-transits .transit-gantt-area:not(.transit-gantt-mobile) .gantt-player-row {
    gap: 20px;
  }
  #page-transits .transit-gantt-area:not(.transit-gantt-mobile) .gantt-player-btn svg {
    width: 22px;
    height: 22px;
  }
}

.gantt-mobile-frame[hidden] {
  display: none !important;
}
/* HOJE — texto sublinhado dentro do player overlay; só aparece no mobile */
.gantt-mobile-today {
  display: none;
  pointer-events: all;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: none;
  background: none;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.transit-gantt-mobile .gantt-mobile-today {
  display: inline-block;
}
.gantt-mobile-today--active,
.gantt-mobile-today:disabled {
  opacity: 0.42;
  cursor: default;
  pointer-events: none;
}
.gantt-mobile-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}
/* Ano — coluna esquerda de 36px com faixa de 20px (mesma lógica de cores das bandas do desktop) */
.gantt-mobile-year {
  position: relative;
  flex: 0 0 36px;
  pointer-events: none;
  z-index: 3;
}
.gantt-mobile-year::before,
.gantt-mobile-months::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 20px;
  transform: translateX(-50%);
  background: var(--gold);
}
[data-theme="blunt-dark"] .gantt-mobile-year::before,
[data-theme="blunt-dark"] .gantt-mobile-months::before {
  background: #242018;
}
.gantt-mobile-year-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
}
[data-theme="blunt-dark"] .gantt-mobile-year-label,
[data-theme="blunt-dark"] .gantt-mobile-month {
  color: #F4C430;
}
.gantt-mobile-hscroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 12px;
}
.gantt-mobile-hscroll #transit-canvas {
  display: block;
  /* Canvas mais largo que o viewport para scroll horizontal por coluna;
     sem isto o max-width/object-fit do canvas base cria letterbox (squash) */
  max-width: none;
  max-height: none;
  object-fit: fill;
  margin: 0;
}
/* Meses — coluna direita de 36px com faixa de 20px; cada label centrado no span visível do mês */
.gantt-mobile-months {
  position: relative;
  flex: 0 0 36px;
  pointer-events: none;
  z-index: 3;
}
.gantt-mobile-month {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
}
.gantt-mobile-month--current {
  opacity: 1;
  font-weight: 800;
}
.gantt-mobile-playhead {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 38%;
  height: 0;
  border-top: 1.5px solid var(--ink);
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.15s ease;
}
.gantt-mobile-playhead--idle {
  opacity: 0.48;
}
.gantt-mobile-playhead--today {
  opacity: 1;
}
.gantt-mobile-playhead-date {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 12px;
  border-radius: 3px;
  background: var(--transit-hub-btn-hover-bg, #b2dadb);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
[data-theme="blunt-dark"] .gantt-mobile-playhead-date {
  background: #242018;
  color: #F4C430;
}

/* Com painel Mercúrio visível, só o banner leva margin-top:auto (empurra o par). */
#page-transits #transit-graph-panel:has(.mercury-phase-banner:not([hidden])) .tempo-panel {
  margin-top: 0;
}

/* Player: empurrado para o fundo do flex, acima do canvas */
#page-transits .tempo-panel {
  margin-top: auto;
  /* Folga mínima acima do footer fixo (mobile); desktop em media >=900px */
  margin-bottom: calc(var(--footer-total-h) + 20px);
  position: relative;
  z-index: 10;
  width: calc(2 * (var(--grid-master-viewport-content)) / 3 + 56px); /* cols 3–10 do grid mestre (mobile) */
  max-width: calc(100vw - 32px);
  align-self: center;
  opacity: var(--player-default-opacity, 0.72);
  transition: opacity 0.2s ease;
}
#page-transits .tempo-panel:hover { opacity: 1; }

.orrery-source-bar {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: right;
  padding: 3px 10px 0;
  flex-shrink: 0;
}

.orrery-zoom-control {
  position: fixed;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 10;
  opacity: var(--player-default-opacity, 0.72);
  transition: opacity 0.2s ease;
}
.orrery-zoom-control:hover { opacity: 1; }

/* Ícone de zoom + trilha (gap preservado vs. botão pause acima) */
.orrery-zoom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Pausa rotação: círculo frosted glass, collapsável por proximidade (igual Natal) */
#page-transits .orrery-zoom-control > .chart-spin-toggle {
  margin-bottom: 12px;
  flex-shrink: 0;
  width: 44px; height: 44px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--player-surface, color-mix(in srgb, var(--bg) 10%, transparent));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  color: var(--ink);
  transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
}
#page-transits .orrery-zoom-control > .chart-spin-toggle:hover {
  opacity: 1;
}
#page-transits .orrery-zoom-control > .chart-spin-toggle:active {
  opacity: 0.7;
}
#page-transits .orrery-zoom-control > .chart-spin-toggle.is-collapsed {
  width: 26px; height: 26px;
  /* Herda o bg do player (base já usa --player-surface) — unidade visual */
}
#page-transits .orrery-zoom-control > .chart-spin-toggle.is-collapsed svg {
  opacity: 0;
  transition: opacity 0.15s ease;
}
#page-transits .orrery-zoom-control > .chart-spin-toggle svg {
  fill: var(--gold);
  transition: fill 0.15s ease;
}
:root[data-theme="blunt-light"] #page-transits .orrery-zoom-control > .chart-spin-toggle {
  border-color: var(--ink);
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 58%, transparent);
}
:root[data-theme="blunt-light"] #page-transits .orrery-zoom-control > .chart-spin-toggle svg {
  fill: var(--ink);
}
.chart-spin-toggle .chart-spin-svg-play { display: none; }
.chart-spin-toggle:not(.is-paused) .chart-spin-svg-pause { display: block; }
.chart-spin-toggle:not(.is-paused) .chart-spin-svg-play { display: none; }
.chart-spin-toggle.is-paused .chart-spin-svg-pause { display: none; }
.chart-spin-toggle.is-paused .chart-spin-svg-play { display: block; }

/* ── Botão de ajuste (fit) — mesma casca dos controles; ícone cresce por modo ── */
#page-transits .orrery-zoom-control > .chart-fit-toggle {
  margin-bottom: 12px;
  flex-shrink: 0;
  width: 44px; height: 44px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--player-surface, color-mix(in srgb, var(--bg) 10%, transparent));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  color: var(--gold);
  transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
}
#page-transits .orrery-zoom-control > .chart-fit-toggle:active { opacity: 0.7; }
#page-transits .orrery-zoom-control > .chart-fit-toggle.is-collapsed { width: 26px; height: 26px; }
#page-transits .orrery-zoom-control > .chart-fit-toggle.is-collapsed svg { opacity: 0; transition: opacity 0.15s ease; }
:root[data-theme="blunt-light"] #page-transits .orrery-zoom-control > .chart-fit-toggle {
  border-color: var(--ink);
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 58%, transparent);
}
/* Ícone: bolinha preenchida + anéis (currentColor segue o color acima) */
.chart-fit-toggle svg { transition: opacity 0.15s ease; }
.chart-fit-toggle .fit-dot { fill: currentColor; stroke: none; }
.chart-fit-toggle .fit-ring-mid,
.chart-fit-toggle .fit-ring-lg { fill: none; stroke: currentColor; stroke-width: 2; }
.chart-fit-toggle .fit-dot,
.chart-fit-toggle .fit-ring-mid,
.chart-fit-toggle .fit-ring-lg { display: none; }
.chart-fit-toggle.fit-1 .fit-dot { display: block; }
.chart-fit-toggle.fit-2 .fit-ring-mid { display: block; }
.chart-fit-toggle.fit-3 .fit-ring-lg { display: block; }

/* Mobile padrão: círculo frosted glass (igual close-pill), collapsável */
#page-transits .orrery-zoom-control .zoom-icon-btn {
  width: 44px; height: 44px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--player-surface, color-mix(in srgb, var(--bg) 10%, transparent));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  opacity: 1;
  color: var(--ink);
  transform: scale(1);
  transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease, transform 0.18s ease;
}
#page-transits .orrery-zoom-control .zoom-icon-btn svg { stroke: var(--gold); fill: none; }
#page-transits .orrery-zoom-control .zoom-icon-btn:active { opacity: 0.7; }
#page-transits .orrery-zoom-control .zoom-icon-btn:hover { opacity: 1; }
:root[data-theme="blunt-light"] #page-transits .orrery-zoom-control .zoom-icon-btn {
  border-color: var(--ink);
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 58%, transparent);
}
:root[data-theme="blunt-light"] #page-transits .orrery-zoom-control .zoom-icon-btn svg {
  stroke: var(--ink);
}
#page-transits .orrery-zoom-control .zoom-icon-btn.is-collapsed {
  width: 26px; height: 26px;
  /* Herda o bg do player (base já usa --player-surface) — unidade visual */
}
#page-transits .orrery-zoom-control .zoom-icon-btn.is-collapsed svg {
  opacity: 0;
  transition: opacity 0.15s ease;
}
/* Zoom expandido no transit: full ctrl à esquerda, spin colapsa, zoom-icon preenche */
#page-transits .orrery-zoom-control .zoom-full-ctrl {
  position: absolute;
  right: 100%;
  margin-right: 16px;
  top: 50%;
  height: 50vh;
  transform: translateY(-50%) scaleY(0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transform-origin: right center;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity 0.22s ease;
}
#page-transits .orrery-zoom-control.zoom-expanded .zoom-full-ctrl {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
  pointer-events: auto;
}
#page-transits .orrery-zoom-control.zoom-expanded .zoom-icon-btn {
  background: var(--ink);
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
:root[data-theme="blunt-light"] #page-transits .orrery-zoom-control.zoom-expanded .zoom-icon-btn {
  background: var(--gold);
}
#page-transits .orrery-zoom-control.zoom-expanded .zoom-icon-btn svg {
  stroke: var(--gold);
}
:root[data-theme="blunt-light"] #page-transits .orrery-zoom-control.zoom-expanded .zoom-icon-btn svg {
  stroke: var(--ink);
}
#page-transits .orrery-zoom-control.zoom-expanded .chart-spin-toggle {
  width: 26px; height: 26px;
  opacity: 0.55;
  background: transparent;
}
#page-transits .orrery-zoom-control.zoom-expanded .chart-spin-toggle svg {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Transit zoom-inner: posiciona o full-ctrl relative a si */
#page-transits .orrery-zoom-inner {
  position: relative;
}
/* Transit zoom track: barra preenchida frosted, encosta nos centros dos botões */
#page-transits .orrery-zoom-control .zoom-track-wrap {
  width: 32px;
  height: 100%;
  min-height: 0;
  flex: 1 1 0;
  margin: -16px 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  overflow: visible;
  background: var(--player-surface, color-mix(in srgb, var(--bg) 10%, transparent));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
}
#page-transits .orrery-zoom-control .zoom-track {
  width: 16px;
  height: 100%;
  background: transparent;
  border-left: 1.25px solid var(--gold);
  border-right: 1.25px solid var(--gold);
  position: relative;
}
:root[data-theme="blunt-light"] #page-transits .orrery-zoom-control .zoom-track {
  border-color: var(--gold);
}
#page-transits .orrery-zoom-control .zoom-track-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gold);
  cursor: grab;
  z-index: 3;
  touch-action: none;
  transition: top 0.05s linear;
}
:root[data-theme="blunt-light"] #page-transits .orrery-zoom-control .zoom-track-marker {
  background: var(--gold);
  border-color: var(--gold);
}
/* Transit zoom-btns: mesmo estilo player */
#page-transits .orrery-zoom-control .zoom-btn {
  width: 32px; height: 32px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--player-surface, color-mix(in srgb, var(--bg) 10%, transparent));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--gold);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  transition: background 0.2s ease;
}
#page-transits .orrery-zoom-control .zoom-btn:hover {
  background: color-mix(in srgb, var(--ink) 25%, transparent);
}
#page-transits .orrery-zoom-control .zoom-btn:active {
  background: var(--ink);
}
:root[data-theme="blunt-dark"] #page-transits .orrery-zoom-control .zoom-btn:active {
  background: var(--gold);
}
:root[data-theme="blunt-light"] #page-transits .orrery-zoom-control .zoom-btn {
  border-color: var(--gold);
  color: var(--gold);
}

/* Controle completo: sempre no DOM, animado via transform (genérico — mantido para compatibilidade) */
.zoom-full-ctrl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: scaleY(0);
  transform-origin: center center;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity 0.22s ease;
}

/* ── Desktop: centro vertical, 16px da direita ── */
@media (min-width: 769px) {
  .orrery-zoom-control {
    top: 50%;
    transform: translateY(-50%);
  }
  .zoom-full-ctrl {
    transform-origin: center center;
  }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .orrery-zoom-control {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
  }
  .zoom-full-ctrl {
    transform-origin: top center;
  }
  /* Mobile: zoom-full-ctrl antigo oculto (substituído pelo sky-zoom-scrollbar). */
  #page-transits .orrery-zoom-control .zoom-full-ctrl { display: none; }

  /* Sky zoom scrollbar mobile: ocupa área header→footer com 8px de margem */
  #page-transits.active #sky-zoom-scrollbar:not([hidden]) {
    display: block;
    position: fixed;
    left: 8px;
    right: 8px;
    top: calc(var(--header-h) + 8px);
    bottom: calc(var(--footer-h) + 8px);
    width: auto;
    height: auto;
    transform: none;
    z-index: 100;
    pointer-events: auto;
    overflow: visible;
  }
  /* Caps expandidas no mobile: cobrem toda a largura do container */
  #sky-zoom-scrollbar.is-expanded .transit-scrollbar-cap {
    left: 0;
    right: 0;
  }

  /* Quando zoom está ativo: outros controles e FAB do footer somem */
  body.sky-zoom-open #transit-close-pill,
  body.sky-zoom-open .chart-spin-toggle,
  body.sky-zoom-open .chart-fit-toggle,
  body.sky-zoom-open #tempo-panel,
  body.sky-zoom-open .mobile-fab-nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  /* Lupa permanece visível e tappable acima do scrollbar para fechar no 2.º toque */
  body.sky-zoom-open #page-transits .zoom-icon-btn {
    position: relative;
    z-index: 101;
  }

  /* ── Aviso mobile "Entrar em X?" — bottom-sheet de confirmação ──
     Inspirado na janela da direita do desktop (vidro fosco, quinas 16px). Linha 1
     (88px) = pergunta; linha 2 (44px) = SIM | separador | NÃO, ambos 0.5fr. */
  .mobile-enter-confirm {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: calc(var(--footer-total-h) + 8px);
    z-index: 60;
    display: grid;
    grid-template-rows: 88px 44px;
    border-radius: 16px;
    border: 2px solid var(--ink-b);
    /* Celeste: gold solar COM vidro (semi-transparente + blur), não sólido */
    background: color-mix(in srgb, var(--gold) 60%, transparent);
    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  }
  /* Observatório: mantém o efeito de vidro/transparência, mas escuro (não gold) */
  :root[data-theme="blunt-dark"] .mobile-enter-confirm {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--bg) 60%, transparent);
  }
  .mobile-enter-confirm[hidden] { display: none; }

  .mec-question {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 16px;
    font-family: 'Archivo', var(--font, sans-serif);
    font-stretch: 125%;            /* expanded */
    font-weight: 700;
    font-size: 12px;
    color: var(--text);            /* theme-aware: escuro no Celeste, claro no Observatório */
  }
  .mec-actions {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;  /* 0.5fr | separador | 0.5fr */
    border-top: 1px solid var(--ink-b);
  }
  :root[data-theme="blunt-dark"] .mec-actions { border-top-color: var(--gold); }
  /* Separador vertical borda a borda (sem padding top/bottom) */
  .mec-divider { width: 1px; height: 100%; background: var(--ink-b); }
  :root[data-theme="blunt-dark"] .mec-divider { background: var(--gold); }
  .mec-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Archivo', var(--font, sans-serif);
    font-stretch: 125%;            /* expanded */
    font-weight: 700;
    font-size: 12px;
    color: var(--text);            /* theme-aware: escuro no Celeste, claro no Observatório */
    -webkit-tap-highlight-color: transparent;
  }

  /* Enquanto o aviso está aberto: botões e player do gráfico somem */
  body.mobile-enter-confirm-open #transit-close-pill,
  body.mobile-enter-confirm-open .chart-spin-toggle,
  body.mobile-enter-confirm-open .chart-fit-toggle,
  body.mobile-enter-confirm-open #page-transits .zoom-icon-btn,
  body.mobile-enter-confirm-open #orrery-zoom-wrap,
  body.mobile-enter-confirm-open #tempo-panel {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
}


/* Trilha de nível de zoom */
.zoom-track-wrap {
  width: 32px;
  height: 25vh;
  min-height: 120px;
  max-height: 200px;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}

/* Desktop: track height proporcional ao viewport */
@media (min-width: 769px) {
  .zoom-track-wrap {
    height: 40vh;
    min-height: 160px;
    max-height: 320px;
  }
}
.zoom-track {
  width: 1px; height: 100%;
  background: var(--border);
  position: relative;
}
.zoom-track-marker {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--gold);
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  cursor: grab;
  transition: top 0.15s ease;
}
.zoom-track-marker::before {
  content: '';
  position: absolute;
  inset: -20px;
}
.zoom-track-marker.is-dragging {
  cursor: grabbing;
  transition: none;
}

.zoom-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(26, 24, 20, 0.88);
  color: var(--gold);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.zoom-btn:active { opacity: 0.7; }

/* ─────────────────────────────────────
   PAINEL DE MAPA NATAL
───────────────────────────────────── */
#natal-graph-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
/* Sub-sub-menu ORRERY | LUA dentro do painel GRÁFICOS */
.chart-subnav {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 10%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  flex-shrink: 0;
}
.chart-subnav-btn {
  flex: 1;
  padding: 8px 0;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.chart-subnav-btn.active {
  color: var(--text);
  font-weight: var(--fw-bold);
  border-bottom-color: var(--text);
}
.chart-subnav-btn:hover:not(.active) { color: var(--text); }

/* Painéis de conteúdo do mapa natal */
.natal-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* Tabela: altura pelo conteúdo — senão flex:1 limita ao viewport e corta o fim no scroll de #page-you */
#natal-panel-estrutura.natal-panel {
  flex: 0 0 auto;
  min-height: auto;
}
#natal-panel-estrutura .natal-table {
  flex: none;
  min-height: auto;
}
/* Grid mestre (12 col, gap 8px, pad 0 8px) */
#natal-panel-estrutura {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  row-gap: var(--grid-master-gap);
  padding: 0 var(--grid-master-pad-x);
  margin-top: 8px;
  align-content: start;
  overflow: visible;
  box-sizing: border-box;
  width: 100%;
}
.natal-canvas-area {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  padding: 12px;
  touch-action: none;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
canvas#natal-canvas {
  display: block;
  flex-shrink: 0;
}
/* ── Cartografia (C4–C8 desktop) + barras (C9): fluxo compacto sob a tabela ── */
.cartografia-wrap {
  grid-column: 2 / 12;
  width: 100%;
  min-width: 0;
  align-self: start;
  margin-top: 0;
  padding-bottom: 128px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.elementos-barras-wrap {
  grid-column: 2 / 12;
  display: none;
  min-width: 0;
  width: 100%;
  align-self: start;
}
#cartografia-retangular {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  cursor: crosshair;
}
#elementos-barras {
  display: block;
  width: 100%;
  height: auto;
}

.natal-graph-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 8px 12px 12px;
  flex-shrink: 0;
}

/* ── Leitura: elementos dentro dos slides (flex, sem grid-column) ── */
.leitura-carto-full-wrap,
.leitura-carto-2-wrap,
.leitura-natal-table,
.leitura-natal-chart-preview,
#natal-reading-summary,
#natal-reading-list,
.leitura-elementos-wrap,
#natal-advanced-area {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Cartografia leitura (full) — flex centraliza canvas com largura em px (JS) */
.leitura-carto-full-wrap {
  align-self: start;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
#cartografia-leitura {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 16px;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}
/* Mobile full-bleed: canvas encosta nas bordas, sem raio nem borda */
@media (max-width: 768px) {
  #cartografia-leitura {
    border-radius: 0;
    border: none;
  }
}
@media (min-width: 769px) {
  #you-slide-cartografia.carto-card-open #cartografia-leitura {
    border-color: var(--gold);
  }
  :root[data-theme="blunt-light"] #you-slide-cartografia.carto-card-open #cartografia-leitura {
    border-color: var(--ink);
  }
}

.leitura-carto-2-wrap {
  align-self: start;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
#cartografia-leitura-2 {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* ── Modal: cartografia leitura (clique na primeira) ───────────── */
.carto-leitura-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

@media (min-width: 900px) {
  #cartografia-leitura-modal-overlay.carto-leitura-modal-overlay {
    display: grid;
    grid-template-columns: var(--grid-master-template);
    column-gap: var(--grid-master-gap);
    align-content: center;
    justify-items: stretch;
    padding: max(12px, env(safe-area-inset-top)) var(--grid-master-pad-x) max(12px, env(safe-area-inset-bottom));
  }
  #cartografia-leitura-modal-overlay .carto-leitura-modal-sheet {
    grid-column: 4 / span 6;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}
.carto-leitura-modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.carto-leitura-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.carto-leitura-modal-sheet {
  position: relative;
  z-index: 1;
  width: min(920px, calc(100vw - 32px));
  max-height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.carto-leitura-modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  padding: 6px 10px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.carto-leitura-modal-close {
  min-width: 56px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--text);
  font-family: var(--font, 'Archivo', sans-serif);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.carto-leitura-modal-close span {
  pointer-events: none;
}
.carto-leitura-modal-close:hover {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-color: var(--border-bright);
}
.carto-leitura-modal-canvas-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  flex: 1 1 0;
  background: var(--bg);
  box-sizing: border-box;
}

.carto-leitura-modal-info {
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(40vh, 280px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 8fr);
  align-items: start;
  border-top: 1px solid var(--border);
  box-sizing: border-box;
}

.carto-leitura-modal-vert-title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  line-height: 1;
  box-sizing: border-box;
  border-right: 1px solid var(--border);
}

.carto-leitura-modal-desc {
  min-width: 0;
  padding: 16px;
  box-sizing: border-box;
}

.carto-leitura-modal-desc p {
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  color: var(--text);
}

html.carto-leitura-modal-open,
html.carto-leitura-modal-open body {
  overflow: hidden;
  touch-action: none;
}

/* Tabela natal no painel leitura */
.leitura-natal-table { overflow-x: auto; }

/* Preview clicável do mapa natal (abaixo da tabela) */
.leitura-natal-chart-preview {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
}
.leitura-natal-chart-preview:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 6px;
}
.natal-leitura-thumb-area {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
}
#natal-canvas-leitura-thumb {
  display: block;
  width: 100%;
  height: 100%;
}

/* Gráfico de elementos no encerramento */
.leitura-elementos-wrap { align-self: start; }
#elementos-barras-leitura { display: block; width: 100%; height: auto; }

/* Texto da leitura elemental (slide graficos) */
.elementos-reading-text {
  width: 100%;
  max-width: 680px;
  align-self: center;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg-1, inherit);
}
.elementos-reading-text p {
  margin: 0 0 1.25em;
}

/* Mini-cartografia em cada card (padding zero; teto no .natal-reading-list --nrc-card-pad) */
.nrc-mini-carto-wrap {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  box-sizing: border-box;
}
.nrc-mini-carto {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Resumo do mapa (Sol/Lua; AC/dominante removidos como redundantes) */
.natal-reading-summary {
  padding: 0;
}
.nrs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.nrs-item {
  font-size: var(--fs-xs, 11px);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}
.nrs-glyph {
  font-size: var(--fs-sm, 13px);
  color: var(--text);
  font-family: 'Orby Astrology', sans-serif;
}

.natal-reading-list {
  --nrc-card-pad: 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Mobile: constrain card height so internal scroll (nrc-reading-body-col) works.
   Without this, the card grows infinitely and the .you-slide parent scrolls instead. */
@media (max-width: 899px) {
  .natal-reading-list .natal-reading-card {
    flex: 0 0 auto;
    max-height: 75dvh;
  }
}

/* Cards de planeta — 1fr:8fr base; mobile 2fr:10fr; esq.: título scroll + glifos; dir.: mini + texto + dock trânsitos */
.natal-reading-card {
  border: 2px solid var(--ink-b);
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 8fr);
  align-items: start;
  box-sizing: border-box;
}
:root[data-theme="blunt-dark"] .natal-reading-card {
  border-color: var(--gold);
}
/* Linhas internas: mesma cor, espessura original mantida */
.natal-reading-card .nrc-left-col { border-right-color: var(--ink-b); }
.natal-reading-card .nrc-reading-row { border-top-color: var(--ink-b); }
:root[data-theme="blunt-dark"] .natal-reading-card .nrc-left-col { border-right-color: var(--gold); }
:root[data-theme="blunt-dark"] .natal-reading-card .nrc-reading-row { border-top-color: var(--gold); }

@media (min-width: 900px) {
  .natal-reading-card {
    align-items: stretch;
  }
}

.nrc-left-col {
  grid-column: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-right: 1px solid var(--border);
  box-sizing: border-box;
}

.nrc-vert-title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  padding: 32px 0;
  display: block;
  min-width: 0;
  line-height: 1;
  box-sizing: border-box;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: start;
  align-self: center;
}

.nrc-glyph-cell {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}
.nrc-glyph-cell--house .nrc-reading-glyph-house {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--text-dim);
  line-height: 1;
}

.nrc-house--desktop-only {
  display: none;
}

@media (min-width: 900px) {
  .nrc-vert-title {
    flex: 0 0 auto;
    min-height: 0;
  }
  /* Oculta o item mobile E seu separador de fechamento (mesma classe nos dois) */
  .nrc-house--mobile-only {
    display: none;
  }
  .nrc-house--desktop-only {
    display: block;
  }
  .nrc-glyph-cell.nrc-house--desktop-only {
    display: flex;
  }
  .nrc-reading-glyphs--row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    min-width: 0;
    box-sizing: border-box;
  }
  .nrc-reading-glyphs--row .nrc-left-sep {
    width: 100%;
    flex-shrink: 0;
  }
  .nrc-reading-glyphs--row-empty {
    min-height: 0;
    padding: 0;
  }
}

.nrc-left-col .nrc-left-sep {
  margin: 0;
  width: 100%;
}

/* Hairline robusto: 0.5px de height some em telas 1x (arredonda p/ 0 conforme
   a posição fracionária); 1px + scaleY(0.5) nunca desaparece (antialiasing) */
.nrc-left-sep {
  flex-shrink: 0;
  height: 1px;
  background: var(--border);
  transform: scaleY(0.5);
}

.nrc-left-scroll {
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .nrc-left-scroll {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
}

.nrc-right-col {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .nrc-right-col {
    flex: 1;
    min-height: 0;
  }
}

.nrc-reading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 8fr);
  align-items: stretch;
  min-width: 0;
  border-top: 1px solid var(--border);
  flex: 1;
  min-height: 0;
}

@media (max-width: 899px) {
  /* Card: grade 2fr/10fr — strip vertical à esq., textos à dir. */
  .natal-reading-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 10fr);
    align-items: stretch;
    overflow: hidden;
  }

  /* Coluna esquerda: scroll no topo, fechar fixo no fundo */
  .nrc-left-col {
    border-right: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .nrc-left-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }

  .nrc-vert-title {
    flex: 0 0 auto;
    min-height: 0;
    padding: 32px 0;
  }

  .nrc-left-sep {
    flex-shrink: 0;
  }

  .nrc-glyph-cell {
    flex-shrink: 0;
  }

  .nrc-reading-house-vertical {
    flex-shrink: 0;
  }

  /* Mini-cartografia visível no mobile (fixa no topo; a leitura rola abaixo) */
  .nrc-mini-carto-wrap {
    display: flex;
    flex-shrink: 0;
  }

  /* Coluna direita: flex column com scroll interno */
  .nrc-right-col {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .nrc-reading-glyphs--row {
    display: none !important;
  }

  .nrc-reading-row {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: none;
  }

  .nrc-reading-body-col {
    border-left: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    position: relative;
  }

}

.nrc-reading-glyphs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  box-sizing: border-box;
}

.nrc-reading-glyph-planet,
.nrc-reading-glyph-sign {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  font-size: 20px;
  line-height: 1;
  color: var(--text);
}

/* ASC e MC: Archivo Extended Bold em todos os contextos gráficos */
[data-planet="asc"] .nrc-reading-glyph-planet,
[data-planet="mc"] .nrc-reading-glyph-planet {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-stretch: expanded;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.nrc-reading-glyph-sign {
  opacity: 0.6;
}

.nrc-reading-house-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  text-align: end;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  padding: 32px 0;
}

.nrc-reading-body-col {
  min-width: 0;
  border-left: 1px solid var(--border);
  position: relative; /* âncora para o pill absoluto */
}

/* Desktop: scroll interno no body-col (conteúdo > altura do card) */
@media (min-width: 900px) {
  .nrc-reading-body-col {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Overrides mobile */
@media (max-width: 899px) {
  .nrc-reading-body-col { border-left: none; }
}

/* ── Partição de trânsitos no card de leitura natal ────────────────── */

/* Separador visual em todas as telas */
.nrc-reading-body-col > .nrc-transits-wrap {
  border-top: 1px solid var(--ink-b);
}
:root[data-theme="blunt-dark"] .nrc-reading-body-col > .nrc-transits-wrap {
  border-top-color: var(--gold);
}
/* Evita borda dupla: o wrap já tem border-top */
.nrc-transits-wrap > .nrc-transits-section:first-child {
  border-top: none;
}


.nrc-basic {
  padding: var(--nrc-card-pad, 16px);
  font-size: 16px;
  line-height: 28px;
  color: var(--text);
}
.nrc-basic p {
  margin: 0 0 16px;
}
.nrc-basic p:last-child {
  margin-bottom: 0;
}
.nrc-advanced {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.nrc-advanced-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--accent, #C49A3C);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.nrc-advanced p {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  line-height: 1.7;
}

/* ── Seção de aspectos natais no card de leitura ────────────────── */
.nrc-aspects-section {
  border-top: 1px solid var(--border);
  padding: 16px;
}
.nrc-aspects-cards {
  display: flex;
  flex-direction: column;
  gap: 8px; /* gap compacto das listas de cards (janela direita / OV2) */
}
/* Cards de aspecto natal usam transit-lcard (ov2-related-card) com toda faixa preenchida (passado) */
.nrc-aspects-cards .transit-lcard {
  min-height: 44px;
  padding: 0 14px;
}
.nrc-aspects-cards .transit-lcard .transit-lcard__title {
  font-size: 11px;
}
/* Remove a barra de estado à direita que não se aplica */
.nrc-paywall-block {
  margin: 24px 0 8px;
}

/* Estado vazio */
.nrc-empty {
  font-size: var(--fs-sm, 13px);
  color: var(--text-dim);
  text-align: center;
  padding: 32px 16px;
}

/* ── Skeleton loading ─────────────────────────────────────────────── */
@keyframes nrc-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.nrc-skeleton {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--border) 25%, color-mix(in srgb, var(--border) 60%, var(--bg)) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: nrc-shimmer 1.4s infinite linear;
}
.nrc-skeleton--line  { width: 100%; height: 10px; margin-bottom: 6px; }
.nrc-skeleton--line-short { width: 65%; }

.nrc-mini-carto-wrap--skeleton {
  min-height: 72px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.nrc-skeleton--vert-title {
  width: 12px;
  height: 80%;
  max-height: 140px;
  border-radius: 4px;
}

.nrc-skeleton--reading-mini {
  width: 70%;
  max-width: 320px;
  height: 72px;
  border-radius: 8px;
  margin: 0 auto;
}

.nrc-skeleton--glyph-cell {
  width: 50%;
  aspect-ratio: 1;
  border-radius: 6px;
}

.nrc-skeleton--house-vertical {
  width: 12px;
  height: 48px;
  border-radius: 4px;
}

.nrc-skeleton--reading-glyphs {
  width: 36px;
  height: 56px;
  border-radius: 6px;
}

.natal-reading-card--skeleton .nrc-vert-title {
  justify-content: center;
  align-items: center;
  display: flex;
}

.natal-reading-card--skeleton .nrc-glyph-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.natal-reading-card--skeleton .nrc-basic {
  padding: var(--nrc-card-pad, 16px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nrc-skeleton--advanced-sep {
  height: 1px;
  margin: 16px var(--nrc-card-pad, 16px) 0;
  background: var(--border);
  animation: none;
  border-radius: 0;
}

.nrc-skeleton--advanced-label {
  width: 40%;
  height: 9px;
  margin: 8px var(--nrc-card-pad, 16px) 12px;
}

.nrc-skeleton--transits-sep {
  height: 1px;
  background: var(--ink);
  border-radius: 0;
  animation: none;
  margin-top: 0;
}
:root[data-theme="blunt-dark"] .nrc-skeleton--transits-sep {
  background: var(--gold);
}

.nrc-skeleton--transits-title {
  width: 50%;
  height: 10px;
  margin: 12px var(--nrc-card-pad, 16px) 8px;
}

.nrc-skeleton--transit-card {
  width: 100%;
  height: 48px;
  margin: 0 var(--nrc-card-pad, 16px) 8px;
  border-radius: 8px;
  width: calc(100% - 32px);
}
.natal-table {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  grid-column: 2 / 12;
  /* Contorno só no corpo: thead fica sem linha nas margens; separador forte abaixo do thead */
  border: none;
  padding: 16px 0;
  margin-top: 0;
  overflow: visible;
  position: relative;
  isolation: isolate;
}
.natal-table-bg-carto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  z-index: -1;
}
@media (min-width: 900px) {
  .leitura-natal-table {
    grid-column: 1 / 13;
  }
}
@media (max-width: 899px) {
  #natal-panel-estrutura .natal-table {
    margin-bottom: calc(128px + var(--footer-total-h));
  }
}
.natal-table::-webkit-scrollbar { width: 3px; }
.natal-table::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.natal-table table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12px;
}
.natal-table thead {
  text-align: left;
}
.natal-table thead th {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: end;
  vertical-align: middle;
  padding-bottom: 16px;
  padding-left: 12px;
  padding-right: 12px;
  overflow: hidden;
  border: none;
  font-weight: 700;
  color: var(--text-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 4px;
  white-space: nowrap;
  line-height: 1;
}
.natal-table thead th.natal-table-degree {
  font-variant-numeric: tabular-nums;
}

/* Safari/WebKit (iOS PWA e macOS): evita truncar texto vertical no thead */
@supports (-webkit-appearance: none) {
  .natal-table thead th {
    /* WebKit às vezes não calcula bem o box de writing-mode vertical.
       min-height garante que o texto caiba; overflow hidden impede invadir o tbody. */
    min-height: 120px;
    overflow: hidden;
  }
}
.natal-table tbody tr:first-child td {
  border-top: 1px solid var(--border);
}
.natal-table td {
  font-size: 12px;
  padding: 8px 12px;
  border-right: 1px solid var(--overlay-sep);
  border-bottom: 1px solid var(--overlay-sep);
  border-left: none;
  color: var(--text);
  vertical-align: middle;
}
.natal-table tbody td:first-child {
  border-left: 1px solid var(--border);
}
.natal-table td:last-child {
  border-right: 1px solid var(--border);
}
.natal-table tbody .natal-table-degree {
  text-align: right;
  color: var(--text-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* Larguras vs grid mestre no #natal-panel-estrutura: desktop tabela 4/10 → 2+2+1+1 trilhas (C4–C9); mobile 2/12 → 4+4+2 (C2–C11, sem Grau) */
.natal-table-col-pivot { width: calc(100% / 3); min-width: 0; }
.natal-table-col-sign { width: calc(100% / 3); min-width: 0; }
.natal-table-col-house { width: calc(100% / 6); min-width: 0; }
.natal-table-col-degree { width: calc(100% / 6); min-width: 0; }
.natal-table tr:hover td { background: rgba(var(--gold-rgb), 0.04); }
.natal-table tbody tr:last-child td {
  border-bottom: 1px solid var(--border);
}

/* Mobile: esconder Graus; colunas 4+4+2 trilhas (Planeta / Signo / Casa) */
@media (max-width: 899px) {
  .natal-table-col-pivot { width: 40%; }
  .natal-table-col-sign { width: 40%; }
  .natal-table-col-house { width: 20%; }
  .natal-table thead th.natal-table-degree,
  .natal-table td.natal-table-degree {
    display: none;
  }
  col.natal-table-col-degree {
    display: none;
  }
}
.natal-table-notice {
  text-align: center;
  padding: 16px 10px;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  border-bottom: 1px solid var(--border);
}
.natal-table-sign {
  color: var(--text);
  font-weight: 500;
  vertical-align: middle;
}
.natal-table-house {
  vertical-align: middle;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.natal-table-pivot {
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}
.natal-table-pivot-label {
  min-width: 0;
}
.natal-table-retrograde {
  font-size: 12px;
  opacity: 0.5;
}
.natal-table-empty {
  color: var(--text-faint);
}

@media (min-width: 900px) {
  /* Tabela: C4–C9 → linhas de grade 4 / 10 */
  #natal-panel-estrutura .natal-table {
    grid-column: 4 / 10;
    grid-row: 1;
    margin-bottom: var(--grid-master-gap);
  }
  /* Cartografia: C4–C8 → linhas 4 / 9; mesma linha que barras */
  .cartografia-wrap {
    grid-column: 4 / 9;
    grid-row: 2;
    padding-bottom: calc(48px + var(--footer-total-h));
  }
  /* Barras: coluna C9 → linhas 9 / 10; largura = trilha C9 */
  .elementos-barras-wrap {
    grid-column: 9 / 10;
    grid-row: 2;
    display: block;
    align-self: start;
    padding-bottom: calc(48px + var(--footer-total-h));
  }
}

/* ── Leitura desktop: limita largura ao centro (~6 colunas) ── */
@media (min-width: 900px) {
  .you-slide-inner--padded .leitura-carto-full-wrap,
  .you-slide-inner--padded .leitura-carto-2-wrap,
  .you-slide-inner--padded .leitura-natal-table,
  .you-slide-inner--padded .leitura-natal-chart-preview,
  .you-slide-inner--padded #natal-reading-summary,
  .you-slide-inner--padded #natal-reading-list,
  .you-slide-inner--padded .leitura-elementos-wrap,
  .you-slide-inner--padded #natal-advanced-area {
    max-width: 680px;
    align-self: center;
  }
}

/* ── Slide tabela: grid de 12 col — config original natal-panel--leitura pré-slides ── */
/* Desktop: C4–C10 (6 colunas centrais). Mobile: 1/13 centrado com min(). */
#you-slide-tabela .you-slide-inner {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  row-gap: 0;
  align-content: start;
  /* Tabela inicia a 20% do viewport entre header e footer (top e bottom simétricos).
     Sobrescreve o top/bottom do .you-slide-inner--padded; horizontal mantém. */
  --tabela-avail: calc(var(--app-height) - var(--header-h) - var(--footer-h));
  padding-top: calc(var(--header-h) + 0.2 * var(--tabela-avail));
  padding-bottom: calc(var(--footer-h) + 0.2 * var(--tabela-avail));
}
#you-slide-tabela .natal-table {
  flex: none;
  min-height: auto;
}
@media (min-width: 900px) {
  #you-slide-tabela .leitura-natal-table {
    grid-column: 4 / 10;
    max-width: none;
    width: 100%;
    align-self: start;
  }
}
@media (max-width: 899px) {
  #you-slide-tabela .leitura-natal-table {
    grid-column: 1 / 13;
    justify-self: center;
    width: min(100%, calc(11 * (100% - 11 * var(--grid-master-gap)) / 12 + 10 * var(--grid-master-gap)));
    box-sizing: border-box;
  }
}

/* ── SCROLLBAR GLOBAL ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); }

/* ── ATIVAÇÃO ── */
.activation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.activation-pill {
  border: 1px solid var(--border);
  padding: 5px 8px;
  font-size: var(--fs-xs);
  display: flex; flex-direction: column; gap: 2px;
}
.activation-pill-label {
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 9px;
}
.activation-pill-value {
  color: var(--text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}
.activation-pill.highlight {
  border-color: var(--border-bright);
  background: var(--surface);
}
.activation-aspects {
  margin-top: 8px;
}
.activation-aspect-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.activation-aspect-row:last-child { border-bottom: none; }
.activation-asp-type {
  font-weight: var(--fw-bold);
  min-width: 70px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.activation-asp-type.harmonico { color: var(--gold); }
.activation-asp-type.tensao { color: var(--tension); }
.activation-asp-type.neutro { color: var(--text-dim); }
.activation-asp-planet { color: var(--text-dim); }
.activation-asp-orb {
  margin-left: auto;
  color: var(--text-faint);
  font-size: 9px;
}

/* ── MODAL / FORMULÁRIO ── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.modal-overlay--blur {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal h2 {
  font-size: var(--fs-lg);
  margin-bottom: 20px;
  color: var(--text);
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form-group input, .form-group select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-sm);
  border-radius: 4px;
}

.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: var(--border-bright);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-group--tip {
  display: flex;
  align-items: flex-end;
}

.form-group--pullup {
  margin-top: -8px;
}

.form-group--compact-bottom {
  margin-bottom: 8px;
}

.form-group--account {
  margin-bottom: 12px;
}

.form-tip {
  font-size: 9px;
  color: var(--text-faint);
  display: block;
}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.btn-primary, .btn-secondary {
  flex: 1;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
}

.btn-primary {
  background: var(--gold);
  color: var(--creme);
  border: none;
}

.btn-primary:hover { filter: brightness(0.85); }

.btn-secondary {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--border-bright);
  color: var(--text);
}

/* Profile Selector */
.profile-selector {
  margin-bottom: 16px;
}

.profile-list {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-top: 8px;
}

.profile-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-item:last-child { border-bottom: none; }

.profile-item:hover {
  background: var(--surface);
}

.profile-item.active {
  background: var(--surface-hover);
}

.profile-item-name {
  font-size: var(--fs-sm);
  color: var(--text);
}

.profile-item-date {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.profile-delete {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: var(--fs-xs);
}

.profile-delete:hover {
  color: rgba(var(--tension-rgb), 0.8);
}

/* Transit Welcome Overlay */
@keyframes orrery-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes orrery-out { from { opacity: 1; } to { opacity: 0; } }


/* Solar Return Alert */
.solar-return-alert {
  position: fixed;
  bottom: calc(var(--footer-h) + 12px);
  right: 12px;
  background: var(--bg);
  border: 1px solid var(--gold);
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: var(--z-tooltip);
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}

.solar-return-alert.visible {
  transform: translateX(0);
}

.solar-return-alert h3 {
  font-size: var(--fs-sm);
  color: var(--gold);
  margin-bottom: 4px;
}

.solar-return-alert p {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* API Config */
.api-config {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.api-config-toggle {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.api-config-content {
  display: none;
  margin-top: 12px;
}

.api-config-content.visible {
  display: block;
}

/* Revolução Solar Banner */
.solar-banner {
  background: linear-gradient(90deg, rgba(200,169,110,0.15), rgba(200,169,110,0.05));
  border: 1px solid rgba(200,169,110,0.3);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.solar-banner-title {
  font-size: var(--fs-xs);
  color: rgba(200,169,110,0.9);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.solar-banner-text {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* ── RELATÓRIO ── */

#report-panel {
  padding: 0;
  display: flex;
  flex-direction: column;
}

#report-panel #report-interpretation {
  padding: 16px 16px 0;
}

#report-panel #report-aspects {
  padding: 0;
}

.report-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.report-controls {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.report-period-btns {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
}

.report-period-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-family: var(--font);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 14px;
  cursor: pointer;
  transition: all 0.15s;
  flex: 1;
}

.report-period-btn:first-child { border-radius: 2px 0 0 2px; }
.report-period-btn:last-child { border-radius: 0 2px 2px 0; }

.report-period-btn.active {
  background: var(--gold);
  color: var(--creme);
  border-color: var(--gold);
}

.report-period-btn:hover:not(.active) {
  border-color: var(--border-bright);
  color: var(--text);
}

.report-date-range {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-align: center;
  padding-top: 4px;
}

.report-content.report-content--no-intro {
  padding-top: 12px;
}

.report-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
}

.report-content::-webkit-scrollbar { width: 3px; }
.report-content::-webkit-scrollbar-track { background: transparent; }
.report-content::-webkit-scrollbar-thumb { background: var(--border); }

.report-intro {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.report-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  color: var(--text);
}

.report-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.report-aspects {
  margin-bottom: 24px;
}

/* ── RELATÓRIO: Cards de trânsitos (masonry) ── */
.transit-cards-masonry {
  column-count: 1;
  column-gap: 16px;
}
.transit-cards-masonry > .tl-card--transit {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 16px;
}

@media (min-width: 769px) { .transit-cards-masonry { column-count: 2; } }
@media (min-width: 900px) { .transit-cards-masonry { column-count: 3; } }
@media (min-width: 1200px) { .transit-cards-masonry { column-count: 4; } }

.tl-card.tl-card--transit {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gold);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  container-type: inline-size;
}
.tl-card.tl-card--transit:hover {
  background: transparent;
  border-color: var(--border-bright);
}

.tl-card--transit .tl-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gold);
  border-left: 3px solid var(--border);
}
.tl-card--transit .tl-card-head--harmonico {
  border-left-color: var(--gold);
}
.tl-card--transit .tl-card-head--tensao {
  border-left-color: var(--tension);
}
.tl-card--transit .tl-card-head--neutro {
  border-left-color: var(--text-dim);
}
.tl-card--transit .tl-card-title {
  margin: 0;
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tl-card--transit .tl-card-desc--paragraph {
  margin: 0;
  padding: 16px 20px 20px;
  box-sizing: border-box;
  min-width: 0;
  font-size: 12px;
  line-height: 22px;
  color: var(--text);
}
.tl-card--transit .tl-card-desc--ai {
  font-size: 12px;
  color: var(--text);
}

:root[data-theme="blunt-dark"] .tl-card.tl-card--transit,
:root[data-theme="blunt-dark"] .tl-card.tl-card--transit .tl-card-head,
:root[data-theme="blunt-dark"] .tl-card.tl-card--transit .tl-card-desc--paragraph,
:root[data-theme="dark"] .tl-card.tl-card--transit,
:root[data-theme="dark"] .tl-card.tl-card--transit .tl-card-head,
:root[data-theme="dark"] .tl-card.tl-card--transit .tl-card-desc--paragraph {
  border-color: var(--border);
}

.report-interpretation {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.report-interpretation-title {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.report-interpretation-text {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.8;
}

.report-interpretation-text p {
  margin-bottom: 12px;
}

.report-interpretation-text strong {
  color: var(--text);
  font-weight: var(--fw-bold);
}

/* Astrology API: rating + life areas + tips */
.astro-rating { font-size: 10px; color: var(--gold); opacity: 0.55; letter-spacing: 1px; }
.astro-life-areas {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  margin-bottom: 12px;
}
.astro-life-area {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--text-faint);
}
.astro-bar { letter-spacing: 1px; color: var(--gold); opacity: 0.45; font-size: 9px; }
.astro-tips {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-subtle, var(--bg));
}
.astro-tips-title {
  font-size: 9px; font-weight: var(--fw-bold);
  color: var(--text-faint); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
}
.astro-tip {
  font-size: var(--fs-sm); color: var(--text-dim);
  margin-bottom: 4px; line-height: 1.4;
}
.astro-tip:last-child { margin-bottom: 0; }

.report-generate-btn {
  width: 100%;
  background: var(--gold);
  color: var(--creme);
  border: none;
  padding: 12px 16px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 16px;
}

.report-generate-btn:hover { filter: brightness(0.85); }

.report-empty {
  text-align: center;
  padding: 40px 20px;
  opacity: 0.5;
}

.report-empty-line {
  background: var(--border);
  height: 1px;
  margin: 8px auto;
}

.report-empty--vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h) - var(--footer-total-h) - var(--tr-report-panel-base-margin, 160px));
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ink, #1A1814);
  opacity: 1;
  padding: 0;
}
[data-theme="blunt-dark"] .report-empty--vazio {
  color: var(--gold, #F4C430);
}

/* ── ASPECT DETAIL OVERLAY ── */
.aspect-overlay {
  --overlay-control-offset: 56px;
  position: fixed;
  /* Viewport inteiro: o overlay passa POR BAIXO do header e do footer (ambos
     translúcidos + blur e com z-index acima do overlay). O offset das barras
     vive no padding do .aspect-overlay-content, então o conteúdo em repouso
     fica na faixa visível mas desliza sob header/footer ao rolar. */
  top: 0; left: 0; right: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  /* Fundo opaco em bg-3 (decisão 2026-06-11) — sem vidro/blur */
  background: var(--bg-3, #e8e2da);
  transition: background 0.3s ease;
  overflow: hidden;
}
.ov2-carto-bg {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.aspect-overlay-close {
  background: none;
  border: 1px solid var(--overlay-sep);
  color: var(--text-dim);
  width: calc((var(--grid-master-viewport-content)) / 12);
  height: calc((var(--grid-master-viewport-content)) / 12);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.aspect-overlay-content {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  position: relative;
  z-index: 1;
}

.overlay-lead-para {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 20px;
}

.aspect-overlay-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--text-faint);
  padding-top: 20px;
}
.aspect-loading-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--text-dim);
  animation: pulse 1.2s ease-in-out infinite;
}
.aspect-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.aspect-loading-dot:nth-child(3) { animation-delay: 0.4s; }
.aspect-overlay-loading--top {
  padding-top: 0;
  padding-bottom: 16px;
}


/* ── LUNAR CALENDAR OVERLAY ── */
.lunar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: var(--z-lunar);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.lunar-overlay.visible { display: flex; }
.lunar-overlay canvas {
  border-radius: 4px;
}
.lunar-close {
  position: absolute;
  top: 18px; right: 18px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-family: var(--font);
  font-size: 16px;
  width: 30px; height: 30px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  border-radius: 3px;
}


/* ══════════════════════════════════════════
   FOOTER NAV
══════════════════════════════════════════ */
#footer-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--footer-h);
  padding-bottom: 0;
  display: flex;
  background: color-mix(in srgb, var(--bg) 10%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-top: 1px solid var(--border);
  isolation: isolate;
  z-index: var(--z-nav);
}

.ios-standalone #footer-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ios-standalone #footer-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 88%, transparent) 28%,
    color-mix(in srgb, var(--bg) 10%, transparent) 100%
  );
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: none;
  z-index: 0;
}
.nav-item {
  flex: 1;
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  background: none; border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
  padding: 6px 4px;
  -webkit-tap-highlight-color: transparent;
  font-weight: var(--fw-regular);
}
.nav-item.active { font-weight: var(--fw-bold); }
.nav-item:hover { color: var(--text); }
.nav-item svg { flex-shrink: 0; }
.nav-icon {
  display: none;
  width: 24px;
  height: 24px;
}
/* FAB central — toggle de tema */
.nav-fab {
  flex: 0 0 52px;
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  align-self: center;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 14px var(--gold-glow);
  margin: 0 6px;
  transform: translateY(-10px);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.15s;
}
.nav-fab:hover, .nav-fab:active {
  transform: translateY(-12px);
  box-shadow: 0 4px 20px var(--gold-glow);
}

/* Ícone do FAB = tema de destino (lua → Observatório, sol → Celeste) */
.nav-fab-icon-wrap {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: none;
}
.nav-fab-icon {
  position: absolute;
  inset: 0;
  display: block;
  transition: opacity 0.2s ease;
}
:root[data-theme="blunt-light"] .nav-fab-icon-target-obs {
  opacity: 1;
}
:root[data-theme="blunt-light"] .nav-fab-icon-target-light {
  opacity: 0;
  pointer-events: none;
}
:root[data-theme="blunt-dark"] .nav-fab-icon-target-obs {
  opacity: 0;
  pointer-events: none;
}
:root[data-theme="blunt-dark"] .nav-fab-icon-target-light {
  opacity: 1;
}

/* Botão Oráculo no header */
.oracle-header-btn {
  background: none; border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.oracle-header-btn:hover { opacity: 1; }

/* ── TYPEWRITER ── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
.typewriter-cursor {
  color: var(--gold);
  animation: blink 0.8s infinite;
}
.orby-text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
}
.orby-cursor {
  display: inline-block;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-family: var(--font);
  line-height: 1;
  vertical-align: bottom;
}
#oracle-btn .typewriter-cursor.orby-cursor,
#oracle-btn-footer .typewriter-cursor.orby-cursor {
  display: inline-block;
  transform: scaleX(1.5);
  transform-origin: left;
  animation-duration: 1.6s;
}

/* Footer dentro de overlay colorido */
#footer-nav.overlay-active .nav-item {
  color: var(--text-dim);
}
#footer-nav.overlay-active .nav-item.active,
#footer-nav.overlay-active .nav-item:hover {
  color: var(--text);
}
#footer-nav.overlay-active .nav-fab {
  background: var(--text);
  color: var(--bg);
}
#footer-nav.overlay-active .mobile-menu-label,
#footer-nav.overlay-active .mobile-menu-toggle,
#footer-nav.overlay-active .oracle-footer-btn {
  color: var(--text-dim);
}
#footer-nav.overlay-active .mobile-menu-trigger-left:hover .mobile-menu-label,
#footer-nav.overlay-active .mobile-menu-toggle:hover,
#footer-nav.overlay-active .oracle-footer-btn:hover {
  color: var(--text);
}

/* ══════════════════════════════════════════
   HOME — ORRERY + FEED
══════════════════════════════════════════ */
#page-home {
  background: var(--bg);
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  overflow: hidden;
}

/* Feed da home — grid 12 colunas, gap 8px, margin 8px */
.home-feed {
  grid-row: 1;
  grid-column: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: var(--header-h) var(--grid-master-pad-x) calc(var(--footer-total-h) + 128px);
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  align-content: start;
  row-gap: 0;
  min-height: 0;
}
.home-feed > * {
  min-width: 0;
}

/* ── Perfil do usuário ── */
.home-profile,
#home-profile {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  align-items: center;
  padding: 20px 0;
}
.home-profile > * {
  min-width: 0;
}
.home-profile:empty { display: none; }

.home-profile-photo {
  grid-column: 1 / span 3;
  display: flex;
  justify-content: center;
}
.home-profile-info {
  grid-column: 4 / -1;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  min-width: 0;
}
/* Reset explícito — espaçamento só via margens definidas abaixo */
.home-profile-info > * {
  margin: 0;
}
.home-profile-info > .home-profile-greeting {
  margin-bottom: 6px;
}
.home-profile-info > .home-profile-name { margin-bottom: 0; }
.home-profile-info > .home-profile-meta { margin-bottom: 0; }
.home-profile-info > .home-profile-location { margin-bottom: 0; }
.home-profile-initials {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--text);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}
.home-profile-greeting {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-profile-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 20px;
  margin-bottom: 0;
}
.home-profile-meta {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 16px;
  overflow-wrap: anywhere;
}
.home-profile-location {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 16px;
  overflow-wrap: anywhere;
}
.home-profile-placements {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.home-profile-placements-mob,
.home-profile-vdiv {
  display: none;
}
.home-profile-placement {
  font-size: var(--fs-xs);
  color: var(--text);
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.04em;
}
.hpp-sym {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  font-size: 16px;
  opacity: 0.95;
}
.hpp-sign-glyph {
  display: none;
  font-family: 'Orby Text', 'Orby Astrology', serif;
  font-size: 16px;
  opacity: 0.95;
}

@media (max-width: 768px) {
  /* No mobile, alinhar tudo pelo topo (evita C9–C11 ficar "centralizado") */
  .home-profile,
  #home-profile {
    align-items: start;
  }
  /* Foto deve continuar centralizada no bloco dela (vertical e horizontal) */
  .home-profile-photo {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .home-profile-info {
    grid-column: 4 / 8;
    align-self: center;
  }

  /* C8: divisória vertical encostando no padding do bloco */
  .home-profile-vdiv {
    display: block;
    grid-column: 8 / 9;
    width: 1px;
    background: var(--border);
    opacity: 0.4;
    align-self: stretch;
  }

  /* C9–C11: planetas + signo em coluna */
  .home-profile-placements--desktop {
    display: none;
  }
  .home-profile-placements-mob {
    display: flex;
    grid-column: 9 / -1;
    justify-content: space-evenly;
    align-items: center;
    align-self: center;
    margin-left: -8px;
  }
  .home-profile-placements-mob .hpm-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .home-profile-placements-mob .hpm-sym {
    font-family: 'Orby Text', 'Orby Astrology', serif;
    font-size: 18px;
    line-height: 1;
    color: var(--text);
    opacity: 0.95;
  }
  .home-profile-placements-mob .hpm-sign {
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    line-height: 1.1;
    color: var(--text-dim);
    white-space: nowrap;
  }

  /* Cidade embaixo da data (mobile). No desktop pode ficar escondida se vazia. */
  .home-profile-location:empty {
    display: none;
  }

  .home-profile-placements .hpp-sign-text {
    display: none;
  }
  .home-profile-placements .hpp-sign-glyph {
    display: inline;
  }

  .home-profile-divider {
    margin: 0;
    opacity: 0.6;
  }

  .home-profile,
  #home-profile {
    padding: 0;
  }
  .home-profile-photo {
    padding: 20px 0;
  }
  .home-profile-info {
    padding: 20px 0;
  }
  .home-profile-placements-mob {
    padding: 20px 0;
  }

}

/* Widgets Lua + Mercúrio — mobile (metade da tela cada) */
.home-moon-widget {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  box-sizing: border-box;
  margin-left: -8px;
  margin-right: -4px;
  container-type: inline-size;
  container-name: home-orbit-widget;
  cursor: pointer;
}
.home-mercury-widget {
  grid-column: 7 / -1;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid transparent;
  box-sizing: border-box;
  margin-left: -4px;
  margin-right: -8px;
  container-type: inline-size;
  container-name: home-orbit-widget;
  cursor: pointer;
}
.home-moon-widget .hmw-top,
.home-mercury-widget .hmw-top {
  display: grid;
  column-gap: 0;
  align-items: stretch;
  height: 140px;
}
.home-moon-widget .hmw-top {
  grid-template-columns: 5.25fr 1px 0.75fr;
}
.home-mercury-widget .hmw-top {
  grid-template-columns: 0.75fr 1px 5.25fr;
}
.hmw-canvas-wrap {
  padding: 20px 20px 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  min-height: 0;
}
.home-moon-widget .hmw-top > .hmw-canvas-wrap,
.home-mercury-widget .hmw-top > .hmw-canvas-wrap {
  place-self: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  padding: 16px;
}
/* Mercúrio: área do gráfico edge-to-edge na célula (sem padding nem quadrado centrado). */
.home-mercury-widget .hmw-top > .hmw-canvas-wrap {
  place-self: stretch;
  align-self: stretch;
  justify-self: stretch;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  padding: 0;
  min-height: 0;
}
.home-mercury-widget .hmw-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.hmw-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.home-mercury-widget .hmw-no-chart {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  line-height: 1.3;
  white-space: normal;
  max-width: 100%;
  padding: 0 6px;
  box-sizing: border-box;
}
.hmw-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
}
.hmw-planet-vert {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 10px;
  line-height: 1.1;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px 0;
}
.hmw-phase-label {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0 16px;
  box-sizing: border-box;
  text-align: center;
  border-top: 1px solid var(--border);
  height: calc(100cqi * 0.75 / 6);
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 769px) {
  .home-moon-widget,
  .home-mercury-widget { display: none; }
}

/* Divisor entre perfil e widget — edge-to-edge */
.home-profile-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border);
  opacity: 0.4;
  margin: 0 calc(-1 * var(--grid-master-pad-x));
}

/* Mensagem de erro do horóscopo */
.horo-error {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  padding: 16px 0;
  text-align: center;
}
.horo-error-detail {
  display: block;
  font-size: 12px;
  opacity: 0.6;
  margin-top: 4px;
  word-break: break-all;
}

/* Seção do céu de hoje — sub-grid */
.home-sky-section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  row-gap: 0;
  align-content: start;
}
.home-sky-section > * {
  min-width: 0;
}
.home-sky-title {
  grid-column: 1;
  grid-row: 1 / -1;
  writing-mode: vertical-rl;
  text-orientation: upright;
  align-self: start;
  justify-self: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 4px;
  padding: 128px 0;
}

/* Ícones do céu — centralizados na segunda coluna */
.daily-sky-icons {
  grid-column: 2 / 3;
  justify-self: center;
  padding: 128px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.daily-sky-icon-item {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 20px;
  line-height: 1;
  color: var(--text);
}
.daily-sky-icon-sign {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  font-size: 20px;
  line-height: 1;
  opacity: 0.6;
}
.daily-sky-content {
  grid-column: 3 / 12;
  margin-right: 0;
  padding: 128px 0;
  min-width: 0;
}

/* Depois das regras base — senão `padding: 128px 0` sobrescreve o mobile */
@media (max-width: 768px) {
  .home-sky-title,
  .daily-sky-icons,
  .daily-sky-content {
    padding-top: 64px;
    padding-bottom: 128px;
  }
}

.daily-sky-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.daily-sky-title {
  font-size: 32px;
  font-weight: var(--fw-bold);
  line-height: 40px;
  color: var(--text);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.daily-sky-title:empty { display: none; }
.daily-horo-cols {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 8px;
  margin-bottom: 32px;
  min-width: 0;
}
.daily-horo-col-box {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px;
  background: var(--bg);
}
.daily-horo-col-box p,
.daily-horo-p1 {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  overflow-wrap: anywhere;
}
.daily-horo-col-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 20px 0;
  padding: 0;
}

/* Céu de hoje — inicia na segunda coluna, termina na penúltima */
.daily-horoscope-card {
  grid-column: 2 / 12;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px;
  background: var(--bg);
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
}
#daily-horoscope-card.daily-horoscope-card {
  padding-top: 0;
}

/* Reset margens/paddings dos parágrafos dos cards de horóscopo */
p.daily-horo-p1,
p.daily-horo-col-p {
  margin: 0;
  padding: 0;
}

/* Mini mapa do céu */
.home-sky-mini {
  grid-column: 2 / 12;
  display: block;
  width: 100%;
  max-width: 1164px;
  height: auto;
  aspect-ratio: 1;
  margin: 12px 0;
  border-radius: 50%;
  animation: sky-spin-ccw 240s linear infinite;
}

/* Timeline */
.home-timeline {
  grid-column: 2 / 12;
  display: block;
  min-width: 0;
}

/* Saudação */
.home-greeting {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--text);
  margin-bottom: 12px;
}

.daily-horo-transit-icons {
  display: none;
}
.daily-horo-transit-icon {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  line-height: 1;
}
.daily-horo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 20px 0;
  padding: 0;
}
.daily-horo-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.daily-horo-text p {
  font-size: var(--fs-sm);
  line-height: 24px;
  color: var(--text);
  margin-bottom: 8px;
}
.daily-horo-text p:last-child { margin-bottom: 0; }

/* Timeline 7 dias */
.home-timeline-title {
  grid-column: 2 / 3;
  writing-mode: vertical-rl;
  text-orientation: upright;
  align-self: start;
  justify-self: center;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: var(--fw-bold);
  letter-spacing: 4px;
  white-space: nowrap;
  padding: 128px 0;
}
.timeline-empty {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  text-align: center;
  padding: 20px 0;
}

/* Card de trânsito / notificação */
.tl-card {
  --tl-card-pad: 24px;
  /* Igual à margem vertical do .tl-card-sep — usado para alinhar a linha vertical ao traço superior */
  --tl-sep-gap-y: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--tl-card-pad);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.tl-card:hover { background: var(--surface-hover); }
/* Card astro — grade interna com bordas; container sem padding */
.tl-card.tl-card--astro {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gold);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.tl-card.tl-card--astro:hover {
  background: transparent;
  border-color: var(--border-bright);
}
.tl-card.tl-card--astro .tl-card-row1 {
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid var(--gold);
}
.tl-card.tl-card--astro .tl-card-body--astro-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  margin: 0;
  padding: 0;
}
.tl-card.tl-card--astro .tl-card-body--astro-stack > * {
  min-width: 0;
  width: 100%;
}
/* Grade 50/50: divisória vertical = border-right na descrição */
.tl-card.tl-card--astro .tl-card-astro-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--gold);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.tl-card.tl-card--astro .tl-card-astro-head > .tl-card-desc {
  margin: 0;
  padding: 20px;
  border-right: 1px solid var(--gold);
  box-sizing: border-box;
  min-width: 0;
}
.tl-card.tl-card--astro aside.tl-card-astro-aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}
.tl-card.tl-card--astro .tl-card-astro-aside .tl-graph-info-row--home {
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tl-card.tl-card--astro .tl-card-astro-aside .tl-graph-info-row--home:first-child {
  border-bottom: 1px solid var(--gold);
}
.tl-card.tl-card--astro .tl-card-graph-wrap {
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
/* Fallback sem gráfico: descrição direta no body */
.tl-card.tl-card--astro .tl-card-body > .tl-card-desc {
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}

:root[data-theme="blunt-dark"] .tl-card.tl-card--astro,
:root[data-theme="blunt-dark"] .tl-card.tl-card--astro .tl-card-row1,
:root[data-theme="blunt-dark"] .tl-card.tl-card--astro .tl-card-astro-head,
:root[data-theme="blunt-dark"] .tl-card.tl-card--astro .tl-card-astro-head > .tl-card-desc,
:root[data-theme="blunt-dark"] .tl-card.tl-card--astro .tl-card-astro-aside .tl-graph-info-row--home:first-child,
:root[data-theme="dark"] .tl-card.tl-card--astro,
:root[data-theme="dark"] .tl-card.tl-card--astro .tl-card-row1,
:root[data-theme="dark"] .tl-card.tl-card--astro .tl-card-astro-head,
:root[data-theme="dark"] .tl-card.tl-card--astro .tl-card-astro-head > .tl-card-desc,
:root[data-theme="dark"] .tl-card.tl-card--astro .tl-card-astro-aside .tl-graph-info-row--home:first-child {
  border-color: var(--border);
}
.tl-card--system { cursor: default; }
.tl-card--unread { border-left: 3px solid var(--text); }

/* Row 1: data + título + badge na mesma linha */
.tl-card-row1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.tl-card-date {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex-shrink: 0;
}
.tl-card-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 20px;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tl-card-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.tl-card-badge--harmonico {
  color: var(--gold);
  border: 1px solid var(--gold);
  opacity: 0.75;
}
.tl-card-badge--tensao {
  color: var(--tension);
  border: 1px solid rgba(var(--tension-rgb), 0.45);
}
.tl-card-badge--neutro {
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* Separador — linha entre título e corpo (sangria até as bordas internas do card) */
.tl-card-sep {
  height: 1px;
  background: var(--border);
  margin: var(--tl-sep-gap-y) calc(-1 * var(--tl-card-pad));
  width: calc(100% + 2 * var(--tl-card-pad));
  box-sizing: border-box;
}

/* Body: descrição + gráfico */
.tl-card-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.tl-graph-info-row--home {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: center;
}
.tl-card-desc {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  line-height: 20px;
  overflow-wrap: anywhere;
}
.tl-card--astro .tl-card-date {
  font-size: var(--fs-xs);
}
.tl-card--astro .tl-card-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tl-card--astro .tl-card-badge {
  font-size: var(--fs-xs);
  padding: 2px 6px;
}
.tl-card--astro .tl-card-desc {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text);
  text-transform: none;
  overflow-wrap: anywhere;
}
.tl-card-graph-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
/* Home: só SVG abaixo do bloco cabeçalho */
.tl-card-graph-wrap--home {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
}
.tl-card-graph-wrap--home .tl-card-graph--home {
  padding: 0;
}
/* Glifos no card astro — mesma escala que .daily-horo-p1 */
.tl-card.tl-card--astro .tl-card-astro-aside .tl-graph-asp {
  font-size: 16px;
  line-height: 28px;
  opacity: 1;
}
.tl-card.tl-card--astro .tl-card-astro-aside .tl-graph-deg {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}

.tl-graph-info {
  display: flex;
  gap: 8px;
}
.tl-graph-info-col {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tl-graph-asp {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  font-size: 14px;
  opacity: 0.88;
}
.tl-graph-deg {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}
.tl-card-graph {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: visible;
  position: relative;
  isolation: isolate;
}
.tl-card-graph.tl-card-graph--home {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(348px, 100%);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  transform-origin: center center;
}
.tl-card-graph::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--bg);
  filter: blur(20px);
  z-index: -1;
}
.tl-card-graph--home::before {
  display: none;
}
.tl-card-graph svg,
.tl-card-graph canvas {
  display: block;
  width: 100%;
  height: 100%;
}

canvas.ac-canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
}

/* Gráfico de constelação dentro do overlay de trânsito */
.overlay-chart-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: visible;
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.overlay-chart-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: none;
}
.overlay-chart-wrap svg,
.overlay-chart-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Anti-horário — alinhado ao orrery (canvas) */
@keyframes ac-chart-spin {
  to { transform: rotate(-360deg); }
}

@keyframes sky-spin-ccw {
  to { transform: rotate(-360deg); }
}

/* Wrapper externo quando info-divs ficam fora do SVG */
.overlay-chart-outer {
  margin: 14px 0;
  overflow: visible;
}
.overlay-chart-outer .overlay-chart-wrap {
  margin: 0;
}
.overlay-chart-outer .tl-graph-info {
  padding: 8px 16px;
  gap: 12px;
}

/* Esferas de info (top/bottom) — fundo blur circular */
.tl-graph-info--top,
.tl-graph-info--bottom {
  border-radius: 9999px;
  padding: 4px 16px;
  position: relative;
  isolation: isolate;
}
.tl-graph-info--top::before,
.tl-graph-info--bottom::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--bg);
  filter: blur(12px);
  z-index: -1;
}

/* Coluna com linhas empilhadas (graus trânsito + natal) */
.tl-graph-info-col--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.tl-graph-info-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Coluna direita alinhada (período, orbe, status) */
.tl-graph-info-col--right {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}
.tl-graph-period {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}
.tl-graph-duration,
.tl-graph-status {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-style: italic;
  opacity: 0.5;
}
.tl-graph-orb {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}

/* Pull-to-refresh indicator */
.ptr-indicator {
  grid-column: 1 / -1;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  height: 0;
  opacity: 0;
  transition: none;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   SPLIT CONTAINER (Trânsitos & Mapa Natal)
══════════════════════════════════════════ */
.split-toggle-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: color-mix(in srgb, var(--bg) 10%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.split-btn {
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background 0.15s;
}
.split-btn:not(:last-child) {
  border-right: 1px solid var(--border);
}
.split-btn.active {
  color: var(--bg);
  background: var(--gold);
}

.split-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* data-mode="top": relatório — só painel de texto */
.split-container[data-mode="top"] .split-top    { flex: 1; display: flex; }
.split-container[data-mode="top"] .split-bottom { display: none; }

/* data-mode="learn": igual ao relatório — só texto (evita split-bottom visível sem JS) */
.split-container[data-mode="learn"] .split-top    { flex: 1; display: flex; }
.split-container[data-mode="learn"] .split-bottom { display: none; }

.split-container[data-mode="learn"] #transit-desc-panel {
  flex: 1;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* O grid do Guia Técnico é position:fixed (como lrn-label e lrn-next),
   por isso #transit-desc-content não precisa de padding aqui */
.split-container[data-mode="learn"] #transit-desc-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* ══════════════════════════════════════════
   APRENDER — Guia técnico (desktop)
══════════════════════════════════════════ */
.transit-learn-root {
  display: none;
  box-sizing: border-box;
  width: 100%;
}

.transit-learn-root.transit-learn-root--visible {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--grid-master-template);
  grid-template-rows: 1fr;
  column-gap: 0;
  overflow: hidden;
  align-items: stretch;
}


.transit-learn-root .lrn-label {
  /* Fixo ao viewport — não participa do fluxo do grid */
  position: fixed;
  left: var(--grid-master-pad-x);
  width: calc(var(--grid-master-viewport-content) / 12);
  top: var(--header-h);
  bottom: var(--footer-total-h);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--bg);
  border-right: 1px solid var(--border);
}

.transit-learn-root .lrn-title-vert {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
}

.transit-learn-root .lrn-progress {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
}

.transit-learn-root .lrn-toc {
  grid-column: 2 / 7;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  min-height: 0;
  min-width: 0;
  padding-top: var(--header-h);
  padding-bottom: var(--footer-total-h);
}

/* --- Linhas do TOC (flex row) --- */

.transit-learn-root .lrn-toc-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.transit-learn-root .lrn-toc-intro-row {
  border-bottom: 1px solid var(--border);
}

/* Col 2: "SUMÁRIO" vertical (20% do TOC = 1 col do grid mestre) */
.transit-learn-root .lrn-toc-summary-col {
  width: 20%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
  padding: 64px 8px;
}

.transit-learn-root .lrn-toc-summary-vert {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
}

/* Botão Introdução (cols 3-6, 80% do TOC) */
.transit-learn-root .lrn-toc-intro {
  flex: 1;
  padding: 20px;
}

/* --- Linhas de capítulo --- */

.transit-learn-root .lrn-part {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}

/* Col 2: número romano (alinha artigos com a coluna Introdução) */
.transit-learn-root .lrn-part-roman {
  width: 20%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
  padding: 20px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
}

/* Cols 3-6: lista de artigos (80% do TOC) */
.transit-learn-root .lrn-part-articles {
  flex: 1;
  display: block;
}

/* --- Artigos --- */

.transit-learn-root .lrn-article-item {
  display: block;
  width: 100%;
  padding: 20px;
  border: none;
  border-bottom: 1px solid var(--overlay-sep);
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  color: var(--text);
}

/* Último artigo do capítulo: fecha grupo, sem divisor (o capítulo já tem borda) */
.transit-learn-root .lrn-part-articles .lrn-article-item:last-child {
  border-bottom: none;
}

.transit-learn-root .lrn-article-item.is-active {
  background: var(--bg-2);
}

.transit-learn-root .lrn-body {
  grid-column: 7 / 12;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--border);
}

.transit-learn-root .lrn-article-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--header-h);
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

.transit-learn-root .lrn-title-zone {
  flex-shrink: 0;
  padding: 128px 64px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.transit-learn-root .lrn-chapter-roman {
  font-size: 20px;
  line-height: 28px;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 16px;
}

.transit-learn-root .lrn-chapter-name {
  font-size: 12px;
  line-height: 20px;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 40px;
}

.transit-learn-root .lrn-article-body {
  padding: 64px;
}

.transit-learn-root .lrn-intro-heading {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--text);
}

.transit-learn-root .lrn-intro-body p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
}

.transit-learn-root .lrn-intro-body p:last-child {
  margin-bottom: 0;
}

.transit-learn-root .lrn-article-title {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text);
}

.transit-learn-root .lrn-article-body p {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  overflow-wrap: anywhere;
  color: var(--text-dim);
}

.transit-learn-root .lrn-article-body p:last-child {
  margin-bottom: 0;
}



.transit-learn-root .lrn-nav {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  padding: 16px 64px var(--footer-total-h);
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.transit-learn-root .lrn-nav-prev,
.transit-learn-root .lrn-nav-next {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-dim);
}

.transit-learn-root .lrn-next {
  /* Fixo ao viewport — não participa do fluxo do grid */
  position: fixed;
  right: 8px;
  width: calc((100vw - 16px) / 12);
  top: var(--header-h);
  bottom: var(--footer-total-h);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--bg);
  border-left: 1px solid var(--border);
}

.transit-learn-root .lrn-next-label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 10px;
  line-height: 16px;
  color: var(--text-faint);
  text-align: center;
}

/* ══ APRENDER — mobile (≤768px) ══ */
@media (max-width: 768px) {

  :root { --lrn-mob-bar-h: 72px; }

  /* Barra de título: largura total, fixada abaixo do header */
  .transit-learn-root .lrn-label {
    position: fixed;
    left: 0;
    right: 0;
    width: auto;
    top: var(--header-h);
    bottom: auto;
    height: var(--lrn-mob-bar-h, 72px);
    box-sizing: border-box;
    flex-direction: row;
    justify-content: center;
    padding: 20px 8px;
    background: color-mix(in srgb, var(--bg) 10%, transparent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid var(--border);
    border-left: none;
  }

  /* Título horizontal */
  .transit-learn-root .lrn-title-vert {
    writing-mode: horizontal-tb;
    letter-spacing: 0.15em;
  }

  /* Esconde progresso na barra mobile */
  .transit-learn-root .lrn-progress {
    display: none;
  }

  /* TOC: fixed, zona esquerda + centro (right=12.5vw para deixar espaço ao nav) */
  .transit-learn-root .lrn-toc {
    position: fixed;
    left: 0;
    right: 12.5vw;
    top: calc(var(--header-h) + var(--lrn-mob-bar-h, 72px));
    bottom: var(--footer-total-h);
    grid-column: unset;
    height: auto;
    padding: 0;
    overflow-y: auto;
  }

  /* Coluna sumário/romanos = 12.5vw */
  .transit-learn-root .lrn-toc-summary-col,
  .transit-learn-root .lrn-part-roman {
    width: 12.5vw;
    flex-shrink: 0;
  }

  /* Body: fixed, zona central; oculto no estado lista */
  .transit-learn-root .lrn-body {
    display: none;
    position: fixed;
    left: 12.5vw;
    right: 12.5vw;
    top: calc(var(--header-h) + var(--lrn-mob-bar-h, 72px));
    bottom: var(--footer-total-h);
    grid-column: unset;
    height: auto;
    flex-direction: column;
  }

  /* Título do artigo menor no mobile */
  .transit-learn-root .lrn-article-title {
    font-size: 16px;
    line-height: 24px;
  }

  /* Padding lateral 24px, vertical 64px na área de texto */
  .transit-learn-root .lrn-article-content {
    padding-top: 0;
  }
  .transit-learn-root .lrn-title-zone {
    padding: 128px 24px;
  }
  .transit-learn-root .lrn-article-body {
    padding: 64px 24px;
  }

  /* [hidden] override: evita que display:flex anule o atributo */
  .transit-learn-root .lrn-mob-btn[hidden] {
    display: none;
  }

  /* Esconde nav desktop e coluna "próximo" */
  .transit-learn-root .lrn-nav,
  .transit-learn-root .lrn-next {
    display: none;
  }

  /* Nav mobile: fixed na direita, sempre visível */
  .transit-learn-root .lrn-mob-nav {
    display: flex;
    position: fixed;
    right: 0;
    width: 12.5vw;
    top: calc(var(--header-h) + var(--lrn-mob-bar-h, 72px));
    bottom: var(--footer-total-h);
    flex-direction: column;
    border-left: 1px solid var(--border);
    background: var(--bg);
    z-index: 10;
  }

  .transit-learn-root .lrn-mob-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
  }

  .transit-learn-root .lrn-mob-btn-prev {
    border-bottom: 1px solid var(--border);
  }

  .transit-learn-root .lrn-mob-label {
    writing-mode: vertical-rl;
    text-orientation: upright;
  text-orientation: upright;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 9px;
    font-weight: 700;
  }

  /* === Estado artigo aberto === */

  /* TOC colapsa: apenas coluna sumário (12.5vw), sem scroll */
  .transit-learn-root.lrn--article-open .lrn-toc {
    right: auto;
    width: 12.5vw;
    overflow-y: hidden;
    cursor: pointer;
  }

  /* Esconde artigos e numerais; mantém só intro-row com SUMÁRIO */
  .transit-learn-root.lrn--article-open .lrn-part,
  .transit-learn-root.lrn--article-open .lrn-toc-intro {
    display: none;
  }

  .transit-learn-root.lrn--article-open .lrn-toc-intro-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-bottom: none;
  }

  .transit-learn-root.lrn--article-open .lrn-toc-summary-col {
    width: auto;
    border-right: none;
    padding: 8px 4px;
  }

  /* Chevron indicando que o SUMÁRIO é clicável */
  .transit-learn-root.lrn--article-open .lrn-toc-summary-vert::after {
    content: '›';
    display: block;
    writing-mode: horizontal-tb;
    font-size: 18px;
    margin-top: 12px;
    color: var(--text-dim);
  }

  /* Body aparece em artigo aberto */
  .transit-learn-root.lrn--article-open .lrn-body {
    display: flex;
  }
}

/* data-mode="bottom": mapa do céu — só gráfico/canvas */
.split-container[data-mode="bottom"] .split-top    { display: none; }
.split-container[data-mode="bottom"] .split-bottom { flex: 1; display: flex; }

.split-top {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
#transit-desc-panel {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#transit-desc-panel::-webkit-scrollbar { width: 3px; }
#transit-desc-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.split-container[data-mode="learn"] #transit-desc-panel.split-top {
  overflow: visible;
}

.split-bottom {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.split-bottom::-webkit-scrollbar { width: 3px; }
.split-bottom::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ══════════════════════════════════════════
   SHOP PLACEHOLDER
══════════════════════════════════════════ */
.placeholder-page {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; color: var(--text-faint);
}
.placeholder-icon { font-size: 40px; opacity: 0.4; }
.placeholder-title {
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════
   YOU PAGE — slides horizontais
══════════════════════════════════════════ */
#page-you {
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-3);
}
:root[data-theme="blunt-dark"] #page-you { background: var(--ink); }

/* Wrapper que ocupa todo o espaço disponível entre header e footer */
#you-slides-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Rail horizontal — scroll snapping */
.you-slides {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.you-slides::-webkit-scrollbar { display: none; }

/* Cada slide */
.you-slide {
  min-width: 100%;
  width: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-sizing: border-box;
}

/* Slide imersivo (mapa natal) — sem scroll interno, flex coluna */
.you-slide--immersive {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Inner wrapper para slides com padding e gap */
.you-slide-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}
.you-slide-inner--padded {
  padding: calc(var(--header-h) + 24px) var(--grid-master-pad-x) calc(var(--footer-total-h, 80px) + 64px);
  gap: 48px;
}

/* Cartografia: overflow hidden — canvas não vaza pela moldura durante resize */
#you-slide-cartografia {
  overflow-y: hidden;
}

/* Slide cartografia: mobile full-bleed (canvas encosta em header, footer e laterais);
   desktop alinha ao topo com gaps explícitos.
   Bottom usa --footer-h (não --footer-total-h): o #footer-nav fica em bottom:0
   com height:--footer-h — o safe-bottom embutido criaria faixa morta. */
#you-slide-cartografia .you-slide-inner {
  justify-content: flex-start;
  padding: var(--header-h) 0 var(--footer-h);
  gap: 0;
}
/* Desktop: gaps — 58px (16px moldura + 26px controles + 16px gap ao canvas) */
@media (min-width: 769px) {
  #you-slide-cartografia .you-slide-inner {
    justify-content: flex-start;
    padding-top:    calc(var(--header-h)       + var(--frame-w) + 58px);
    padding-bottom: calc(var(--footer-total-h) + var(--frame-w) + 58px);
    padding-left:   calc(var(--frame-w) + 58px);
    padding-right:  calc(var(--frame-w) + 58px);
  }
}

/* ── Card de leitura inline da cartografia — mobile: overlay fullscreen ── */
@media (max-width: 768px) {
  .carto-reading-panel:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    bottom: var(--footer-h, 60px);
    z-index: 300;
    padding: 16px;
    box-sizing: border-box;
    background: var(--bg-2, var(--bg));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
  }

  /* Oculta o menu mobile dos slides quando o card de leitura está aberto */
  html.carto-panel-open #carto-mobile-menu {
    display: none;
  }

  /* Títulos da coluna esq: dentro do scroll; separador edge-to-edge */
  .carto-reading-panel .nrc-left-sep {
    margin: 0;
  }

  .carto-reading-panel .nrc-left-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .carto-reading-panel .natal-reading-list {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .carto-reading-panel .natal-reading-card {
    flex: 1;
    min-height: 0;
    max-height: none;
    height: auto;
  }

  /* Mini-cartografia: restaura no painel mobile */
  .carto-reading-panel .nrc-mini-carto-wrap {
    display: flex;
  }

  /* Separador entre mini-carto e texto */
  .carto-reading-panel .nrc-reading-row {
    border-top: 1px solid var(--border);
  }

  .carto-reading-panel .nrc-right-col {
    min-height: 0;
    overflow: hidden;
  }

  .carto-reading-panel .nrc-reading-body-col {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .carto-reading-panel .nrc-text-scroll {
    overflow: visible;
  }
}

/* Botão fechar — coluna esquerda do card cartografia (mobile + desktop) */
.carto-reading-panel .nrc-left-close-area {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
}
.carto-reading-panel .nrc-left-close-sep {
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
  width: 100%;
}
.carto-reading-panel .nrc-glyph-cell--close {
  padding: 0;
}
.carto-reading-panel .carto-panel-close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
}
.carto-reading-panel .carto-panel-close::before {
  content: '';
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  flex-shrink: 0;
}

/* Botão fechar: creme no tema escuro (--ink é escuro nos dois temas) */
:root[data-theme="blunt-dark"] .carto-reading-panel .carto-panel-close::before {
  background: var(--creme);
}

/* ── Card de leitura inline da cartografia — desktop: split 50/50 ── */
@media (min-width: 769px) {
  /* Slide inner vira grid de 2 colunas animado */
  #you-slide-cartografia .you-slide-inner {
    display: grid;
    grid-template-columns: 1fr 0px;
    grid-template-rows: 1fr;
    column-gap: 0;
    align-items: start;
    transition: grid-template-columns 0.35s ease, column-gap 0.35s ease;
    overflow: hidden;
  }
  #you-slide-cartografia .leitura-carto-full-wrap {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
    min-height: 0;
  }

  /* Card aberto: divisão 50/50 */
  #you-slide-cartografia.carto-card-open .you-slide-inner {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }

  /* Painel: invisível + sem largura quando fechado */
  .carto-reading-panel {
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.2s, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: calc(100vh - var(--header-h) - var(--footer-total-h) - 2 * var(--frame-w) - 116px);
    border-radius: 16px;
    border: 2px solid transparent;
    align-self: stretch;
  }
  #you-slide-cartografia.carto-card-open .carto-reading-panel {
    opacity: 1;
    pointer-events: auto;
    border-color: var(--gold);
  }
  :root[data-theme="blunt-light"] #you-slide-cartografia.carto-card-open .carto-reading-panel {
    border-color: var(--ink-b);
  }

  /* Scroll só no corpo do card; header, mini-carto e glyphs ficam fixos */
  .carto-reading-panel .natal-reading-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .carto-reading-panel .natal-reading-card {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    border: none;
  }
  .carto-reading-panel .nrc-left-col {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .carto-reading-panel .nrc-left-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .carto-reading-panel .nrc-right-col {
    min-height: 0;
    overflow: hidden;
  }
  .carto-reading-panel .nrc-reading-body-col {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Seção de trânsitos no card de leitura natal ─────────────────── */

.nrc-transits-section {
  border-top: none;
  padding: 0 16px;
}
.nrc-transits-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  padding-top: 32px;
  margin-bottom: 8px;
}
:root[data-theme="blunt-dark"] .nrc-transits-title {
  color: var(--gold);
}
/* Títulos OV na janela direita (split view) */
.nrc-transits-section .ov2-related-group-title {
  padding: 64px 16px 0;
  margin-bottom: 64px;
  gap: 64px;
  justify-content: center;
}
.nrc-transits-section .ov2-related-group-title .ov2-related-group-title-text {
  flex: 0 1 auto;
}
.nrc-transits-section .ov2-related-group-title::before,
.nrc-transits-section .ov2-related-group-title::after {
  height: 28px;
  width: 2px;
}
/* 64px abaixo do último card da última lista */
.nrc-transits-wrap .nrc-transits-section:last-child {
  padding-bottom: 64px;
}
.nrc-transits-list {
  display: flex;
  flex-direction: column;
  gap: 8px; /* gap compacto das listas de cards (janela direita / OV2) */
}
/* Cards de trânsito nos contextos de leitura (split view do Céu, painel
   natal): padrão de altura da seção Trânsitos — colapsado 80px
   (--tlc-cover-h), desktop e mobile. */
.nrc-transits-section .ov2-related-card.transit-lcard {
  min-height: var(--tlc-cover-h, 80px);
  padding: 0 20px;
  padding-right: calc(var(--tlc-cover-h, 80px) / 2); /* reserva 40px para o state-stack */
}
/* Card expandido na janela direita: icon-col em coluna (40px) + LER (64px).
   Sem .ov2-related no DOM, a regra base usaria row+80px — muito largo no painel estreito. */
.nrc-transits-section .transit-lcard__exp-icon-col {
  flex-direction: column;
  width: 40px;
  flex-basis: 40px;
  border-left: 1px solid var(--tlc-card-border, var(--border));
}
.nrc-transits-section .transit-lcard__exp-icon-col .transit-lcard__exp-act {
  flex: 1;
  width: 100%;
  min-width: 0;
  border-left: none;
  border-top: 1px solid var(--tlc-card-border, var(--border));
  box-sizing: border-box;
}
.nrc-transits-section .transit-lcard__exp-icon-col .transit-lcard__exp-act:first-child {
  border-top: none;
}
.nrc-transits-section .transit-lcard__open-btn {
  flex: 0 0 64px;
  padding: 0;
}

/* ── Painel flutuante de trânsitos (sobre o canvas natal) ──────────── */

.natal-transit-panel {
  position: absolute;
  bottom: calc(var(--footer-total-h, 80px) + 12px + var(--frame-w));
  right: 12px;
  width: min(340px, calc(100vw - 32px));
  max-height: min(50vh, 400px);
  overflow-y: auto;
  border: 2px solid var(--gold);
  border-radius: 10px;
  background: var(--bg);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
}
.natal-transit-panel.visible {
  opacity: 1;
  pointer-events: auto;
}
:root[data-theme="blunt-light"] .natal-transit-panel {
  border-color: var(--ink-b);
}
@media (max-width: 768px) {
  .natal-transit-panel {
    width: calc(100vw - 32px);
    max-height: min(60vh, 400px);
    right: 16px;
    bottom: calc(var(--footer-total-h, 80px) + 16px + var(--frame-w));
  }
}

/* Cabeçalho */
.natal-transit-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.natal-transit-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1;
}
.natal-transit-close:hover {
  background: var(--surface2);
}
:root[data-theme="blunt-dark"] .natal-transit-close {
  color: var(--gold);
}
:root[data-theme="blunt-dark"] .natal-transit-close:hover {
  background: rgba(196, 154, 60, 0.12);
}
.natal-transit-glyph {
  font-size: 18px;
  font-family: var(--font-family);
  flex-shrink: 0;
  line-height: 1;
}
.natal-transit-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
:root[data-theme="blunt-dark"] .natal-transit-title {
  color: var(--gold);
}

/* Cards de trânsito dentro do painel */
.natal-transit-panel .nrc-transits-section {
  border-top: none;
  padding: 8px 12px;
}
.natal-transit-panel .nrc-transits-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  padding: 40px 0 4px;
}
:root[data-theme="blunt-dark"] .natal-transit-panel .nrc-transits-title {
  color: var(--gold);
}
.natal-transit-panel .nrc-transits-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.natal-transit-panel .nrc-transits-empty {
  font-size: 12px;
  opacity: 0.6;
  margin: 0;
  padding: 4px 0;
}
/* Painel flutuante é estreito (340px): expandido usa pilha vertical de
   ícones como no OV2, mesmo no desktop */
.natal-transit-panel .transit-lcard__exp-icon-col {
  flex-direction: column;
  width: 36px;
  flex-basis: 36px;
  min-width: 0;
  border-left: 1px solid var(--tlc-card-border, var(--border));
}
.natal-transit-panel .transit-lcard__exp-icon-col .transit-lcard__exp-act {
  flex: 1;
  width: 100%;
  min-width: 0;
  border-left: none;
  border-top: 1px solid var(--tlc-card-border, var(--border));
  box-sizing: border-box;
}
.natal-transit-panel .transit-lcard__exp-icon-col .transit-lcard__exp-act:first-child {
  border-top: none;
}
.natal-transit-panel .transit-lcard__open-btn {
  flex: 0 0 56px;
  padding: 0 8px;
}

/* ── Toggles cartografia (grid + cores) ─────────────────────────── */

/* Checkbox oculto */
.carto-toggle-chk {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Track (pill) — não usado; mantido só para não quebrar HTML legado */
.carto-toggle-track { display: none; }
.carto-toggle-thumb { display: none; }

/* Reset de <button> para herdar o estilo de .carto-toggle-label */
button.carto-toggle-label {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 1;
}

/* Label/button base: círculo 26×26, stroke 2px, bg transparente */
.carto-toggle-label {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease;
  color: var(--ink);
}
:root[data-theme="blunt-dark"] .carto-toggle-label { border-color: var(--gold); color: var(--gold); }
/* Hover: tint sutil como nos demais botões da seção */
.carto-toggle-label:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
:root[data-theme="blunt-dark"] .carto-toggle-label:hover {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
/* Active: feedback de pressão */
.carto-toggle-label:active {
  background: var(--ink);
}
:root[data-theme="blunt-dark"] .carto-toggle-label:active {
  background: var(--gold);
}

/* ── Pill-switch: Grid, Bg e Elementos (48×26, sem desenho interno) ── */
.carto-toggle-label--grid,
.carto-toggle-label--bg,
.carto-toggle-label--colors {
  width: 48px;
  border-radius: 13px;
}

/* Grid ON: quadriculado — base leve para preservar a forma do pill nos gaps */
.carto-toggle-label--grid:has(.carto-toggle-chk:checked) {
  border-color: var(--ink);
  background-color: rgba(26, 24, 20, 0.08);
  background-image:
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%),
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}
:root[data-theme="blunt-dark"] .carto-toggle-label--grid:has(.carto-toggle-chk:checked) {
  border-color: var(--gold);
  background-color: color-mix(in srgb, var(--gold) 8%, transparent);
  background-image:
    linear-gradient(45deg, var(--gold) 25%, transparent 25%, transparent 75%, var(--gold) 75%),
    linear-gradient(45deg, var(--gold) 25%, transparent 25%, transparent 75%, var(--gold) 75%);
}

/* Fundo ON: cor do canvas + stroke mantido */
.carto-toggle-label--bg:has(.carto-toggle-chk:checked) {
  border-color: var(--ink);
  background: #b2dadb;
}
:root[data-theme="blunt-dark"] .carto-toggle-label--bg:has(.carto-toggle-chk:checked) {
  border-color: var(--gold);
  background: #000;
}

/* Cores ON: grade 2×2 dos 4 elementos + stroke mantido */
.carto-toggle-label--colors:has(.carto-toggle-chk:checked) {
  border-color: var(--ink);
  background:
    linear-gradient(90deg, #ff5050 50%, #C49A3C 50%) top    / 100% 50% no-repeat,
    linear-gradient(90deg, #1A36C7 50%, #faf4ed 50%) bottom / 100% 50% no-repeat;
}
:root[data-theme="blunt-dark"] .carto-toggle-label--colors:has(.carto-toggle-chk:checked) {
  border-color: var(--gold);
}

/* Info icon: aparece sempre com opacidade reduzida; full opacity quando modal aberto */
.carto-icon-info {
  position: relative;
  z-index: 1;
  pointer-events: none;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

/* Modal aberto: ícone com opacidade total, fundo continua transparente */
html.carto-leitura-modal-open .carto-toggle-label--info { background: transparent; }
html.carto-leitura-modal-open .carto-icon-info { opacity: 1; }
/* Hover no info: ícone fica mais visível (preparação para abrir modal) */
.carto-toggle-label--info:hover .carto-icon-info { opacity: 1; }

/* Label text — visível só no mobile (menu expandido) */
.carto-toggle-text {
  font: 500 8px/1 'Archivo', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
}
:root[data-theme="blunt-dark"] .carto-toggle-text { color: var(--gold); }

/* Item: círculo + texto abaixo */
.carto-toggle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* ── Desktop: wrap na base interna da moldura ────────────────────── */
.carto-toggles-wrap {
  position: absolute;
  left: calc(var(--grid-master-pad-x) + 2 * var(--grid-master-gap) + var(--grid-master-viewport-content) / 6);
  /* footer-h + frame-w define o inner edge da moldura; +16px de respiro interior */
  bottom: calc(var(--footer-h) + var(--frame-w) + 16px);
  display: none;
  flex-direction: row;
  gap: 8px;
  z-index: 2;
}
@media (min-width: 769px) {
  .carto-toggles-wrap {
    display: flex;
  }
  .carto-toggle-text { display: none; }
}

/* ── Tooltip de planeta (clique nos círculos da cartografia) ─────── */
.cpt {
  position: fixed;
  z-index: 200;
  display: none;
  border-radius: 8px;
  background: var(--ink);
  padding: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
  pointer-events: none;
  min-width: 180px;
  max-width: 240px;
}
.cpt:not([hidden]) { display: block; }
.cpt-inner {
  border: 1px solid transparent;
  border-radius: 4px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.cpt-sep { width: 1px; flex-shrink: 0; align-self: stretch; }
.cpt-content {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.cpt-headline {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cpt-sym {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--bg);
}
:root[data-theme="blunt-dark"] .cpt-sym { color: var(--gold); }
.cpt-sym svg { display: block; }
.cpt-sym--text {
  font: 600 9px/14px 'Archivo', sans-serif;
  letter-spacing: 0.04em;
}
.cpt-sym--angle {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-stretch: expanded;
  font-size: 8px;
  line-height: 14px;
  letter-spacing: 0.03em;
  width: auto;
}
.cpt-name {
  font: 600 10px/1 'Archivo', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bg);
}
:root[data-theme="blunt-dark"] .cpt-name { color: var(--gold); }
.cpt-sglyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--bg);
}
:root[data-theme="blunt-dark"] .cpt-sglyph { color: var(--gold); }
.cpt-sglyph svg { display: block; }
.cpt-meta {
  font: 400 9px/1 'Archivo', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  opacity: 0.45;
}
:root[data-theme="blunt-dark"] .cpt-meta { color: var(--gold); }

/* ── Mobile: controles da cartografia — botão + toggles expansíveis ──
   Colapsado: só o botão, na base à esquerda (16px acima do fim do canvas).
   Expandido: toggles crescem para a direita e o conjunto centraliza. */
#carto-mobile-menu { display: none; }

.carto-mobile-fab {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
:root[data-theme="blunt-dark"] .carto-mobile-fab {
  border-color: var(--gold);
}
.carto-mobile-fab[aria-expanded="true"] {
  background: var(--ink);
}
:root[data-theme="blunt-dark"] .carto-mobile-fab[aria-expanded="true"] {
  background: var(--gold);
}

@media (max-width: 768px) {
  html.carto-slide-active:not(.carto-panel-open) #carto-mobile-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    position: fixed;
    bottom: calc(var(--footer-h) + 16px); /* footer-h: canvas termina na borda do #footer-nav (sem faixa morta do safe-bottom) */
    left: 16px;
    z-index: 52;
    transition: left 0.25s ease, transform 0.25s ease;
  }
  /* Expandido: conjunto botão+toggles centralizado na página */
  html.carto-slide-active:not(.carto-panel-open) #carto-mobile-menu:has(.carto-mobile-fab[aria-expanded="true"]) {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Barra de toggles (expandida) — linha horizontal, mesmos pills do desktop */
.carto-mobile-panel:not([hidden]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.carto-mobile-toggles {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.carto-mobile-toggles .carto-toggle-text { display: none; }

/* Nav de setores — pills desktop em todas as larguras:
   fixed, centralizado, 16px abaixo do header (dentro da moldura no desktop) */
.you-slides-nav {
  display: flex;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--header-h) + var(--frame-w) + 16px);
  z-index: 10;
  gap: 6px;
  flex-direction: row;
  align-items: center;
}
.you-slides-nav[hidden] { display: none !important; }

/* Dot: círculo 26px expansível (pill) — mobile e desktop */
.you-slide-dot {
  width: auto;
  height: 26px;
  min-width: 26px;
  border-radius: 13px;
  border: 2px solid var(--ink);
  background: transparent;
  opacity: 1; /* stroke sempre 100% opaco */
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  transition: background 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

/* Ativo: fill sólido, colapsado (sem label automática) */
.you-slide-dot.you-slide-dot--active {
  background: var(--ink);
  border-color: var(--ink);
}
/* Label do ativo fica legível sobre o fill quando expande */
.you-slide-dot.you-slide-dot--active .you-slide-dot-label {
  color: var(--bg);
}

/* Label */
.you-slide-dot-label {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-stretch: expanded;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.25s ease, opacity 0.15s ease 0.06s, padding-left 0.25s ease;
  padding-left: 0;
  pointer-events: none;
}

/* Dark theme */
:root[data-theme="blunt-dark"] .you-slide-dot { border-color: var(--gold); }
:root[data-theme="blunt-dark"] .you-slide-dot.you-slide-dot--active {
  background: var(--gold);
  border-color: var(--gold);
}
:root[data-theme="blunt-dark"] .you-slide-dot-label { color: var(--gold); }
:root[data-theme="blunt-dark"] .you-slide-dot.you-slide-dot--active .you-slide-dot-label { color: var(--ink); }

/* Header nav (dots 7px) — substituído pelas pills em todas as larguras */
.you-slide-header-nav { display: none; }

/* Desktop: GROUP hover — todos os dots expandem juntos */
@media (min-width: 769px) {
  .you-slides-nav:hover .you-slide-dot-label {
    max-width: 100px;
    opacity: 1;
    padding-left: 5px;
  }
}

/* Mobile: pill ativa expande com a palavra (classe temporária de ~10s via JS) */
@media (max-width: 768px) {
  .you-slide-dot.you-slide-dot--expanded .you-slide-dot-label {
    max-width: 100px;
    opacity: 1;
    padding-left: 5px;
  }
}

/* Slide mapa: o natal-panel-grafico agora é slide, sem margin-top separada */
#natal-panel-grafico.you-slide {
  margin-top: 0;
}

/* Fechar gráfico (Trânsitos → hub) — dentro de orrery-zoom-control */
/* Close pill — canto superior DIREITO, círculo colapsado 26px → 44px por
   proximidade.
   Era à esquerda no desktop e à direita no mobile — duas posições para o mesmo
   botão. Unificou-se na direita, que já era a do mobile, e isso libera o canto
   superior esquerdo para o tooltip ancorado dos gráficos (`.tooltip--canto`).
   Fica no mesmo eixo vertical dos controles de zoom (x ≈ 1226–1252 em 1280),
   que começam bem abaixo (y 309) — medido, sem sobreposição. */
.transit-close-pill {
  position: fixed;
  top: calc(var(--header-h) + var(--frame-w) + 16px);
  right: calc(var(--frame-w) + 16px);
  width: 44px; height: 44px;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  z-index: 10;
  transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
}
.transit-close-pill:hover {
  opacity: 1;
}
.transit-close-pill:active {
  opacity: 0.7;
}
.transit-close-pill:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
:root[data-theme="blunt-dark"] .transit-close-pill {
  border-color: var(--gold);
  color: var(--gold);
}
:root[data-theme="blunt-dark"] .transit-close-pill:focus-visible {
  outline-color: var(--gold);
}
/* Celeste: MESMA estética/identidade dos botões zoom/play — borda e ícone ink
   sobre disco Solar-frosted com blur. */
:root[data-theme="blunt-light"] .transit-close-pill {
  border-color: var(--ink);
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 58%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.transit-close-pill-icon {
  display: block;
  transition: opacity 0.2s ease;
}
/* Colapsado: 26px, ícone escondido. Herda o bg do player (--player-surface) da
   base — mesma unidade visual dos controles; opacity 0.72 = transparência idle. */
.transit-close-pill.is-collapsed {
  width: 26px; height: 26px;
  opacity: 0.72;
}
.transit-close-pill.is-collapsed .transit-close-pill-icon {
  opacity: 0;
  pointer-events: none;
}
.transit-close-pill[hidden] { display: none !important; }

/* Toolbar de gráficos: só mobile (menu de troca de gráfico — oculto em todos os modos) */
.mobile-only { display: none !important; }
@media (max-width: 768px) {
  .mobile-only { display: flex !important; }
  #transit-graph-toolbar { display: none !important; }
}
@media (min-width: 769px) {
  #page-transits .chart-controls-layer .orrery-zoom-control {
    position: fixed;
    top: 50%;
    right: calc(16px + var(--frame-w));
    transform: translateY(-50%);
  }
}
@media (max-width: 768px) {
  #page-transits .chart-controls-right-stack {
    top: 0;
    right: 16px;
  }
}

/* Canvas natal cobre a tela toda (igual ao orrery em Trânsitos). */
#page-you .natal-canvas-area {
  position: absolute;
  inset: 0;
  flex: none;
  min-height: unset;
}
.you-content {
  padding: 20px 16px;
  padding-bottom: var(--footer-total-h);
  max-width: 500px;
  margin: 0 auto;
}
.you-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: 20px;
  color: var(--text);
}
.you-subtitle {
  font-size: var(--fs-sm);
  margin: 20px 0 12px;
  color: var(--text);
}
.you-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.you-actions {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Fix iOS zoom-on-focus */
.form-group input,
.form-group select,
.form-group textarea {
  font-size: 16px;
  touch-action: manipulation;
}

/* ── SKELETON LOADING NOS CANVAS ── */
@keyframes canvas-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.canvas-loading {
  position: relative;
  overflow: hidden;
}

.canvas-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border) 50%,
    transparent 100%
  );
  animation: canvas-shimmer 1.5s infinite;
  will-change: transform;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════════════════
   AUTH GATE
══════════════════════════════════════════ */
#page-auth {
  position: fixed; inset: 0; z-index: var(--z-auth);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px calc(40px + var(--safe-bottom));
  overflow-y: auto;
}

html.auth-gate-active,
body.auth-gate-active {
  background: var(--bg);
}

.auth-brand {
  text-align: center;
  margin-bottom: 32px;
}

.auth-wrap {
  width: 320px;
  max-width: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Tabs */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.auth-tab--hidden,
.auth-tab[data-tab="register"][hidden] {
  display: none !important;
}
.auth-tab {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.auth-tab.active {
  color: var(--text);
  border-bottom-color: var(--gold);
}

/* Formulários */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.auth-step-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 20px;
  text-align: center;
}

.auth-submit {
  width: 100%;
  margin-top: 8px;
  cursor: pointer;
}
.auth-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-link {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  cursor: pointer;
  padding: 12px 0 0;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-link:hover { color: var(--text); }

/* Mensagens */
.auth-msg {
  font-size: var(--fs-xs);
  padding: 8px 12px;
  border-radius: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: none;
}
.auth-msg--error {
  color: #c0392b;
  background: rgba(192,57,43,0.08);
  border: 1px solid rgba(192,57,43,0.2);
}
.auth-msg--ok {
  color: #27ae60;
  background: rgba(39,174,96,0.08);
  border: 1px solid rgba(39,174,96,0.2);
}
:root[data-theme="blunt-dark"] .auth-msg--error { color: #e74c3c; background: rgba(231,76,60,0.1); }
:root[data-theme="blunt-dark"] .auth-msg--ok    { color: #2ecc71; background: rgba(46,204,113,0.1); }

/* Checkbox */
.auth-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  cursor: pointer;
}
.auth-check-label input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--gold);
  cursor: pointer;
}

/* Autocomplete de lugar */
.auth-place-wrap { position: relative; }

.place-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: var(--z-tooltip);
  max-height: 180px;
  overflow-y: auto;
}
.place-option {
  padding: 8px 12px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.place-option:last-child { border-bottom: none; }
.place-option:hover { background: var(--surface-hover); color: var(--text); }

/* Badge do assistente ORBISTROLOGY */
.assistant-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.assistant-badge--orbistral,
.assistant-badge--orby {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  color: var(--gold);
  border: 1px solid var(--border);
}
.assistant-badge--astra {
  display: inline-flex;
  align-items: center;
  background: rgba(120, 60, 200, 0.15);
  color: #c084fc;
  border: 1px solid rgba(192, 132, 252, 0.35);
}

/* ── SHOP / PLANOS ── */
.shop-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-bottom: 20px;
}
.shop-plans {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shop-plan {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  position: relative;
}
.shop-plan--active {
  border-color: var(--gold);
  background: var(--surface);
}
.shop-plan--featured {
  border-color: var(--gold);
}
.shop-plan-badge {
  position: absolute;
  top: -1px; right: 12px;
  font-size: 8px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--creme);
  padding: 2px 8px;
  border-radius: 0 0 3px 3px;
}
.shop-plan-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.shop-plan-price {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-bottom: 10px;
}
.shop-plan-features {
  list-style: none;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.shop-plan-locked {
  color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-color: var(--text-faint);
}
.shop-plan-btn {
  width: 100%;
}
.shop-plan-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Seção Oráculo no Shop */
.shop-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.shop-section-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--text);
}
.shop-oracle-plan {
  border-color: var(--gold);
  background: var(--surface);
}
.shop-oracle-status {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-bottom: 4px;
}

/* ── PAYWALL BLOCK ── */
.paywall-block {
  text-align: center;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.paywall-icon { font-size: 24px; color: var(--text-dim); }
.paywall-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}
.paywall-desc {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  max-width: 280px;
  line-height: 1.6;
}
.paywall-btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  margin-top: 4px;
  padding: 10px 24px;
}

/* Botão de sair (YOU page, adicionado na Fase 4) */
.btn-sign-out {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-family: var(--font);
  font-size: var(--fs-xs);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-sign-out:hover { border-color: var(--border-bright); color: var(--text); }

.auth-link--reset {
  font-size: 0.72rem;
  opacity: 0.5;
  margin-top: 4px;
}

.loading-label {
  margin-left: 8px;
}

.shop-plan-features--compact {
  margin: 10px 0 14px;
}

.col-inner-empty {
  text-align: center;
  padding-top: 40px;
}

.inline-note {
  font-weight: 400;
  color: var(--text-dim);
}

.input-readonly {
  background: var(--bg-3);
  color: var(--text-dim);
}

.btn-block-spaced {
  width: 100%;
  margin-top: 8px;
}

.btn-sign-out-spaced {
  margin-top: 16px;
}

/* Versão do deploy (Configurações) — debug de cache/SW em aparelhos */
.app-version {
  margin-top: 12px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  user-select: text;
}

.coupon-code-input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Tooltip oculto em dispositivos de toque (não tem hover) */
@media (pointer: coarse) {
  .tooltip { display: none !important; }
}

/* Notificação do sistema */
.system-notification {
  position: fixed;
  top: calc(var(--header-h) + 8px);
  right: 20px;
  background: var(--bg);
  border: 1px solid var(--gold);
  padding: 12px 16px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: var(--z-modal);
  font-size: var(--fs-sm);
  color: var(--text);
  transform: translateX(120%);
  transition: transform 0.3s ease;
}
.system-notification.visible {
  transform: translateX(0);
}

/* ══════════════════════════════════════════
   TRANSIT TIMELINE — Horizontal Wheel Picker
══════════════════════════════════════════ */
.tl-wheel-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

/* Triangle indicator — fixed at top, centered over ruler viewport */
.tl-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  line-height: 0;
  background: transparent;
  border: none;
}
/* Full date indicator — static below ruler, centered */
.tl-date-indicator {
  text-align: center;
  font-size: 9px;
  color: var(--text-faint);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 3px 0 4px;
  min-height: 16px;
  border-top: 1px solid var(--border);
  text-transform: uppercase;
}

/* Ruler area: scrollable ruler */
.tl-ruler-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  overflow: visible;
  height: auto;
  margin-top: 20px; /* equaliza gap triângulo↔dot e dot↔tick */
}



.tl-ruler {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  cursor: grab;
  padding: 6px 0; /* breathing room for scaled dots */
}
.tl-ruler:active { cursor: grabbing; }
.tl-ruler::-webkit-scrollbar { display: none; }

/* Each date group: 2 rows (dots + ticks) */
.tl-date-group {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  flex-shrink: 0;
}

/* Row 1: dots */
.tl-dots-row {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
}

/* Dots (circles only, no text below) */
.tl-dot-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  scroll-snap-align: center;
  -webkit-tap-highlight-color: transparent;
  width: 48px;
  height: 100%;
  overflow: visible;
}

.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--overlay-dot);
  transition: transform 0.15s, opacity 0.15s, background 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Times New Roman', serif;
  font-size: 8px;
  line-height: 1;
  color: var(--text);
}
.tl-dot-wrap.harmonico .tl-dot { background: var(--overlay-dot); }
.tl-dot-wrap.tensao    .tl-dot { background: rgba(255,120,80,0.7); }
.tl-dot-wrap.tl-active .tl-dot {
  box-shadow: 0 0 6px var(--gold-glow);
  color: #fff;
}
.tl-dot-wrap.tl-locked .tl-dot {
  background: var(--overlay-sep);
  border: 1px dashed var(--overlay-dot);
}
.tl-dot-wrap.tl-locked { opacity: 0.45; cursor: pointer; }

/* Row 2: ticks — base toca a linha divisória */
.tl-ruler-row {
  grid-row: 2;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

/* Separador de data entre grupos — aparece no nível dos ticks */
.tl-date-sep {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: stretch;
  padding: 0 3px;
}
.tl-date-sep .tl-date-label {
  font-size: 7px;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 20px;
}

/* Tick wrappers align with dot widths */
.tl-tick-wrap {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Vertical ticks (demarcation) */
.tl-tick {
  width: 2px;
  height: 16px;
  background: var(--overlay-sep);
  border-radius: 1px;
  transition: background 0.15s;
}
.tl-tick--active {
  background: var(--text);
  height: 20px;
}

.tl-loading {
  color: var(--text-faint);
  font-size: 10px;
  padding: 8px 16px;
  letter-spacing: 0.1em;
}

/* ──── Period controls bar ──── */
.tl-period-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 10px;
  gap: 8px;
}
.tl-period-group {
  display: flex;
  gap: 4px;
}
.tl-period-btn {
  background: none;
  border: 1px solid var(--overlay-sep);
  color: var(--text-faint);
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 3px 9px;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tl-period-btn.tl-period-active {
  background: none;
  color: var(--text);
  border-color: var(--overlay-dot-active);
}
.tl-today-btn {
  background: none;
  color: var(--text);
  border: 1px solid var(--overlay-sep);
  font-size: 9px;
  letter-spacing: 0.15em;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, opacity 0.15s, border-color 0.15s;
}
.tl-today-btn:hover { background: none; opacity: 0.85; border-color: var(--text); }

/* ══════════════════════════════════════════
   ORÁCULO ORBY — modal
══════════════════════════════════════════ */
.oracle-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header — grid mestre 12 colunas */
.oracle-modal-header {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  gap: var(--grid-master-gap);
  padding: env(safe-area-inset-top) var(--grid-master-pad-x) 0;
  height: calc(48px + env(safe-area-inset-top));
  align-items: center;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.oracle-modal-brand {
  grid-column: 1 / 9;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: var(--grid-master-pad-x);
}
.oracle-modal-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.oracle-header-right {
  grid-column: 9 / 13;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-right: var(--grid-master-pad-x);
}
.oracle-credits-pill {
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
}
.oracle-close-btn {
  width: 28px; height: 28px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.oracle-close-btn:hover { color: var(--text); border-color: var(--border-bright); }

/* Context strip — céu atual como chips horizontais */
.oracle-context-strip {
  display: flex;
  gap: 6px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.oracle-context-strip::-webkit-scrollbar { display: none; }
.oracle-context-chip {
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--surface);
  flex-shrink: 0;
}

/* Chat thread */
.oracle-chat-thread {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.oracle-empty {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  text-align: center;
  padding: 24px 0;
}

/* Mensagens — grid mestre 12 colunas */
.oracle-msg {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  gap: var(--grid-master-gap);
}
.oracle-msg--user .oracle-msg-bubble {
  grid-column: 4 / 13;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px 0 6px 6px;
  padding: 8px 10px;
}
.oracle-msg--orby .oracle-msg-bubble {
  grid-column: 1 / 11;
  border: 1px solid var(--border);
  border-radius: 0 6px 6px 6px;
  padding: 8px 10px;
}
.oracle-msg-sender { margin-bottom: 5px; }
.oracle-msg-text {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text);
}
.oracle-msg--user .oracle-msg-text { color: var(--text-dim); }
.oracle-msg-text p { margin-bottom: 8px; }
.oracle-msg-text p:last-child { margin-bottom: 0; }
.oracle-error { color: var(--tension); font-size: var(--fs-sm); }
.oracle-no-credits {
  text-align: center;
  padding: 8px 0;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* Suggestion chips */
.oracle-chips-row {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.oracle-chips-row::-webkit-scrollbar { display: none; }
.oracle-chip-btn {
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  font-family: var(--font);
}
.oracle-chip-btn:hover { background: var(--surface); color: var(--text); }

/* Input area */
.oracle-input-area {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  align-items: flex-end;
}
.oracle-textarea {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  padding: 8px 10px;
  resize: none;
  line-height: 1.6;
}
.oracle-textarea:focus { outline: none; border-color: var(--border-bright); }
.oracle-ask-btn {
  flex-shrink: 0;
  align-self: flex-end;
}
.oracle-ask-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ══════════════════════════════════════════
   AMIGOS / SINASTRIA
══════════════════════════════════════════ */

/* ── Página ─────────────────────────────── */
#page-friends {
  flex-direction: column;
  overflow: hidden;
}

#page-friends.page-friends--synastry {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scroll-padding-bottom: calc(var(--footer-total-h) + 64px);
}

#page-friends.page-friends--syn-wheel {
  overflow: hidden;
}

/* Seletor por id: vence o position:relative de .natal-panel--grafico-immersive
   (a mesma div carrega as duas classes; só com classe, a regra mais abaixo no
   arquivo ganharia e o painel entraria no fluxo — loop de crescimento do canvas). */
#friends-syn-wheel-panel {
  position: fixed;
  /* Imersivo FULLSCREEN — cobre header e footer (tem botão de voltar próprio). */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  /* ÁREA do gráfico em INK; friendsOpenSynastryWheel sobrepõe com o accent do
     tema ativo via getOrreryTheme() — evita flash antes do primeiro paint. */
  background: #1A1814;
}

.friends-syn-wheel-panel .friends-syn-wheel-area {
  flex: 1;
  min-height: 0;
  touch-action: none;
  position: relative;
  padding: 0;  /* fullscreen: sem margem da área (sobrescreve .natal-canvas-area) */
}

/* Toggle de glyphos da sinastria — chevron canônico do app, fixo à esquerda.
   Colapsado aponta p/ esquerda (abre); expandido p/ direita (fecha). */
.synastry-wheel-section {
  position: relative;
}
.syn-glyphs-toggle {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: none;
  border: none;
  padding: 12px 8px;
  cursor: pointer;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
/* Observatório: chevron em gold ensolarado (no dark o --text é cream e some no fundo). */
[data-theme="blunt-dark"] .syn-glyphs-toggle {
  color: var(--gold);
}
.syn-glyphs-toggle .transit-graph-chevron {
  transform: rotate(-90deg);
}
.syn-glyphs-toggle.is-expanded .transit-graph-chevron {
  transform: rotate(90deg);
}
.syn-glyphs-toggle:hover {
  opacity: 0.85;
}

.friends-syn-wheel-panel #synastry-natal-canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
  cursor: grab;
  touch-action: none;
}


.synastry-wheel-preview {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  text-align: center;
}

.synastry-wheel-preview:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 8px;
}

.synastry-wheel-preview-hint {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--gold);
}

.synastry-wheel-area--preview {
  width: 100%;
  aspect-ratio: 1;
  max-width: min(100%, 420px);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

.synastry-wheel-area--preview canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Roda natal cruzada (hero no topo da sinastria) ── */
.synastry-wheel-section {
  margin-bottom: -24px;
}

.friends-col-inner {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--header-h) + 16px) 16px calc(var(--footer-total-h) + 32px);
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Telas: lista ↔ sinastria ───────────── */
#friends-screen-list {
  display: flex;
  flex-direction: column;
}

#friends-screen-synastry {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.friends-synastry-tripa {
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  row-gap: 64px;
  padding: calc(var(--header-h) + 16px) var(--grid-master-pad-x) calc(var(--footer-total-h) + 64px);
  align-content: start;
  box-sizing: border-box;
  width: 100%;
}

.friends-synastry-tripa .synastry-tripa-block {
  grid-column: 2 / 12;
  min-width: 0;
}

.friends-synastry-header.synastry-tripa-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 900px) {
  .friends-synastry-tripa .synastry-tripa-block {
    grid-column: 4 / 10;
  }
}

@media (max-width: 899px) {
  .friends-synastry-tripa .synastry-tripa-block {
    grid-column: 1 / 13;
    justify-self: center;
    width: min(100%, calc(11 * (100% - 11 * var(--grid-master-gap)) / 12 + 10 * var(--grid-master-gap)));
    box-sizing: border-box;
  }
}

#synastry-carto-canvas {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* ── Notificações ───────────────────────── */
.friends-section-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-top: 4px;
  margin-bottom: 8px;
}

#friends-notifications-area {
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.friends-notif-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--fs-sm);
  color: var(--text);
}
.friends-notif-item + .friends-notif-item {
  border-top: 1px solid var(--border);
}

.friends-notif-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.friends-notif-text {
  flex: 1;
  line-height: 1.4;
}
.friends-notif-text a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.friends-notif-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.friends-notif-dismiss:hover { color: var(--text); }

/* ── Busca ──────────────────────────────── */
.friends-search-wrap {
  position: relative;
  margin-bottom: 12px;
}

.friends-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-sm);
}
.friends-search-input:focus {
  outline: none;
  border-color: var(--border-bright);
}
.friends-search-input::placeholder { color: var(--text-faint); }

.friends-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

/* ── Resultados e itens de lista ─────────── */
.friends-search-item,
.friends-connection-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: var(--fs-sm);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.friends-search-item:last-child,
.friends-connection-item:last-child {
  border-bottom: none;
}
.friends-search-item:hover { background: var(--surface); }
.friends-search-item > span { flex: 1; }

.friends-search-loading,
.friends-search-empty {
  padding: 10px 12px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.friends-search-name {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.friends-search-handle {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Botão adicionar manual ─────────────── */
.friends-add-manual-btn {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}

/* ── Quick Add horizontal scroll ─────────── */
.friends-quickadd-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  margin-bottom: 16px;
  scrollbar-width: none;
}
.friends-quickadd-scroll::-webkit-scrollbar { display: none; }

.friends-qa-card {
  flex-shrink: 0;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
}
.friends-qa-card--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.friends-qa-card--action { cursor: pointer; }
.friends-qa-card--action:hover { border-color: var(--border-bright); }

.friends-qa-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.friends-qa-name {
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 1.2;
  word-break: break-word;
}
.friends-qa-handle {
  font-size: 10px;
  color: var(--text-faint);
}
.friends-qa-btn {
  margin-top: auto;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  font-family: var(--font);
  letter-spacing: 0.06em;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.friends-qa-btn:hover:not(:disabled) { border-color: var(--border-bright); color: var(--text); }
.friends-qa-btn:disabled { opacity: 0.4; cursor: default; }

.friends-suggested-inline { display: contents; }

/* ── Avatar círculo com inicial ─────────── */
.friends-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: #fff;
}
.friends-avatar--sm  { width: 32px; height: 32px; font-size: 13px; }
.friends-avatar--qa  { width: 44px; height: 44px; font-size: 18px; }

/* ── Lista de amigos (Co-Star style) ────── */
#friends-connections-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
#friends-connections-list:empty { display: none; }

.friends-friend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.friends-friend-item:last-child { border-bottom: none; }
.friends-friend-item--pending { cursor: default; opacity: 0.7; }

.friends-friend-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.friends-friend-name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.friends-friend-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friends-friend-handle {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}
.friends-friend-signs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.friends-friend-signs span { font-size: 11px; color: var(--text-dim); }
.friends-friend-pending-label { font-size: 11px; color: var(--text-faint); font-style: italic; }

.friends-friend-arrow {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px 0 4px 4px;
  line-height: 1;
  transition: color 0.15s;
}
.friends-friend-item:hover .friends-friend-arrow { color: var(--text); }

/* ── Pendentes recebidos ─────────────────── */
.friends-pending-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.friends-pending-item:last-child { border-bottom: none; }
.friends-pending-name {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Score badge na lista ─────────────────── */
.friends-score-badge {
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 1px 6px;
  opacity: 0.8;
}

/* ── Badges de status ───────────────────── */
.friends-badge {
  font-size: var(--fs-xs);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.friends-badge--mutual {
  color: var(--gold);
  border: 1px solid var(--gold);
  opacity: 0.7;
}
.friends-badge--pending {
  color: var(--text-faint);
  border: 1px solid var(--border);
}
.friends-badge--manual {
  color: #C49A3C;
  border: 1px solid #C49A3C;
  opacity: 0.8;
}
.friends-manual-delete-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.friends-friend-item:hover .friends-manual-delete-btn { opacity: 1; }
.friends-manual-delete-btn:hover { color: var(--tension, #ff5050); }

/* ── Botões de aprovação / ação ─────────── */
.friends-approve-wrap {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  width: 100%;
}
.friends-approve-btn,
.friends-decline-btn,
.friends-syn-btn,
.friends-add-btn {
  flex: none;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  font-family: var(--font);
  transition: all 0.15s;
}
.friends-approve-btn {
  background: var(--ink);
  color: var(--creme);
  border: none;
}
.friends-approve-btn:hover { filter: brightness(0.75); }
.friends-approve-btn--loading,
.friends-approve-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}
.friends-decline-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.friends-decline-btn:hover { border-color: var(--border-bright); color: var(--text); }
.friends-syn-btn {
  margin-left: auto;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.friends-syn-btn:hover { background: var(--surface); }
.friends-add-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.friends-add-btn:hover { border-color: var(--border-bright); color: var(--text); }

/* ── Estado vazio ───────────────────────── */
.friends-empty-state {
  padding: 32px 0 16px;
  text-align: center;
}
.friends-empty-hint {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  line-height: 1.5;
  margin: 0;
}

/* ── Loading hint ───────────────────────── */
.friends-loading-hint {
  padding: 16px 12px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
}

/* ── Cabeçalho da sinastria ─────────────── */

.friends-back-btn {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
}
.friends-back-btn:hover { color: var(--text); }

.friends-synastry-friend-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Painéis de conteúdo (tripa sinastria — scroll da página) ── */
.friends-synastry-panel {
  display: contents;
}

.synastry-score-section,
.synastry-radar-wrap,
.synastry-axis-cards,
.synastry-realm-breakdown {
  width: 100%;
  box-sizing: border-box;
}

/* ── Score-síntese ──────────────────────── */
.synastry-score-section {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.synastry-score-ring-wrap {
  position: relative;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}
.synastry-score-ring-wrap canvas {
  display: block;
}
.synastry-score-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.synastry-score-num {
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 1;
}

.synastry-score-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.synastry-score-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.synastry-score-text {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.4;
}

/* ── Radar ──────────────────────────────── */
.synastry-radar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 4px;
  width: 100%;
  box-sizing: border-box;
}
.synastry-radar-wrap canvas {
  display: block;
  touch-action: manipulation;
  max-width: 100%;
}

@media (max-width: 899px) {
  .synastry-score-section {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 14px;
  }
  .synastry-score-meta {
    align-items: center;
    min-width: 0;
    width: 100%;
  }
}

/* ── Cards por eixo ─────────────────────── */
.synastry-axis-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.synastry-axis-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.synastry-axis-card--active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

.synastry-axis-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.synastry-axis-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.synastry-axis-label {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.synastry-axis-score {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.synastry-axis-bar-bg {
  height: 4px;
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
}
.synastry-axis-bar-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.synastry-axis-text {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-dim);
  margin: 2px 0 0;
}

/* ── Aspectos dominantes ────────────────── */
.synastry-dominant-aspects {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.synastry-dominant-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.synastry-dominant-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.synastry-dominant-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface);
  width: 100%;
  box-sizing: border-box;
  border: none;
  text-align: left;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s ease;
}
.synastry-dominant-item:hover {
  background: var(--bg-2);
}

.synastry-dominant-item--harmonic {
  border-left: 3px solid var(--gold);
}
.synastry-dominant-item--tense {
  border-left: 3px solid #ff5050;
}

.synastry-dominant-planets {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--text);
}

.synastry-dominant-glyph {
  font-family: 'Orby Astrology', sans-serif;
  font-size: 1.1em;
  line-height: 1;
}

.synastry-dominant-pname {
  font-weight: var(--fw-bold);
}

.synastry-dominant-asp {
  color: var(--text-dim);
  font-style: italic;
  white-space: nowrap;
}

.synastry-dominant-qual {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}
.synastry-dominant-item--tense .synastry-dominant-qual {
  color: #ff5050;
}

/* ── Reinos de compatibilidade (amizade) ── */
.synastry-realm-breakdown {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 4px;
}

.synastry-realm-group-head {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.synastry-realm-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.synastry-realm-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.synastry-realm-bar {
  flex-shrink: 0;
  width: 4px;
  border-radius: 2px;
  min-height: 36px;
  align-self: stretch;
}

.synastry-realm-group--high .synastry-realm-bar {
  background: var(--gold, #C49A3C);
}

.synastry-realm-group--neutral .synastry-realm-bar {
  background: repeating-linear-gradient(
    -45deg,
    var(--text-faint),
    var(--text-faint) 2px,
    transparent 2px,
    transparent 5px
  );
  opacity: 0.45;
}

.synastry-realm-group--low .synastry-realm-bar {
  background: var(--tension, #ff5050);
  opacity: 0.55;
}

.synastry-realm-body {
  flex: 1;
  min-width: 0;
}

.synastry-realm-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}

.synastry-realm-glyph {
  font-family: 'Orby Astrology', serif;
  margin-right: 4px;
}

.synastry-realm-signs {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.synastry-realm-arrow {
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: var(--fs-base);
}

.synastry-realm-empty {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
  padding: 12px 0;
}

/* ── Sinastria UX: breadcrumb, narrativa, reinos, charts ── */
.friends-synastry-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.friends-synastry-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: inherit;
  color: var(--text-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.friends-synastry-breadcrumb-link:hover {
  color: var(--text);
}

.friends-synastry-breadcrumb-back {
  font-size: var(--fs-xs);
}

.friends-synastry-breadcrumb-name {
  font-weight: var(--fw-bold);
  color: var(--text);
}

.friends-synastry-breadcrumb-sep {
  color: var(--text-faint);
}

.synastry-narrative-block {
  margin-top: 10px;
}

.synastry-texture-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
  background: var(--surface);
  color: var(--text-dim);
}

.synastry-texture-badge--contrasting {
  color: var(--tension, #ff5050);
}

.synastry-archetype-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 6px;
}

.synastry-opening {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-dim);
  margin: 0;
}

.synastry-axis-headline {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin: 2px 0 8px;
}

.synastry-dominant-main {
  flex: 1;
  min-width: 0;
}

.synastry-dominant-line {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-dim);
}

.synastry-dominant-title--friction {
  color: var(--tension, #ff5050);
}

.synastry-friction-aspects {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.synastry-realm-intro {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.45;
  margin: 0 0 16px;
}

.synastry-realm-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}

.synastry-realm-planet {
  font-weight: var(--fw-bold);
}

.synastry-realm-dot {
  opacity: 0.5;
}

.synastry-realm-sub {
  font-weight: var(--fw-regular, 400);
  text-transform: none;
  letter-spacing: 0;
}

.synastry-realm-best-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold, #C49A3C);
}

.synastry-realm-group--best .synastry-realm-bar {
  background: var(--gold, #C49A3C);
}

.synastry-cultivate-text {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-dim);
  margin: 0;
}

.synastry-share-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  font-family: var(--font);
}

.synastry-charts-toggle {
  display: block;
  width: 100%;
  padding: 12px 0;
  border: none;
  background: none;
  color: var(--gold, #1A36C7);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
}

.synastry-charts-wrap {
  display: none;
  flex-direction: column;
  gap: 0;
}

.synastry-charts-wrap--open {
  display: flex;
}

.synastry-realm-sheet-body {
  padding: 8px 0 16px;
}

.synastry-realm-sheet-signs {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  margin: 0 0 12px;
}

.synastry-realm-sheet-copy {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-dim);
  margin: 0;
}

/* ── CTA compatibilidade romântica (Premium) — legado ── */
.synastry-romantic-cta {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}

.synastry-romantic-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.synastry-romantic-divider::before,
.synastry-romantic-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.synastry-romantic-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 8px;
}

.synastry-romantic-copy {
  flex: 1;
  min-width: 0;
}

.synastry-romantic-title {
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
  font-size: var(--fs-lg, 1.125rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 6px;
}

.synastry-romantic-desc {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0;
}

.synastry-romantic-arrow {
  flex-shrink: 0;
  font-size: var(--fs-lg);
  color: var(--text-faint);
  padding-top: 2px;
}

.synastry-romantic-cta:hover .synastry-romantic-title,
.synastry-romantic-cta:hover .synastry-romantic-arrow {
  color: var(--gold);
}


/* ── OV2-friends (detalhe sinastria) ─────── */
.friends-syn-detail-overlay {
  z-index: calc(var(--z-overlay) + 2);
}
.ov2-wrap--friends .ov2-header-body--full {
  width: 100%;
}
.ov2f-meta-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-right: 8px;
}
.ov2f-meta-badge--harm { color: var(--gold); }
.ov2f-meta-badge--tense { color: #ff5050; }
.ov2f-meta-sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-top: 4px;
}
.ov2f-pa-cards--dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ov2f-aspect-meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ov2f-aspect-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text);
  padding: 4px 0;
}
.ov2f-aspect-list-title,
.ov2f-related-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin: 16px 0 8px;
}
.ov2f-aspect-list,
.ov2f-related-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ov2f-related-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  color: var(--text);
}
.ov2f-related-card:hover {
  border-color: var(--border-bright);
}
.ov2f-related-glyphs {
  font-family: 'Orby Astrology', sans-serif;
}
.ov2f-related-names {
  flex: 1;
  font-size: var(--fs-sm);
}
.ov2f-related-orb {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.ov2f-house-line {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin: 6px 0 0;
}
.ov2f-realm-signs {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin-top: 12px;
}
.ov2f-empty {
  font-size: var(--fs-sm);
  color: var(--text-faint);
}
.ov2f-axis-headline {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 0 0 10px;
}
.ov2f-house-line--bonus {
  color: var(--gold);
}
.ov2f-house-line--dim {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}
.ov2f-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.ov2f-filter-chip {
  font-size: var(--fs-xs);
  padding: 6px 10px;
  border: 1px solid var(--border-bright);
  background: transparent;
  color: var(--text-dim);
  border-radius: 999px;
  cursor: pointer;
}
.ov2f-filter-chip--on {
  border-color: var(--gold);
  color: var(--gold);
}
.ov2-wrap--friends-full .ov2-col-right--full {
  grid-column: 1 / -1;
}
.ov2-pa-wrap--full {
  max-width: none;
}
.synastry-house-overlaps-title,
.synastry-all-aspects-link {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.synastry-house-overlaps-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.synastry-house-chip {
  font-size: var(--fs-sm);
  padding: 8px 12px;
  border: 1px solid var(--border-bright);
  background: var(--bg2);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.synastry-house-chip:hover {
  border-color: var(--gold);
}
.synastry-all-aspects-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gold);
}

.transit-event-group {
  margin-bottom: 28px;
}
.transit-event-group__title {
  display: none;
}
.transit-lcard__category {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 4px;
}
.transit-lcard__exact-dt {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin: 12px 0 0;
}
.transit-lcard__exact-dt strong {
  color: var(--text);
  font-weight: 500;
}

/* ── Modal: Adicionar pessoa de fora ─────── */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
}
@media (min-width: 500px) {
  .bottom-sheet-overlay {
    align-items: center;
    justify-content: center;
  }
}

.bottom-sheet {
  background: var(--bg);
  border-radius: 12px 12px 0 0;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 500px) {
  .bottom-sheet {
    border-radius: 8px;
    max-width: 420px;
    max-height: 85dvh;
  }
}

.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}

.bottom-sheet-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.bottom-sheet-close:hover { color: var(--text); }

/* ── Formulário do modal ────────────────── */
.friends-manual-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px;
}

.profile-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  margin-top: 12px;
  margin-bottom: 4px;
}
.profile-label:first-child { margin-top: 0; }

.profile-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-sm);
}
.profile-input:focus {
  outline: none;
  border-color: var(--border-bright);
}
.profile-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


.friends-form-error {
  font-size: var(--fs-xs);
  color: #c0392b;
  background: rgba(192,57,43,0.08);
  border: 1px solid rgba(192,57,43,0.2);
  border-radius: 4px;
  padding: 7px 10px;
  margin-top: 10px;
}

.friends-manual-submit {
  width: 100%;
  margin-top: 16px;
}
.friends-manual-cancel {
  width: 100%;
  margin-top: 8px;
}

/* ══════════════════════════════════════════
   YOU — sub-menu e settings
══════════════════════════════════════════ */
#page-settings {
  flex-direction: column;
  overflow: hidden;
}

/* ── Settings: grid 12 col; moldura desktop cols 4–9; lista = mobile em todos os breakpoints ── */
#page-settings .col-inner.you-settings {
  --settings-gap: var(--grid-master-gap);
  --settings-track: calc((100% - 11 * var(--settings-gap)) / 12);
  padding-top: calc(var(--header-h) + 12px);
  padding-left: var(--grid-master-pad-x);
  padding-right: var(--grid-master-pad-x);
  padding-bottom: calc(var(--footer-total-h) + 24px + 128px);
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--settings-gap);
  align-items: start;
}
/* Moldura: mobile cols 2–11; desktop 4–10. Salvar e Sair são filhos diretos do grid .you-settings */
#page-settings .col-inner.you-settings > .settings-frame {
  --settings-frame-pad-x: 0px;
  grid-row: 2;
  grid-column: 2 / 12;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 900px) {
  #page-settings .col-inner.you-settings > .settings-frame {
    --settings-frame-pad-x: calc(12px + var(--settings-track) / 2);
    grid-column: 4 / 10;
    padding: 12px 0;
  }
}

#page-settings .col-inner.you-settings > #settings-save-global.settings-save-global {
  grid-row: 1;
  width: 100%;
  margin: 0 0 12px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0;
  background-color: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--border);
  border-radius: 4px;
  filter: none;
}
#page-settings .col-inner.you-settings > #settings-save-global.settings-save-global:hover {
  filter: none;
  background-color: var(--surface-hover);
  color: var(--border);
}
#page-settings .col-inner.you-settings > #settings-save-global.settings-save-global:focus-visible {
  outline: 2px solid var(--border-bright);
  outline-offset: 2px;
}
#page-settings .col-inner.you-settings > #settings-save-global.settings-save-global:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}
@media (max-width: 899px) {
  #page-settings .col-inner.you-settings > #settings-save-global.settings-save-global {
    grid-column: 2 / 6;
    justify-self: stretch;
  }
}
@media (min-width: 900px) {
  #page-settings .col-inner.you-settings > #settings-save-global.settings-save-global {
    grid-column: 4 / 6;
    justify-self: stretch;
    margin: 0;
  }
}

#page-settings .col-inner.you-settings > .btn-sign-out.btn-sign-out-spaced {
  grid-row: 3;
  width: 100%;
  box-sizing: border-box;
  margin: 64px 0 0 0;
  padding: 8px 16px;
  border: 1px solid var(--border);
  text-align: center;
  position: relative;
}
@media (max-width: 899px) {
  #page-settings .col-inner.you-settings > .btn-sign-out.btn-sign-out-spaced {
    grid-column: 5 / 9;
    justify-self: stretch;
  }
}
@media (min-width: 900px) {
  #page-settings .col-inner.you-settings > .btn-sign-out.btn-sign-out-spaced {
    grid-column: 6 / 8;
    justify-self: stretch;
  }
}

#page-settings .settings-frame > .you-title {
  justify-self: stretch;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 64px 0;
  box-sizing: border-box;
  font-size: var(--fs-xs);
  line-height: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-orientation: upright;
}

#page-settings .settings-frame > .settings-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  margin-top: 0;
}
@media (max-width: 899px) {
  #page-settings .settings-frame > .settings-stack {
    position: relative;
  }
  #page-settings .settings-frame > .settings-stack::after {
    content: '';
    position: absolute;
    left: calc(50% - 50vw);
    width: 100vw;
    bottom: 0;
    height: 1px;
    background: var(--border);
    pointer-events: none;
  }
}
@media (min-width: 900px) {
  #page-settings .settings-frame > .settings-stack {
    margin-top: 0;
    border: 1px solid var(--border);
    padding-top: 0;
    box-sizing: border-box;
  }
}

/* Cartões de configuração — mesma linguagem do .tl-card--astro (trânsito da semana na home) */
.settings-group {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: transparent;
  box-sizing: border-box;
}
:root[data-theme="blunt-dark"] .settings-group,
:root[data-theme="dark"] .settings-group {
  border-color: var(--border);
}

/* Lista plana só em #page-settings (mobile = desktop; cartão azul não se usa) */
#page-settings .settings-stack .settings-group,
#page-settings .settings-group {
  margin-bottom: 24px;
  padding: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (min-width: 900px) {
  #page-settings .settings-stack .settings-group,
  #page-settings .settings-group {
    margin-bottom: 0;
  }
}

/* Natal: última linha (local) sem borda inferior; células do .form-row seguem a lista */
#page-settings .settings-group--natal > .form-group:last-of-type {
  border-bottom: none;
  padding-bottom: 20px;
}
#page-settings .settings-group--natal .form-row .form-group {
  margin-bottom: 0;
}

/* Só em Configuração: títulos de grupo e labels usam caixa alta a 10px (exceção ao corpo 12px) */
.settings-group-title {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 12px 0;
  font-weight: var(--fw-bold);
  line-height: 16px;
}
.settings-group .form-group label {
  font-size: var(--fs-xs);
  line-height: 16px;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
/* Configuração: Consulta/agentes/DESIGN_RULES.md --text-xs (12px / 16px; line-height múltiplo de 4px).
   Escopo #page-settings evita sobrescrever o font-size 16px global dos .form-group (fix zoom iOS no auth). */
#page-settings .form-group input,
#page-settings .form-group select,
#page-settings .form-group textarea {
  font-size: 12px;
  line-height: 16px;
  border-radius: 4px;
  text-align: right;
}
#page-settings .settings-place-btn {
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  padding: 12px 12px 18px 12px;
  align-items: flex-start;
  gap: 8px;
}
#page-settings .settings-place-btn #settings-place-display {
  flex: 1;
  min-width: 0;
  text-align: right;
  line-height: 1.35;
  padding-bottom: 2px;
}
#page-settings .settings-place-btn .settings-place-chevron {
  align-self: center;
  flex-shrink: 0;
}
#page-settings .coupon-code-input {
  font-size: var(--fs-xs);
  line-height: 16px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gold);
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 16px;
  color: var(--text);
}
:root[data-theme="blunt-dark"] .settings-row,
:root[data-theme="dark"] .settings-row {
  border-bottom-color: var(--border);
}
#page-settings .settings-row {
  position: relative;
  border-bottom: 1px solid var(--border);
}
.settings-group .settings-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
#page-settings .settings-group .settings-row:last-of-type {
  border-bottom: 1px solid var(--border);
}
#page-settings .settings-group .settings-row.settings-row--danger {
  padding-top: 12px;
  padding-bottom: 12px;
}
#page-settings .settings-row > span:not(:first-child):not(.settings-badge) {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--text);
  text-align: right;
}
#page-settings .settings-row .language-selector-settings,
#page-settings .settings-row .theme-selector-settings {
  font-weight: 400;
  margin-top: 0;
}
#page-settings .settings-row .lang-btn,
#page-settings .settings-row .theme-btn {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  padding: 8px 12px;
  gap: 8px;
  border-radius: 4px;
}
#page-settings .settings-row .lang-btn.active,
#page-settings .settings-row .theme-btn.active {
  font-weight: 600;
}
.settings-row--disabled { opacity: 0.5; cursor: not-allowed; }
.settings-row--danger { color: var(--text); }
.settings-badge {
  font-size: var(--fs-xs);
  line-height: 16px;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-dim);
  font-weight: 700;
  text-transform: uppercase;
}
.settings-badge--danger {
  background: rgba(var(--tension-rgb), 0.12);
  color: var(--tension);
}
.settings-danger-btn {
  background: none;
  border: 1px solid var(--tension);
  color: var(--tension);
  font-size: var(--fs-xs);
  line-height: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.settings-danger-btn:hover { background: rgba(var(--tension-rgb), 0.1); }
.settings-danger-btn:disabled { opacity: 0.5; cursor: not-allowed; }

#page-settings .btn-primary,
#page-settings .btn-secondary,
#page-settings .btn-sign-out {
  font-size: 12px;
  line-height: 16px;
}

#page-settings .place-search-input {
  font-size: 12px;
  line-height: 16px;
  padding: 12px 12px;
  border-radius: 4px;
  text-align: right;
}
#page-settings .settings-place-results {
  border-radius: 4px;
}
#page-settings .settings-place-result-item {
  font-size: 12px;
  line-height: 16px;
  padding: 12px 12px;
}
#page-settings .settings-place-empty {
  font-size: 12px;
  line-height: 16px;
  padding: 16px 12px;
}

.coupon-feedback {
  font-size: 12px;
  line-height: 16px;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  margin-top: 8px;
}
.coupon-feedback--success {
  color: var(--gold);
  background: var(--surface);
  border-color: var(--border);
}
.coupon-feedback--error {
  color: var(--tension);
  background: rgba(var(--tension-rgb), 0.08);
  border-color: rgba(var(--tension-rgb), 0.28);
}

/* ── Configuração — lista (rótulo | valor): igual mobile/desktop; só mobile usa divisória 100vw ── */
#page-settings .settings-group-title {
  margin: 0;
  letter-spacing: 0.14em;
  background: transparent;
  padding-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
}
/* Nicho: título sem painel; itens (linhas) com fundo distinto */
#page-settings .settings-group > *:not(.settings-group-title) {
  background-color: var(--bg-2);
}
#page-settings .settings-group > .settings-group-title + * {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#page-settings .settings-group > *:not(.settings-group-title):last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
#page-settings .settings-group > #coupon-feedback.coupon-feedback--success {
  background: var(--surface);
  color: var(--gold);
}
/* Celeste: --blue vira o gold solar (themes-blunt) — aviso de sucesso em ink */
:root[data-theme="blunt-light"] .coupon-feedback--success,
:root[data-theme="blunt-light"] #page-settings .settings-group > #coupon-feedback.coupon-feedback--success {
  color: var(--ink, #1A1814);
}
#page-settings .settings-group > #coupon-feedback.coupon-feedback--error {
  background: rgba(var(--tension-rgb), 0.08);
  color: var(--tension);
}
/* Campos sem “caixa”: mais largura útil, sem padding esquerdo */
#page-settings .settings-group .form-group input:not([type="hidden"]),
#page-settings .settings-group .form-group select,
#page-settings .settings-group .form-group textarea,
#page-settings .settings-group .form-group--account .input-readonly,
#page-settings .settings-group .settings-place-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 0;
}
#page-settings .settings-group .form-group input:focus-visible,
#page-settings .settings-group .form-group select:focus-visible,
#page-settings .settings-group .form-group textarea:focus-visible,
#page-settings .settings-group .settings-place-btn:focus-visible,
#page-settings .settings-group #coupon-btn.coupon-apply-btn:focus-visible {
  outline: 2px solid var(--border-bright);
  outline-offset: 2px;
}
#page-settings .settings-group--natal > .form-row {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
#page-settings .settings-group > .form-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  margin: 0;
  padding: 12px 0;
  position: relative;
  border-bottom: 1px solid var(--border);
}
#page-settings .settings-group > .form-group label {
  flex: 0 1 44%;
  margin-bottom: 0;
  text-align: left;
  align-self: center;
}
#page-settings .settings-group > .form-group input:not([type="hidden"]),
#page-settings .settings-group > .form-group select,
#page-settings .settings-group > .form-group textarea {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}
#page-settings .settings-group > .form-group .settings-place-btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  justify-content: space-between;
  text-align: right;
}
#page-settings .settings-group > .form-group:has(.settings-place-btn) {
  align-items: flex-start;
}
#page-settings .settings-group > .form-group:has(.settings-place-btn) label {
  align-self: center;
  padding-top: 2px;
}
#page-settings .settings-group > .form-group .settings-place-chevron {
  margin-left: 8px;
}
#page-settings .settings-group > .form-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border: none;
}
#page-settings .settings-group > .form-row .form-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  width: 100%;
  position: relative;
  border-bottom: 1px solid var(--border);
}
#page-settings .settings-group > .form-row .form-group label {
  flex: 0 1 44%;
  margin-bottom: 0;
}
#page-settings .settings-group > .form-row .form-group input,
#page-settings .settings-group > .form-row .form-group select,
#page-settings .settings-group > .form-row .form-group textarea {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}
#page-settings .settings-group > .btn-primary {
  width: 100%;
  margin-top: 12px;
}
#page-settings .settings-group > .coupon-feedback {
  margin-top: 0;
  margin-bottom: 8px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 0;
  background-color: var(--bg-2);
}

/* Cupom: label, input e botão na mesma linha */
#page-settings .settings-group > .form-group.form-group--compact-bottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
#page-settings .settings-group > .form-group.form-group--compact-bottom > label {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  margin-bottom: 0;
  box-sizing: border-box;
}
#page-settings .settings-group > .form-group.form-group--compact-bottom > #coupon-input {
  flex: 1 1 auto;
  flex-grow: 1;
  min-width: 0;
  width: auto;
  text-align: right;
  align-self: center;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border) !important;
}
#page-settings .settings-group > .form-group.form-group--compact-bottom > #coupon-btn.coupon-apply-btn {
  flex-shrink: 0;
  flex-grow: 0;
  width: auto;
  margin: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  font-family: var(--font);
  font-size: 12px;
  line-height: 16px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  border-radius: 4px;
  padding: 8px 16px;
  transition: all 0.15s;
  filter: none;
}
#page-settings .settings-group > .form-group.form-group--compact-bottom > #coupon-btn.coupon-apply-btn:hover {
  border-color: var(--border-bright);
  color: var(--text);
  background: none;
  filter: none;
}
#page-settings .settings-group > .form-group.form-group--compact-bottom > #coupon-btn.coupon-apply-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}
#page-settings .coupon-apply-btn__glyph {
  display: inline-block;
  font-family: 'Orby Text', inherit;
  line-height: 1;
  font-size: 14px;
  transform: rotate(90deg);
  transform-origin: center;
}

/* Data/hora (mapa natal): sem ícones nativos de calendário/relógio no campo */
#page-settings .settings-group #birth-date::-webkit-calendar-picker-indicator,
#page-settings .settings-group #birth-time::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
#page-settings .settings-group #birth-time::-webkit-inner-spin-button,
#page-settings .settings-group #birth-time::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}
#page-settings .settings-group #birth-date::-moz-calendar-picker-indicator {
  display: none;
}

/* Tema / idioma: mesmo layout empilhado em mobile e desktop */
#page-settings .settings-row--language,
#page-settings .settings-row--theme {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-bottom: 12px;
}
#page-settings .settings-row--language .language-selector-settings,
#page-settings .settings-row--theme .theme-selector-settings {
  margin-top: 0;
  width: 100%;
}
#page-settings .lang-btn,
#page-settings .theme-btn {
  min-height: 44px;
  box-sizing: border-box;
  flex: 1;
  justify-content: center;
}

#page-settings .form-group input::placeholder,
#page-settings .form-group textarea::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

@media (max-width: 899px) {
  /* Fundo do nicho em 100vw + divisórias */
  #page-settings .settings-group > .form-group,
  #page-settings .settings-group > .form-row .form-group,
  #page-settings .settings-group > .settings-row,
  #page-settings .settings-group > .coupon-feedback:not(.coupon-feedback--success):not(.coupon-feedback--error) {
    background-color: transparent !important;
  }
  #page-settings .settings-group > .form-group::before,
  #page-settings .settings-group > .form-row .form-group::before,
  #page-settings .settings-group > .settings-row::before,
  #page-settings .settings-group > .coupon-feedback::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    top: 0;
    bottom: 0;
    background: var(--bg-2);
    pointer-events: none;
  }
  #page-settings .settings-group > #coupon-feedback.coupon-feedback--success::before,
  #page-settings .settings-group > #coupon-feedback.coupon-feedback--error::before {
    content: none;
  }

  #page-settings .settings-group > .form-group,
  #page-settings .settings-group > .form-row .form-group,
  #page-settings .settings-group > .settings-row {
    border-bottom: none !important;
  }
  #page-settings .settings-group > .form-group::after,
  #page-settings .settings-group > .form-row .form-group::after,
  #page-settings .settings-group > .settings-row:not(:last-of-type)::after {
    content: '';
    position: absolute;
    left: calc(50% - 50vw);
    width: 100vw;
    bottom: 0;
    height: 1px;
    background: var(--border);
    pointer-events: none;
  }
  #page-settings .settings-group > .settings-row:last-of-type::after {
    content: none;
  }

  #page-settings .settings-group > .coupon-feedback {
    border-bottom: none;
    position: relative;
    z-index: 1;
  }
  #page-settings .settings-group > .coupon-feedback::after {
    content: '';
    position: absolute;
    left: calc(50% - 50vw);
    width: 100vw;
    bottom: 0;
    height: 1px;
    background: var(--border);
    pointer-events: none;
  }

  /* Conteúdo acima do fundo (::before) e da linha (::after) — evita pseudos a taparem texto no mobile */
  #page-settings .settings-group > .form-group > *,
  #page-settings .settings-group > .form-row .form-group > *,
  #page-settings .settings-group > .settings-row > * {
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 900px) {
  #page-settings .settings-group > .form-group::before,
  #page-settings .settings-group > .form-row .form-group::before,
  #page-settings .settings-group > .settings-row::before,
  #page-settings .settings-group > .coupon-feedback::before {
    content: none !important;
    display: none !important;
  }
  #page-settings .settings-frame > .settings-stack::after {
    content: none !important;
    display: none !important;
  }
  #page-settings .settings-group > .form-group::after,
  #page-settings .settings-group > .form-row .form-group::after,
  #page-settings .settings-group > .settings-row::after,
  #page-settings .settings-group > .coupon-feedback::after {
    content: none !important;
    display: none !important;
  }

  /* Texto alinhado ao recuo do grid; bordas em toda a largura útil da moldura (padding só no conteúdo) */
  #page-settings .settings-group-title {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: var(--settings-frame-pad-x);
    padding-right: var(--settings-frame-pad-x);
    box-sizing: border-box;
  }
  #page-settings .settings-group > .form-group,
  #page-settings .settings-group > .form-row .form-group,
  #page-settings .settings-group > .settings-row,
  #page-settings .settings-group > .coupon-feedback {
    padding-left: var(--settings-frame-pad-x);
    padding-right: var(--settings-frame-pad-x);
    box-sizing: border-box;
  }
  #page-settings .settings-group > .btn-primary {
    padding-left: var(--settings-frame-pad-x);
    padding-right: var(--settings-frame-pad-x);
    box-sizing: border-box;
  }
}

/* ── Player: full-width no mobile com margem lateral ── */
@media (max-width: 899px) {
  #page-transits .tempo-panel {
    width: calc(100vw - 16px);
    margin-left: calc(-1 * (100vw - 8px) / 6);
  }
}

/* ── Layout desktop: home em 2 colunas ──────────────────────────────── */
@media (min-width: 900px) {
  /* Player de trânsitos: colunas centrais (4–9) do grid mestre */
  #page-transits .tempo-panel {
    width: calc((var(--grid-master-viewport-content)) / 2 + 40px);
    align-self: center;
    margin-bottom: calc(var(--footer-total-h) + 32px);
  }

  /* Seção do céu de hoje: primeiras 6 colunas, sub-grid de 6 */
  .home-sky-section {
    grid-column: 1 / 7;
    grid-template-columns: repeat(6, 1fr);
  }
  .home-sky-title {
    grid-column: 1;
    grid-row: 1 / -1;
    writing-mode: vertical-rl;
    text-orientation: upright;
  text-orientation: upright;
    align-self: start;
    justify-self: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 4px;
    padding: 128px 0;
  }
  .daily-sky-icons {
    grid-column: 2 / 3;
    justify-self: center;
    align-self: start;
    padding: 128px 0;
  }
  .daily-sky-content {
    grid-column: 3 / 7;
    margin-right: 0;
    padding: 128px 0;
  }
  .daily-horoscope-card {
    grid-column: 2 / 7;
    width: 100%;
    max-width: none;
    margin-right: 0;
  }
  .home-sky-mini {
    grid-column: 2 / 7;
    width: 100%;
    max-width: none;
    height: auto;
    margin-right: 0;
  }
  .daily-horo-cols {
    grid-column: 2 / 7;
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr 1fr;
    margin-right: 0;
  }

  /* Trânsito da semana: grid mestre */
  .home-timeline-title {
    grid-column: 7;
    writing-mode: vertical-rl;
    text-orientation: upright;
  text-orientation: upright;
    align-self: start;
    justify-self: center;
    font-size: 10px;
    letter-spacing: 4px;
    padding: 128px 0;
  }
  .home-timeline {
    grid-column: 8 / 12;
    display: block;
    margin-left: 0;
    margin-right: 0;
    padding-top: 128px;
    padding-bottom: 16px;
  }

}


/* ══════════════════════════════════════════
   I18N — SELETORES DE IDIOMA
   ══════════════════════════════════════════ */

.language-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.language-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.language-option:hover {
  border-color: var(--gold);
  background: var(--bg-3);
}

.language-option.selected {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.08);
}

.language-flag {
  font-size: 20px;
  line-height: 1;
}

.language-name {
  font-weight: 500;
}

.language-selector-settings,
.theme-selector-settings {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.lang-btn,
.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.lang-btn:hover,
.theme-btn:hover {
  border-color: var(--gold);
  background: var(--bg-3);
}

.lang-btn.active,
.theme-btn.active {
  border-color: var(--gold);
  background: var(--surface);
  font-weight: 600;
}


/* ══════════════════════════════════════════
   FOOTER — MOBILE COLLAPSE / DESKTOP TEXT
══════════════════════════════════════════ */
/* Camada de vidro do menu mobile (dentro do .mobile-menu-grid-wrap): mesma altura que o grid para não sobrar faixa vazia em cima */
.mobile-menu-panel-glass {
  display: none;
}

@media (max-width: 768px) {
  :root {
    --footer-h: 50px;
    --mobile-menu-panel-max-h: 220px;
    --mobile-nav-fab-size: 52px;
  }

  /* Desktop items ocultos no mobile */
  .desktop-nav,
  .desktop-fab { display: none !important; }

  /* Footer base fica fixo; só o painel expandido anima para cima */
  #footer-nav {
    flex-direction: column;
    height: var(--footer-h);
    overflow: visible;
  }

  .mobile-menu-shell {
    display: block;
    width: 100%;
    height: var(--footer-h);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }

  /* Barra mobile: 1fr MENU (centro) | 1fr Orby; chevron só em .menu-open (1 col) */
  .mobile-menu-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: var(--footer-h);
    width: 100%;
    position: relative;
    z-index: 1;
    transition: grid-template-columns 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #footer-nav.menu-open .mobile-menu-header {
    grid-template-columns: 1fr;
  }

  .mobile-menu-trigger-left {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 0 8px;
    margin: 0;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .mobile-menu-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    letter-spacing: 0.15em;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--text);
  }

  .oracle-footer-btn.mobile-oracle-footer {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    margin: 0;
    padding: 4px 6px;
    min-height: 36px;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  #footer-nav.menu-open .mobile-menu-trigger-left,
  #footer-nav.menu-open .oracle-footer-btn.mobile-oracle-footer {
    display: none;
  }

  .mobile-menu-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 100%;
    height: 100%;
    min-height: 44px;
    padding: 0 12px;
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  #footer-nav.menu-open .mobile-menu-toggle {
    display: flex;
  }

  /* Chevron ▲ colapsado (canvas = ▲; rotate 180° = ▼ quando aberto) */
  .mobile-menu-toggle-chevron {
    display: block;
    transform: rotate(0deg);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* FAB: centro horizontal (50vw); só ~25% do disco acima da linha do topo da barra (75% dentro da faixa) */
  .mobile-fab-nav {
    position: fixed;
    left: 50vw;
    bottom: calc(var(--footer-h) - var(--mobile-nav-fab-size) * 0.75);
    transform: translateX(-50%);
    width: 64px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--z-nav) + 1);
    pointer-events: none;
  }

  .mobile-fab-nav .nav-fab {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    transform-origin: center bottom;
    flex-shrink: 0;
    max-width: 64px;
    margin: 0;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.28s ease,
      visibility 0s linear 0s,
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .mobile-fab-nav .nav-fab:hover,
  .mobile-fab-nav .nav-fab:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 18px var(--gold-glow);
  }

  /* Vidro dentro do wrap: altura = conteúdo (até max-height), evita faixa vazia acima do grid vs. vidro fixo 220px */
  .mobile-menu-panel-glass {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 -10px 30px color-mix(in srgb, var(--bg) 24%, transparent);
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity 0.28s ease 0.05s, visibility 0s linear 0.33s;
  }

  #footer-nav.menu-open .mobile-menu-panel-glass {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s ease 0.05s, visibility 0s linear 0s;
  }

  /* Painel expandido — recorte + empilhamento; vidro preenche o wrap (inset:0) */
  .mobile-menu-grid-wrap {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--footer-h);
    isolation: isolate;
    z-index: 1;
    transition: max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mobile-menu-grid-wrap::before {
    display: none;
  }

  .mobile-menu-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    width: 100%;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease 0.05s, transform 0.28s ease 0.05s;
  }

  #footer-nav.menu-open .mobile-menu-grid {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-menu-grid .nav-item {
    flex: none;
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 0 10px;
    min-height: 48px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-regular);
    gap: 0;
    text-align: center;
  }

  .mobile-menu-grid .nav-item span {
    display: block !important;
  }

  #footer-nav.menu-open .mobile-menu-grid-wrap {
    max-height: var(--mobile-menu-panel-max-h);
  }

  /* Abaixo do shell/painel (z-index 1): o wrapper do FAB é fixed + z-nav+1; com FAB invisível
     ainda cobria o grid e o canvas aparecia por cima das linhas inferiores (parece “menu desceu”). */
  #footer-nav.menu-open .mobile-fab-nav {
    z-index: 0;
  }

  #footer-nav.menu-open .mobile-menu-toggle-chevron {
    transform: rotate(180deg);
  }

  #footer-nav.menu-open .mobile-fab-nav .mobile-theme-fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    box-shadow: none;
    transition:
      opacity 0.22s ease,
      visibility 0s linear 0.22s,
      transform 0s linear 0.22s,
      box-shadow 0.2s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-menu-header,
    .mobile-menu-grid-wrap,
    .mobile-menu-grid,
    .mobile-menu-panel-glass,
    .mobile-menu-trigger-left,
    .oracle-footer-btn.mobile-oracle-footer,
    .mobile-menu-toggle,
    .mobile-fab-nav .nav-fab,
    .mobile-menu-toggle-chevron {
      transition-duration: 0.01ms !important;
      transition-delay: 0s !important;
    }
    #footer-nav.menu-open .mobile-fab-nav .mobile-theme-fab {
      opacity: 0;
      transform: none;
    }
    .mobile-menu-grid {
      transform: none;
    }
  }
}

@media (min-width: 769px) {
  /* Elementos mobile ocultos no desktop */
  .mobile-menu-shell,
  .mobile-fab-nav { display: none !important; }

  /* Orby segue o grid do header no desktop (C11–C12) */
  .oracle-header-btn {
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }
}

/* ══════════════════════════════════════════
   MODAL — BUSCA DE LOCAL DE NASCIMENTO
══════════════════════════════════════════ */
.place-search-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg);
  flex-direction: column;
  overflow: hidden;
}

.place-search-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 16px;
  z-index: 1;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.place-search-close:hover { color: var(--text); }

.place-search-body {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 48px) 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  min-height: 0;
}

.place-search-input-wrap {
  position: relative;
}

.place-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: var(--fs-base);
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
}
.place-search-input:focus { border-color: var(--gold); }

.settings-place-results {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.settings-place-results:empty { display: none; }

.settings-place-result-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 13px 14px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  cursor: pointer;
  line-height: 1.4;
}
.settings-place-result-item:last-child { border-bottom: none; }
.settings-place-result-item:hover,
.settings-place-result-item:active { background: var(--surface-hover); color: var(--text); }

.settings-place-empty {
  padding: 16px 14px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-align: center;
}

/* Botão do campo "Local de Nascimento" nos settings */
.settings-place-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  min-height: 42px;
}
.settings-place-btn:hover { border-color: var(--gold); }

.settings-place-chevron {
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   SALVOS — OVERLAY SAVE BUTTON + PANEL
══════════════════════════════════════════ */
.overlay-save-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.overlay-save-btn:hover { color: var(--text); }
.overlay-save-btn--saved { color: var(--gold); }
.overlay-save-btn--saved svg path { fill: var(--gold); stroke: var(--gold); }

/* Relatório: ícone Salvos fixed — herda o novo visual ink do .transit-report-saved-btn */
#transit-report-top .transit-report-saved-btn.overlay-save-btn {
  min-width: 0;
}

/* Cards salvos */
.tl-card--saved {
  cursor: pointer;
}

/* ── Painéis Salvos/Vistos: listas de transit-lcard colapsados ──────
   (inline style.display='none' do setReportSubTab vence estas regras)
   padding-top: o toolbar do relatório fica oculto nestas abas e o header
   fixo cobriria o primeiro card. */
#saved-panel,
#seen-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: calc(var(--header-h, 60px) + 16px);
}
@media (max-width: 1024px) {
  /* ≤1024: o container já ganha padding-top via --tr-tripa-start */
  #saved-panel,
  #seen-panel {
    padding-top: 0;
  }
}
/* Bookmark/check acionáveis na pilha do card colapsado (dessalvar/desmarcar) */
.transit-lcard__state-stack--actions button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.tl-card-body--saved-actions {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 2px;
  min-height: unset;
}
.saved-remove-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.saved-remove-btn:hover { color: var(--tension); }

.saved-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

/* ══════════════════════════════════════════
   TRANSIT ALERT MODAL
══════════════════════════════════════════ */
.transit-alert-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 16px;
}
.transit-alert-backdrop.visible { opacity: 1; }

/* Desktop: encaixado entre header e footer */
@media (min-width: 900px) {
  .transit-alert-backdrop {
    top: var(--header-h, 56px);
    bottom: var(--footer-h, 56px);
    z-index: calc(var(--z-nav) - 500);
  }
}

.transit-alert-dialog {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: min(360px, 100%);
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tad-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.tad-symbol {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--text);
}
.tad-title-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tad-planet {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.tad-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.tad-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  flex-shrink: 0;
  border-radius: 3px;
  transition: color 0.15s;
}
.tad-close:hover { color: var(--text); }

.tad-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tad-msg {
  font-size: var(--fs-xs);
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.02em;
}
.tad-msg--dim { color: var(--text-dim); }

.tad-next-block {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left-width: 3px;
}
.tad-next-block--harmonico { border-left-color: var(--harmonico, #4a9eff); }
.tad-next-block--tensao    { border-left-color: var(--tensao,    #ff5050); }
.tad-next-block--neutro    { border-left-color: var(--border); }

.tad-next-asp {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: 0.04em;
}
.tad-next-with {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.tad-next-date {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-top: 2px;
}

.tad-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}
.tad-btn {
  width: 100%;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
  text-align: center;
}
.tad-btn--primary {
  background: var(--gold);
  color: var(--creme, #f5f0e8);
  border: none;
}
.tad-btn--primary:hover { filter: brightness(0.88); }

/* Janelas de aviso — CTA primário em Ink (não Solar/gold do tema) */
.transit-alert-dialog .tad-btn--primary,
.paywall-block .btn-primary,
.modal-overlay .modal-actions .btn-primary,
.oracle-no-credits .btn-primary {
  background: var(--ink, #1A1814);
  color: var(--creme, #faf4ed);
  border: none;
}
.transit-alert-dialog .tad-btn--primary:hover,
.paywall-block .btn-primary:hover,
.modal-overlay .modal-actions .btn-primary:hover,
.oracle-no-credits .btn-primary:hover {
  filter: brightness(1.12);
}
.tad-btn--ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.tad-btn--ghost:hover { border-color: var(--border-bright); color: var(--text); }

/* ══════════════════════════════════════════
   NOVA HOME DE TRÂNSITOS — Lista Linear
   Cards compactos + estado expandido inline
══════════════════════════════════════════ */

/* Paleta trânsitos — alinhada aos mockups Celeste / Observatório */
:root {
  --tlc-harmonico-solid: #f0cc71;
  --tlc-harmonico-light: var(--bg-3, #d9ca9d);
  --tlc-tensao-solid:    #e0946f;
  --tlc-tensao-light:    var(--bg-3, #d9ca9d);
  --tlc-neutro-solid:    #d0dac9;
  --tlc-neutro-light:    var(--bg-3, #d9ca9d);
  /* multi-astro (leitura de casa): passado = bg-3 do tema, futuro = paper (--creme). */
  --tlc-multiastro-solid: var(--creme, #ede0bd);
  --tlc-multiastro-base:  var(--bg-3, #d9ca9d);
  /* lunar (leituras da Lua): uva lavada. Segue a convenção dos demais tons —
     o `solid` é a cor que rege o FUTURO na timeline E o fundo do painel da
     direita, para card e painel falarem a mesma cor. */
  --tlc-lunar-solid: #b9a8c4;
  --tlc-lunar-base:  var(--bg-3, #d9ca9d);
  --tlc-text-on-solid:   #1a1814;
  --tlc-text-on-light:   #1a1814;
  --tlc-card-border:     rgba(26, 24, 20, 0.5);
  /* verde-s — identidade da sinastria (verde vintage amarelado).
     Por ora igual nos dois temas; ajustar por tema depois. */
  --verde-s: #9aa05a;
  /* --tlc-card-surface: superficie do card expandido (header, rodape, botoes).
     Contrasta com o fundo sand da pagina. NAO usar --transit-report-bg aqui,
     pois o minimapa de ativacao (mini-activation-map.js) tambem le esta var. */
  --tlc-card-surface:    var(--bg, #ede0bd);
  /* --transit-report-bg = fundo da pagina de transitos (split-top).
     Usar no gradient do .transit-lcard para card colapsado fundir com o fundo.
     Celeste: --bg-3 (sand). Observatorio: --bg (ink). */
  --transit-report-bg:   var(--bg-3, #d9ca9d);
}
:root[data-theme="blunt-dark"],
:root[data-theme="dark"] {
  --tlc-harmonico-solid: #745A16;
  --tlc-harmonico-light: #4b473b;
  --tlc-tensao-solid:    #702C20;
  --tlc-tensao-light:    #4b473b;
  --tlc-neutro-solid:    #2F4963;
  --tlc-neutro-light:    #4b473b;
  --tlc-multiastro-solid: #242018;
  --tlc-multiastro-base:  #1A1814;
  /* Uva do Observatório: mais fechada, para o texto claro seguir legível. */
  --tlc-lunar-solid: #3E2F4A;
  --tlc-lunar-base:  #1A1814;
  --tlc-text-on-solid:   #F4C430;
  --tlc-text-on-light:   #F4C430;
  --tlc-card-border:     rgba(237, 224, 189, 0.25);
  --tlc-card-surface:    #242018;
  --transit-report-bg:   var(--bg);
  /* verde-s — mesmo valor do tema claro por enquanto (ajustar depois) */
  --verde-s: #9aa05a;
}

/* Sinastria = identidade verde-s: todos os tons (barra, foot, cards) herdam verde.
   A nuance harmônico/tenso segue nos badges e na legenda do orbe. */
.ov2-wrap--friends {
  --tlc-harmonico-solid: var(--verde-s);
  --tlc-tensao-solid:    var(--verde-s);
  --tlc-neutro-solid:    var(--verde-s);
}

/* Fundo sand da home de trânsitos (modo relatório) — escopado, não global */
#page-transits.active #transit-split[data-mode="top"] .split-top {
  background: var(--transit-report-bg, var(--bg));
}

/* Container da lista */
.transit-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0 calc(var(--footer-total-h) + 24px);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Card fechado ── base (passado→hoje) + tom (hoje→fim); split em --tlc-today-pct */
.transit-lcard {
  --tl-bar-tone: var(--tlc-neutro-solid);
  --tlc-cover-h: 80px;
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--tlc-cover-h);
  padding: 0 20px;
  container-type: size;
  border: 1px solid var(--tlc-card-border, var(--border));
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--transit-report-bg, var(--bg-3, #d9ca9d)) var(--tlc-today-pct, 50%),
    var(--tl-bar-tone, var(--tlc-neutro-solid)) var(--tlc-today-pct, 50%)
  );
  transition: filter 0.15s;
  -webkit-tap-highlight-color: transparent;
}
/* Tripa: grid fixo — título sempre col 1 (mesma linha lateral com ou sem flag).
   padding-right extra para o state-stack absolute (40px = metade de --tlc-cover-h). */
.transit-lcard:not(.transit-lcard--expanded):not(.ov2-related-card) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  padding-right: calc(var(--tlc-cover-h) / 2);
}
.transit-lcard:hover { filter: brightness(0.96); }
.transit-lcard--locked {
  cursor: pointer;
}
.transit-lcard--locked:hover { filter: none; }
.transit-lcard--locked .transit-lcard__title {
  filter: blur(6px);
  opacity: 0.75;
  user-select: none;
}
/* ── Card de síntese multi-astro: MESMO layout do card de aspecto (barra
   temporal + timeline INÍCIO/FIM). A faixa central mostra "JUNTOS ATÉ {fim}"
   no lugar de "PICO". O rótulo LEITURA MULTI-ASTROS é uma tag no colapsado. */
/* Tom creme (mesmo da OV2): futuro creme + passado taupe. Dupla classe para
   vencer o .transit-lcard--neutro que também está no elemento. */
/* Tom creme. O card de casa vazia carrega a MESMA classe --multi-astro
   (ver builders), então herda estas cores nos dois temas — inclusive a timeline. */
.transit-lcard.transit-lcard--multi-astro {
  --tl-bar-tone: var(--tlc-multiastro-solid);
  --transit-report-bg: var(--tlc-multiastro-base);
}
/* Timeline expandida: passado é transparent por padrão (funde no card creme) —
   força o taupe para o futuro creme contrastar, igual ao colapsado/OV2. */
.transit-lcard--multi-astro .transit-lcard__tl-bar {
  background: linear-gradient(
    to right,
    var(--tlc-multiastro-base) var(--tlc-today-pct, 50%),
    var(--tl-bar-tone, var(--tlc-multiastro-solid)) var(--tlc-today-pct, 50%)
  );
}
/* Leituras da Lua: uva. Mesma mecânica do multi-astro — a barra expressa o
   TEMPO, não tensão/harmonia —, só que com o tom próprio da família. */
.transit-lcard.transit-lcard--lunar {
  --tl-bar-tone: var(--tlc-lunar-solid);
  --transit-report-bg: var(--tlc-lunar-base);
}
.transit-lcard--lunar .transit-lcard__tl-bar {
  background: linear-gradient(
    to right,
    var(--tlc-lunar-base) var(--tlc-today-pct, 50%),
    var(--tl-bar-tone, var(--tlc-lunar-solid)) var(--tlc-today-pct, 50%)
  );
}
.ov2-tl.ov2-tl--lunar {
  --tl-bar-tone: var(--tlc-lunar-solid);
  --tl-bar-base: var(--tlc-lunar-base);
}
.ov2-foot.ov2-foot--lunar {
  --tl-bar-tone: var(--tlc-lunar-solid);
  --tl-bar-base: var(--tlc-lunar-base);
}

.transit-lcard--multi-astro .transit-lcard__ms-label {
  margin-left: auto;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}
/* Card de leitura de CASA VAZIA: cores = multi-astro (regras compartilhadas
   acima). Aqui só o fallback sem timeline: header com cantos arredondados
   embaixo (senão fica quadrado/aberto). */
.transit-lcard--expanded.transit-lcard--no-tl .transit-lcard__exp-header {
  border-radius: 8px;
}
/* Área da leitura de casa (render inline no card expandido) */
.house-reading-area {
  padding: 14px 20px 18px;
  border: 1px solid var(--tlc-card-border, var(--border));
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--tlc-card-surface, var(--bg));
  color: var(--ink, #1a1814);
  font-size: 0.92rem;
  line-height: 1.55;
}
.house-reading-area p { margin: 0 0 0.7em; }
.house-reading-area p:last-child { margin-bottom: 0; }
.house-reading-area--loading,
.house-reading-area--error {
  text-align: center;
  opacity: 0.7;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.house-reading-area--error { cursor: pointer; }

/* ── Coluna direita do OV2 de casa: painel "Os astros na casa" (A) ── */
.hr-pa-wrap { margin-bottom: 8px; }
.hr-astro-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
}
.hr-astro-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--tlc-card-border, rgba(26,24,20,0.12));
}
.hr-astro-row:last-child { border-bottom: none; }
.hr-astro-glyph {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  /* --text = ink no Celeste, cream no Observatório (legível nos dois). */
  color: var(--text, #1A1814);
}
.hr-astro-glyph .ov2-svg-mask { width: 20px; height: 20px; }
.hr-astro-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font);
  font-size: 0.86rem;
  color: var(--text);
}
.hr-astro-meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.hr-astro-pos {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim, #6b6455);
  white-space: nowrap;
}
.hr-astro-dignity {
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-dim, #6b6455);
  opacity: 0.8;
  white-space: nowrap;
}
.hr-astro-retro {
  margin-left: 4px;
  color: var(--tension, #ff5050);
  font-weight: 700;
}
.hr-pa-subtitle {
  font-family: var(--font);
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim, #6b6455);
  margin: 16px 0 8px;
}
/* Tabela de aspectos internos: célula do aspecto (glifo + nome) e orbe+direção. */
.hr-asp-name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.hr-asp-name-cell .ov2-svg-mask--glyph-cell { margin: 0; }
.hr-asp-name {
  font-size: 10px;
  color: var(--text);
}
.hr-asp-orbwrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.hr-asp-orb { white-space: nowrap; }
.hr-asp-dir {
  font-size: 10px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
}

/* Título do painel "Os astros na casa": mesmo tamanho do título "Leituras por
   astro" (.ov2-related-title, 9px) — sem margin extra dentro do .ov2-pa. */
.hr-pa-title { margin-bottom: 12px; }
.transit-lcard__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg-1, #f5f0e8) 35%, transparent);
}
:root[data-theme="blunt-dark"] .transit-lcard__veil,
:root[data-theme="dark"] .transit-lcard__veil {
  background: color-mix(in srgb, var(--bg-1, #1a1a1a) 45%, transparent);
}
.transit-lcard--featured {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold, #C49A3C) 85%, transparent);
}
.transit-lcard__badge {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  pointer-events: none;
  line-height: 1.2;
}
.transit-lcard__badge--open {
  background: color-mix(in srgb, var(--gold, #C49A3C) 22%, var(--bg-1, #fff));
  color: var(--text, #1a1a1a);
}
.transit-lcard__badge--locked {
  max-width: min(52%, 11rem);
  text-align: right;
  background: color-mix(in srgb, var(--ink, #1A1814) 88%, transparent);
  color: var(--creme, #faf4ed);
}
:root[data-theme="blunt-dark"] .transit-lcard__badge--locked,
:root[data-theme="dark"] .transit-lcard__badge--locked {
  background: color-mix(in srgb, var(--creme, #EDE0BD) 92%, transparent);
  color: var(--ink, #1A1814);
}
.transit-lcard--harmonico {
  --tl-bar-tone: var(--tlc-harmonico-solid);
}
.transit-lcard--tensao {
  --tl-bar-tone: var(--tlc-tensao-solid);
}
.transit-lcard--neutro {
  --tl-bar-tone: var(--tlc-neutro-solid);
}
/* Cards do céu: tom segue o tipo da configuração (tensao/harmonico).
   Fallback: tensao para cards sem tipo definido. */
.transit-lcard--sky {
  --tl-bar-tone: var(--tlc-tensao-solid);
}
.transit-lcard--sky.transit-lcard--harmonico {
  --tl-bar-tone: var(--tlc-harmonico-solid);
}
.transit-lcard--sky .transit-lcard__meta {
  opacity: 0.6;
  font-weight: 400;
  font-size: 0.85em;
}
/* OV2 do céu: listas de aspecto na MESMA caixa das pills (ov2-pa-activation) —
   título no estilo de "A CONFIGURAÇÃO" + separadores consistentes (borda da
   caixa entre listas; border-top entre o título e os itens). */
.sky-ov2-aspbox > .ov2-pa-activation-label { padding-bottom: 8px; }
.sky-ov2-aspbox > .ov2-pa-table {
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--border);
}
/* Coluna própria da direção (aplicativo/separativo), entre o aspecto e o orbe. */
.ov2-pa-cell--dir {
  text-align: right;
  white-space: nowrap;
  padding-right: 6px;
}
/* Leitura IA das configurações do céu (render inline no card expandido) */
.sky-reading {
  padding: 12px 16px 4px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.sky-reading p { margin: 0 0 10px; }
.sky-reading--loading {
  display: flex;
  justify-content: center;
  padding: 20px 16px;
}
.sky-reading-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 12px 16px;
  padding: 10px 14px;
  border: 1px solid var(--tlc-card-border, var(--border));
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
:root[data-theme="blunt-dark"] .sky-reading-btn { color: var(--gold); }
.sky-reading-btn:hover { filter: brightness(0.97); }
.sky-reading-btn--locked { opacity: 0.8; }

/* ── OV2: Trânsitos relacionados (col-right, abaixo de Posição & Ativação) ──
   Mobile: col-right é grid de 12 col — segue a mesma largura da tabela P&A */
.ov2-related {
  grid-column: 1 / -1;
  margin-inline: var(--half-col);
  width: calc(100% - 2 * var(--half-col));
  justify-self: stretch;
  box-sizing: border-box;
  margin-top: 0;
}
.ov2-related-group-title {
  font-size: 10px;
  font-weight: 700;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 64px 40px 0;
  margin-bottom: 64px;
}
.ov2-related-group-title::before,
.ov2-related-group-title::after {
  content: '';
  flex-shrink: 0;
  width: 1.25px;
  height: 40px;
  background: currentColor;
}
.ov2-related-group-title-text {
  flex: 1;
  text-align: center;
}
:root[data-theme="blunt-dark"] .ov2-related-group-title {
  color: var(--gold);
}
.ov2-related-title {
  font-size: 9px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.ov2-related-list {
  display: flex;
  flex-direction: column;
  gap: 8px; /* gap compacto das listas de cards (janela direita / OV2) */
}
.ov2-related-card.transit-lcard {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-height: var(--tlc-cover-h, 80px);
  padding: 0 20px;
  padding-right: calc(var(--tlc-cover-h, 80px) / 2); /* reserva 40px para o state-stack */
}
.ov2-related-reason {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid);
  opacity: 0.65;
  pointer-events: none;
}
/* Ícones de estado no relacionado fechado — pilha vertical à direita (idêntico ao modelo) */
.ov2-related-card .transit-lcard__state-stack {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: calc(var(--tlc-cover-h, 80px) / 2); /* 40px — igual ao modelo */
  border-left: 1px solid var(--tlc-card-border, var(--border));
}
.ov2-related-card .transit-lcard__state-stack > * {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tlc-text-on-solid);
  pointer-events: none;
}
.ov2-related-card .transit-lcard__state-stack .transit-lcard__flag svg,
.ov2-related-card .transit-lcard__state-stack .transit-lcard__seen-check svg {
  width: 16px;
  height: 16px;
  display: block;
}
/* Sinastria: orbe no canto direito, ocupando a coluna do state-stack (40px) */
.ov2f-related-lcard { padding-right: calc(var(--tlc-cover-h, 80px) / 2); }
.ov2f-related-lcard-orb {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--tlc-cover-h, 80px) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--tlc-card-border, var(--border));
  font-size: 11px;
  font-weight: 600;
  color: var(--tlc-text-on-solid);
  pointer-events: none;
}

/* Relacionado expandido: header e timeline na altura canônica (80px, global) */
.ov2-related .transit-lcard--expanded .transit-lcard__exp-header .transit-lcard__title { padding: 0 16px; }
.ov2-related .transit-lcard__exp-icon-col {
  flex-direction: column;
  width: 48px;
  flex-basis: 48px;
  border-left: 1px solid var(--tlc-card-border, var(--border)); /* separador do título — igual ao mobile base */
}
.ov2-related .transit-lcard__exp-icon-col .transit-lcard__exp-act {
  flex: 1;
  width: 100%;
  min-width: 0;
  border-left: none;
  border-top: 1px solid var(--tlc-card-border, var(--border));
  box-sizing: border-box;
}
.ov2-related .transit-lcard__exp-icon-col .transit-lcard__exp-act:first-child {
  border-top: none;
}
.ov2-related .transit-lcard__open-btn { flex: 0 0 64px; padding: 0 8px; }
.ov2-related .transit-lcard__tl-peak-row { padding: 0 20px; }

/* Estado salvo/ticado no card fechado — pilha vertical rente à borda direita.
   Posicionado absolute (fora do grid) para que a borda divisória e os ícones
   encostem na borda direita do card, sem o padding de 20px atrapalhar. */
.transit-lcard:not(.transit-lcard--expanded):not(.ov2-related-card) .transit-lcard__state-stack {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(var(--tlc-cover-h) / 2);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--tlc-card-border, var(--border));
}
.transit-lcard__state-stack > * {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tlc-text-on-solid);
}
.transit-lcard__state-stack > * + * {
  border-top: 1px solid var(--tlc-card-border, var(--border));
}
.transit-lcard__state-stack .transit-lcard__flag svg,
.transit-lcard__state-stack .transit-lcard__seen-check svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Título do card fechado */
.transit-lcard:not(.transit-lcard--expanded):not(.ov2-related-card) > .transit-lcard__title {
  grid-column: 1;
  grid-row: 1;
}
.transit-lcard > .transit-lcard__title {
  margin: 0;
  min-width: 0;
  text-align: left;
  font-size: 10px;
  font-weight: var(--fw-bold);
  font-stretch: 125%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid);
  line-height: 1.35;
  pointer-events: none;
}

/* ── Card expandido ──
   3 zonas: [header claro] [faixa colorida] [rodapé claro] */
/* Expandido: sem borda própria — header e rodapé carregam as bordas;
   a banda da timeline fica full-bleed (sem borda lateral). */
.transit-lcard--expanded {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: auto;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: default;
  overflow: visible;
  container-type: normal;
}
.transit-lcard--expanded:hover { filter: none; }

/* Zona 1 — Header claro (mesma altura do card colapsado; clique = colapsar) */
.transit-lcard__exp-header {
  display: flex;
  align-items: stretch;
  min-height: 80px;
  box-sizing: border-box;
  cursor: pointer;
  background: var(--tlc-card-surface, var(--bg));
  border: 1px solid var(--tlc-card-border, var(--border));
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  transition: background 0.12s;
}
/* Visto — recolore header (título), células visto/abrir e rodapé; salvar fica de fora */
.transit-lcard--expanded.transit-lcard--seen .transit-lcard__exp-header,
.transit-lcard--expanded.transit-lcard--seen .transit-lcard__tl-peak-row {
  background: var(--tl-bar-base, var(--tlc-neutro-light));
}

/* Título do expandido — mesmo estilo do card colapsado */
.transit-lcard__exp-header .transit-lcard__title {
  flex: 1 1 auto;
  margin: 0;
  padding: 0 20px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  font-stretch: 125%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid);
  line-height: 1.35;
  display: flex;
  align-items: center;
}

/* Coluna de ícones do header expandido: salvar+seen horizontal no desktop,
   vertical no mobile (cada um metade da largura do ABRIR).
   A borda vem dos botoes act e open-btn; icon-col só ganha borda no mobile
   (quando os botoes perdem a propria border-left vertical). */
.transit-lcard__exp-icon-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
} 

/* Células de ação: desktop lado a lado (80px cada), mobile empilhadas na coluna */
.transit-lcard__exp-act {
  flex: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-left: 1px solid var(--tlc-card-border, var(--border));
  background: transparent;
  color: var(--tlc-text-on-solid, var(--text));
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.transit-lcard__exp-act svg {
  width: 16px;
  height: 16px;
  display: block;
}
/* Salvar: fundo próprio — não acompanha o recolor do "visto" */
.transit-lcard__exp-act--save {
  background: var(--tlc-card-surface, var(--bg));
}
.transit-lcard__exp-act--save[aria-pressed="true"] {
  background: var(--tl-bar-base, var(--tlc-neutro-light));
}
.transit-lcard__exp-act:hover {
  background: color-mix(in srgb, var(--tlc-card-surface, var(--bg)) 88%, var(--ink, #1A1814));
}

/* Botão LER (ABRIR) — desktop 80px, separado da coluna de ícones */
.transit-lcard__open-btn {
  flex: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-left: 1px solid var(--tlc-card-border, var(--border));
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 18px;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.transit-lcard__open-btn:hover {
  background: var(--surface);
}

/* LER quando o trânsito já foi lido: "visto" é automático (marcado ao abrir a
   leitura), então o botão divide-se em dois — LER em cima, tique embaixo.
   Mantém a mesma largura/flex-basis do LER em todos os contextos. */
.transit-lcard__open-btn--seen {
  flex-direction: column;
}
/* (0,2,0) — vence a regra mobile padding:0 10px que vem depois */
.transit-lcard__open-btn.transit-lcard__open-btn--seen {
  padding: 0;
}
.transit-lcard__open-btn--seen .transit-lcard__open-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.transit-lcard__open-btn--seen .transit-lcard__open-seen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-top: 1px solid var(--tlc-card-border, var(--border));
  color: var(--tlc-text-on-solid, var(--text));
}
.transit-lcard__open-seen svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Mobile: save+seen vertical stack, cada um metade da altura do header.
   Largura da coluna = metade do botão LER (36px dos 72px). */
@media (max-width: 899px) {
  .transit-lcard__exp-icon-col {
    flex-direction: column;
    width: 36px;
    flex-basis: 36px;
    min-width: 0;
    border-left: 1px solid var(--tlc-card-border, var(--border));
  }
  .transit-lcard__exp-icon-col .transit-lcard__exp-act {
    flex: 1;
    width: 100%;
    min-width: 0;
    border-left: none;   /* icon-col tem border-left */
    border-top: 1px solid var(--tlc-card-border, var(--border));
    box-sizing: border-box;
  }
  .transit-lcard__exp-icon-col .transit-lcard__exp-act:first-child {
    border-top: none;
  }
  /* Só salvar na coluna: ocupa a altura toda e fica centralizado (ganhou o espaço do visto). */
  .transit-lcard__exp-icon-col .transit-lcard__exp-act:only-child {
    flex: 1;
  }
  .transit-lcard__open-btn {
    flex: 0 0 72px;
    padding: 0 10px;
  }
}

/* Zona 2 — Timeline no padrão OV2 (barra 80px, bordas ink, labels centrados) */
.transit-lcard__tl {
  --lcard-row-h: 80px;
  /* padding vertical do rodapé em torno da faixa do PICO (32px) */
  --lcard-foot-pad: calc((var(--lcard-row-h, 80px) - 32px) / 2);
  position: relative;
}

/* Faixa INÍCIO | FIM — base até hoje, tom depois (mesmo eixo do card) */
.transit-lcard__tl-bar {
  /* padding lateral dos labels INÍCIO/FIM — também limita o curso da agulha */
  --tl-bar-pad: 20px;
  position: relative;
  height: var(--lcard-row-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 var(--tl-bar-pad);
  border-top: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-bottom: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  background: linear-gradient(
    to right,
    transparent var(--tlc-today-pct, 50%),
    var(--tl-bar-tone, var(--tlc-neutro-solid)) var(--tlc-today-pct, 50%)
  );
  overflow: visible;
}

/* Labels INÍCIO e FIM (tipografia OV2) */
.transit-lcard__tl-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.transit-lcard__tl-edge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.transit-lcard__tl-edge--end {
  align-items: flex-end;
  text-align: right;
}
.transit-lcard__tl-key {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 300;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid, #1a1814);
  line-height: 1.2;
}
.transit-lcard__tl-date {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid, #1a1814);
  line-height: 1.2;
  white-space: nowrap;
}

/* Agulha do pico (OV2): bolinha a 1/6 do rodapé da barra; haste atravessa a
   borda da banda e desce até a faixa do PICO no rodapé */
.transit-lcard__tl-needle {
  position: absolute;
  /* curso limitado às extremidades das palavras INÍCIO/FIM (padding da barra) */
  left: clamp(var(--tl-bar-pad, 20px), var(--tlc-peak-pct, 50%), calc(100% - var(--tl-bar-pad, 20px)));
  top: calc(var(--lcard-row-h) - var(--lcard-row-h) / 6);
  height: calc(var(--lcard-row-h) / 6 + var(--lcard-foot-pad, 24px));
  width: 1.25px;
  background: var(--tlc-text-on-solid, #1a1814);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}
.transit-lcard__tl-needle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tlc-text-on-solid, #1a1814);
}

/* Zona 3 — Rodapé: caixa clara com bordas + faixa interna do PICO
   (fundo base, borda em cima e embaixo); mesma altura das outras linhas */
.transit-lcard__tl-peak-row {
  width: 100%;
  height: var(--lcard-row-h, 80px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 20px = mesmo padding lateral da barra (--tl-bar-pad): a faixa central vai
     até a mesma margem de INÍCIO/FIM, então a agulha do pico (curso [20px,
     100%-20px]) fica sempre DENTRO da faixa. Antes era 40px → agulha ficava fora. */
  padding: 0 20px;
  border: 1px solid var(--tlc-card-border, var(--border));
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--tlc-card-surface, var(--bg));
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.transit-lcard__tl-peak-row:hover { filter: brightness(0.97); }
.transit-lcard__tl-peak-strip {
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-top: 1px solid var(--tlc-card-border, var(--border));
  border-bottom: 1px solid var(--tlc-card-border, var(--border));
  background: var(--tl-bar-base, var(--tlc-neutro-light));
  color: var(--tlc-text-on-solid, #1a1814);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 300;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.transit-lcard__tl-peak-strip strong {
  font-size: 12px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 4px;
}

/* ── Toolbar da home de trânsitos (identidade: Archivo Expanded Bold 12pt) ── */
#transit-desc-content > #transit-report-top:not([hidden]) .transit-report-toolbar {
  background: transparent;
  margin-top: 0;
}
#transit-desc-content > #transit-report-top:not([hidden]) .transit-report-row--consolidated {
  background: none;
  padding: 0;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════
   OVERLAY — Navegação (desktop: topo; mobile: acima do FAB)
══════════════════════════════════════════ */

.overlay-footer-nav {
  position: fixed;
  /* Fechar embaixo: 12px acima do FAB de temas (decisão 2026-06-11).
     FAB: 52px centrado no footer com translateY(-10px) →
     topo do FAB = footer-h/2 + 36px; + gap 12px = footer-h/2 + 48px. */
  top: auto;
  bottom: calc(var(--footer-h) / 2 + 48px);
  left: 0;
  right: 0;
  z-index: calc(var(--z-overlay) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--grid-master-pad-x);
  background: none;
  pointer-events: none;
}
.overlay-footer-nav > * { pointer-events: auto; }

.overlay-close-fab {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 14px var(--gold-glow);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.15s;
}
.overlay-close-fab:hover,
.overlay-close-fab:active {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--gold-glow);
}

/* Overlay: grid mestre no desktop. O scroll é o viewport inteiro; o padding
   vertical = altura do header/footer, para o conteúdo em repouso ficar na faixa
   visível e deslizar sob as barras translúcidas ao rolar. */
.aspect-overlay-content {
  padding-top: var(--header-h) !important;
  padding-bottom: var(--footer-h) !important;
}
@media (min-width: 900px) {
  .aspect-overlay-content {
    display: grid;
    grid-template-columns: var(--grid-master-template);
    gap: var(--grid-master-gap);
    align-items: start;
    padding-left: var(--grid-master-pad-x) !important;
    padding-right: var(--grid-master-pad-x) !important;
  }
}

/* ══════════════════════════════════════════
   OVERLAY — Layout Editorial Novo
══════════════════════════════════════════ */

/* ── Cabeçalho editorial do overlay (mobile) ── */
.te-overlay-header {
  padding: 20px var(--grid-master-pad-x) 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.te-overlay-glyph {
  font-family: 'Orby Text', 'Orby Astrology', serif;
  font-size: 28px;
  line-height: 1.2;
  color: var(--text);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.te-overlay-glyph-sign {
  font-size: 14px;
  opacity: 0.65;
}
.te-overlay-header-text {
  flex: 1 1 auto;
  min-width: 0;
}
.te-overlay-date {
  font-size: var(--fs-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.te-overlay-title {
  margin: 0 0 3px;
  font-size: 22px;
  font-weight: 500;
  font-stretch: 125%;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.te-overlay-position {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* ── Timeline no overlay (reutiliza .tl-card--overlay-duration) ── */
.te-overlay-timeline {
  padding: 0 var(--grid-master-pad-x);
  margin-bottom: 40px;
}

/* ── Textos interpretativos ── */
.te-overlay-lead {
  padding: 0 var(--grid-master-pad-x);
  margin-bottom: 40px;
}
.te-overlay-lead p,
.overlay-lead-para {
  font-size: 15px;
  font-weight: 300;
  font-stretch: 125%;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}
/* Anula a caixa branca do overlay antigo dentro do contexto editorial */
.te-overlay-lead .overlay-lead-para {
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* ── Gráfico hero ── */
.te-overlay-chart {
  padding: 0 var(--grid-master-pad-x);
  margin-bottom: 56px;
}
.te-overlay-chart .overlay-chart-wrap {
  max-width: none;
  margin: 0;
}

/* ── Textos complementares ── */
.te-overlay-secondary {
  padding: 0 var(--grid-master-pad-x);
  margin-bottom: 40px;
}
.te-overlay-secondary .daily-horo-col-box {
  border: none;
  background: none;
  padding: 0;
  margin-bottom: 24px;
  box-shadow: none;
}
.te-overlay-secondary .daily-horo-col-box p {
  font-size: 14px;
  font-weight: 300;
  font-stretch: 125%;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0;
}
/* 2º parágrafo — barra editorial esquerda (citação) */
.te-overlay-secondary .daily-horo-col-box:first-child {
  padding-left: 14px;
  border-left: 2px solid var(--border-bright);
}

/* ── Barra horizontal resumida ── */
.te-overlay-summary-bar {
  margin: 0 0 0;
  height: 20px;
  background: var(--overlay-sep);
  position: relative;
}
.te-overlay-summary-bar.harmonico { background: var(--tlc-harmonico-solid); opacity: 0.35; }
.te-overlay-summary-bar.tensao    { background: var(--tlc-tensao-solid); opacity: 0.35; }
.te-overlay-summary-bar.neutro    { background: var(--tlc-neutro-solid); opacity: 0.35; }


/* ══════════════════════════════════════════
   POSIÇÃO & ATIVAÇÃO — Nova seção técnica
══════════════════════════════════════════ */

.pa-section {
  font-family: var(--font);
  font-stretch: 62.5%;
  padding: 20px var(--grid-master-pad-x);
  background: var(--bg);
  color: var(--text);
  margin-top: 0;
  position: relative;
}
.pa-section-title {
  font-size: 9px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Dois cards iniciais lado a lado */
.pa-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}
.pa-card {
  background: var(--bg);
  padding: 10px 12px;
}
.pa-card-label {
  display: block;
  font-size: 8px;
  font-weight: 400;
  font-stretch: 62.5%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.pa-card-value {
  display: block;
  font-size: 11px;
  font-weight: 400;
  font-stretch: 62.5%;
  color: var(--text);
  line-height: 1.3;
}

/* Bloco Ativação com mini-cartografia */
.pa-activation {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.pa-activation-label {
  font-size: 8px;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border);
}

/* Canvas da mini-cartografia — covers activation block */
.pa-mini-map {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
  pointer-events: none;
}

/* Pills de signo/casa/elemento/qualidade */
.pa-pills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  position: relative;
  z-index: 1;
}
.pa-pill {
  background: var(--bg);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pa-pill--with-icon {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.pa-pill-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pa-pill-icon--harmonico { background: var(--tlc-harmonico-solid); }
.pa-pill-icon--tensao    { background: var(--tlc-tensao-solid); }
.pa-pill-icon--neutro    { background: var(--tlc-neutro-solid); }
.pa-pill-texts {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pa-pill-label {
  font-size: 8px;
  font-weight: 400;
  font-stretch: 62.5%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pa-pill-value {
  font-size: 11px;
  font-weight: 400;
  font-stretch: 62.5%;
  color: var(--text);
  line-height: 1.3;
}

/* Linha/tag de tema da casa */
.pa-theme-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 400;
  font-stretch: 62.5%;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 4px 10px;
  margin-bottom: 12px;
}

/* Tabela compacta de aspectos */
.pa-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.pa-table-row {
  border-top: 1px solid var(--border);
}
.pa-table-row:first-child { border-top: none; }
.pa-table-cell {
  padding: 7px 4px;
  font-size: 10px;
  font-weight: 400;
  font-stretch: 62.5%;
  color: var(--text);
  vertical-align: middle;
  line-height: 1.2;
}
.pa-table-cell--aspect {
  font-weight: 600;
  color: var(--text);
  min-width: 72px;
}
.pa-table-cell--planet {
  flex: 1;
  padding-left: 8px;
}
.pa-table-cell--indicator {
  width: 14px;
  padding: 0 6px;
}
.pa-table-indicator-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}
.pa-table-indicator-dot--harmonico { background: var(--tlc-harmonico-solid); }
.pa-table-indicator-dot--tensao    { background: var(--tlc-tensao-solid); }
.pa-table-indicator-dot--neutro    { background: var(--tlc-neutro-solid); opacity: 0.7; }
.pa-table-cell--orb {
  text-align: right;
  color: var(--text-dim);
  white-space: nowrap;
  padding-right: 0;
}

/* ══════════════════════════════════════════
   OVERLAY — layout responsivo novo
   Mobile: coluna única
   Desktop ≥ 900px: bipartido
══════════════════════════════════════════ */

/* Wrapper do overlay editorial */
.te-overlay-wrap {
  width: 100%;
}

@media (min-width: 900px) {
  .te-overlay-wrap {
    display: grid;
    grid-template-columns: var(--grid-master-template);
    gap: var(--grid-master-gap);
    align-items: start;
    padding: 0 var(--grid-master-pad-x);
  }
  .te-overlay-col-left {
    grid-column: 2 / 9;
    padding-right: 16px;
    border-right: 1px solid var(--overlay-sep);
  }
  .te-overlay-col-right {
    grid-column: 9 / 13;
    position: sticky;
    top: var(--header-h);
    max-height: calc(var(--app-height) - var(--header-h) - var(--footer-total-h) - 64px);
    overflow-y: auto;
  }
  /* Pa section no desktop: integrada à coluna da direita */
  .te-overlay-col-right .pa-section {
    background: var(--bg);
    min-height: 100%;
  }
  /* Título do trânsito desktop: maior */
  .te-overlay-col-left .te-overlay-title {
    font-size: 32px;
  }
  /* Gráfico hero: ligeiramente maior no desktop */
  .te-overlay-col-left .te-overlay-chart .overlay-chart-wrap {
    max-width: 480px;
  }
  /* Espaçamentos entre blocos no desktop */
  .te-overlay-timeline  { margin-bottom: 32px; }
  .te-overlay-lead      { margin-bottom: 128px; }
  .te-overlay-chart     { margin-bottom: 64px; }
  .te-overlay-secondary { margin-bottom: 48px; }
}


/* ══════════════════════════════════════════
   OV2 — Overlay editorial v2 (mai 2026)
   Novo layout do zero, prefixo ov2-
   Mobile: coluna única
   Desktop ≥ 900px: grid mestre 12 colunas
══════════════════════════════════════════ */

/* ── Shell ── */
.ov2-wrap { width: 100%; }
@media (min-width: 900px) {
  .ov2-wrap { display: contents; }
}

/* Spacers verticais — substituem padding-top/bottom estrutural */
.ov2-spacer {
  width: 100%;
  flex-shrink: 0;
  pointer-events: none;
  grid-column: 1 / -1;
}
.ov2-spacer--header-top,
.ov2-spacer--header-bottom { height: 96px; }
.ov2-spacer--tl-gap { height: 40px; }
.ov2-spacer--hero-top,
.ov2-spacer--hero-bottom { height: 40px; }
/* Casa vazia: sem roda no meio — respiro entre os parágrafos 1 e 2, igual ao
   gap entre os demais parágrafos (--secondary-gap). */
.ov2-spacer--hero-void { height: 64px; }
.ov2-spacer--128 { height: 128px; }
/* Spacers do diagrama topocêntrico — centram o diagrama no viewport útil
   (entre header e footer), com a mesma distância em cima e embaixo. */
.ov2-spacer--tc-center {
  height: max(32px, calc((100vh - var(--header-h) - var(--footer-h) - min(560px, 94vw)) / 2));
  height: max(32px, calc((100dvh - var(--header-h) - var(--footer-h) - min(560px, 94vw)) / 2));
}
.ov2-spacer--secondary-gap { height: 64px; }
.ov2-spacer--pa-top { height: 0; }

/* Mobile: grid mestre 12 col. em cada coluna do overlay */
.ov2-col-left,
.ov2-col-right {
  --ov2-one-col: calc(var(--grid-master-viewport-content) / 12);
  --ov2-text-inset: calc(var(--ov2-one-col) + var(--grid-master-gap));
  display: grid;
  grid-template-columns: var(--grid-master-template);
  column-gap: var(--grid-master-gap);
  padding-left: var(--grid-master-pad-x);
  padding-right: var(--grid-master-pad-x);
  box-sizing: border-box;
}

/* ── Header: fora das colunas, ocupa a largura total do OV2 ── */
.ov2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 calc(var(--grid-master-viewport-content) / 12);
  width: 100%;
  box-sizing: border-box;
  position: relative;          /* âncora da mancha */
}

/* ── Mancha elíptica atrás do título ──────────────────────────────────
   Elipse com degradê até transparente, centrada no header e ATRÁS de tudo.
   1.5× a largura do TÍTULO por 1.5× a altura do HEADER — duas referências
   diferentes, então as medidas vêm de `_ov2SyncHeaderBlob` como variáveis.

   `radial-gradient`, não Canvas 2D: o gradiente é resolvido pelo compositor na
   resolução do dispositivo, em qualquer zoom, e não precisa de DPR nem de
   redesenho. Canvas aqui seria raster — pior qualidade, mais código.

   A parada em 55% com a cor cheia e o fade até 100% dão a borda difusa; parar
   antes deixaria um anel visível. */
.ov2-header-blob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ov2-blob-w, 0px);
  height: var(--ov2-blob-h, 0px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  /* SEM `opacity` no elemento. Ela havia, a 0.5/0.65, e multiplicava tudo —
     inclusive o miolo. O resultado é que a mancha nunca chegava a ser ouro
     solar em ponto nenhum: o mais denso dela era ouro a 50%. Quem faz o
     desvanecimento é só o gradiente, então o centro é a cor exata e a borda
     abre até transparente. */
  background: radial-gradient(
    ellipse at center,
    var(--ov2-blob-color) 0%,
    color-mix(in srgb, var(--ov2-blob-color) 55%, transparent) 45%,
    transparent 72%
  );
}
/* Ouro solar no Celeste; preto no Observatório. */
:root { --ov2-blob-color: #F4C430; }
:root[data-theme="blunt-dark"] { --ov2-blob-color: #000; }

/* O conteúdo sobe acima da mancha — sem isto o degradê cobriria o texto. */
.ov2-header-glyph,
.ov2-header-body { position: relative; z-index: 1; }

.ov2-header-glyph {
  --ov2-glyph-size: 24px;
  --ov2-glyph-box: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-dim);
}
/* Vários glifos de astro no header (leitura de casa, céu, multi-astro): mantém
   tudo em UMA linha, mesmo com 4+ glifos (sem quebra). */
.ov2-header-glyph--multi {
  flex-wrap: nowrap;
  gap: 8px;
}
.ov2-header-planet,
.ov2-header-sign {
  display: grid;
  place-items: center;
  width: var(--ov2-glyph-box);
  height: var(--ov2-glyph-box);
}
/* Número da casa no header do OV2 de leitura de casa — chip numérico
   (mesma família/peso do .tcg-house-num dos cards). */
.ov2-header-house-num {
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-stretch: 125%;
  font-size: 18px;
  color: var(--ink);
  line-height: 1;
}
:root[data-theme="blunt-dark"] .ov2-header-house-num { color: var(--text, #EDE0BD); }
.ov2-svg-mask {
  display: block;
  width: var(--ov2-glyph-box);
  height: var(--ov2-glyph-box);
  background-color: currentColor;
  -webkit-mask-image: var(--ov2-svg);
  mask-image: var(--ov2-svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.ov2-header-body {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
/* Estado do aspecto + duração (ex-data do dia — decisão 2026-06-11) */
.ov2-header-meta {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 300;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.ov2-header-title {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 500;
  font-stretch: 125%;
  line-height: 1.1;
  color: var(--text);
  /* `fit-content` + margem automática: a caixa passa a abraçar o TEXTO, que é
     de onde sai a largura da mancha. Como bloco de largura total ela mediria o
     header inteiro. A margem lateral automática mantém o centro. */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 4px;
}
.ov2-header-pos {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 300;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Timeline: barra 80px + gap 80/3 + pico 80/3 (cores transit-lcard) ── */
.ov2-tl {
  --ov2-tl-unit: 80px;
  --ov2-tl-gap: calc(var(--ov2-tl-unit) / 3);
  --ov2-tl-bar-h: var(--ov2-tl-unit);
  --ov2-tl-peak-h: calc(var(--ov2-tl-unit) / 3);
  /* bolinha 1/6 acima do rodapé da barra; haste até bar+gap — eixo Y (não alterar ao ajustar X) */
  --ov2-tl-dot-top: calc(var(--ov2-tl-bar-h) - var(--ov2-tl-bar-h) / 6);
  --ov2-tl-needle-h: calc(var(--ov2-tl-bar-h) / 6 + var(--ov2-tl-gap));
  --ov2-tl-needle-color: var(--tlc-text-on-solid, #1a1814);
  --tl-bar-tone: var(--tlc-neutro-solid);
  grid-column: 1 / -1;
  margin-inline: var(--half-col);
  width: calc(100% - 2 * var(--half-col));
  justify-self: stretch;
  box-sizing: border-box;
  padding: 0;
}
.ov2-tl.ov2-tl--harmonico {
  --tl-bar-tone: var(--tlc-harmonico-solid);
}
.ov2-tl.ov2-tl--tensao {
  --tl-bar-tone: var(--tlc-tensao-solid);
}
.ov2-tl.ov2-tl--neutro {
  --tl-bar-tone: var(--tlc-neutro-solid);
}
/* Multi-astro (leitura de casa): sem tensão/harmonia — a barra expressa o tempo.
   Futuro em creme (Paper), passado em taupe escurecido para o creme contrastar. */
.ov2-tl.ov2-tl--multiastro {
  --tl-bar-tone: var(--tlc-multiastro-solid);
  --tl-bar-base: var(--tlc-multiastro-base);
}
.ov2-tl-stage {
  position: relative;
  width: 100%;
  height: calc(var(--ov2-tl-peak-h) + var(--ov2-tl-gap) + var(--ov2-tl-bar-h) + var(--ov2-tl-gap) + var(--ov2-tl-peak-h));
  display: flex;
  flex-direction: column;
  gap: var(--ov2-tl-gap);
}
.ov2-tl-stage--top-only {
  height: var(--ov2-tl-peak-h);
}
.ov2-tl-top-band {
  flex: 0 0 var(--ov2-tl-peak-h);
  height: var(--ov2-tl-peak-h);
  width: 100%;
  box-sizing: border-box;
  border-top: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-bottom: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-left: none;
  border-right: none;
  background: var(--tl-bar-base, var(--tlc-neutro-light));
  display: flex;
  align-items: stretch;
}
.ov2-tl-tb-origem,
.ov2-tl-tb-estado {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 300;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid, #1a1814);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.ov2-tl-tb-estado { justify-content: flex-end; }
.ov2-tl-tb-save {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-left: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-right: 1.25px solid var(--tlc-text-on-solid, #1a1814);
}
.ov2-tl-tb-save-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--tlc-text-on-solid, #1a1814);
  display: flex;
  align-items: center;
  line-height: 1;
}
.ov2-tl-tb-save-btn:hover { opacity: 0.6; }
.ov2-tl-tb-save-btn--saved { color: var(--gold, #1A36C7); }
.ov2-tl-tb-save-btn--saved svg path { fill: currentColor; stroke: currentColor; }
:root[data-theme="blunt-light"] .ov2-tl-tb-save-btn--saved { color: var(--ink, #1A1814); }
.ov2-tl-bar {
  position: relative;
  flex: 0 0 var(--ov2-tl-bar-h);
  height: var(--ov2-tl-bar-h);
  box-sizing: border-box;
  border-top: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-bottom: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: linear-gradient(
    to right,
    var(--tl-bar-base, var(--tlc-neutro-light)) var(--tlc-today-pct, 50%),
    var(--tl-bar-tone, var(--tlc-neutro-solid)) var(--tlc-today-pct, 50%)
  );
  display: flex;
  align-items: center;
  padding: 0 20px;
  overflow: visible;
}
.ov2-tl-bar-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: visible;
}
.ov2-tl-bar-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.ov2-tl-edge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ov2-tl-edge--end {
  align-items: flex-end;
  text-align: right;
}
/* Rótulo ASPECTO FIXO — centrado entre INÍCIO/FIM, bold + expanded */
.ov2-tl-key.ov2-tl-fixed-label {
  font-weight: 700;
  font-stretch: 125%;
  align-self: center;
}
.ov2-tl-key {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 300;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid, #1a1814);
  line-height: 1.2;
}
.ov2-tl-date {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid, #1a1814);
  line-height: 1.2;
  white-space: nowrap;
}
.ov2-tl-needle {
  position: absolute;
  left: var(--tlc-peak-pct, 50%);
  top: var(--ov2-tl-dot-top);
  height: var(--ov2-tl-needle-h);
  width: 1.25px;
  background: var(--ov2-tl-needle-color, #1a1814);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}
.ov2-tl-needle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ov2-tl-needle-color, #1a1814);
}
.ov2-tl-peak-band {
  flex: 0 0 var(--ov2-tl-peak-h);
  height: var(--ov2-tl-peak-h);
  width: 100%;
  box-sizing: border-box;
  border-top: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-bottom: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: var(--tl-bar-base, var(--tlc-neutro-light));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 20px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 300;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid, #1a1814);
}
.ov2-tl-peak-band strong {
  font-size: 12px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tlc-text-on-solid, #1a1814);
  margin-left: 4px;
}

/* Parágrafos: lead/secondary expõem filhos ao grid da coluna */
.ov2-lead,
.ov2-secondary {
  display: contents;
}

/* Tipografia dos parágrafos */
.ov2-lead p,
.ov2-lead .overlay-lead-para,
.ov2-lead > .aspect-overlay-loading,
.ov2-secondary .daily-horo-col-box p {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  font-stretch: 100%;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}

/* ¶1 (lead) — linha esquerda */
.ov2-lead p,
.ov2-lead .overlay-lead-para,
.ov2-lead > .aspect-overlay-loading {
  border: none;
  border-left: 1.25px solid var(--text-dim);
  background: transparent;
  padding: 0 0 0 var(--ov2-text-inset);
  box-sizing: border-box;
  grid-column: 2 / 12;
  align-self: start;
  text-align: left;
}
.ov2-lead .overlay-lead-para {
  margin-bottom: 0;
}
.ov2-lead > .aspect-overlay-loading {
  padding-top: 0;
  font-size: 10px;
  grid-column: 2 / 12;
}

/* Blocos secundários — container */
.ov2-secondary .daily-horo-col-box {
  grid-column: 2 / 12;
  align-self: start;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  box-sizing: border-box;
}

/* Posições reais: spacers intercalados → ¶2=nth(1) ¶3=nth(3) ¶4=nth(5) */

/* ¶2 — linha direita, texto à esquerda */
.ov2-secondary .daily-horo-col-box:nth-child(1) p {
  border: none;
  border-right: 1.25px solid var(--text-dim);
  padding: 0 var(--ov2-text-inset) 0 0;
  text-align: left;
}

/* ¶3 — linha esquerda */
.ov2-secondary .daily-horo-col-box:nth-child(3) p {
  border: none;
  border-left: 1.25px solid var(--text-dim);
  padding: 0 0 0 var(--ov2-text-inset);
  text-align: left;
}

/* ¶4 — sem linha, texto justificado com hifenização automática por idioma */
.ov2-secondary .daily-horo-col-box:nth-child(5) p {
  border: none;
  padding: 0;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ── Hero: C3–C10 ── */
.ov2-hero {
  grid-column: 3 / 11;
  padding: 0;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
.ov2-hero-disc {
  width: min(100%, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #C49A3C;
  padding: 32px;
  box-sizing: border-box;
}
.ov2-hero-disc-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #a8d9db;
  border: 10px solid #1a1814;
  box-sizing: border-box;
}

/* ── Barra de fecho: meio C1 → meio C12 (como timeline) ── */
.ov2-foot {
  --tl-bar-tone: var(--tlc-neutro-solid);
  grid-column: 1 / -1;
  margin: 32px var(--half-col) 0;
  padding: 0;
  width: calc(100% - 2 * var(--half-col));
  justify-self: stretch;
  box-sizing: border-box;
}
.ov2-foot.ov2-foot--harmonico {
  --tl-bar-tone: var(--tlc-harmonico-solid);
}
.ov2-foot.ov2-foot--tensao {
  --tl-bar-tone: var(--tlc-tensao-solid);
}
.ov2-foot.ov2-foot--neutro {
  --tl-bar-tone: var(--tlc-neutro-solid);
}
.ov2-foot.ov2-foot--multiastro {
  --tl-bar-tone: var(--tlc-multiastro-solid);
  --tl-bar-base: var(--tlc-multiastro-base);
}
.ov2-foot-bar {
  height: 20px; /* metade dos 40px originais (decisão 2026-06-11) */
  width: 100%;
  box-sizing: border-box;
  border-top: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-bottom: 1.25px solid var(--tlc-text-on-solid, #1a1814);
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: linear-gradient(
    to right,
    var(--tl-bar-base, var(--tlc-neutro-light)) var(--tlc-today-pct, 50%),
    var(--tl-bar-tone, var(--tlc-neutro-solid)) var(--tlc-today-pct, 50%)
  );
}

/* ov2-foot: desktop-only em col-left, mobile-only em col-right */
.ov2-foot--mob { display: none; }
@media (max-width: 899px) {
  .ov2-foot--desk { display: none; }
  .ov2-foot--mob  { display: block; }
}

/* ══════════════════════════════════════════
   OV2 — Posição & Ativação
══════════════════════════════════════════ */
.ov2-pa-wrap {
  grid-column: 1 / -1;
  margin-inline: var(--half-col);
  width: calc(100% - 2 * var(--half-col));
  justify-self: stretch;
  position: relative;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
}
.ov2-pa-wrap > *:not(.ov2-pa-minimap) {
  position: relative;
  z-index: 1;
}
.ov2-pa-pad {
  width: 100%;
  flex-shrink: 0;
  background: transparent;
  pointer-events: none;
}
.ov2-pa-pad--top { height: 0; }
.ov2-pa-pad--bottom { height: 32px; }
.ov2-pa {
  font-family: var(--font);
  font-stretch: 100%;
  box-sizing: border-box;
  padding: 20px 0;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  background: transparent;
  color: var(--text);
}
.ov2-pa-title {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  margin-bottom: 14px;
}
.ov2-pa-title-word {
  font-size: 10px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.ov2-pa-body {
  display: block;
}
.ov2-pa-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}
.ov2-pa-card {
  background: transparent;
  padding: 10px 12px;
  border-right: 1px solid var(--border);
}
.ov2-pa-card:last-child {
  border-right: none;
}
.ov2-pa-card-label {
  display: block;
  font-size: 8px;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.ov2-pa-card-value {
  display: block;
  font-size: 11px;
  font-weight: 400;
  font-stretch: 100%;
  color: var(--text);
  line-height: 1.3;
}
.ov2-pa-activation {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ov2-pa-activation-label {
  font-size: 8px;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 10px 12px 0;
  position: relative;
  z-index: 1;
}
.ov2-pa-minimap {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 1;
  z-index: 0;
}
.ov2-pa-pills-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: transparent;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.ov2-pa-pill {
  background: transparent;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ov2-pa-pill:nth-child(2n) {
  border-right: none;
}
.ov2-pa-pill:nth-child(n + 3) {
  border-bottom: none;
}
.ov2-pa-pill-label {
  font-size: 8px;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ov2-pa-pill-value {
  font-size: 11px;
  font-weight: 400;
  font-stretch: 100%;
  color: var(--text);
  line-height: 1.2;
}
.ov2-pa-theme {
  font-size: 10px;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 12px;
}
.ov2-pa-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.ov2-pa-row { border-bottom: 1px solid var(--border); }
.ov2-pa-row:last-child { border-bottom: none; }
.ov2-pa-cell {
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 400;
  font-stretch: 100%;
  color: var(--text);
  vertical-align: middle;
}
.ov2-pa-cell--glyph { width: 22px; padding-right: 0; text-align: center; }
.ov2-pa-cell--orb { text-align: right; color: var(--text-dim); white-space: nowrap; }
.ov2-pa-aspect-glyph {
  display: inline-block;
  font-family: 'Orby Astrology', serif;
  font-size: 12px;
  line-height: 1;
  color: var(--text);
  vertical-align: middle;
  transform: translateY(-2px);
}
.ov2-svg-mask--glyph-cell {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto;
}
.ov2-svg-mask--inline {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  transform: translateY(-1px);
}
.ov2-pa-empty {
  font-size: 10px;
  opacity: 0.5;
  padding: 8px 0;
}

/* ── Diagrama topocêntrico — rodapé editorial do overlay ──
   Desktop: full-span abaixo das duas colunas (wrap é display:contents);
   Mobile: último bloco do fluxo. Spacers 128px vivem dentro do bloco. */
.ov2-topocentric {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 1 / -1;
}
.ov2-topocentric-diagram {
  width: min(560px, 94vw);
  aspect-ratio: 1;
  line-height: 0;
}
.ov2-topocentric-diagram canvas.topocentric-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Diagrama topocêntrico na Home — seção responsiva full-width ── */
.home-topocentric {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 0 0;
}

/* ── OV2 AI loading overlay (cobre o overlay enquanto o Claude digita) ── */
#ov-ai-loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--bg-3, #e8e2da);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
#ov-ai-loading.ov-ai-loading--dismissing { opacity: 0; }
.ov-ai-loading__diagram {
  width: 200px;
  height: 200px;
}
/* ── orb-loading universal (async-guards.js) ──────────────────── */
.orb-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
  background: var(--bg-3, #2a2824);
  pointer-events: none;
  z-index: 50;
  will-change: opacity;
}
.orb-loading--absolute {
  position: absolute;
}
.orb-loading canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


/* ══════════════════════════════════════════
   OV2 — Responsivo
   Mobile: base (coluna única, paddings)
   Desktop ≥ 900px: grid 12 col.
══════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Esquerda: pilha única; Direita: grid item real na mesma linha → lado a lado */
  .ov2-col-left {
    display: block;
    grid-column: 2 / 7;
    align-self: start;
    min-width: 0;
    padding: 0 var(--half-col) 0 0;
  }
  .ov2-col-right {
    display: block;
    grid-column: 7 / 12;
    align-self: start;
    padding: 0 0 0 var(--half-col);
  }
  .ov2-spacer--header-top,
  .ov2-spacer--header-bottom { height: 0; }
  .ov2-spacer--tl-gap { height: 64px; }
  .ov2-spacer--hero-top,
  .ov2-spacer--hero-bottom { height: 64px; }
  .ov2-spacer--hero-void { height: 64px; }
  .ov2-spacer--pa-top { height: 0; }
  .ov2-spacer--secondary-gap { height: 64px; }
  .ov2-header {
    grid-column: 2 / 12;
    min-height: calc(100vh / 3);
    min-height: calc(100dvh / 3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: auto;
    margin: 0;
  }
  .ov2-tl {
    margin: 0;
    width: 100%;
    padding: 0;
  }
  .ov2-pa-wrap {
    margin: 0;
    width: 100%;
  }
  .ov2-related {
    margin: 28px 0 0;
    width: 100%;
  }
  .ov2-pa {
    padding: 20px;
  }
  .ov2-lead,
  .ov2-secondary {
    display: block;
  }
  /* Linha em C2; corpo do texto a partir do meio de C2 */
  .ov2-lead p,
  .ov2-lead .overlay-lead-para,
  .ov2-lead > .aspect-overlay-loading {
    grid-column: unset;
    margin: 0;
    padding-left: var(--half-col);
  }
  .ov2-secondary .daily-horo-col-box {
    grid-column: unset;
    margin: 0;
    padding: 0;
  }
  /* ¶2 desktop — linha direita */
  .ov2-secondary .daily-horo-col-box:nth-child(1) p {
    padding: 0 var(--half-col) 0 0;
    border-right: 1.25px solid var(--text-dim);
    border-left: none;
  }
  /* ¶3 desktop — linha esquerda */
  .ov2-secondary .daily-horo-col-box:nth-child(3) p {
    padding: 0 0 0 var(--half-col);
    border-left: 1.25px solid var(--text-dim);
    border-right: none;
  }
  /* ¶4 desktop — sem linha, justificado com hifenização */
  .ov2-secondary .daily-horo-col-box:nth-child(5) p {
    padding: 0;
    border: none;
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
  }
  .ov2-hero {
    padding: 0;
  }
  .ov2-foot {
    margin: 48px 0 0;
    width: 100%;
    padding: 0;
  }
}

/* ══════════════════════════════════════════
   OV2 — Mobile (≤ 899px): espaçamentos 64px
══════════════════════════════════════════ */
@media (max-width: 899px) {
  /* ov2-pa: padding lateral 16px no mobile */
  .ov2-pa { padding-left: 16px; padding-right: 16px; }

  /* 1. Último ¶ → ov2-pa-wrap: footSpacer = 0 (trailing-gap já é 64px) */
  .ov2-col-left .ov2-spacer--128 { height: 0; }

  /* 2. ov2-pa-wrap → foot bar: 64px acima do foot bar */
  .ov2-foot--mob                 { margin-top: 64px; }

  /* 3. Foot bar → título relacionados: 64px (related sem margin-top + padding-top do título) */
  /* 4. Título → primeiro card: margin-bottom 56px + gap 8px = 64px */
  .ov2-related                   { margin-top: 0; }
  .ov2-related-group-title       { padding-top: 64px; margin-bottom: 56px; }
}

/* ══════════════════════════════════════════
   MAPA NATAL — Hub, toolbar e Céu da Vida
══════════════════════════════════════════ */

/* Highlight temporário ao clicar num planeta no canvas */
.natal-reading-card--highlight {
  outline: 2px solid var(--gold, #C49A3C);
  outline-offset: 2px;
  transition: outline 0.2s;
}

/* Fundo Ink na secção gráfico natal */
.natal-panel--grafico-immersive {
  background: var(--ink, #1A1814);
  position: relative;
}
#page-you[data-natal-tab="grafico"] {
  background: var(--ink, #1A1814);
}

/* Zoom + spin-toggle do mapa natal: centralizado na base, 16px acima do fundo da moldura */
#natal-panel-grafico #natal-zoom-wrap {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--footer-h) + var(--frame-w) + 16px);
  top: auto;
  right: auto;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}
#natal-panel-grafico #natal-zoom-wrap > .chart-spin-toggle {
  margin-bottom: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  /* Neutraliza legado de .transport-btn */
  opacity: 1;
  /* Vidro transparente: blur apenas, sem tint — padronizado com os demais botões */
  background: transparent;
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.2s ease;
}
/* Neutraliza legado de .transport-btn e .zoom-icon-btn:active / .zoom-btn:active no escopo natal */
#natal-panel-grafico #natal-zoom-wrap .chart-spin-toggle:hover,
#natal-panel-grafico #natal-zoom-wrap .chart-spin-toggle:active,
#natal-panel-grafico #natal-zoom-wrap .zoom-icon-btn:active,
#natal-panel-grafico #natal-zoom-wrap .zoom-btn:active {
  opacity: 1 !important;
}
/* Colapsado: 26px, ícone oculto, borda mantida */
#natal-panel-grafico #natal-zoom-wrap > .chart-spin-toggle.is-collapsed {
  width: 26px; height: 26px;
  background: transparent;
}
#natal-panel-grafico #natal-zoom-wrap > .chart-spin-toggle.is-collapsed svg {
  opacity: 0;
  transition: opacity 0.15s ease;
}
:root[data-theme="blunt-light"] #natal-panel-grafico #natal-zoom-wrap > .chart-spin-toggle {
  border-color: var(--ink);
}
#natal-panel-grafico #natal-zoom-wrap > .chart-spin-toggle:hover {
  background: color-mix(in srgb, var(--ink) 25%, transparent);
}
#natal-panel-grafico #natal-zoom-wrap > .chart-spin-toggle:active {
  background: var(--ink);
}
:root[data-theme="blunt-dark"] #natal-panel-grafico #natal-zoom-wrap > .chart-spin-toggle:active {
  background: var(--gold);
}
#natal-panel-grafico #natal-zoom-wrap > .chart-spin-toggle svg {
  stroke: var(--gold);
  fill: none;
  transition: fill 0.15s ease;
}
:root[data-theme="blunt-light"] #natal-panel-grafico #natal-zoom-wrap > .chart-spin-toggle svg {
  stroke: var(--ink);
}
#natal-panel-grafico #natal-zoom-wrap > .chart-spin-toggle:hover svg {
  fill: var(--gold);
}
:root[data-theme="blunt-light"] #natal-panel-grafico #natal-zoom-wrap > .chart-spin-toggle:hover svg {
  fill: var(--ink);
}
/* Botão de zoom (colapsado) — mesma estética do spin-toggle */
#natal-panel-grafico #natal-zoom-wrap .zoom-icon-btn {
  width: 44px; height: 44px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  /* Vidro transparente: blur apenas, sem tint */
  background: transparent;
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.2s ease;
}
/* Colapsado: 26px, ícone oculto, borda mantida */
#natal-panel-grafico #natal-zoom-wrap .zoom-icon-btn.is-collapsed {
  width: 26px; height: 26px;
  background: transparent;
}
#natal-panel-grafico #natal-zoom-wrap .zoom-icon-btn.is-collapsed svg {
  opacity: 0;
  transition: opacity 0.15s ease;
}
#natal-panel-grafico #natal-zoom-wrap .orrery-zoom-inner {
  position: relative;
}
:root[data-theme="blunt-light"] #natal-panel-grafico #natal-zoom-wrap .zoom-icon-btn {
  border-color: var(--ink);
}
#natal-panel-grafico #natal-zoom-wrap .zoom-icon-btn:hover {
  background: color-mix(in srgb, var(--ink) 25%, transparent);
}
#natal-panel-grafico #natal-zoom-wrap .zoom-icon-btn:active {
  background: var(--ink);
}
:root[data-theme="blunt-dark"] #natal-panel-grafico #natal-zoom-wrap .zoom-icon-btn:active {
  background: var(--gold);
}
#natal-panel-grafico #natal-zoom-wrap .zoom-icon-btn svg {
  stroke: var(--gold);
  fill: none;
  transition: fill 0.15s ease;
}
:root[data-theme="blunt-light"] #natal-panel-grafico #natal-zoom-wrap .zoom-icon-btn svg {
  stroke: var(--ink);
}
#natal-panel-grafico #natal-zoom-wrap .zoom-icon-btn:hover svg {
  fill: var(--gold);
}
:root[data-theme="blunt-light"] #natal-panel-grafico #natal-zoom-wrap .zoom-icon-btn:hover svg {
  fill: var(--ink);
}
/* Zoom expandido no natal: abre 16px acima do botão, 50vw, duas linhas */
#natal-panel-grafico #natal-zoom-wrap .zoom-full-ctrl {
  position: absolute;
  bottom: 100%;
  margin-bottom: 16px;
  left: 50%;
  width: min(50vw, 600px);
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity 0.22s ease;
}
#natal-panel-grafico #natal-zoom-wrap.zoom-expanded .zoom-full-ctrl {
  transform: translateX(-50%) scaleY(1);
  opacity: 1;
  pointer-events: auto;
}
/* Zoom icon-btn: preenche quando expandido */
#natal-panel-grafico #natal-zoom-wrap.zoom-expanded .zoom-icon-btn {
  background: var(--gold);
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
:root[data-theme="blunt-light"] #natal-panel-grafico #natal-zoom-wrap.zoom-expanded .zoom-icon-btn {
  background: var(--ink);
}
#natal-panel-grafico #natal-zoom-wrap.zoom-expanded .zoom-icon-btn svg {
  stroke: var(--ink);
}
:root[data-theme="blunt-light"] #natal-panel-grafico #natal-zoom-wrap.zoom-expanded .zoom-icon-btn svg {
  stroke: var(--creme, #faf4ed);
}

/* Zoom track estilo ov2-tl — duas linhas horizontais */
#natal-panel-grafico #natal-zoom-wrap .zoom-track-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0 -16px;
  z-index: 0;
  overflow: visible;
  background: var(--player-surface, color-mix(in srgb, var(--bg) 10%, transparent));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
}
#natal-panel-grafico #natal-zoom-wrap .zoom-track {
  width: 100%;
  height: 16px;
  background: transparent;
  border-top: 1.25px solid var(--gold);
  border-bottom: 1.25px solid var(--gold);
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}
:root[data-theme="blunt-light"] #natal-panel-grafico #natal-zoom-wrap .zoom-track {
  border-color: var(--ink);
}
/* Bolinha do zoom — 32px (mesmo tamanho dos btns +/−) */
#natal-panel-grafico #natal-zoom-wrap .zoom-track-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold);
  cursor: grab;
  z-index: 3;
  touch-action: none;
}
:root[data-theme="blunt-light"] #natal-panel-grafico #natal-zoom-wrap .zoom-track-marker {
  background: var(--ink);
}
#natal-panel-grafico #natal-zoom-wrap .zoom-track-marker.is-dragging {
  cursor: grabbing;
}

/* Zoom btns (+,−) — lado a lado com o track */
#natal-panel-grafico #natal-zoom-wrap .zoom-btn {
  width: 32px; height: 32px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: transparent;
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  color: var(--gold);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.2s ease;
}
:root[data-theme="blunt-light"] #natal-panel-grafico #natal-zoom-wrap .zoom-btn {
  border-color: var(--ink);
  color: var(--ink);
}
#natal-panel-grafico #natal-zoom-wrap .zoom-btn:hover {
  background: color-mix(in srgb, var(--ink) 25%, transparent);
}
#natal-panel-grafico #natal-zoom-wrap .zoom-btn:active {
  background: var(--ink);
}
:root[data-theme="blunt-dark"] #natal-panel-grafico #natal-zoom-wrap .zoom-btn:active {
  background: var(--gold);
}

/* Player Céu da Vida */
.natal-canvas-area { position: relative; }
.natal-tempo-panel {
  position: absolute;
  bottom: calc(var(--footer-total-h, 80px) + 72px + var(--frame-w));
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: color-mix(in srgb, #1a1814 88%, transparent);
  border: 1px solid rgba(244,196,48,0.25);
  border-radius: 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}
.natal-tempo-panel[hidden] { display: none !important; }
.natal-tempo-btn {
  background: none;
  border: 1px solid rgba(244,196,48,0.3);
  color: rgba(244,196,48,0.8);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  font-family: var(--font, 'Archivo', sans-serif);
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.natal-tempo-btn:hover, .natal-tempo-btn:active {
  background: rgba(244,196,48,0.15);
  color: #F4C430;
}
.natal-tempo-btn--anchor {
  border-color: rgba(244,196,48,0.6);
  color: rgba(244,196,48,0.95);
}
.natal-tempo-label {
  font-size: 11px;
  font-weight: 600;
  color: #F4C430;
  letter-spacing: 0.05em;
  min-width: 80px;
  text-align: center;
  font-family: var(--font, 'Archivo', sans-serif);
}

/* Paywall Céu da Vida — overlay sobre o canvas (z-index abaixo do back-btn z:13 → usuário pode sair) */
.natal-life-sky-paywall {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 24px;
  text-align: center;
  background: color-mix(in srgb, #1a1814 75%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.natal-life-sky-paywall__text {
  font-size: 13px;
  color: rgba(244,196,48,0.85);
  max-width: 300px;
  line-height: 1.5;
  font-family: var(--font, 'Archivo', sans-serif);
}
.natal-life-sky-paywall__btn {
  padding: 10px 24px;
  background: #F4C430;
  color: #1A1814;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font, 'Archivo', sans-serif);
  transition: opacity 0.15s;
}
.natal-life-sky-paywall__btn:hover { opacity: 0.88; }

/* ══════════════════════════════════════════
   NATAL — Detail Split View (frame + card)
   Frame e card posicionados fixed sobre o canvas (que cobre viewport)
══════════════════════════════════════════ */

/* O POSICIONAMENTO DO NATAL SAIU DAQUI. Era cópia byte a byte do bloco do Céu
   — mesmos offsets, mesma borda, mesma transição, mesmo z-index; medido no
   navegador, os dois davam 648,114 604x598. Hoje vem de `.chart-detail-frame` /
   `.chart-detail-card` (o host único, em index.html).

   As regras de CONTEÚDO do card do Natal também saíram: ele adotou a casca
   padrão dos gráficos (`.transit-card`), a mesma de Céu e Lunar, então herda o
   estilo de lá inteiro. O que sobra abaixo é só o CHROME da página Você —
   esconder a navegação de slides e o zoom quando a janela abre —, que é
   genuinamente local e continua com `.natal-detail-open`. */
/* Quando a detail view está aberta, esconde controles ao redor */
.you-slides-wrap.natal-detail-open #you-slides-sector-nav,
.you-slides-wrap.natal-detail-open #you-slide-prev-btn,
.you-slides-wrap.natal-detail-open #you-slide-next-btn,
#natal-panel-grafico.natal-detail-open #natal-zoom-wrap {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* O bloco mobile do Natal saiu inteiro. Ele reposicionava o card e divergia do
   bloco do Céu no `z-index` (300 contra 15) e no `background` — duas verdades
   para o mesmo elemento, e ninguém sabia dizer qual valia em qual página. Com um
   nó só e uma casca só, a pergunta deixa de existir. */

/* ══════════════════════════════════════════
   TRANSIT DETAIL SPLIT VIEW (Céu/Orrery)
   Mesmo padrão visual do Natal: frame à esquerda, card à direita.
══════════════════════════════════════════ */

/* Frame esquerda — moldura, sem fundo.
   UM bloco para o app inteiro. Antes eram dois idênticos (.chart-detail-frame
   e .natal-detail-frame), com os mesmos offsets e a mesma borda escritos duas
   vezes. Aberto por `body.chart-detail-open` (chart-detail-host.js). */
.chart-detail-frame {
  position: fixed;
  top: calc(var(--header-h) + var(--frame-w) + 16px);
  bottom: calc(var(--footer-total-h) + var(--frame-w) + 16px);
  left: calc(var(--frame-w) + 16px);
  right: calc(50vw + 8px);
  border: 2px solid transparent;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  transition: border-color 0.3s ease, opacity 0.2s ease;
  z-index: 15;
}
body.chart-detail-open .chart-detail-frame {
  opacity: 1;
  border-color: var(--ink-b);
}
:root[data-theme="blunt-dark"] body.chart-detail-open .chart-detail-frame {
  border-color: var(--gold);
}

/* Botão fechar da frame: MESMO estilo do fechar-gráfico (.transit-close-pill),
   colapsado e expandido, via proximidade (chart-close.js). Aqui só reposiciono
   no canto sup. direito da frame (desktop apenas). */
.chart-detail-frame .transit-frame-close {
  position: absolute;
  top: 8px; right: 8px;
  left: auto;
  z-index: 2;
}
@media (max-width: 768px) {
  .chart-detail-frame .transit-frame-close { display: none; }
}

/* Estado vazio do card (data mudou com split aberto) — mensagem centralizada */
.transit-detail-loading {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box;
}
.transit-detail-loading-msg {
  font-family: 'Archivo', var(--font, sans-serif);
  font-stretch: 125%;            /* expanded */
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3em;         /* mesmo do logo ORBISTRA (.logo-l1) */
  text-transform: uppercase;
  text-align: center; line-height: 1.6;
  color: var(--ink);             /* Celeste: ink */
}
:root[data-theme="blunt-dark"] .transit-detail-loading-msg {
  color: var(--gold);            /* Observatório: gold solar */
}
/* Botão fechar do estado vazio: MESMO estilo do fechar-frame (.transit-close-pill),
   colapsado/expandido por proximidade (chart-close.js). Aqui só reposiciono no
   canto sup. direito do card. */
.chart-detail-card .transit-empty-close {
  position: absolute;
  top: 12px; right: 12px;
  left: auto;
  z-index: 2;
}

/* Card direito — frosted glass; hospeda o .natal-reading-card (2 colunas).
   Mesma consolidação da moldura: era duplicado em .natal-detail-card. */
.chart-detail-card {
  position: fixed;
  top: calc(var(--header-h) + var(--frame-w) + 16px);
  bottom: calc(var(--footer-total-h) + var(--frame-w) + 16px);
  left: calc(50vw + 8px);
  right: calc(var(--frame-w) + 16px);
  border: 2px solid transparent;
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease 0.2s;
  z-index: 15;
  background: var(--detail-card-glass-bg, transparent);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  overflow: hidden;
}

/* ── Card de trânsito — coluna única (header → separador → mini-carto → lista) ── */
.chart-detail-card .transit-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Header 80px (título pode quebrar em 2 linhas): glyphs (empilhados) │ título │ grau */
.transit-card-header {
  flex-shrink: 0;
  height: 80px;
  display: flex; align-items: stretch;
  padding: 0 40px 0 0;   /* área do botão fechar (simétrica ao quadrado dos glyphs) */
}
.transit-card-glyphs {
  flex-shrink: 0;
  width: 40px;   /* largura do quadrado dos glyphs */
  display: flex; flex-direction: column;
  font-family: 'Orby Text', 'Orby Astrology', serif;
  font-size: 19px; line-height: 1;
  color: var(--ink);
}
:root[data-theme="blunt-dark"] .transit-card-glyphs { color: var(--gold); }
/* Cada glyph centrado no seu quadrado ~40×40; separador horizontal entre eles */
.transit-card-glyphs .tcg-glyph {
  flex: 1 1 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Símbolo cosmos (SVG inline) do card do céu: herda a cor do tema (ink/gold)
   via fill:currentColor; altura fixa, largura pela proporção do viewBox. */
.transit-card-glyphs .tcg-sky-glyph svg {
  display: block;
  height: 22px;
  width: auto;
}
.transit-card-glyphs .tcg-hsep {
  flex-shrink: 0;
  height: 1px; width: 100%;
  background: var(--ink);
}
:root[data-theme="blunt-dark"] .transit-card-glyphs .tcg-hsep { background: var(--gold); }
/* Número da casa no glyph cell: Archivo expanded (mesmo idioma dos nºs do gráfico) */
.transit-card-glyphs .tcg-house-num {
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-stretch: 125%;
  font-size: 16px;
}
.transit-card-title {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px;
}
.transit-card-title .tct-text {
  font-family: 'Archivo', var(--font, sans-serif);
  font-weight: 700; font-stretch: 125%; font-size: 12px; line-height: 1.25;
  color: var(--ink);
  text-align: center; text-transform: uppercase;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
:root[data-theme="blunt-dark"] .transit-card-title .tct-text { color: var(--text, #EDE0BD); }
.transit-card-hsep {
  flex-shrink: 0;
  width: 1px; align-self: stretch;
  background: var(--ink);
}
:root[data-theme="blunt-dark"] .transit-card-hsep { background: var(--gold); }
/* Botão fechar: círculo sólido var(--text) (ink no Celeste / cor do FAB no
   Observatório), sem borda, tamanho fixo, centrado no header 80px */
.transit-card .transit-card-close {
  position: absolute; top: 27px; right: 7px;   /* centrado na área de 40px */
  width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 50%;
  background: transparent; color: var(--ink);
  cursor: pointer; pointer-events: auto; z-index: 3;
}
:root[data-theme="blunt-dark"] .transit-card .transit-card-close {
  border-color: var(--gold);
  color: var(--gold);
}
/* Celeste: fundo Solar-frosted + blur (mesma identidade dos outros fechar). */
:root[data-theme="blunt-light"] .transit-card .transit-card-close {
  background: color-mix(in srgb, var(--gold) 58%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.transit-card .transit-card-close svg { pointer-events: none; }
.transit-card-sep {
  flex-shrink: 0;
  border: none; border-top: 1px solid var(--ink-b);
  margin: 0; width: 100%;   /* borda a borda */
}
:root[data-theme="blunt-dark"] .transit-card-sep { border-top-color: var(--gold); }
/* Linha da data (40px fixo): "HOJE" ou data completa em caixa alta com o ano */
.transit-card-date {
  flex-shrink: 0;
  height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo', var(--font, sans-serif);
  font-weight: 700; font-stretch: 125%; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
:root[data-theme="blunt-dark"] .transit-card-date { color: var(--text, #EDE0BD); }

/* ── INFO bottom sheet (pastinha de arquivo) ──────────────────────
   DENTRO do card da direita, ancorado no fundo. A aba (handle) fica no rodapé
   do card; o conteúdo sobe a partir dela, cobrindo a área abaixo da linha da
   data (teto = altura da .transit-card-list, controlado pelo JS).
   DOM: .house-info-content primeiro (acima), .house-info-handle depois (fundo).
   Drag UP = expande; drag DOWN = colapsa. */
.house-info-sheet {
  display: none;                   /* INFO oculto temporariamente */
  position: absolute;
  left: 0; right: 0; bottom: 0;   /* ancora no fundo do card (position:relative) */
  z-index: 4;                      /* acima da .transit-card-list */
  pointer-events: none;            /* só handle + content capturam eventos */
}
.house-info-sheet .house-info-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;    /* ancora no fundo; cresce p/ cima */
  height: 0;                       /* JS controla em px (teto = área da lista) */
  overflow: hidden;
  /* mesmo material da janela (card): glass tan + blur */
  background: var(--detail-card-glass-bg, var(--bg));
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  border-top: 1px solid var(--ink-b);
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
}
.house-info-sheet[data-expanded="1"] .house-info-content {
  overflow-y: auto;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.13);
}
.house-info-handle {
  position: absolute;
  left: 0; right: 0; bottom: 0;    /* flutua sobre o content, no rodapé */
  z-index: 1;
  height: 40px;
  /* colapsado: sem linha, sem faixa de fundo — só o botão pill flutua */
  background: transparent;
  border: none;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 40px;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  cursor: pointer;
  pointer-events: auto;
}
.house-info-handle-btn {
  display: inline-flex; align-items: center; gap: 7px;
  /* mesmo material da janela (card): glass tan + blur */
  background: var(--detail-card-glass-bg, var(--bg));
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 0 20px; height: 28px;
  font-family: 'Archivo', var(--font, sans-serif);
  font-weight: 700; font-stretch: 125%; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  pointer-events: none;     /* eventos no .house-info-handle, não aqui */
}
:root[data-theme="blunt-dark"] .house-info-handle-btn {
  color: var(--text, #EDE0BD);
  border-color: var(--gold);
}
/* Chevron canvas (igual ao player Gantt): "^" fino colapsado; rotaciona ↓ ao abrir. */
.house-info-chevron {
  display: block;
  width: 24px; height: 6px;
  transition: transform 0.25s ease;
}
.house-info-sheet[data-expanded="1"] .house-info-chevron {
  transform: rotate(180deg);
}
.transit-card-list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 12px;
}
/* Card de casa: reserva os 40px da aba INFO (absoluta no fundo) p/ não esconder itens. */
.transit-card[data-house] .transit-card-list { padding-bottom: 52px; }
/* Texto interpretativo do card de casa (tema + astro-na-casa).
   Desktop: linhas verticais nos dois lados — 40px viewport→linha, 40px linha→texto.
   Mobile: só linha esquerda. */
.transit-house-basic {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  margin-top: 6px;
  border-left: 1.25px solid var(--ink-b);
  border-right: 1.25px solid var(--ink-b);
  padding-left: 40px;
  padding-right: 40px;
}
/* Na janela direita do split view: linhas a 16px das bordas, mesmo nível das barras dos títulos */
.nrc-transits-section .transit-house-basic {
  margin-left: 16px;
  margin-right: 16px;
  padding-left: 20px;
  padding-right: 20px;
}
.transit-house-basic p { margin: 0 0 10px; }
.transit-house-basic p:last-child { margin-bottom: 0; }

/* O `:not(.natal-detail-card)` que protegia este bloco SAIU: o card do Natal
   adotou a casca padrão (`.transit-card`), então a estrutura é mesmo a mesma
   nos três gráficos e não há mais o que separar. */
/* ── Hospeda o natal-reading-card (mesmo layout do Mapa Natal) ──────── */
.chart-detail-card .natal-reading-card {
  position: relative;
  height: 100%;
  align-items: stretch;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border: none;
}
.chart-detail-card .nrc-left-col {
  min-height: 0;
  overflow: hidden;
}
.chart-detail-card .nrc-left-scroll {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  /* rola dentro do próprio espaço — a área delimita onde começa o botão fechar */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* Desktop: coluna esquerda (título vertical) com o dobro da largura */
@media (min-width: 900px) {
  .chart-detail-card .natal-reading-card {
    grid-template-columns: minmax(0, 2fr) minmax(0, 8fr);
  }
}
/* Sem sub-coluna de glifos (a casa vive na faixa esquerda): body ocupa tudo */
.chart-detail-card .nrc-reading-row {
  grid-template-columns: minmax(0, 1fr);
}
.chart-detail-card .nrc-left-close-area {
  margin-top: auto; width: 100%; display: flex; flex-direction: column;
  align-items: stretch; flex-shrink: 0;
}
.chart-detail-card .nrc-left-close-sep {
  height: 1px; background: var(--border); flex-shrink: 0; width: 100%;
}
.chart-detail-card .nrc-glyph-cell--close { padding: 0; }
.chart-detail-card .carto-panel-close {
  display: flex; justify-content: center; align-items: center;
  width: 100%; height: 100%; padding: 0; background: transparent;
  border: none; cursor: pointer; box-sizing: border-box; position: relative;
}
.chart-detail-card .carto-panel-close::before {
  content: ''; display: block; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--ink); flex-shrink: 0;
  /* Mesmo bg do player (unidade visual dos controles) */
  background: var(--player-surface, color-mix(in srgb, var(--bg) 10%, transparent));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-sizing: border-box; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
:root[data-theme="blunt-dark"] .chart-detail-card .carto-panel-close::before { border-color: var(--gold); }
.chart-detail-card .carto-panel-close svg {
  color: var(--ink); pointer-events: none; flex-shrink: 0;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
:root[data-theme="blunt-dark"] .chart-detail-card .carto-panel-close svg { color: var(--gold); }
@media (max-width: 768px) {
  .chart-detail-card .natal-reading-card { flex: 1; min-height: 0; height: auto; overflow: hidden; }
  .chart-detail-card .nrc-right-col { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
body.chart-detail-open .chart-detail-card {
  opacity: 1;
  pointer-events: auto;
  border-color: var(--ink-b);
}
:root[data-theme="blunt-dark"] body.chart-detail-open .chart-detail-card {
  border-color: var(--gold);
}

/* Header do card — botão fechar + padding */
.transit-detail-header {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px 0 16px;
}
.transit-detail-close {
  width: 44px; height: 44px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--player-surface, color-mix(in srgb, var(--bg) 10%, transparent));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.transit-detail-close:hover { opacity: 1; }
.transit-detail-close:active { opacity: 0.7; }

/* Título do card */
.transit-detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px 8px 24px;
}
.transit-detail-title__glyph {
  font-family: 'Orby Astrology', sans-serif;
  font-size: 32px;
  color: var(--gold);
  line-height: 1;
}
.transit-detail-title__text {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

/* Linha de glyphos */
.transit-glyph-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 24px 16px 24px;
  font-family: 'Orby Astrology', sans-serif;
  font-size: 22px;
  color: var(--gold);
}
.transit-glyph-row__planet {
  font-size: 28px;
}
.transit-glyph-row__sign {
  font-size: 18px;
  color: var(--ink);
  opacity: 0.7;
}
.transit-glyph-row__aspect {
  font-size: 18px;
  color: var(--ink);
  margin: 0 2px;
}
.transit-glyph-row__target {
  font-size: 22px;
  color: var(--ink);
}

/* Seção de trânsitos */
.transit-cards-section {
  padding: 0 16px 24px 16px;
}
.transit-cards-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 10px;
  padding: 0 8px;
}
.transit-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.transit-card-empty {
  text-align: center;
  color: var(--ink);
  opacity: 0.6;
  font-size: 14px;
  padding: 24px 16px;
}

/* Mobile: card fullscreen (frame escondido) — janela como estava */
@media (max-width: 768px) {
  .chart-detail-frame {
    display: none !important;
  }
  .chart-detail-card {
    top: var(--header-h);
    bottom: var(--footer-h);
    left: 0;
    right: 0;
    border-radius: 0;
    border: none;
  }
  .transit-house-basic {
    border-right: none;
  }
}

/* ── Split view aberta: controles ──────────────────────────────────
   Toolbar e close-pill somem. Player (movido via JS), zoom e play/pause
   migram para a frame esquerda. */
.transit-detail-open #transit-close-pill,
.transit-detail-open #transit-graph-toolbar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
/* Desktop: player no rodapé da frame; zoom + play/pause encostados na borda
   direita da frame (como estão na moldura direita). O player é movido para
   DENTRO de #chart-detail-frame (JS _moveTempoPanelToFrame); zoom-wrap fica
   por ID para vencer as regras base. */
@media (min-width: 769px) {
  /* Player movido para DENTRO da frame (JS _moveTempoPanelToFrame): posiciona
     relativo à frame, 16px acima da borda inferior. Determinístico. */
  #chart-detail-frame .tempo-panel.tempo-in-frame {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 16px;
    transform: translateX(-50%);
    margin: 0;
    max-width: calc(100% - 32px);
    pointer-events: auto;
    z-index: 2;
  }
  /* Colapsado: 32px da borda inferior da frame */
  #chart-detail-frame .tempo-panel.tempo-in-frame.tempo-collapsed {
    bottom: 32px;
  }
  .transit-detail-open #chart-controls-layer #orrery-zoom-wrap {
    right: calc(50vw + 16px);
    pointer-events: auto;
  }
}

/* Mobile: card cobre a tela — esconde player e zoom no split. */
@media (max-width: 768px) {
  .transit-detail-open #tempo-panel,
  .transit-detail-open #orrery-zoom-wrap {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
}

/* Lunar: a data do player é redundante — a espiral já mostra o ano inteiro e o
   marcador em foco indica onde estamos. O atributo é escrito por
   _syncBodyChartAttr (ui-player.js) com o KIND do CHART_REGISTRY.
   Antes esta regra usava [data-chart-mode="5"], que nunca casava: nenhum código
   escrevia esse atributo. */
body[data-chart="lunar"] #player-date {
  display: none !important;
}


/* O destaque de hover do Lunar NÃO tem regra de CSS.
   Havia duas aqui — opacidade do traço e visibilidade do donut — e elas
   duplicavam o que a sync por frame já calcula a partir de
   `_lunarActiveMarker`. Como usavam `!important`, VENCIAM o valor inline da
   sync: dois sistemas decidindo a mesma coisa, com o CSS ganhando em silêncio
   onde discordassem. Estado de marcação vive só no JS. */



/* Falha de leitura por IA. Existe para a falha ser LEGÍVEL como falha — o
   placeholder anterior era Lorem Ipsum, indistinguível de uma leitura real. */
.ov2-reading-error {
  font-family: 'Archivo', var(--font, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.75;
  text-align: center;
  padding: 24px 16px;
  margin: 0;
}

/* Herói do OV de leitura do Lunar: o glifo da fase, grande. Equivalente à roda
   de astros das leituras de casa — o objeto do qual a leitura fala. */
.lunar-ov-hero-glyph {
  display: block;
  width: clamp(120px, 38%, 220px);
  height: auto;
  margin: 0 auto;
}


/* Glifos do header do OV2 em INK no tema claro.
   A máscara SVG pinta com `currentColor`, então basta a cor do contêiner. No
   Observatório fica como está — o valor herdado já tem o contraste necessário
   sobre o fundo escuro. */
:root[data-theme="blunt-light"] .ov2-header-glyph,
:root:not([data-theme]) .ov2-header-glyph {
  color: var(--ink, #1A1814);
}

/* Botão "ver todos" das listas de trânsito.
   Nasce da medição: os cards mostravam 8,4% dos trânsitos ao mapa natal, e o
   restante não tinha caminho. O corte curto continua sendo o resumo; isto é a
   porta para a lista inteira. Discreto de propósito — é navegação, não conteúdo. */
.nrc-transits-more {
  display: block;
  width: 100%;
  margin: 6px 0 2px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid var(--accent-thin, rgba(26, 54, 199, 0.28));
  border-radius: 8px;
  color: var(--accent, #1A36C7);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.nrc-transits-more:hover {
  background: var(--accent-weak, rgba(26, 54, 199, 0.08));
}
:root[data-theme="blunt-dark"] .nrc-transits-more {
  border-color: var(--gold, #C49A3C);
  color: var(--gold, #C49A3C);
}
:root[data-theme="blunt-dark"] .nrc-transits-more:hover {
  background: rgba(196, 154, 60, 0.12);
}

/* Band do OV2 sem janela (configuração NATAL): a timeline não se aplica — a
   figura não começa nem termina —, mas a faixa superior fica, porque é onde
   mora o salvar. Sem a barra e sem o band do pico, ela é só a linha de topo. */
.ov2-tl--sem-janela .ov2-tl-stage { padding-bottom: 0; }
.ov2-tl--sem-janela .ov2-tl-top-band { margin-bottom: 0; }