/* ==========================================================================
   PRISMA · glass.css — O MATERIAL
   --------------------------------------------------------------------------
   Aqui está a diferença entre "liquid glass" e `background: transparent`.

   Vidro de verdade tem QUATRO camadas, e faltar uma já entrega o truque:

     1. REFRAÇÃO  o que está atrás aparece borrado E mais saturado.
                  Só blur deixa cinza e morto; a saturação devolve a vida.
     2. CORPO     uma folha de luz com alfa baixo por cima.
                  O TOM vem do fundo. A LUZ vem da folha.
     3. ARESTA    um fio de 1px que não é uniforme: mais claro onde a luz
                  bate (alto/esquerda), quase nulo na sombra. É isto que faz
                  a peça ter espessura em vez de ser um decalque.
     4. DESCOLAMENTO  sombra externa. Vidro flutua; não está pintado na tela.

   A CONDIÇÃO QUE NINGUÉM PODE ESQUECER
   Vidro sobre cor chapada NÃO É VIDRO. Borrar uma cor chapada devolve a mesma
   cor chapada: o `backdrop-filter` roda, custa GPU e produz efeito zero. Se a
   peça não estiver sobre um campo com variação (`.atmosfera`, foto, degradê ou
   conteúdo rolando por baixo), use `.superficie`, não `.vidro`.

   REGRA DE USO: vidro é para CONTROLE, não para CONTEÚDO.
   Navegação, barra, menu, popover, modal, composer, painel de contexto: sim.
   Texto longo, tabela, formulário, aula, documento: superfície sólida.
   Legibilidade vence efeito, sempre.
   ========================================================================== */

/* ==========================================================================
   AS TRÊS TRANSPARÊNCIAS
   Blur e tinta andam juntos. Mexer só no blur não muda o que a peça comunica.
   ========================================================================== */

.vidro {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-xl);
  color: var(--text-primary);

  /* LIQUID é o padrão: é a assinatura do sistema. */
  background-color: var(--glass-tint-liquid);
  -webkit-backdrop-filter: blur(var(--glass-blur-liquid)) saturate(var(--glass-saturacao));
  backdrop-filter: blur(var(--glass-blur-liquid)) saturate(var(--glass-saturacao));
  box-shadow: var(--elev-floating);
}

/* --- 01 CLEAR — a cor atravessa, o conteúdo permanece ----------------------
   Para chip, controle pequeno, peça que não pode competir com o que está atrás. */
.vidro--clear {
  background-color: var(--glass-tint-clear);
  -webkit-backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  box-shadow: var(--elev-raised);
}

/* --- 03 FROSTED — difusão para momentos de foco ----------------------------
   Modal, command palette, toast: há texto por cima e o fundo é imprevisível.
   A tinta alta é o que garante o contraste do texto. */
.vidro--frosted {
  background-color: var(--glass-tint-frosted);
  -webkit-backdrop-filter: blur(var(--glass-blur-frosted)) saturate(var(--glass-saturacao));
  backdrop-filter: blur(var(--glass-blur-frosted)) saturate(var(--glass-saturacao));
  box-shadow: var(--elev-overlay);
}

/* Nomes antigos, mantidos para não quebrar o que já usa. */
.vidro--sutil { background-color: var(--glass-tint-clear);
                -webkit-backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
                backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
                box-shadow: var(--elev-raised); }
.vidro--forte { background-color: var(--glass-tint-frosted);
                -webkit-backdrop-filter: blur(var(--glass-blur-frosted)) saturate(var(--glass-saturacao));
                backdrop-filter: blur(var(--glass-blur-frosted)) saturate(var(--glass-saturacao));
                box-shadow: var(--elev-overlay); }

/* ==========================================================================
   A ARESTA ÓPTICA — o que separa LIQUID de "translúcido"
   --------------------------------------------------------------------------
   Técnica: gradiente no padding-box recortado por máscara. Permite um fio com
   gradiente acompanhando o border-radius, o que `border-image` não faz de
   forma confiável entre navegadores.
   ========================================================================== */
.vidro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    150deg,
    var(--border-glass) 0%,
    rgba(255, 255, 255, 0.06) 38%,
    rgba(255, 255, 255, 0) 58%,
    rgba(255, 255, 255, 0.10) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* O reflexo difuso no alto da peça.
   Alfa baixíssimo de propósito: se der para "ver o brilho", está alto demais. */
.vidro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(255, 255, 255, 0.10), transparent 62%);
  pointer-events: none;
}

