/* =====================================================================
   WHATELSE · CARTÃO DE VIDRO — a estrutura, e só ela.

   PROPOSTA AO HUB para virar canônico em `packages/shell/public/v1/`.
   Nasceu no PXUS; o Anota Aí copiou o visual inteiro para dentro do
   `<style>` deles e a cópia já divergia. A saída não é avisar quando eu
   mexer (só hoje mexi seis vezes) — é os dois carregarem o mesmo arquivo.

   ---------------------------------------------------------------------
   O QUE ENTRA AQUI, E O QUE NÃO ENTRA

   Régua do Anota Aí, adotada: **na dúvida sobre uma regra, ela FICA no app.**
   É mais fácil promover uma regra depois do que despromover uma que já está
   valendo em quatro lugares.

   ENTRA — o que faz um cartão de vidro ser um cartão de vidro:
     · o palco e a folha de fundo (a foto sob o vidro, e o véu que a segura)
     · o cartão, a lâmina divisória, o painel largo
     · a folha que cobre a tela
     · o comportamento em celular: tela cheia e área segura

   NÃO ENTRA — o que é conteúdo de um app:
     tipografia da data, medidor, ninho da orbe, chips, campo livre, rodapé,
     ícones, linhas de lista, perfil. Isso é do PXUS e mora no PXUS.

   ---------------------------------------------------------------------
   PREFIXO `wa-`, e não `px-`

   Arquivo compartilhado com prefixo de um app seria mentira no nome, e o
   `naming.md` é contrato desta casa. Conferido contra o `shell.js` 1.11.0:
   `wa-palco`, `wa-foto`, `wa-cartao`, `wa-lamina`, `wa-larga`, `wa-folha`
   e `wa-folha-in` NÃO colidem com nenhuma classe do shell.

   ---------------------------------------------------------------------
   DEPENDE DE: as variáveis de cor da MATRIZ (`--wa-bg-a`, `--wa-ink`,
   `--wa-panel`, `--wa-brd`, `--wa-glass`, `--wa-line`, `--wa-accent`) e das
   margens seguras (`--wa-safe-top`, `--wa-safe-bottom`), todas do `shell.js`.
   Não define cor própria: um cartão que escolhe cor deixa de servir a apps
   com paletas diferentes.
   ===================================================================== */

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  min-height:100dvh; color:var(--wa-ink);
  background:linear-gradient(165deg,var(--wa-bg-a),var(--wa-bg-b));
  -webkit-font-smoothing:antialiased; overflow:hidden;
}

/* z-index 30. Corrigido de 51 em 12/ago/2026, no mesmo dia: o 51 fazia o cartão
   aparecer, mas passava por cima do TRILHO LATERAL (`.wa-side`, z=45) — a gaveta
   ficava atrás da imagem de fundo. Consertei o sintoma e criei outro defeito.

   A pilha do shell é: navbar 40 · side 45 · coracao 50 · cmenu 55 · orbe 60.
   O lugar do cartão é ABAIXO de toda a mobília da casa e acima do resto. Medi os
   quatro valores no navegador antes de escrever: em 20, 30 e 44 o cartão aparece
   E o trilho fica por cima; só em 51 o trilho some. Fica 30, com folga dos dois
   lados.

   O `.wa-coracao` em z=50 continua sendo esquisito para uma camada de FUNDO, mas
   ela leva `wa-gone` em modo app e não ocluía nada — mexer nela seria arriscar a
   tela de entrada de sete apps para consertar o que já está consertado aqui.

   Sem isto o cartão fica INVISÍVEL, e ficou por meses — inclusive no PXUS, que
   é o app-modelo. O `.wa-shell` é o último filho do <body> e o `.wa-palco` vem
   antes; com os dois em `z-index:auto`, irmão posterior pinta por cima. O
   `.wa-cor-bg` do shell cobria o cartão inteiro.

   Ninguém viu porque o sintoma não é erro: o cartão continua no DOM, 420x520,
   `opacity:1`, `visibility:visible` — só não aparece. Medi os dois lados: no
   claro o vidro é 26% de branco, no escuro 4%, e sob a camada do shell os dois
   somem por igual. Achado em 12/ago/2026 montando o protótipo do Coração.
   (`ausencia-honesta.md`: resultado errado com cara de resultado normal.) */
.wa-palco{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:22px 14px}

/* ---- a foto sob o vidro ----
   Vidro revela o que há atrás, e uma FOTO é o que há de melhor para revelar:
   tem borda, tem tom, tem detalhe — o desfoque finalmente tem o que dobrar.

   O PADRÃO É NENHUMA IMAGEM, de propósito. Quando a imagem que vem com o app
   morava aqui, ela virava o RESULTADO DE QUALQUER FALHA: leitura que não
   volta, módulo velho, JavaScript que parou antes da hora — tudo terminava
   mostrando a mesma foto, inclusive para quem tinha escolhido não ter fundo.
   Um padrão que reaparece sozinho esconde o defeito em vez de mostrar.
   Quem põe imagem é o código, sempre. Sem código, tela limpa.
   (É o `ausencia-honesta.md` aplicado a uma folha de estilo.) */
:root{ --wa-foto:none; }
.wa-foto{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--wa-foto) center/cover no-repeat;
}
/* O véu. Sem ele a foto rouba a tela: o texto perde contraste e o app deixa de
   ser o que é. Com ele a foto vira ATMOSFERA — some quase toda, e o que resta
   é justamente o que o vidro precisa para existir.
   Testado em três forças: 55% e a foto vira o app; 88% e a foto vira nada.

   ── CORRIGIDO EM 21/08, e o comentário antigo entregava o erro ───────
   Ele dizia "74/82 é onde ela existe sem mandar" — mas 74/82 são os números
   do bloco ESCURO, e o bloco base (que vale para o CLARO) estava em 78/85,
   ou seja MAIS FORTE. A calibragem foi feita no escuro e o claro herdou
   números maiores sem ninguém retunar.
   E a diferença não é simétrica, porque as duas paletas não são:
       claro   --wa-bg-a #F3F0EA  quase BRANCO  → véu a 78/85
       escuro  --wa-bg-a #0B0B0C  quase PRETO   → véu a 74/82
   Branco a 78% sobre foto clara apaga muito mais do que preto a 74% sobre
   foto no escuro. Resultado: a foto que o dono subiu ficava quase invisível
   no tema claro. Medido e reportado pelo chat de Vínculos, com a sessão do
   dono aberta — não deduzido.

   REDUZIR O VÉU NO CLARO NÃO CUSTA LEGIBILIDADE, e isto foi verificado antes
   de mexer: `.wa-foto` é z-index 0 e NADA lê direto sobre ela. Cartão, roda,
   gaveta e folha têm `--wa-panel` opaco próprio. O véu é atmosfera, não
   fundo de texto.

   POR QUE TOKEN E NÃO NÚMERO: a força certa do véu depende da paleta de quem
   usa, e um valor fixo no compartilhado vai estar errado para alguém sempre —
   foi literalmente o que acabou de acontecer entre os dois temas do MESMO
   arquivo. Cada app calibra com a própria paleta sem bifurcar o canônico. */
