/* guild-code/estilo-suave.css: estilo "suave" do site (2026-10-27, pedido do dono; plano docs/superpowers/plans/2026-10-27-estilo-suave-site.md).
   Sem caixa: o que separa os blocos é um fio de baixa opacidade (--fio). Cada página liga este arquivo com
   <link rel="stylesheet" href="/estilo-suave.css"> ANTES do próprio <style>. Peças só do painel da guild (cards, pódios, gráfico) ficam nele. */
:root{--fio:color-mix(in srgb, var(--line) 55%, transparent)}
/* item SELECIONADO de um grupo (.seg, abas da party, chips): tom do destaque do tema + aro fino, no lugar de só subir um tom de cinza */
:root{--sel-bg:color-mix(in srgb, var(--accent) 22%, var(--panel));--sel-ring:inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent)}
/* ícones (img.bi-ico): o tamanho mora aqui, no CSS que bloqueia a renderização, senão o ícone aparece GIGANTE até o icones-ui.js
   carregar e injetar o mesmo CSS. As regras do tema e do ✓/✕ sobre fundo cheio repetem as do icones-ui.js (mesma força, sem conflito). */
.bi-ico{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.22em}
:root[data-theme="light"] img[src^="/icones/mono/"]{filter:brightness(.62) saturate(1.3)}
@media not (prefers-color-scheme:dark){:root:not([data-theme="dark"]) img[src^="/icones/mono/"]{filter:brightness(.62) saturate(1.3)}}
:root img.bi-ico.bi-ico-branco[src]{filter:brightness(0) invert(1)}:root img.bi-ico.bi-ico-escuro[src]{filter:brightness(0)}
/* barra de rolagem: o espaço dela fica reservado desde o começo. Sem isso, a página que passa da altura da janela DEPOIS que os dados
   chegam ganha a barra de 15 px e o conteúdo centralizado anda 7 px (CLS de /charms/, /novidades/, /codex/, /proficiencias/). */
html{scrollbar-gutter:stable}
/* menu lateral (desktop): a linha do nível (#brandLevel) entra depois do login, com a margem de 6 px do auth/gate.js, e o rodapé cresce
   com o chip da conta. Reservados desde o começo, a lista do menu não desce ao carregar (32 px em todas as páginas). */
@media (min-width:721px){.side .brand-lv{min-height:1em;margin-top:6px}}
@media (min-width:1101px){.side-foot{min-height:92px}}

/* grupo de botões cinza no lugar de <select> de até ~5 opções (JS: /seg.js) */
.fgrp{display:inline-flex;align-items:center;gap:6px;color:var(--mut)}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:2px;border-radius:8px;background:color-mix(in srgb, var(--mut) 10%, transparent)}
.seg button{border:0;background:none;color:var(--mut);font:inherit;font-size:12px;padding:5px 12px;border-radius:6px;cursor:pointer}
.seg button:hover:not(.on){color:var(--ink)}
.seg button.on{background:var(--sel-bg);color:var(--ink);box-shadow:var(--sel-ring)}
/* múltipla escolha: <label><input type="checkbox"> dentro do .seg vira botão de alternar (checkbox ou radio: a caixa fica escondida; o marcado ganha o destaque) */
.seg label{display:inline-flex;align-items:center;gap:4px;color:var(--mut);font-size:12px;padding:5px 12px;border-radius:6px;cursor:pointer;position:relative}
.seg label input[type=checkbox],.seg label input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.seg label:hover:not(:has(input:checked)){color:var(--ink)}
.seg label:has(input:checked){background:var(--sel-bg);color:var(--ink);box-shadow:var(--sel-ring)}
.seg label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
/* esquema de cores NATIVO acompanha o tema do site (popup do <select>, barra de rolagem, seletor de data, texto padrão de botão e
   campo). Sem isto o navegador pinta o popup de branco e o texto herdado (claro) some nele; o texto preto padrão do <button>
   ficava ilegível no cinza translúcido do tema escuro. :where() tem força zero, então qualquer regra da página ainda vence. */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
/* checkbox ÚNICO do site (2026-10-28): caixa de cantos suaves, destaque do tema quando marcada e o mesmo ✓ do catálogo de ícones.
   Antes havia três: bolinha (Magias, Charms, Codex, Hunts…), quadrado com "✓" de texto (bosses, guild) e o nativo do navegador.
   O ✓ é escuro sobre o dourado do tema escuro e claro sobre o ferrugem do tema claro (--chk). Radio continua bolinha. */
