/* skin.css — forever.drunkensafari.com, 2026-10-17 redesign.
   Loaded after style.css. The layout (method.gg's: flat charcoal shell, bold condensed uppercase headings, accent bar
   on section headings, per-guide tab list) in the token.drunkensafari.com palette, which is Madmortagan's token addons:
   gold |cffffd700 · rising |cff00ff00 · falling |cffff4444 · peaked |cffff8800 · muted |cffaaaaaa · ToxiUI blue |cff1784d1.
   style.css stays the component library; this file re-points its tokens and restyles the shell. No external fonts
   (CSP font-src 'self'): the condensed face is a system one. */

:root{
  --void:#0d0f12;
  --void-2:#12161b;
  --panel:#161a20;
  --panel-2:#1d232c;
  --line:#2a313c;
  --line-soft:#20262f;
  --gold:#ffd700;
  --gold-bright:#ffe14a;
  --gold-dim:#8f7a12;
  --sky:#4ba3e6;           /* ToxiUI blue #1784d1, lifted to 6:1 for link text */
  --sky-dim:#1784d1;
  --arcane:#a98bff;
  --text:#e7e2cf;
  --text-dim:#b4b0a3;
  --text-faint:#8c8a82;
  --ok:#3ddc5a;
  --warn:#ff8800;
  --bad:#ff4444;
  --up:#00ff00;
  --down:#ff4444;
  --cond:"Bahnschrift SemiCondensed","Bahnschrift","Roboto Condensed","Arial Narrow","Segoe UI",system-ui,sans-serif;
  --serif:var(--cond);
  --radius:4px;
  --header-h:58px;
}

body{background:var(--void);color:var(--text)}
body::before,body::after{content:none;display:none}