:root{ --wa-veu-a:62%; --wa-veu-b:70%; }
:root:root[data-wa-theme="dark"]{ --wa-veu-a:74%; --wa-veu-b:82%; }
.wa-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(165deg,
    color-mix(in oklab,var(--wa-bg-a) var(--wa-veu-a),transparent),
    color-mix(in oklab,var(--wa-bg-b) var(--wa-veu-b),transparent));
}

.wa-cartao{
  position:relative; display:flex; width:min(100%,420px); height:min(74vh,520px);
  border-radius:20px; overflow:hidden;
  background:var(--wa-panel); border:1px solid var(--wa-brd);
  backdrop-filter:blur(30px) saturate(1.4); -webkit-backdrop-filter:blur(30px) saturate(1.4);
  box-shadow:0 30px 70px -34px rgba(20,10,50,.6);
}

/* ---- a lâmina: uma LÂMINA, não uma área mais clara ----
   Sem focos de luz atrás, translucidez sozinha vira só "cinza um pouco
   diferente". O que faz ler como vidro é a física da borda:
     1. brilho especular no canto superior-esquerdo (por onde a luz entraria)
     2. sombra interna no canto oposto (a espessura da lâmina)
     3. reflexo diagonal na superfície, que não segue o conteúdo
     4. desfoque e saturação MAIORES que os do cartão — duas espessuras
        distintas de vidro, e é o contraste entre elas que se enxerga
   A divisória é uma costura de dois fios: um claro (a quina que pega luz) e um
   escuro (a sombra que a lâmina projeta no vidro de baixo). */
/* A LÂMINA NUNCA AUMENTA. Regra do dono: "ela pode diminuir, mas nunca aumentar
   de tamanho, senão perde a elegância." Era 34% — porcentagem CRESCE junto com o
   box, então quando a larga abria na horizontal a lâmina engordava junto. Agora é
   medida fixa: teto em pixels, e encolhe quando faltar espaço. */
.wa-lamina{
  width:142px; flex:0 1 142px; max-width:142px; padding:20px 13px 22px; display:flex; flex-direction:column;
  position:relative;
  background:
    linear-gradient(142deg,
      rgba(255,255,255,.11) 0%,
      rgba(255,255,255,.03) 38%,
      rgba(255,255,255,.005) 62%,
      rgba(255,255,255,.05) 100%),
    var(--wa-glass);
  backdrop-filter:blur(48px) saturate(1.9);
  -webkit-backdrop-filter:blur(48px) saturate(1.9);
  border-right:1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.15),
    inset -1px -18px 26px -20px rgba(0,0,0,.5),
    1px 0 0 rgba(0,0,0,.28);
}
/* O fio de luz que corre a quina de cima — a linha mais fina da tela e a que
   mais convence. */
.wa-lamina::after{
  content:"";position:absolute;left:10px;right:10px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
}
/* No claro, vidro NÃO é tinta branca. Uma lâmina real sobre papel claro fica um
   pouco mais ESCURA que o papel, não mais clara — e é a quina acesa que
   denuncia que existe vidro ali. Clarear a lâmina era pintá-la de branco. */
:root:root[data-wa-theme="light"] .wa-lamina{
  background:
    linear-gradient(142deg,
      rgba(255,255,255,.42) 0%,
      rgba(46,38,64,.045) 46%,
      rgba(46,38,64,.06) 72%,
      rgba(255,255,255,.14) 100%);
  border-right:1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.9),
    inset -1px -20px 30px -22px rgba(40,34,60,.2),
    1px 0 0 rgba(40,34,60,.08);
}
:root:root[data-wa-theme="light"] .wa-lamina::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,1),transparent);
}

.wa-larga{flex:1;min-width:0;padding:20px 18px 22px;display:flex;flex-direction:column}

/* ---- a folha que cobre a tela ---- */
.wa-folha{position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:20px;
  background:color-mix(in oklab,var(--wa-bg-a) 62%,transparent);backdrop-filter:blur(8px)}
.wa-folha.wa-abre{display:grid}
.wa-folha-in{width:min(100%,420px);max-height:78vh;overflow-y:auto;border-radius:20px;padding:18px;
  background:color-mix(in oklab,var(--wa-bg-b) 94%,transparent);border:1px solid var(--wa-brd);
  box-shadow:0 30px 70px -30px rgba(20,10,50,.7)}

/* ── A GRADE DA COLOCAÇÃO (§3.9.4) — item novo do acervo, 03/09 ───────
   Mora dentro de `.wa-folha`/`.wa-folha-in`, que já são do acervo. Só três
   classes novas, e a razão de cada uma:

   `.wa-grade-cab` leva o TIPO do lugar junto do nome. Não é enfeite: a §3.9.4
   diz que marcar uma célula sem saber quem enxerga aquela coluna é como se
   publica sem querer. O tipo é a única defesa contra isso, e ela é de leitura.

   `.wa-grade-cel` tem 44px de alvo, a mesma régua do `.wa-ic` — que a casa
   adotou em 02/09 porque 34px passava no mínimo AA e ficava abaixo do alvo
   de toque da Apple e do WCAG 2.5.5.

   A grade rola na horizontal por dentro; a folha nunca rola de lado. */
.wa-grade{width:100%;overflow-x:auto;border-collapse:separate;border-spacing:0;
  font-family:inherit;font-size:12px}
.wa-grade table{border-collapse:separate;border-spacing:0;width:100%}
.wa-grade th,.wa-grade td{padding:0;text-align:center;vertical-align:middle}
.wa-grade th:first-child,.wa-grade td:first-child{
  text-align:left;position:sticky;left:0;z-index:1;background:var(--wa-panel);
  padding-right:10px;min-width:132px;max-width:132px}
.wa-grade-cab{padding:6px 8px 9px;min-width:76px;font-weight:400;
  border-bottom:1px solid var(--wa-line)}
