/* cabecalho.css — O CABEÇALHO DO CASAL, UMA FONTE SÓ (CS-E20 · T11, 23/09).
   ⚠️ **Estas regras MORAVAM dentro de `shell.js`**, num `style id="shell-css"`
   escrito em tempo de execução. Saíram dali porque a PÁGINA DO ESPAÇO — que é
   template do servidor (`apps/templates/portal_base.html`), e não React — passou
   a usar o mesmo cabeçalho: a fita `Local · Buffet · Bar · Foto e vídeo` com os
   «em breve» e o «sua conta». Com a folha presa no componente, a única forma de
   o servidor ter o mesmo desenho era REDIGITAR o desenho — e duas cópias da
   mesma pele divergem no primeiro ajuste (§5.5 do design system).
   Agora há um arquivo só, lido pelos dois:
     · o app  → `docs/design/prototipo/index.html` (e `/app/` no FastAPI);
     · o site → `apps/templates/portal_base.html` (`/app/assets/cabecalho.css`).
   ⚠️ **Nada aqui é hex cru**: todo valor é token de `tokens.css`, como era
   dentro do `shell.js`. Quem mexer numa cor mexe no token, nunca aqui. */
/* CS-E20 · T5 (r1) — o cabeçalho do t1: 80 de altura, 32 nas laterais,
   32 entre marca, fita e conta; papel claro com um fio embaixo. */
/* ⭐ CS-E21 · rodada A (30/09) — A OUTRA PONTA DO `viewport-fit=cover`.
   Com o cover ligado (o conserto do FID-1, `prototipo/index.html`), o viewport
   de layout passa a COBRIR o display inteiro: a `.shell-casca` é `100dvh` a
   partir do topo FÍSICO da tela, e sem este recuo a primeira faixa do cabeçalho
   ficaria embaixo do entalhe / Ilha Dinâmica do iPhone — a marca e a fita de
   tipos, que é o primeiro gesto do casal. É o par que `mobile-native` §7 pede:
   o cover deixa a página ir até a borda, o `env()` empurra o CONTEÚDO de volta.
   O `background` desta mesma regra pinta a faixa do entalhe com o papel do
   cabeçalho, que é o acabamento nativo.
   ⚠️ Esta folha é lida pelos DOIS leitores (o app e o portal), e os dois já
   levam o cover — o recuo vale nos dois pelo mesmo motivo. Fora do iPhone o
   `env()` vale `0px` e nada muda. Precedente da casa: `portal_base.html:993`. */
.shell-topo { position: relative; z-index: var(--z-sticky); flex: 0 0 auto;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--paper-50); border-bottom: 1px solid var(--border-hair); }
.shell-topo-linha { max-width: calc(var(--container-xl) + var(--space-20) * 2); margin: 0 auto;
  padding-inline: var(--space-8); display: flex; align-items: center; gap: var(--space-8);
  min-height: var(--space-20); }
.shell-marca { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto;
  min-height: var(--tap-min); border: none; background: none; padding: 0; cursor: pointer; }
.shell-marca img { width: auto; height: var(--space-10); }
/* Logo v2 (Capitão, 13/11) — a MARCA VIVA: um SVG inline só, com os dois estados
   (`data-marca`, a arte e as regras moram no próprio SVG — `_marca_viva.svg`,
   gerado por docs/design/marca/gerar_logo_v2.py). ESTENDIDO = anel + pedra +
   «bom para / CASAR»; RESUMIDO = anel + pedra + «bpc». `auto` = estendido a
   cima do corte único do app (894 px, `corte.js`), resumido até ele (substitui o corte de 560 px do <b>). Na
   linha principal recolhida (d165) o shell.js passa `resumido`. */
