/* ============================================================
   MIDGARD — DESIGN SYSTEM (dark only)
   Base de interface para documentação de larga escala.

   Camadas:
     1. Tokens        — cor, tipo, espaço, raio, sombra, motion
     2. Reset         — normalização
     3. Layout        — app shell (header, sidebar, main, aside)
     4. Componentes   — reutilizáveis, mesma linguagem visual
     5. Utilitários   — apoio pontual
     6. Responsivo    — pontos de quebra

   Regra do sistema: nenhum componente inventa cor, raio, sombra ou
   espaçamento próprio. Tudo vem dos tokens da camada 1.
   ============================================================ */


/* ═══════════════════════ 1. TOKENS ═══════════════════════ */
:root{
  /* ---- superfícies ---- */
  --bg:#0B0F14;            /* fundo da aplicação */
  --bg-2:#131A26;          /* fundo secundário: header, sidebar, aside */
  --surface:#1A2332;       /* superfície elevada: cards, popovers, inputs */
  --surface-2:#212C3E;     /* estado hover de superfície */

  /* gradientes: substituem textura, mantêm o fundo respirando.
     Derivam das superfícies, então acompanham a troca de servidor. */
  --grad-surface:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));
  --grad-header:linear-gradient(180deg,
    color-mix(in srgb,var(--bg-2) 92%,transparent),
    color-mix(in srgb,var(--bg-2) 78%,transparent));
  --grad-sidebar:linear-gradient(180deg,
    color-mix(in srgb,var(--bg-2) 50%,transparent),
    color-mix(in srgb,var(--bg-2) 20%,transparent));
  --grad-accent:linear-gradient(135deg,var(--accent),var(--accent-2));

  /* blocos de código e véu do painel móvel: um passo abaixo do fundo */
  --code-bg:color-mix(in srgb,var(--bg) 70%,#000);
  --code-fg:color-mix(in srgb,var(--text-2) 70%,var(--text));
  --overlay-bg:color-mix(in srgb,var(--bg) 72%,transparent);

  /* ---- traço ---- */
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.14);

  /* ---- acento ----
     Só estes dois valores mudam por servidor (ver bloco data-server).
     Tudo o que é "da cor da marca" deriva deles por color-mix, então
     trocar de wiki repinte a interface inteira sem duplicar regra. */
  --accent:#4F8CFF;
  --accent-2:#6C5CE7;

  --border-accent:color-mix(in srgb,var(--accent) 38%,transparent);
  --accent-soft:color-mix(in srgb,var(--accent) 12%,transparent);
  --accent-softer:color-mix(in srgb,var(--accent) 6%,transparent);
  --accent-hover:color-mix(in srgb,var(--accent) 72%,#fff);
  --ambient-1:color-mix(in srgb,var(--accent) 10%,transparent);
  --ambient-2:color-mix(in srgb,var(--accent-2) 7%,transparent);
  --code-text:color-mix(in srgb,var(--accent) 30%,var(--text-2));

  /* ---- texto ---- */
  --text:#F4F6FA;
  --text-2:#9CA8BC;
  --text-3:#66738A;        /* metadados, placeholders, estados desabilitados */

  /* ---- semânticos ----
     Não mudam por servidor: verde é sucesso em qualquer wiki.
     Só o "danger" é reajustado no tema vermelho, para não se confundir
     com o acento (ver bloco data-server="red"). */
  --info:#4F8CFF;      --info-soft:rgba(79,140,255,.10);
  --success:#3DD68C;   --success-soft:rgba(61,214,140,.10);
  --warning:#F5B544;   --warning-soft:rgba(245,181,68,.10);
  --danger:#FF6B6B;    --danger-soft:rgba(255,107,107,.10);

  /* ---- tipografia ---- */
  --font-display:'Sora',ui-sans-serif,system-ui,sans-serif;
  --font-text:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Cascadia Code',Consolas,monospace;

  /* escala tipográfica — razão ~1.2, ancorada em 16px */
  --t-xs:12px;
  --t-sm:13.5px;
  --t-base:16px;
  --t-md:18px;
  --t-lg:22px;
  --t-xl:27px;
  --t-2xl:33px;
  --t-3xl:42px;

  --lh-tight:1.2;
  --lh-snug:1.45;
  --lh-base:1.72;

  /* ---- espaço (escala 4px) ---- */
  --s-1:4px;   --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-5:20px;  --s-6:24px;  --s-8:32px;  --s-10:40px;
  --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;

  /* ---- raio ---- */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:14px;
  --r-pill:999px;

  /* ---- elevação ---- */
  --sh-1:0 1px 2px rgba(0,0,0,.35);
  --sh-2:0 6px 20px -6px rgba(0,0,0,.5);
  --sh-3:0 20px 50px -14px rgba(0,0,0,.68);
  --sh-glow:0 10px 40px -14px color-mix(in srgb,var(--accent) 55%,transparent);

  /* ---- movimento ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.12s;
  --dur:.2s;

  /* ---- medidas do shell ---- */
  --header-h:60px;
  --sidebar-w:272px;
  --aside-w:240px;
  --content-max:768px;     /* ~72ch: medida de leitura confortável */
  --shell-max:1600px;

  --z-header:60;
  --z-drawer:70;
  --z-overlay:80;
  --z-toast:90;
}


