/* Palette aligned to the SulphurWorks brand mark: near-black ground, lime
   flame accent. Deliberately a single dark theme, not a light/dark pair --
   the brand mark doesn't have a light-mode reading, so this site always
   renders dark regardless of system preference. --gold/--epic/--green names
   kept as-is (large surface area of existing selectors reference them);
   only the values moved to the new palette (previously a violet/purple
   "epic item" theme -- see git history for the old values). */
:root {
  --bg: #111110;
  --surface: #1b1b19;
  --surface-soft: #242320;
  --ink: #f2f0e8;
  --ink-soft: #a8a59c;
  --ink-faint: #6f6c63;
  --line: #2e2e2b;
  --gold: #ccf000;
  --gold-strong: #e5ff00;
  --gold-wash: #273a00;
  --epic: #ccf000;
  --epic-wash: rgba(204, 240, 0, 0.12);
  --green: #57e6a0;
  --green-wash: #123527;
  --bar-track: #242320;
  /* Real WoW item-quality colors -- semantic, not brand accent, so these
     stay put regardless of what --epic/--gold mean for site chrome. */
  --item-epic: #a335ee;
  --bad: #ff6b6b;
  --bad-wash: rgba(255, 107, 107, 0.14);
  --font-display: Iowan Old Style, Palatino Linotype, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--epic); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* Top nav */
nav.topnav {
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}

nav.topnav .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

nav.topnav .brand {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

nav.topnav .brand em {
  font-style: italic;
  color: var(--gold-strong);
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
  box-shadow: 0 0 0 1px var(--line), 0 0 14px -2px var(--gold);
}

nav.topnav .links {
  display: flex;
  gap: 22px;
  font-size: 13.5px;
  font-weight: 600;
}

nav.topnav .links a {
  color: var(--ink-soft);
}

nav.topnav .links a.active,
nav.topnav .links a:hover {
  color: var(--ink);
}

/* Headers */
header.page-head {
  padding: 8px 0 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}

.hero-head {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.hero-mark {
  width: 116px;
  height: 116px;
  border-radius: 18px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--line), 0 0 48px -10px var(--gold), 0 0 90px -20px var(--epic);
}

@media (max-width: 560px) {
  .hero-head { flex-direction: column; }
  .hero-mark { width: 84px; height: 84px; }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 8px;
}

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.05;
  margin: 0 0 10px;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

h1 em {
  font-style: italic;
  color: var(--gold-strong);
  text-shadow: 0 0 24px color-mix(in srgb, var(--gold) 55%, transparent);
}

.dek {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

.meta-row b { color: var(--ink-soft); font-weight: 600; }

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.pill-link:hover { border-color: var(--gold); text-decoration: none; }

/* Sections */
section.block {
  margin-bottom: 48px;
}

section.block h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 6px;
}

section.block .sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 18px;
  line-height: 1.6;
}

/* Landing project cards */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-card .tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--epic);
  background: var(--epic-wash);
  border-radius: 4px;
  padding: 3px 8px;
  width: fit-content;
}

.project-card .tag.status-planned {
  color: var(--ink-faint);
  background: var(--surface-soft);
}

.project-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.project-card p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.project-card .cta {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.project-card .cta::after {
  content: " \2192";
}

/* Command table */
.cmd-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
}

table.cmd-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

/* Tables whose columns are all short (names/chips/one-line code), not
   flowing paragraph text, shouldn't be force-stretched to the panel's full
   width — that leaves left-aligned short content stranded with a big dead
   gap before the next column. Let these shrink to their real content width
   and center, same as they already look correct on a narrow phone screen.
   Tables with genuine paragraph-length descriptions (Commands, etc.) are
   unaffected: their natural content width already meets or exceeds the
   container, so they still fill it exactly as before. */
table.cmd-table:not(.cmd-table--tokens):not(.cmd-table--bosses) {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

/* Boss reference: fill the box like every other table on this site instead
   of shrinking to content width — weighted fixed columns keep short cells
   (boss names, alias chips) from stranding dead space the way plain
   auto-layout did before. */
table.cmd-table--bosses {
  table-layout: fixed;
}
table.cmd-table--bosses th:nth-child(1),
table.cmd-table--bosses td:nth-child(1) {
  width: 6%;
}
table.cmd-table--bosses th:nth-child(2),
table.cmd-table--bosses td:nth-child(2) {
  width: 28%;
}
table.cmd-table--bosses th:nth-child(3),
table.cmd-table--bosses td:nth-child(3) {
  width: 30%;
}
table.cmd-table--bosses th:nth-child(4),
table.cmd-table--bosses td:nth-child(4) {
  width: 36%;
}
table.cmd-table--bosses th,
table.cmd-table--bosses td {
  white-space: normal;
  overflow-wrap: anywhere;
}

table.cmd-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  white-space: nowrap;
}

table.cmd-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--surface-soft);
  font-size: 13.5px;
  vertical-align: top;
}

table.cmd-table tr:last-child td { border-bottom: none; }
table.cmd-table tr:hover td { background: var(--surface-soft); }

code, .code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.5px 6px;
  color: var(--gold-strong);
  white-space: nowrap;
}

table.cmd-table code { display: inline-block; margin: 1px 0; }

/* Tier-tokens table: long class-restricted item names must wrap instead of
   forcing horizontal scroll on the shared .cmd-table-wrap. */
