/* Guias: o que é só desta página. Paleta, barra de topo e rodapé vêm do
   /css/base.css, carregado antes deste. */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
}
h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.2rem,3vw,1.8rem);
  letter-spacing:.03em;text-transform:uppercase;
  margin:.12em 0 .3em;
}
.sub{max-width:64ch;color:var(--muted);font-size:1.02rem;margin:0;}

.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:26px;padding-bottom:16px;border-bottom:1px solid var(--line);
}
.cats{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;}
.cats button{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.04em;
  background:var(--surface);color:var(--muted);
  border:1px solid var(--line);border-radius:20px;
  padding:6px 14px;cursor:pointer;
}
.cats button:hover{color:var(--text);border-color:var(--accent);--chanfro-line:var(--accent);}
.cats button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.cats button[aria-pressed="true"]{
  background:var(--action);border-color:var(--action);color:var(--action-ink);font-weight:700;
}
.tools{display:flex;gap:8px;flex:none;flex-wrap:wrap;}
#guide-search{
  font-family:var(--font-body);font-size:.85rem;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:5px;
  padding:8px 12px;min-width:190px;
}
#guide-search:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.tools button{
  font-family:var(--font-mono);font-size:.74rem;
  background:var(--surface);color:var(--muted);
  border:1px solid var(--line);border-radius:5px;
  padding:8px 12px;cursor:pointer;
}
.tools button:hover{color:var(--text);border-color:var(--accent);--chanfro-line:var(--accent);}
.tools button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

.guide-list{margin-top:20px;display:flex;flex-direction:column;gap:10px;}

details.guide{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  clip-path:polygon(0 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)));
  background-image:var(--corte-cima), var(--corte-baixo);
  background-size:var(--chanfro) var(--chanfro);
  background-position:top right, bottom left;
  background-repeat:no-repeat;
  background-origin:border-box;   /* como o clip-path; o padrao mede pela caixa interior e desalinha 1px */
}
details.guide[open]{border-color:var(--accent);--chanfro-line:var(--accent);}
details.guide summary{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;cursor:pointer;list-style:none;
}
details.guide summary::-webkit-details-marker{display:none;}
details.guide summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.chev{
  font-family:var(--font-mono);color:var(--accent);
  flex:none;transition:transform .15s ease;
}
details.guide[open] .chev{transform:rotate(90deg);}
.g-title{
  font-family:var(--font-display);font-size:1.02rem;
  letter-spacing:.02em;text-transform:uppercase;
  flex:1 1 auto;
}
.g-cat{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:20px;padding:3px 9px;
  white-space:nowrap;flex:none;
}
.badge{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--rust);
  border:1px solid var(--rust);border-radius:20px;padding:3px 9px;
  white-space:nowrap;flex:none;
}
.g-inner{padding:0 18px 18px;border-top:1px solid var(--line);}
.g-meta{
  font-family:var(--font-mono);font-size:.74rem;color:var(--muted);
  margin:14px 0 10px;
}
.g-body{font-size:.94rem;color:var(--muted);margin:0;}

.empty{
  display:none;
  margin-top:20px;padding:22px;
  border:1px dashed var(--line);border-radius:10px;
  color:var(--muted);font-size:.92rem;text-align:center;
}
.empty.show{display:block;}

footer{
  margin-top:44px;padding-top:16px;
  border-top:1px solid var(--line);
  font-size:.78rem;color:var(--muted);
}

details.guide h3{
  font-family:var(--font-display);
  font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text);margin:18px 0 6px;
}
.g-body ul{margin:8px 0 0;padding-left:20px;}
.g-body li{margin-bottom:5px;}
.g-body p{margin:0 0 10px;}
.g-body p:last-child{margin-bottom:0;}
.g-body figure{margin:14px 0 10px;}
.g-body figure img{
  display:block;width:100%;height:auto;max-width:900px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);
}
.g-body figure figcaption{
  margin-top:6px;font-size:.78rem;color:var(--muted);
}
.g-body figure.broken img{display:none;}
.g-body figure.broken figcaption::before{content:"⚠ ";color:var(--rust);}
.badge.untranslated{color:var(--accent);border-color:var(--accent);--chanfro-line:var(--accent);}
.status{
  margin-top:20px;padding:18px;text-align:center;
  color:var(--muted);font-size:.9rem;
  border:1px dashed var(--line);border-radius:10px;
}
.status.error{color:var(--rust);border-color:var(--rust);}

/* guild emblem beside the page title */
.hero-row{display:flex;align-items:center;gap:18px;}
.hero-row .hero-text{min-width:0;}
.hero-row h1{margin:2px 0 0;}
.guild-logo{
  width:72px;height:72px;flex:none;border-radius:50%;
  border:2px solid var(--accent);
  box-shadow:0 0 0 4px rgba(0,0,0,.30), 0 8px 20px rgba(0,0,0,.45);
}
@media(max-width:560px){ .hero-row{gap:13px;} .guild-logo{width:54px;height:54px;} }

/* flag icons for the language tabs — real SVGs, so they show on every OS
   (Windows has no emoji flags and would print "EN", "PT", ... instead) */
.flag{
  width:1.25em;height:.84em;flex:none;
  border-radius:2px;vertical-align:-.09em;margin-right:.45em;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
}

/* links do seletor de idioma (antes eram <button>) */
.langbar .lang{text-decoration:none;display:inline-block;line-height:normal;}