.wa-grade-cab b{display:block;font-size:11px;font-weight:500;color:var(--wa-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:74px}
.wa-grade-cab i{display:block;font-style:normal;font-size:8px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--wa-muted2);margin-top:2px}
.wa-grade-lin{font-size:12px;color:var(--wa-ink);padding:0 0 0 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-grade-lin i{display:block;font-style:normal;font-size:9px;color:var(--wa-muted2)}
.wa-grade-cel{width:44px;height:44px;min-width:44px;border:0;padding:0;cursor:pointer;
  background:transparent;color:var(--wa-muted2);font-size:15px;line-height:1;
  border-radius:10px;transition:.14s}
.wa-grade-cel:hover{background:var(--wa-glass)}
.wa-grade-cel.on{color:var(--wa-accent)}
.wa-grade-vazia{font-size:12px;color:var(--wa-muted);text-align:center;padding:18px 4px}

/* ---- celular: tela cheia, e a lâmina CONTINUA EM PÉ ----
   No telefone o cartão DEIXA de ser cartão: vira a tela. Somem a borda, o raio
   e a sombra — nada disso faz sentido sem moldura em volta, e canto arredondado
   sobre o canto do aparelho vira sobra visível.

   A divisória segue VERTICAL. Girá-la fazia a tela virar outra coisa justamente
   no aparelho onde ela mais é usada.

   Área segura pelas variáveis do SHELL, não pelo `env()` cru: mesma conta hoje,
   mas se a família mudar como calcula (uma folga mínima, um aparelho novo), o
   app acompanha sem ninguém lembrar dele. */
@media (max-width:600px){
  .wa-palco{padding:0;place-items:stretch}
  .wa-cartao{
    width:100%; height:100dvh; max-height:none;
    border:0; border-radius:0; box-shadow:none;
  }
  html,body{overflow:hidden}
  .wa-lamina{
    width:37%; flex:0 0 37%;
    padding:max(18px,var(--wa-safe-top)) 12px max(20px,calc(var(--wa-safe-bottom) + 8px));
  }
  .wa-larga{
    padding:max(18px,var(--wa-safe-top)) 14px max(20px,calc(var(--wa-safe-bottom) + 8px));
  }
}

/* =====================================================================
   AS PARTES DE DENTRO — promovidas do PXUS para a casa (12/ago/2026).

   Motivo, e é a decisão do dono: até aqui a casa compartilhava só a
   APARÊNCIA (as classes acima) e cada app escrevia a própria MARCAÇÃO.
   Dois apps com o mesmo CSS e HTML diferente dão duas telas diferentes —
   e nenhuma mudança do dono alcançava os dois. Agora a estrutura também
   é da casa: quem monta o cartão é `/v1/cartao.js`.

   Os valores abaixo são os do PXUS, copiados sem reinterpretar. Só os
   nomes mudaram de `px-` para `wa-`, e `px-coracao` virou `wa-texto`
   para não colidir com o Coração, que é um app.
   ===================================================================== */

/* ---- lâmina: o bloco de data + o ninho da orbe ---- */
.wa-bloco{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.wa-dia{margin:0;font-size:clamp(36px,10vw,44px);font-weight:200;line-height:.88;letter-spacing:-.05em;color:var(--wa-ink)}
.wa-mes{margin:2px 0 0;font-size:clamp(27px,8vw,34px);font-weight:200;line-height:.95;letter-spacing:-.03em;color:var(--wa-muted2)}
.wa-semana{margin:12px 0 0;font-size:11px;font-weight:300;line-height:1.45;color:var(--wa-muted)}
/* HORA e NOME DA PESSOA — decisão do dono: o topo da lâmina é o tempo, e o nome
   dela não aparecia em lugar nenhum, então vai junto do relógio. */
.wa-hora{margin:10px 0 0;font-size:15px;font-weight:300;letter-spacing:.02em;color:var(--wa-ink);opacity:.9}
.wa-pessoa{margin:1px 0 0;font-size:11px;font-weight:300;color:var(--wa-muted)}
.wa-fio{margin-top:16px;height:1px;background:var(--wa-line);position:relative}
.wa-fio i{position:absolute;left:0;top:0;height:1px;width:0;background:var(--wa-accent);transition:width .9s cubic-bezier(.22,1,.3,1)}
.wa-micro{margin:6px 0 0;font-size:10px;font-weight:300;letter-spacing:.02em;color:var(--wa-muted2)}
/* O ninho: a orbe do shell ancora AQUI (mount({dockTo:'#waNinho'})), dentro
   do vidro. Não se desenha orbe — a do shell é a única, e ela atravessa a
   navegação com view-transition-name. */
/* O NINHO NUNCA CEDE. Ele tem 64px de altura, mas numa coluna apertada o flex
   encolhe qualquer filho — e um ninho de área zero faz o shell desistir dele
   (`dockEl()` recusa alvo sem área) e mandar a orbe para o rodapé da tela.
   Foi o que o dono viu no box baixinho: a orbe solta no centro-baixo. Quem
   cede é o BLOCO (a data se recorta); a orbe sempre tem onde morar. */
.wa-ninho{margin-top:auto;flex:0 0 auto;align-self:center;width:64px;height:64px;display:grid;place-items:center}
.wa-ninho small{font-size:10px;color:var(--wa-muted2);opacity:0;transition:opacity .3s}

/* ---- larga: topo, vão, texto e rodapé ---- */
.wa-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding-right:calc(30px + var(--wa-safe-right))}
.wa-onde{margin:0;font-size:10px;letter-spacing:.4em;color:var(--wa-muted);font-weight:400}
.wa-vinculos{margin:0;font-size:11px;font-weight:300;color:var(--wa-muted)}
/* O VÃO era `flex:1` — um empurrão que jogava todo o conteúdo para o pé do
   cartão. O dono: "o conteúdo da larga deve iniciar mais no topo, não pode ficar
   muito próximo da linha superior, mas tb não tão longe como está."
   Vira uma folga definida: respira sem afundar. */
.wa-vao{flex:0 0 18px;min-height:18px}
.wa-texto{margin:0 0 20px;font-size:13px;font-weight:300;line-height:1.7;color:var(--wa-ink);opacity:.82;transition:opacity .6s}
.wa-texto.wa-forte{color:var(--wa-accent);opacity:1}

/* O rodapé: a AÇÃO PRINCIPAL à esquerda, os TRÊS destinos à direita.
   Os ícones NÃO ficam na lâmina — é o erro que eu cometi no primeiro
   protótipo por desenhar em vez de ler. */
.wa-rodape{height:64px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.wa-acao{border:0;background:transparent;padding:0;cursor:pointer;text-align:left;font-family:inherit;color:inherit}
.wa-acao b{display:block;font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--wa-ink)}
.wa-acao span{display:block;margin-top:3px;font-size:10px;font-weight:300;letter-spacing:.08em;color:var(--wa-muted)}
.wa-trilho{display:flex;gap:6px;align-items:center}
/* O ALVO DE TOQUE É 44px, e o ícone aceita rótulo embaixo.
   Isto veio do Anota Aí (era `.px-ic` lá) e virou o padrão da casa em
   02/09/2026, a pedido do dono: *"se o anota está com a configuração melhor,
   pq a casa não mantém esse padrão, para que insistir em ter dois formatos?"*

   Por que 44 e não 34: 34×34 passa o mínimo AA (24×24) mas fica abaixo do
   alvo de 44px da Apple e do WCAG 2.5.5. O Anota já resolvia; a casa não.

   O rótulo usa `--wa-muted`, NUNCA `--wa-muted2` — o muted2 é cor de fio
   (2,59–2,77:1) e reprova AA em texto. O Anota usava muted2; a casa corrige.

   Sem `<i>` dentro, o ícone se comporta como antes: um filho só, centrado. */
.wa-ic{position:relative;width:auto;min-width:44px;height:auto;border:0;
  background:transparent;border-radius:11px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:4px 4px 2px;color:var(--wa-muted);transition:.16s;font-family:inherit}
.wa-ic i{font-style:normal;font-size:9px;font-weight:300;letter-spacing:.06em;
  color:var(--wa-muted);white-space:nowrap}
.wa-ic:hover i{color:var(--wa-accent)}
.wa-trilho .wa-ic:hover{color:var(--wa-accent);background:var(--wa-glass)}
.wa-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wa-ponto{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--wa-accent);
  box-shadow:0 0 7px var(--wa-accent);opacity:0;transition:opacity .3s}
