/* ToDo web -- versao comparativa "Liquid".
 *
 * [CORRIGIDO 2026-09-11, a pedido de Daniel: "o liquid ficou excessivo".] A
 * primeira versao pos vidro em tudo -- cartoes, chips, busca, botoes --, sobre
 * manchas vivas de cor, com titulos sem serifa, capsulas por toda parte e mola
 * em todo botao. A referencia de medida certa, apontada por ele, e o
 * $obControle (Dev/sobcontrole/web/app.css), e a medida la e uma REGRA, nao
 * uma intensidade:
 *
 *   - LIQUID GLASS SO NA CAMADA QUE FLUTUA sobre o conteudo. Aqui sao seis:
 *     o cabecalho, o campo de nova tarefa (que flutua embaixo), o recado
 *     (snackbar), os dialogos, a lista de sugestoes de etiqueta e o cartao
 *     enquanto e arrastado.
 *   - CONTEUDO FICA SOLIDO: cartoes, listas, chips, busca, formularios. Vidro
 *     atras de texto atrapalha a leitura. Nunca vidro sobre vidro.
 *   - ATMOSFERA DISCRETA atras do vidro (brilhos a 7-12%): sem nada atras, vidro
 *     e so cinza; com cor demais, vira o assunto da tela.
 *   - MATERIAL 3 continua como esqueleto, e a serifada continua como voz.
 *   - MOLA NUM UNICO elemento, o que muda de forma: o marcador de concluida.
 *   - Menos transparencia, mais contraste, ou navegador sem backdrop-filter:
 *     superficie solida.
 *
 * Valores do vidro tirados do $obControle e ajustados a paleta do ToDo.
 * TUDO aqui fica sob :root[data-visual="liquid"]; sem esse atributo, este
 * arquivo nao tem efeito. Troca pelo botao do topo ou por ?visual=liquid.
 */

/* ------------------------------------------------------------- tokens */

:root[data-visual="liquid"] {
  --vidro:        rgba(21, 25, 21, 0.58);
  --vidro-forte:  rgba(21, 25, 21, 0.82);
  --vidro-borda:  rgba(255, 255, 255, 0.10);
  --vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  --vidro-sombra: 0 16px 36px -12px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.35);
  --vidro-filtro: blur(20px) saturate(170%);
  --atmosfera:
    radial-gradient(60vmax 48vmax at 92% -10%, rgba(134, 207, 162, 0.10), transparent 70%),
    radial-gradient(52vmax 40vmax at -12% 108%, rgba(226, 179, 94, 0.07), transparent 70%);
  --mola: linear(0, 0.18 4%, 0.55 10%, 0.9 17%, 1.07 24%, 1.11 29%, 1.07 36%, 1.01 46%, 0.99 57%, 1 72%, 1);
}

:root[data-visual="liquid"][data-tema="claro"] {
  --vidro:        rgba(251, 250, 245, 0.62);
  --vidro-forte:  rgba(251, 250, 245, 0.84);
  --vidro-borda:  rgba(255, 255, 255, 0.75);
  --vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(20, 25, 15, 0.04);
  --vidro-sombra: 0 12px 32px -12px rgba(20, 25, 15, 0.24), 0 2px 6px rgba(20, 25, 15, 0.06);
  --atmosfera:
    radial-gradient(60vmax 48vmax at 92% -10%, rgba(30, 106, 68, 0.12), transparent 70%),
    radial-gradient(52vmax 40vmax at -12% 108%, rgba(184, 128, 31, 0.10), transparent 70%);
}

/* Vidro vira superficie solida para quem pediu menos transparencia ou mais
   contraste, e onde nao ha backdrop-filter. `:root:root` + os dois atributos
   para ganhar dos blocos de token acima nos dois temas. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root:root[data-visual="liquid"][data-tema] {
    --vidro: var(--sup-2); --vidro-forte: var(--sup-3); --vidro-filtro: none; --atmosfera: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:root[data-visual="liquid"][data-tema] { --vidro: var(--sup-2); --vidro-forte: var(--sup-3); }
}

/* ------------------------------------------------------------ atmosfera */

:root[data-visual="liquid"] body::before { background: var(--atmosfera), var(--ruido); }

/* ------------------------------------------- receita do vidro, uma so */

:root[data-visual="liquid"] :is(.topo, .novo, .snackbar, .sugestoes, .item.arrastando > .cartao) {
  -webkit-backdrop-filter: var(--vidro-filtro);
          backdrop-filter: var(--vidro-filtro);
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-brilho), var(--vidro-sombra);
}

/* Cabecalho: camada que flutua -- vidro, cantos de 28 e 12 px de folga. */
:root[data-visual="liquid"] .topo {
  top: calc(12px + env(safe-area-inset-top));
  margin: 12px -8px 0;
  padding: 6px 8px 6px 18px;
  border-radius: var(--r-xl);
}

/* Campo de nova tarefa: flutua embaixo, como a barra de acao do $obControle.
   Por isso o botao flutuante some -- o caminho ja esta sempre a mao. */