/* ═══════════════ 1.1 IDENTIDADE POR SERVIDOR ═══════════════
   data-server no <html> define a cor da wiki inteira.
   Blue é o padrão; Red usa o ember da marca com um carmim de apoio.
   ============================================================ */
html[data-server="blue"]{
  --accent:#4F8CFF;
  --accent-2:#6C5CE7;
}

html[data-server="red"]{
  --accent:#FF5A45;
  --accent-2:#D6365E;

  /* As superfícies acompanham a temperatura do acento.
     O azul mora sobre um fundo de viés frio (#0B0F14); o vermelho
     sobre um fundo frio brigaria, então aqui ele ganha um fundo de
     viés quente com a MESMA luminosidade — o contraste do texto e a
     profundidade entre as camadas não mudam, só a temperatura. */
  --bg:#110D0E;
  --bg-2:#1C1719;
  --surface:#272022;
  --surface-2:#312A2C;

  --text:#FAF6F5;
  --text-2:#B3A6A6;
  --text-3:#7C6F70;

  /* no vermelho, o alerta crítico precisa se afastar do acento,
     senão "marca" e "perigo" viram a mesma leitura */
  --danger:#FF9AA2;
  --danger-soft:rgba(255,154,162,.12);
}

/* ═══════════════════════ 2. RESET ═══════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--s-6));
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-text);
  font-size:var(--t-base);
  line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* luz de ambiente — única "decoração" do sistema; segue o acento */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 420px at 50% -220px,var(--ambient-1),transparent 70%),
    radial-gradient(700px 380px at 88% -120px,var(--ambient-2),transparent 72%);
  transition:background var(--dur) var(--ease);
}

a{color:var(--accent);text-decoration:none;transition:color var(--dur-fast) var(--ease)}
a:hover{color:var(--accent-hover)}

img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

::selection{background:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--text)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:var(--r-pill);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}


/* ═══════════════════════ 3. LAYOUT (APP SHELL) ═══════════════════════ */

/* ---- header ---- */
.header{
  position:sticky;top:0;z-index:var(--z-header);
  height:var(--header-h);
  display:flex;align-items:center;gap:var(--s-4);
  padding:0 var(--s-5);
  background:var(--grad-header);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.header__brand{
  display:flex;align-items:center;gap:var(--s-3);
  flex:none;min-width:calc(var(--sidebar-w) - var(--s-5) * 2);
  overflow:hidden;
}
.header__spacer{flex:1}
.header__actions{display:flex;align-items:center;gap:var(--s-2);flex:none}

/* ---- shell ---- */
.shell{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--aside-w);
  max-width:var(--shell-max);
  margin:0 auto;
}

