/* movimento.css — a camada de animação da casca. Tudo que se mexe no mathoso.com passa por aqui.
 * Regras: curto e com desaceleração (nada "balança"); entrada suave, saída rápida; respeita quem pediu menos movimento. */
:root {
  --dur-1: 140ms; --dur-2: 220ms; --dur-3: 360ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* chega rápido, assenta devagar */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-mola: cubic-bezier(.34, 1.4, .64, 1);   /* leve sobressalto, para confirmações */
}

/* troca de página: esmaece e sobe um nada (navegadores que suportam View Transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sair var(--dur-1) var(--ease-in-out) both; }
::view-transition-new(root) { animation: entrar var(--dur-2) var(--ease-out) both; }
@keyframes sair { to { opacity: 0; } }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

/* o miolo entra em cascata */
main.wrap > * { animation: subir var(--dur-3) var(--ease-out) both; }
main.wrap > *:nth-child(2) { animation-delay: 40ms; } main.wrap > *:nth-child(3) { animation-delay: 80ms; }
main.wrap > *:nth-child(4) { animation-delay: 120ms; } main.wrap > *:nth-child(n+5) { animation-delay: 160ms; }
.colunas > * > .card { animation: subir var(--dur-3) var(--ease-out) both; }
.colunas > * > .card:nth-child(2) { animation-delay: 60ms; } .colunas > * > .card:nth-child(3) { animation-delay: 120ms; } .colunas > * > .card:nth-child(n+4) { animation-delay: 180ms; }
@keyframes subir { from { opacity: 0; transform: translateY(10px); } }

/* botões: resposta ao toque */
.btn { transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2), border-color var(--dur-2), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2), opacity var(--dur-2); will-change: transform; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: 60ms; }
.btn-primary:hover { box-shadow: 0 6px 18px -8px rgba(79, 163, 116, .7); }
.btn:focus-visible, a:focus-visible, .item:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: var(--raio-2); }

/* menu, chips, linhas e cards */
.item { transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2), transform var(--dur-1); }
.item:active { transform: scale(.98); }
.chip { transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-1); }
a.chip:hover { transform: translateY(-1px); }
.card { transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
a.card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .8); }
.linha { transition: background-color var(--dur-2), opacity var(--dur-3), transform var(--dur-3) var(--ease-out); }
.tabela tbody tr { transition: background-color var(--dur-2); } .tabela tbody tr:hover { background: var(--card-2); }
.word { transition: border-color var(--dur-2), transform var(--dur-1); } a.word:hover { border-color: var(--verde); transform: translateY(-1px); }

/* campos */
input, select, textarea, .editor { transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2); }
input:focus, select:focus, textarea:focus, .editor:focus { box-shadow: 0 0 0 3px rgba(79, 163, 116, .18); }
.check input { transition: transform var(--dur-1) var(--ease-mola); } .check input:active { transform: scale(.9); }

/* itens marcados como feitos */
.pauta-item span, .feito { transition: color var(--dur-3), text-decoration-color var(--dur-3); }
.linha.saindo { opacity: 0; transform: translateX(12px); }
.concluida-anim { animation: concluir var(--dur-3) var(--ease-mola); }
@keyframes concluir { 30% { transform: scale(1.08); } }

/* detalhes (dropdowns) e avisos */
details > *:not(summary) { animation: aparecer var(--dur-2) var(--ease-out) both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.aviso { animation: aparecer var(--dur-3) var(--ease-out) both; }

/* modal */
dialog.modal { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--card); color: var(--texto); padding: 24px; width: min(560px, calc(100vw - 32px)); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); }
dialog.modal::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }
dialog.modal[open] { animation: modal-abrir var(--dur-3) var(--ease-out) both; }
dialog.modal[open]::backdrop { animation: fade var(--dur-2) both; }
dialog.modal.fechando { animation: modal-fechar var(--dur-1) var(--ease-in-out) both; } dialog.modal.fechando::backdrop { animation: fade var(--dur-1) reverse both; }
@keyframes modal-abrir { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes modal-fechar { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes fade { from { opacity: 0; } }

/* toast */
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%) translateY(-16px); opacity: 0; background: var(--texto); color: var(--fundo); padding: 12px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; z-index: 60; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3); pointer-events: none; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8); }
.toast.on { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.ok { background: var(--verde); color: var(--verde-escuro); }

/* confete: a tela inteira, por cima de tudo, sem pegar clique */
canvas.confete { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 70; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  canvas.confete { display: none; }
}
body, .app, .side, main.wrap, .card { transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); }

