/* MT-SPIKE-2 (rebase) · Fase A — vidro líquido flutuante sobre o globo carimbado. * Colocação FIXADA pelo Designer (via A, âncora orbe-globo-livre-padrao.html): * chat/PERGUNTAR = rail ESQUERDO (left:22 top:22 bottom:22) com estrutura de diálogo * (mensagens acima, campo em baixo); controlos = BAIXO-CENTRO; * prosa longa = FORA do rail, recolhível «sobre esta base» como conteúdo de PÁGINA. * A PÁGINA rola na vertical (globo fixo por trás); a roda pertence à página. */ :root { --verde: #2E9E5B; --warn-ink: #ffd98a; /* paleta selada do globo Designer */ --navy: #060E1F; --horiz: #0B1730; --surf: #13233F; --luz: #E8EEF8; --luzs: #9DB2CE; --ouro-c: #E2B14D; /* vidro líquido (a técnica da referência, nos nossos tokens) */ --vidro: rgba(9,16,30,.62); --vidro-borda: rgba(190,208,240,.16); --vidro-claro: rgba(232,238,248,.05); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--luz); background: var(--navy); line-height: 1.5; overflow: hidden; /* ACTO 3: a app ocupa 100dvh em duas colunas; nada rola a janela */ } /* ── ACTO 3 · AS DUAS COLUNAS IRMÃS (spec §1) ──────────────────────────────── A conversa (largura fixa, esquerda) e o mundo (o resto, direita), no mesmo flex. Nunca sobrepostas: é isto que dá ao globo espaço próprio. */ .app { display: flex; height: 100dvh; width: 100vw; align-items: stretch; } .chat { flex: 0 0 auto; width: min(420px, 36vw); min-width: 320px; display: flex; flex-direction: column; min-height: 0; padding: 22px 20px; gap: 14px; box-sizing: border-box; overflow: hidden; background: var(--horiz); border-right: 1px solid rgba(157,178,206,.14); } .stage { flex: 1 1 auto; position: relative; min-width: 0; overflow: hidden; } /* MOBILE-HERÓI · o punho da folha inferior é chrome só-de-telemóvel — em desktop não existe */ .folha-punho { display: none; } /* o mundo tem coluna própria: o palco deixa de ser `fixed` sobre a janela e passa a ocupar o seu lado. É isto que a versão anterior não tinha. */ #atmosfera { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 94% 84% at 50% 44%, var(--horiz), var(--navy) 78%); } #palco { position: absolute; inset: 0; z-index: 0; overflow: hidden; } #palco canvas { position: absolute; inset: 0; display: block; cursor: grab; } #palco canvas:active { cursor: grabbing; } #palco.sem-webgl { display: flex; align-items: center; justify-content: center; } .globo-fallback { max-width: 42ch; text-align: center; color: var(--luzs); font-size: 14px; padding: 16px; } /* ── vidro líquido — a moldura flutuante ── */ .lg { background: var(--vidro); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border: 1px solid var(--vidro-borda); border-radius: 18px; box-shadow: 0 18px 50px -22px rgba(0,0,0,.7), inset 0 1px 0 var(--vidro-claro); } .erro { position: fixed; z-index: 5; top: 18px; left: 50%; transform: translateX(-50%); padding: 12px 14px; background: rgba(138,31,31,.92); color: #fff; border-radius: 10px; font-weight: 600; } /* ── A CABEÇA da conversa (dentro da coluna .chat) ── */ .rail-cabeca { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; } .lab-chip { align-self: flex-start; padding: 3px 9px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ouro-c); background: rgba(226,177,77,.10); border: 1px solid rgba(226,177,77,.28); border-radius: 100px; } .rail-titulo { margin: 2px 0 0; font-size: 17px; line-height: 1.2; /* UMA linha lógica — título curto, não header */ } /* ── O REPOUSO na conversa (spec §2): saudação · aparato a um gesto · quatro perguntas ── */ .v2-saudacao { flex: 0 0 auto; margin: 0; font-size: 15px; line-height: 1.55; color: var(--luz); } /* o aparato «Graus de certeza», fechado por defeito (mockup :59-63, :254) */ .v2-graus { flex: 0 0 auto; } .v2-graus > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--luzs); } .v2-graus > summary::-webkit-details-marker { display: none; } .v2-graus > summary .chev { transition: transform .2s; } .v2-graus[open] > summary { color: var(--luz); } .v2-graus[open] > summary .chev { transform: rotate(180deg); } .v2-graus .sobre-corpo { padding: 2px 2px 6px; } /* as quatro perguntas — perguntas INTEIRAS, alvo mínimo 44px (44, não 42: herda-se a forma, não o defeito) */ .v2-perguntas { flex: 0 0 auto; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .v2-pergunta { width: 100%; text-align: left; font: inherit; font-size: 13.5px; line-height: 1.45; min-height: 44px; color: var(--luz); background: rgba(19,35,63,.55); cursor: pointer; border: 1px solid rgba(157,178,206,.20); border-radius: 12px; padding: 11px 14px; } .v2-pergunta:hover { background: rgba(19,35,63,.85); border-color: rgba(157,178,206,.38); } /* área de MENSAGENS — ocupa o meio, cresce, e assenta o conteúdo EM BAIXO (a mais recente junto ao campo). Rola só quando há mensagens a mais (barra visível = pista honesta); vazia em repouso. */ /* A1 — a conversa assenta em baixo QUANDO CABE (o `margin-top:auto` no 1.º filho empurra-a para o fundo), e ROLA a partir do topo quando não cabe (a viagem ancora cada beat pelo princípio, não pelo fim como um chat). Sem `justify-content:flex-end`, que prendia tudo ao fundo e escondia o topo do beat novo no telemóvel. */ .ask-orbe-mensagens { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; display: flex; flex-direction: column; gap: 8px; } .ask-orbe-mensagens > :first-child { margin-top: auto; } .mensagens-vazio { margin: 0; color: var(--luzs); font-size: 13px; } .mensagens-vazio em { opacity: .85; } /* campo de escrita — EM BAIXO da coluna (estrutura de diálogo). Alvo mínimo 44px. */ #ask-orbe-form, .ask-orbe-barra { flex: 0 0 auto; display: flex; gap: 8px; align-items: stretch; } /* ⛔ 16px NÃO É ESCOLHA DE DESENHO — É UMA AMARRA DA PLATAFORMA (24-Set-2026). Provado no iPhone da Joana: com o campo a 14px, o **iOS Safari faz AUTO-ZOOM** ao focar. E o zoom explica os QUATRO sintomas da fotografia dela de uma só vez: · o texto maior do que na foto sem teclado; · o corte à direita — o «é» de «A cor do traço É uniforme» ficou fora do ecrã; · a pílula «Vista» cortada na margem direita; · e o carimbo de testemunha DESAPARECIDO — com zoom, o viewport visual é um sub-rectângulo do de layout, e um `position:fixed` fica fora dele. ⚠️ A assinatura era «o painel transborda a 428». NÃO transborda: medido a 428, a legenda tem 394 px e acaba em 410. **O sintoma era o corte; a causa é o zoom.** Abaixo de 16px não há liberdade de desenho neste campo — há zoom. */ .ask-orbe-input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 14px; min-height: 44px; color: var(--luz); background: rgba(157,178,206,.08); border: 1px solid var(--vidro-borda); border-radius: 100px; } .ask-orbe-input::placeholder { color: var(--luzs); } .ask-orbe-input:disabled { opacity: .7; cursor: not-allowed; } .ask-orbe-submit { flex: 0 0 auto; width: 44px; min-height: 44px; display: grid; place-items: center; border: 0; border-radius: 100px; background: rgba(226,177,77,.9); cursor: pointer; } .ask-orbe-submit:disabled { opacity: .5; cursor: not-allowed; } .ask-orbe-nota { flex: 0 0 auto; margin: 0; font-size: 12px; color: var(--luzs); } /* disclaimer sob o campo, como num chat */ /* ── controlos de vista — DENTRO do palco, baixo-centro (spec §1, mockup :179). Já não fixos à janela: vivem na coluna do mundo e não disputam banda com a conversa. ── */ .view-controls { position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 14px; max-width: calc(100% - 36px); transition: transform .28s ease; } /* o punho-seta (dec. Fundadora, 13-Set) — recolhe/mostra o painel. Ocupa a sua própria linha no topo do painel; ao recolher, o painel desliza para baixo e só a faixa do punho fica à vista. */ /* especificidade acima de `.view-controls button` (0,1,1) — senão o punho vestia-se de botão */ .view-controls .vista-toggle { order: -1; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; min-height: 0; margin: -2px 0 2px; padding: 0; background: transparent; border: 0; border-radius: 0; cursor: pointer; color: var(--luz); } .view-controls .vista-toggle:hover { background: transparent; } .view-controls .vista-toggle > .vista-seta { width: 26px; height: 26px; box-sizing: border-box; padding: 4px; border-radius: 100px; background: rgba(157,178,206,.12); border: 1px solid var(--vidro-borda); transition: transform .28s ease; } .view-controls .vista-toggle:hover > .vista-seta { background: rgba(157,178,206,.22); } .view-controls.recolhido { transform: translateX(-50%) translateY(calc(100% - 34px)); } .view-controls.recolhido .vista-seta { transform: rotate(180deg); } .view-controls .lbl-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--luzs); } .view-controls button { font: inherit; font-size: 13px; min-height: 44px; padding: 6px 16px; border: 1px solid var(--vidro-borda); background: rgba(157,178,206,.08); color: var(--luz); border-radius: 100px; cursor: pointer; } .view-controls button:hover { background: rgba(157,178,206,.18); } .view-controls button.on { background: rgba(226,177,77,.16); border-color: rgba(226,177,77,.4); } #ctl-zoom-in, #ctl-zoom-out { width: 44px; min-height: 44px; padding: 0; text-align: center; font-size: 15px; } .view-controls .sep { width: 1px; height: 20px; background: var(--vidro-borda); } /* pista discreta — dentro do palco, canto inferior direito */ .pista-toque { position: absolute; z-index: 3; bottom: 12px; right: 18px; margin: 0; font-size: 11px; color: var(--luzs); opacity: .7; pointer-events: none; max-width: 34ch; text-align: right; } /* ── PROSA LONGA fora do rail: conteúdo de PÁGINA (à direita do rail, para não colidir). Colapsado → main == 100vh (globo respira, sem scroll). Expandido → main cresce → a PÁGINA rola. ── */ /* CURA 1 (drag): a camada de página é transparente e cobre a área do globo — NÃO deve capturar o rato, senão intercepta o mousedown antes do canvas e o arrastar-para-rodar morre. pointer-events:none aqui, e :auto só no recolhível, devolve o arrastar ao globo sem tocar na roda (que continua a rolar a página). */ .pagina { position: relative; z-index: 1; min-height: 100vh; box-sizing: border-box; pointer-events: none; margin-left: calc(min(35vw, 340px) + 44px); margin-right: 22px; padding: 22px 0 120px; } .sobre-base { max-width: 62ch; padding: 4px 18px 6px; pointer-events: auto; } .sobre-base > summary { list-style: none; cursor: pointer; padding: 12px 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--luzs); display: flex; align-items: center; gap: 8px; } .sobre-base > summary::-webkit-details-marker { display: none; } .sobre-base > summary .chev { transition: transform .2s; } .sobre-base[open] > summary .chev { transform: rotate(180deg); } .sobre-corpo { padding: 4px 2px 14px; } .sobre-corpo h3 { margin: 16px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--luzs); } .sobre-corpo p { margin: 4px 0 0; font-size: 13.5px; color: var(--luz); } .sobre-corpo strong { color: var(--luz); } .sub-desc { color: var(--luzs) !important; } .estado-render { margin-top: 14px !important; font-size: 12px !important; color: var(--luzs) !important; font-variant-numeric: tabular-nums; } .metodo-fim { margin-top: 16px !important; font-size: 12px !important; color: var(--luzs) !important; text-align: center; opacity: .7; } /* teclado — foco visível em tudo o que é accionável (o palco/canvas não prende foco) */ a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--luz); outline-offset: 2px; border-radius: 6px; } /* reduced-motion — o globo arranca PARADO (o JS não auto-roda: autoSpin=false, slerp/zoom saltam). O loop corre para a interacção manual, mas nada se move sozinho. O CSS zera animações/transições. */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ── ESTREITO/mobile (spec §7): o globo EM CIMA, a conversa em baixo — duas FAIXAS que não se sobrepõem. As três ALTA do telemóvel curam-se por vizinhança, nunca por z-index (mockup :230-233): os controlos vivem no palco (faixa de cima), a resposta no fio da conversa (faixa de baixo), e o aparato abre no palco — nunca cobre a resposta. ── */ @media (max-width: 820px) { /* ══════════════════════════════════════════════════════════════════════════════ A FORMA MOBILE — «UM MOMENTO DE CADA VEZ» SPEC docs/design/2026-09-23-SPEC-forma-mobile-um-momento-de-cada-vez.md (corpo §0–§8 lido pela Fundadora em 6b8736a3; §9 e §10 lidas e carimbadas) Substitui a forma «folha inferior» que a retina da Joana reprovou a 23-Set: «o painel está mal configurado» · «o texto não dá para ler» · «o botão de continuar não se vê» · «não me convence, complexifica o olhar». A RAIZ (Designer): a folha era UMA coluna a segurar QUATRO géneros ao mesmo tempo — a voz, a porta, a navegação e a régua — com a porta fixa POR CIMA do que rola. Não era excesso de informação: era falta de GÉNERO. §A o globo é palco inteiro e NÃO CEDE — o conteúdo rola DENTRO do painel. ⇒ o punho peek↔cheia MORRE. Não há expansão; há rolamento. É por isto que a trava da câmara se dissolveu: não há tira para onde a câmara fugir. §B um painel, UM género de cada vez — troca-se o que mostra, não se empilha. §C a porta é CHÃO, nunca TECTO — o painel ACABA onde o chão começa. §D um chão de cada vez: em repouso a PORTA; em viagem `Sair`·`Continuar`. §E a régua não é mobília permanente — vive COM OS TROÇOS, uma instância. §F os controlos pertencem ao GLOBO — porta compacta na borda do palco. §9.2 a CABEÇA: uma linha opaca que diz ONDE ESTÁS e carrega a porta. ⚠️ AMARRA: a cabeça carrega DUAS coisas. Uma terceira devolve a pilha. §9.4 cada peça declara a SUA geometria de caixa — nada herda, nada se destapa. ══════════════════════════════════════════════════════════════════════════════ */ /* O palco não cede. 60dvh: com o tecto a 3.40 o disco entra a ~96% com limbo em cima E em baixo — acima do chão ratificado de 85%. ⚠️ ALTURA POR FECHAR NO SAFARI REAL (§9.5): o dvh encolhe com as barras do navegador. */ :root { --palco: 60dvh; --chao: 64px; } .app { display: block; } .stage { position: fixed; top: 0; left: 0; right: 0; height: var(--palco); overflow: hidden; } #palco { position: absolute; inset: 0; } /* §A: sem faixa reservada — a faixa de 7% morreu com a forma antiga */ .pista-toque { display: none; } /* ── §F · os controlos são chrome DO GLOBO — porta compacta na borda inferior do palco, fora do corpo da esfera e fora da saída das rotas. NUNCA largura total. §9.4: declara a sua própria geometria; não herda a do painel vertical. */ /* §11.4 + fronteira da Fundadora (24-Set): «O CORPO É A ESFERA: Terra e nuvens. O halo não é corpo — é luz à volta do mundo, e um botão sobre o brilho não tapa geografia nenhuma.» Ao centro-baixo a porta caía SOBRE o corpo (o Guarda mediu-a 50px dentro do disco; o Olho corrigiu-se e pôs a leitura dele acima da sua). No CANTO INFERIOR-RECUADO fica fora do corpo: o ponto mais próximo do centro está a ~261px e o raio do corpo é ~228px. (Fora do HALO não caberia em sítio nenhum do palco — faltavam 9px, varrido ponto a ponto.) */ /* ⛔ D1 (HOLD MOBILE 2) — «as opções estão encavalitadas umas nas outras» (Joana). MEDIDO ANTES DE CURAR, a 320px: os seis alvos pedem ~284px (6×44 + 5×4) e o contentor estava limitado a 78% = 250px. Em `nowrap`, os botões encolhiam até ao piso de 44 e o TEXTO transbordava — «Parar rotação» e «Recentrar» cortados. Uma LINHA de seis rótulos não cabe em 320px: não é afinação, é a direcção errada. A cura: aberta, a porta cresce EM COLUNA a partir do seu canto. Cada alvo fica com a sua largura inteira, nada encolhe (flex 0 0 auto), nada corta, e continua «compacta, nunca de largura total» (§F). */ .view-controls { position: absolute; left: auto; right: 6px; top: auto; bottom: 6px; transform: none; width: max-content; max-width: min(78%, 240px); flex-direction: column-reverse; flex-wrap: nowrap; align-items: stretch; gap: 6px; padding: 0; border-radius: 22px; border: 0; box-shadow: none; } /* a BORDA soma-se à caixa e roubava 2px à folga; cada peça leva a sua */ .view-controls > * { flex: 0 0 auto; } /* §9.4 — nada encolhe; um alvo espremido é um rótulo cortado */ .view-controls button:not(.vista-toggle) { background: var(--horiz); box-shadow: 0 0 0 1px var(--vidro-borda); border-radius: 999px; } /* ⚠️ A LARGURA É PARTE DA FRONTEIRA, não só o canto. A conta do Designer era para um alvo 44×44; a porta com a palavra «Vista» mede mais, e o seu canto interior aproxima-se do centro. Encostada a 8px e com 44 de altura, a largura máxima fora do corpo (r228) é ~86px — daí o padding apertado. Medido em runtime, não presumido. */ body.viagem[data-momento] .view-controls, .view-controls.recolhido { max-width: 78px; } .view-controls .vista-toggle { order: 0; flex: 0 0 auto; align-self: flex-end; background: var(--horiz); box-shadow: 0 0 0 1px var(--vidro-borda); /* §9.4 — o `flex:0 0 100%` do painel VERTICAL não entra numa LINHA */ display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; min-width: 44px; min-height: 44px; padding: 0 5px; margin: 0; background: transparent; border: 0; border-radius: 999px; color: var(--luz); font-size: 12px; } .view-controls .vista-toggle::after { content: 'Vista'; font-size: 12px; letter-spacing: .02em; } /* §F: com RÓTULO, nunca glifo nu */ .view-controls.recolhido > *:not(.vista-toggle) { display: none; } /* recolhido = saem os cinco; fica a PORTA */ .view-controls.recolhido { transform: none; } .view-controls .lbl-sec, .view-controls .sep { display: none; } .view-controls button { font-size: 12px; padding: 7px 14px; min-height: 44px; min-width: 44px; white-space: nowrap; } #ctl-zoom-in, #ctl-zoom-out { width: auto; align-self: auto; } /* ── O PAINEL — entre o palco e o chão. UMA altura, e ROLA por dentro (§A). §C: acaba onde o chão começa — nada passa por baixo da porta. */ .chat { position: fixed; left: 0; right: 0; top: var(--palco); bottom: var(--chao); z-index: 4; width: auto; min-width: 0; height: auto; max-height: none; padding: 0 16px 10px; gap: 10px; border-right: 0; border-top: 0; border-radius: 18px 18px 0 0; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 -14px 44px -22px rgba(0,0,0,.8), inset 0 1px 0 var(--vidro-claro); } .folha-punho { display: none; } /* §A: morre com a expansão que deixou de existir */ /* ── §9.2 · A CABEÇA — uma linha, OPACA e fixa no topo do painel. DUAS coisas: (a) onde estás (b) a porta «Perguntar». Uma terceira devolve a pilha. */ .chat-cabeca { display: none; } body.viagem .chat-cabeca { display: flex; position: sticky; top: 0; z-index: 3; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -16px; padding: 9px 16px; min-height: 44px; background: var(--horiz); border-bottom: 1px solid var(--vidro-borda); } /* OPACA: a prosa não passa por baixo (§C aplicada ao topo) */ /* o «onde estás» é a SUBIDA (§11.1), logo é alvo — e alvo cumpre o piso dos 44px. Ao passar de texto a botão ficara com 21px de altura: defeito de acessibilidade, não de forma. */ .chat-cabeca-onde { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; font-size: 12.5px; color: var(--ink-soft); text-align: left; background: transparent; border: 0; padding: 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-cabeca-porta { flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: 0 12px; display: inline-flex; align-items: center; background: transparent; border: 1px solid var(--vidro-borda); border-radius: 999px; color: var(--luz); font-size: 12.5px; cursor: pointer; } /* ── §D · UM CHÃO DE CADA VEZ. Fora do painel que rola, opaco, sempre à vista. */ .ask-orbe-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: var(--chao); align-items: center; margin: 0; padding: 10px 16px; background: var(--horiz); border-top: 0; box-shadow: 0 -1px 0 var(--vidro-borda); } /* §C ao byte: uma BORDA soma-se à caixa e empurra 1px por baixo do painel; uma SOMBRA não ocupa caixa */ /* ⚠️ O elemento é `#ask-orbe-form` E `.ask-orbe-barra`; a regra de base (styles.css:96) usa o ID (1,0,0) e bate `body.viagem .ask-orbe-barra` (0,2,1). Vence-se com ID, não com mais classes — é a MESMA classe de armadilha do `flex:0 0 100%`: uma regra de outro contexto a ganhar em silêncio. */ body.viagem #ask-orbe-form { display: none; margin-top: 0; } /* em viagem o chão é o AVANÇO */ body.viagem.perguntando #ask-orbe-form { display: flex; margin-top: 0; } /* o momento de perguntar traz a porta ao chão */ .viagem-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: var(--chao); margin: 0; padding: 10px 16px; background: var(--horiz); border-top: 0; box-shadow: 0 -1px 0 var(--vidro-borda); } /* §C ao byte — ver acima */ body.perguntando .viagem-barra { display: none; } /* nunca duas barras a disputar o fundo (foi a 03) */ /* ── §B + §E · UM GÉNERO DE CADA VEZ. A régua «Traçado» é a REGRA DA CASA; a lista das rotas é NAVEGAÇÃO. Juntas no mesmo painel, a pilha remonta-se em ponto pequeno (carimbo da Fundadora, 24-Set). A régua vive COM OS TROÇOS: aparece quando uma rota está aberta, que é o momento em que o traço se lê. */ /* ══ §11.1 · OS QUATRO MOMENTOS — cada um com UM género ═══════════════════════ Carimbo da Fundadora, 24-Set. A lista de rotas SAI da leitura: as três retinas convergiram no mesmo defeito (leitura 42px de 181 E rotas 161px de 693, ao mesmo tempo). «A cura não é altura — é um género a mais, outra vez.» repouso o convite (saudação + perguntas) chão: a porta sem cabeça rotas a LISTA de rotas (rola) chão: a porta sem cabeça vista-de-rota os TROÇOS dessa rota + a RÉGUA chão: começar com cabeça leitura a PROSA, e nada mais chão: Sair·Cont. com cabeça A vista-de-rota é o ÍNDICE DA VIAGEM — não é mobília nova: é o nome de uma coisa que já existia e não o tinha, e é aí que a régua vive, porque é aí que os traços se apresentam COMO CONJUNTO (§10.3 refinado). */ /* — momento ROTAS: a lista, e só. Chão: a PORTA. Sem cabeça (não há «onde estás» dentro de uma rota quando ainda se está a escolher qual). */ body.viagem[data-momento="rotas"] .ask-orbe-mensagens, body.viagem[data-momento="rotas"] .g1-leg-intro, body.viagem[data-momento="rotas"] .chat-cabeca, body.viagem[data-momento="rotas"] .viagem-barra { display: none; } body.viagem[data-momento="rotas"] #ask-orbe-form { display: flex; } /* — momento VISTA-DE-ROTA: os troços desta rota. As outras rotas saem. ⛔ D4 (HOLD MOBILE 2) — A RÉGUA SAI DAQUI. Relato da Joana: «quando clico numa rota, tenho informações que não correspondem aos utilizadores de ver e saber» — e citou a frase inteira da régua. Carimbo da Fundadora: «uma chave COLECTIVA servida ao lado de um objecto só não é chave, é ruído»; «numa rota só não há conjunto». E a frase é linguagem de BASTIDOR (fonte, sustentação, cotejo) servida na FACE. O que fica ao lado do traço é a PALAVRA do estado, que já lá está por troço (`.g1-seg-estado`) — a §10.3 refinada exige forma+palavra, e a palavra está cumprida. ⏳ POR CHEGAR, e declarado: as quatro frases de face (uma por estado) são do CURADOR e decide-as a Fundadora. O CTO não escreve texto de face. Enquanto não chegam, o troço mostra a palavra sem frase — ausência honesta, nunca prosa inventada. ⏳ E ONDE VIVE A RÉGUA COMPLETA no telemóvel é decisão do DESIGNER: «no conjunto, onde os traços se comparam» — e a vista-de-rota deixou de contar como conjunto. */ body.viagem[data-momento="vista"] .ask-orbe-mensagens, body.viagem[data-momento="vista"] .g1-leg-intro { display: none; } body.viagem[data-momento="vista"] .g1-rota-bloco[aria-current="false"] { display: none; } /* — momento LEITURA: a prosa, e NADA MAIS. Nem a lista, nem os acordeões das outras rotas (a nota 2 do Olho morre com a mesma cura), nem a régua. */ body.viagem[data-momento="leitura"] .g1-legenda { display: none; } /* — o momento de PERGUNTAR atravessa qualquer um: o painel fica com a leitura. */ body.perguntando .v2-perguntas, body.perguntando .g1-legenda { display: none; } body.perguntando .ask-orbe-mensagens { display: block; } } @media (max-width: 420px) and (max-height: 620px) { :root { --peek: 31dvh; } /* ecrã curto: folha um nada mais baixa, mais globo (§12.4) */ body.viagem .chat { gap: 7px; } /* padding fica o da folha (§5); só aperta o gap */ body.viagem .ask-orbe-barra { gap: 6px; } body.viagem .cv-entry { padding: 11px 12px; } body.viagem .cv-prosa { font-size: 14.5px; line-height: 1.48; } body.viagem .cv-perg { font-size: 18px; } } /* ── COSTURA · a superfície onde os retidos se dizem (contrato, ponto 4) ────────── Sóbria de propósito: é registo, não ornamento. Alcançável por teclado (o
é nativo), e o texto nunca depende só de cor. */ /* O SCROLL INTERNO SAIU. Eu tinha posto `overflow-y:auto` aqui para o rail deixar de transbordar, e troquei um defeito por outro: no telemóvel o registo ficava atrás de um scroll de 81 px sem barra visível — 111 px escondidos, zero pontos à vista, um nome cortado a meio. A cura verdadeira é de contentor, não de CSS: o registo mudou-se para a página. Régua que fica: CHROME DE ALTURA FIXA SÓ RECEBE CONTEÚDO DE ALTURA FIXA. */ .costura-retidos { margin: .6rem 0 .8rem; font-size: .78rem; line-height: 1.5; color: var(--tinta-fraca, #9fb0dd); } /* O registo vive na `.pagina`, que tem `pointer-events:none` para não roubar o arrastar ao globo. Sem isto o `` dos retidos deixava de ser clicável — trocava-se um defeito de layout por um de alcance. */ #costura-registo { pointer-events: auto; max-width: 62ch; padding: 4px 18px 6px; } .costura-titulo { margin: 0 0 .4rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--luzs); font-weight: 600; } .costura-retidos p { margin: .2rem 0; } .costura-retidos b { color: var(--tinta, #eaf0ff); } .costura-retidos .av { color: var(--ouro, #e2b45c); } .costura-retidos details { margin-top: .4rem; } .costura-retidos summary { cursor: pointer; padding: .18rem 0; } .costura-retidos summary:focus-visible { outline: 2px solid var(--ouro, #e2b45c); outline-offset: 2px; } .costura-retidos ul { margin: .3rem 0 0; padding-left: 1rem; } .costura-retidos li { margin: .35rem 0; } .costura-retidos .ids { display: block; opacity: .72; font-size: .92em; word-break: break-word; } .costura-retidos code { font-size: .92em; } .costura-retidos .nao-carregou { color: var(--ouro, #e2b45c); } /* R5 do contrato de desenho — as etiquetas, em texto real, alcançáveis sem hover. */ .costura-retidos .pousam { list-style: none; margin: .1rem 0 .35rem; padding: 0; } .costura-retidos .pousam li { margin: .32rem 0; } .costura-retidos .estado-do-grupo { margin: .5rem 0 0; opacity: .78; font-size: .92em; } /* PROIBIÇÃO Nº15 DO CONTRATO — oculta-se por RECORTE, NUNCA por `display:none` nem `visibility:hidden`. Os dois escondem do leitor de ecrã tanto como do olho: a forma (d) construída com qualquer deles daria o EXACTO OPOSTO do que a curou — o olho veria a cabeça uma vez e o ouvido perderia o estado por completo, ficando pior do que antes. É uma classe de defeito que, por definição, não se vê a olho nenhum. */ .costura-retidos .so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Arrastar para rodar estava a SELECCIONAR o texto da interface (o Olho apanhou o painel inteiro em realce depois de um arrasto). Bloqueia-se onde se arrasta. ⚠️ EXCEPÇÃO deliberada: o `#costura-retidos` MANTÉM a selecção. É texto citável e é o único caminho para quem copia — bloqueá-lo ali seria acessibilidade a menos. */ body, #palco, #palco canvas, .view-controls, .pista-toque { -webkit-user-select: none; user-select: none; } /* a coluna da conversa é texto citável — selecciona-se. O arrastar-para-rodar vive no palco, que continua bloqueado; a conversa é irmã, não fica no caminho do gesto. */ .chat, .chat *, #costura-retidos, #costura-retidos * { -webkit-user-select: text; user-select: text; } /* PONTE-001 — as mensagens do «Perguntar ao Orbe». Sóbrias: é diálogo, não cartão. */ .ask-orbe-msg { margin: .5rem 0 0; font-size: .82rem; line-height: 1.55; color: var(--luz); } .ask-orbe-msg p { margin: .2rem 0; } .ask-orbe-msg code { font-size: .92em; color: var(--luzs); } .ask-orbe-msg .ask-orbe-pergunta { color: var(--luzs); font-style: italic; } /* o grau (glifo + palavra do OrbeGrau) INLINE na resposta — sem isto o `.ep-glyph` da página-entidade renderiza a 328px (um disco branco a encher a coluna). Dimensiona-se ao texto. */ .ask-orbe-msg .ep-grau { display: inline-flex; align-items: center; gap: .3em; } .ask-orbe-msg .ep-glyph { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.15em; } /* ── A SUPERFÍCIE DE PRECISÃO (PONTE-001 · ACTO 2a) ─────────────────────────── Nasce `hidden`: em repouso o Orbe é o globo. Só aparece quando o chat a chama. */ /* ⚠️ O `hidden` GANHA AO DISPLAY, e tem de ganhar sempre. Achado da retina da Fundadora, 11-Set-2026: o `#voo` tinha `hidden="true"` e desenhava-se na mesma, porque `display:flex` vence o `display:none` do agente do utilizador. A primeira coisa que o visitante via era um botão a convidá-lo a «↩ Voltar à vista» — de uma vista que ele nunca tinha deixado. É a doença deste arco na camada do desenho: uma declaração que sobrevive ao seu estado. E desta vez não era um comentário nem uma nota — era o que estava no ecrã. A regra é global de propósito: qualquer elemento desta página que se declare escondido fica escondido, e nenhum `display:` futuro o pode desmentir em silêncio. */ [hidden] { display: none !important; } /* O aparato convocado abre SOBRE o globo, mas DENTRO do palco (spec §1) — não fixo à janela: pertence à coluna do mundo, e nunca cobre a coluna da conversa. */ .voo { position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 84px; top: auto; width: auto; max-height: calc(100% - 120px); overflow-y: auto; padding: 16px 18px 12px; border-radius: 18px; display: flex; flex-direction: column; gap: 10px; } .voo-palco { display: flex; justify-content: center; } .voo-palco canvas { display: block; } .voo-titulo { margin: 0; font-size: 1.05rem; color: var(--luz); } .voo-momento { margin: .1rem 0 .4rem; font-size: .95rem; color: var(--luz); } .voo-grau { margin: .3rem 0; display: flex; flex-direction: column; gap: .2rem; } .voo-coord { margin: .3rem 0; font-size: .82rem; color: var(--luzs); } .voo-sub { font-size: .76rem; color: var(--luzs); } .voo-ausente { margin: .3rem 0; font-size: .82rem; color: var(--ouro-c); } .voo-failclosed { margin: .3rem 0; font-size: .82rem; color: var(--warn-ink); } .voo-fontes { margin: .2rem 0 0; padding-left: 1.1rem; font-size: .78rem; color: var(--luzs); } .voo-fontes li { margin: .15rem 0; } .voo-rodape { display: flex; justify-content: flex-end; } .voo-rodape .btn { font: inherit; font-size: 13px; min-height: 44px; padding: 8px 16px; cursor: pointer; color: var(--luz); background: rgba(157,178,206,.08); border: 1px solid var(--vidro-borda); border-radius: 100px; } .voo-rodape .btn:hover { background: rgba(157,178,206,.18); } /* O glifo do grau vem de grau.js e pinta-se com a cor herdada — nunca redefinida aqui. */ .voo .ep-grau { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--luz); } .voo .ep-glyph { width: 15px; height: 15px; flex: 0 0 auto; } @media (max-width: 820px) { .voo { inset: auto 0 0 0; width: auto; max-height: 78dvh; border-radius: 18px 18px 0 0; } } /* TEXTURA-001 — a atribuição fica À VISTA. Dentro do palco (é da textura do palco). */ .credito-textura { position: absolute; z-index: 3; left: 18px; bottom: 12px; margin: 0; font-size: 11px; color: var(--luzs); opacity: .72; pointer-events: none; letter-spacing: .01em; } .credito-textura b { color: var(--luz); font-weight: 600; } @media (max-width: 820px) { .credito-textura { left: 12px; bottom: 60px; font-size: 9.5px; opacity: .6; } } /* MOBILE-HERÓI: acima da barra da base (54px, alvos ≥44px) */ /* ══════════════════════════════════════════════════════════════════════════════ ACTO 3 · A VIAGEM NARRADA (Fase 1) Os tokens da conversa (OrbeConversa) remapeados para a LÍNGUA DA CASA, na coluna opaca (spec dos beats, Designer). Zero toques no componente e na prosa; só o palco. Escopo `body.viagem` E `.chat`: a viagem TOMA a coluna, e a conversa de repouso VIVE nela — a figura-no-chat da oferta («oferecer não assumir») é a MESMA `cv-entry`, e a coluna de repouso partilha a paleta escura (os tokens `--luz/--surf/--ouro-c` são os mesmos), pelo que os valores são idênticos: estender o escopo não muda a pintura, só a torna alcançável fora da viagem (spec §2, «cv-entry na língua da casa»). ═════════════════════ */ body.viagem, .chat { --cv-title: var(--luz); --cv-text: var(--luzs); --cv-prosa: var(--luzs); --cv-muted: var(--luzs); --cv-faint: #7E92AC; --cv-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --cv-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --cv-link: #7AA8FF; /* --az: o nome-porta, distinto do corpo */ --cv-card-bg: var(--surf); /* #13233F — um degrau acima da coluna opaca */ --cv-card-border: rgba(157,178,206,.14); /* a borda que a .chat já usa */ --cv-line: rgba(157,178,206,.14); --cv-gold: var(--ouro-c); /* na coluna o ouro é destaque EDITORIAL, não grau */ --cv-nota-color: var(--ouro-c); --cv-chip-bg: rgba(157,178,206,.10); --cv-chip-dot: rgba(157,178,206,.55); /* ornamento neutro — NÃO um sinal de grau (vigia do Designer) */ --cv-door-hover: rgba(226,177,77,.16); --cv-av-bg: radial-gradient(circle at 50% 38%, #1d3354, #0e1d36); --cv-gold-tint: rgba(226,177,77,.12); --cv-gold-border: rgba(226,177,77,.4); /* dimensões (ritmo, agnósticas da superfície) — mantêm-se, com a prosa a 16/1.66 (Designer) */ --cv-prosa-size: 16px; --cv-prosa-lh: 1.66; --cv-prosa-mb: 13px; --cv-perg-size: 21px; --cv-perg-mb: 10px; --cv-eyebrow-mb: 7px; --cv-entry-pad: 17px 18px; --cv-entry-mb: 14px; } /* a PROSA da narração em serif (Cormorant), como a voz e a pergunta do mesmo bloco — a coerência pede-o (decisão do Designer). Regra de PALCO, não toca o componente `conversa.js`. */ body.viagem .cv-prosa { font-family: var(--cv-serif); } /* o selo do grau usa o GLIFO verdadeiro do OrbeGrau (não o ponto genérico) — currentColor neutro, ~14px. O DEV substitui o `.d` pelo glifo no palco; aqui só o tamanho. O Iconograma lê os seis. */ body.viagem .cv-selo .ep-glyph { width: 14px; height: 14px; flex: 0 0 auto; } /* a barra da viagem — «seguinte» (primário, cheio) + «↩ Sair da viagem» (secundário, sempre alcançável). Assenta em baixo da coluna (o fio cresce e empurra-a). Foco visível herda a régua global (`:focus-visible`), logo o teclado vê onde está. */ .viagem-barra { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; } .viagem-seguinte { font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 11px 22px; cursor: pointer; color: #08101e; background: var(--ouro-c); border: 0; border-radius: 100px; } .viagem-seguinte:hover { filter: brightness(1.06); } .viagem-seguinte.fim { color: var(--luz); background: rgba(226,177,77,.14); border: 1px solid rgba(226,177,77,.5); } .viagem-sair { font: inherit; font-size: 13px; min-height: 44px; padding: 8px 14px; cursor: pointer; color: var(--luzs); background: transparent; border: 1px solid var(--vidro-borda); border-radius: 100px; } .viagem-sair:hover { color: var(--luz); background: rgba(157,178,206,.10); } /* A pergunta continua activa durante a travessia. A barra mantém o lugar conhecido e a resposta contextual entra no mesmo fio sem apagar a escala. */ body.viagem .ask-orbe-barra { margin-top: 8px; } .viagem-pergunta-contextual { border-left: 2px solid var(--vidro-borda); padding-left: 12px; } /* Imagem por escala, apenas no mobile e só depois do contrato fail-closed em viagem.js. Não há fallback decorativo: sem proveniência/carimbo, este nó nem nasce. */ .viagem-imagem-beat { margin: 12px 0 0; } .viagem-imagem-beat img { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; } .viagem-imagem-beat figcaption { margin-top: 6px; color: var(--luzs); font-size: 12px; line-height: 1.45; } .viagem-frota-coda { margin: 14px 0 10px; padding: 10px 12px; border: 1px solid rgba(226,177,77,.25); border-radius: 12px; background: rgba(6,14,31,.24); color: var(--luzs); font-size: 12.5px; line-height: 1.45; } .viagem-frota-coda p { margin: 7px 0 0; } .viagem-frota-coda b { color: var(--luz); } .viagem-frota-fonte { color: var(--luzs); opacity: .78; } .viagem-frota-icones { display: flex; align-items: flex-end; gap: 7px; opacity: .72; } .viagem-frota-coda span { position: relative; display: inline-block; width: 26px; height: 18px; border-bottom: 5px solid var(--navy); } .viagem-frota-coda span::before, .viagem-frota-coda span::after { content: ""; position: absolute; bottom: 5px; width: 0; height: 0; border-bottom: 13px solid var(--luz); } .viagem-frota-coda span::before { left: 6px; border-left: 5px solid transparent; border-right: 5px solid transparent; } .viagem-frota-coda span::after { left: 15px; border-left: 4px solid transparent; border-right: 4px solid transparent; } .viagem-frota-coda .nau { width: 30px; height: 21px; } .viagem-frota-coda .nau::before { left: 4px; border-bottom-width: 16px; } .viagem-frota-coda .nau::after { left: 15px; border-bottom-width: 18px; } .viagem-frota-coda .gasta { transform: translateY(1px) rotate(-1.5deg); } .viagem-frota-coda .gasta::before { opacity: .82; clip-path: polygon(50% 0, 100% 100%, 18% 78%, 0 100%); } .viagem-frota-coda .gasta::after { opacity: .74; clip-path: polygon(50% 0, 100% 100%, 24% 70%, 0 100%); } .viagem-frota-coda .perdida { opacity: .22; filter: grayscale(1); } .viagem-frota-coda .perdida::before, .viagem-frota-coda .perdida::after { border-bottom-color: var(--luzs); } .viagem-frota-coda .perdida::before { transform: rotate(-8deg); } .viagem-frota-coda .perdida::after { transform: rotate(7deg); } .cv-tempo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 10px 0 12px; } .cv-tempo-passo { min-width: 0; padding: 7px 8px; border: 1px solid rgba(157,178,206,.22); border-radius: 10px; background: rgba(6,14,31,.18); color: var(--luzs); font-size: 11px; line-height: 1.25; } .cv-tempo-passo b { display: block; margin-top: 2px; color: var(--luz); font-size: 12px; font-weight: 650; } .cv-tempo-passo small { display: block; margin-top: 2px; color: var(--luzs); opacity: .76; } .cv-tempo-rotulo { text-transform: uppercase; letter-spacing: .08em; opacity: .72; } .cv-tempo-passo.quebrado { border-style: dashed; background: linear-gradient(135deg, rgba(6,14,31,.12), rgba(226,177,77,.08)); } /* ── ACTO 3 · A FIGURA NO CHAT (deriva da ficha) + as fontes com «ver» ───────────── Escopo `.chat`, não `body.viagem`: a figura-no-chat vive no MESMO stream (`#ask-orbe-response`, dentro da `.chat`) na viagem E na conversa de repouso (o chip «Quem foi» da oferta). Uma regra, os dois palcos — a mesma `cv-entry`, uma fonte só. */ .chat .viagem-figura .cv-perg { font-style: normal; } /* um nome lê-se direito, não em itálico */ .chat .fig-qual { font-size: 12px; color: var(--luzs); margin: -4px 0 8px; } .chat .fig-grau { margin: 6px 0; } .chat .fig-grau .ep-grau { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--luzs); } .chat .fig-grau .ep-glyph { width: 14px; height: 14px; flex: 0 0 auto; } .chat .fig-aberta { font-size: 12px; color: var(--ouro-c); } /* candidato → «pergunta em aberto», nunca cru */ .chat .fig-prova { margin: 8px 0 0; padding: 6px 0 6px 12px; border-left: 2px solid var(--vidro-borda); font-family: var(--cv-serif); font-style: italic; font-size: 14px; color: var(--luzs); line-height: 1.5; } /* o link «ver o documento» das fontes (coda + figura + a oferta) — a régua do ouro leva ao documento */ .chat .cv-src-link { color: #7AA8FF; text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; } .chat .cv-src-link:hover { color: var(--luz); } .chat .cv-src-sep { opacity: .5; } /* ── A OFERTA da conversa (spec «oferecer não assumir» §2) — chips do que EXISTE ──────── Chips na língua da casa: pílulas alcançáveis por teclado (são