:root{--chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.6l3 3L12.8 4.8'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2317140c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.6l3 3L12.8 4.8'/%3E%3C/svg%3E")}}
:root[data-theme="dark"]{--chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2317140c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.6l3 3L12.8 4.8'/%3E%3C/svg%3E")}
/* seta de recolher/expandir (item 186 do catálogo, aprovado em 2026-10-28): a seta do dock desenhada por máscara, na cor do texto.
   O arquivo aponta para a DIREITA (fechado); aberto gira 90° e aponta para baixo. Vale para <i class="chev"> (+ .fechado), o botão de título de seção
   (.sec-seta.sec-chev, que já é uma caixa de 36 px: a seta vai no ::before) e a seta dos dropdowns (.drop, .sv-pick). */
html .drop>summary:after,html .sv-pick summary:after{content:"";color:var(--mut)}
.sec-chev::before{content:""}
.chev,.sec-chev::before,html .drop>summary:after,html .sv-pick summary:after{display:inline-block;width:10px;height:10px;font-size:0;vertical-align:-1px;background:currentColor;-webkit-mask:url(/icones/mono/recolher-expandir-secao.svg) center/contain no-repeat;mask:url(/icones/mono/recolher-expandir-secao.svg) center/contain no-repeat;transform:rotate(90deg);transition:transform .15s}
.sec-chev::before{width:16px;height:16px;vertical-align:0}
.chev.fechado,.sec-chev.fechado::before{transform:none}
html input[type=checkbox]{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin:0;flex:none;border:1px solid var(--mut);border-radius:4px;background:transparent;cursor:pointer;position:relative;top:auto;vertical-align:-2px}
html input[type=checkbox]:hover{border-color:var(--accent)}
html input[type=checkbox]:checked{background:var(--accent) var(--chk) center/11px no-repeat;border-color:var(--accent)}
html input[type=checkbox]:checked:after{content:none}
html input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
:where(button,select,input,textarea){color:inherit}
html select option,html select optgroup{background:var(--panel);color:var(--ink)}
/* o que sobrar de <select> (muitas opções) acompanha o cinza dos botões. "html select" (e não só "select") para vencer o
   select{...} da página, que vem depois deste arquivo com a mesma força */
html select{border:0;background:color-mix(in srgb, var(--mut) 10%, transparent);border-radius:8px;padding:6px 10px}
html input[type=text],html input[type=search],html input[type=date],html input[type=number],html textarea{border:0;background:color-mix(in srgb, var(--mut) 10%, transparent);border-radius:8px}

/* campo de busca (type=search): lupa do catálogo dentro do campo */
html input[type=search]{background-image:url(/icones/mono/busca.svg);background-repeat:no-repeat;background-position:9px 50%;background-size:14px;padding-left:30px}

/* painel sem moldura; .panel-fio acrescenta o fio em cima. Duas classes de propósito: o .panel{...} da página vem depois deste
   arquivo e, com uma classe só, devolveria a borda e o fundo */
.panel.panel-flat{background:none;border:0;padding:0;margin-bottom:16px}
.panel.panel-flat.panel-fio{border-top:1px solid var(--fio)}

/* botão de recolher a seção: alvo de 36 px com seta de 20 px; no hover ganha um fundo leve */
.sec-seta{margin-left:auto;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
      border-radius:8px;font-size:20px;line-height:1;color:var(--mut)}
h2.sec-cab:hover .sec-seta{background:color-mix(in srgb, var(--mut) 12%, transparent);color:var(--accent)}

/* tabela sem moldura: fio entre as linhas e hover cinza leve (opt-in: class="tab-suave") */
.tab-suave{background:none;border:0;border-radius:0}
.tab-suave th,.tab-suave td{border-bottom:1px solid var(--fio)}
.tab-suave tr:last-child td{border-bottom:0}
.tab-suave tbody tr:hover td{background:color-mix(in srgb, var(--mut) 7%, transparent)}

/* rotação de magias (2026-10-29, pedido do dono; /otimizar/, /personagem/ e /magias/): linha em três colunas fixas (rótulo · magias · kills/h),
   para o kills/h não cair de linha quando as magias quebram; chip só com ícone e nome (elemento, usos e avisos ficam no hover). */
.mg-linha{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:6px 12px;align-items:center}
.mg-quem{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;min-width:0}
.mg-quem.mg-rotulo{font-weight:400;color:var(--mut);font-size:12px}
.mg-kills{justify-self:end;white-space:nowrap;font-size:13px}
@media (max-width:720px){.mg-linha{grid-template-columns:minmax(0,1fr)}.mg-kills{justify-self:start}}
/* linha recolhível discreta (Proficiência recomendada, Excluir da rotação): texto mutado e a seta do dock, no lugar do marcador nativo */
details.linha-rec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--mut);font-size:12px}
details.linha-rec>summary::-webkit-details-marker{display:none}
details.linha-rec>summary::before{content:"";width:10px;height:10px;flex:none;background:currentColor;-webkit-mask:url(/icones/mono/recolher-expandir-secao.svg) center/contain no-repeat;mask:url(/icones/mono/recolher-expandir-secao.svg) center/contain no-repeat;transition:transform .15s}
details.linha-rec[open]>summary::before{transform:rotate(90deg)}
details.linha-rec>summary:hover{color:var(--ink)}
details.linha-rec>summary b{color:var(--ink);font-weight:600}
/* "1 bicho:" + o chip do slot de alvo único andam juntos quando a linha quebra */
.um-bicho{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* boneco de equipamento (2026-10-29, pedido do dono; /otimizar/, /personagem/ e /charms/): com item, o nome não aparece embaixo do ícone. O campo de texto fica
   invisível sobre a casa inteira (clicar nela abre a busca de item) e o nome vai no hover (title do campo). Ao focar, o campo volta embaixo para digitar. */
.equip-slot.has-icon input:not(:focus){position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;z-index:1}
.equip-slot.has-icon .equip-slot-remove{z-index:2}
.equip-slot.has-icon .equip-slot-icon{margin-top:0}