/* ---- painel de navegação (esquerda) ---- */
.sidebar{
  position:sticky;top:var(--header-h);align-self:start;
  height:calc(100vh - var(--header-h));
  overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s-6) var(--s-4) var(--s-12);
  border-right:1px solid var(--border);
  background:var(--grad-sidebar);
}
.nav-group{margin-bottom:var(--s-6)}
.nav-group__label{
  font-family:var(--font-display);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);
  padding:0 var(--s-3);margin-bottom:var(--s-2);
}
.nav-item{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r-sm);
  font-size:var(--t-sm);color:var(--text-2);line-height:var(--lh-snug);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-item[aria-current="page"],
.nav-item.is-active{
  background:var(--accent-soft);
  color:var(--text);
  box-shadow:inset 0 0 0 1px var(--border-accent);
}
.nav-item__dot{
  width:5px;height:5px;border-radius:var(--r-pill);flex:none;
  background:currentColor;opacity:.45;
}
.nav-item.is-active .nav-item__dot{background:var(--accent);opacity:1}

/* ---- conteúdo ---- */
.main{min-width:0;padding:var(--s-10) var(--s-12) var(--s-24)}
.main__inner{max-width:var(--content-max)}

/* ---- painel de informação (direita, opcional) ---- */
.aside{
  position:sticky;top:var(--header-h);align-self:start;
  height:calc(100vh - var(--header-h));
  overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s-10) var(--s-5) var(--s-12);
}
.aside__label{
  font-family:var(--font-display);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:var(--s-3);
}
.aside__list{display:flex;flex-direction:column;gap:var(--s-1);border-left:1px solid var(--border)}
.aside__link{
  padding:var(--s-2) var(--s-3);margin-left:-1px;
  border-left:2px solid transparent;
  font-size:var(--t-sm);color:var(--text-3);line-height:var(--lh-snug);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.aside__link:hover{color:var(--text-2)}
.aside__link.is-active{color:var(--accent);border-left-color:var(--accent)}


/* ═══════════════════════ 4. TIPOGRAFIA DE CONTEÚDO ═══════════════════════ */
.prose h1,.prose h2,.prose h3,.prose h4{
  font-family:var(--font-display);
  color:var(--text);
  line-height:var(--lh-tight);
  letter-spacing:-.02em;
  text-wrap:balance;
}
.prose h1{font-size:var(--t-3xl);font-weight:600;margin-bottom:var(--s-4)}
.prose h2{font-size:var(--t-xl);font-weight:600;margin:var(--s-16) 0 var(--s-4)}
.prose h3{font-size:var(--t-lg);font-weight:600;margin:var(--s-10) 0 var(--s-3)}
.prose h4{font-size:var(--t-md);font-weight:600;margin:var(--s-8) 0 var(--s-2)}

.prose .lead{
  font-size:var(--t-md);color:var(--text-2);line-height:var(--lh-base);
  margin-bottom:var(--s-10);max-width:64ch;
}
.prose p{margin:var(--s-4) 0;color:var(--text-2)}
.prose strong{color:var(--text);font-weight:600}
.prose hr{border:none;height:1px;background:var(--border);margin:var(--s-16) 0}

/* ---- listas ---- */
.prose ul,.prose ol{margin:var(--s-4) 0;padding-left:var(--s-5);color:var(--text-2)}
.prose li{margin:var(--s-2) 0;padding-left:var(--s-1)}
.prose li::marker{color:var(--text-3)}
.prose ul ul,.prose ol ol{margin:var(--s-2) 0}

/* lista com marcador em pílula, para enumerações curtas */
.list-plain{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.list-plain li{
  display:flex;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-3) 0;border-bottom:1px solid var(--border);margin:0;
}
.list-plain li:last-child{border-bottom:none}


/* ═══════════════════════ 5. COMPONENTES ═══════════════════════ */

/* ---------- 5.1 Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:38px;padding:0 var(--s-4);
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-family:var(--font-display);
  font-size:var(--t-sm);font-weight:500;letter-spacing:-.01em;
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease);
}
.btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.btn:active{transform:translateY(1px)}

.btn--primary{
  background:var(--grad-accent);
  border-color:transparent;
  color:#fff;
  box-shadow:var(--sh-glow);
}
.btn--primary:hover{filter:brightness(1.08);background:var(--grad-accent)}

.btn--ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn--ghost:hover{background:rgba(255,255,255,.05);color:var(--text)}

.btn--danger{background:var(--danger-soft);border-color:rgba(255,107,107,.3);color:var(--danger)}
.btn--danger:hover{background:rgba(255,107,107,.16)}

.btn--sm{height:30px;padding:0 var(--s-3);font-size:var(--t-xs);border-radius:var(--r-sm)}
.btn--lg{height:46px;padding:0 var(--s-6);font-size:var(--t-base)}
.btn--icon{width:38px;padding:0}
.btn--icon.btn--sm{width:30px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ---------- 5.2 Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:var(--s-2);
  height:22px;padding:0 var(--s-2);
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text-2);
  font-family:var(--font-display);
  font-size:var(--t-xs);font-weight:500;letter-spacing:.01em;
  white-space:nowrap;
}
.badge--accent {background:var(--accent-soft); border-color:var(--border-accent);   color:var(--accent)}
.badge--success{background:var(--success-soft);border-color:rgba(61,214,140,.28);   color:var(--success)}
.badge--warning{background:var(--warning-soft);border-color:rgba(245,181,68,.28);   color:var(--warning)}
.badge--danger {background:var(--danger-soft); border-color:rgba(255,107,107,.28);  color:var(--danger)}
.badge__dot{width:5px;height:5px;border-radius:var(--r-pill);background:currentColor}

/* ---------- 5.3 Cards ---------- */
.card{
  display:block;
  padding:var(--s-5);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:var(--surface);
  background-image:var(--grad-surface);
  box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.card--interactive:hover{
  border-color:var(--border-accent);
  box-shadow:var(--sh-2);
  transform:translateY(-2px);
}
.card__media{
  height:120px;margin:calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-4);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 18%,transparent),
    color-mix(in srgb,var(--accent-2) 10%,transparent));
  border-bottom:1px solid var(--border);
}
.card__title{
  font-family:var(--font-display);font-size:var(--t-md);font-weight:600;
  color:var(--text);margin-bottom:var(--s-2);letter-spacing:-.01em;
}
.card__text{font-size:var(--t-sm);color:var(--text-2);line-height:var(--lh-snug)}
.card__footer{
  display:flex;align-items:center;gap:var(--s-2);
  margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--border);
}