.marca-viva-slot { display: contents; }
.shell-marca svg.marca-viva { height: var(--space-10); }
.shell-nav--fita { flex: 1 1 auto; align-self: stretch; overflow: visible; }
.shell-fita { display: flex; align-items: stretch; gap: var(--space-6); }
.shell-fita--pe { flex-direction: column; align-items: stretch; gap: var(--space-1); }
.shell-tipo { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min);
  padding-inline: var(--space-1); border: none; border-bottom: 3px solid transparent; background: none;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink-500);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out); }
.shell-tipo-ic { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.shell-tipo[aria-current="page"] { color: var(--ink-900); font-weight: var(--fw-black); border-bottom-color: var(--ink-900); }
.shell-tipo[aria-disabled="true"] { cursor: not-allowed; }
.shell-tipo:focus-visible, .shell-conta:focus-visible, .shell-marca:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.shell-fita--pe .shell-tipo { border-bottom: none; border-inline-start: 3px solid transparent; padding-inline: var(--space-3); }
.shell-fita--pe .shell-tipo[aria-current="page"] { border-inline-start-color: var(--ink-900); }
.shell-breve { display: inline-flex; align-items: center; padding-inline: var(--space-2); border: 1px dashed var(--ink-500);
  border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: var(--lh-normal); color: var(--ink-500); }
.shell-conta { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min);
  padding-inline: var(--space-1) var(--space-4); border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--paper-50); cursor: pointer; font-family: var(--font-body); font-size: var(--fs-sm);
  font-weight: var(--fw-bold); color: var(--ink-900); white-space: nowrap; }
.shell-conta[aria-current="page"] { border-color: var(--ink-900); }
.shell-inic { display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8);
  border-radius: 50%; background: var(--sage-100); color: var(--sage-700); font-size: var(--fs-xs); font-weight: var(--fw-black); }
/* r40 (CS-E20/T10) — a família do hover (esp. §4.2-b), só em ponteiro fino.
   A aba ATIVA já está no tom mais escuro de texto e de traço: sem o véu
   ela ficava muda sob o ponteiro. A marca é ícone solto + nome: véu em
   pílula, o mesmo 6% das outras peças. */
.shell-marca { border-radius: var(--radius-pill); padding-inline: var(--space-1) var(--space-2);
  margin-inline: calc(var(--space-1) * -1) calc(var(--space-2) * -1);
  transition: background-color var(--dur-fast) var(--ease-out); }
.shell-tipo { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
@media (hover: hover) and (pointer: fine) {
  button.shell-tipo:hover { color: var(--ink-900);
    background-color: color-mix(in srgb, var(--ink-900) 6%, transparent); }
  .shell-marca:hover { background-color: color-mix(in srgb, var(--ink-900) 6%, transparent); }
  .shell-conta:hover { border-color: var(--ink-900); background: var(--paper-100); }
}
.shell-porta { position: relative; margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.shell-entrar { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--amber-700);
  text-decoration: none; padding: var(--space-2); }
.shell-entrar:hover { text-decoration: underline; }
.shell-criar { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-on-brand);
  background: var(--espresso); text-decoration: none; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); }
.shell-criar:hover { background: var(--ink-900); }

