/* ==========================================================================
   PIVOTS — SOBREPOSIÇÕES (scrim + superfície)
   Fonte única para tudo o que flutua por cima do conteúdo.

   Antes desta folha existiam quatro implementações independentes do mesmo
   padrão "superfície sobre fundo escurecido", cada uma com o seu z-index
   (70/80, 90, 900, 9999), o seu escurecimento (três opacidades diferentes),
   o seu blur (4px, 12px, 20px, 24px), o seu raio (14px, 16px, 20px, 0) e o
   seu movimento — duas delas nem sequer animavam, apareciam de repente.
   Componentes irmãos liam como peças de produtos diferentes.

   Agora há três arquétipos, e só três:
     .ov-scrim    o fundo escurecido — igual para todos
     .ov-sheet    superfície que sobe pelo fundo do ecrã (ações, listas)
     .ov-dialog   superfície centrada (escolha curta, confirmação)
     .ov-drawer   superfície que entra pela lateral (navegação)

   Qualquer modal novo compõe-se destas classes. O material, a elevação e o
   movimento vêm todos de tokens.css — não se redeclaram aqui nem no domínio.
   ========================================================================== */

/* ===== Movimento partilhado ===== */
@keyframes scrim-in   { from{ opacity:0 } to{ opacity:1 } }
@keyframes sheet-up   { from{ transform:translateY(100%) } to{ transform:translateY(0) } }
/* A animação tem de incluir o translate(-50%,-50%) de centragem do
   .ov-dialog no próprio keyframe — uma animação CSS substitui por
   inteiro o valor de "transform" enquanto corre (e, com fill-mode both,
   também depois de acabar), não o compõe com o transform base da regra.
   Sem isto, o diálogo perdia a centragem assim que a animação começava
   (apanhado ao testar o modal do calendário de Projetos — o diálogo
   aparecia encostado ao canto superior-esquerdo do seu próprio ponto
   50%/50%, em vez de centrado nele). */
@keyframes dialog-pop { from{ opacity:0; transform:translate(-50%,-50%) translateY(8px) scale(.97) }
                        to  { opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1) } }
@keyframes drawer-in  { from{ transform:translateX(100%) } to{ transform:translateX(0) } }

/* ===== Scrim ===== */
.ov-scrim{
  position:fixed; inset:0; z-index:var(--z-scrim);
  background:var(--scrim);
  backdrop-filter:var(--scrim-blur); -webkit-backdrop-filter:var(--scrim-blur);
  animation:scrim-in var(--dur-3) var(--ease-out) both;
}

/* ===== Superfícies =====
   O material é sempre o mesmo: vidro escuro com um brilho no topo. É esse
   brilho (--sheet-bg tem um gradiente branco a esbater-se) que dá a leitura
   de volume — sem ele a superfície lê como um retângulo plano colado ao ecrã. */
.ov-sheet,
.ov-dialog,
.ov-drawer{
  position:relative; z-index:var(--z-sheet);
  background:var(--sheet-bg);
  backdrop-filter:blur(24px) saturate(120%); -webkit-backdrop-filter:blur(24px) saturate(120%);
  color:var(--ink);
}

.ov-sheet{
  position:fixed; left:0; right:0; bottom:0; max-height:82vh;
  display:flex; flex-direction:column; overflow:hidden;
  border-top:1px solid var(--sheet-border);
  border-radius:var(--sheet-r) var(--sheet-r) 0 0;
  box-shadow:var(--sheet-shadow);
  animation:sheet-up var(--dur-4) var(--ease-glide) both;
}

.ov-dialog{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(360px,90vw); max-height:80vh; overflow:hidden;
  border:1px solid var(--sheet-border);
  border-radius:var(--sheet-r);
  box-shadow:var(--sheet-shadow-float);
  animation:dialog-pop var(--dur-3) var(--ease-out) both;
}

.ov-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(320px,90vw);
  display:flex; flex-direction:column; overflow:hidden;
  border-left:1px solid var(--sheet-border);
  box-shadow:var(--sheet-shadow-float);
  animation:drawer-in var(--dur-4) var(--ease-glide) both;
}

/* Puxador — a única forma redonda que sobrevive ao raio único do sistema,
   porque é o que o identifica como "arrastável". */
.ov-grab{
  width:36px; height:4px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.22);
  margin:8px auto 14px; flex:none;
}

/* ==========================================================================
   .overlay / .sheet — o par histórico da app (sheet de Criar, Biblioteca,
   openInfo). Vivia em biblioteca.css apesar de ser global; passa a viver
   aqui, alinhado com os tokens, mantendo os mesmos nomes de classe para não
   obrigar a tocar em HTML nem em JS.
   ========================================================================== */
.overlay{
  position:absolute; inset:0; z-index:var(--z-scrim);
  background:var(--scrim);
  backdrop-filter:var(--scrim-blur); -webkit-backdrop-filter:var(--scrim-blur);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-3) var(--ease-out);
}
.overlay.show{ opacity:1; pointer-events:all }

.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:var(--z-sheet);
  background:var(--sheet-bg);
  border-top:1px solid var(--sheet-border);
  border-radius:var(--sheet-r) var(--sheet-r) 0 0;
  box-shadow:var(--sheet-shadow);
  backdrop-filter:blur(24px) saturate(120%); -webkit-backdrop-filter:blur(24px) saturate(120%);
  padding:10px 18px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform var(--dur-4) var(--ease-glide);
  overflow-x:hidden; will-change:transform;
  --ink:#F5F5F3; --ink-soft:#C8C8C8; --ink-faint:#9B9B9B; --neutral:#B9B9B1;
  --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.08);
  --paper:rgba(255,255,255,.09); --paper-2:rgba(255,255,255,.07);
  color:var(--ink);
}
.sheet.show{ transform:translateY(0) }

.sheet-grab{
  width:36px; height:4px; background:rgba(255,255,255,.22);
  border-radius:var(--r-pill); margin:6px auto 14px;
}

/* Corpo scrollável de um .ov-sheet — o wrapper em si é overflow:hidden
   (para o cabeçalho/puxador nunca fugirem do raio arredondado do topo),
   por isso o conteúdo que pode crescer vive aqui dentro. */
.ov-sheet-body{
  flex:1; min-height:0; overflow-y:auto;
  padding:0 18px calc(20px + env(safe-area-inset-bottom));
}
.ov-sheet > .ov-grab{ margin-top:8px }
.ov-sheet > .sheet-header{ padding:0 18px 10px; margin-bottom:0 }

/* ==========================================================================
   Movimento reduzido — quem pediu ao sistema para reduzir animações continua
   a ver as superfícies aparecer e desaparecer, mas sem percurso nem escala.
   O estado final é sempre o mesmo, por isso nada fica escondido.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .ov-scrim, .ov-sheet, .ov-dialog, .ov-drawer{
    animation-duration:1ms; animation-delay:0ms;
  }
  .sheet{ transition-duration:1ms }
  .overlay{ transition-duration:1ms }
}