/* =========================================================================
   caminho.css — O Meu Caminho (#/p/caminho)
   Release 23.10.29 · SPEC_RELEASE_23.10.29.md
   (As sete estações nasceram na 23.10.20, sobre a base da 23.8.0 ·
   SPEC_CAMINHO_COMPOSICAO_FECHADA.md; o eixo encostado veio na 23.10.21.)

   A tela não é uma ilustração com botões por cima: a ilustração É a
   interface. Isso não mudou desde a 23.8. O que ESTA release muda é só o
   desktop, e por um motivo que a titular viu em produção: encostada ao
   menu na 23.10.21, a tela deixava uma banda de ~450×1100px vazia à
   direita — *"ficou muito vazio, está estranho"* (18/08).

   · §D — a partir dos 1200px a paisagem e o painel passam a viver LADO A
     LADO, em vez de empilhados: o vão ganha conteúdo e as ferramentas da
     estação deixam de exigir scroll;
   · o ORNAMENTO (`.cam-orn`) entra a partir dos 1024px, no canto de baixo
     à direita e atrás de tudo.

   O que vem de trás e continua a valer: as SETE estações sobre as posições
   congeladas (§B'), a cena 10% mais curta, o painel no lugar do antigo
   convite de declaração, e o eixo comum aos três territórios.

   Tudo em % e em unidades de contentor (cqw): a composição é a mesma a
   390 px e a 1280.
   ========================================================================= */

/* —— A ESCADA DOS CREMES (23.10.45) ————————————————————————————————————
   Pedido da titular, 19/08: *"arrume as cores dos cremes"*.

   O ficheiro tinha CINCO valores de superfície postos à mão, e dois deles
   distavam 1,4% de luminância um do outro (`#fff` e `#fffdf8`): na tela
   isso não lê como um NÍVEL, lê como sujidade — um cartão que parece o
   mesmo branco, mas ligeiramente encardido.

   Passam a ser TRÊS degraus, um só matiz (H≈40°), com nome:

     --cam-sup    #ffffff   o que se levanta   painel, herói da sala
     --cam-med    #fdfaf3   o que está pousado nascimento, item de memória
     --cam-recuo  #f9f6f0   o que recua        pista tracejada, chip, ferramenta

   `--cam-med` é o `--p-glass-strong` do patient.css (o produto já tinha o
   degrau; o Caminho é que o não usava). `--cam-recuo` é o creme do cartão
   "Explore também a Janela de Johari" — aprovado pela titular na 23.10.44,
   por isso é ele que fica e não um valor novo. O fundo do território
   (`--p-bg`, #fbf6ec) não entra na escada: é chão, não superfície. */
#app-shell.patient-mode {
  --cam-sup: var(--p-glass, #ffffff);
  --cam-med: var(--p-glass-strong, #fdfaf3);
  --cam-recuo: #f9f6f0;
}
@media (min-width: 1024px) {
  #app-shell.patient-mode.caminho-view:not(.no-chrome) main#view {
    max-width: 1000px; margin-left: 0; margin-right: 0;
    padding-left: 28px; padding-right: 28px;
  }
  /* O eixo do território: cabeçalho, arte e painel partem da mesma margem.
     Era `margin-inline: auto` (só na arte) — o desalinhamento que a titular
     apontou em produção. O seletor leva o id do shell de propósito: a regra
     base de .cam-cena vem DEPOIS neste ficheiro e, sem o peso extra, o
     `auto` dela voltava a ganhar — visto na prova das larguras, não
     suposto. */
  #app-shell.caminho-view .cam-cena { margin-inline: 0; }
  #app-shell.caminho-view .cam-panel,
  #app-shell.caminho-view .cam-foot-note { max-width: 560px; margin-inline: 0; }
}

.cam-wrap { position: relative; }

/* ── o ornamento do canto ───────────────────────────────────────────────
   23.10.29 — pedido da titular ao ver a tela em produção: *"pode colocar
   uma imagem no canto do caminho pois ficou muito vazio, está estranho"*.

   Nasce ESCONDIDO e só existe a partir dos 1024px, porque o vazio que ele
   resolve também só existe aí: no telemóvel a tela está cheia e uma peça a
   mais seria ruído sobre a paisagem.

   A peça é a `botanica-lateral.webp` e não a `wash-canto.webp` do Hoje e
   da Bússola: essa tem um cartão desenhado lá dentro e só funciona sangrada
   pelo canto, meia escondida — inteira num vão lê-se como um cartão
   fantasma, e cortada com `object-fit` fica um retângulo a direito. As duas
   tentativas foram renderizadas antes de serem descartadas. */
.cam-orn { display: none; }

/* Cena e painel SEMPRE à frente do ornamento. Sem isto ele pintava POR
   CIMA do cartão do painel — que é estático, e um `position: absolute`
   ganha a qualquer estático mesmo com z-index 0. Visto ao renderizar. */
.cam-cena, .cam-panel { position: relative; z-index: 1; }

/* ── §D — o desktop deixa de ser o telemóvel esticado ───────────────────
   Até à 23.10.21 a tela empilhava sempre: cabeçalho, paisagem (teto de
   490px) e painel POR BAIXO. Encostada à esquerda desde a 23.10.21, isso
   deixava uma banda de ~450×1100px vazia à direita — o que a titular viu.

   A paisagem e o painel passam a viver LADO A LADO: a arte fica com a sua
   coluna (o teto de 490px da 23.9.3 continua a valer, e é ele que define a
   coluna) e o painel ocupa a banda que estava vazia. É a mesma gramática
   do herói do Hoje (`grid-template-columns: 1fr 400px`).

   Ganho que não é de estética: as ferramentas da estação deixam de exigir
   scroll — tocar numa planta mostra o que se pode fazer daqui SEM a tela
   se mexer.

   ⚠️ O CORTE É AOS 1200px, NÃO AOS 1024. Medido COM a barra lateral
   incluída (234px — o harness de capturas não a tem, e por isso mentia):

       viewport 1024 → painel de 212px · "Termômetro Vibracional" em 2 linhas
       viewport 1180 → painel de 368px · 1 linha
       viewport 1280 → painel de 422px

   Duas colunas aos 1024 seria espremer o painel para caber a arte. Entre
   os 1024 e os 1200 a tela continua a empilhar, exatamente como estava. */
@media (min-width: 1200px) {
  .cam-wrap { display: grid; grid-template-columns: 490px minmax(0, 1fr);
    column-gap: 32px; align-items: start; }
  .cam-head, .cam-foot-note { grid-column: 1 / -1; }
  .cam-cena { grid-column: 1; }
  /* O painel nasce alinhado pelo TOPO da paisagem — é a resposta ao que se
     tocou, e uma resposta não começa a meio da pergunta. */
  .cam-panel { grid-column: 2; margin-top: 0; }
}

/* ── o ornamento, a partir dos 1024 ─────────────────────────────────────
   Entra ANTES das duas colunas de propósito: o vão à direita da paisagem
   nasce assim que o território alarga (1024), e não só quando o painel se
   muda para lá (1200). Nos dois layouts o canto de baixo à direita é o
   sítio livre — e é o canto que pertence a vegetação, que cresce do chão.
   (No Hoje e na Bússola a peça deles mora em CIMA à direita porque lá esse
   canto está vazio; aqui é onde o painel nasce.)

   Fica ATRÁS de tudo: se o painel crescer — é o caso de "Quem eu sou", com
   duas secções — tapa-o, e é o comportamento certo: quando há conteúdo, o
   ornamento cede.

   A MÁSCARA não é efeito, é a correção de um defeito da peça: ela tem
   FUNDO PINTADO num quase-branco (#f9f6ec, 32 mil píxeis opacos, medido).
   Na barra lateral isso funde, porque lá o fundo já é branco; aqui, sobre
   o gradiente creme do território, desenhava um retângulo à volta da
   planta. Duas tentativas anteriores, ambas renderizadas e descartadas:
   `mix-blend-mode: multiply` sozinho deixava a moldura (o fundo do
   território não é liso) e, a .55 de opacidade, apagava a planta junto com
   o fundo. A máscara radial desvanece as bordas e resolve sem depender da
   cor por baixo. */