/* grade de cards: escala sozinha conforme a largura disponível */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-4)}

/* ---------- 5.4 Callouts ---------- */
.callout{
  /* o callout base fala pela marca, então segue o servidor;
     as variantes abaixo mantêm o significado fixo */
  --c:var(--accent);
  --c-soft:var(--accent-soft);
  display:flex;gap:var(--s-3);
  padding:var(--s-4);
  border-radius:var(--r-md);
  border:1px solid var(--border);
  border-left:2px solid var(--c);
  background:var(--c-soft);
  margin:var(--s-6) 0;
}
.callout--success{--c:var(--success);--c-soft:var(--success-soft)}
.callout--warning{--c:var(--warning);--c-soft:var(--warning-soft)}
.callout--danger {--c:var(--danger); --c-soft:var(--danger-soft)}
.callout--neutral{--c:var(--text-3); --c-soft:rgba(255,255,255,.03)}

.callout__icon{color:var(--c);flex:none;margin-top:2px}
.callout__body{min-width:0}
.callout__title{
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;
  color:var(--text);margin-bottom:var(--s-1);
}
.callout__text{font-size:var(--t-sm);color:var(--text-2);line-height:var(--lh-snug)}
.callout__text p{margin:var(--s-2) 0 0;color:inherit;font-size:inherit}