table.cmd-table--tokens {
  table-layout: fixed;
}
table.cmd-table--tokens th,
table.cmd-table--tokens td {
  width: 25%;
  white-space: normal;
  overflow-wrap: anywhere;
}
table.cmd-table--tokens code {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Any .cmd-table can be forced wider than its container by a long nowrap
   <code> run or an all-caps nowrap header — never let that cause horizontal
   scroll, wrap everything below tablet width instead. */
@media (max-width: 700px) {
  table.cmd-table th,
  table.cmd-table td {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Scoped to tokens/bosses only: those tables have fixed percentage-width
     columns, so allowing this wrap can't collapse the column any further.
     Plain shrink-to-fit tables (Commands, etc.) must NOT get this — combined
     with their auto width, overflow-wrap:anywhere lets the browser treat a
     short one-line command's minimum viable width as a single character,
     so the whole column collapses down and the command wraps vertically
     instead of staying on one line. */
  table.cmd-table--tokens code,
  table.cmd-table--bosses code {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* overflow-wrap inherits from the parent td (set above) even though the
     direct rule on code was removed for plain tables — reset it explicitly
     or the collapse still happens. Scoped to .cmd-code (explicitly marked in
     the HTML on Command-column codes) rather than a structural selector like
     :only-child — :only-child only counts ELEMENT siblings, so it also
     matched an inline example like "e.g. !bistest kardris' scepter" embedded
     in a description paragraph (its siblings are plain text nodes, not
     elements). */
  table.cmd-table .cmd-code {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }
  /* Inline code embedded inside a description (the base `code{white-space:
     nowrap}` global default) is the actual cause of the sidescroll: an
     example like "!bistest kardris' scepter" is too wide to fit in the
     description column on a phone. Let inline examples wrap — only
     .cmd-code (the standalone Command-column code) stays on one line. */
  table.cmd-table code:not(.cmd-code) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  table.cmd-table--tokens th,
  table.cmd-table--tokens td {
    padding: 8px 8px;
    font-size: 12px;
    text-align: center;
  }
  table.cmd-table--tokens code {
    font-size: 11px;
  }
}

.boss-order {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  width: 22px;
}

.alias-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--epic);
  margin: 2px 3px 2px 0;
}

/* Callout box */
.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 20px 0;
}

.callout .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--gold-wash);
}

.callout.warn .dot { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-wash); }

.callout h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
}

.callout > div:last-child {
  min-width: 0;
}

.callout code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.callout p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* Slot cards (BiS gear) */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tabs input,
input[name^="gearbracket"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.tabs label {
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.tabs input:checked + label {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.gearpanel { display: none; }
#g-10n:checked ~ .gearpanels #gp-10n,
#g-10h:checked ~ .gearpanels #gp-10h {
  display: block;
}

.spec-select {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 200px;
  cursor: pointer;
}

.select-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.select-row .spec-select {
  margin-bottom: 0;
}

.select-row .source-tabs {
  margin-bottom: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.slot-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px 12px;
}

.slot-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.item-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--surface-soft);
  font-size: 13px;
}

.item-row:first-of-type { border-top: none; padding-top: 0; }

.item-row .rank {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  width: 12px;
  flex-shrink: 0;
}

.item-row .item-name { color: var(--item-epic); font-weight: 600; }

.item-row .item-name a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

.item-row .item-name a:hover { text-decoration: none; }

.bis-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold-strong);
  background: var(--gold-wash);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 5px;
}

/* Import panel */
.import-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
}

.import-steps {
  margin: 0 0 18px;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-soft);
}

.import-steps li::marker {
  color: var(--gold);
  font-family: var(--font-mono);
  font-weight: 700;
}

kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.5px 6px;
  color: var(--ink);
}

.import-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.import-head .import-title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}

.import-head .import-title b {
  color: var(--ink);
  font-weight: 600;
}

.copy-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  border-radius: 7px;
  padding: 8px 16px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.copy-btn:hover { opacity: 0.88; }

.copy-btn.copied {
  background: var(--green);
  border-color: var(--green);
  color: var(--surface);
}

.import-string {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  max-height: 160px;
  overflow-y: auto;
  word-break: break-all;
  white-space: pre-wrap;
}

footer.sitefoot {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.7;
}

.sitefoot .footer-links {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.sitefoot .footer-links a {
  color: var(--ink-soft);
}

.sitefoot .footer-links a:hover { color: var(--gold); }

/* Shared "doc page" styles: reference.html, changelog.html */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.ref-link {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink);
}

.ref-link:hover { border-color: var(--gold); text-decoration: none; }

.ref-link.disabled { opacity: 0.5; pointer-events: none; }

.ref-link .ref-kind {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ref-link .ref-name { font-weight: 600; font-size: 15px; }
.ref-link .ref-url { font-size: 12px; color: var(--ink-soft); word-break: break-all; }

.changelog-entry {
  border-left: 2px solid var(--line);
  padding-left: 20px;
  margin-bottom: 36px;
  position: relative;
}

.changelog-entry::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.changelog-date {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}

.changelog-entry ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.65;
}

.changelog-entry li { margin-bottom: 7px; }
.changelog-entry li strong { color: var(--ink); }

