/* Knights of Stormwind: shared look for every page (top nav, colors, gauntlet cursor).
   Pages keep their own styles for everything else. */
:root {
  --kos-bg: #1e1e1e;
  --kos-bar: #161616;
  --kos-surface: #2a2a2a;
  --kos-line: #444;
  --kos-ink: #dcdcdc;
  --kos-muted: #9a9a9a;
  --kos-bright: #fff;
  --kos-link: #84d2ff;
  --kos-link-hover: #b0e0ff;
  --kos-font: Helvetica, Arial, sans-serif;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cdefs%3E%3ClinearGradient id=%22m%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22#e6edf3%22/%3E%3Cstop offset=%22.55%22 stop-color=%22#9aa8b5%22/%3E%3Cstop offset=%221%22 stop-color=%22#5d6b78%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke=%22#12171c%22 stroke-width=%221.3%22 stroke-linejoin=%22round%22 fill=%22url%28#m%29%22%3E%3Cpath d=%22M7.5 3.2 Q9.5 0.8 11.5 3.2 L11.5 13 L7.5 13 Z%22/%3E%3Cpath d=%22M11.5 10.5 Q13.25 8.6 15 10.5 L15 14 L11.5 14 Z%22/%3E%3Cpath d=%22M15 11.5 Q16.75 9.6 18.5 11.5 L18.5 14.5 L15 14.5 Z%22/%3E%3Cpath d=%22M18.5 12.8 Q20.2 11.2 21.8 12.8 L21.8 15.5 L18.5 15.5 Z%22/%3E%3Cpath d=%22M7.5 13 L21.8 13 L21.8 21 Q21 24.5 17.5 25 L10.5 25 Q7 23.5 6.5 20 L3.2 16.6 Q2.4 15 4.2 14.6 L7.5 16.8 Z%22/%3E%3Cpath d=%22M8.5 24.5 L19.5 24.5 L21 30.5 L7 30.5 Z%22/%3E%3C/g%3E%3Cg stroke=%22#12171c%22 stroke-width=%22.9%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M7.6 6.4 L11.4 6.4 M7.6 9.6 L11.4 9.6%22/%3E%3Cpath d=%22M8 18.2 Q14.5 19.6 21.5 18.2%22/%3E%3C/g%3E%3Cpath d=%22M7.7 26.6 L20.3 26.6 L20.7 28.2 L7.3 28.2 Z%22 fill=%22#84d2ff%22 stroke=%22#12171c%22 stroke-width=%22.7%22/%3E%3Cpath d=%22M8.6 3.6 Q9.5 2.4 10.4 3.6 L10.4 5.6%22 stroke=%22#ffffff%22 stroke-width=%22.9%22 fill=%22none%22 stroke-linecap=%22round%22 opacity=%22.85%22/%3E%3C/svg%3E") 9 1;
  color-scheme: dark;
}
html { cursor: var(--cursor), auto; }
a, button, summary, select, label { cursor: var(--cursor), pointer; }
input[type=search], input[type=text], input[type=password], textarea { cursor: text; }

/* ---- Top nav ---- */
.kos-nav { background: var(--kos-bar); border-bottom: 1px solid var(--kos-line); font: 15px/1.2 var(--kos-font); position: relative; z-index: 30; }
.kos-nav-in { max-width: 2200px; margin: 0 auto; padding-inline: clamp(10px, 1.2vw, 24px); display: flex; align-items: stretch; gap: 4px 18px; min-height: 48px; }
.kos-brand { display: flex; align-items: center; gap: 9px; color: var(--kos-bright); font-weight: bold; white-space: nowrap; text-decoration: none; padding-right: 6px; }
.kos-brand:hover { color: var(--kos-bright); text-decoration: none; }
.kos-brand img { width: 24px; height: 24px; display: block; }
.kos-tabs { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; min-width: 0; }
.kos-tools:not(:empty) ~ .kos-tabs, .kos-tabs:has(+ .kos-tools:not(:empty)) { flex: none; }
.kos-tabs::-webkit-scrollbar { display: none; }
.kos-tab { display: flex; align-items: center; padding: 0 14px; color: var(--kos-muted); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; border-top: 3px solid transparent; transition: color .12s, background .12s; }
.kos-tab:hover { color: var(--kos-bright); background: #222; text-decoration: none; }
.kos-tab[aria-current="page"] { color: var(--kos-bright); border-bottom-color: var(--kos-link); }
.kos-tab.minor { margin-left: auto; font-size: 13px; padding: 0 10px; }
/* Page tools follow the tabs directly, after a thin divider (no gap across the bar). */
.kos-tools { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 8px; flex: 0 1 auto; padding-left: 14px; margin-left: 4px;
  border-left: 1px solid var(--kos-line); align-self: center; min-height: 28px; }
.kos-tools:empty { display: none; }
.kos-tab:focus-visible, .kos-brand:focus-visible { outline: 2px solid var(--kos-link); outline-offset: -2px; }
/* Not enough width for tabs + tools on one line: tools get their own row in the bar. */
@media (max-width: 1180px) {
  .kos-nav-in { flex-wrap: wrap; }
  .kos-tools { flex-wrap: wrap; flex-basis: 100%; border-left: 0; margin: 0; padding: 4px 0 9px; border-top: 1px solid var(--kos-line); padding-top: 8px; }
}
@media (max-width: 640px) {
  .kos-nav-in { gap: 0 8px; }
  .kos-brand span { display: none; }       /* crest only on phones */
  .kos-tab { padding: 0 10px; font-size: 14px; }
  .kos-tab.minor { margin-left: 0; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .kos-tab { transition: none; } }