@media (min-width: 1024px) {
  .cam-orn { display: block; position: absolute; bottom: -18px; right: 2px;
    width: 262px; opacity: .82; pointer-events: none; z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse 58% 54% at 50% 46%, #000 42%, transparent 100%);
    mask-image: radial-gradient(ellipse 58% 54% at 50% 46%, #000 42%, transparent 100%); }
}

/* Mesmo cabeçalho da Bússola: símbolo à esquerda, sobrancelha do território,
   título em pergunta, lede. Ver .bus-head em bussola.css. A sobrancelha e a
   lede são as de sempre; a PERGUNTA mudou de papel na 23.10.20 (ver i18n
   caminho.title_q). */
.cam-head { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 15px; }
.cam-head .sym { width: 56px; height: 56px; flex: 0 0 auto; margin-top: 2px; color: var(--t-caminho-accent); }
@media (max-width: 520px) { .cam-head .sym { width: 44px; height: 44px; } }

.cam-eyebrow { margin: 5px 0 2px; font-size: var(--tf-micro); letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--t-caminho-text); }
.cam-title { margin: 0 0 9px; font-family: var(--mec-serif); font-weight: 400;
  font-size: var(--tf-display-territorial);
  line-height: 1.1; color: var(--mec-plum); letter-spacing: -.01em; }
.cam-lede { margin: 0 0 16px; font-size: var(--tf-corpo-2); line-height: 1.6; color: var(--p-text-muted); max-width: 46ch; }

/* ── a paisagem ─────────────────────────────────────────────────────────
   O fundo é camada PRÓPRIA, com força regulada por --fundo. Um número só.

   23.10.20 — a cena encurta 10%. A peça do fundo tem 630×960 (razão exata
   640/420); com `aspect-ratio: 420/576` + `background: … bottom/cover`, o
   cover encosta a peça à LARGURA e o excesso de altura (64px numa cena de
   420) sai POR CIMA — que é exatamente a faixa de céu vazio que sobrava
   acima do destino. Se um dia se voltar aos 420/640, as posições originais
   das nove estão no histórico da 23.8–23.10 (§B congelado).

   O teto de 490px é o da 23.9.3 (a cena não pode dominar o território);
   com o recorte, 490 de largura dá 672 de altura em vez de 747. */
.cam-cena { position: relative; width: 100%; max-width: 490px; margin-inline: auto;
  aspect-ratio: 420/576; border-radius: 20px;
  overflow: hidden; background: var(--p-bg, #fbf6ec); container-type: inline-size;
  --fundo: .55; }
.cam-cena::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(../img/caminho/caminho-fundo.webp) bottom/cover no-repeat;
  opacity: var(--fundo); filter: saturate(.92); }

.cam-broto { position: absolute; padding: 0; border: 0; background: none; cursor: pointer;
  transition: opacity .22s; -webkit-tap-highlight-color: transparent; }
.cam-broto img { width: 100%; height: 100%; display: block; }
/* Centrado no CENTRO da planta (o `ac` de journeyHub.js), não no colo. */
.cam-broto i { position: absolute; transform: translate(-50%, -50%); pointer-events: none; display: block; }

/* O ANEL. Era o vocabulário do contexto declarado; na 23.10.29 passa a
   marcar a ESTAÇÃO ABERTA (a do painel). Mesmo traço, mesma medida — a
   planta mede ~11cqw de altura e a 15cqw o anel envolve-a com folga.
   NÃO HÁ HALO AO TOCAR (decisão da titular, 11/08): o retorno é o
   esmaecer das outras. */
.cam-broto .anel { width: 15cqw; height: 15cqw; border-radius: 50%;
  border: .28cqw solid var(--mec-gold, #d9ab52); opacity: 0; transition: opacity .2s; }
.cam-broto:focus { outline: none; }
.cam-broto:focus-visible { outline: 2px solid var(--t-caminho-accent); outline-offset: 2px; border-radius: 10px; }
.cam-broto.alvo .anel { opacity: .85; }

/* ── o nome da planta (regras da 23.9.3, intactas) ──────────────────────
   Texto pertence à escala tipográfica; composição pertence à geometria
   responsiva. O `cqw` manda em POSIÇÃO, nunca em TAMANHO.
       desktop → --tf-acao    (15 px)
       ≤700 px → --tf-legenda (13 px), o piso; nunca abaixo disto. */
.cam-rot { position: absolute; min-width: max-content; transform: translate(-50%, 0); margin-top: 2.1cqw;
  font-size: var(--tf-acao); font-weight: 600; color: var(--p-text, #3f3a52); white-space: nowrap;
  pointer-events: none; transition: opacity .22s;
  text-shadow: 0 0 4px #fdfaf3, 0 0 4px #fdfaf3, 0 0 4px #fdfaf3, 0 0 9px #fdfaf3; }
@media (max-width: 700px) { .cam-rot { font-size: var(--tf-legenda); } }
.cam-rot.alvo { font-weight: 700; color: var(--mec-plum, #43213f); }

/* Os nomes das colunas de fora não cabem centrados: encostam ao lado por
   onde iam sair (OFFSET, não padding — lição medida da 23.9.3).
   `esq`/`dir` são atribuídos em journeyHub.js a partir do próprio `rx`. */
.cam-rot.esq { left: 2.2cqw !important; transform: none; }
.cam-rot.dir { left: auto !important; right: 2.2cqw; transform: none; }

/* Ao abrir uma estação, as outras seis esmaecem. Não desaparecem: continuam
   lá, porque a escolha não fecha portas nenhumas. (Era .28 só durante a
   escolha; agora há SEMPRE uma estação aberta, e a .28 a paisagem morria —
   .55 mantém-na viva e a seleção inequívoca.) */
.cam-cena.escolhendo .cam-broto:not(.alvo),
.cam-cena.escolhendo .cam-rot:not(.alvo) { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .cam-broto, .cam-rot { transition: none; }
}

/* ── §B' — as sete posições, derivadas das congeladas ───────────────────
   Mesmas peças, mesmos px na cena: com o recorte de 64px no topo,
   y_novo = (y_px − 64) / 576 e altura_nova = altura_px / 576. As larguras
   não mudam (a largura da cena não mudou). "construindo" é a exceção
   medida de novo: desceu na estrada (colo no antigo ry 22) a pedido da
   titular — era o único no alto e ficava longe demais.
   NÃO editar à mão: recalcular a partir das âncoras, senão a regra dos
   46 px parte-se em silêncio. */
/* 23.10.48 — A ROTAÇÃO DAS TRÊS PORTAS (pedido da titular, com setas sobre a
   tela): quem_sou sobe ao topo, construindo desce ao fundo, como_estou passa
   à esquerda. Roda só o LUGAR (`left`/`top`); a `width`/`height` é da PLANTA
   e viaja com ela — senão o broto de `integracao`, que é o mais alto (19,14%,
   por causa do halo e das raízes), ficaria esmagado numa caixa de 10%.
   O anel (`ax`/`ac`) é relativo à caixa da planta, por isso não muda. */
.cam-e1 { left: 1.078%;  top: 18.72%; width: 40.276%; height: 19.14%; } /* como_estou  · integracao  21.22·31.42 */
.cam-e2 { left: 62.667%; top: 51.11%; width: 33.714%; height: 12.01%; } /* cultivar    · provacoes   80·62.22 */
.cam-e3 { left: 1.934%;  top: 46.14%; width: 36.376%; height: 13.01%; } /* desafia     · chamado     17·57.78 */
.cam-e4 { left: 43.047%; top: 33.27%; width: 37.058%; height: 12.95%; } /* apoio       · mentores    59·45.56 */
.cam-e5 { left: 65.152%; top: 16.19%; width: 37.046%; height: 14.13%; } /* destino     · mundo_atual 81·28.89 */
.cam-e6 { left: 33.638%; top: 2.03%;  width: 37.978%; height: 10.09%; } /* quem_sou    · resistencia 52.63·11.09 */
.cam-e7 { left: 26.862%; top: 67.40%; width: 36.395%; height: 12.97%; } /* construindo · proposito — 23.10.67 desceu */

/* ── o painel da estação ────────────────────────────────────────────────
   Abre POR BAIXO da paisagem, no lugar onde a .bus-fold abre na Bússola:
   nunca sobre a arte. Cartão branco sobre o creme, mesma gramática dos
   p-card. */
.cam-panel { margin-top: 18px; background: var(--cam-sup, #fff); border: 1px solid var(--p-glass-border, #eadfc9);
  border-radius: 20px; padding: 20px 18px 16px;
  box-shadow: 0 8px 28px rgba(63, 58, 82, 0.08);
  animation: cam-rise .3s ease; }
@keyframes cam-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .cam-panel { animation: none; } }

.cam-panel-title { font-family: var(--mec-serif); font-weight: 400; font-size: 20px;
  color: var(--mec-plum, #43213f); margin: 0 0 4px; }
.cam-panel-q { font-size: var(--tf-corpo-2); color: var(--p-text-muted); margin: 0 0 14px; }

/* Rótulo de secção ("Já explorou" / "Pode experimentar") — só em Quem eu sou. */
.cam-sec-label { font-size: var(--tf-micro); letter-spacing: .08em; text-transform: uppercase;
  color: var(--p-text-soft, #a29dbb); margin: 14px 0 8px; }
.cam-sec-label:first-of-type { margin-top: 0; }

.cam-tools { display: flex; flex-direction: column; gap: 7px; }

/* Um cartão de ferramenta: ícone de traço (o MESMO da toolsHub — o Caminho
   não inventa vocabulário visual), nome de `tools.item.*.name`, e a leitura
   CONTEXTUAL da estação por baixo. */
.cam-tool { display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: var(--cam-recuo, #f9f6f0); border: 1px solid transparent; border-radius: 12px;
  cursor: pointer; transition: border-color .2s, background .2s, transform .2s;
  text-decoration: none; color: inherit; }
.cam-tool:hover { border-color: var(--mec-gold, #d9ab52); background: var(--cam-sup, #fff); transform: translateX(2px); }
.cam-tool-ic { width: 34px; height: 34px; border-radius: 9px; background: #f4e7c8;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--p-gold-deep, #b98d3e); }
.cam-tool-info { flex: 1; min-width: 0; display: block; }
/* O nome em TINTA, explícito: .cam-tool é um <a> e sem isto herdava o
   dourado dos links do patient.css — visto na prova, não suposto. */
.cam-tool-name { display: block; font-size: var(--tf-corpo-2); font-weight: 500; margin-bottom: 1px;
  color: var(--p-text, #3f3a52); }
.cam-tool-meta { display: block; font-size: 12px; color: var(--p-text-muted); line-height: 1.35; }
.cam-tool-arrow { color: var(--p-text-soft, #a29dbb); flex-shrink: 0; display: flex; }

/* A recomendação contextual — a ponte estação → contexto → ferramenta.
   Tracejada de propósito: é um convite a atravessar, não um item da casa. */
.cam-rec { display: block; padding: 10px 12px; margin-top: 6px;
  background: var(--cam-recuo, #f9f6f0); border: 1px dashed var(--p-glass-border, #eadfc9); border-radius: 12px;
  font-size: var(--tf-legenda); color: var(--p-text-muted); line-height: 1.4;
  text-decoration: none; cursor: pointer; transition: border-color .2s; }
.cam-rec:hover { border-color: var(--mec-gold, #d9ab52); }
.cam-rec strong { color: var(--p-text, #3f3a52); font-weight: 500; }

.cam-ver-todas { display: block; text-align: center; margin-top: 12px; padding: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--p-gold-deep, #b98d3e); text-decoration: none; }
.cam-ver-todas:hover { text-decoration: underline; text-underline-offset: 3px; }

.cam-panel-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--p-glass-border, #eadfc9);
  font-size: 12.5px; color: var(--p-text-soft, #a29dbb); line-height: 1.45; }

/* —— O que estou construindo: a única estação que não abre ferramenta.
   Abre o Livro — e o painel inteiro vira esse gesto. */
.cam-panel.livro { text-align: center; padding: 24px 18px 22px; }
.cam-panel.livro .cam-panel-title { margin-bottom: 6px; }
.cam-panel.livro .cam-panel-q { margin-bottom: 14px; }
.cam-livro-p { font-size: var(--tf-corpo-2); color: var(--p-text-muted); line-height: 1.5;
  max-width: 300px; margin: 0 auto 18px; }
.cam-livro-btn { display: inline-flex; align-items: center; gap: 8px;
  background: var(--mec-gold, #d9ab52); border: 1px solid var(--p-gold-deep, #b98d3e); color: #41340f;
  padding: 12px 22px; border-radius: 999px; font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; transition: transform .2s, box-shadow .2s; }
.cam-livro-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(185, 141, 62, .3); }
@media (prefers-reduced-motion: reduce) { .cam-livro-btn, .cam-livro-btn:hover { transform: none; transition: none; } }

/* O lembrete do destino, por baixo de tudo — o Livro recolhe o Caminho. */
.cam-foot-note { text-align: center; font-size: 12.5px; color: var(--p-text-soft, #a29dbb);
  margin: 24px auto 0; line-height: 1.5; }

/* ── o fio de uma reflexão ───────────────────────────────────────────────
   (Bloco da 23.9.x, usado por renderPhaseBlock em journey.js. O journeyHub
   deixou de o montar na 23.10.29, mas o bloco e as suas classes ficam: o
   gesto de declarar contexto vai voltar noutra tela — por decidir se na
   Bússola — e esta é a sua roupa. Prefixo `cam-refl-` próprio, não colide
   com nada.)
   ───────────────────────────────────────────────────────────────────────── */
.cam-refl { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ece2ce; }
.cam-refl:last-child { border-bottom: 0; margin-bottom: 0; }

/* A pergunta: serifada, 17px, tinta cheia — 10:1. É um convite, não um rótulo. */
.cam-refl-q { font-family: var(--mec-serif); font-size: var(--tf-pergunta); line-height: 1.35;
  color: var(--p-text); margin: 0 0 10px; }

/* A data é PROVENIÊNCIA, não medida: diz quando foi escrito, não há quanto
   tempo nem quantas vezes. */
.cam-refl-quando { font-size: var(--tf-legenda); color: var(--p-text-muted); margin: 0 0 4px; }

/* O que ela escreveu — o texto mais importante do bloco, e o mais forte. */
.cam-refl-resp { font-size: var(--tf-corpo); line-height: 1.6; color: var(--p-text);
  border-left: 2px solid var(--mec-gold, #d9ab52); padding: 2px 0 2px 14px; margin: 0;
  white-space: pre-wrap; }
.cam-refl-resp.antes { border-left-color: #e3d3ae; color: var(--p-text-muted); font-size: var(--tf-corpo-2); }

/* "Escrever de novo" não é um botão igual aos outros: é uma porta, e uma
   porta fechada não se anuncia. */
.cam-refl-mais { display: inline-block; margin-top: 12px; background: none; border: 0;
  font: inherit; font-size: var(--tf-corpo-2); font-weight: 600; color: var(--p-gold-deep, #b98d3e);
  padding: 6px 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #e0cfa4; }
.cam-refl-mais:hover { color: var(--mec-plum); }

.cam-refl-escrever { display: none; margin-top: 12px; }
.cam-refl-escrever.on { display: block; }
/* 16px não é estética: abaixo disso o iOS dá zoom ao focar o campo. */
#app-shell.patient-mode .cam-refl-escrever textarea { font-size: var(--tf-campo); min-height: 96px;
  background: #fff; border: 1.5px solid var(--mec-gold, #d9ab52); border-radius: 14px; padding: 12px 14px; }
.cam-refl-guardar { margin-top: 10px; width: 100%; font: inherit; font-size: var(--tf-acao); font-weight: 700;
  padding: 12px 18px; border-radius: 14px; cursor: pointer;
  background: var(--mec-gold, #d9ab52); border: 1px solid #b98d3e; color: #41340f; }
.cam-refl-guardar:hover { background: #cfa04a; }
.cam-refl-guardar:disabled { opacity: .6; cursor: default; }

.cam-refl-antes { margin-top: 14px; }
.cam-refl-antes summary { cursor: pointer; font-size: var(--tf-legenda); color: var(--p-text-muted);
  list-style: none; padding: 5px 0; }
.cam-refl-antes summary::-webkit-details-marker { display: none; }
.cam-refl-antes summary::before { content: "\25B8 "; color: var(--mec-gold, #d9ab52); }
.cam-refl-antes[open] summary::before { content: "\25BE "; }
.cam-refl-antes summary:hover { color: var(--mec-plum); }

/* —— Quem eu sou §13 — nascimento, janela, memória —— */
.cam-birth {
  background: var(--cam-med, #fdfaf3); border: 1px solid var(--p-glass-border, #eadfc9);
  border-radius: 16px; padding: 18px 16px 16px; margin-bottom: 8px;
}
.cam-birth-lede {
  font-size: var(--tf-corpo-2, 15px); color: var(--p-text, #3f3a52);
  line-height: 1.5; margin: 0 0 14px; max-width: 36ch;
}
.cam-birth-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--p-text-muted);
  letter-spacing: .04em; margin-bottom: 8px;
}
.cam-birth-input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--p-glass-border, #eadfc9);
  border-radius: 12px; font-size: 16px; font-family: inherit; color: var(--p-text, #3f3a52);
  background: #fff; margin-bottom: 12px;
}
.cam-birth-input:focus {
  outline: none; border-color: var(--t-caminho-accent, #7b62a8); box-shadow: 0 0 0 3px rgba(123,98,168,.15);
}
.cam-birth-btn {
  display: block; width: 100%; padding: 12px 16px; border: 0; border-radius: 12px;
  background: var(--t-caminho-accent, #7b62a8); color: #fff; font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.cam-birth-btn:disabled { opacity: .6; cursor: wait; }

.cam-expand { margin-top: 4px; }
.cam-expand-btn {
  background: none; border: 0; cursor: pointer; font-family: inherit; width: 100%;
}
.cam-expand-body { margin-top: 8px; }
/* 23.10.43-c · o `hidden` do JS tem de VENCER o display das classes.
   `.cam-expand-body` traz também `.cam-tools`, que é `display: flex` — e uma
   regra de autor ganha sempre ao `display:none` que o browser dá a [hidden].
   Medido antes de publicar: os dois blocos tinham `hidden = true` e
   `getComputedStyle().display = flex`, ou seja, as 2 leituras extra e as 4
   perspectivas extra apareciam SEMPRE e o botão "Ver todas" só trocava de
   texto. Isso é o catálogo que esta página existe para não ser. */
.cam-expand-body[hidden] { display: none; }

/* O bloco "ver mais" da memória escondia-se bem (não tinha display próprio),
   mas ABERTO empilhava os itens sem respiro, porque também não era flex.
   Ganha o mesmo par: layout quando aberto, ausência quando escondido. */
.cam-memory-more { display: flex; flex-direction: column; gap: 8px; }
.cam-memory-more[hidden] { display: none; }

.cam-janela {
  margin: 22px 0 8px; padding: 16px 12px; text-align: center;
  border-top: 1px solid var(--p-glass-border, #eadfc9);
  border-bottom: 1px solid var(--p-glass-border, #eadfc9);
}
.cam-janela-p {
  font-family: var(--mec-serif); font-size: 16px; color: #43213f;
  line-height: 1.45; font-style: italic; margin: 0;
}
.cam-janela-sub {
  font-family: inherit; font-style: normal; font-size: 13px;
  color: var(--p-text-muted); margin: 8px 0 0;
}

.cam-memory { display: flex; flex-direction: column; gap: 8px; }
.cam-memory-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 12px; background: var(--cam-med, #fdfaf3); border: 1px solid var(--p-glass-border, #eadfc9);
  border-radius: 12px; text-decoration: none; color: inherit;
}
.cam-memory-item:hover { border-color: var(--mec-gold, #d9ab52); }
.cam-memory-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mec-gold, #d9ab52);
  margin-top: 6px; flex-shrink: 0;
}
.cam-memory-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cam-memory-title { font-size: 14px; font-weight: 600; color: var(--p-text, #3f3a52); }
.cam-memory-when { font-size: 12px; color: var(--p-text-soft, #a29dbb); }
.cam-memory-line { font-size: 13px; color: var(--p-text-muted); line-height: 1.4; }
/* 23.10.46 — cada memória diz para onde vai. O histórico completo vive na
   página da ferramenta; este cartão é a porta para lá. */
.cam-memory-go {
  margin-top: 4px; font-size: 13px; font-weight: 600;
  color: var(--t-caminho-text, #755ba4);
}
.cam-memory-toggle {
  align-self: flex-start; margin-top: 4px; background: none; border: 0;
  color: #755ba4; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  padding: 0;
}


/* —— Porta no painel do Caminho —— */
.cam-porta-lede {
  font-size: var(--tf-corpo-2, 15px); color: var(--p-text, #3f3a52);
  line-height: 1.45; margin: 0 0 10px; max-width: 38ch;
}
.cam-porta-body {
  font-size: 13.5px; color: var(--p-text-muted); line-height: 1.5;
  margin: 0 0 14px; max-width: 42ch;
}
.cam-porta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.cam-porta-chip {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  background: var(--cam-recuo, #f9f6f0); border: 1px solid var(--p-glass-border, #eadfc9);
  color: var(--p-text-muted);
}
/* 23.10.44 — o bloco "já começou a descobrir-se" deixa o creme próprio
   (#fffdf8 com borda cheia, que na tela lia-se como uma caixa amarela) e
   passa a vestir A MESMA PELE do cartão de recomendação (`.cam-rec`, o do
   "Explore também a Janela de Johari"): fundo #f9f6f0, borda TRACEJADA e
   tipografia de legenda. Pedido da titular, 19/08. Os dois blocos dizem a
   mesma classe de coisa — uma pista lateral, não uma ação — e agora
   parecem-se. */
.cam-porta-started {
  margin: 0 0 14px; padding: 10px 12px; background: var(--cam-recuo, #f9f6f0);
  border: 1px dashed var(--p-glass-border, #eadfc9); border-radius: 12px;
  font-size: var(--tf-legenda); color: var(--p-text-muted); line-height: 1.4;
}
.cam-porta-started-lbl {
  font-size: var(--tf-micro, 11px); letter-spacing: .08em; text-transform: uppercase;
  color: var(--p-text-soft, #a29dbb); font-weight: 600; margin-bottom: 4px;
}
/* Os nomes ganham o mesmo destaque que o `strong` do `.cam-rec`: tinta
   cheia e peso 500 — o resto do bloco fica em texto de apoio. */
.cam-porta-started-list { font-size: var(--tf-legenda); color: var(--p-text, #3f3a52);
  font-weight: 500; line-height: 1.4; }
.cam-porta-started-hint {
  margin: 4px 0 0; font-size: var(--tf-legenda); color: var(--p-text-muted); line-height: 1.4;
}
.cam-porta-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 16px; border: 0; border-radius: 12px;
  /* 23.10.44 — era `#7b62a8` à mão. É exatamente o `--t-caminho-accent`, a
     cor da casa do Caminho (hoje.css) — a titular confirmou que o botão
     deve ser roxo por isso mesmo. Passa a chamar-se pelo nome. */
  background: var(--t-caminho-accent, #7b62a8); color: #fff; font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  text-decoration: none;
}
a.cam-porta-cta,
a.cam-porta-cta:link,
a.cam-porta-cta:visited,
a.cam-porta-cta:hover,
a.cam-porta-cta:active {
  color: #fff !important; /* 23.10.67 — links herdavam o dourado de patient.css */
  text-decoration: none;
}
.cam-porta-cta:hover { filter: brightness(1.05); }

/* 23.10.67 — estação Quem caminha comigo: espaço entre cartões empilhados */
.col-esq > .cam-tool + .cam-tool,
.col-dir > .cam-tool + .cam-tool {
  margin-top: 12px;
}
.col-esq > .cam-sec-label {
  margin-top: 22px;
}
.col-esq > .cam-sec-label:first-child {
  margin-top: 0;
}
.col-dir > .cam-tool {
  margin-bottom: 0;
}

/* —— A COMPOSIÇÃO DA SALA (23.10.51) ————————————————————————————————————
   `SPEC_PREMISSA_COMPOSICAO_ESTACAO_MIC360.md`.

   O que estava errado não era o `.est-wrap` de 560px — era o `main#view`,
   que para uma estação ficava nos 520px da base (`--p-max-w`). O wrap de
   560 nunca chegava a aplicar-se: a sala aparecia num monitor de 1505px
   como uma coluna de 464px. *"Parece uma interface pensada para tablet
   sendo exibida num monitor grande"* — e era literalmente isso.

   A REGRA, em duas etapas: primeiro o CONTEÚDO autoriza, só depois a
   largura decide se cabe.

     duas colunas ⟺ a coluna da memória tem pelo menos uma memória

   A regra NÃO olha para o Termómetro de propósito. A primeira versão
   exigia também que a esquerda tivesse mais do que um gesto — e isso fazia
   a página inteira mudar de arrumação no dia em que o retrato vencesse,
   sem a pessoa ter feito nada. Uma tela que se reorganiza sozinha assusta
   mais do que uma coluna curta. **A composição é estável; varia o
   conteúdo dentro dela.**

   Sem memória, a coluna direita não existe — nem com rótulo. É a regra das
   secções vazias da premissa dos ritmos, aplicada ao layout. */
.est-wrap { max-width: none; margin: 0; padding: 8px 0 48px; }

.est-grid {
  display: grid; grid-template-columns: 1fr; gap: 0 34px; align-items: start;
  /* UMA coluna: 760px. Não são os 88% da área útil de propósito — acima
     disto a linha de texto deixa de se ler, e a largura só é argumento
     quando há duas colunas para a justificar. */
  max-width: 760px; margin-left: 0; margin-right: 0;
}
.est-grid.duas { max-width: 1120px; }   /* ~88% da área útil a 1505 */
/* 23.10.52 — O CABEÇALHO É UMA LINHA, NÃO UMA COLUNA.
   Até à 23.10.51 o voltar + o nome + a pergunta viviam dentro da coluna
   esquerda. Consequência: a coluna da memória começava no topo da grelha,
   à altura do `← Caminho`, enquanto os quatro sinais só começavam depois
   do bloco do título. As duas colunas nasciam desencontradas e sobrava um
   vazio no alto da direita. *"Ficou estranho"* — e estava.
   O cabeçalho é da PÁGINA, não da coluna: passa a linha própria a toda a
   largura, e as duas colunas arrancam ambas por baixo dele — os sinais à
   esquerda, `O QUE FICOU DESTES DIAS` à direita, no mesmo `y`.
   É a mesma gramática que o território já usava: `.cam-head` com
   `grid-column: 1 / -1` em `journeyHub`. */
.est-topo { grid-column: 1 / -1; min-width: 0; }
.col-esq { grid-column: 1; min-width: 0; }
.col-dir { grid-column: 1; min-width: 0; margin-top: 30px; }

/* Container query, não media query: a composição responde à ÁREA ÚTIL, e a
   barra lateral de 234px não pode enganar a conta (lição medida na
   23.10.22, em que o harness sem lateral mentiu sobre as larguras). */
#app-shell.estacao-view main#view { container-type: inline-size; }
@container (min-width: 1000px) {
  .est-grid.duas { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
  .est-grid.duas .col-dir { grid-column: 2; margin-top: 0; }
}
@container (max-width: 999px) { .est-grid, .est-grid.duas { max-width: 720px; } }
@container (max-width: 699px) { .est-grid, .est-grid.duas { max-width: 560px; } }

/* O aviso fica fora da grelha, com medida de leitura própria. */
#est-disc { max-width: 760px; margin-top: 26px; }
.est-back {
  background: none; border: 0; color: var(--p-gold-deep, #b98d3e);
  font-size: 14px; cursor: pointer; font-family: inherit; padding: 0 0 16px;
}
/* 23.10.45 — CONVENÇÃO DE CABEÇALHOS (ver SPEC_PREMISSA_CABECALHOS_MIC360.md):
   a página de PRIMEIRA (o território) usa o símbolo grande e solto — 56px,
   sem moldura, ao lado do bloco de texto (`.cam-head .sym`). A página
   INTERNA (a sala) usa o MESMO ícone da casa em medalhão pequeno, na linha
   do eyebrow: exatamente a gramática do Livro (`.p-est-eyebrow` +
   `.p-est-eyebrow-ic`, patient.css) — 22px de medalhão, glifo de 12px,
   `gap: 8px`. Muda a cor, não a forma: o Livro é dourado, o Caminho é a
   sua casa (`--t-caminho-text`). Pedido da titular, 19/08: "faltou o ícone
   do caminho, do mesmo jeito que está no livro". */
.est-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--tf-micro, 11px); letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--t-caminho-text, #755ba4); margin: 0 0 6px;
}
.est-eyebrow-ic {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(145deg, #efeaf7, #ded3ee);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--t-caminho-text, #755ba4);
  /* o letter-spacing do eyebrow não pode empurrar o glifo dentro do disco */
  letter-spacing: 0;
}
.est-title {
  font-family: var(--mec-serif); font-weight: 400; font-size: 28px;
  color: var(--mec-plum, #43213f); margin: 0 0 6px; line-height: 1.2;
}
/* A pergunta da estação, por baixo do nome — o lugar que tem no Caminho e
   no mock. Mesma escala da lede do território. */
.est-question {
  margin: 0 0 22px; font-size: var(--tf-corpo-2); line-height: 1.5;
  color: var(--p-text-muted); max-width: 42ch;
}


/* —— Os QUATRO SINAIS cotidianos (23.10.49) ————————————————————————————
   Humor · Sono · Gratidão · Cuidado com o corpo. Cada um abre a folha de
   check-in que já existe e grava o seu campo em `daily_checkins`.

   Regra da titular: **sem XP visível, sem percentagem, sem ranking.** Cada
   sinal mostra só o SEU estado do dia — feito ou por fazer — e nada mais.
   Por isso o estado é uma diferença de tinta, não um número: o disco passa
   ao roxo da casa e ganha um contorno cheio. Quem cumpriu vê que cumpriu;
   quem não cumpriu não vê uma dívida contada.

   Quatro colunas iguais em qualquer largura: a 320px cada uma tem ~70px, o
   que chega para o disco de 44px e um nome curto. */
.cam-sinais {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 0 0 16px;
}
.cam-sinal {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px 10px; border-radius: 14px; cursor: pointer;
  background: var(--cam-recuo, #f9f6f0); border: 1px solid transparent;
  font-family: inherit; transition: border-color .2s, background .2s;
}
.cam-sinal:hover { border-color: var(--mec-gold, #d9ab52); background: var(--cam-sup, #fff); }
.cam-sinal-ic {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cam-sup, #fff); border: 1px solid var(--p-glass-border, #eadfc9);
  color: var(--p-text-soft, #a29dbb);
}
.cam-sinal-nome {
  font-size: var(--tf-micro, 11px); line-height: 1.2; text-align: center;
  color: var(--p-text-muted); font-weight: 500;
}
/* Feito hoje: o sinal veste a cor da casa. Sem número, sem selo. */
.cam-sinal.feito .cam-sinal-ic {
  background: var(--t-caminho-accent, #7b62a8); border-color: var(--t-caminho-accent, #7b62a8);
  color: #fff;
}
.cam-sinal.feito .cam-sinal-nome { color: var(--t-caminho-text, #755ba4); font-weight: 600; }
@media (max-width: 360px) { .cam-sinal { padding: 10px 2px 8px; } .cam-sinal-ic { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .cam-sinal { transition: none; } }

/* O Diário é gesto diário PERMANENTE: não vive sob "outras formas de olhar"
   (23.10.49). Fica logo abaixo da caixa, sem rótulo de secção — é o único
   destes elementos que recebe uma entrada nova todos os dias. */
.cam-tools-diario { margin-top: 10px; }

/* —— Sala Como estou hoje —— o TOPO (23.10.46) ————————————————————————
   Premissa dos ritmos (`SPEC_PREMISSA_RITMOS_ESTACAO_MIC360.md`): aqui vive
   UM ÚNICO gesto. Por isso o herói perdeu, na 23.10.46, a data da última
   vez (`.est-hero-when`) e a citação do diário (`.est-hero-line`): isso é
   estado, e estado é memória — mora lá em baixo. O topo é um convite, não
   um relatório. */
.est-hero {
  background: var(--cam-sup, #fff); border: 1px solid var(--p-glass-border, #eadfc9);
  border-radius: 20px; padding: 22px 20px 20px;
  box-shadow: 0 8px 28px rgba(63, 58, 82, 0.08);
  margin-bottom: 8px;
}
/* O nome do gesto. Serifado como um título — é a única coisa que a pessoa
   tem de ler para saber o que a estação lhe propõe hoje. */
.est-hero-titulo {
  font-family: var(--mec-serif); font-size: 19px; font-weight: 400;
  color: var(--mec-plum, #43213f); line-height: 1.3; margin: 0 0 8px;
}
.est-hero-q {
  font-size: var(--tf-corpo-2, 15px); color: var(--p-text, #3f3a52);
  line-height: 1.5; margin: 0 0 16px; max-width: 38ch;
}
.est-hero-note {
  font-size: 13.5px; color: var(--p-text-muted); line-height: 1.45; margin: 0 0 16px;
  max-width: 42ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   23.10.56/57/58 · A SALA DO CULTIVAR
   --------------------------------------------------------------------------
   Decisão da titular (20/08), e é ela que explica cada regra abaixo:

     «Cultivar é a sala daquilo que a pessoa escolheu SUSTENTAR. Não é o
      lugar dos desafios — é o lugar ONDE CHEGAM as coisas que ela decidiu
      cultivar.»

   Por isso não há aqui grelha de catálogo, nem cartões de domínio, nem
   contadores. Há uma lista curta de gestos e o rastro do dia. A regra
   conceitual da estação, nas palavras dela:

     **«O que você cultiva cresce na constância.»**

   A composição é a das outras duas salas — `.est-topo`, `.col-esq`,
   `.col-dir` já existem desde a 23.10.51/52. Este bloco só acrescenta as
   PEÇAS de dentro.
   ══════════════════════════════════════════════════════════════════════════ */

/* —— o cartão do começo (nada em cultivo) ——————————————————————————— */
.cam-porta-card {
  background: var(--cam-sup, #fff); border: 1px solid var(--p-glass-border, #eadfc9);
  border-radius: 20px; padding: 20px 18px; box-shadow: 0 8px 28px rgba(63, 58, 82, .08);
  margin-bottom: 16px;
}
.cam-porta-kicker {
  font-size: var(--tf-micro, 11px); letter-spacing: .1em; text-transform: uppercase;
  color: var(--p-gold-deep, #b98d3e); font-weight: 700; margin-bottom: 14px;
}
.cam-porta-kicker.suave { color: var(--p-text-soft, #a29dbb); margin: 18px 0 6px; }
.cam-porta-card .cam-porta-lede { font-size: var(--tf-corpo-2); color: var(--p-text); margin-bottom: 8px; max-width: 38ch; }
.cam-porta-card .cam-porta-body { font-size: 13.5px; color: var(--p-text-muted); margin-bottom: 16px; line-height: 1.45; }
/* O segundo caminho é um gesto SECUNDÁRIO, e tem de se ler como tal: o
   começo do Cultivar é uma prática, não um catálogo. */
.cam-porta-alt {
  display: block; margin-top: 12px; background: none; border: 0; padding: 0;
  color: var(--t-caminho-text, #755ba4); font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer; text-align: left;
}
.cam-porta-alt:hover { text-decoration: underline; }

/* —— os passos de hoje —————————————————————————————————————————————— */
.cam-passos-card {
  background: var(--cam-sup, #fff); border: 1px solid var(--p-glass-border, #eadfc9);
  border-radius: 20px; padding: 20px 18px; box-shadow: 0 8px 28px rgba(63, 58, 82, .08);
  margin-bottom: 16px;
}
/* 23.10.58 — `.cam-passo-destaque` VOLTOU. A 57 tinha-o tirado por uma
   leitura minha do esboço da titular; o mock tem-no, e o mock ganha. O
   desafio é o gesto que ela escolheu sustentar por 21 dias, não mais um
   item da lista. */
.cam-passo-destaque {
  padding: 12px 12px 8px; border-radius: 14px; margin-bottom: 4px;
  background: var(--cam-med, #fdfaf3); border: 1px solid var(--p-glass-border, #eadfc9);
}
.cam-passos { display: block; }
/* 23.10.58 — a linha volta a SAIR depois de marcada, como no mock. O
   `max-height` está de volta porque a animação precisa dele; fica generoso
   (200px) para que uma instrução comprida não seja cortada a meio — foi
   por causa disso que a 57 lhe mexeu. */
.cam-passo {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 10px 4px; border: 0; border-bottom: 1px solid #f0ebe1; background: none;
  font-family: inherit; cursor: pointer; overflow: hidden;
  transition: opacity .25s ease, max-height .3s ease, padding .3s, margin .3s;
  max-height: 200px;
}
.cam-passo:last-child { border-bottom: 0; }
.cam-passo.feito { cursor: default; }
.cam-passo.saindo {
  opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border: 0;
}

/* «+ N outras práticas» — um REVELAR, não uma porta. Nada aqui tira a
   pessoa da página para dar um passo pequeno. */
.cam-mais {
  display: block; margin-top: 10px; background: none; border: 0; padding: 2px 0;
  font-family: inherit; cursor: pointer; text-align: left;
  font-size: 13.5px; font-weight: 600; color: var(--t-caminho-text, #755ba4);
}
.cam-mais:hover { text-decoration: underline; }
.cam-extra[hidden] { display: none; }

/* O cartão do território. É um cartão e não um link de propósito: a
   diferença entre «mais uma coisa para fazer» e «uma coisa para
   experimentar, que só fica se ela quiser» está no tamanho e no subtítulo. */
.cam-porta-jogo {
  display: flex; gap: 14px; align-items: center; width: 100%; text-align: left;
  margin-top: 8px; padding: 16px 16px; border-radius: 18px; cursor: pointer;
  font-family: inherit;
  background: linear-gradient(180deg, #f6f2fb 0%, #f2edf9 100%);
  border: 1px solid #e3d9f2;
}
.cam-porta-jogo:hover { border-color: #d4c4e8; }
.cam-pj-ic {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cam-sup, #fff); color: var(--t-caminho-accent, #7b62a8);
}
.cam-pj-body { min-width: 0; }
.cam-pj-t { display: block; font-size: var(--tf-corpo-2); font-weight: 600; color: var(--mec-plum, #43213f); }
.cam-pj-s { display: block; font-size: 13px; color: var(--p-text-muted); margin-top: 3px; line-height: 1.4; }
.cam-check {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid #cfc5b0; background: var(--cam-sup, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; transition: background .18s, border-color .18s, color .18s;
}
.cam-passo:hover .cam-check { border-color: var(--t-caminho-accent, #7b62a8); }
.cam-passo.feito .cam-check {
  background: var(--t-caminho-accent, #7b62a8); border-color: var(--t-caminho-accent, #7b62a8); color: #fff;
}
.cam-passo-body { flex: 1; min-width: 0; }
.cam-passo-nome { display: block; font-size: var(--tf-corpo-2); font-weight: 600; line-height: 1.3; color: var(--p-text); }
.cam-passo-origem { display: block; font-size: 12px; color: var(--p-text-soft, #a29dbb); margin-top: 2px; }
.cam-passo-instr { display: block; font-size: 13px; color: var(--p-text-muted); margin-top: 4px; line-height: 1.35; }

/* 23.10.57 — AQUI HAVIA UM CONTADOR, e foi de propósito que saiu.
   A esquerda mostrava «Em cultivo · 1 desafio · 5 hábitos». Palavras da
   titular: «isso já está nos levando novamente para a lógica de
   inventário». Contar o que se cultiva é a mesma doença de contar o que
   falta — e o jardim passou para a direita, onde se vê pelos nomes.
   (`.cam-em-cultivo*` desapareceu do CSS e do JS na mesma release.) */

/* —— o reconhecimento (nada por fazer) —————————————————————————————— */
.cam-feito-banner {
  display: flex; gap: 12px; align-items: flex-start; padding: 18px 16px;
  border-radius: 16px; background: #f7f3ea; border: 1px solid var(--p-glass-border, #eadfc9);
  margin-bottom: 16px;
}
.cam-feito-banner-ic { color: var(--t-caminho-accent, #7b62a8); flex-shrink: 0; margin-top: 1px; }
.cam-feito-banner-t { display: block; font-size: var(--tf-corpo-2); font-weight: 600; color: var(--mec-plum, #43213f); margin-bottom: 4px; }
.cam-feito-banner-s { display: block; font-size: 13.5px; color: var(--p-text-muted); }

/* —— a coluna da direita: O QUE ESTÁ EM CULTIVO ————————————————————————
   23.10.57 — era «Já praticou hoje», o rastro das últimas horas. Passa a
   ser o que está DE PÉ. As classes ficaram com o nome antigo (`cam-feito*`)
   porque renomeá-las custaria uma varredura de risco sem ganho nenhum de
   ecrã; o ícone é que mudou, de visto para rebento. */
.cam-feitos {
  background: var(--cam-sup, #fff); border: 1px solid var(--p-glass-border, #eadfc9);
  border-radius: 20px; padding: 18px 16px; box-shadow: 0 8px 28px rgba(63, 58, 82, .08);
}
/* ⚠️ 23.10.57 — a régua era `border-bottom` + `.cam-feito:last-of-type`.
   `:last-of-type` conta pelo TIPO do elemento, não pela classe: com o pé
   (`.cam-feitos-foot`, também um `div`) a entrar no cartão, o último
   `.cam-feito` deixou de ser o último `div` e ficou com a sua risca — logo
   por cima da risca do pé. Duas linhas coladas, apanhadas no ecrã.
   A régua passa a viver ENTRE irmãos: não há última risca para apagar. */
.cam-feito { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; }
.cam-feito + .cam-feito { border-top: 1px solid #f0ebe1; }
.cam-feito-ic { color: var(--t-caminho-accent, #7b62a8); flex-shrink: 0; margin-top: 2px; }
.cam-feito-body { min-width: 0; }
.cam-feito-nome { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.cam-feito-origem { display: block; font-size: 12px; color: var(--p-text-soft, #a29dbb); margin-top: 2px; }
/* O pé do cartão leva as portas para a lista inteira. Cada porta diz o que
   abre — ver a nota no JS sobre porque não diz «ver tudo». */
.cam-feitos-foot {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0ebe1;
  font-size: 12.5px; color: var(--p-text-muted); line-height: 1.45;
}
.cam-cultivo-go {
  display: block; background: none; border: 0; padding: 2px 0; text-align: left;
  font-family: inherit; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--t-caminho-text, #755ba4);
}
.cam-cultivo-go:hover { text-decoration: underline; }

/* A regra da estação, uma única vez, no pé da coluna. Serifada e em itálico
   como as outras frases de fecho da casa (`.cam-foot-note`): é voz do
   produto, não instrução. */
.cam-regra {
  margin: 22px 0 0; font-family: var(--mec-serif, Georgia, serif); font-style: italic;
  font-size: 14px; color: var(--p-text-soft, #a29dbb); text-align: center;
}

/* —— a tira da Roda (23.10.58) —————————————————————————————————————————
   Discreta de propósito: a Roda informa o começo, não compete com o passo
   de hoje. Um cartão aqui faria a sala ter dois gestos principais, e a
   premissa dos ritmos diz que há UM. */
.cam-roda-tira {
  margin-top: 14px; padding: 14px 16px; border-radius: 16px;
  background: var(--cam-recuo, #f9f6f0); border: 1px dashed var(--p-glass-border, #eadfc9);
}
.cam-roda-t { display: block; font-size: 14px; font-weight: 600; color: var(--mec-plum, #43213f); }
.cam-roda-s { display: block; font-size: 13px; color: var(--p-text-muted); margin-top: 3px; line-height: 1.45; }
.cam-roda-go {
  display: block; margin-top: 8px; background: none; border: 0; padding: 0; text-align: left;
  font-family: inherit; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--t-caminho-text, #755ba4);
}
.cam-roda-go:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   23.10.61 · O TERRITÓRIO DAS EXPERIÊNCIAS  (#/p/desafios)

   ⚠️ NÃO HÁ AQUI NENHUMA REGRA DE DUAS COLUNAS, e é de propósito. Enquanto a
   experiência corre, é UMA coluna: ver o que já fez ao lado faz escolher e
   responder como quem já escolheu antes.

   ⚠️ E NÃO HÁ BARRA DE PROGRESSO, percentagem, medalha nem nível. A página
   que isto substitui (Release 7) tinha-os todos.
   ══════════════════════════════════════════════════════════════════════════ */

/* —— as doze áreas ————————————————————————————————————————————————————
   O desenho é o do mock da titular: barra de cor à esquerda, ícone num
   disco tingido, nome, mote, e o que já foi vivido. Os quadros são MAIS
   PEQUENOS do que no mock (pedido dela) — com doze áreas em vez de seis, o
   tamanho de lá punha metade do território abaixo da dobra. */
.terr-areas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px; margin-bottom: 26px;
}
.terr-area {
  display: block; text-align: left; cursor: pointer; font-family: inherit;
  padding: 13px 14px 12px; border-radius: 14px;
  background: var(--cam-sup, #fff);
  border: 1px solid var(--p-glass-border, #eadfc9);
  /* a cor da área entra pela borda esquerda — é ela que dá o território */
  border-left: 3px solid var(--c, var(--t-caminho-accent, #7b62a8));
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.terr-area:hover {
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(63, 58, 82, .09);
  border-color: var(--p-glass-border, #eadfc9);
  border-left-color: var(--c, var(--t-caminho-accent, #7b62a8));
}
.terr-area-ic {
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c, var(--t-caminho-accent, #7b62a8));
  /* 12% da cor da área sobre o branco: tinge sem gritar. O `background`
     antes do `color-mix` é o que fica se o motor não o souber. */
  background: var(--cam-recuo, #f9f6f0);
  background: color-mix(in srgb, var(--c, #7b62a8) 12%, #fff);
}
.terr-area-n { display: block; font-size: 14.5px; font-weight: 600; color: var(--mec-plum, #43213f); line-height: 1.25; }
.terr-area-m { display: block; font-size: 11.5px; color: var(--p-text-soft, #a29dbb); margin-top: 3px; line-height: 1.35; }
/* ⚠️ «ainda por abrir» é um CONVITE, não um zero — e por isso não tem a cor
   da área nem o peso dela. Um «0 vividos» seria um placar, e um placar é a
   única coisa que este ecrã não pode ter. */
.terr-area-v {
  display: block; margin-top: 8px; font-size: 11.5px; font-weight: 600;
  color: var(--c, var(--t-caminho-accent, #7b62a8));
}
.terr-area-v.suave { font-weight: 400; color: var(--p-text-soft, #a29dbb); }

/* Os cartões do domínio e da experiência herdam a cor da área, pelo mesmo
   gesto: uma barra à esquerda, e nada mais. */
.terr-cartao.com-cor { border-left: 3px solid var(--c, var(--t-caminho-accent, #7b62a8)); }
.terr-cartao.com-cor .terr-chip:first-child {
  background: color-mix(in srgb, var(--c, #7b62a8) 12%, #fff);
  color: var(--c, var(--t-caminho-text, #755ba4));
  border-color: color-mix(in srgb, var(--c, #7b62a8) 26%, #fff);
}

.terr-tamanhos { display: block; }
.terr-tam {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  cursor: pointer; font-family: inherit; margin-bottom: 8px;
  padding: 14px; border-radius: 16px;
  background: var(--cam-med, #fdfaf3); border: 1px solid var(--p-glass-border, #eadfc9);
}
.terr-tam:hover { border-color: var(--t-caminho-accent, #7b62a8); }
.terr-tam-ic { color: var(--t-caminho-accent, #7b62a8); flex-shrink: 0; margin-top: 1px; }
.terr-tam-body { min-width: 0; }
.terr-tam-n { display: block; font-size: 15px; font-weight: 600; color: var(--mec-plum, #43213f); }
.terr-tam-s { display: block; font-size: 13px; color: var(--p-text-muted); margin-top: 3px; line-height: 1.4; }

.terr-cartao {
  background: var(--cam-sup, #fff); border: 1px solid var(--p-glass-border, #eadfc9);
  border-radius: 20px; padding: 18px 18px; margin-bottom: 16px;
  box-shadow: 0 8px 28px rgba(63, 58, 82, .08);
}
.terr-cartao.grande { padding: 24px 22px; }
.terr-topo { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.terr-chip {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px;
  background: #f0ebf7; color: var(--t-caminho-text, #755ba4); border: 1px solid #e3d9f2;
}
.terr-chip.neutro { background: var(--cam-recuo, #f9f6f0); color: var(--p-text-muted); border-color: var(--p-glass-border, #eadfc9); }
.terr-cartao-s { font-size: 13.5px; color: var(--p-text-muted); line-height: 1.45; margin: 0; }

.terr-exp-t {
  font-family: var(--mec-serif, Georgia, serif); font-size: 21px; line-height: 1.3;
  color: var(--mec-plum, #43213f); margin: 4px 0 10px; max-width: 30ch;
}
.terr-exp-s { font-size: 14px; color: var(--p-text-muted); line-height: 1.55; margin: 0 0 18px; max-width: 46ch; }
.terr-linha { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.terr-linha.centro { justify-content: center; }
.terr-linha .cam-porta-cta { width: auto; min-width: 160px; }
.terr-linha .cam-porta-alt { margin-top: 0; }
/* «Hoje não» também é uma resposta — dito baixinho, mas dito. */
.terr-saida { margin: 14px 2px 0; font-size: 13px; color: var(--p-text-soft, #a29dbb); }

/* —— a percepção —————————————————————————————————————————————————————— */
.terr-cartao.percep { text-align: center; }
.terr-perc-ic {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: #f0ebf7; color: var(--t-caminho-accent, #7b62a8);
}
.terr-perc-t { font-size: var(--tf-corpo-2); font-weight: 600; color: var(--mec-plum, #43213f); }
.terr-perc-q {
  font-family: var(--mec-serif, Georgia, serif); font-size: 19px; line-height: 1.35;
  color: var(--mec-plum, #43213f); margin: 6px 0 18px;
}
.terr-escolhas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.terr-esc {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit;
  font-size: 13.5px; padding: 9px 14px; border-radius: 999px;
  background: var(--cam-sup, #fff); border: 1px solid var(--p-glass-border, #eadfc9);
  color: var(--p-text); transition: background .16s, border-color .16s, color .16s;
}
.terr-esc-ic { color: var(--p-text-soft, #a29dbb); display: inline-flex; }
.terr-esc:hover { border-color: var(--t-caminho-accent, #7b62a8); }
/* ⚠️ TODAS AS CINCO TÊM O MESMO PESO. «Não mudou muito» não pode parecer a
   resposta errada — a premissa diz que é uma resposta tão boa como as outras,
   e um estilo mais apagado seria a interface a discordar disso. */
.terr-esc.on {
  background: var(--t-caminho-accent, #7b62a8); border-color: var(--t-caminho-accent, #7b62a8); color: #fff;
}
.terr-esc.on .terr-esc-ic { color: #fff; }
.terr-nota {
  display: block; width: 100%; margin: 0 0 16px; padding: 11px 14px;
  border-radius: 12px; border: 1px solid var(--p-glass-border, #eadfc9);
  background: var(--cam-recuo, #f9f6f0); font-family: inherit; font-size: 14px; color: var(--p-text);
  /* 23.10.78 — passou de <input> a <textarea>. `resize: vertical` porque
     alargar horizontalmente parte a coluna; `line-height` porque texto de
     várias linhas colado não se lê. */
  resize: vertical; line-height: 1.55; min-height: 76px;
}
.terr-nota:focus { outline: none; border-color: var(--t-caminho-accent, #7b62a8); }
.terr-devolve { margin: 14px 0 0; font-size: 12.5px; color: var(--p-text-soft, #a29dbb); }

/* —— a ponte ——————————————————————————————————————————————————————————
   ⚠️ «Deixar por aqui» partilha a classe das outras saídas, DE PROPÓSITO.
   Não é um «cancelar» cinzento-pequenino: é um desfecho como os outros.
   Experimentar 20 e cultivar 2 é evolução. */
.terr-saidas { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.terr-saida-b {
  display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  font-size: 14.5px; font-weight: 600; color: var(--t-caminho-text, #755ba4);
  padding: 13px 16px; border-radius: 14px;
  background: var(--cam-sup, #fff); border: 1px solid var(--p-glass-border, #eadfc9);
}
.terr-saida-b:hover { border-color: var(--t-caminho-accent, #7b62a8); }

/* 23.10.61 — rasto, tamanhos vazios, fim da troca */
.terr-rasto {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 8px 0 0; font-size: 12.5px; color: var(--p-text-soft, #a29dbb);
}
.terr-rasto-sep { color: var(--p-text-soft, #a29dbb); }
.terr-rasto-el {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--t-caminho-text, #755ba4); font-weight: 600;
}
button.terr-rasto-el:hover { text-decoration: underline; }
.terr-rasto-agora { color: var(--p-text-muted); font-weight: 500; }
.terr-tam.vazio {
  cursor: default; opacity: .55;
}
.terr-tam.vazio:hover { border-color: var(--p-glass-border, #eadfc9); }
.terr-tam-n-aqui {
  display: block; margin-top: 6px; font-size: 12px; font-weight: 600;
  color: var(--t-caminho-text, #755ba4);
}
.terr-tam-n-aqui.suave { font-weight: 400; color: var(--p-text-soft, #a29dbb); }
.terr-acabou { margin: 12px 2px 0; font-size: 13px; color: var(--p-text-soft, #a29dbb); }
.cam-mais-cultivo { margin-top: 4px; }
.cam-feitos-extra { }

/* 23.10.61 */
button.cam-feito-link {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  background: none; border: 0; padding: 10px 0; text-align: left;
  font: inherit; cursor: pointer; color: inherit;
}
.terr-tamanhos.cols { display: grid; gap: 8px; }
@media (min-width: 720px) { .terr-tamanhos.cols { grid-template-columns: 1fr 1fr 1fr; } }
.terr-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.terr-lista-scroll { max-height: 520px; overflow: auto; padding-right: 4px; }
.terr-sair {
  width: 100%; margin-top: 10px; padding: 12px; border-radius: 14px;
  border: 1px solid var(--p-glass-border, #eadfc9); background: #fff;
  color: var(--p-text-muted); font: inherit; font-size: 14px; cursor: pointer;
}
.wide-sheet { width: 100%; }
.p-sheet.terr-sheet { max-width: 520px; }
@media (min-width: 720px) {
  .p-sheet-overlay { align-items: center; }
  .p-sheet.terr-sheet { border-radius: 22px; border-bottom: 1px solid var(--p-glass-border, #eadfc9); }
}
button.cam-feito-link:hover .cam-feito-nome { color: var(--t-caminho-text, #755ba4); }
.terr-outro-linha { display: block; margin-top: 10px; padding-left: 2px; }


/* 23.10.67 — convite / contexto declarado (faixa, não estação) */
.cam-ctx {
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;
  margin: 4px 0 12px;
}
.cam-ctx-invite {
  background: var(--cam-sup, #fff);
  border: 1px solid var(--p-glass-border, #eadfc9);
  border-radius: 14px;
  padding: 14px 16px 12px;
}
.cam-ctx-q {
  font-family: var(--mec-serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--p-text, #3f3a52);
  margin: 0 0 4px;
}
.cam-ctx-hint {
  font-size: 13px;
  color: var(--p-text-muted, #7a7389);
  margin: 0 0 12px;
}
.cam-ctx-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cam-ctx-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
  font-size: 13.5px; color: var(--p-text-muted, #7a7389);
}
.cam-ctx-label { opacity: 0.9; }
.cam-ctx-name {
  font-family: var(--mec-serif);
  font-size: 15px;
  color: var(--p-text, #3f3a52);
}
.cam-ctx-link {
  background: none; border: none; padding: 0;
  color: var(--p-lavender, #8474ad);
  font-size: 13px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.cam-ctx-modal-lede {
  font-size: 13.5px; color: var(--p-text-muted, #7a7389);
  margin: 0 0 14px;
}
.cam-ctx-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cam-ctx-phase {
  text-align: left;
  background: #fbf6ec;
  border: 1px solid var(--p-glass-border, #eadfc9);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  color: inherit;
}
.cam-ctx-phase:hover { border-color: #d9ab52; }
.cam-ctx-phase.is-current { border-color: #b98d3e; background: #fff; }
.cam-ctx-phase-name {
  display: block;
  font-family: var(--mec-serif);
  font-size: 16px;
  margin-bottom: 2px;
}
.cam-ctx-phase-desc {
  display: block;
  font-size: 12.5px;
  color: var(--p-text-muted, #7a7389);
  line-height: 1.35;
}

/* —— A leitura da Cartografia (23.10.71) ————————————————————————————————
   `#/p/cartografo` mostra agora as cinco frases que a expedição apresenta no
   fim — uma por ilha, na ordem da definição.

   Regra da casa aplicada aqui: **sem número, sem barra, sem cor de nível.**
   Um ponto colorido por ilha, ou uma barra proporcional, transformaria a
   leitura numa escala com outro nome — e o Cartógrafo é, por desenho, o
   instrumento que não devolve índices ao ecrã. O que separa as ilhas é a
   tinta do nome (o roxo da casa) e o espaço entre linhas, nada mais.

   Sem `<ul>` com marcadores: `list-style:none` porque a lista é semântica —
   são cinco itens irmãos — mas visualmente é prosa em blocos. */
.cg-leitura-titulo {
  font-size: var(--tf-micro, 11px); letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--t-caminho-text, #755ba4);
  margin: 0 0 16px;
}
/* A medida de leitura vive na LISTA, não no parágrafo: assim os filetes que
   separam as ilhas acompanham o texto em vez de atravessarem o cartão inteiro
   no desktop, onde o cartão é muito mais largo do que uma linha legível. */
.cg-leitura { list-style: none; margin: 0 0 16px; padding: 0; max-width: 56ch; }
.cg-ilha { margin: 0; padding: 12px 0; border-top: 1px solid var(--p-glass-border, #eadfc9); }
.cg-ilha:first-child { border-top: 0; padding-top: 0; }
.cg-ilha-nome {
  margin: 0 0 4px; font-size: var(--tf-corpo-2, 14px); font-weight: 600;
  color: var(--t-caminho-text, #755ba4);
}
.cg-ilha-leitura {
  margin: 0; font-size: var(--tf-corpo-2, 14px); line-height: 1.55;
  color: var(--p-text-muted, #736e87);
}
/* A frase que devolve o tempo: o mapa é de hoje, não é um retrato fixo. */
.cg-momento {
  margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; font-style: italic;
  color: var(--p-text-soft, #8b8699);
}

/* —— O resultado da Bússola da Vida (23.10.72) —————————————————————————
   `#/p/bussola-vida` mostra agora as três coisas com que a travessia termina:
   o NOME da constelação, a FORMA e a LEITURA.

   Hierarquia: o nome é o protagonista (serif da casa, como os títulos do
   Caminho), a forma é a legenda que o explica numa linha, a leitura é o
   parágrafo. Sem cor por constelação — o jogo pinta cada uma da sua cor, e
   trazer isso para aqui faria da tinta uma escala. */
.bv-const {
  font-family: var(--mec-serif); font-weight: 400;
  font-size: 1.5rem; line-height: 1.2;
  color: var(--mec-plum, #43213f); margin: 0 0 4px;
}
.bv-forma {
  margin: 0 0 14px; font-size: var(--tf-corpo-2, 14px); line-height: 1.5;
  color: var(--t-caminho-text, #755ba4);
}
.bv-leitura {
  margin: 0 0 14px; font-size: var(--tf-corpo-2, 14px); line-height: 1.6;
  color: var(--p-text-muted, #736e87); max-width: 56ch;
}
/* O clima é a frase DELA. Fica em itálico e entre aspas, como se cita alguém. */
.bv-clima {
  margin: 0 0 16px; font-size: 13px; line-height: 1.5; font-style: italic;
  color: var(--p-text-soft, #8b8699); max-width: 56ch;
}


/* ══════════════════════════════════════════════════════════════════════
   «PARA ONDE VOU» — a sala (23.10.84.2)
   views/patient/stationDestino.js · SPEC_ESTACAO_PARA_ONDE_VOU.md §6, §8b

   A composição é a das outras salas: `.est-topo` + `.col-esq` + `.col-dir`
   já existem desde a 23.10.51/52.

   ⚠️ ATÉ À 23.10.85 ESTA SALA ERA DE UMA COLUNA, e o comentário que aqui
   estava dizia que uma coluna da direita «teria de ser inventada». Estava
   errado, e a titular apanhou-o ao abrir a estação em produção: o rumo
   traçado é conteúdo real, e conteúdo real tem lugar à direita — como o
   cultivo, como a memória. A regra nunca mudou («nunca se cria conteúdo
   para justificar um layout»); o que mudou foi eu ter visto que o conteúdo
   já lá estava. Ver a 23.10.86 no fim deste ficheiro.

   ⚠️ NÃO HÁ ESTILO PARA SECÇÃO VAZIA, e é de propósito. Não existe
   `.dst-sec:empty`, não existe placeholder, não existe esqueleto cinzento
   à espera de dados. Uma secção sem conteúdo não se mostra — logo não
   precisa de aparência. Se um dia alguém escrever esse seletor, é sinal
   de que a regra se partiu na camada de cima.
   ══════════════════════════════════════════════════════════════════════ */
.dst-sec { margin: 0 0 26px; }
.dst-sec-t {
  font-size: var(--tf-micro, 11px); letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--t-caminho-text, #755ba4); margin: 0 0 10px;
}
.dst-card {
  background: var(--cam-recuo, #f9f6f0);
  border: 1px solid var(--p-border, #eadfc9);
  border-radius: 14px; padding: 16px 18px;
}

/* —— a bússola ————————————————————————————————————————————————————————
   ⚠️ Está SEMPRE presente — é o único componente da sala que não depende
   de uma chave da API. «Ausência de dado ≠ ausência de componente»
   (titular, 23.10.84). Sem valores, é um componente de descoberta; com
   valores, é a fundação do rumo.

   Uma linha só, do v6: ícone · o que importa · o gesto. */
.dst-bussola {
  display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px;
  background: var(--cam-recuo, #f9f6f0); border: 1px solid var(--p-border, #eadfc9);
}
.dst-bussola-ic {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--t-caminho-accent, #7b62a8);
}
/* Os valores são DELA: serif, tamanho de título. */
.dst-bussola-v {
  flex: 1; min-width: 0;
  font-family: var(--mec-serif); font-size: 18px; color: var(--mec-plum, #43213f);
}
/* ⚠️ `.suave` é a voz do MIC, não a dela — e por isso não pode ter o mesmo
   peso: sem serif, mais pequena, itálica, apagada. A hierarquia tipográfica
   diz de quem é a frase antes de ela ser lida. */
.dst-bussola-v.suave {
  font-family: inherit; font-size: 15px; font-style: italic;
  color: var(--p-text-soft, #8b8699);
}
.dst-bussola-a {
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--t-caminho-text, #755ba4); flex-shrink: 0;
}
.dst-bussola-a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .dst-bussola { flex-wrap: wrap; }
  .dst-bussola-a { width: 100%; text-align: left; padding-left: 50px; }
}

/* —— o rumo —————————————————————————————————————————————————————————— */
.dst-rumo-t {
  font-family: var(--mec-serif); font-weight: 400; font-size: 1.25rem;
  line-height: 1.3; color: var(--mec-plum, #43213f); margin: 0 0 2px;
}
.dst-rumo-h {
  margin: 0; font-size: 13px; color: var(--p-text-soft, #8b8699);
}
/* A frase do rumo sem objetivo. ⚠️ Discreta, NUNCA um aviso: não leva
   moldura, nem ícone, nem cor de alerta. É uma permissão, e uma permissão
   com cara de aviso lê-se como aviso. */
.dst-rumo-so {
  margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; font-style: italic;
  color: var(--p-text-soft, #8b8699); max-width: 46ch;
}

/* —— um objetivo ——————————————————————————————————————————————————————
   Sem barra, sem percentagem, sem anel de progresso: não há nada para
   encher. O objetivo é um texto com uma data. */
.dst-obj {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px dashed var(--p-border, #eadfc9);
}
.dst-obj h4 {
  margin: 0 0 4px; font-size: 15px; font-weight: 600;
  color: var(--mec-plum, #43213f); line-height: 1.35;
}
.dst-crit {
  margin: 0 0 8px; font-size: 13.5px; line-height: 1.5;
  color: var(--p-text-muted, #736e87); max-width: 52ch;
}
.dst-meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 12.5px; color: var(--p-text-soft, #8b8699);
}

/* —— a proposta ————————————————————————————————————————————————————————
   Recuo com contorno tracejado: é uma leitura do MIC à espera de resposta,
   e não um dado guardado. A diferença tem de ser visível antes de se ler. */
.dst-prop {
  background: var(--cam-recuo, #f9f6f0);
  border: 1px dashed var(--p-border, #eadfc9);
  border-radius: 14px; padding: 18px;
}
.dst-frase {
  font-family: var(--mec-serif); font-weight: 400; font-size: 1.2rem;
  line-height: 1.35; color: var(--mec-plum, #43213f); margin: 0 0 10px;
  max-width: 44ch;
}
.dst-porque {
  margin: 0 0 12px; font-size: 13px; line-height: 1.5;
  color: var(--p-text-muted, #736e87); max-width: 50ch;
}
.dst-perg {
  margin: 0; font-size: 14.5px; color: var(--t-caminho-text, #755ba4); font-weight: 600;
}

/* —— o início (mock v6 `m1`) ————————————————————————————————————————————
   ⚠️ NÃO se chama «estado vazio», e o nome não é cosmética. A sala sem
   rumo é acolhedora: sem ilustração de caixa vazia, sem cadeado, sem
   cinzento morto. A pessoa que entra no primeiro dia não pode ver uma
   página que parece avariada — nem uma que parece uma repreensão.

   Vive DENTRO do cartão de «Seu rumo»: o rumo tem lugar antes de existir. */
.dst-fala {
  font-family: var(--mec-serif); font-weight: 400; font-size: 16.5px;
  line-height: 1.65; color: var(--mec-plum, #43213f); margin: 0; max-width: 44ch;
}
.dst-nota {
  margin: 11px 0 0; font-size: 14px; line-height: 1.6;
  color: var(--p-text-muted, #736e87); max-width: 50ch;
}
.dst-portas { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.dst-porta {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--p-border, #eadfc9);
  border-radius: 12px; padding: 12px 14px; cursor: pointer;
  font-family: inherit; color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.dst-porta:hover:not(:disabled) { border-color: var(--c, #7b62a8); transform: translateY(-1px); }
/* Cada porta tem a sua cor (`--c`), do v6. É identidade, não estado: nunca
   verde/vermelho, nunca uma escala. */
.dst-porta-ic {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: color-mix(in srgb, var(--c, #7b62a8) 14%, #fff);
  color: var(--c, #7b62a8);
  display: inline-flex; align-items: center; justify-content: center;
}
.dst-porta-txt { display: flex; flex-direction: column; min-width: 0; }
.dst-porta-n { font-size: 14.5px; font-weight: 600; color: var(--mec-plum, #43213f); }
.dst-porta-r { font-size: 12.5px; color: var(--p-text-soft, #8b8699); margin-top: 3px; }
/* ⚠️ A porta que ainda não liga a lado nenhum (a escrita do rumo é 84.4).
   Mostra-se visivelmente por ligar em vez de fingir que funciona. */
.dst-porta.por-ligar { cursor: default; opacity: .5; }

/* —— falha de leitura ——————————————————————————————————————————————————
   ⚠️ Isto NÃO é o estado vazio com outra cor. Uma falha de rede desenhada
   como sala vazia diria a quem tem três objetivos que não tem nenhum. */
.dst-falha {
  background: #fff; border: 1px solid var(--p-border, #eadfc9);
  border-radius: 14px; padding: 20px; max-width: 46ch;
}
.dst-falha-t {
  margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--mec-plum, #43213f);
}
.dst-falha-p {
  margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--p-text-muted, #736e87);
}
.dst-b {
  background: none; border: 1px solid var(--p-border, #eadfc9); border-radius: 999px;
  padding: 8px 16px; font-family: inherit; font-size: 13.5px; cursor: pointer;
  color: var(--t-caminho-text, #755ba4);
}
.dst-b:hover { border-color: var(--t-caminho-accent, #7b62a8); }

/* —— o estado e o sinal (23.10.84.3) ————————————————————————————————————
   ⚠️ UMA SÓ APARÊNCIA PARA OS CINCO ESTADOS. Sem verde para «Alcançado»,
   sem âmbar para «O prazo se aproxima», sem cinzento apagado para «Sem
   sinal recente». Uma escala de cor é uma nota, e uma nota é um
   julgamento — e «o estado descreve o que o sistema sabe, não o valor da
   pessoa nem a qualidade do seu esforço» (titular, 23.10.83).

   Se algum dia isto ganhar cores por estado, a regra partiu-se aqui. */
.dst-estado {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: #fff; border: 1px solid var(--p-border, #eadfc9);
  font-size: 12px; color: var(--t-caminho-text, #755ba4);
}
/* O sinal é uma nota de rodapé da linha, não um troféu. */
.dst-ev { color: var(--p-text-soft, #8b8699); }

/* ⚠️ «Não vejo tudo o que acontece fora daqui» — obrigatória sempre que se
   mostra evidência (SPEC §3.2), no pé do cartão do rumo e UMA VEZ SÓ.
   Discreta, mas nunca escondida: é o MIC a dizer onde acabam os seus olhos.
   Sem ela, as linhas de sinal acima leem-se como «isto foi tudo o que você
   fez», e a sala passa a ser uma medição.

   ⚠️ Não tem `.dst-acontece` a acompanhá-la: a secção «O que está
   acontecendo» foi removida na 84.3 por só repetir os cartões. Se algum dia
   voltar, volta com uma leitura transversal — e com estilo próprio. */
.dst-nao-vejo {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px dashed var(--p-border, #eadfc9);
  font-size: 12.5px; font-style: italic; color: var(--p-text-soft, #8b8699);
}

/* —— os gestos (23.10.84.4) ————————————————————————————————————————————
   ⚠️ A caixa de escrita substitui o cartão que estava no sítio. Não é modal
   e não navega: a sala continua a ser a sala, e ela não perde de vista onde
   está. Um gesto que arranca a pessoa da página é um gesto que a faz
   perguntar como volta. */
.dst-caixa {
  width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--p-border, #eadfc9); background: #fff;
  font-family: inherit; font-size: 15px; line-height: 1.5;
  color: var(--mec-plum, #43213f); resize: vertical; min-height: 62px;
}
.dst-caixa:focus { outline: none; border-color: var(--t-caminho-accent, #7b62a8); }
.dst-caixa::placeholder { color: var(--p-text-soft, #8b8699); }

.dst-linha, .dst-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dst-cta {
  background: var(--t-caminho-accent, #7b62a8); border: 1px solid var(--t-caminho-accent, #7b62a8);
  color: #fff; border-radius: 999px; padding: 9px 18px;
  font-family: inherit; font-size: 14px; cursor: pointer;
}
.dst-cta:hover:not(:disabled) { filter: brightness(1.06); }
.dst-cta:disabled { opacity: .55; cursor: default; }
/* A segunda resposta é uma recusa, e uma recusa não se pinta como escolha
   principal — mas também não se esconde. Mesmo tamanho, sem preenchimento. */
.dst-cta.nu {
  background: none; color: var(--t-caminho-text, #755ba4);
  border-color: var(--p-border, #eadfc9);
}
.dst-cta.nu:hover { border-color: var(--t-caminho-accent, #7b62a8); }

/* ⚠️ O erro fica NO SÍTIO do gesto, não num toast que passa. Uma pergunta
   que o motor devolveu — «O que você quer alcançar?» — tem de ficar à vista
   enquanto ela escreve a resposta. */
.dst-erro {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.5;
  color: var(--t-caminho-text, #755ba4);
}

/* —— o formulário do objetivo (23.10.84.4b) ————————————————————————————
   ⚠️ SEM ASTERISCOS E SEM «obrigatório». Quais campos são precisos é regra
   do motor, e um asterisco vermelho aqui seria a interface a aprender essa
   regra — e a continuar a exigir o antigo no dia em que ela mudasse. */
.dst-form .dst-campo { margin-bottom: 14px; }
.dst-label {
  display: block; margin-bottom: 6px; font-size: 14.5px; line-height: 1.4;
  color: var(--mec-plum, #43213f);
}
.dst-input {
  width: 100%; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--p-border, #eadfc9); background: #fff;
  font-family: inherit; font-size: 15px; color: var(--mec-plum, #43213f);
}
.dst-input:focus, .dst-caixa:focus { outline: none; border-color: var(--t-caminho-accent, #7b62a8); }
.dst-form .dst-caixa { margin-top: 0; }

/* —— o aviso «isto parece uma prática» ————————————————————————————————
   ⚠️ NÃO É UM ERRO, e não se pinta como um. Nada de vermelho, nada de
   ícone de alerta: o objetivo FICOU CRIADO. É o MIC a dizer o que notou e
   a oferecer outro lugar — «um aviso, nunca um bloqueio» (SPEC §2.2). */
.dst-aviso {
  background: var(--cam-recuo, #f9f6f0);
  border: 1px dashed var(--p-border, #eadfc9);
  border-radius: 14px; padding: 16px 18px; margin: 0 0 22px;
}
.dst-aviso p {
  margin: 0 0 12px; font-size: 14px; line-height: 1.55;
  color: var(--p-text-muted, #736e87); max-width: 56ch;
}

/* —— a revisão (23.10.84.4c) ————————————————————————————————————————————
   ⚠️ AS QUATRO SAÍDAS TÊM O MESMO PESO VISUAL. Nenhuma é «a certa» e
   nenhuma é «a de desistir»: «deixar por aqui» não é mais apagado do que
   «preciso de mais tempo». Uma hierarquia de tinta aqui diria à pessoa qual
   escolher — e nenhuma destas saídas é uma falha (SPEC §4.3). */
.dst-passo { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--p-border, #eadfc9); }
.dst-form .dst-portas { margin-top: 14px; }
.dst-form .dst-porta { --c: var(--t-caminho-accent, #7b62a8); }

/* —— o recibo (23.10.84.4c) ————————————————————————————————————————————
   ⚠️ TRANSITÓRIO, e é a característica que o define. Não é um selo, não é
   um estado, não fica. Existe porque a medição mostrou que o ecrã ficava
   byte-idêntico depois de «Era outra coisa»: a pessoa escrevia, confirmava,
   e nada dizia que tinha sido guardado.

   Uma palavra só. Guardar não é motivo para falar — mas ficar mudo depois
   de ela carregar em Confirmar também não é honesto. */
.dst-recibo {
  margin: 0 0 16px; padding: 8px 14px; border-radius: 999px; display: inline-block;
  background: var(--cam-recuo, #f9f6f0); border: 1px solid var(--p-border, #eadfc9);
  font-size: 13px; color: var(--p-text-muted, #736e87);
  transition: opacity .38s ease;
}
.dst-recibo.a-sair { opacity: 0; }

/* ══════════════════════════════════════════════════════════════════════
   23.10.86 — A SALA DE «PARA ONDE VOU» PASSA A DUAS COLUNAS

   ⚠️ NÃO HÁ AQUI UMA GRELHA NOVA. `.est-grid.duas`, `.col-esq` e `.col-dir`
   são as mesmas das outras salas desde a 23.10.51/52, e a regra da
   composição não muda: a classe `duas` só entra quando existe pelo menos um
   rumo traçado. Se um dia esta sala precisar de uma grelha própria, é sinal
   de que se afastou das irmãs — e isso decide-se, não se descobre.

   O que este bloco acrescenta são três coisas do v6/v7 que ainda não tinham
   aparência: o rótulo dos objetivos, e o painel da descoberta.
   ══════════════════════════════════════════════════════════════════════ */

/* O rótulo do v6 por cima da lista de objetivos («O que você quer
   alcançar»). ⚠️ Não é um `.dst-sec-t`: o título de secção é da PÁGINA, e
   isto é uma etiqueta DENTRO do cartão do rumo. Usar o mesmo estilo faria
   parecer que cada rumo abre uma secção nova. */
.dst-objs-lbl {
  margin: 16px 0 0; font-size: var(--tf-micro, 11px); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700;
  color: var(--p-text-soft, #8b8699);
}

/* —— a descoberta (mock v7 · C5) ————————————————————————————————————————
   ⚠️ TEM MOLDURA PRÓPRIA porque é uma pergunta, não mais uma linha do
   cartão. E é uma pergunta que se pode ignorar: por isso não tem cor de
   aviso, não tem ícone, não pisca e não fica. Se ela não responder, some no
   próximo carregamento e nada no ecrã lhe cobra a resposta. */
.dst-desc {
  margin-top: 16px; padding: 14px 16px; border-radius: 14px;
  background: #fff; border: 1px solid var(--p-border, #eadfc9);
}
.dst-desc-chegou {
  margin: 0 0 12px; font-size: 13px; color: var(--p-text-soft, #8b8699);
}
.dst-desc-perg {
  margin: 0 0 4px; font-size: 15px; font-weight: 600;
  color: var(--mec-plum, #43213f);
}
.dst-desc .dst-nota { margin: 0; }
.dst-desc .dst-caixa { margin-top: 10px; }

/* ══════════════════════════════════════════════════════════════════════
   23.10.87 — UM RUMO É UM LUGAR, NÃO UMA LISTA

   A coluna da direita passa a mostrar RESUMOS; o rumo por inteiro vive em
   `#/p/rumo/:id`. Este bloco dá aparência às três peças novas: o índice dos
   objetivos, a separação da terceira porta, e o cartão de traçar um rumo.

   ⚠️ NÃO HÁ AQUI NENHUM ESTILO DE PROGRESSO. Sem barra, sem anel, sem
   percentagem, sem cor por estado no índice. Se algum dia aparecer um
   seletor com «pct», «fill» ou «badge» neste bloco, a regra partiu-se na
   camada de cima.
   ══════════════════════════════════════════════════════════════════════ */

/* O índice dos objetivos dentro do cartão de resumo do rumo.
   ⚠️ É uma TABELA DE CONTEÚDOS: só títulos. Sem etiqueta de estado, sem
   prazo, sem sinal, sem visto. Se levasse qualquer uma dessas coisas, seria
   a lista antiga com letra mais pequena — e a página do rumo deixaria de ter
   razão para existir. */
.dst-indice {
  list-style: none; margin: 8px 0 0; padding: 0;
}
.dst-indice li {
  position: relative; padding: 4px 0 4px 16px;
  font-size: 14px; line-height: 1.45; color: var(--p-text-muted, #736e87);
  overflow-wrap: anywhere;
}
/* Um traço, não um visto e não um círculo por preencher: os dois últimos
   leem-se como caixas de tarefa por fazer, e um objetivo não é uma tarefa. */
.dst-indice li::before {
  content: ''; position: absolute; left: 0; top: 13px;
  width: 8px; height: 1px; background: var(--p-border, #eadfc9);
}

/* O cartão de resumo do rumo — o mesmo `.dst-card`, com o título a respirar
   mais porque agora é ele o assunto do cartão. */
.dst-rumo-resumo .dst-rumo-t { margin-bottom: 4px; }
.dst-rumo-resumo .dst-objs-lbl { margin-top: 14px; }

/* —— a terceira porta é de outra natureza (23.10.87) ————————————————————
   As duas primeiras levam a um instrumento e voltam com um resultado. Esta
   não sai da sala: abre uma caixa, e nasce um rumo. O rótulo separa sem
   esconder — e sem a promover a botão principal, que faria dela a ação
   óbvia da estação quando não é. */
.dst-portas-sep {
  margin: 14px 0 2px; font-size: 12.5px; font-style: italic;
  color: var(--p-text-soft, #8b8699);
}
.dst-porta.entrada {
  background: var(--cam-recuo, #f9f6f0);
  border-style: dashed;
}

/* —— traçar um novo rumo ———————————————————————————————————————————————
   ⚠️ CRIAÇÃO DE DIREÇÃO, NÃO DE OBJETIVO. Fica no fim da coluna dos rumos,
   com a moldura tracejada de «isto ainda não existe» — a mesma gramática da
   porta de entrada acima. */
.dst-novo-rumo {
  border-style: dashed; text-align: left;
}
.dst-novo-rumo .dst-nota { margin: 8px 0 0; }

/* —— a linha de abertura da proposta (v6 `abre`, reposta na 23.10.87) ————
   ⚠️ Sem ela a frase da proposta lê-se como TÍTULO do cartão. Em voz baixa,
   e antes: o que vem a seguir é uma leitura do MIC, não uma direção que já
   é dela. */
.dst-abre {
  margin: 0 0 8px; font-size: 12.5px; font-style: italic;
  color: var(--p-text-soft, #8b8699);
}

/* ══════════════════════════════════════════════════════════════════════
   23.10.91 — UM RUMO TEM UM NOME, UM FIM, E PODE SER CORRIGIDO
   ══════════════════════════════════════════════════════════════════════ */

/* —— o ar entre os cartões da coluna dos rumos ——————————————————————————
   ⚠️ A titular, a olhar para a 87 em produção: *«aumente um pouquinho os
   espaços»*. Os cartões de resumo estavam encostados uns aos outros e ao
   «+ Traçar um novo rumo», e três cartões seguidos liam-se como um bloco só.
   Um rumo é uma coisa; o seguinte é outra. O espaço é o que diz isso. */
.dst-sec > .dst-card + .dst-card { margin-top: 14px; }
.dst-sec > .dst-card + .dst-novo-rumo { margin-top: 22px; }

/* —— o título candidato da proposta (23.10.91) ——————————————————————————
   ⚠️ AQUI ESTÁ A CORREÇÃO DO DEFEITO MAIS GRAVE DA ESTAÇÃO, e é uma
   correção de HIERARQUIA antes de ser de código: em cima, a fala do MIC, em
   voz baixa; aqui, com moldura própria e peso de título, **o texto que vai
   ser gravado**. A titular: *«a pessoa deve ver claramente "isto é o que eu
   entendi" antes de aquilo virar "este é o meu rumo"»*.

   Por isso este bloco tem fundo próprio: não é mais um parágrafo da fala —
   é o objeto de que se está a falar. */
.dst-candidato {
  margin-top: 14px; padding: 16px 18px; border-radius: 14px;
  background: #fff; border: 1px solid var(--p-border, #eadfc9);
}
.dst-candidato-t {
  margin: 0; font-family: var(--mec-serif); font-weight: 400; font-size: 1.25rem;
  line-height: 1.3; color: var(--mec-plum, #43213f);
}
.dst-candidato .dst-acts { margin-top: 14px; }

/* A linha que diz DE ONDE veio o título candidato (23.10.91).
   ⚠️ Em voz baixa, entre a fala e o cartão: o que vem a seguir é uma leitura
   dos valores dela, não uma conclusão do sistema. «Não sabemos se corresponde
   à direção que a pessoa realmente quer assumir» — titular, 23.10.91. */
.dst-aponta {
  margin: 14px 0 0; font-size: 13px; color: var(--p-text-muted, #736e87);
}

/* ══════════════════════════════════════════════════════════════════════
   23.10.91 — O QUE JÁ FOI PERCORRIDO

   ⚠️ EM VOZ MAIS BAIXA DO QUE O PRESENTE, e é a única decisão visual que
   esta secção toma. O que ela está a percorrer agora tem peso de título; o
   que já ficou tem peso de memória. Não é hierarquia de importância — é
   hierarquia de tempo.

   ⚠️ E SEM DISTINÇÃO VISUAL ENTRE OS DOIS FINS. Nem verde para «chegou»,
   nem cinzento para «deixou por aqui». «Nenhuma destas saídas é uma falha»
   vale sobretudo quando se olha para trás; uma cor diferente faria uma
   parecer melhor do que a outra, e isso é uma nota — e uma nota é um
   julgamento (regra da titular, 23.10.83).
   ══════════════════════════════════════════════════════════════════════ */
.dst-percorrido-i + .dst-percorrido-i {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--p-border, #eadfc9);
}
.dst-percorrido-t {
  margin: 0 0 6px; font-family: var(--mec-serif); font-weight: 400; font-size: 1.05rem;
  line-height: 1.35; color: var(--p-text-muted, #736e87);
}
/* A frase que ela escreveu ao fechar. Devolvida, não comentada. */
.dst-percorrido-f {
  margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; font-style: italic;
  color: var(--p-text-soft, #8b8699); max-width: 52ch; overflow-wrap: anywhere;
}

/* ==========================================================================
   23.10.113 — A RODA DO AUTOCUIDADO NO TOPO DA SALA «Como estou hoje».
   *«a roda do autocuidado ficou muito boa, e deveria sim ter espaço todos os
   dias»* · *«trocar a disposição para como está na imagem»*

   Na FOLHA da Hoje a coluna é estreita e a roda fica por cima das pastilhas.
   Aqui a coluna esquerda é larga, e a disposição que ela mostrou põe a roda à
   esquerda e a lista dos pilares à direita — a mesma leitura do protótipo.
   Nada disto duplica o módulo: é o MESMO `_rodaAutocuidado.js`, com a caixa a
   mudar de forma consoante o espaço que tem.
   ========================================================================== */
.est-roda { margin-bottom: 26px; }
.est-roda > .cam-sec-label:first-child { margin-top: 0; }
.est-roda .ac-quest { margin-bottom: 12px; }
.est-roda .ac-voice { margin-top: 14px; }

@media (min-width: 860px) {
  /* Roda à esquerda, pilares à direita — a disposição da imagem dela. */
  .est-roda .ac-wheel-card {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    padding: 20px 22px;
  }
  .est-roda .ac-wheel-wrap { width: 100%; margin: 0; }
  .est-roda .ac-grid { grid-template-columns: 1fr; gap: 7px; margin-top: 0; }
}

/* Numa coluna estreita volta ao empilhado da folha, sem regra nova. */
@media (max-width: 859px) {
  .est-roda .ac-wheel-wrap { width: min(300px, 100%); }
}