@media (max-width: 560px) {
  h1 { font-size: 30px; }
  nav.topnav .links { gap: 14px; }
}
#g-10n-affliction-warlock:checked ~ .gearpanels-affliction-warlock #gp-10n-affliction-warlock,
#g-10h-affliction-warlock:checked ~ .gearpanels-affliction-warlock #gp-10h-affliction-warlock { display: block; }
#g-10n-arcane-mage:checked ~ .gearpanels-arcane-mage #gp-10n-arcane-mage,
#g-10h-arcane-mage:checked ~ .gearpanels-arcane-mage #gp-10h-arcane-mage { display: block; }
#g-10n-arms-warrior:checked ~ .gearpanels-arms-warrior #gp-10n-arms-warrior,
#g-10h-arms-warrior:checked ~ .gearpanels-arms-warrior #gp-10h-arms-warrior { display: block; }
#g-10n-assassination-rogue:checked ~ .gearpanels-assassination-rogue #gp-10n-assassination-rogue,
#g-10h-assassination-rogue:checked ~ .gearpanels-assassination-rogue #gp-10h-assassination-rogue { display: block; }
#g-10n-balance-druid:checked ~ .gearpanels-balance-druid #gp-10n-balance-druid,
#g-10h-balance-druid:checked ~ .gearpanels-balance-druid #gp-10h-balance-druid { display: block; }
#g-10n-beast-mastery-hunter:checked ~ .gearpanels-beast-mastery-hunter #gp-10n-beast-mastery-hunter,
#g-10h-beast-mastery-hunter:checked ~ .gearpanels-beast-mastery-hunter #gp-10h-beast-mastery-hunter { display: block; }
#g-10n-blood-death-knight:checked ~ .gearpanels-blood-death-knight #gp-10n-blood-death-knight,
#g-10h-blood-death-knight:checked ~ .gearpanels-blood-death-knight #gp-10h-blood-death-knight { display: block; }
#g-10n-brewmaster-monk:checked ~ .gearpanels-brewmaster-monk #gp-10n-brewmaster-monk,
#g-10h-brewmaster-monk:checked ~ .gearpanels-brewmaster-monk #gp-10h-brewmaster-monk { display: block; }
#g-10n-combat-rogue:checked ~ .gearpanels-combat-rogue #gp-10n-combat-rogue,
#g-10h-combat-rogue:checked ~ .gearpanels-combat-rogue #gp-10h-combat-rogue { display: block; }
#g-10n-demonology-warlock:checked ~ .gearpanels-demonology-warlock #gp-10n-demonology-warlock,
#g-10h-demonology-warlock:checked ~ .gearpanels-demonology-warlock #gp-10h-demonology-warlock { display: block; }
#g-10n-destruction-warlock:checked ~ .gearpanels-destruction-warlock #gp-10n-destruction-warlock,
#g-10h-destruction-warlock:checked ~ .gearpanels-destruction-warlock #gp-10h-destruction-warlock { display: block; }
#g-10n-discipline-priest:checked ~ .gearpanels-discipline-priest #gp-10n-discipline-priest,
#g-10h-discipline-priest:checked ~ .gearpanels-discipline-priest #gp-10h-discipline-priest { display: block; }
#g-10n-elemental-shaman:checked ~ .gearpanels-elemental-shaman #gp-10n-elemental-shaman,
#g-10h-elemental-shaman:checked ~ .gearpanels-elemental-shaman #gp-10h-elemental-shaman { display: block; }
#g-10n-enhancement-shaman:checked ~ .gearpanels-enhancement-shaman #gp-10n-enhancement-shaman,
#g-10h-enhancement-shaman:checked ~ .gearpanels-enhancement-shaman #gp-10h-enhancement-shaman { display: block; }
#g-10n-feral-druid:checked ~ .gearpanels-feral-druid #gp-10n-feral-druid,
#g-10h-feral-druid:checked ~ .gearpanels-feral-druid #gp-10h-feral-druid { display: block; }
#g-10n-fire-mage:checked ~ .gearpanels-fire-mage #gp-10n-fire-mage,
#g-10h-fire-mage:checked ~ .gearpanels-fire-mage #gp-10h-fire-mage { display: block; }
#g-10n-frost-death-knight:checked ~ .gearpanels-frost-death-knight #gp-10n-frost-death-knight,
#g-10h-frost-death-knight:checked ~ .gearpanels-frost-death-knight #gp-10h-frost-death-knight { display: block; }
#g-10n-frost-mage:checked ~ .gearpanels-frost-mage #gp-10n-frost-mage,
#g-10h-frost-mage:checked ~ .gearpanels-frost-mage #gp-10h-frost-mage { display: block; }
#g-10n-fury-warrior:checked ~ .gearpanels-fury-warrior #gp-10n-fury-warrior,
#g-10h-fury-warrior:checked ~ .gearpanels-fury-warrior #gp-10h-fury-warrior { display: block; }
#g-10n-guardian-druid:checked ~ .gearpanels-guardian-druid #gp-10n-guardian-druid,
#g-10h-guardian-druid:checked ~ .gearpanels-guardian-druid #gp-10h-guardian-druid { display: block; }
#g-10n-holy-paladin:checked ~ .gearpanels-holy-paladin #gp-10n-holy-paladin,
#g-10h-holy-paladin:checked ~ .gearpanels-holy-paladin #gp-10h-holy-paladin { display: block; }
#g-10n-holy-priest:checked ~ .gearpanels-holy-priest #gp-10n-holy-priest,
#g-10h-holy-priest:checked ~ .gearpanels-holy-priest #gp-10h-holy-priest { display: block; }
#g-10n-marksmanship-hunter:checked ~ .gearpanels-marksmanship-hunter #gp-10n-marksmanship-hunter,
#g-10h-marksmanship-hunter:checked ~ .gearpanels-marksmanship-hunter #gp-10h-marksmanship-hunter { display: block; }
#g-10n-mistweaver-monk:checked ~ .gearpanels-mistweaver-monk #gp-10n-mistweaver-monk,
#g-10h-mistweaver-monk:checked ~ .gearpanels-mistweaver-monk #gp-10h-mistweaver-monk { display: block; }
#g-10n-protection-paladin:checked ~ .gearpanels-protection-paladin #gp-10n-protection-paladin,
#g-10h-protection-paladin:checked ~ .gearpanels-protection-paladin #gp-10h-protection-paladin { display: block; }
#g-10n-protection-warrior:checked ~ .gearpanels-protection-warrior #gp-10n-protection-warrior,
#g-10h-protection-warrior:checked ~ .gearpanels-protection-warrior #gp-10h-protection-warrior { display: block; }
#g-10n-restoration-druid:checked ~ .gearpanels-restoration-druid #gp-10n-restoration-druid,
#g-10h-restoration-druid:checked ~ .gearpanels-restoration-druid #gp-10h-restoration-druid { display: block; }
#g-10n-restoration-shaman:checked ~ .gearpanels-restoration-shaman #gp-10n-restoration-shaman,
#g-10h-restoration-shaman:checked ~ .gearpanels-restoration-shaman #gp-10h-restoration-shaman { display: block; }
#g-10n-retribution-paladin:checked ~ .gearpanels-retribution-paladin #gp-10n-retribution-paladin,
#g-10h-retribution-paladin:checked ~ .gearpanels-retribution-paladin #gp-10h-retribution-paladin { display: block; }
#g-10n-shadow-priest:checked ~ .gearpanels-shadow-priest #gp-10n-shadow-priest,
#g-10h-shadow-priest:checked ~ .gearpanels-shadow-priest #gp-10h-shadow-priest { display: block; }
#g-10n-subtlety-rogue:checked ~ .gearpanels-subtlety-rogue #gp-10n-subtlety-rogue,
#g-10h-subtlety-rogue:checked ~ .gearpanels-subtlety-rogue #gp-10h-subtlety-rogue { display: block; }
#g-10n-survival-hunter:checked ~ .gearpanels-survival-hunter #gp-10n-survival-hunter,
#g-10h-survival-hunter:checked ~ .gearpanels-survival-hunter #gp-10h-survival-hunter { display: block; }
#g-10n-unholy-death-knight:checked ~ .gearpanels-unholy-death-knight #gp-10n-unholy-death-knight,
#g-10h-unholy-death-knight:checked ~ .gearpanels-unholy-death-knight #gp-10h-unholy-death-knight { display: block; }
#g-10n-windwalker-monk:checked ~ .gearpanels-windwalker-monk #gp-10n-windwalker-monk,
#g-10h-windwalker-monk:checked ~ .gearpanels-windwalker-monk #gp-10h-windwalker-monk { display: block; }