.wa-ponto.wa-on{opacity:1}

/* =====================================================================
   A MÃE — a tela padrão que todos os apps adotam.
   Vocabulário do dono (12/ago/2026). Cada parte tem UM nome, e é por ele
   que os seis chats vão falar.

     palco .................. a tela inteira
     roda da mãe ............ margem direita, ao centro — seletor de SUBMENUS
     gaveta da mãe .......... acima da roda — notificações COM AÇÕES
     menu lateral gaveta .... junto da roda — o conteúdo do que a roda selecionou
     box .................... o cartão no centro
       lâmina ............... coluna esquerda: data · hora · nome da pessoa · ninho
       larga ................ coluna direita:  onde estou · vínculos · corpo · rodapé
       rodapé ............... a AÇÃO (o verbo) + o TRILHO (três ícones)
       ninho ................ onde a orbe ancora, no pé da lâmina
     folha .................. a camada que abre por cima de tudo

   Na heart a roda seleciona APPS; na mãe seleciona SUBMENUS. São telas
   diferentes, então o mesmo lugar nunca quer dizer duas coisas ao mesmo
   tempo — e elas já se distinguem sozinhas: a roda mostra siglas de duas
   letras, a roda da mãe mostra ícones.
   ===================================================================== */
.wa-mae-roda{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:45;
  width:44px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;
  border-radius:16px 0 0 16px;background:var(--wa-panel);border:1px solid var(--wa-brd);border-right:0;
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3)}
.wa-mae-ic{width:34px;height:34px;border:0;background:transparent;border-radius:11px;cursor:pointer;
  display:grid;place-items:center;color:var(--wa-muted2);transition:.16s}
.wa-mae-ic:hover{color:var(--wa-ink);background:var(--wa-glass)}
.wa-mae-ic.wa-on{color:var(--wa-accent);background:var(--wa-glass)}
.wa-mae-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* a GAVETA DA MÃE: notificações com três ações cada */
/* A gaveta NASCE NA BORDA — encostada, não flutuando perto dela. Antes ficava a
   44px e lia como um cartão solto no meio da tela; a parte é uma gaveta, e gaveta
   sai da parede. Canto arredondado só do lado que entra na tela, como a roda. */
/* A gaveta ABRE e FECHA — é o gatilho de tudo: com ela aberta a larga recolhe;
   fechada, a larga volta com todo o conteúdo. */
/* MAIS ACIMA, longe da roda. Estava em 12% e encostava nela — a roda fica
   centrada em 50%, e a gaveta descia até quase tocá-la. Agora nasce em 6% e
   tem teto: nunca passa da metade da tela, então sobra um vão claro entre as
   duas partes. Esticando, o teto sobe para 70vh e o conteúdo rola por dentro. */
.wa-mae-gaveta{position:fixed;right:0;top:6%;z-index:46;width:min(300px,78vw);
  /* A conta certa: a roda tem 320px e fica centrada, então o topo dela está em
     50vh − 160. A gaveta nasce em 6vh, logo o teto dela é (50vh−160) − 6vh − 14
     de folga = 44vh − 174. A primeira tentativa usava 50vh−96 e ainda invadia
     27px, porque eu esquecia a METADE DA ALTURA da roda. */
  max-height:calc(44vh - 174px);display:flex;flex-direction:column;
  transform:translateX(102%);opacity:0;pointer-events:none;
  transition:transform .42s cubic-bezier(.22,1,.3,1),opacity .3s,max-height .3s;
  border-radius:18px 0 0 18px;padding:12px 14px 12px 12px;background:var(--wa-panel);
  border:1px solid var(--wa-brd);border-right:0;
  backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5)}
.wa-mae-gaveta.wa-abre{transform:none;opacity:1;pointer-events:auto}
.wa-mae-gaveta h6{margin:0 0 9px;font-size:10px;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--wa-muted2)}
.wa-nota{padding:9px 0;border-top:1px solid var(--wa-line)}
.wa-nota:first-of-type{border-top:0}
.wa-nota-de{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--wa-muted2)}
.wa-nota-txt{margin:2px 0 7px;font-size:12.5px;font-weight:300;line-height:1.5;color:var(--wa-ink)}
/* AS TRÊS AÇÕES. O conteúdo é de cada app; os LUGARES são da casa. */
.wa-acoes{display:flex;gap:5px}
.wa-acoes button{flex:1;height:30px;border:1px solid var(--wa-brd);border-radius:9px;
  background:transparent;color:var(--wa-muted);cursor:pointer;display:grid;place-items:center;transition:.16s}