/* ═══ r9 (CS-E21 · T2, 29/09) — O CORTE DO CABEÇALHO MORA AQUI, E SÓ AQUI ════
   Antes vivia duplicado: `shell.js:422` (`@media (max-width: 1080px)`, o app
   React) e `_casal_cabecalho.html:62` (`@media (max-width:67.5rem)`, o mesmo
   1080 — a página do espaço, servida pelo backend). A folha comum não tinha
   NENHUMA `@media` de largura (dor 5 do RFC `jornada-mobile-do-casal`): por
   isso a página do espaço ficava com cabeçalho de computador no telefone, e
   os dois lugares podiam divergir no primeiro ajuste. `tests/
   test_corte_cabecalho_unico_gate.py` prova que o número não volta a se
   duplicar.
   ⚠️ **ESTE É O CORTE DO CABEÇALHO — NÃO É O CORTE DO APP.** São dois números,
   com dois donos e duas contas, e confundi-los foi a dor que a T3b fechou:

     · **1080px, aqui.** O cabeçalho: o padding da linha do topo e a conta
       virando disco de 44×44. É HERDADO da régua do menu-lateral-vira-gaveta
       (v6) e **nunca foi derivado** para este corte. Mudá-lo é decisão
       separada, e o Capitão ainda não a tomou. Portão: este arquivo +
       `tests/test_corte_cabecalho_unico_gate.py` (`_CORTE_DE_HOJE_PX`).
     · **894px, o CORPO do app** — a pílula de busca, as camadas fixas, as
       gavetas em tela cheia, o menu `ordenar`, o índice da conta e as duas
       colunas da ficha do espaço. É DERIVADO, e o Capitão o cravou em 30/09
       (CS-E21 · T3b). O número e a conta parcela por parcela moram em
       `docs/design/prototipo/assets/corte.js` (`window.CaseiCorte`).
       Portão: `tests/test_corte_do_app_unico_gate.py`.

   A T3 (29/09) mediu a conta que produziu o 894 e deixou registrado que o 860
   que o Capitão tinha dito **não fecha**: faltava a sétima parcela, os 34px do
   corpo da caixinha. Numa linha:
   208 + 20 + 208 + 34 + 32 + 352 + 40 = 894. A conta inteira, com as medições
   no navegador que a provam, saiu daqui e foi para `assets/corte.js` junto com
   o número — ela é a conta DO APP, e este arquivo é do CABEÇALHO. */