/* CLEAR quase não tem aresta: ela competiria com o que atravessa. */
.vidro--clear::before,
.vidro--sutil::before { opacity: .45; }
.vidro--clear::after,
.vidro--sutil::after  { opacity: .5; }

/* ==========================================================================
   FORMA E ANCORAGEM
   ========================================================================== */
.vidro--pilula   { border-radius: var(--radius-full); }
.vidro--ancorado { box-shadow: none; }

/* ==========================================================================
   ESTADOS
   ========================================================================== */
.vidro--selecionado {
  background-color: var(--surface-selected);
  box-shadow: var(--elev-floating), var(--glow-active);
}
.vidro--processando { box-shadow: var(--elev-floating), var(--glow-processing); }

/* Vidro que responde ao toque. O movimento é mínimo de propósito: a peça sobe
   1px e a tinta clareia — sinal de que é material, não de que é animação. */
.vidro--interativo {
  cursor: pointer;
  transition:
    background-color var(--motion-default) var(--easing-standard),
    transform        var(--motion-default) var(--easing-enter),
    box-shadow       var(--motion-default) var(--easing-standard);
}
.vidro--interativo:hover {
  background-color: var(--glass-tint-frosted);
  transform: translateY(-1px);
  box-shadow: var(--elev-overlay);
}
.vidro--interativo:active { transform: translateY(0); }

/* ==========================================================================
   SUPERFÍCIE SÓLIDA — o par obrigatório do vidro
   Não é "a versão sem graça": é a superfície CORRETA para ler.

   A superfície carrega um VÉU (`--surface-veu`): um degradê levíssimo que dá
   lado de luz e lado de sombra à placa. Sem ele a peça lê como retângulo
   chapado — que é exatamente a aparência de template que o sistema evita.
   A aresta é INTERNA (inset), não contorno externo: contorno desenha a caixa,
   aresta interna desenha a espessura.
   ========================================================================== */
.superficie {
  background-color: var(--surface-1);
  background-image: var(--surface-veu);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px var(--border-subtle), var(--elev-raised);
}
.superficie--2    { background-color: var(--surface-2); }
.superficie--3    { background-color: var(--surface-3); }
.superficie--alta { background-color: var(--surface-elevated);
                    box-shadow: inset 0 0 0 1px var(--border-subtle), var(--elev-floating); }

/* PAINEL DE DESTAQUE — inverte a relação com o fundo e puxa a atenção.
   Composer, hero de seção, cartão de foco. Um por tela, no máximo: se dois
   painéis disputam o destaque, nenhum destaca. */
.superficie--destaque {
  background-color: var(--surface-destaque-base);
  background-image: var(--surface-destaque);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px var(--border-on-destaque), var(--elev-floating);
  color: var(--text-on-destaque);
}
.superficie--destaque .caption,
.superficie--destaque .body-sm,
.superficie--destaque .body { color: var(--text-on-destaque-2); }

/* Leitura longa: sem sombra, sem véu, só respiro. */
.superficie--leitura {
  background: var(--surface-1);
  background-image: none;
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: var(--espaco-7);
}
.superficie--leitura > * { max-width: var(--medida-texto); }

/* ==========================================================================
   DEGRADAÇÃO — obrigatória
   Sem `backdrop-filter` o vidro vira superfície sólida: perde o efeito,
   mantém a informação.
   ========================================================================== */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .vidro, .vidro--clear, .vidro--frosted, .vidro--sutil, .vidro--forte {
    background-color: var(--surface-2);
    background-image: var(--surface-veu);
    box-shadow: inset 0 0 0 1px var(--border-default), var(--elev-floating);
  }
  .vidro::before, .vidro::after { display: none; }
}

/* ==========================================================================
   CAMPO — o fundo sem o qual o vidro não existe
   ========================================================================== */
.atmosfera {
  background-color: var(--background-canvas);
  background-image: var(--campo-atmosfera);
  background-attachment: fixed;
}

/* Painel que fica aberto oito horas não pode ter fundo "acontecendo". */
.atmosfera--calma {
  background-image:
    linear-gradient(175deg, var(--background-subtle), var(--background-canvas) 70%);
}

/* Grade: referência espacial para canvas de grafo e editor (ver D-008). */
.atmosfera--grade {
  background-color: var(--background-canvas);
  background-image:
    radial-gradient(circle at 1px 1px, var(--border-default) 1px, transparent 0);
  background-size: 22px 22px;
}