.wa-acoes button:hover{color:var(--wa-accent);background:var(--wa-glass)}
.wa-acoes svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* o MENU LATERAL GAVETA: o que a roda da mãe selecionou */
.wa-mae-sub{position:fixed;right:52px;top:50%;transform:translateY(-50%);z-index:44;
  width:min(240px,64vw);border-radius:16px;padding:12px;background:var(--wa-panel);
  border:1px solid var(--wa-brd);backdrop-filter:blur(26px) saturate(1.4);
  -webkit-backdrop-filter:blur(26px) saturate(1.4)}
/* NASCE FECHADO. Estas quatro linhas moravam numa cópia duplicada deste mesmo
   bloco, mais abaixo no arquivo — e era ela que vencia por ordem. Ao remover a
   duplicata o submenu ficaria visível o tempo todo. Agora o estado mora junto
   da parte, uma vez só. */
.wa-mae-sub{opacity:0;pointer-events:none;transition:opacity .26s}
.wa-mae-sub.wa-abre{opacity:1;pointer-events:auto}
.wa-mae-sub h6{margin:0 0 8px;font-size:10px;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--wa-muted2)}
.wa-mae-sub button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 6px;border:0;
  border-radius:9px;background:transparent;color:var(--wa-ink);font:inherit;font-size:12.5px;
  font-weight:300;cursor:pointer;text-align:left;transition:.16s}
.wa-mae-sub button:hover{background:var(--wa-glass)}
.wa-mae-sub svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--wa-muted)}


/* =====================================================================
   RECOLHE POR ENCOSTO, NÃO POR TAMANHO DE TELA.

   Regra do dono (12/ago/2026): "podemos definir que ele se recolhe sempre
   que tocar um no outro — e isso fica fixo mesmo para mobile."

   Melhor do que o que eu tinha feito. Limiar de largura é adivinhação: erra
   nas telas entre um valor e outro, e obriga a manter dois números em dia.
   Encosto é a pergunta real — "cabe?" — e vale igual no celular e no
   monitor grande, sem exceção e sem número mágico.

   Duas partes, nesta ordem:

   1. O PALCO CEDE O LADO. Com `place-items:center` o box recentraliza ao
      encolher e continua debaixo do painel — foi o que o dono viu ("a larga
      e a lâmina se voltam para o centro, o modal fica sobre a lâmina").
      Com `padding-right` do tamanho do painel aberto, o centro passa a ser
      o centro do que SOBROU.

   2. SE AINDA NÃO COUBER, A LARGA RECOLHE para dentro da lâmina. Quem mede
      é o `cartao.js`; aqui só existe o estado.
   ===================================================================== */
.wa-palco{transition:padding .42s cubic-bezier(.22,1,.3,1)}

/* =====================================================================
   A MESA (WEOS) — vários boxes num palco só.

   O palco com um box é o de sempre. Com dois ou mais vira FILEIRA, e os
   boxes negociam espaço pelas mesmas regras de sempre — só que agora entre
   irmãos: o REGENTE respira pelo conteúdo; os outros ficam em DOCA (a
   lâmina, os atalhos); o que nem em doca cabe é PLANTADO no canteiro.
   Nada se sobrepõe, nunca — esse é o jeito Whatelse de ter janelas.
   ===================================================================== */
.wa-palco.wa-mesa{display:flex;align-items:center;justify-content:center;gap:18px}

/* o REGENTE: o box selecionado. A orbe mora no ninho dele. */
.wa-cartao.wa-regente{border-color:var(--wa-accent-soft, var(--wa-brd))}
.wa-palco.wa-mesa .wa-cartao:not(.wa-regente):not(.wa-plantada){opacity:.92}

/* DOCA FORÇADA pela mesa: mesma roupa da só-lâmina, por outro caminho —
   aqui quem mandou foi a negociação, não a largura medida. */
.wa-cartao.wa-doca{width:142px!important;flex:0 0 142px}
.wa-cartao.wa-doca .wa-larga{flex:0 0 0;padding-left:0;padding-right:0;opacity:0;overflow:hidden}
.wa-cartao.wa-doca .wa-lamina{flex:1 1 auto;max-width:142px}
.wa-cartao.wa-doca .wa-atalhos{display:flex}

/* PLANTADA: o box reduzido à semente, PLANTADA NO PRÓPRIO TERRENO — no lugar
   onde estava. O canteiro-rodapé morreu (dono: "feio, repete os OS
   convencionais"); num jardim, semente fica na terra onde caiu. Tocar
   desabrocha de volta em box, ali mesmo. O elemento é O MESMO — a planta não
   morre, só se recolhe. */
.wa-cartao.wa-plantada{border-radius:19px;cursor:pointer;overflow:hidden}
.wa-cartao.wa-plantada .wa-lamina,
.wa-cartao.wa-plantada .wa-larga{display:none}
.wa-cartao.wa-plantada::after{content:attr(data-wa-sigla);position:absolute;left:0;right:0;top:11px;
  display:grid;place-items:center;font-size:12px;letter-spacing:.14em;
  color:var(--wa-muted);text-transform:uppercase}
.wa-cartao.wa-plantada:hover::after{color:var(--wa-accent)}
/* SEMENTE VIVA (WEOS): a plantada carrega o pulso do app — o que ele está
   fazendo agora, escrito miúdo, e uma respiração de luz bem devagar. O
   canteiro não é um depósito: é a casa respirando de relance. */