/* Wowhead 10N/10H tab reveal rules (matches Archon gearbracket pattern) */
#g-wh-10n-affliction-warlock:checked ~ .gearpanels-wh-affliction-warlock #gp-wh-10n-affliction-warlock,
#g-wh-10h-affliction-warlock:checked ~ .gearpanels-wh-affliction-warlock #gp-wh-10h-affliction-warlock { display: block; }
#g-wh-10n-arcane-mage:checked ~ .gearpanels-wh-arcane-mage #gp-wh-10n-arcane-mage,
#g-wh-10h-arcane-mage:checked ~ .gearpanels-wh-arcane-mage #gp-wh-10h-arcane-mage { display: block; }
#g-wh-10n-arms-warrior:checked ~ .gearpanels-wh-arms-warrior #gp-wh-10n-arms-warrior,
#g-wh-10h-arms-warrior:checked ~ .gearpanels-wh-arms-warrior #gp-wh-10h-arms-warrior { display: block; }
#g-wh-10n-assassination-rogue:checked ~ .gearpanels-wh-assassination-rogue #gp-wh-10n-assassination-rogue,
#g-wh-10h-assassination-rogue:checked ~ .gearpanels-wh-assassination-rogue #gp-wh-10h-assassination-rogue { display: block; }
#g-wh-10n-balance-druid:checked ~ .gearpanels-wh-balance-druid #gp-wh-10n-balance-druid,
#g-wh-10h-balance-druid:checked ~ .gearpanels-wh-balance-druid #gp-wh-10h-balance-druid { display: block; }
#g-wh-10n-beast-mastery-hunter:checked ~ .gearpanels-wh-beast-mastery-hunter #gp-wh-10n-beast-mastery-hunter,
#g-wh-10h-beast-mastery-hunter:checked ~ .gearpanels-wh-beast-mastery-hunter #gp-wh-10h-beast-mastery-hunter { display: block; }
#g-wh-10n-blood-death-knight:checked ~ .gearpanels-wh-blood-death-knight #gp-wh-10n-blood-death-knight,
#g-wh-10h-blood-death-knight:checked ~ .gearpanels-wh-blood-death-knight #gp-wh-10h-blood-death-knight { display: block; }
#g-wh-10n-brewmaster-monk:checked ~ .gearpanels-wh-brewmaster-monk #gp-wh-10n-brewmaster-monk,
#g-wh-10h-brewmaster-monk:checked ~ .gearpanels-wh-brewmaster-monk #gp-wh-10h-brewmaster-monk { display: block; }
#g-wh-10n-combat-rogue:checked ~ .gearpanels-wh-combat-rogue #gp-wh-10n-combat-rogue,
#g-wh-10h-combat-rogue:checked ~ .gearpanels-wh-combat-rogue #gp-wh-10h-combat-rogue { display: block; }
#g-wh-10n-demonology-warlock:checked ~ .gearpanels-wh-demonology-warlock #gp-wh-10n-demonology-warlock,
#g-wh-10h-demonology-warlock:checked ~ .gearpanels-wh-demonology-warlock #gp-wh-10h-demonology-warlock { display: block; }
#g-wh-10n-destruction-warlock:checked ~ .gearpanels-wh-destruction-warlock #gp-wh-10n-destruction-warlock,
#g-wh-10h-destruction-warlock:checked ~ .gearpanels-wh-destruction-warlock #gp-wh-10h-destruction-warlock { display: block; }
#g-wh-10n-discipline-priest:checked ~ .gearpanels-wh-discipline-priest #gp-wh-10n-discipline-priest,
#g-wh-10h-discipline-priest:checked ~ .gearpanels-wh-discipline-priest #gp-wh-10h-discipline-priest { display: block; }
#g-wh-10n-elemental-shaman:checked ~ .gearpanels-wh-elemental-shaman #gp-wh-10n-elemental-shaman,
#g-wh-10h-elemental-shaman:checked ~ .gearpanels-wh-elemental-shaman #gp-wh-10h-elemental-shaman { display: block; }
#g-wh-10n-enhancement-shaman:checked ~ .gearpanels-wh-enhancement-shaman #gp-wh-10n-enhancement-shaman,
#g-wh-10h-enhancement-shaman:checked ~ .gearpanels-wh-enhancement-shaman #gp-wh-10h-enhancement-shaman { display: block; }
#g-wh-10n-feral-druid:checked ~ .gearpanels-wh-feral-druid #gp-wh-10n-feral-druid,
#g-wh-10h-feral-druid:checked ~ .gearpanels-wh-feral-druid #gp-wh-10h-feral-druid { display: block; }
#g-wh-10n-fire-mage:checked ~ .gearpanels-wh-fire-mage #gp-wh-10n-fire-mage,
#g-wh-10h-fire-mage:checked ~ .gearpanels-wh-fire-mage #gp-wh-10h-fire-mage { display: block; }
#g-wh-10n-frost-death-knight:checked ~ .gearpanels-wh-frost-death-knight #gp-wh-10n-frost-death-knight,
#g-wh-10h-frost-death-knight:checked ~ .gearpanels-wh-frost-death-knight #gp-wh-10h-frost-death-knight { display: block; }
#g-wh-10n-frost-mage:checked ~ .gearpanels-wh-frost-mage #gp-wh-10n-frost-mage,
#g-wh-10h-frost-mage:checked ~ .gearpanels-wh-frost-mage #gp-wh-10h-frost-mage { display: block; }
#g-wh-10n-fury-warrior:checked ~ .gearpanels-wh-fury-warrior #gp-wh-10n-fury-warrior,
#g-wh-10h-fury-warrior:checked ~ .gearpanels-wh-fury-warrior #gp-wh-10h-fury-warrior { display: block; }
#g-wh-10n-guardian-druid:checked ~ .gearpanels-wh-guardian-druid #gp-wh-10n-guardian-druid,
#g-wh-10h-guardian-druid:checked ~ .gearpanels-wh-guardian-druid #gp-wh-10h-guardian-druid { display: block; }
#g-wh-10n-holy-paladin:checked ~ .gearpanels-wh-holy-paladin #gp-wh-10n-holy-paladin,
#g-wh-10h-holy-paladin:checked ~ .gearpanels-wh-holy-paladin #gp-wh-10h-holy-paladin { display: block; }
#g-wh-10n-holy-priest:checked ~ .gearpanels-wh-holy-priest #gp-wh-10n-holy-priest,
#g-wh-10h-holy-priest:checked ~ .gearpanels-wh-holy-priest #gp-wh-10h-holy-priest { display: block; }
#g-wh-10n-marksmanship-hunter:checked ~ .gearpanels-wh-marksmanship-hunter #gp-wh-10n-marksmanship-hunter,
#g-wh-10h-marksmanship-hunter:checked ~ .gearpanels-wh-marksmanship-hunter #gp-wh-10h-marksmanship-hunter { display: block; }
#g-wh-10n-mistweaver-monk:checked ~ .gearpanels-wh-mistweaver-monk #gp-wh-10n-mistweaver-monk,
#g-wh-10h-mistweaver-monk:checked ~ .gearpanels-wh-mistweaver-monk #gp-wh-10h-mistweaver-monk { display: block; }
#g-wh-10n-protection-paladin:checked ~ .gearpanels-wh-protection-paladin #gp-wh-10n-protection-paladin,
#g-wh-10h-protection-paladin:checked ~ .gearpanels-wh-protection-paladin #gp-wh-10h-protection-paladin { display: block; }
#g-wh-10n-protection-warrior:checked ~ .gearpanels-wh-protection-warrior #gp-wh-10n-protection-warrior,
#g-wh-10h-protection-warrior:checked ~ .gearpanels-wh-protection-warrior #gp-wh-10h-protection-warrior { display: block; }
#g-wh-10n-restoration-druid:checked ~ .gearpanels-wh-restoration-druid #gp-wh-10n-restoration-druid,
#g-wh-10h-restoration-druid:checked ~ .gearpanels-wh-restoration-druid #gp-wh-10h-restoration-druid { display: block; }
#g-wh-10n-restoration-shaman:checked ~ .gearpanels-wh-restoration-shaman #gp-wh-10n-restoration-shaman,
#g-wh-10h-restoration-shaman:checked ~ .gearpanels-wh-restoration-shaman #gp-wh-10h-restoration-shaman { display: block; }
#g-wh-10n-retribution-paladin:checked ~ .gearpanels-wh-retribution-paladin #gp-wh-10n-retribution-paladin,
#g-wh-10h-retribution-paladin:checked ~ .gearpanels-wh-retribution-paladin #gp-wh-10h-retribution-paladin { display: block; }
#g-wh-10n-shadow-priest:checked ~ .gearpanels-wh-shadow-priest #gp-wh-10n-shadow-priest,
#g-wh-10h-shadow-priest:checked ~ .gearpanels-wh-shadow-priest #gp-wh-10h-shadow-priest { display: block; }
#g-wh-10n-subtlety-rogue:checked ~ .gearpanels-wh-subtlety-rogue #gp-wh-10n-subtlety-rogue,
#g-wh-10h-subtlety-rogue:checked ~ .gearpanels-wh-subtlety-rogue #gp-wh-10h-subtlety-rogue { display: block; }
#g-wh-10n-survival-hunter:checked ~ .gearpanels-wh-survival-hunter #gp-wh-10n-survival-hunter,
#g-wh-10h-survival-hunter:checked ~ .gearpanels-wh-survival-hunter #gp-wh-10h-survival-hunter { display: block; }
#g-wh-10n-unholy-death-knight:checked ~ .gearpanels-wh-unholy-death-knight #gp-wh-10n-unholy-death-knight,
#g-wh-10h-unholy-death-knight:checked ~ .gearpanels-wh-unholy-death-knight #gp-wh-10h-unholy-death-knight { display: block; }
#g-wh-10n-windwalker-monk:checked ~ .gearpanels-wh-windwalker-monk #gp-wh-10n-windwalker-monk,
#g-wh-10h-windwalker-monk:checked ~ .gearpanels-wh-windwalker-monk #gp-wh-10h-windwalker-monk { display: block; }