@media (max-width: 1080px) {
  .shell-topo-linha { padding-inline: var(--space-4); gap: var(--space-3); min-height: var(--space-16); }
  /* só o app React tem o padding vertical extra — a página do espaço nunca
     teve (o contrato de altura dela é `tests/
     test_pagina_espaco_unificada_no_navegador.py::test_B7_em_375_*`, ≤72px). */
  .shell-topo:not(.corredor-casal) .shell-topo-linha { padding-block: var(--space-2); }
  /* r10 (CS-E21 · T2): no cabeçalho compacto, a conta encolhe para SÓ o
     disco de 44×44 — sem borda, sem padding de pílula, sem a palavra "sua
     conta" (que a r15 tirava de uma gaveta; agora ela nunca aparece aqui). */
  .shell-conta { min-width: var(--tap-min); min-height: var(--tap-min); width: var(--tap-min); height: var(--tap-min);
    padding: 0; border: none; background: none; justify-content: center; }
  .shell-conta-txt { display: none; }
  .shell-inic { width: var(--tap-min); height: var(--tap-min); font-size: var(--fs-sm); }
  /* CS-E29 · ciclo 1 (achado 10 da revisão de tela, 390×844): a fita com
     `overflow: visible` passava por baixo da conta — o disco «C» (x 318–362)
     cobria «Buffet em breve» (x 171–334) e «Bar»/«Foto e vídeo» saíam da
     tela. No app React a fita ganha o espaço que sobra entre a marca e a
     conta e ROLA de lado dentro dele (a página do espaço tem a gaveta dela,
     abaixo, e não muda). */
  .shell-topo:not(.corredor-casal) .shell-nav--fita { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .shell-topo:not(.corredor-casal) .shell-nav--fita::-webkit-scrollbar { display: none; }

  /* ── o resto é só do PORTAL (`apps/templates/_casal_cabecalho.html`) ──────
     A página do espaço é template do servidor e MANTÉM a gaveta própria dela
     — fora do escopo da r15, que tira só o hambúrguer do app React
     (`shell.js:484`, já morto). Contrato travado por `tests/
     test_pagina_espaco_unificada_no_navegador.py::test_B7_*`. Movido para cá
     de `_casal_cabecalho.html:62-72` sem mudar uma regra — só o endereço. */
  .corredor-casal .shell-topo-linha { flex-wrap: wrap; }
  .corredor-casal.com-gaveta .gaveta-casal-bt { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: var(--tap-min); height: var(--tap-min); padding: 0; cursor: pointer;
    border: 1.5px solid var(--kraft); border-radius: var(--radius-md);
    background: var(--paper-50); color: var(--ink-700); }
  .corredor-casal.com-gaveta .shell-nav--fita { order: 9; flex: 1 0 100%; }
  .corredor-casal.com-gaveta:not(.gaveta-aberta) .shell-nav--fita { display: none; }
}

/* ═══ CS-E29 · d140/d141 (Capitão, 09/11) — O TOPO QUE SE ESCONDE AO ROLAR ════
   Revê o d130 (que recolhia a barra e a revelava com o mouse, por cima do
   conteúdo). Só no app React, só nas telas cuja linha principal monta
   `CaseiTopo.Ponta` (Buscar e Orçamentos — L26) e só com ponteiro fino (L25).
   Dois atributos da casca, escritos pelo shell.js:
     · `data-topo-recolhe` = a linha principal CABE com o logo e a conta (a
       medida «cabe?», sem largura escrita aqui); sem ele nada se esconde;
     · `data-topo-escondido` = a rolagem do #casei-scroll passou do limiar.
   No alto, a barra está NO FLUXO (nunca fixed, nunca por cima, sem sombra) com
   o logo nela. Escondida, ela recolhe a própria altura por uma margem negativa
   (o conteúdo sobe junto; a casca corta o que sobra) e fica `inert`; o logo e
   a conta aparecem nas pontas da linha principal e o ícone da categoria na
   barra de busca (d141). Nunca dois logos: o logo de cima some (opacidade)
   antes de o de baixo entrar, e o de baixo só existe (display) escondida.
   `data-topo-medindo` mostra as pontas durante a medida, sem transição.
   A página do espaço (portal_base.html) nunca monta a casca: nada daqui a alcança. */
.shell-ponta, .lc-barra-tipo { display: none; }
@keyframes shellTopoEntra { from { opacity: 0; } to { opacity: 1; } }
/* a barra de busca COMPACTA (a pílula compacta do Airbnb): os segmentos descem
   o respiro lateral de --space-6 para --space-4. Quem liga é a medida «cabe?»
   (shell.js), só quando sem ela algum valor sai cortado — é o que devolve à
   linha o espaço do logo, da conta e do ícone da categoria (d140/d141), e o da
   troca «ir para X» do d139 a 1024. Vale em qualquer ponteiro: é contra corte.
   CS-E31 (integração, 11/11): abaixo de 1200 o respiro JÁ é --space-4 (folha da
   barra), então a alavanca morria ali e, com as abas do R1 na linha da barra, o
   estendido a 1024 cortava os quatro valores (medido: 976 de 960). Quem resolve
   é o SEGUNDO degrau, abaixo; a compacta fica em --space-4 (descê-la a --space-3
   mudava a 1280, onde ela também liga, e descasava o respiro do «Local
   específico», que a anatomia dos segmentos amarra ao dos segmentos). */
.shell-casca[data-linha-compacta] .lc-linha .lc-barra > .lc-ancora > .lc-seg { padding-inline: var(--space-4); }
/* CS-E31 (integração, 11/11) — o SEGUNDO degrau, a JUSTA (`data-linha-justa`),
   que a medida «cabe?» só liga quando a compacta ainda corta (a 1024, com as
   abas do R1 na linha: a barra media 672 e cada valor pedia ~710). Nada some
   nem muda de função: só o RESPIRO cede, repartido entre as abas e a barra —
   o vão Buscar|Orçamentos (--space-8 → --space-3), a margem depois das abas
   (fica o gap da linha), o respiro e o ícone·texto dos segmentos (--space-3 →
   --space-2) e a margem do botão redondo (--space-2 → --space-1). As abas em si
   NÃO mudam (R1: a mesma forma a 1024 e a 1280). Medido logado, «Campinas · SP
   + 2 cidades»: barra 672 → 706 a 1024; nada corta até ~1010.
   A legenda dos Filtros (R13), mais larga que o segmento, passa a se alinhar
   pela PONTA do segmento: alinhada pelo começo ela saía 16px para fora da linha. */
.shell-casca[data-linha-justa] .lc-linha > .lc-abas { gap: calc(var(--space-3) / var(--escala-local, 1)); margin-inline-end: 0; }
.shell-casca[data-linha-justa] .lc-linha .lc-barra > .lc-ancora > .lc-seg { padding-inline: var(--space-2); gap: var(--space-2); }
.shell-casca[data-linha-justa] .lc-linha .lc-ancora--filt > .lc-filtrando { inset-inline-start: auto; inset-inline-end: 0; }
@media (hover: hover) and (pointer: fine) {
  /* CS-E30 · R11 — a troca de LAYOUT é instantânea (um quadro só): quem dá o
     movimento é o FLIP de shell.js (_trocarTopoComMovimento), só transform e
     opacity. A margem animada de antes movia a lista quadro a quadro. */
  .shell-casca[data-topo-recolhe] .shell-topo { margin-top: 0; }
  .shell-casca[data-topo-recolhe][data-topo-escondido] .shell-topo {
    margin-top: calc(-1 * var(--topo-alt, 0px)); }
  .shell-casca[data-topo-recolhe][data-topo-escondido] .shell-topo .shell-marca { opacity: 0; }
  .shell-casca[data-topo-medindo] .shell-topo,
  .shell-casca[data-topo-medindo] .shell-topo .shell-marca { transition: none; }
  .shell-casca[data-topo-recolhe][data-topo-escondido] .shell-ponta,
  .shell-casca[data-topo-recolhe][data-topo-medindo] .shell-ponta {
    display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); }
  .shell-casca[data-topo-recolhe][data-topo-escondido] .lc-barra-tipo,
  .shell-casca[data-topo-recolhe][data-topo-medindo] .lc-barra-tipo { display: flex; }
  /* CS-E30 · R11 — o logo, a conta e o tipo VIAJAM do cabeçalho para a linha
     (FLIP em shell.js): um logo só na tela, sem esperar um sair para o outro entrar */
  /* d154 (Capitão, 09/11) — «distribuir o espacamento uniformemente na barra
     superior com o logo»: com as pontas na linha (barra de cima escondida), os
     vãos logo · título+pílula · barra de busca · conta ficam IGUAIS. A barra
     deixa de crescer no meio (antes a sobra ia toda para os dois lados dela e o
     título ficava encostado no logo): a vaga dela pede a largura cheia da barra
     (a mesma régua de buscar_barra.js) e cede se faltar, e a sobra da linha se
     reparte por igual entre os vãos. O piso de cada vão segue o gap da linha. */
  .shell-casca[data-topo-recolhe][data-topo-escondido] .lc-linha,
  .shell-casca[data-topo-recolhe][data-topo-medindo] .lc-linha { justify-content: space-between; }
  .shell-casca[data-topo-recolhe][data-topo-escondido] .lc-linha > .lc-barra-lugar,
  .shell-casca[data-topo-recolhe][data-topo-medindo] .lc-linha > .lc-barra-lugar {
    flex: 0 1 calc(var(--space-24) * 9); }
  .shell-casca[data-topo-recolhe][data-topo-escondido] .lc-linha > .lc-barra-lugar > .lc-barra,
  .shell-casca[data-topo-recolhe][data-topo-medindo] .lc-linha > .lc-barra-lugar > .lc-barra { width: 100%; }
  /* CS-E33 · R14 — a barra de Orçamentos (Onde · Orçamento) mede o conteúdo
     também no resumido: esticada, sobrava meia barra vazia */
  .shell-casca[data-topo-recolhe][data-topo-escondido] .lc-linha > .lc-barra-lugar > .lc-barra.lc-barra--orc,
  .shell-casca[data-topo-recolhe][data-topo-medindo] .lc-linha > .lc-barra-lugar > .lc-barra.lc-barra--orc { width: auto; }
  .shell-ponta .shell-marca { margin-inline: 0; }
  /* d165 (Capitão, 09/11) — o logo que desce para a linha principal é SEMPRE
     só o símbolo, em qualquer largura e nas duas abas (nunca a palavra).
     Verbatim: «logo a 1280 px. deixa sempre só o simbolo». Revê o arranjo
     «marca inteira onde cabe» da medida do shell.js, que saiu junto. Desde o
     logo v2 (13/11) o «símbolo» é o RESUMIDO (anel + pedra + bpc): o shell.js
     monta a marca da ponta com `data-marca="resumido"`, e é a troca do topo que
     a faz recolher do estendido (o nome entra no anel e vira «bpc»). */
  .shell-ponta .shell-porta { margin-left: 0; }
  /* na linha principal a conta é só o disco (o avatar do Airbnb), a mesma
     forma do cabeçalho compacto (r10): a palavra «sua conta» custava à barra
     de busca os ~70px que faziam os valores dela saírem cortados a 1280. */
  .shell-ponta .shell-conta { min-width: var(--tap-min); width: var(--tap-min); height: var(--tap-min);
    padding: 0; border: none; background: none; justify-content: center; }
  .shell-ponta .shell-conta-txt { display: none; }
  .shell-ponta .shell-inic { width: var(--tap-min); height: var(--tap-min); font-size: var(--fs-sm); }
  /* a família do hover (r40): o disco perde a pílula, então o véu de 6% vem nele */
  .shell-ponta .shell-conta { border-radius: var(--radius-pill); transition: background-color var(--dur-fast) var(--ease-out); }
  .shell-ponta .shell-conta:hover { background-color: color-mix(in srgb, var(--ink-900) 6%, transparent); }
  /* emenda do topo (10/11, revê o d141) — a ponta esquerda da barra resumida é
     o seletor do tipo em modo ícone: a categoria aberta + a setinha ▾ (abre a
     lista dos tipos). Um respiro antes do Onde, sem crescer a barra. */
  .lc-barra-tipo { align-items: center; flex: 0 0 auto; align-self: center; padding-inline-start: var(--space-1); }
}

/* ═══ CS-E30 · R1/R2 (Capitão, 10/11) — O TOPO A1 FINAL, SÓ NO APP REACT ══════
   Linha principal: logo · [chip do tipo · fio · abas Buscar | Orçamentos] no
   meio · conta. O chip substitui a fita no app (a página do espaço, template do
   servidor, mantém .shell-fita/.shell-tipo acima, intocados: tudo daqui mora sob
   .shell-casca, que o portal nunca monta). Uma família de controle: o chip, a
   conta e o logo em --tap-min (44), as abas em --space-16 (64), uma borda só
   (--border-hair). Sem âmbar no chip (o realce é o papel --paper-100 com a borda
   escura, o mesmo dos segmentos); a opção marcada da lista segue o §6.9. */
.shell-casca .shell-topo-linha { justify-content: space-between; }
.shell-casca .shell-nav-par { display: flex; align-items: center; gap: var(--space-4); flex: 0 1 auto; min-width: 0; margin-inline: auto; }
.shell-casca .shell-nav--tipo { display: flex; align-items: stretch; flex: 0 0 auto; align-self: stretch; }
/* emenda do topo (10/11) — a fita explícita volta ao app; o par do meio estica
   para o traço do aceso encostar no fio do cabeçalho (como na página do espaço) */
.shell-casca .shell-nav-par { align-self: stretch; }
.shell-casca .shell-topo-abas { display: flex; align-items: center; min-width: 0; }
.shell-casca .shell-topo-abas:not(:empty)::before { content: ""; flex: 0 0 auto; width: 1px; height: var(--space-6);
  margin-inline-end: var(--space-4); background: var(--border-hair); }
.shell-tipo-ancora { position: relative; display: flex; align-items: center; }
.shell-tipo-sel { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--tap-min);
  padding-inline: var(--space-4); border: 1px solid var(--border-hair); border-radius: var(--radius-pill);
  background: var(--surface-card); cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.shell-tipo-sel .shell-tipo-ic { width: var(--space-6); height: var(--space-6); }
.shell-tipo-chev { fill: none; stroke: var(--ink-500); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shell-tipo-sel[data-aberto] { background: var(--paper-100); border-color: var(--border-ink); }
.shell-tipo-sel:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .shell-tipo-sel:hover { background: var(--paper-100); border-color: var(--border-ink); }
}
.shell-tipo-lista { position: absolute; left: 0; top: calc(100% + var(--space-2)); z-index: var(--z-raised);
  width: calc(var(--space-24) * 2 + var(--space-16)); margin: 0; padding: var(--space-2); list-style: none;
  background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); }
.shell-tipo-op { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min);
  padding-inline: var(--space-3); border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900); }
.shell-tipo-op .shell-tipo-ic { width: var(--space-6); height: var(--space-6); }
/* CS-E33 · R23 (Capitão, 12/11) — a opção marcada é CREME, não âmbar (DS §6.9):
   o papel rebaixado da lista do mockup aprovado + o ✓, letra escura e forte */
.shell-tipo-op[data-on] { background: var(--paper-200); color: var(--ink-900); font-weight: var(--fw-black); }
.shell-tipo-op:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.shell-tipo-ok { margin-inline-start: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shell-tipo-op--breve { color: var(--ink-500); font-weight: var(--fw-semi); cursor: default; }
.shell-tipo-breve { margin-inline-start: auto; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-500); }
/* a conta do app é o disco (A1 final) em qualquer largura */
.shell-casca .shell-topo .shell-conta { min-width: var(--tap-min); width: var(--tap-min); height: var(--tap-min);
  padding: 0; border: none; background: none; justify-content: center; border-radius: var(--radius-pill); }
.shell-casca .shell-topo .shell-conta-txt { display: none; }
.shell-casca .shell-topo .shell-inic { width: var(--tap-min); height: var(--tap-min); font-size: var(--fs-sm); }
/* regressão do R1 (portão do hover): o disco da conta no cabeçalho se anuncia
   como o da linha (o véu de 6%, a família do r40) */
.shell-casca .shell-topo .shell-conta { transition: background-color var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .shell-casca .shell-topo .shell-conta:hover { background-color: color-mix(in srgb, var(--ink-900) 6%, transparent); }
}
/* CS-E30 · R2 — O RESUMIDO (A1 final): logo · abas (as mesmas do estendido) ·
   barra numa linha de --control-h-lg (52) com a casinha na ponta e os segmentos
   só com o VALOR · conta. A Buscar mora numa escala local (0,9); a cópia das
   abas desfaz a escala para medir igual à de cima (64, ícone 32, --fs-sm). */
@media (hover: hover) and (pointer: fine) {
  /* CS-E31 · R20 (Capitão, 11/11, rodada 2) — «todas abas da versao resumida
     da barra de selecao devem manter seus icones»: no resumido sai só o
     RÓTULO (Onde, Quantos…); o ícone de cada segmento fica, como o da
     categoria na ponta. */
  /* CS-E33 · R18 (Capitão, 12/11, mockup aprovado) — REVÊ o R20 e a altura de
     52: no resumido a barra fica INTEIRA, rótulo + valor em cada segmento, na
     mesma altura do estendido (64). O que muda é só a ponta esquerda (a casinha
     marrom ▾, só ícone) e as pontas da linha (logo e conta). */
}
/* emenda do topo (10/11), estendida pelo CS-E33 · R19/R13 (Capitão, 12/11) — as
   abas abrem a FILEIRA DE BAIXO nos DOIS estados do topo (antes só no resumido;
   no estendido moravam na linha da barra): na altura da fileira (--tap-min, 44),
   ícone de 24, a mesma letra; um fio as aparta do que vem depois. A Buscar mora
   na escala local (0,9): desfaz-se para medir igual ao resto do topo. */
.shell-casca .lc-abas--faixa .lc-aba { height: var(--tap-min);
  font-size: calc(var(--fs-sm) / var(--escala-local, 1)); gap: calc(var(--space-2) / var(--escala-local, 1)); }
.shell-casca .lc-abas--faixa .lc-aba-ic svg { width: calc(var(--space-6) / var(--escala-local, 1));
  height: calc(var(--space-6) / var(--escala-local, 1)); }
.shell-casca .lc-abas--faixa .lc-aba-breve { font-size: calc(var(--fs-xs) / var(--escala-local, 1)); }
.shell-casca .lc-abas--faixa { gap: calc(var(--space-5) / var(--escala-local, 1)); }
.shell-casca .lc-abas--faixa::after { content: ""; flex: 0 0 auto; width: 1px; height: var(--space-6);
  margin-inline-start: calc(var(--space-1) / var(--escala-local, 1)); background: var(--border-hair); }
/* CS-E30 · R3 — a casinha da pílula do celular: o mesmo seletor do tipo, só o
   ícone, num disco de --tap-min sem borda (a borda é a da pílula) */
.shell-tipo-sel.shell-tipo-sel--ic { width: auto; min-width: var(--tap-min); padding-inline: var(--space-2);
  gap: calc(var(--space-1) / 2); justify-content: center; border-color: transparent; background: none; }
.shell-tipo-sel.shell-tipo-sel--ic[data-aberto] { background: var(--paper-100); }
@media (hover: hover) and (pointer: fine) {
  .shell-tipo-sel.shell-tipo-sel--ic:hover { background: var(--paper-100); border-color: transparent; }
}

/* ═══ CS-E31 · R22 (Capitão, 11/11, rodada 2) — O MARROM VAI PARA A CATEGORIA ═══
   «o botao da lupa esta desnecessario porque a busca ja se atualiza sem ele.
   pode usar o fundo marrom para a parte de selecao da catagoria do fornecedor».
   O botão redondo «ver os locais» saiu da barra (buscar_barra.js); o fundo dele
   (--brand, o espresso, com a costura --espresso-edge e o texto
   --text-on-espresso) passa para a SELEÇÃO DA CATEGORIA, nos dois estados do
   topo e no celular:
     · estendido — a categoria acesa da fita (Local) vira a pílula marrom de
       --tap-min; o traço de baixo sai (o fundo já diz «esta»). As «em breve»
       seguem como eram;
     · resumido e pílula do celular — a casinha ▾ da ponta da barra é o disco
       marrom (o mesmo lugar visual em que a lupa morava, na outra ponta).
   Só sob .shell-casca: a página do espaço (template do servidor) não muda. */
/* CS-E33 · R16 (Capitão, 12/11, mockup aprovado) — REVÊ o «estendido» acima: na
   fita do estendido a categoria acesa volta a ser letra forte + traço embaixo
   (a regra-base `.shell-tipo[aria-current]`, a mesma da página do espaço), SEM
   o fundo marrom. O marrom fica só onde a categoria mora DENTRO da barra: a
   casinha ▾ do resumido e da pílula do celular (abaixo). */
.shell-casca .shell-tipo-sel.shell-tipo-sel--ic { background: var(--brand); color: var(--text-on-espresso);
  box-shadow: inset 0 -2px 0 var(--espresso-edge); }
.shell-casca .shell-tipo-sel.shell-tipo-sel--ic .shell-tipo-chev { stroke: currentColor; }
.shell-casca .shell-tipo-sel.shell-tipo-sel--ic[data-aberto] { background: var(--brand-active); }
@media (hover: hover) and (pointer: fine) {
  .shell-casca .shell-tipo-sel.shell-tipo-sel--ic:hover { background: var(--brand-hover); }
}