.wa-cartao.wa-plantada{width:64px!important;height:64px!important;flex:0 0 64px}
.wa-cartao.wa-plantada::before{content:attr(data-wa-vivo);position:absolute;left:4px;right:4px;bottom:9px;
  text-align:center;font-size:8px;line-height:1.25;letter-spacing:.02em;color:var(--wa-accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-cartao.wa-plantada[data-wa-vivo]:not([data-wa-vivo=""]){animation:wa-semente-viva 3.4s ease-in-out infinite}
@keyframes wa-semente-viva{
  0%,100%{box-shadow:0 0 0 0 transparent}
  50%{box-shadow:0 0 16px -4px var(--wa-accent)}
}
@media (prefers-reduced-motion:reduce){ .wa-cartao.wa-plantada{animation:none!important} }
.wa-cartao{transition:width .42s cubic-bezier(.22,1,.3,1),height .42s cubic-bezier(.22,1,.3,1)}
/* A LARGA ESPERA O VIDRO CRESCER. No pulo do ímã (142 → 420) ela nascia no
   primeiro quadro, espremida dentro do box ainda pequeno — a "faixa" que o
   dono viu. Abrindo, a opacidade espera .26s (o grosso do crescimento) e só
   então surge; fechando (regra abaixo), some de imediato, antes de o vidro
   encolher por cima dela. */
.wa-larga{transition:flex-basis .42s cubic-bezier(.22,1,.3,1),opacity .22s ease .26s,padding .42s}
.wa-cartao.wa-so-lamina .wa-larga,
.wa-cartao.wa-doca .wa-larga,
.wa-cartao.wa-recolhe .wa-larga{transition:flex-basis .42s cubic-bezier(.22,1,.3,1),opacity .1s ease 0s,padding .42s}
.wa-lamina{transition:flex-basis .42s cubic-bezier(.22,1,.3,1)}

.wa-cartao.wa-recolhe{width:150px}
.wa-cartao.wa-recolhe .wa-lamina{flex:0 0 100%}
.wa-cartao.wa-recolhe .wa-larga{flex:0 0 0;padding-left:0;padding-right:0;opacity:0;overflow:hidden}

/* =====================================================================
   O PUXADOR DA GAVETA — como alcançar o que não foi lido.

   Pergunta do dono: "se tiver notificações que eu não olhei, como abro
   elas quando eu quiser? precisa ser algo discreto."

   Discreto quer dizer: não compete com nada, e some quando não há o que
   dizer. Por isso é um FIO na borda, não um botão — a gaveta sai da
   parede, então o puxador é a parte dela que fica de fora. Fica logo
   acima da roda da mãe, que é onde o dono desenhou a gaveta.

   Sem nada não lido: um risco fino, quase invisível.
   Com algo não lido: o risco ganha a cor do app e um ponto.

   Sem número. Contagem vira cobrança, e a gaveta é para consultar quando
   se quiser — não para perseguir zero.
   ===================================================================== */
.wa-puxador{position:fixed;right:0;top:calc(50% - 150px);z-index:47;
  width:16px;height:78px;padding:0;border:0;cursor:pointer;
  background:transparent;display:grid;place-items:center;
  border-radius:10px 0 0 10px;transition:background .2s}
.wa-puxador:hover{background:var(--wa-glass)}
.wa-puxador i{display:block;width:2px;height:44px;border-radius:2px;
  background:var(--wa-line);transition:background .3s,height .3s}
.wa-puxador.wa-tem i{background:var(--wa-accent);height:56px}
/* o ponto: só existe quando há o que ler */
.wa-puxador::after{content:"";position:absolute;top:12px;right:5px;width:5px;height:5px;
  border-radius:50%;background:var(--wa-accent);opacity:0;transform:scale(.4);
  transition:opacity .3s,transform .3s}
.wa-puxador.wa-tem::after{opacity:1;transform:none}

/* O corpo do app: é ele que o box mede para respirar. */
.wa-corpo{flex:1;min-height:0;min-width:0}
.wa-cartao.wa-cheio .wa-corpo{overflow:auto}


/* =====================================================================
   AS REGRAS DA LARGA — todas do dono, 12/ago/2026.
   ===================================================================== */

/* 3 · O CONTEÚDO JAMAIS APARECE POR BAIXO DO TRILHO.
   "para não confundir os acessos" — se o texto passa por trás dos três ícones,
   a pessoa não sabe mais o que é conteúdo e o que é botão. O corpo tem área
   própria e uma folga antes do rodapé; nada atravessa. */
.wa-corpo{flex:1;min-width:0;min-height:0;padding-bottom:12px}

/* 5 · A LARGA ANDA PARA OS LADOS quando o conteúdo pede mais largura do que
   cabe. Rolagem horizontal DENTRO da larga — a tabela larga do Inbox anda,
   o cartão não deforma. */
.wa-cartao.wa-cheio .wa-corpo{overflow:auto}
.wa-corpo{overflow-x:auto;overflow-y:hidden}
.wa-cartao.wa-cheio .wa-corpo{overflow-y:auto}

/* 6 · SEMPRE MARGEM dos lados, em cima e embaixo. O palco já reserva 22/14;
   aqui garantimos que o box nunca encoste, mesmo crescendo até o teto. */
.wa-palco{padding:22px 14px}

/* 8 · NO CELULAR o box é a tela inteira e o conteúdo anda na VERTICAL dentro da
   larga. A função mutante não vale ali — o que vale é a lâmina ENCOLHER para
   dar espaço à larga quando o conteúdo precisar. */
@media (max-width:600px){
  .wa-lamina{flex:0 1 118px;max-width:118px}
  .wa-cartao.wa-cheio .wa-lamina{flex:0 1 92px;max-width:92px}
  .wa-corpo{overflow-x:hidden;overflow-y:auto}
}

/* 2 · A GAVETA NUNCA ABRE SOZINHA. Regra do dono, e o motivo é dele:
   "imagina a pessoa está focada e de repente abre a gaveta e fecha a tela dela."
   Chegando algo, quem avisa é o PUXADOR — a linha acende e pulsa. A gaveta só
   abre pela mão da pessoa, nunca por evento. */
@keyframes wa-pulsa{
  0%,100%{opacity:.55;transform:scaleY(.86)}
  50%    {opacity:1;  transform:scaleY(1)}
}
.wa-puxador.wa-tem i{animation:wa-pulsa 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .wa-puxador.wa-tem i{animation:none;opacity:1}
}

/* =====================================================================
   NO CELULAR, A MOBÍLIA RECUA PARA DENTRO DA BORDA.

   Regra do dono: "no mobile a roda e submenu devem recuar para dentro da
   borda, para que o box ocupe a tela toda."

   Faz sentido: no telefone não há folga para ceder. Em vez de disputar
   largura com o box, o trilho se esconde quase todo e deixa só um fio de
   fora — o bastante para a pessoa saber que ele existe e puxar. Mesma
   ideia do puxador da gaveta: a parte vira a própria alça.

   Quando aberto, volta inteiro por cima — no celular sobrepor é o certo,
   e é o que o dono definiu desde o começo.
   ===================================================================== */
@media (max-width:600px){
  /* COMPOR, NÃO SOBRESCREVER. O `.wa-side` do shell já usa
     `top:50%; transform:translateY(-50%)` para se centralizar. Escrever só o
     `translateX` APAGA o `translateY` — e a roda descia meia altura ao abrir.
     Foi o que o dono viu: "ao abrir ela se posiciona mais para baixo, um
     comportamento estranho". O lugar dela não muda nunca; o que muda é só o
     quanto ela está para dentro da margem. */
  /* `.wa-side.wa-side` de propósito — mesmo truque do `:root:root` que o PXUS
     registrou: o shell injeta o CSS dele DEPOIS deste arquivo, então se ganha
     por especificidade, não por ordem. Media query não acrescenta peso nenhum,
     e por isso a primeira versão desta regra simplesmente não pegou. */
  /* ESVANECER, NÃO RECUAR. Proposta do dono, e ela é melhor que a minha:
     recuando, a parte MUDA DE LUGAR — e como o box mede a mobília para saber
     onde parar, ele se recentralizava a cada movimento e a larga "virava outra
     coluna". Esvanecendo, a geometria não muda em nada; some só a tinta.
     O defeito desaparece por construção, em vez de ser consertado.

     Fica um fantasma de 12%: o bastante para a pessoa saber que há algo ali,
     pouco o bastante para não disputar a tela. Tocar na região traz de volta. */
  .wa-side.wa-side{opacity:.12;transition:opacity .34s ease}
  .wa-side.wa-side.wa-open,
  .wa-side.wa-side:hover,
  .wa-side.wa-side:focus-within{opacity:1}
  .wa-mae-roda.wa-mae-roda{opacity:.12;transition:opacity .34s ease}
  .wa-mae-roda.wa-mae-roda.wa-open,
  .wa-mae-roda.wa-mae-roda:hover,
  .wa-mae-roda.wa-mae-roda:focus-within{opacity:1}
  /* com a mobília recuada, o box toma a tela inteira */
  .wa-palco{padding:0}
  .wa-cartao{width:100%!important;height:100%!important;border-radius:0;border:0}
}

/* =====================================================================
   AJUSTE DO BOX — duplo clique na borda.

   Regra do dono: "quero que tenha um duplo clique na borda e ativa nas
   edges para serem redimensionadas e libera o box para ser reposicionado
   aonde quiser."

   Fora do ajuste não há nada na tela: nenhuma alça, nenhum contorno. O
   duplo clique na borda é o que acorda — e só então as oito pegas
   aparecem e o box passa a poder ser arrastado.
   ===================================================================== */
.wa-cartao.wa-ajuste{outline:1px dashed var(--wa-accent);outline-offset:3px;cursor:move;
  transition:none}
.wa-pega{position:absolute;z-index:3;background:var(--wa-accent);border-radius:3px;
  opacity:0;transform:scale(.4);transition:opacity .18s,transform .18s}
.wa-cartao.wa-ajuste .wa-pega{opacity:.85;transform:none}
.wa-pega.n,.wa-pega.s{left:50%;margin-left:-13px;width:26px;height:5px;cursor:ns-resize}
.wa-pega.e,.wa-pega.o{top:50%;margin-top:-13px;width:5px;height:26px;cursor:ew-resize}
.wa-pega.n{top:-3px}    .wa-pega.s{bottom:-3px}
.wa-pega.e{right:-3px}  .wa-pega.o{left:-3px}
.wa-pega.ne,.wa-pega.no,.wa-pega.se,.wa-pega.so{width:9px;height:9px;border-radius:50%}
.wa-pega.no{top:-4px;left:-4px;cursor:nwse-resize}
.wa-pega.ne{top:-4px;right:-4px;cursor:nesw-resize}
.wa-pega.so{bottom:-4px;left:-4px;cursor:nesw-resize}
.wa-pega.se{bottom:-4px;right:-4px;cursor:nwse-resize}
.wa-dica-ajuste{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:98;
  font-size:11.5px;letter-spacing:.02em;color:var(--wa-muted);background:var(--wa-panel);
  border:1px solid var(--wa-brd);border-radius:999px;padding:7px 16px;
  backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:opacity .3s}
.wa-dica-ajuste.wa-ver{opacity:1}

/* A RODA DA MÃE do protótipo: ícones que RESPONDEM A TOQUE.
   O trilho do shell é só de arrastar — num menu isso é atrito, a pessoa vê
   ícone e tenta tocar. Aqui toca. */


/* A gaveta rola por dentro e estica pela alça de baixo. */
.wa-mae-gaveta .wa-notas{overflow-y:auto;min-height:0;flex:1}
.wa-mae-gaveta.wa-esticada{max-height:70vh}
/* A ALÇA DE BAIXO — mesma gramática do puxador: um fio, não um botão.
   Arrastar para baixo estica; um toque alterna entre o tamanho de repouso e o
   esticado, para quem prefere não arrastar. */
.wa-gaveta-pega{flex:0 0 auto;align-self:center;width:38px;height:14px;margin-top:6px;
  border:0;background:transparent;cursor:ns-resize;display:grid;place-items:center;padding:0}
.wa-gaveta-pega i{display:block;width:30px;height:2px;border-radius:2px;background:var(--wa-line);
  transition:background .2s,width .2s}
.wa-gaveta-pega:hover i{background:var(--wa-accent);width:36px}

/* =====================================================================
   OS TRÊS TAMANHOS DO BOX — e o terceiro é outra coisa.

   Regra do dono (12/ago/2026):
     "quero que a larga se feche a partir de um determinado tamanho, pois não
      faz sentido manter as duas abertas se não conseguimos visualizar o
      conteúdo dentro dela. E quando fechado em formato de quadrado pequeno,
      quero um comportamento diferente, com algo útil — que as pessoas
      consigam mantê-la aberta sobreposta a outras janelas, como a janela de
      um vídeo."

     ABERTO   (>= 380px)  lâmina + larga, como sempre
     LÂMINA   (< 380px)   a larga fecha: abaixo disso ela não se lê, e meia
                          coluna ilegível é pior que coluna nenhuma
     SEMENTE  (< 210px)   o box vira um controle: a orbe e a função principal
                          do app, nada mais. É este que vai para a janela
                          flutuante.

   Por que "semente": é o app inteiro reduzido ao que ele faz, e é de onde
   ele volta a crescer. Cabe na mão e contém a planta.
   ===================================================================== */
/* SÓ LÂMINA: quem se ajusta é o BOX, não a lâmina.
   Antes eu punha `flex:0 0 100%; max-width:none` — a lâmina esticava para
   preencher o box, e encolhendo o box ela ficava MAIOR que os 142 de repouso.
   Foi o que o dono viu: "vi a lâmina ser puxada pelo box e ficar maior".
   A regra dele continua valendo: pode diminuir até a metade, nunca aumentar. */
/* Quando a MÃO dimensionou (`data-wa-livre`), a largura é dela — a pessoa pôs
   150 e esta regra devolvia 142 por cima do estilo inline. A doca continua
   valendo o resto: larga fora de cena, atalhos, orbe no ninho. */
.wa-cartao.wa-so-lamina:not([data-wa-livre]){width:142px!important}
.wa-cartao.wa-so-lamina .wa-larga{flex:0 0 0;padding-left:0;padding-right:0;opacity:0;overflow:hidden}
.wa-cartao.wa-so-lamina .wa-lamina{flex:1 1 auto;max-width:142px}

.wa-cartao.wa-semente{border-radius:22px}
.wa-cartao.wa-semente .wa-larga,
.wa-cartao.wa-semente .wa-bloco{display:none}
.wa-cartao.wa-semente .wa-lamina{flex:1 1 auto;max-width:none;padding:10px 6px;
  align-items:center;justify-content:center;gap:6px}
.wa-cartao.wa-semente .wa-ninho{margin:0}
/* NOS FORMATOS FECHADOS A LÂMINA É O BOX INTEIRO — sem costura e imune aos
   restos da respiração. O `flexBasis` inline que o medir deixa (142) fazia a
   lâmina parar 8px antes da borda no menor: sobrava uma tirinha do vidro do
   corpo com a costura pintada no meio — o "pedaço da larga" que o dono viu.
   E onde não há larga ao lado, não há o que costurar: a divisória some. */
.wa-cartao.wa-semente .wa-lamina,
.wa-cartao.wa-so-lamina .wa-lamina,
.wa-cartao.wa-doca .wa-lamina{
  flex-basis:auto!important;max-width:none!important;
  border-right:0;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.15), inset -1px -18px 26px -20px rgba(0,0,0,.5);
}
:root:root[data-wa-theme="light"] .wa-cartao.wa-semente .wa-lamina,
:root:root[data-wa-theme="light"] .wa-cartao.wa-so-lamina .wa-lamina,
:root:root[data-wa-theme="light"] .wa-cartao.wa-doca .wa-lamina{
  border-right:0;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.9), inset -1px -20px 30px -22px rgba(40,34,60,.2);
}
/* OS ATALHOS DA LÂMINA — ícones na vertical, no estilo do trilho.

   A primeira versão punha CONTROLES (uma fileira de botões com setas) dentro da
   lâmina. Duas coisas erradas, e o dono viu as duas: fileira é horizontal e a
   lâmina quer ser fina, então as duas brigavam — "fica brigando em afinar e
   mostrar os controles, que são maiores que ela fina". E eram feios.

   Ícone empilhado tem 34px de largura: cabe numa lâmina de 71 e continua
   cabendo numa de 142. A coluna não precisa escolher entre afinar e mostrar.

   Aparecem quando a larga sai de cena — aí a lâmina deixa de ser a coluna do
   tempo e passa a ser o app inteiro. */