/* atalho do menu: segurar o dedo na tela abre um painel com o menu */
.anel-toque { position: fixed; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 999px; border: 3px solid rgba(79, 163, 116, .35); pointer-events: none; z-index: 65; display: grid; place-items: center; }
.anel-toque::after { content: ''; width: 64px; height: 64px; border-radius: 999px; background: conic-gradient(var(--verde) calc(var(--p, 0) * 1%), transparent 0); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
dialog.modal.atalho-menu { margin: auto; width: min(520px, calc(100vw - 24px)); padding: 20px; }
.atalho-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.atalho-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 92px; padding: 14px; border: 1px solid var(--borda-2); border-radius: var(--raio); background: var(--card-2); color: var(--texto); font-weight: 600; font-size: 15px; transition: border-color var(--dur-2), transform var(--dur-1) var(--ease-out); }
.atalho-item svg { color: var(--verde-txt); width: 24px; height: 24px; }
.atalho-item.on { border-color: var(--verde); }
.atalho-item:active { transform: scale(.96); }
.atalho-modulos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.segurando, .segurando * { user-select: none; -webkit-user-select: none; }
@media (pointer: coarse) { main.wrap a, main.wrap img { -webkit-touch-callout: none; } }

/* modo foco: só o texto na tela (Bear-like). body.foco esconde tudo que não é escrita */
body.foco .side, body.foco .barra-dia, body.foco .fab, body.foco .cabecalho, body.foco .foco-esconde, body.foco .toast { display: none !important; }
body.foco main.wrap { padding: 28px 20px 40vh; max-width: 780px; width: 100%; flex: 1 1 auto; box-sizing: border-box; margin: 0 auto; animation: foco-entra 380ms var(--ease-out) backwards; } /* backwards: sem transform residual, senão os botões fixos se prendem à página */
body.foco .foco-alvo { display: block; width: 100% !important; }
@keyframes foco-entra { from { opacity: 0; transform: translateY(10px) scale(.985); } }
body.foco .foco-alvo { border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 18px !important; line-height: 1.75 !important; min-height: 70vh !important; max-height: none !important; padding: 0 !important; overflow: hidden !important; resize: none; }
body.foco .roteiro-grade { grid-template-columns: 1fr !important; } body.foco #preview, body.foco #painel-direito { display: none !important; }
.redondo, .sair-foco { position: fixed; z-index: 55; width: 44px; height: 44px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--borda-2); color: var(--muted); opacity: .7; cursor: pointer; transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-mola), color var(--dur-2); }
.redondo:hover { opacity: 1; color: var(--texto); transform: scale(1.06); } .redondo:active { transform: scale(.94); }
.sair-foco { top: 14px; right: 14px; display: none; }
body.foco .sair-foco { display: inline-flex; animation: sair-foco-entra 320ms var(--ease-mola) both; } .sair-foco:hover { opacity: 1; color: var(--texto); transform: scale(1.06); } .sair-foco:active { transform: scale(.94); }
@keyframes sair-foco-entra { from { opacity: 0; transform: scale(.6); } to { opacity: .7; transform: none; } }
body.foco { transition: background-color var(--dur-3); }
@media (max-width: 900px) {
  .sair-foco, .redondo { top: auto; left: auto; right: 24px; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); opacity: .92; width: 56px; height: 56px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
  .sair-foco svg, .redondo svg { width: 24px; height: 24px; }
  body.foco main.wrap { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
}

/* arrastar para a esquerda revela a ação (Bear-like): <div class="arrasta" data-arrasta-url="/x/excluir" data-arrasta-confirmar="Excluir?"><div class="arrasta-frente">…</div></div>
   a faixa vermelha cresce junto do dedo (--x = deslocamento em px, --p = progresso 0..1); ao soltar, mola */
.arrasta { position: relative; overflow: hidden; border-radius: var(--raio); --x: 0px; --p: 0; }
.arrasta > .arrasta-frente { position: relative; z-index: 1; transform: translateX(var(--x)); transition: transform 360ms cubic-bezier(.22,1.3,.36,1); touch-action: pan-y; will-change: transform; }
.arrasta > .arrasta-frente > .card { margin: 0; }
.arrasta.arrastando > .arrasta-frente, .arrasta.arrastando > .arrasta-acao { transition: none; }
.arrasta > .arrasta-acao { position: absolute; top: 0; bottom: 0; right: 0; width: max(0px, calc(-1 * var(--x))); padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; overflow: hidden; background: var(--vermelho); color: #fff; font: inherit; font-size: 13px; font-weight: 600; border: 0; border-radius: 0 var(--raio) var(--raio) 0; cursor: pointer; transition: width 360ms cubic-bezier(.22,1.3,.36,1), background var(--dur-2); }
.arrasta > .arrasta-acao > * { flex-shrink: 0; opacity: var(--p); transform: scale(calc(.55 + .45 * var(--p))); transition: transform 200ms var(--ease-mola), opacity 160ms; }
.arrasta.arrastando > .arrasta-acao > * { transition: none; }
.arrasta.pronto > .arrasta-acao { background: #c9573f; } .arrasta.pronto > .arrasta-acao > svg { transform: scale(1.18); }
.arrasta > .arrasta-acao:active > * { transform: scale(.9); }
.arrasta.excluindo > .arrasta-frente { transition: transform 260ms cubic-bezier(.4,0,.8,.4), opacity 220ms; transform: translateX(-110%); opacity: .4; }
.arrasta.excluindo > .arrasta-acao { width: 100%; transition: width 260ms cubic-bezier(.4,0,.8,.4), border-radius 260ms; border-radius: var(--raio); }
.arrasta.excluindo > .arrasta-acao > * { transform: scale(1.3); opacity: 1; transition: transform 260ms var(--ease-mola); }
.arrasta.saindo { transition: max-height 300ms cubic-bezier(.16,1,.3,1), opacity 240ms, margin 300ms cubic-bezier(.16,1,.3,1); max-height: 0 !important; opacity: 0; overflow: hidden; }

/* tela cheia de escrita: abre em círculo a partir do botão que a chamou (--ox/--oy) e volta para ele ao fechar
   <div class="tela-cheia" id="x"><textarea></textarea></div> + <button data-tela-cheia="#x"> */
.tela-cheia { position: fixed; inset: 0; z-index: 60; background: var(--fundo); display: none; flex-direction: column; gap: 10px; padding: calc(64px + env(safe-area-inset-top, 0px)) 20px calc(96px + env(safe-area-inset-bottom, 0px)); --ox: 50%; --oy: 50%; }
.tela-cheia.on { display: flex; }
.tela-cheia.entrando { animation: tela-abre 480ms var(--ease-out) both; }
.tela-cheia.saindo { animation: tela-fecha 360ms cubic-bezier(.45, 0, .75, .25) both; pointer-events: none; }
.tela-cheia.arrastando { box-shadow: 0 30px 90px -10px rgba(0,0,0,.7); will-change: transform, opacity, border-radius; }
.tela-cheia.saindo-esq { animation: tela-sai-esq 320ms cubic-bezier(.3, 0, .8, .4) both; pointer-events: none; box-shadow: 0 30px 90px -10px rgba(0,0,0,.7); }
@keyframes tela-sai-esq { to { transform: translateX(-112%) scale(.9); opacity: 0; border-radius: 40px; } }
.tela-cheia.saindo-esq > * { opacity: 1; transition: none; }
@keyframes tela-abre { from { clip-path: circle(30px at var(--ox) var(--oy)); } to { clip-path: circle(170% at var(--ox) var(--oy)); } }
@keyframes tela-fecha { from { clip-path: circle(170% at var(--ox) var(--oy)); opacity: 1; } 80% { opacity: 1; } to { clip-path: circle(30px at var(--ox) var(--oy)); opacity: .2; } }
.tela-cheia.entrando > * { animation: subir 400ms 160ms var(--ease-out) both; }
.tela-cheia.saindo > * { opacity: 0; transition: opacity 180ms; }
.tela-cheia textarea { flex: 1; width: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0; padding: 0 !important; resize: none; font-size: 18px; line-height: 1.75; }
.tela-cheia .eyebrow { font-size: 13px; }
body.foco .foco-alvo::placeholder, .tela-cheia textarea::placeholder { font-family: var(--display); font-weight: 500; font-size: 40px; letter-spacing: -0.02em; color: var(--muted); opacity: 1; }
body.tela-aberta { overflow: hidden; }
@media (max-width: 900px) { .tela-cheia textarea { font-size: 22px; line-height: 1.55; } .tela-cheia .eyebrow { font-size: 12px; } }
.arrasta.arrasta-linha { border-radius: 0; } .arrasta.arrasta-linha > .arrasta-frente { background: var(--card); } .arrasta.arrasta-linha > .arrasta-acao { border-radius: 0; }
.arrasta.arrasta-linha.saindo { border-bottom: 0; }
.item-novo { animation: item-novo 520ms var(--ease-mola) both; }
@keyframes item-novo { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .tela-cheia.entrando, .tela-cheia.saindo, .tela-cheia.entrando > * { animation-duration: 1ms; animation-delay: 0ms; } }

/* gaveta: painel que desliza da esquerda (Bear-like). <button data-gaveta="#id"> abre; [data-fechar-gaveta], Esc, toque fora ou arrastar para a esquerda fecham */
.gaveta { position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); z-index: 70; background: var(--lateral); border-right: 1px solid var(--linha); padding: calc(24px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; transform: translateX(-104%); visibility: hidden; transition: transform 380ms var(--ease-out), visibility 0s linear 380ms; box-shadow: 0 0 0 rgba(0,0,0,0); will-change: transform; }
.gaveta.on { transform: none; visibility: visible; transition: transform 420ms cubic-bezier(.22, 1.1, .36, 1), visibility 0s; box-shadow: 24px 0 60px -20px rgba(0,0,0,.6); }
.gaveta.arrastando { transition: none; }
.gaveta.on > * { animation: subir 360ms var(--ease-out) both; } .gaveta.on > *:nth-child(2) { animation-delay: 40ms; } .gaveta.on > *:nth-child(3) { animation-delay: 80ms; } .gaveta.on > *:nth-child(n+4) { animation-delay: 120ms; }
.gaveta-fundo { position: fixed; inset: 0; z-index: 69; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity 320ms; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.gaveta-fundo.on { opacity: 1; pointer-events: auto; }
body.gaveta-aberta { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .gaveta, .gaveta.on, .gaveta-fundo { transition: none; } .gaveta.on > * { animation: none; } }

/* puxar para escrever: o + desce do topo enquanto o dedo puxa; ao soltar pronto, vira a tela cheia */
.puxar-ind { position: fixed; top: -56px; left: 50%; z-index: 58; width: 52px; height: 52px; border-radius: 999px; background: var(--card); border: 1px solid var(--borda-2); color: var(--muted); display: none; align-items: center; justify-content: center; transform: translate(-50%, 0) scale(.6); opacity: 0; box-shadow: 0 10px 30px rgba(0,0,0,.45); will-change: transform, opacity; pointer-events: none; transition: background 160ms, color 160ms, border-color 160ms; }
.puxar-ind.on { display: flex; }
.puxar-ind.pronto { background: var(--verde); color: var(--verde-escuro); border-color: var(--verde); }
@media (max-width: 900px) { html, body { overscroll-behavior-y: none; } }

/* menu redondo do foco (celular): fica acima do X e abre em pílulas para cima */
.foco-acoes { display: none; }
@media (max-width: 900px) {
  body.foco .foco-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; position: fixed; right: 24px; bottom: calc(130px + env(safe-area-inset-bottom, 0px)); z-index: 56; }
  .foco-acoes .foco-mais { position: static; right: auto; bottom: auto; }
  .foco-mais svg { transition: transform 320ms cubic-bezier(.34, 1.4, .64, 1); } .foco-mais.aberto svg { transform: rotate(90deg); } .foco-mais.aberto { color: var(--texto); opacity: 1; }
  .foco-lista { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  .foco-op { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--borda-2); color: var(--texto); font: inherit; font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(0,0,0,.45); cursor: pointer; animation: subir 300ms var(--ease-out) both; }
  .foco-op svg { color: var(--verde-txt); }
  .foco-lista .foco-op:nth-last-child(2) { animation-delay: 40ms; } .foco-lista .foco-op:nth-last-child(3) { animation-delay: 80ms; }
  body.foco #titulo-nota { display: none; }
  body.foco.titulo-visivel #titulo-nota, body.foco #titulo-nota.tem-valor { display: block; font-size: 24px !important; height: auto !important; line-height: 1.2; margin-bottom: 6px; }
}
body.foco.so-formatado #corpo { display: none !important; }
body.foco.so-formatado #md { display: block !important; background: transparent; border: 0; padding: 0; min-height: 0 !important; }
body.foco.so-formatado #fountain { display: none !important; }
body.foco.so-formatado #preview { display: block !important; max-height: none !important; overflow: visible !important; }