/* =====================================================================
   MR START — base.css · reset, tipografia, utilitários
   ===================================================================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* color-scheme:dark faz o browser desenhar em modo escuro tudo que é nativo:
   a lista aberta do <select>, o datalist, calendários e a barra de rolagem.
   Sem isso a droplist abre com fundo branco e some com o texto claro. */
html{ -webkit-text-size-adjust:100%; color-scheme:dark; }
body{
  background:var(--bg); color:var(--text);
  font:400 14px/1.55 var(--font-sans);
  font-optical-sizing:auto;              /* Bricolage é variável (opsz) */
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
}
img,svg,video,iframe{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{ font-family:inherit; color:inherit; }
ul,ol{ list-style:none; }
::selection{ background:var(--accent-soft); color:var(--text); }

/* Scrollbars discretas */
*{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:4px; }
*::-webkit-scrollbar-track{ background:transparent; }

/* --- Tipografia utilitária --- */
.eyebrow{
  font-size:10px; letter-spacing:0.3em; text-transform:uppercase;
  font-weight:600; color:var(--text-dim);
}
.page-title{
  font-family:var(--font-display);
  font-size:clamp(28px, 4.5vw, 46px); font-weight:800;
  letter-spacing:-0.03em; line-height:1.06; color:var(--text);
  text-transform:uppercase;
}
/* A ASSINATURA: a segunda palavra do título vira a placa amarela
   chanfrada do logo (cantos NW e SE cortados a 45°). */
.page-title .accent{
  display:inline-block; background:var(--accent); color:var(--accent-text);
  padding:0.02em 0.18em 0.03em; margin-left:0.14em;
  clip-path:var(--notch-clip-lg);
}

/* Tag de colchetes (das propostas): ↗ [ TEXTO ] */
.mr-tag{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border-strong); padding:7px 14px;
  font-size:10px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--text-dim); white-space:nowrap;
}
.mr-tag::before{ content:'↗'; letter-spacing:0; color:var(--text); }
.mr-tag > span::before{ content:'[ '; color:var(--text-faint); }
.mr-tag > span::after{ content:' ]'; color:var(--text-faint); }
.page-subtitle{ composes:eyebrow; }
/* Cabeçalho de página gruda no topo ao rolar: as ações (salvar, publicar,
   baixar PDF, criar) ficam sempre ao alcance, sem ter que voltar lá pra
   cima pra clicar. O padding + margem negativa se cancelam, então a
   posição de repouso é a mesma de antes — o padding só existe pra dar ar
   quando a barra encosta no topo. --stick-top/--stick-h vêm do
   core/sticky.js.

   EM REPOUSO O CABEÇALHO NÃO TEM FUNDO. O vidro existe pra separar a barra
   do conteúdo que passa por baixo dela — antes de rolar não há nada
   passando, e a faixa só tapava a foto de fundo logo no alto da página,
   que é onde ela mais aparece. O fundo entra junto com a função, quando o
   .is-stuck chega (core/sticky.js).

   A borda já nasce com 1px transparente: ao acender ela troca só de cor e
   não empurra o conteúdo um pixel pra baixo. backdrop-filter fica fora da
   transição de propósito — animar blur custa caro e pisca no Safari. */
.page-header{
  position:sticky; top:var(--stick-top, 0px); z-index:60;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap;
  margin:-14px 0 18px; padding:14px 0;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color 0.18s ease, border-bottom-color 0.18s ease;
}
.page-header.is-stuck{
  background:var(--glass-2-bg);
  backdrop-filter:var(--glass-2); -webkit-backdrop-filter:var(--glass-2);
  border-bottom-color:var(--border);
}
.page-header .eyebrow{ margin-bottom:8px; }
.page-header-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
/* Variante sem ações (Início): sem botão nenhum não há o que manter ao
   alcance, então a barra nem gruda — rola junto com o conteúdo. */
.page-header--limpo{
  position:static; margin:0 0 22px; padding:0;
}
.page-header--limpo.is-stuck{
  background:transparent; border-bottom-color:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}

@media (prefers-reduced-motion: reduce){
  .page-header{ transition:none; }
}

.muted{ color:var(--text-dim); }
.faint{ color:var(--text-faint); }
.mono{ font-family:var(--font-mono); }
.nums{ font-variant-numeric:tabular-nums; }
.small{ font-size:12px; }

/* --- Utilitários de layout --- */
.row{ display:flex; align-items:center; gap:10px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.stack{ display:flex; flex-direction:column; gap:12px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
@media (max-width:900px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

.hidden{ display:none !important; }
/* Some da tela, continua no leitor de tela. Para quando o significado
   está só no desenho (um ✓ numa célula, um ícone sozinho num botão). */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* --- Animações --- */
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes fadeInScale{ from{ opacity:0; transform:scale(0.97); } to{ opacity:1; transform:none; } }
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.fade-in{ animation:fadeIn 0.35s ease; }

.skeleton{
  border-radius:var(--radius-sm);
  background:linear-gradient(100deg, var(--surface) 40%, var(--surface-2) 50%, var(--surface) 60%);
  background-size:200% 100%; animation:shimmer 1.6s linear infinite;
  min-height:16px;
}

/* --- Voltar ao topo (js/core/back-to-top.js) ---
   Vive no <body>, fora de qualquer página, por isso mora aqui no base:
   é o único CSS que todas as páginas carregam. */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:600;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-pill); cursor:pointer;
  color:var(--text); background:rgba(10,10,12,0.78);
  border:1px solid var(--border-strong);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s,
             background .16s ease, color .16s ease, border-color .16s ease;
}
.to-top.on{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{
  background:var(--accent); color:var(--accent-text); border-color:var(--accent);
}
.to-top:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.to-top svg{ display:block; }

/* Player em mini sobe o botão pra não ficar embaixo dele. */
body:has(#pp-container.mini) .to-top{ bottom:calc(20px + 250px + 12px); }
@media (max-width:560px){
  .to-top{ right:14px; bottom:14px; width:42px; height:42px; }
  body:has(#pp-container.mini) .to-top{ bottom:calc(14px + 220px + 10px); }
}
@media (prefers-reduced-motion:reduce){
  .to-top{ transition:opacity .01s, visibility .01s; transform:none; }
}