/* ---------- header: method's flat bar, gold underline on the current section ---------- */
.topbar{background:#0a0c0f;border-bottom:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--gold) 0,var(--gold) 120px,transparent 120px)}
.sigil{width:32px;height:32px}
.brand-name{font-family:var(--cond);font-size:21px;font-weight:700;letter-spacing:.08em;background:none;
  -webkit-background-clip:border-box;background-clip:border-box;color:#fff;line-height:1}
.brand-sub{font-family:var(--cond);font-size:11px;letter-spacing:.2em;color:var(--gold);font-weight:600}
.navtop{font-family:var(--cond);font-size:14.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#d9d5c6;border-radius:0;border:0;border-bottom:2px solid transparent;height:58px;padding:0 12px}
.navsec:hover .navtop,.navsec:focus-within .navtop{color:#fff;background:#161a20;border-color:transparent}
.navsec.is-current .navtop{color:#fff;background:transparent;border-bottom-color:var(--gold)}
.js-menus .navtop{border-radius:0}
.navtog{border-radius:0}
.navpanel{background:#12161b;border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:0 0 4px 4px;margin-top:0}
.np-hub{font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--gold)}
.nl a:hover,.nl-classes a:hover{background:#1d232c;color:#fff}
.nl a[aria-current="page"],.nl-classes a[aria-current="page"]{color:#0d0f12;background:var(--gold)}
.navpill{border-radius:3px;border-color:var(--gold);color:var(--gold);font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.navpill:hover{background:var(--gold);color:#0d0f12;border-color:var(--gold)}
.navsearch input,.msf input,.bigsearch input{border-radius:3px;background:#161a20;border-color:var(--line)}
.mn-h a{font-family:var(--cond);text-transform:uppercase;font-weight:700;letter-spacing:.04em;color:var(--gold)}

/* ---------- type ---------- */
h1{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.02;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff;font-size:clamp(32px,5.6vw,56px)}
.kicker{color:var(--gold);font-family:var(--cond);font-weight:700;letter-spacing:.14em;font-size:13px}
.hero{border-bottom:1px solid var(--line);padding:40px 0 26px;margin-bottom:28px}
h2{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#fff;font-size:24px;
  background:linear-gradient(90deg,#161a20,rgba(22,26,32,0));border-left:4px solid var(--gold);padding:8px 14px;margin:48px 0 16px}
h2::after{content:none;display:none}
h2.vh{border:0;padding:0;background:none}
h2.sg-h{border:0;background:none;padding:0}
h3{font-family:var(--cond);font-weight:700;letter-spacing:.02em;font-size:19px;color:#fff}
.h3,.h4{font-family:inherit}
h4,.h4{color:var(--gold)}
a{color:var(--sky)}
a:hover{color:var(--gold)}
strong{color:#fff}
td strong{color:var(--gold-bright)}
code{background:rgba(23,132,209,.12);color:#8cc8f2;border-radius:3px}
mark{background:rgba(255,215,0,.22);color:#fff}

/* ---------- surfaces: flat, square-ish, method grey ---------- */
.panel{background:var(--panel);border-radius:var(--radius)}
.panel::before{content:none}
.stat{background:var(--panel);border-radius:var(--radius);border-top:2px solid var(--gold)}
.stat .num{font-family:var(--cond);font-weight:700;color:var(--gold);font-size:30px}
.call{border-radius:0 var(--radius) var(--radius) 0;background:rgba(255,215,0,.05)}
.call.red{background:rgba(255,68,68,.07)}
.call.warn{background:rgba(255,136,0,.07)}
.call.ok{background:rgba(61,220,90,.06)}
.call.sky{border-left-color:var(--sky-dim);background:rgba(23,132,209,.08)}
.call.sky .tag{color:var(--sky)}
.call .tag{font-family:var(--cond);letter-spacing:.1em}
.tw{border-radius:var(--radius);
  background:
    linear-gradient(to right,var(--panel) 42%,rgba(22,26,32,0)) left center/34px 100% no-repeat local,
    linear-gradient(to left,var(--panel) 42%,rgba(22,26,32,0)) right center/34px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.6),rgba(0,0,0,0)) left center/16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.6),rgba(0,0,0,0)) right center/16px 100% no-repeat scroll,
    var(--panel)}
th{background:var(--panel-2);color:#cfcab8;font-family:var(--cond);font-size:12.5px;letter-spacing:.08em}
tbody tr:hover{background:rgba(255,215,0,.035)}
tbody tr:nth-child(even){background:rgba(255,255,255,.012)}
.pill{border-radius:3px}
.src-a{color:#0d0f12;background:var(--gold)}
.src-b{color:var(--gold);background:rgba(255,215,0,.12);border-color:var(--gold-dim)}
.src-c{color:var(--warn);background:rgba(255,136,0,.12);border-color:rgba(255,136,0,.45)}
.p-gold{color:var(--gold);border-color:var(--gold-dim);background:rgba(255,215,0,.1)}
.p-new{color:var(--sky);border-color:rgba(75,163,230,.5);background:rgba(23,132,209,.12)}
a.hubcard,.seccard,.dates,.toc-m,a.sr{background:var(--panel);border-radius:var(--radius)}
a.hubcard{border-left:3px solid var(--line)}
a.hubcard:hover{border-color:var(--line);border-left-color:var(--gold);transform:none;background:#1a1f26}
a.hubcard h3,.seccard h3,.taskgrid a.task h3{font-family:var(--cond);text-transform:uppercase;color:#fff;letter-spacing:.02em}
a.hubcard .hc-k,.taskgrid a.task .hc-k{color:var(--gold)}
.seccard h3 a{color:#fff}
.toc a{border-radius:3px}
.cd .unit{background:var(--panel);border-radius:var(--radius);border-top:2px solid var(--gold)}
.cd .u-num{font-family:var(--cond);font-weight:700;color:#fff}
.cd-done{font-family:var(--cond);color:var(--gold)}
.tl::before{background:linear-gradient(180deg,var(--gold),var(--sky-dim),transparent)}
.verified{border-radius:3px;background:var(--panel)}
.pg{background:var(--panel);border-radius:var(--radius)}
.pg-t{color:#fff;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
a.pg:hover{border-color:var(--gold)}
.toc-d a.is-active{color:var(--gold);border-left-color:var(--gold)}
.toc-h{color:var(--gold)}
footer{background:#0a0c0f;border-top:2px solid var(--gold);margin-top:60px}
.fh a{color:var(--gold);font-family:var(--cond);font-size:13px;letter-spacing:.08em}

/* ---------- class colours: method's class grid ---------- */
.classgrid .cls{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:var(--radius)}
.classgrid .cls h3{font-family:var(--cond);text-transform:uppercase;font-size:22px;letter-spacing:.03em;color:var(--c)}
.cls{border-radius:var(--radius);background:var(--panel)}
.c-shaman{--c:#2f8ff0}

/* ---------- guide header + tabs (class and talent pages) ---------- */
.guidebar{display:flex;flex-wrap:wrap;align-items:stretch;gap:0 18px;margin:-12px 0 28px;
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--cls);border-radius:var(--radius)}
.guidetabs{display:flex;flex-wrap:wrap;align-items:stretch;flex:1 1 auto;min-width:0}
.gt-h{margin:0;padding:0 16px;display:flex;align-items:center;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cls);font-size:15px;border-right:1px solid var(--line)}
.guidetabs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.guidetabs li{margin:0}
.guidetabs a{display:flex;align-items:center;min-height:46px;padding:0 15px;font-family:var(--cond);font-weight:700;
  font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:#d9d5c6;text-decoration:none;border-bottom:2px solid transparent}
.guidetabs a:hover{color:#fff;background:#1d232c}
.guidetabs a[aria-current="page"]{color:#fff;border-bottom-color:var(--cls);background:#1d232c}
.guideclasses{display:flex;align-items:center;gap:5px;padding:8px 12px;flex-wrap:wrap}
.guideclasses .gc{width:20px;height:20px;border-radius:3px;background:var(--cls);opacity:.55;font-size:0;color:transparent;
  overflow:hidden;text-decoration:none;outline-offset:2px}
.guideclasses .gc:hover,.guideclasses .gc:focus-visible{opacity:1}
.guideclasses .gc[aria-current]{opacity:1;box-shadow:0 0 0 2px #0d0f12,0 0 0 3px var(--cls)}
.hero:has(+ .pagegrid) h1{color:#fff}
.pagebar ~ .hero h1{color:#fff}
@media (max-width:760px){
  .gt-h{width:100%;border-right:0;border-bottom:1px solid var(--line);min-height:40px}
  .guidetabs a{min-height:44px;padding:0 11px;font-size:13px}
  .guideclasses{width:100%;border-top:1px solid var(--line)}
}

/* ================================================================== Market (UMJ) */
.money{white-space:nowrap;font-variant-numeric:tabular-nums}
.money > span + span{margin-left:.35em}
.mg::after,.ms::after,.mc::after{display:inline-block;width:.62em;height:.62em;margin-left:.15em;border-radius:50%;content:"";
  vertical-align:.02em}
.mg{color:#fff}.mg::after{background:radial-gradient(circle at 35% 35%,#fff3a0,#ffd700 55%,#a88a00)}
.ms{color:#fff}.ms::after{background:radial-gradient(circle at 35% 35%,#fff,#c7c7cf 55%,#7b7b85)}
.mc{color:#fff}.mc::after{background:radial-gradient(circle at 35% 35%,#ffd2a8,#c8783a 55%,#7a4116)}
.na{color:var(--text-faint)}
.up{color:var(--up)}.down{color:var(--down)}
.q0{color:#9d9d9d!important}.q1{color:#fff!important}.q2{color:#1eff00!important}.q3{color:#0070dd!important}
.q4{color:#a335ee!important}.q5{color:#ff8000!important}
a.q3{color:#3d95ff!important}
td.under .money span{color:var(--up)}
td.over .money span{color:var(--down)}
.big.under .money span{color:var(--up)}.big.over .money span{color:var(--down)}
.big{font-size:19px;font-weight:600}
.note{color:var(--text-faint);font-size:12.5px}
.volwarn{color:var(--warn)}
.ct{font-family:var(--mono);font-size:12px;color:var(--text-faint);font-weight:400;letter-spacing:0;margin-left:6px}
table.mkt{font-size:13.5px;min-width:520px}
table.mkt td,table.mkt th{padding:8px 12px}
table.mkt td.r,table.mkt th.r{text-align:right}
table.mkt td{vertical-align:middle}
table.mkt a{text-decoration:none}
table.mkt a:hover{text-decoration:underline}
table.mkt th button{all:unset;cursor:pointer;display:inline-flex;gap:5px;align-items:center}
table.mkt th button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
table.mkt th[aria-sort="ascending"] button::after{content:"\25B2";font-size:9px;color:var(--gold)}
table.mkt th[aria-sort="descending"] button::after{content:"\25BC";font-size:9px;color:var(--gold)}
table.mkt tr.here td{background:rgba(255,215,0,.07)}

.subnav{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:-6px 0 0;background:var(--panel);
  border:1px solid var(--line);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0}
.subnav > a{padding:0 16px;min-height:44px;display:flex;align-items:center;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:14px;color:#d9d5c6;text-decoration:none;border-bottom:2px solid transparent}
.subnav > a:hover{color:#fff;background:#1d232c}
.subnav > a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold)}
.mksearch{position:relative;margin-left:auto;padding:6px 8px;flex:0 1 300px}
.mksearch input{width:100%;background:#0d0f12;border:1px solid var(--line);border-radius:3px;color:var(--text);
  padding:7px 10px;font:inherit;font-size:14px}
.mksearch input:focus{outline:none;border-color:var(--gold)}
.mksugg{position:absolute;right:8px;left:8px;top:100%;z-index:40;background:#12161b;border:1px solid var(--line);
  border-top:2px solid var(--gold);max-height:420px;overflow:auto;box-shadow:0 14px 30px rgba(0,0,0,.6)}
.mksugg a{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;text-decoration:none;border-bottom:1px solid var(--line-soft);font-size:14px}
.mksugg a:hover,.mksugg a.sel{background:#1d232c}
.mksugg p{margin:0;padding:10px}
.realmbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 16px;margin:0 0 26px;
  background:#12161b;border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);font-size:13px}
.rb-realm{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);font-size:15px;margin-right:6px}
.rb-k{color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.rb-v{color:var(--text)}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.catcard{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:var(--radius);padding:12px 14px}
.cc-h{margin:0 0 6px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff}
.catcard ul{list-style:none;margin:0;padding:0}
.catcard li{margin:0;display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line-soft);padding:5px 0;font-size:14px}
.catcard li a{text-decoration:none}

.mkbrowse{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;align-items:start}
.mkside{position:sticky;top:calc(var(--header-h) + 14px);max-height:calc(100vh - var(--header-h) - 28px);overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px 0}
.mkside ul{list-style:none;margin:0 0 6px;padding:0}
.mkside li{margin:0}
.mkside a{display:block;padding:5px 14px;font-size:13.5px;text-decoration:none;color:var(--text-dim);border-left:3px solid transparent}
.mkside a:hover{color:#fff;background:#1d232c}
.mkside a[aria-current]{color:#fff;border-left-color:var(--gold);background:#1d232c}
.side-h{margin:10px 0 2px;padding:0 14px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--gold)}
.mktools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 6px}
.mk-title{margin:0;flex:1 1 100%}
.chk{font-size:13.5px;color:var(--text-dim);display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.chk input{accent-color:var(--gold)}
#mk-filter{margin-left:auto;background:#0d0f12;border:1px solid var(--line);border-radius:3px;color:var(--text);padding:7px 10px;font:inherit;font-size:14px;min-width:220px}
#mk-filter:focus{outline:none;border-color:var(--gold)}
.btn{background:var(--gold);color:#0d0f12;border:0;border-radius:3px;padding:9px 18px;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.btn:hover{background:#ffe14a}
@media (max-width:860px){
  .mkbrowse{grid-template-columns:1fr}
  .mkside{position:static;max-height:none;display:grid;grid-template-columns:1fr 1fr;padding:8px}
  .mkside ul{margin:0}
  .side-h{grid-column:1/-1}
  .mksearch{flex:1 1 100%;margin:0}
  #mk-filter{min-width:0;flex:1 1 100%}
}

.itgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.itgrid h2:first-child{margin-top:0}
.itside{position:sticky;top:calc(var(--header-h) + 14px)}
@media (max-width:980px){.itgrid{grid-template-columns:1fr}.itside{position:static;order:-1}}
table.statt{min-width:0;font-size:14px}
table.statt th{width:44%;background:transparent;font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:13.5px;
  color:var(--text-dim);font-weight:400;border-bottom:1px solid var(--line-soft);white-space:normal}
table.statt td{border-bottom:1px solid var(--line-soft)}
.tooltip{background:rgba(8,10,24,.96);border:1px solid #5a6170;border-radius:5px;padding:10px 12px;font-size:13.5px;line-height:1.45;
  box-shadow:0 0 0 1px #000,0 10px 24px rgba(0,0,0,.5)}
.tt-n{font-size:16px;font-weight:600;margin-bottom:3px}
.tt-l{display:flex;justify-content:space-between;gap:12px;color:#fff}
.tt-g{color:#1eff00}.tt-y{color:#ffd100}
.tt-sell{margin-top:4px}
.tt-meta{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--line);color:var(--text-faint);font-size:12px}
.chart{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 10px 6px}
.chartsvg{width:100%;height:280px;display:block}
.chartsvg .gl{stroke:var(--line-soft);stroke-width:1}
.chartsvg .ax{fill:var(--text-faint);font-size:11px;font-family:var(--sans)}
.chartsvg .axq{fill:#6f7b8c}
.chartsvg .qbar{fill:rgba(23,132,209,.28)}
.chartsvg path.lmv{fill:none;stroke:var(--gold);stroke-width:2.4}
.chartsvg path.lmin{fill:none;stroke:#4ba3e6;stroke-width:1.6;stroke-dasharray:5 4}
.chartsvg circle.lmv{fill:var(--gold)}
.chartsvg circle.lmin{fill:#4ba3e6}
.chartsvg .cursor{stroke:#fff;stroke-opacity:.35;stroke-width:1}
.chartsvg .hit{fill:transparent;cursor:crosshair}
.chartread{font-size:13px;color:var(--text);min-height:1.5em;margin:4px 4px 0}
.legend{margin:4px;font-size:12px;color:var(--text-faint);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.legend .k{display:inline-block;width:18px;height:3px;margin-right:4px;vertical-align:middle}
.legend .k.lmv{background:var(--gold)}
.legend .k.lmin{background:repeating-linear-gradient(90deg,#4ba3e6 0 5px,transparent 5px 9px)}
.legend .k.qbar{height:10px;width:10px;background:rgba(23,132,209,.45)}
.craft ul{margin:6px 0 10px}
.craft p:last-child{margin:0}

/* class colour carried into the guide header (method shows the class in its colour above the tabs) */
.wrap:has(.guidebar.c-warrior){--cls:#C69B6D}.wrap:has(.guidebar.c-paladin){--cls:#F48CBA}
.wrap:has(.guidebar.c-hunter){--cls:#AAD372}.wrap:has(.guidebar.c-rogue){--cls:#FFF468}
.wrap:has(.guidebar.c-priest){--cls:#FFFFFF}.wrap:has(.guidebar.c-shaman){--cls:#2f8ff0}
.wrap:has(.guidebar.c-mage){--cls:#3FC7EB}.wrap:has(.guidebar.c-warlock){--cls:#8788EE}
.wrap:has(.guidebar.c-druid){--cls:#FF7C0A}
.wrap:has(.guidebar) .hero{border-bottom:0;position:relative}
.wrap:has(.guidebar) .hero .kicker{color:var(--cls)}
.wrap:has(.guidebar) .hero h1{color:var(--cls)}
.g2 table.mkt{min-width:0}
.g2 > div{min-width:0}

/* homepage class grid */
.clsgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 10px}
a.clstile{display:flex;flex-direction:column;gap:3px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--cls);border-radius:var(--radius);text-decoration:none;transition:background .15s}
a.clstile:hover{background:#1d232c}
.ct-n{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:20px;color:var(--cls)}
.ct-t{font-size:12.5px;color:var(--text-faint)}
@media (max-width:640px){.clsgrid{grid-template-columns:1fr 1fr}.ct-n{font-size:17px}}
.hero .subnav{margin-top:22px}
.hero .realmbar{margin-bottom:0}
.rb-p{display:inline-flex;gap:6px;align-items:baseline;white-space:nowrap}
.itgrid > *{min-width:0}
.tooltip{overflow-wrap:anywhere}
@media (max-width:760px){.subnav > a{padding:0 12px;font-size:13px}}
.mkbrowse > *{min-width:0}

/* =====================================================================================================
   method.gg STRUCTURE (2026-10-17, second pass). Brand bar, then a section tab bar that is the top edge of a
   framed content box; a right-hand sidebar on every page; two-tone section headers; list rows for guides.
   ===================================================================================================== */
:root{--frame:1240px;--rail:300px;--header-h:104px}
body{background:#0b0d10}
.topbar{position:sticky;top:0;z-index:50;background:transparent;border:0}
.topbar::after{content:none}
.brandbar{background:#08090b;border-bottom:1px solid #1c2128}
.brandbar-inner{max-width:var(--frame);margin:0 auto;padding:0 var(--gutter);height:56px;display:flex;align-items:center;gap:16px}
.sitelinks{display:flex;gap:18px;margin-left:auto;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:13px}
.sitelinks a{color:#bdb8a8;text-decoration:none}
.sitelinks a:hover{color:var(--gold)}
.navsearch{margin-left:6px}
.gamebar{background:transparent}
.gamebar-inner{max-width:var(--frame);margin:0 auto;display:flex;align-items:stretch;background:#191d23;border:1px solid var(--line);border-bottom:0;height:48px;padding:0}
nav.main.gamebar-inner{margin-left:auto;margin-right:auto}
.gb-home{display:flex;align-items:center;padding:0 12px;border-right:1px solid var(--line)}
.gb-home .sigil{width:26px;height:26px}
.gamebar .navlist{display:flex;gap:0;flex-wrap:nowrap}
.gamebar .navsec{display:flex;align-items:stretch}
.gamebar .navtop{height:47px;padding:0 15px;font-size:13.5px;border:0;border-right:1px solid #232830;border-bottom:2px solid transparent;color:#e3dfd0;border-radius:0}
.gamebar .js-menus .navtop{padding-right:6px;border-right:0}
.gamebar .navtog{height:47px;border:0;border-right:1px solid #232830;border-radius:0;background:none}
.gamebar .navsec:hover .navtop,.gamebar .navsec:focus-within .navtop{background:#20252c;color:#fff}
.gamebar .navsec.is-current .navtop{color:var(--gold);border-bottom-color:var(--gold);background:#1d2128}
.gamebar .navsec.nomenu .navtop::after{content:none}
.gamebar .navsec.nomenu .navtop{border-right:1px solid #232830}
.gamebar .navpanel{top:100%;left:0;margin-top:0;min-width:260px;border-radius:0 0 4px 4px}
.gamebar .navlist > li:nth-last-child(-n+2) .navpanel{left:auto;right:0}
.navpanel.np-wide{min-width:320px;grid-template-columns:1fr}
.nl-cls{list-style:none;margin:6px 0 4px;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.nl-cls li{margin:0}
.nl-cls a{display:block;padding:6px 8px;background:#20252c;border-left:3px solid var(--cls);color:var(--cls);text-decoration:none;font-family:var(--cond);font-weight:700;font-size:13.5px}
.nl-cls a:hover,.nl-cls a[aria-current]{background:#272d36}
.np-wide .nl{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft)}
.mn .nl-cls{grid-template-columns:1fr 1fr 1fr}
/* Grouped menus (2026-10-23): the GROUP subheads in build.py SECTIONS. The desktop panel balances the groups over
   three columns; the mobile menu and the footer sitemap stack them. */
.nl-h{margin:10px 8px 3px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;color:#9a968a}
.nlg:first-child .nl-h{margin-top:2px}
.gamebar .navpanel.np-groups{min-width:600px}
.navpanel .nlgs{columns:3 180px;column-gap:14px}
.navpanel .nlg{break-inside:avoid}
.sitemap .nl-h{margin:10px 0 3px;font-size:10.5px}
.sitemap .nlg:first-child .nl-h{margin-top:0}
/* guides.html: question index and topic directory (methodpages.py) */
.qlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px}
.qlist li{margin:0}
.qlist a{display:flex;flex-direction:column;gap:3px;height:100%;padding:10px 12px;background:#1b1f26;border:1px solid #262b33;border-left:3px solid var(--gold);text-decoration:none}
.qlist a:hover{background:#222831;border-color:#3a434f;border-left-color:var(--gold)}
.q-q{font-weight:700;color:#fff;line-height:1.3}
.q-a{font-size:12.5px;color:#9a968a;line-height:1.35}
.gdir{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.gd{background:#181c22;border:1px solid var(--line);padding:10px 12px;min-width:0}
h3.gd-h{margin:0 0 6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.gd ul{list-style:none;margin:0;padding:0}
.gd li{margin:0;padding:5px 0;border-top:1px solid #232830;font-size:14px}
.gd li:first-child{border-top:0}
.gd a{text-decoration:none;font-weight:600}

/* the framed content box under the tab bar */
main > .wrap{max-width:var(--frame);background:#14171c;border:1px solid var(--line);border-top:0;padding:0 28px 40px;margin:0 auto}
main{display:block;padding-bottom:30px}
.pagebar{padding:14px 0 0}
.crumbs{font-size:12.5px;text-transform:uppercase;font-family:var(--cond);font-weight:700;letter-spacing:.05em}
.pagebar .verified{display:none}
.hero{margin:0 -28px;padding:30px 28px 24px;border-bottom:1px solid var(--line);
  background:radial-gradient(700px 220px at 85% 0,rgba(23,132,209,.16),transparent 70%),radial-gradient(500px 200px at 0 100%,rgba(255,215,0,.07),transparent 70%),#181c22}
.pagebar + .hero{margin-top:12px}
.hero h1{font-size:clamp(28px,4.2vw,42px);margin-bottom:10px}
.hero .lede{font-size:15.5px;color:#cfcab9}
.byline{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;margin:0 0 22px;border-bottom:1px solid var(--line);font-family:var(--cond);font-weight:700;font-size:14px}
.byline .by{color:#fff}
.byline .upd{color:#cfcab9;text-decoration:none}
.byline .upd:hover{color:var(--gold)}
.byline .upd.is-old{color:var(--warn)}
h2{margin:40px 0 16px;padding:10px 16px;background:#1b1f26;border-left:4px solid var(--gold);font-size:22px}
h2:first-child{margin-top:0}

/* right rail: method's stacked section list */
@media (min-width:1000px){
  .pagegrid.has-toc{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:28px;align-items:start}
  .has-toc .pagetoc{display:block;position:sticky;top:calc(var(--header-h) + 16px);max-height:calc(100vh - var(--header-h) - 32px);overflow-y:auto;padding:0;background:#181c22;border:1px solid var(--line)}
  .has-toc .toc-m{display:none}
}
.toc-h{display:none}
.toc-d ol{border-left:0}
.toc-d li + li{border-top:1px solid #232830}
.toc-d a{display:block;padding:10px 14px;margin:0;border-left:3px solid transparent;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:#d9d5c6;text-decoration:none}
.toc-d a:hover{background:#20252c;color:#fff}
.toc-d a.is-active{border-left-color:var(--gold);color:var(--gold);background:#1d2128}
.tierlegend{margin:0;padding:12px 14px;border-top:1px solid var(--line)}

/* hubs: main + sidebar */
.hubwrap .hero{margin-bottom:0}
.hubgrid2{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:28px;align-items:start;padding-top:24px}
.hubmain{min-width:0}
.hubside{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--header-h) + 16px)}
.sidebox{background:#181c22;border:1px solid var(--line)}
h2.sb-h{margin:0;padding:10px 14px;background:#1d2128;border:0;border-bottom:1px solid var(--line);font-size:14px;letter-spacing:.06em}
.sidebox > *:not(.sb-h){margin:12px 14px}
.sb-list{list-style:none;padding:0}
.sb-list li{margin:0;padding:7px 0;border-bottom:1px solid #232830;font-size:14px}
.sb-list li:last-child{border-bottom:0}
.sb-list a{text-decoration:none;font-weight:600}
ol.sb-list{counter-reset:sb}
ol.sb-list li{counter-increment:sb;display:flex;gap:10px}
ol.sb-list li::before{content:counter(sb);font-family:var(--cond);font-weight:700;color:var(--gold);min-width:14px}
.sidebox .cd{margin:12px 14px}
.sidebox .cd .unit{min-width:0;flex:1 1 0;padding:8px 4px}
.sidebox .cd .u-num{font-size:24px}
.sidebox .dates{border:0;background:none;margin:0;padding:0}
.sidebox .dates li{padding:8px 14px}
.sb-cls{display:grid;grid-template-columns:1fr 1fr;gap:6px}

/* method's two-tone section header */
.sh-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:34px 0 14px}
.sh-row .sh{margin:0;flex:1 1 auto}
h2.sh{background:none;padding:0 0 0 14px;margin:34px 0 14px;font-size:22px;border-left:4px solid var(--gold)}
.sh-row h2.sh{margin:0}
.sh .acc{color:var(--gold)}
.viewall{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--gold);text-decoration:none;white-space:nowrap}
.viewall:hover{color:#fff}
.hubmain > .sh-row:first-child,.hubmain > h2.sh:first-child{margin-top:4px}

/* featured guides in the hub hero */
.feat-h{margin:18px 0 8px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:#9a968a}
.featlist{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:760px}
.featlist li{margin:0;display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;padding:9px 12px;background:rgba(10,12,15,.55);border:1px solid #262b33}
.featlist a{font-weight:700;color:#fff;text-decoration:none}
.featlist a:hover{color:var(--gold)}
.featlist span{color:#9a968a;font-size:13px}

/* class buttons (method: icon + name, 3 across) */
.clsbtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
a.clsbtn{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#1b1f26;border:1px solid #262b33;text-decoration:none;font-family:var(--cond);font-weight:700;font-size:15px;color:#fff}
a.clsbtn:hover{background:#222831;border-color:var(--cls)}
.cb-ic{width:26px;height:26px;display:grid;place-items:center;background:var(--cls);color:#0d0f12;font-size:15px;border-radius:3px;flex-shrink:0}
.sb-cls a.clsbtn{font-size:13.5px;padding:6px 8px}
.sb-cls .cb-ic{width:20px;height:20px;font-size:12px}

/* leveling guides hub: bigger class cards */
.lvgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
a.lvcard{display:flex;flex-direction:column;gap:4px;padding:14px;background:#1b1f26;border:1px solid #262b33;border-top:3px solid var(--cls);text-decoration:none}
a.lvcard:hover{background:#222831}
.lv-n{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:22px;color:var(--cls);line-height:1.1}
.lv-s{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:11.5px;letter-spacing:.06em;color:#9a968a}
.lv-spec{font-size:13px;color:#d9d5c6;margin-top:4px}
.lv-spec b{color:#fff}
.lv-t{font-size:12px;color:#8c8a82}

/* dungeon cards (hub) and rows (dungeon list) */
.dggrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
a.dgcard{display:flex;align-items:center;gap:10px;padding:12px 14px;text-decoration:none;color:#fff;border:1px solid #262b33;background:linear-gradient(90deg,#1b1f26 40%,rgba(23,132,209,.18))}
a.dgcard:hover{border-color:var(--gold)}
.dg-n{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:15px;flex:1 1 auto}
.dg-k{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:var(--sky)}
.classic .dg-k{color:var(--warn)}
.dg-l{font-family:var(--cond);font-weight:700;font-size:12px;padding:3px 8px;background:#0d0f12;border:1px solid #2a313c;white-space:nowrap}
.dglist{display:grid;gap:6px}
details.dgrow{background:#1b1f26;border:1px solid #262b33}
details.dgrow[hidden]{display:none}
details.dgrow > summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
details.dgrow > summary::-webkit-details-marker{display:none}
details.dgrow > summary::after{content:"";width:7px;height:7px;border-right:2px solid #8c8a82;border-bottom:2px solid #8c8a82;transform:rotate(45deg);margin-left:4px}
details.dgrow[open] > summary::after{transform:rotate(-135deg)}
details.dgrow[open]{border-color:var(--gold)}
.dg-body{padding:0 14px 12px;display:grid;gap:6px}
.dgx{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;font-size:14px}
.dgx .k{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:12px;color:#9a968a;padding-top:2px}

/* tools */
.toolgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
a.toolcard{display:flex;flex-direction:column;gap:4px;padding:14px;background:#1b1f26;border:1px solid #262b33;border-left:3px solid var(--gold);text-decoration:none}
a.toolcard:hover{background:#222831}
.tc-n{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:17px;color:#fff}
.tc-d{font-size:13px;color:#9a968a}

/* article list (method "Latest guides") */
.artfilter{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.artfilter input{background:#0d0f12;border:1px solid var(--line);color:var(--text);padding:10px 12px;font:inherit;font-size:15px;border-radius:3px}
.artfilter input:focus{outline:none;border-color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:#1b1f26;border:1px solid #2a313c;color:#d9d5c6;padding:6px 12px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;cursor:pointer;border-radius:3px}
.chip:hover{color:#fff;border-color:#3a434f}
.chip[aria-pressed="true"]{background:var(--gold);color:#0d0f12;border-color:var(--gold)}
.artlist{display:grid;gap:6px}
a.art{display:flex;gap:14px;padding:12px;background:#1b1f26;border:1px solid #262b33;text-decoration:none}
a.art:hover{background:#222831;border-color:#3a434f}
a.art[hidden]{display:none}
.art-ic{width:64px;height:48px;flex-shrink:0;display:grid;place-items:center;font-family:var(--cond);font-weight:700;font-size:24px;color:#0d0f12;background:linear-gradient(135deg,var(--gold),#c79a00)}
.t-launch .art-ic{background:linear-gradient(135deg,#ff8800,#b85f00)}
.t-systems .art-ic{background:linear-gradient(135deg,#4ba3e6,#1764a8)}
.t-classes .art-ic{background:linear-gradient(135deg,#a98bff,#6a4fd0)}
.t-levelling .art-ic{background:linear-gradient(135deg,#3ddc5a,#1f8f37)}
.t-world .art-ic{background:linear-gradient(135deg,#3fc7eb,#1a7f99)}
.t-pvp .art-ic{background:linear-gradient(135deg,#ff4444,#a32020)}
.art-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.art-t{font-family:var(--cond);font-weight:700;font-size:17px;color:#fff;line-height:1.2}
.art-d{font-size:13.5px;color:#a9a597;line-height:1.4}
.art-m{display:flex;gap:10px;align-items:center;font-size:12px;color:#8c8a82;margin-top:2px}
.art-tag{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gold)}

/* class guide bits */
.specpick{font-family:var(--cond);font-size:20px;color:#fff;margin-bottom:6px}
details.porder{background:#181c22;border:1px solid var(--line);margin:0 0 6px}
details.porder > summary{padding:10px 14px;cursor:pointer;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:flex;gap:10px;align-items:center}
details.porder .tw{margin:0;border:0;border-top:1px solid var(--line);border-radius:0}
.po-n{color:#8c8a82;font-size:12px;margin-left:auto}

/* ---------- talent calculator + guide embed ---------- */
.tcalc,.lcalc,.tembed{margin:20px 0}
.cpick{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.cpick-b{background:#1b1f26;border:1px solid #2a313c;border-bottom:3px solid var(--cls);color:var(--cls);padding:8px 14px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:14px;cursor:pointer}
.cpick-b:hover{background:#222831}
.cpick-b[aria-pressed="true"]{background:var(--cls);color:#0d0f12}
.cbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#181c22;border:1px solid var(--line);margin:0 0 10px}
.csum,.lsum{margin:0;font-family:var(--cond);font-weight:700;font-size:15px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.cs-cls{text-transform:uppercase;font-size:18px}
.cs-pts{color:var(--gold);font-size:18px}
.cs-split,.cs-lvl{color:#9a968a;font-size:13px}
.cbtns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.btn2{background:#20252c;border:1px solid #2f3742;color:#e3dfd0;padding:7px 12px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;cursor:pointer;text-decoration:none;border-radius:3px;display:inline-flex;align-items:center}
.btn2:hover{background:#2a313a;color:#fff;border-color:var(--gold)}
select.cpath{background:#0d0f12;border:1px solid #2f3742;color:var(--text);padding:7px 10px;font:inherit;font-size:13.5px;border-radius:3px;max-width:100%}
.cpath-note,.lwhy{font-size:13.5px;color:#a9a597;margin:0 0 10px}
.ctrees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ctree,.ltree{background:#11141a;border:1px solid var(--line);min-width:0}
.ctree-h{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#1b1f26;border-bottom:1px solid var(--line)}
.ctree-n{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:15px;color:var(--cls,#fff);flex:1 1 auto}
.ctree-p{font-family:var(--cond);font-weight:700;color:var(--gold);font-size:15px;min-width:24px;text-align:right}
.ctree-r{background:none;border:1px solid #2f3742;color:#9a968a;font-size:11px;padding:2px 6px;cursor:pointer;text-transform:uppercase;font-family:var(--cond);font-weight:700}
.ctree-r:hover{color:#fff;border-color:#9a968a}
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(7,62px);gap:8px 6px;padding:10px 8px;position:relative}
.cnode{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;padding:4px 4px 3px;background:#1d222a;border:2px solid #303844;color:#8c8a82;font:inherit;text-align:center;cursor:pointer;min-width:0;border-radius:3px}
.ro .cnode{cursor:default}
.cn-n{font-size:10.5px;line-height:1.15;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.cn-r{font-family:var(--cond);font-weight:700;font-size:12px;align-self:flex-end;background:#0d0f12;padding:0 4px;border-radius:2px}
.cnode.locked{opacity:.45}
.cnode.open{border-color:#3d8b4a;color:#e3dfd0}
.cnode.part{border-color:#3ddc5a;color:#fff;background:#1d2a20}
.cnode.part .cn-r{color:#3ddc5a}
.cnode.max{border-color:var(--gold);color:#fff;background:#2a2715}
.cnode.max .cn-r{color:var(--gold)}
.cnode.ms::before{content:"";position:absolute;top:-1px;right:-1px;border-style:solid;border-width:0 9px 9px 0;border-color:transparent #4ba3e6 transparent transparent}
.cnode.ph{opacity:.3;cursor:not-allowed}
.cnode:focus-visible{outline:2px solid #fff;outline-offset:1px}
.carrow{position:relative;z-index:0;pointer-events:none}
.carrow.v::before{content:"";position:absolute;left:50%;width:3px;margin-left:-1.5px;background:#3a414c;top:31px;bottom:31px}
.carrow.h::before{content:"";position:absolute;top:50%;height:3px;margin-top:-1.5px;left:12%;right:12%;background:#3a414c}
.carrow.on::before{background:var(--gold)}
.ctip{position:fixed;z-index:200;max-width:300px;padding:10px 12px;background:rgba(8,10,24,.97);border:1px solid #5a6170;border-radius:4px;box-shadow:0 10px 24px rgba(0,0,0,.6);font-size:13px;line-height:1.45;pointer-events:none;display:none}
.ctip p{margin:0 0 4px}
.ct-name{font-weight:700;color:#fff;font-size:15px}
.ct-rank{color:#9a968a;font-size:12px}
.ct-ms{color:#4ba3e6}
.ct-txt{color:#ffd100}
.ct-next{color:#fff;margin-top:6px!important}
.ct-req{color:#ff4444}
.ct-help{color:#3ddc5a;font-size:12px}
.ct-chg{color:var(--warn);font-size:12px;margin-top:6px!important}
.corder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px}
.corder li{margin:0;display:grid;grid-template-columns:30px 1fr auto;gap:2px 8px;padding:6px 8px;background:#1b1f26;font-size:13px}
.po-l{font-family:var(--cond);font-weight:700;color:var(--gold)}
.po-t{color:#fff}
.po-r{font-family:var(--cond);font-weight:700;color:#3ddc5a}
.po-tree{grid-column:2/-1;font-size:11.5px;color:#8c8a82}
.tembed-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:0 0 8px}
.clevels{display:flex;flex-wrap:wrap;gap:4px}
.clevel{background:#1b1f26;border:1px solid #2f3742;color:#d9d5c6;padding:6px 10px;font-family:var(--cond);font-weight:700;font-size:13px;cursor:pointer;border-radius:3px}
.clevel[aria-pressed="true"]{background:var(--gold);color:#0d0f12;border-color:var(--gold)}
.tembed .csum{font-family:var(--sans);font-weight:400;font-size:13.5px;color:#a9a597;margin:0 0 8px}
.ltrees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ltree-b{font-size:12.5px;color:#9a968a;margin:8px 10px 0}
.lgrid{display:grid;gap:8px 6px;padding:10px 8px;grid-auto-rows:62px}

/* ---------- small screens ---------- */
@media (max-width:1100px){
  .gamebar .navtop{padding:0 10px;font-size:12.5px}
  .sitelinks{display:none}
}
@media (max-width:980px){
  :root{--header-h:56px}
  .gamebar{display:none}
  .navsearch{display:none}
  .hubgrid2{grid-template-columns:1fr}
  .hubside{position:static}
  main > .wrap{border:0;padding:0 var(--gutter) 40px}
  .hero{margin:0 calc(-1 * var(--gutter));padding:24px var(--gutter) 20px}
  .ctrees,.ltrees{grid-template-columns:1fr}
  .cgrid{grid-template-rows:repeat(7,58px)}
}
@media (max-width:640px){
  .clsbtns,.lvgrid{grid-template-columns:1fr 1fr}
  .dggrid,.toolgrid{grid-template-columns:1fr}
  .art-ic{width:44px;height:44px;font-size:18px}
  .dgx{grid-template-columns:1fr}
  .cn-n{font-size:10px}
  .cgrid{grid-template-rows:repeat(7,66px)}
  .lgrid{grid-auto-rows:66px}
}
.sitemap > *{min-width:0}
.sitemap .nl-cls{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
.sitemap .nl-cls a{font-size:12.5px;padding:4px 6px}
.tembed .csum{display:block}
a.lvcard{min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){.lvgrid{grid-template-columns:1fr}}

/* ---------- WoW Token page (token.html, 2026-10-18) ---------- */
.tkhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 12px}
.tk-l{margin:0 0 4px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:#9a968a}
.tk-price{margin:0;font-family:var(--cond);font-weight:700;font-size:46px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.tk-price .unit{font-size:16px;color:#9a968a;margin-left:8px}
.tk-change{margin:8px 0 2px;font-size:14px}
.chartsvg .ln{fill:none;stroke-width:2}
.chartsvg .ln.act{stroke:var(--gold);stroke-width:2.4}
.chartsvg .ln.fc{stroke:#4ba3e6;stroke-dasharray:6 4}
.chartsvg .band.fc{fill:rgba(23,132,209,.18)}
.chartsvg .band.range{fill:rgba(23,132,209,.08)}
.chartsvg .band.mid{fill:rgba(23,132,209,.25)}
.chartsvg .ln.analog{stroke:rgba(170,170,170,.35);stroke-width:1}
.chartsvg .ln.median{stroke:#1784d1;stroke-dasharray:5 4}
.chartsvg .mark{stroke-width:1.2}
.chartsvg .mark.now,.chartsvg .mark.today{stroke:var(--gold);stroke-dasharray:3 3}
.chartsvg .mark.launch{stroke:#ff8800}
.chartsvg .marklbl{font-size:10.5px;font-family:var(--sans)}
.chartsvg .marklbl.now,.chartsvg .marklbl.today{fill:var(--gold)}
.chartsvg .marklbl.launch{fill:#ff8800}
.legend .k.lfc{background:repeating-linear-gradient(90deg,#4ba3e6 0 6px,transparent 6px 10px)}
.legend .k.lmed{background:repeating-linear-gradient(90deg,#1784d1 0 5px,transparent 5px 9px)}
.legend .k.lmid{height:10px;width:12px;background:rgba(23,132,209,.45)}
.legend .k.lrange{height:10px;width:12px;background:rgba(23,132,209,.16)}
.legend .k.lan{background:rgba(170,170,170,.6);height:1px}
.tkbest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tkside{background:#1b1f26;border:1px solid #262b33;border-left:3px solid var(--gold);padding:14px 16px;min-width:0;overflow-wrap:anywhere}
.tkside .who{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:#9a968a}
.tkside .verdict{font-family:var(--cond);font-weight:700;font-size:24px;color:var(--gold);margin:4px 0 2px}
.tkside .why{font-size:14px}
.tkside .win{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:13.5px;font-variant-numeric:tabular-nums}
.tkside .win div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 10px;padding:2px 0}
.tkside .win .k{color:#9a968a}
#tk-lkeys{margin:12px 0}
#tk-lkeys .num{font-size:24px}
.tkpat{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;align-items:end;height:70px;margin-top:8px}
.tkpat div{border-radius:2px 2px 0 0;min-height:2px}
.tkpatx{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;font-size:10.5px;color:#8c8a82;text-align:center;margin:3px 0 10px;white-space:nowrap}
@media (max-width:640px){.tkbest{grid-template-columns:1fr}.tk-price{font-size:38px}.tkpatx{font-size:8.5px}}

/* Homepage hero: the one-line "what happens next" (phase-prose next-up, 2026-10-23). */
.nextup{margin:14px 0 6px;padding:9px 13px;border-left:3px solid var(--gold);background:rgba(255,215,0,.07);border-radius:0 6px 6px 0;font-size:15px;line-height:1.5}
.nextup a{font-weight:600}

/* Profession guides (genprofessions.py, 2026-10-24): skill-up colours, the route's rank rows, recipe tables. */
.skc{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px}
.skc span{display:inline-block;min-width:2.1em;text-align:right}
.sk-o{color:#ff8040}.sk-y{color:#ffff00}.sk-g{color:#40bf40}.sk-gr{color:#9d9d9d}
.ct{font-size:.72em;color:var(--text-faint);font-weight:400;margin-left:6px}
table.route tr.rk td{background:rgba(255,215,0,.07);border-top:1px solid rgba(255,215,0,.35)}
table.proftab td{font-size:13.5px;vertical-align:top}
table.proftab td:last-child{min-width:240px}
table.proftab td.mats{min-width:150px}
table.proftab td:first-child{min-width:140px}
.trainers summary{cursor:pointer;color:var(--gold);margin:6px 0}
.trainers ul{margin:4px 0 0;padding-left:18px;font-size:14px}
.trainers .h4{margin-top:0}

/* Wowhead tooltips (2026-10-24): Jay's call — hide Wowhead's logo badge in the popup; the item icon stays. */
.wowhead-tooltip-powered{display:none!important}