/* ---------- 5.5 Tabelas ---------- */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  margin:var(--s-6) 0;
}
.table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:520px}
.table thead th{
  position:sticky;top:0;
  text-align:left;padding:var(--s-3) var(--s-4);
  background:var(--bg-2);
  color:var(--text-3);
  font-family:var(--font-display);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.table tbody td{
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--border);
  color:var(--text-2);vertical-align:top;
}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr{transition:background var(--dur-fast) var(--ease)}
.table tbody tr:hover{background:rgba(255,255,255,.02)}
.table--numeric td,.table--numeric th{font-variant-numeric:tabular-nums}

/* ---------- 5.6 Código ---------- */
.prose code{
  font-family:var(--font-mono);font-size:.875em;
  padding:2px 6px;border-radius:6px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--code-text);
  white-space:nowrap;
}
.code{
  position:relative;
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:var(--code-bg);
  overflow:hidden;
  margin:var(--s-6) 0;
}
.code__head{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  background:var(--bg-2);
  border-bottom:1px solid var(--border);
}
.code__label{
  font-family:var(--font-mono);font-size:var(--t-xs);color:var(--text-3);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.code pre{padding:var(--s-4);overflow-x:auto}
.code pre code{
  background:none;border:none;padding:0;white-space:pre;
  font-size:var(--t-sm);line-height:1.7;color:var(--code-fg);
}

/* ---------- 5.7 Imagens ---------- */
.figure{margin:var(--s-6) 0}
.figure__frame{
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:var(--surface);
  overflow:hidden;
}
.figure__frame img{width:100%;height:auto}
.figure__caption{
  margin-top:var(--s-2);
  font-size:var(--t-xs);color:var(--text-3);text-align:center;
}
/* área reservada de mídia (sem imagem definida) */
.placeholder-media{
  aspect-ratio:16/9;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--accent) 10%,transparent),
      color-mix(in srgb,var(--accent-2) 6%,transparent)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px);
  display:grid;place-items:center;
  color:var(--text-3);font-size:var(--t-xs);
}

/* ---------- 5.8 Abas ---------- */
.tabs{margin:var(--s-6) 0}
.tabs__list{
  display:flex;gap:var(--s-1);
  padding:var(--s-1);
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--bg-2);
  overflow-x:auto;
}
.tabs__tab{
  padding:var(--s-2) var(--s-4);
  border-radius:var(--r-sm);
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:500;
  color:var(--text-2);white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.tabs__tab:hover{color:var(--text)}
.tabs__tab[aria-selected="true"]{
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--sh-1),inset 0 0 0 1px var(--border);
}
.tabs__panel{padding-top:var(--s-4)}
.tabs__panel[hidden]{display:none}

/* ---------- 5.9 Acordeão ---------- */
.accordion{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  overflow:hidden;
  margin:var(--s-6) 0;
}
.accordion__item + .accordion__item{border-top:1px solid var(--border)}
.accordion__trigger{
  width:100%;display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4);
  text-align:left;
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:500;color:var(--text);
  transition:background var(--dur-fast) var(--ease);
}
.accordion__trigger:hover{background:rgba(255,255,255,.03)}
.accordion__label{flex:1;min-width:0}
.accordion__chevron{color:var(--text-3);flex:none;transition:transform var(--dur) var(--ease)}
.accordion__trigger[aria-expanded="true"] .accordion__chevron{transform:rotate(180deg)}
.accordion__panel{
  padding:0 var(--s-4) var(--s-4);
  font-size:var(--t-sm);color:var(--text-2);line-height:var(--lh-snug);
}
.accordion__panel[hidden]{display:none}