/* 10N/10H gearbracket tab active-highlight (radio is a preceding sibling of .tabs, not a child, so the generic .tabs input:checked + label rule can't reach it) */
#g-10n-affliction-warlock:checked ~ .tabs label[for="g-10n-affliction-warlock"],
#g-10h-affliction-warlock:checked ~ .tabs label[for="g-10h-affliction-warlock"],
#g-wh-10n-affliction-warlock:checked ~ .tabs label[for="g-wh-10n-affliction-warlock"],
#g-wh-10h-affliction-warlock:checked ~ .tabs label[for="g-wh-10h-affliction-warlock"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-arcane-mage:checked ~ .tabs label[for="g-10n-arcane-mage"],
#g-10h-arcane-mage:checked ~ .tabs label[for="g-10h-arcane-mage"],
#g-wh-10n-arcane-mage:checked ~ .tabs label[for="g-wh-10n-arcane-mage"],
#g-wh-10h-arcane-mage:checked ~ .tabs label[for="g-wh-10h-arcane-mage"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-arms-warrior:checked ~ .tabs label[for="g-10n-arms-warrior"],
#g-10h-arms-warrior:checked ~ .tabs label[for="g-10h-arms-warrior"],
#g-wh-10n-arms-warrior:checked ~ .tabs label[for="g-wh-10n-arms-warrior"],
#g-wh-10h-arms-warrior:checked ~ .tabs label[for="g-wh-10h-arms-warrior"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-assassination-rogue:checked ~ .tabs label[for="g-10n-assassination-rogue"],
#g-10h-assassination-rogue:checked ~ .tabs label[for="g-10h-assassination-rogue"],
#g-wh-10n-assassination-rogue:checked ~ .tabs label[for="g-wh-10n-assassination-rogue"],
#g-wh-10h-assassination-rogue:checked ~ .tabs label[for="g-wh-10h-assassination-rogue"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-balance-druid:checked ~ .tabs label[for="g-10n-balance-druid"],
#g-10h-balance-druid:checked ~ .tabs label[for="g-10h-balance-druid"],
#g-wh-10n-balance-druid:checked ~ .tabs label[for="g-wh-10n-balance-druid"],
#g-wh-10h-balance-druid:checked ~ .tabs label[for="g-wh-10h-balance-druid"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-beast-mastery-hunter:checked ~ .tabs label[for="g-10n-beast-mastery-hunter"],
#g-10h-beast-mastery-hunter:checked ~ .tabs label[for="g-10h-beast-mastery-hunter"],
#g-wh-10n-beast-mastery-hunter:checked ~ .tabs label[for="g-wh-10n-beast-mastery-hunter"],
#g-wh-10h-beast-mastery-hunter:checked ~ .tabs label[for="g-wh-10h-beast-mastery-hunter"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-blood-death-knight:checked ~ .tabs label[for="g-10n-blood-death-knight"],
#g-10h-blood-death-knight:checked ~ .tabs label[for="g-10h-blood-death-knight"],
#g-wh-10n-blood-death-knight:checked ~ .tabs label[for="g-wh-10n-blood-death-knight"],
#g-wh-10h-blood-death-knight:checked ~ .tabs label[for="g-wh-10h-blood-death-knight"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-brewmaster-monk:checked ~ .tabs label[for="g-10n-brewmaster-monk"],
#g-10h-brewmaster-monk:checked ~ .tabs label[for="g-10h-brewmaster-monk"],
#g-wh-10n-brewmaster-monk:checked ~ .tabs label[for="g-wh-10n-brewmaster-monk"],
#g-wh-10h-brewmaster-monk:checked ~ .tabs label[for="g-wh-10h-brewmaster-monk"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-combat-rogue:checked ~ .tabs label[for="g-10n-combat-rogue"],
#g-10h-combat-rogue:checked ~ .tabs label[for="g-10h-combat-rogue"],
#g-wh-10n-combat-rogue:checked ~ .tabs label[for="g-wh-10n-combat-rogue"],
#g-wh-10h-combat-rogue:checked ~ .tabs label[for="g-wh-10h-combat-rogue"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-demonology-warlock:checked ~ .tabs label[for="g-10n-demonology-warlock"],
#g-10h-demonology-warlock:checked ~ .tabs label[for="g-10h-demonology-warlock"],
#g-wh-10n-demonology-warlock:checked ~ .tabs label[for="g-wh-10n-demonology-warlock"],
#g-wh-10h-demonology-warlock:checked ~ .tabs label[for="g-wh-10h-demonology-warlock"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-destruction-warlock:checked ~ .tabs label[for="g-10n-destruction-warlock"],
#g-10h-destruction-warlock:checked ~ .tabs label[for="g-10h-destruction-warlock"],
#g-wh-10n-destruction-warlock:checked ~ .tabs label[for="g-wh-10n-destruction-warlock"],
#g-wh-10h-destruction-warlock:checked ~ .tabs label[for="g-wh-10h-destruction-warlock"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-discipline-priest:checked ~ .tabs label[for="g-10n-discipline-priest"],
#g-10h-discipline-priest:checked ~ .tabs label[for="g-10h-discipline-priest"],
#g-wh-10n-discipline-priest:checked ~ .tabs label[for="g-wh-10n-discipline-priest"],
#g-wh-10h-discipline-priest:checked ~ .tabs label[for="g-wh-10h-discipline-priest"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-elemental-shaman:checked ~ .tabs label[for="g-10n-elemental-shaman"],
#g-10h-elemental-shaman:checked ~ .tabs label[for="g-10h-elemental-shaman"],
#g-wh-10n-elemental-shaman:checked ~ .tabs label[for="g-wh-10n-elemental-shaman"],
#g-wh-10h-elemental-shaman:checked ~ .tabs label[for="g-wh-10h-elemental-shaman"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-enhancement-shaman:checked ~ .tabs label[for="g-10n-enhancement-shaman"],
#g-10h-enhancement-shaman:checked ~ .tabs label[for="g-10h-enhancement-shaman"],
#g-wh-10n-enhancement-shaman:checked ~ .tabs label[for="g-wh-10n-enhancement-shaman"],
#g-wh-10h-enhancement-shaman:checked ~ .tabs label[for="g-wh-10h-enhancement-shaman"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-feral-druid:checked ~ .tabs label[for="g-10n-feral-druid"],
#g-10h-feral-druid:checked ~ .tabs label[for="g-10h-feral-druid"],
#g-wh-10n-feral-druid:checked ~ .tabs label[for="g-wh-10n-feral-druid"],
#g-wh-10h-feral-druid:checked ~ .tabs label[for="g-wh-10h-feral-druid"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-fire-mage:checked ~ .tabs label[for="g-10n-fire-mage"],
#g-10h-fire-mage:checked ~ .tabs label[for="g-10h-fire-mage"],
#g-wh-10n-fire-mage:checked ~ .tabs label[for="g-wh-10n-fire-mage"],
#g-wh-10h-fire-mage:checked ~ .tabs label[for="g-wh-10h-fire-mage"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-frost-death-knight:checked ~ .tabs label[for="g-10n-frost-death-knight"],
#g-10h-frost-death-knight:checked ~ .tabs label[for="g-10h-frost-death-knight"],
#g-wh-10n-frost-death-knight:checked ~ .tabs label[for="g-wh-10n-frost-death-knight"],
#g-wh-10h-frost-death-knight:checked ~ .tabs label[for="g-wh-10h-frost-death-knight"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-frost-mage:checked ~ .tabs label[for="g-10n-frost-mage"],
#g-10h-frost-mage:checked ~ .tabs label[for="g-10h-frost-mage"],
#g-wh-10n-frost-mage:checked ~ .tabs label[for="g-wh-10n-frost-mage"],
#g-wh-10h-frost-mage:checked ~ .tabs label[for="g-wh-10h-frost-mage"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-fury-warrior:checked ~ .tabs label[for="g-10n-fury-warrior"],
#g-10h-fury-warrior:checked ~ .tabs label[for="g-10h-fury-warrior"],
#g-wh-10n-fury-warrior:checked ~ .tabs label[for="g-wh-10n-fury-warrior"],
#g-wh-10h-fury-warrior:checked ~ .tabs label[for="g-wh-10h-fury-warrior"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-guardian-druid:checked ~ .tabs label[for="g-10n-guardian-druid"],
#g-10h-guardian-druid:checked ~ .tabs label[for="g-10h-guardian-druid"],
#g-wh-10n-guardian-druid:checked ~ .tabs label[for="g-wh-10n-guardian-druid"],
#g-wh-10h-guardian-druid:checked ~ .tabs label[for="g-wh-10h-guardian-druid"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-holy-paladin:checked ~ .tabs label[for="g-10n-holy-paladin"],
#g-10h-holy-paladin:checked ~ .tabs label[for="g-10h-holy-paladin"],
#g-wh-10n-holy-paladin:checked ~ .tabs label[for="g-wh-10n-holy-paladin"],
#g-wh-10h-holy-paladin:checked ~ .tabs label[for="g-wh-10h-holy-paladin"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-holy-priest:checked ~ .tabs label[for="g-10n-holy-priest"],
#g-10h-holy-priest:checked ~ .tabs label[for="g-10h-holy-priest"],
#g-wh-10n-holy-priest:checked ~ .tabs label[for="g-wh-10n-holy-priest"],
#g-wh-10h-holy-priest:checked ~ .tabs label[for="g-wh-10h-holy-priest"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-marksmanship-hunter:checked ~ .tabs label[for="g-10n-marksmanship-hunter"],
#g-10h-marksmanship-hunter:checked ~ .tabs label[for="g-10h-marksmanship-hunter"],
#g-wh-10n-marksmanship-hunter:checked ~ .tabs label[for="g-wh-10n-marksmanship-hunter"],
#g-wh-10h-marksmanship-hunter:checked ~ .tabs label[for="g-wh-10h-marksmanship-hunter"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-mistweaver-monk:checked ~ .tabs label[for="g-10n-mistweaver-monk"],
#g-10h-mistweaver-monk:checked ~ .tabs label[for="g-10h-mistweaver-monk"],
#g-wh-10n-mistweaver-monk:checked ~ .tabs label[for="g-wh-10n-mistweaver-monk"],
#g-wh-10h-mistweaver-monk:checked ~ .tabs label[for="g-wh-10h-mistweaver-monk"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-protection-paladin:checked ~ .tabs label[for="g-10n-protection-paladin"],
#g-10h-protection-paladin:checked ~ .tabs label[for="g-10h-protection-paladin"],
#g-wh-10n-protection-paladin:checked ~ .tabs label[for="g-wh-10n-protection-paladin"],
#g-wh-10h-protection-paladin:checked ~ .tabs label[for="g-wh-10h-protection-paladin"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-protection-warrior:checked ~ .tabs label[for="g-10n-protection-warrior"],
#g-10h-protection-warrior:checked ~ .tabs label[for="g-10h-protection-warrior"],
#g-wh-10n-protection-warrior:checked ~ .tabs label[for="g-wh-10n-protection-warrior"],
#g-wh-10h-protection-warrior:checked ~ .tabs label[for="g-wh-10h-protection-warrior"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-restoration-druid:checked ~ .tabs label[for="g-10n-restoration-druid"],
#g-10h-restoration-druid:checked ~ .tabs label[for="g-10h-restoration-druid"],
#g-wh-10n-restoration-druid:checked ~ .tabs label[for="g-wh-10n-restoration-druid"],
#g-wh-10h-restoration-druid:checked ~ .tabs label[for="g-wh-10h-restoration-druid"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-restoration-shaman:checked ~ .tabs label[for="g-10n-restoration-shaman"],
#g-10h-restoration-shaman:checked ~ .tabs label[for="g-10h-restoration-shaman"],
#g-wh-10n-restoration-shaman:checked ~ .tabs label[for="g-wh-10n-restoration-shaman"],
#g-wh-10h-restoration-shaman:checked ~ .tabs label[for="g-wh-10h-restoration-shaman"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-retribution-paladin:checked ~ .tabs label[for="g-10n-retribution-paladin"],
#g-10h-retribution-paladin:checked ~ .tabs label[for="g-10h-retribution-paladin"],
#g-wh-10n-retribution-paladin:checked ~ .tabs label[for="g-wh-10n-retribution-paladin"],
#g-wh-10h-retribution-paladin:checked ~ .tabs label[for="g-wh-10h-retribution-paladin"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-shadow-priest:checked ~ .tabs label[for="g-10n-shadow-priest"],
#g-10h-shadow-priest:checked ~ .tabs label[for="g-10h-shadow-priest"],
#g-wh-10n-shadow-priest:checked ~ .tabs label[for="g-wh-10n-shadow-priest"],
#g-wh-10h-shadow-priest:checked ~ .tabs label[for="g-wh-10h-shadow-priest"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-subtlety-rogue:checked ~ .tabs label[for="g-10n-subtlety-rogue"],
#g-10h-subtlety-rogue:checked ~ .tabs label[for="g-10h-subtlety-rogue"],
#g-wh-10n-subtlety-rogue:checked ~ .tabs label[for="g-wh-10n-subtlety-rogue"],
#g-wh-10h-subtlety-rogue:checked ~ .tabs label[for="g-wh-10h-subtlety-rogue"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-survival-hunter:checked ~ .tabs label[for="g-10n-survival-hunter"],
#g-10h-survival-hunter:checked ~ .tabs label[for="g-10h-survival-hunter"],
#g-wh-10n-survival-hunter:checked ~ .tabs label[for="g-wh-10n-survival-hunter"],
#g-wh-10h-survival-hunter:checked ~ .tabs label[for="g-wh-10h-survival-hunter"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-unholy-death-knight:checked ~ .tabs label[for="g-10n-unholy-death-knight"],
#g-10h-unholy-death-knight:checked ~ .tabs label[for="g-10h-unholy-death-knight"],
#g-wh-10n-unholy-death-knight:checked ~ .tabs label[for="g-wh-10n-unholy-death-knight"],
#g-wh-10h-unholy-death-knight:checked ~ .tabs label[for="g-wh-10h-unholy-death-knight"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#g-10n-windwalker-monk:checked ~ .tabs label[for="g-10n-windwalker-monk"],
#g-10h-windwalker-monk:checked ~ .tabs label[for="g-10h-windwalker-monk"],
#g-wh-10n-windwalker-monk:checked ~ .tabs label[for="g-wh-10n-windwalker-monk"],
#g-wh-10h-windwalker-monk:checked ~ .tabs label[for="g-wh-10h-windwalker-monk"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }