/* ORBIT Empresa · paginas/casca.css — área A: a casca (o topo, os separadores, o «Mais» e as Configurações), a entrada e as peças das
   Configurações que vieram das Definições (a conta, a senha e a Aparência).

   Só o que é desta área, por cima dos componentes do sistema visual (visual.css: o-topo, o-abas, o-mais, o-portao,
   o-janela, o-cartao…), que não se redefinem aqui. Todas as classes novas levam o prefixo casca-. As medidas seguem a
   escala 4/8 das fichas; no telemóvel (até 53,75 em, ou toque deitado com pouca altura), os alvos têm 44 px e os campos
   16 px. Nunca container-type na barra dos separadores (fazia dela o contentor da folha fixa do «Mais» e do véu). */

/* ── a casca ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.casca { min-height: 100vh; min-height: 100dvh; }
/* a página recebe o foco do «Saltar para o conteúdo»: é uma região grande, não precisa do anel */
#pagina:focus { outline: none; }
/* o ponto de estado fica junto ao nome da empresa (pronta, a trabalhar · N, à tua espera · N) */
.casca-topo .o-estado-ia { flex: none; }
.o-estado-ia[data-estado="aviso"] { color: var(--aviso); }
.o-estado-ia[data-estado="aviso"] b { color: var(--aviso); }
/* à direita, no computador: quem entrou (o avatar e o nome, que levam a Configurações › Segurança) e o «Sair» */
.casca-conta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-width: var(--ctl); min-height: var(--ctl); padding: 0 var(--e-1);
  border-radius: var(--r); color: var(--ink-2); text-decoration: none; font: 500 var(--t-13)/1.2 var(--sans);
}
.casca-conta:hover { background: var(--hover); color: var(--ink); }
.casca-conta-nome { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.casca-conta-nome:empty { display: none; }
@media (max-width: 75em) { .casca-conta-nome { display: none; } }
/* (23/10) a faixa da sessão da WeSolve (cascaFaixaWesolve): à direita do topo, no lugar de quem entrou, em todos os ecrãs
   (também no telemóvel, onde o topo fica em cima e as páginas em baixo); a cor do aviso, para nunca passar despercebida */
.casca-wesolve {
  display: inline-flex; align-items: center; gap: var(--e-2); flex: none; margin-left: auto; min-width: 0;
  padding: var(--e-1) var(--e-1) var(--e-1) var(--e-3);
  border: 1px solid var(--aviso-linha); border-radius: var(--r-pilula); background: var(--aviso-fundo); color: var(--ink);
  font: 600 var(--t-13)/1.2 var(--sans); white-space: nowrap;
}
.casca-wesolve > .o-ic { color: var(--aviso); }
.casca-wesolve-sair { border-radius: var(--r-pilula); }
.casca-wesolve-curto { display: none; }
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .casca-wesolve { gap: var(--e-1); padding: 0 0 0 var(--e-2); font-size: var(--t-12); }
  .casca-wesolve > .o-ic { display: none; }
  /* o nome da empresa vale mais do que a palavra ORBIT ao lado do símbolo: a WeSolve vê em que OS está */
  .casca-topo--wesolve .o-marca-nome { display: none; }
  /* (a revisão de 23/10, achado 11) e o nome vai na faixa, inteiro: «WeSolve · <empresa>» no lugar de «Sessão da WeSolve»
     (a pílula da empresa sai; um nome muito comprido corta-se no fim, com o nome todo no title) */
  .casca-topo--wesolve .o-empresa { display: none; }
  .casca-wesolve { flex: 0 1 auto; }
  .casca-wesolve-texto { display: none; }
  .casca-wesolve-curto { display: inline-flex; min-width: 0; overflow: hidden; white-space: pre; }
  .casca-wesolve-empresa { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .casca-topo--wesolve a.o-marca { min-width: var(--ctl); justify-content: center; }
  .casca-wesolve-sair { padding: 0 var(--e-3); }
  .casca-wesolve-sair > .o-ic { display: none; }
}
/* o «Mais ▾» sem páginas (a porta fechada, no computador) */
.casca-mais-vazio { display: none; }
.casca-mais-nome { display: flex; flex: 1; flex-direction: column; min-width: 0; }
/* a legenda de uma linha dos menus («as receitas da IA», «quem entra e o que vê») */
.casca-mais-sub { color: var(--ink-3); font: 400 var(--t-12)/1.3 var(--sans); }
.casca-mais-conta .o-mais-quem { display: flex; flex-direction: column; gap: 2px; padding: var(--e-2); }
.casca-quem-nome { color: var(--ink); font: 600 var(--t-14)/1.4 var(--sans); overflow-wrap: anywhere; }
.casca-quem-email { overflow-wrap: anywhere; }
/* sem nome (uma conta de antes de «O teu nome»): o caminho para o pôr, com o alvo de 44 px no toque */
.casca-quem-nome-por { display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--ctl);
  font: 500 var(--t-13)/1.3 var(--sans); }
.casca-mais-conta .casca-sair { margin-top: var(--e-2); }
/* a folha das Configurações no telemóvel: as partes, o grupo «Mais» e quem entrou, separados por uma linha */
.casca-cfg-mais, .casca-mais-conta { margin-top: var(--e-2); padding-top: var(--e-2); border-top: 1px solid var(--linha); }
/* a folha das Configurações no telemóvel: o título e o «Fechar»; o dedo no véu ou na barra não rola a página por trás (o véu
   da folha é irmão dela, não a envolve: a barra leva a regra, e a folha, se rolar, não passa o dedo à página) */
.casca-mais-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-1) 0 var(--e-2) var(--e-2); }
.casca-mais-titulo { color: var(--ink); font: 600 var(--t-15)/1.3 var(--sans); }
.o-mais-veu, .casca-topo .o-abas { touch-action: pinch-zoom; }
#casca-mais { overscroll-behavior: contain; }
/* o número «À tua espera» (T3) no separador Chat e o do «Precisa de ti» no separador Tarefas: no computador, depois do
   nome; no telemóvel, por cima do ícone (o visual.css já o põe lá) */
.o-aba > .casca-espera, .o-aba > .casca-precisa { margin-left: 2px; }

/* ── a barra com as Tarefas (23/10, a F7; só com elas ligadas: o casca-topo--tarefas e as casca-estrutura*) ─────── */
/* Um separador a mais (o das Tarefas, a seguir ao Chat), como a proposta aprovada (o tarefas-comum.css da passagem de
   coerência, §1): no computador, os separadores não encolhem (encolhe o nome da empresa, que já tem as reticências); o
   computador estreito do visual.css (os separadores sem ícone, o ponto só com o número) vai até aos 1280 px; e até aos
   960 px a Estrutura sai da barra para o «Mais ▾», a primeira da lista. No telemóvel, a Estrutura sai da barra de baixo
   (o o-so-computador) e fica no grupo «Mais» da folha das Configurações. Desligadas as Tarefas, nada disto se aplica.
   (A revisão da F7, 23/10) Uma janela baixa com o rato (menos de 31,25em de altura: um quarto do ecrã, as ferramentas
   do browser em baixo) é o computador, não o telemóvel deitado (esse é o toque): leva as mesmas regras, dos 861 aos
   1280 px. Sem isto, os separadores que não encolhem passavam a largura da janela e a página deslizava para o lado. */
.casca-estrutura-mais { display: none; }
@media (min-width: 53.8125em) {
  .casca-topo--tarefas .o-abas { flex: none; }
}
/* (A segunda revisão da F7, 23/10) O nome de quem entrou (à vista acima dos 1200 px, até 180 px, com «…») tem menos
   lugar quando os ícones voltam (a partir dos 1281 px): cresce com a janela, dos 40 px aos 180 (aos 1420 px). Sem isto,
   um nome comprido passava a barra para fora da janela dos 1281 aos 1350 px e deixava o nome da empresa com 18 px. Em
   rem, como os pontos de viragem (seguem o tamanho de letra do browser). */
@media (min-width: 80.0625em) {
  .casca-topo--tarefas .casca-conta-nome { max-width: clamp(2.5rem, calc(100vw - 77.5rem), 180px); }
}
@media (min-width: 68.8125em) and (max-width: 80em) and (min-height: 31.3125em),
  (min-width: 53.8125em) and (max-width: 80em) and (pointer: fine) {
  .casca-topo--tarefas { gap: var(--e-3); }
  .casca-topo--tarefas .o-abas > .o-aba > .o-ic:first-child, .casca-topo--tarefas .o-mais-ancora > .o-aba > .o-ic:first-child { display: none; }
  .casca-topo--tarefas .o-aba { padding: 0 var(--e-2); }
  /* o ponto só com o número, como no computador estreito do visual.css: «a trabalhar · 3» não depende só da cor */
  .casca-topo--tarefas .o-estado-ia { min-width: var(--ctl); justify-content: center; }
  .casca-topo--tarefas .o-estado-ia-texto {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .casca-topo--tarefas .o-estado-ia-n { display: inline; }
}
@media (min-width: 53.8125em) and (max-width: 60em) and (min-height: 31.3125em),
  (min-width: 53.8125em) and (max-width: 60em) and (pointer: fine) {
  .casca-topo--tarefas .o-abas > .casca-estrutura { display: none; }
  .casca-topo--tarefas .casca-estrutura-mais { display: flex; }
}

/* o cabeçalho de cada página (o h1, a legenda e as ações): o mesmo nas quatro áreas (o .g-cabeca da gestão e o
   .ch-cabeca-pagina do Chat têm as mesmas medidas): 20 px até ao conteúdo, 16 no telemóvel */
.casca-cabeca { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e-2) var(--e-4);
  margin: 0 0 var(--e-5); }
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) { .casca-cabeca { margin-bottom: var(--e-4); } }
.casca-cabeca-texto { flex: 1 1 280px; min-width: 0; }
.casca-cabeca .o-pagina-cabeca { margin: 0; }
.casca-cabeca .o-pagina-legenda { margin: var(--e-1) 0 0; }
.casca-cabeca-acoes { flex: none; max-width: 100%; }
/* a porta fechada (sem conta de IA): o aviso por cima da página; uma página que não abriu */
.casca-porta, .casca-nao-abriu { margin: 0 0 var(--e-4); }

@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .casca-mais-vazio { display: flex; }
  /* o separador das Configurações, um pouco mais largo, para o nome caber inteiro (a 12 px, «Configurações» mede uns
     78 px no WebKit: fica com uns 101 px a 390 e 83 a 320) */
  .casca-topo .o-abas > .casca-cfg-ancora { flex: 1.4 1 0; }
}
/* a escrever no telemóvel (o teclado aberto), a barra de baixo sai do caminho: não tapa o campo. Esconde-se sem sair do
   sítio nem mudar de altura (visibility, não display): nada na página se mexe entre o toque e o clique. E volta só uns
   instantes depois de se sair da caixa: um toque num botão perto do fundo (que tira o foco da caixa) acaba no botão, não
   na barra que voltava debaixo do dedo. Vale para todas as páginas (o Chat mede-a para a caixa de escrever). */
@media (max-width: 53.75em) and (pointer: coarse), (pointer: coarse) and (max-height: 31.25em) {
  .casca .o-abas { transition: visibility 0s linear .45s; }
  .casca:has(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]):not([type=color]):focus,
    textarea:focus) .o-abas { visibility: hidden; transition-delay: 0s; }
}

/* ── a janela da casa (o-veu e o-janela) ─────────────────────────────────────────────────────────────────────────── */
/* o dedo na parte escura não rola a página por trás (o véu não rola: o overscroll-behavior não chegava). Fica a
   aproximação com dois dedos; a janela rola por dentro (quem tem scroll próprio volta a deixar o dedo deslizar) */
.o-veu { touch-action: pinch-zoom; }
.o-veu > .o-janela { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: auto; overscroll-behavior: contain; }
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  /* no telemóvel: a janela sem campos em baixo (à mão do polegar); a com campos em cima (o teclado abre por baixo) */
  .o-veu:not(.o-veu--folha) { place-items: end center; }
  .o-veu:has(.o-janela input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .o-janela textarea, .o-janela select) { place-items: start center; }
  .o-veu > .o-janela { margin: 0; }
}
/* o valor revelado (janelaValor): seleciona-se inteiro para copiar */
.casca-valor { margin: 0 0 var(--e-3); padding: var(--e-3); max-height: 40vh; overflow: auto; border: 1px solid var(--linha-2);
  border-radius: var(--r); background: var(--void); color: var(--ink); font: 500 var(--t-14)/1.45 var(--mono);
  white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.casca-valor-nota { margin-bottom: 0; }
/* a nota «O que mudou» */
.casca-novidades { display: flex; flex-direction: column; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.casca-novidades li { display: flex; align-items: flex-start; gap: var(--e-3); color: var(--ink); font-size: var(--t-14); line-height: 1.5; }
/* items-start de propósito: o texto pode partir em duas linhas e o ícone fica na primeira (a altura de uma linha) */
.casca-novidades li > .o-ic { height: 1.5em; color: var(--accent-texto); }

/* ── o terminal (o-terminal, com os botões por cima) ─────────────────────────────────────────────────────────────── */
/* no fim, o terminal deixa passar o dedo (e a roda) para a página: numa camada própria, fica em píxeis inteiros e o fim
   dele é mesmo o fim (numa posição com fração de píxel, o primeiro deslize ficava nele); o overscroll fica o de omissão */
.o-terminal { will-change: transform; }
/* a caixa do terminal segura os botões por cima dele («Ver para trás» em cima, «Ir para o fim» em baixo) */
.terminal-caixa { position: relative; }
.terminal-caixa > .o-terminal { height: 56vh; min-height: min(280px, 50vh); margin: 0; }
.terminal-caixa > .o-terminal.casca-baixo { height: 30vh; min-height: 160px; }
.terminal-caixa > .ir-fim, .terminal-caixa > .ver-tras { position: absolute; right: 12px; }
.terminal-caixa > .ir-fim { bottom: 12px; }
.terminal-caixa > .ver-tras { top: 12px; display: none; }
@media (pointer: coarse) {
  /* no telemóvel, a seguir as linhas novas, o terminal não rola por dentro: o dedo em cima dele rola a página;
     «Ver para trás» deixa-o rolar (até voltar ao fundo, ou ao «Ir para o fim») */
  .terminal-caixa:not(.a-ler) > .o-terminal { overflow-y: hidden; }
  .terminal-caixa.tem-historia:not(.a-ler) > .ver-tras { display: inline-flex; }
}
@media (pointer: coarse) {
  /* «Ver para trás» fica por cima do terminal, numa faixa dele, sem tapar o fim das primeiras linhas (revisão do fecho,
     18/10: no iPhone tapava o texto do terminal) */
  .terminal-caixa.tem-historia { padding-top: calc(var(--ctl) + var(--e-2)); }
  .terminal-caixa.tem-historia > .ver-tras { top: 0; right: 0; }
}
@media (max-width: 599px) { .terminal-caixa > .o-terminal:not(.casca-baixo) { height: 40vh; } }

/* ── a entrada, o código, o convite, a ativação e o onboarding (o portão) ─────────────────────────────────────────── */
.casca-portao .o-portao-titulo { overflow-wrap: break-word; }
.casca-portao .o-portao-legenda { overflow-wrap: break-word; }
.casca-pilha { gap: var(--e-4); }
.casca-pilha > .o-btn { width: 100%; }
.casca-portao .o-form > .o-btn--primario { width: 100%; white-space: normal; }
.casca-centro { margin: var(--e-3) 0 0; text-align: center; }
.casca-ligacao { color: var(--accent-texto); font-size: var(--t-13); text-underline-offset: 2px; }
.casca-ligacao:hover { color: var(--ink); }
/* a caixa «Confiar neste dispositivo»: a cor do acento (já não o azul do browser) e a nota por baixo */
.casca-marcar input { accent-color: var(--accent); }
/* o onboarding: os passos à vista, o título à esquerda, os botões do fundo */
.casca-arranque .casca-esq { text-align: left; }
.casca-passos { margin: 0 0 var(--e-5); }
.casca-passo-n { margin: 0 0 var(--e-1); }
.casca-escolhas { margin: 0 0 var(--e-4); }
.casca-da-instalacao { margin: 0 0 var(--e-2); }   /* o mesmo espaço que entre os cartões (o gap das .o-escolhas) */
.casca-escolhas .o-escolha { flex: 1 1 220px; }
.casca-numero { max-width: 200px; }
.casca-passo-corpo { min-width: 0; margin: 0 0 var(--e-4); }
.casca-passo-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); margin: var(--e-5) 0 var(--e-3); }
.casca-fim-icone { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--e-4); border-radius: 50%;
  background: var(--ok-fundo); color: var(--ok); }
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  /* o passo seguinte em cima, à largura toda; «Saltar» e «Voltar» por baixo */
  .casca-passo-acoes, .casca-passo-acoes > .o-acoes { flex-direction: column-reverse; align-items: stretch; }
  .casca-passo-acoes .o-btn { width: 100%; }
}
/* o segundo passo: as outras formas («Usar a app de códigos», «Usar um código de recuperação»), uma por linha */
.casca-outras { display: flex; flex-direction: column; align-items: center; gap: var(--e-1); margin: var(--e-4) 0 0; }
/* a escolha do segundo passo (ativação e convite): uma por linha, a largura toda; a desligada diz porquê */
.casca-escolhas-2p { flex-direction: column; }
.casca-escolhas-2p .o-escolha { flex: 1 1 auto; width: 100%; min-width: 0; }
/* um email comprido na nota do «Código por email» parte dentro da escolha (a 320 px saía 200 px para o lado) */
.casca-escolhas-2p .o-escolha-titulo, .casca-escolhas-2p .o-escolha-nota { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.casca-escolhas-2p .o-escolha:disabled { opacity: .6; cursor: not-allowed; }
.casca-app, .casca-codigos { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; margin: 0 0 var(--e-4); text-align: left; }
.casca-app > *, .casca-codigos > * { margin-top: 0; margin-bottom: 0; }
/* o que ficou feito (a chave, a app), dito no ecrã dos códigos em vez do aviso por cima do botão (L40) */
.casca-feito { display: flex; align-items: flex-start; gap: var(--e-2); }
.casca-feito > .o-ic { flex: none; height: 1.5em; color: var(--ok); }
@media (pointer: coarse) {
  .casca-ligacao { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  /* o «Saltar para o conteúdo» (só à vista com o foco do teclado) também com 44 px */
  .o-saltar { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── as peças das Configurações (a conta, a senha, a Aparência) ───────────────────────────────────────────────────── */
.casca-def-corpo { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.casca-def-corpo > .o-cartao-texto { margin: 0; }
/* o nome e o botão na mesma linha (o botão desce quando não cabe) */
.casca-form-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); min-width: 0; }
.casca-form-linha > .o-campo { flex: 1 1 200px; }
.casca-form-linha > .o-btn { flex: none; min-height: var(--ctl-campo); }
/* as opções com interruptor (o acesso da WeSolve, a ponte) */
.casca-opcao { min-width: 0; }
.casca-opcao + .casca-opcao { padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.casca-opcao-texto { min-width: 0; }
.casca-opcao-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); color: var(--ink); }
.casca-opcao-titulo > b { font-weight: 600; }
.casca-opcao .o-dica { margin-top: var(--e-1); }
.casca-opcao > .o-aviso, .casca-opcao > .casca-detalhe { margin-top: var(--e-3); }
/* a Aparência: a escolha à esquerda, a pré-visualização à direita (no telemóvel, uma por baixo da outra) */
.casca-ap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); min-width: 0; }
.casca-ap-escolha, .casca-ap-ver { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
@media (min-width: 56.25em) { .casca-ap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.casca-ap-cor { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-3); align-items: start; }
.casca-seletor {
  width: 64px; height: var(--ctl-campo); padding: 2px; border: 1px solid var(--linha-campo); border-radius: var(--r);
  background: var(--painel-2); cursor: pointer;
}
.casca-seletor::-webkit-color-swatch-wrapper { padding: 0; }
.casca-seletor::-webkit-color-swatch { border: 0; border-radius: 2px; }
.casca-seletor::-moz-color-swatch { border: 0; border-radius: 2px; }
.casca-paleta { display: inline-flex; align-items: center; gap: var(--e-2); }
.casca-previa {
  display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; padding: var(--e-4); border: 1px solid var(--linha);
  border-radius: var(--r-cartao); background: radial-gradient(circle at 50% 0%, rgb(var(--accent-texto-rgb) / .06), transparent 60%), var(--void);
}
.casca-previa-topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); min-width: 0; }
.casca-previa-aba { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.casca-previa-tab {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--ctl); padding: 0 var(--e-3);
  border: 1px solid var(--linha-2); border-radius: var(--r); background: var(--painel-2); color: var(--ink); font: 500 var(--t-13)/1 var(--sans);
}
.casca-previa-tab .o-ic { color: var(--accent-texto); }
.casca-previa-frase { color: var(--ink-2); font-size: var(--t-13); }
.casca-previa-ligacao { color: var(--accent-texto); text-decoration: underline; text-underline-offset: 2px; }
.casca-previa .o-btn { cursor: default; }
.casca-previa .o-escolha { flex: none; min-width: 0; }
.casca-ap-numeros { margin: 0; color: var(--ink-2); font-size: var(--t-12); }
.casca-ap-numeros:empty, .casca-ap-avisos:empty { display: none; }
/* a cor da marca pela IA: quem mudou a cor por último (por baixo do «Em uso») e, por baixo da escolha e da
   pré-visualização, o «Pedir à IA a cor da marca» e as últimas mudanças */
.casca-ap-ultima { margin: 0; }
.casca-ap-ia { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.casca-ap-ia > .o-cartao-texto { margin: 0; }
.casca-ap-registo .o-linha { align-items: flex-start; }
.casca-ap-registo .o-linha-corpo { min-width: 0; overflow-wrap: anywhere; }
.casca-ap-registo .o-linha-fim { flex: none; }

/* o próprio email, inteiro, em «A tua conta»: parte no «@» (o emailJunto) em vez de sair do cartão (um email comprido,
   com a Entrada em duas colunas, saía 50 px para o lado a 1024 px) */
.o-dado-valor.casca-dado-email { flex: 0 1 auto; min-width: 0; white-space: normal; }

/* A marca da instalação (23/10, só com ela: o casca-marca-propria e o casca-logo do casca.js). O logótipo no lugar do
   glifo, a 20 px de altura no topo e a 24 na entrada, sem passar de 120 px de largura (80 no telemóvel). Sem lugar para
   tudo, o nome e o logótipo encolhem (o nome com «…»), a meias com o nome da empresa; os separadores do computador nunca
   (ficavam por baixo do «Sair»). Sem a marca, nada disto se aplica. */
.casca-logo { display: block; flex: 0 1 auto; min-width: 20px; width: auto; height: 20px; max-width: 120px; object-fit: contain;
  object-position: left center; }
.o-portao-marca .casca-logo { height: 24px; max-width: 160px; }
.casca-marca-propria { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; }
.casca-marca-propria .o-marca-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.o-topo:has(> .casca-marca-propria) > .o-abas { flex-shrink: 0; }
@media (max-width: 53.75em) {
  .o-topo .casca-logo { max-width: 80px; }
}

/* (23/10) o número por ler do Inbox na linha dele, nos dois «Mais»: à direita, antes da seta do telemóvel */
.casca-inbox-n { margin-left: auto; }
.casca-inbox-n + .o-ic-fim { margin-left: var(--e-2); }