/* ---------- 5.10 Busca ---------- */
.search{position:relative;flex:1;min-width:0;max-width:440px}
.search__input{
  width:100%;height:36px;
  padding:0 var(--s-16) 0 var(--s-10);
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:var(--t-sm);
  outline:none;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.search__input::placeholder{color:var(--text-3)}
.search__input:focus{
  border-color:var(--border-accent);
  background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-softer);
}
.search__icon{
  position:absolute;left:var(--s-3);top:50%;transform:translateY(-50%);
  color:var(--text-3);pointer-events:none;display:flex;
}
.search__kbd{position:absolute;right:var(--s-2);top:50%;transform:translateY(-50%);pointer-events:none}

.kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 5px;
  border-radius:6px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  font-family:var(--font-mono);font-size:11px;color:var(--text-3);
}

/* ---------- 5.11 Breadcrumb ---------- */
.breadcrumb{
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  font-size:var(--t-sm);color:var(--text-3);
  margin-bottom:var(--s-5);
}
.breadcrumb__link{color:var(--text-3)}
.breadcrumb__link:hover{color:var(--text-2)}
.breadcrumb__sep{color:var(--text-3);opacity:.5}
.breadcrumb__current{color:var(--text-2)}

/* ---------- 5.12 Paginação ---------- */
/* a) navegação sequencial entre documentos */
.pager{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-3);
  margin-top:var(--s-16);
}
.pager__link{
  display:flex;flex-direction:column;gap:var(--s-1);
  padding:var(--s-4);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:var(--surface);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.pager__link:hover{border-color:var(--border-accent);background:var(--surface-2)}
.pager__kicker{font-size:var(--t-xs);color:var(--text-3)}
.pager__title{font-family:var(--font-display);font-size:var(--t-sm);font-weight:500;color:var(--text)}
.pager__link--next{text-align:right}

/* b) paginação numérica, para índices longos */
.pagination{display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap}
.pagination__item{
  min-width:34px;height:34px;padding:0 var(--s-2);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  font-size:var(--t-sm);color:var(--text-2);
  font-variant-numeric:tabular-nums;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.pagination__item:hover{background:rgba(255,255,255,.05);color:var(--text)}
.pagination__item[aria-current="page"]{
  background:var(--accent-soft);border-color:var(--border-accent);color:var(--text);
}
.pagination__ellipsis{color:var(--text-3);padding:0 var(--s-1)}

/* ---------- 5.13 Notificações ---------- */
.toast-stack{
  position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:var(--s-2);
  width:min(360px,calc(100vw - var(--s-8)));
}
.toast{
  --c:var(--accent);
  display:flex;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface);
  background-image:var(--grad-surface);
  box-shadow:var(--sh-3);
  animation:toast-in var(--dur) var(--ease);
}
.toast--success{--c:var(--success)}
.toast--warning{--c:var(--warning)}
.toast--danger {--c:var(--danger)}
.toast__icon{color:var(--c);flex:none;margin-top:2px}
.toast__body{flex:1;min-width:0}
.toast__title{font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;color:var(--text)}
.toast__text{font-size:var(--t-xs);color:var(--text-2);line-height:var(--lh-snug);margin-top:2px}
.toast__close{color:var(--text-3);flex:none;padding:2px;border-radius:6px;transition:color var(--dur-fast) var(--ease)}
.toast__close:hover{color:var(--text)}

@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* banner fixo, para avisos de página inteira */
.banner{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  border:1px solid var(--border-accent);
  background:linear-gradient(90deg,var(--accent-soft),transparent);
  margin:var(--s-6) 0;
}

/* ---------- 5.14 Skeleton (estado de carregamento) ---------- */
.skeleton{
  border-radius:var(--r-sm);
  background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 37%,rgba(255,255,255,.04) 63%);
  background-size:400% 100%;
  animation:skeleton 1.4s ease infinite;
}
@keyframes skeleton{from{background-position:100% 50%}to{background-position:0 50%}}