/* NO CENTRO ENTRE A CABEÇA E O NINHO — regra do dono (15/ago). Dois
   `margin-top:auto` na mesma coluna (este e o do ninho) repartem a sobra em
   partes iguais: o vão acima dos atalhos é o mesmo que os separa do ninho,
   em qualquer altura de box, sem conta nenhuma. */
.wa-atalhos{display:none;flex-direction:column;align-items:center;gap:4px;margin-top:auto}
/* NA SEMENTE OS ATALHOS DEITAM. Um quadrado de ~150px não tem altura para
   quatro ícones empilhados MAIS o ninho — empilhados, empurravam o ninho para
   fora do box e a orbe ia junto. Em fileira, cabem em cima e a orbe fica
   embaixo, no centro: a semente é a orbe com as funções à mão. */
/* UMA LINHA SÓ (dono, 15/ago): quatro ícones menores em fileira única —
   duas linhas na semente pareciam bagunça. */
.wa-cartao.wa-semente .wa-atalhos{margin-top:0;flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:2px}
.wa-cartao.wa-semente .wa-atalhos button{width:28px;height:28px;border-radius:9px}
.wa-cartao.wa-semente .wa-atalhos svg{width:14px;height:14px}
/* RECOLHER TAMBÉM É FICAR SÓ COM A LÂMINA. As duas classes chegam por caminhos
   diferentes — `wa-so-lamina` pela largura medida, `wa-recolhe` pelo encosto —
   mas para quem olha é a mesma coisa: a larga saiu de cena. Faltando esta
   linha, o box recolhido pelo submenu ficava com a lâmina vazia: nem conteúdo,
   nem atalhos, só a data e um palmo de vidro. */
.wa-cartao.wa-so-lamina .wa-atalhos,
.wa-cartao.wa-recolhe .wa-atalhos,
.wa-cartao.wa-semente .wa-atalhos{display:flex}
.wa-atalhos button{width:34px;height:34px;border:0;background:transparent;border-radius:11px;
  cursor:pointer;display:grid;place-items:center;color:var(--wa-muted);transition:.16s}
.wa-atalhos button:hover{color:var(--wa-accent);background:var(--wa-glass)}
.wa-atalhos svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}


/* A FAIXA DO TOPO DA LÂMINA — segunda tentativa, e a diferença é o alinhamento.
   Na primeira, hora e nome ficavam num bloco colado à esquerda do que sobrava:
   as duas colunas não se encaixavam e o "sábado" ficava órfão embaixo.
   Agora a direita é ALINHADA À DIREITA e cada linha casa com a sua:
       15        08:14
       ago       Malex
       sábado
   O número grande e o relógio dividem a mesma linha de base; mês e nome, a
   seguinte. O dia da semana fecha embaixo, junto da data a que pertence. */
.wa-faixa{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline}
.wa-faixa .wa-dia{grid-column:1;font-size:clamp(30px,8.5vw,38px)}
.wa-faixa .wa-hora{grid-column:2;justify-self:end;margin:0;font-size:14px}
.wa-faixa .wa-mes{grid-column:1;font-size:clamp(16px,5vw,20px);margin:0}
.wa-faixa .wa-pessoa{grid-column:2;justify-self:end;margin:0;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-faixa .wa-semana{grid-column:1 / -1;margin:6px 0 0}
/* Lâmina apertada: desempilha e volta ao vertical, senão os dois se esmagam.
   O limiar é 100 e não 118: a caixa de CONTEÚDO da lâmina em repouso tem 116px
   (142 menos o preenchimento), então 118 disparava sempre — a faixa nascia
   empilhada e nunca se via lado a lado. */
@container (max-width: 100px){ .wa-faixa{display:block} .wa-col-lado{padding-top:6px} }
.wa-lamina{container-type:inline-size}

/* o canto do app no topo — do lado do nome, e SÓ da pétala (18/08) */
.wa-topo-extra{display:inline-flex;align-items:center;gap:6px;margin-left:10px;
  vertical-align:middle;min-height:1px}