:root[data-visual="liquid"] .novo {
  position: fixed; z-index: 35;
  /* ~~`--folga-vv`: levantar a barra pela diferenca entre o viewport de layout
     e o visivel.~~ **[REVERTIDO 2026-09-14, parte 56.]** Foi um palpite meu da
     parte 52 que eu NAO consegui reproduzir aqui, e o Firefox do celular
     mostrou o estrago: com o MESMO codigo, a barra fica no piso no Chrome e
     ~50px acima no Firefox. A conta dependia de `innerHeight` significar a
     mesma coisa nos dois, e nao significa -- no Firefox o `fixed` ja mede pelo
     viewport visivel, entao a correcao virou desconto em cima de desconto.
     Volta ao simples: `bottom` e ponto. Corrigir por hipotese o que nao se
     consegue medir troca um defeito por outro, e neste caso trocou um que
     aparecia as vezes por um que aparece sempre num dos navegadores. */
  left: 50%; transform: translateX(-50%);
  /* [2026-09-14, parte 57] SEM `env(safe-area-inset-bottom)` aqui, e a razao e
     MEDIDA, nao suposta: no Firefox do Android ele devolve 44.1px de recuo que
     JA foram tirados do viewport. Na pagina de medida (diag-barra.html), no
     aparelho de Daniel: `innerHeight` 690 = tela 819 - 30 de status - 55 de URL
     - 44 de navegacao; e mesmo assim `inset baixo` = 44.1. Somar isso desconta
     a barra de navegacao DUAS VEZES, e a barra flutuante sobe exatamente 44px.
     Chrome no mesmo aparelho: inset 0, e a barra no lugar.
     A mesma pagina provou que o resto esta sao -- uma barra irma sem `env()` e
     outra ancorada por `dvh` deram o valor certo nos DOIS navegadores. Entao o
     termo envenenado e um so, e e este.
     ⚠️ O QUE ISTO CUSTA, dito na hora: em aparelho com navegacao por gesto e o
     app INSTALADO, o recuo pode ser real, e ai 16px do fim da tela e pouco. Nao
     e o caso aqui: Daniel usa os tres botoes, e com barra opaca o Android nao
     desenha por baixo. ⚠️ Medido na ABA; o app INSTALADO nao foi lido ainda --
     a pagina de medida passou a dizer o `display-mode` para fechar isso numa
     foto. A ancoragem por `dvh` fica anotada como saida se for preciso. */
  bottom: 16px;
  width: min(720px, calc(100% - 24px));
  border-radius: var(--r-xl);
  background: var(--vidro-forte);
}
:root[data-visual="liquid"] .novo:focus-within {
  border-color: color-mix(in srgb, var(--primaria) 55%, transparent);
  box-shadow: var(--vidro-brilho), 0 0 0 4px color-mix(in srgb, var(--primaria) 13%, transparent), var(--vidro-sombra);
}
:root[data-visual="liquid"] .fab { display: none !important; }
:root[data-visual="liquid"] .tela-app { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
:root[data-visual="liquid"] .ferramentas { margin-top: 4px; }

/* Recado: acima do campo flutuante, sem cobrir. Pela mesma medida do `.novo`,
   sem `env()`: o recado tem de subir JUNTO com a barra, senao o espaco entre os
   dois vira 44px num navegador e 0 no outro. [2026-09-14, parte 57] */
:root[data-visual="liquid"] .snackbar {
  bottom: 90px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--vidro-forte); color: var(--texto);
}

/* Sugestoes de etiqueta: flutuam sobre o conteudo -- vidro forte. */
:root[data-visual="liquid"] .sugestoes { background: var(--vidro-forte); }

/* ~~Dialogo: folha de vidro forte.~~ **[CORRIGIDO 2026-10-21, parte 74,
   escolha de Daniel -- variante B entre tres mostradas lado a lado]**
   Dialogo: folha OPACA, na cor do proprio vidro. O vidro semitransparente sobre
   o veu escuro do ::backdrop virava um bege acinzentado ("a cor dessa janela
   nao ficou bonita"). O vidro funciona no que flutua sobre fundo CLARO (topo,
   aviso de baixo); o dialogo flutua sobre o veu, e la ele suja. Borda, brilho
   e sombra do vidro continuam -- so o fundo fica solido e sem desfoque. */
/* O `dialog` SAIU da receita do vidro (la em cima): o `:is()` dela pesa como o
   argumento mais pesado (`.item.arrastando > .cartao`, tres classes), e nenhuma
   regra simples de dialogo ganhava -- nem o "vidro forte" de antes, que nunca
   chegou a valer (medido: o fundo calculado era o `--vidro` comum, 0.62).
   Aqui ele tem a receita propria: mesma borda, brilho e sombra, fundo solido. */
:root[data-visual="liquid"] dialog {
  background: rgb(21, 25, 21);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-brilho), var(--vidro-sombra);
}
:root[data-visual="liquid"][data-tema="claro"] dialog { background: rgb(251, 250, 245); }
:root[data-visual="liquid"] dialog::backdrop { background: rgba(8, 10, 8, 0.42); }

/* Cartao arrastado: sai do conteudo e flutua -- ai, e so ai, e vidro. */
:root[data-visual="liquid"] .item.arrastando > .cartao { background: var(--vidro-forte); }

/* --------------------------------------------------------------- mola */

/* Unico movimento com mola: o marcador que muda de forma ao concluir. */
:root[data-visual="liquid"] .feito::after { transition: transform 0.5s var(--mola); }