/* ═══════════════════════ 6. UTILITÁRIOS ═══════════════════════ */
.stack{display:flex;flex-direction:column}
.stack--2{gap:var(--s-2)} .stack--3{gap:var(--s-3)}
.stack--4{gap:var(--s-4)} .stack--6{gap:var(--s-6)}
.row{display:flex;align-items:center;flex-wrap:wrap}
.row--2{gap:var(--s-2)} .row--3{gap:var(--s-3)} .row--4{gap:var(--s-4)}
.muted{color:var(--text-2)}
.dim{color:var(--text-3)}
.mono{font-family:var(--font-mono)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* sobreposição do painel lateral no celular */
.overlay{
  position:fixed;inset:0;z-index:var(--z-overlay);
  background:var(--overlay-bg);
  backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);
}
.overlay.is-open{opacity:1;pointer-events:auto}

.menu-btn{display:none}

/* ---------- Seletor de servidor ----------
   Troca a identidade da interface inteira (data-server no <html>).
   Cada botão mostra a sua própria cor, independente da wiki ativa. */
.server-switch{
  display:flex;align-items:center;gap:2px;flex:none;
  padding:3px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.server-switch__btn{
  --c:var(--text-3);
  display:inline-flex;align-items:center;gap:var(--s-2);
  height:28px;padding:0 var(--s-3);
  border-radius:var(--r-sm);
  font-family:var(--font-display);
  font-size:var(--t-xs);font-weight:500;letter-spacing:.01em;
  color:var(--text-3);white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.server-switch__btn:hover{color:var(--text-2);background:rgba(255,255,255,.04)}
.server-switch__btn[aria-pressed="true"]{
  color:var(--text);
  background:color-mix(in srgb,var(--c) 16%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 42%,transparent),
             0 6px 18px -10px var(--c);
}
.server-switch__dot{
  width:6px;height:6px;border-radius:var(--r-pill);flex:none;
  background:var(--c);opacity:.55;transition:opacity var(--dur-fast) var(--ease);
}
.server-switch__btn[aria-pressed="true"] .server-switch__dot{
  opacity:1;box-shadow:0 0 8px var(--c);
}
.server-switch__btn[data-server-id="blue"]{--c:#4F8CFF}
.server-switch__btn[data-server-id="red"] {--c:#FF5A45}


/* ═══════════════════════ 7. RESPONSIVO ═══════════════════════ */

/* o painel de informação é o primeiro a sair: é auxiliar */
@media (max-width:1200px){
  .shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
  .aside{display:none}
  .main{padding:var(--s-8) var(--s-8) var(--s-20)}
}

/* abaixo disso, a navegação vira gaveta */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .menu-btn{display:inline-flex}
  .header__brand{min-width:0}
  .sidebar{
    position:fixed;top:var(--header-h);left:0;z-index:var(--z-drawer);
    width:min(300px,86vw);
    background:var(--bg-2);
    border-right:1px solid var(--border-strong);
    box-shadow:var(--sh-3);
    transform:translateX(-101%);
    transition:transform var(--dur) var(--ease);
  }
  .sidebar.is-open{transform:none}
  .main{padding:var(--s-6) var(--s-5) var(--s-16)}
  .prose h1{font-size:var(--t-2xl)}
  .prose h2{font-size:var(--t-lg);margin-top:var(--s-12)}
  .toast-stack{right:var(--s-3);left:var(--s-3);bottom:var(--s-3);width:auto}
}

@media (max-width:600px){
  :root{--t-3xl:34px;--t-2xl:28px}
  .search{max-width:none}
  .card-grid{grid-template-columns:1fr}

  /* o header precisa caber sem empurrar a página:
     a marca fica só com o símbolo, a busca ganha o espaço restante
     e as ações se reduzem à primária. */
  .header{padding:0 var(--s-3);gap:var(--s-2)}
  .header__brand{min-width:0}
  .header__brand > :not(:first-child){display:none}
  .header__actions .btn--ghost.btn--icon{display:none}
  .header__actions .btn--primary{height:32px;padding:0 var(--s-3);font-size:var(--t-xs)}
  .search__kbd{display:none}
  .search__input{padding-right:var(--s-3)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}