@font-face{font-family:Cinzel;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/cinzel.e3007b72.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/ibm-plex-sans.d8b4e62d.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/jetbrains-mono.70ff50b7.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box}
/* The design is square throughout: no radius anywhere except the round class
   dots, borders are hairlines. The look was reskinned on 26 Sep 2026 from a
   design prototype Chris approved: a warm black ground lit by two soft glows,
   gold hairline frames around every panel, Cinzel titles with a gold sheen,
   small tracked mono kickers behind a gold diamond. */
:root{
  --bg:#0b0b0d;          /* page */
  --bg2:#0e0d0f;         /* rail, rows, quiet surfaces */
  --card:#0f0e11;        /* panels and cards, where a solid fill is needed */
  --row-hover:#151317;
  --line:rgba(255,255,255,.07);   /* neutral hairline */
  --line2:rgba(255,255,255,.04);
  --edge:rgba(227,183,90,.16);    /* gold hairline: panel frames, section rules */
  --fg:#ece6da;
  --dim:#9a9387;         /* secondary text */
  --dim2:#8f887c;        /* labels and meta */
  --faint:#77716a;       /* notes, qualifiers */
  --off:#5f5a52;         /* counters, inactive */
  --accent:#e3b75a;      /* gold: brand, kickers, filled, links */
  --accent2:#f3d38c;     /* bright gold: hover, numbers, panel titles */
  --on-accent:#1a1206;   /* text on a gold fill */
  --daily:#7d8f6a;
  --danger:#c9503f;--danger-fg:#ff7a6a;
  --frame:#5a4a30;       /* bronze edge around game icons */
  --well:rgba(0,0,0,.35);/* inside of a text field */
  /* A panel: a dark wash over the page, a gold hairline, and a second hairline
     5px inside it, so every card reads as a framed plate. */
  --panel:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45));
  --plate:inset 0 0 0 4px rgba(0,0,0,.25),inset 0 0 0 5px var(--edge),0 20px 40px rgba(0,0,0,.4);
  /* The primary button: a gold bar, lit from the top. */
  --btn:linear-gradient(180deg,#f3d38c,#e3b75a);
  /* The two glows behind the page: gold high on the right, a violet haze low. */
  --glow-a:rgba(227,183,90,.1);--glow-b:rgba(150,90,230,.08);--mote-a:#f3d38c;--mote-b:#b58cf0;
  /* Labels, numbers and kickers, on both games. */
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* Overridden per patch from index.md. They tint the few remaining
     patch-specific accents; the shell itself no longer uses them. */
  --key:#e3b75a;--key2:#8d867a}
/* WoW Forever wears the same shell in the colours of Blizzard's own Forever
   site (worldofwarcraft.blizzard.com/en-us/forever): deep ocean teal deepening
   down the page, cream text, gold for emphasis, teal for the game's own
   accents (the switch, the level bars, NEW). The frames are a pale teal
   hairline instead of the gold one. The rail and mobile menu are the
   parchment of the Forever logo's flat mark, a surface of their own rather
   than another shade of the page, so their text and nav states are a dark
   ring brown. */
body[data-flavor="forever"]{
  --bg:#063349;--bg2:#05293b;--card:#073a53;--row-hover:#0b4461;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.05);--edge:rgba(140,210,220,.18);
  --fg:#eef5f3;--dim:#b3cdd3;--dim2:#9fc0c8;--faint:#86a9b2;--off:#6b8f99;
  --accent:#e8b44c;--accent2:#f5d488;--on-accent:#1b1407;
  --btn:linear-gradient(180deg,#f5d488,#e8b44c);
  --teal:#5fbdae;--teal2:#7fe0d0;
  --daily:#8fc9a0;--frame:#b69b7b;
  --glow-a:rgba(232,180,76,.1);--glow-b:rgba(95,189,174,.08);--mote-a:#f5d488;--mote-b:#7fe0d0;
  background:linear-gradient(180deg,#07405c 0,#063349 40%,#042434) fixed,#042434}
body{margin:0;background:var(--bg);color:var(--fg);
  font:400 14px/1.6 'IBM Plex Sans',system-ui,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
/* The glows and the rising motes are .pv-bg, at the end of this sheet. */
a{color:var(--accent);text-decoration:none}
/* A link inside running text has to be findable without seeing the colour. */
.lede a,.sub a,.note a,.wk-n a,.wk-imp-h a,.wk-imp-k a,.sec-s a,.blurb a,p a,li a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:color-mix(in oklab,var(--accent) 55%,transparent)}
.lede a:hover,.sub a:hover,.note a:hover,.wk-n a:hover,p a:hover,li a:hover{text-decoration-color:currentColor}
a:hover{color:var(--accent2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{font-family:Cinzel,Georgia,serif;font-weight:700;letter-spacing:.01em;text-wrap:balance}
h1{font-size:clamp(34px,4.6vw,50px);font-weight:900;line-height:1.04;margin:0 0 8px}
.h1-xl{font-size:clamp(36px,6vw,60px);line-height:1.02;margin:0 0 14px;max-width:18ch}
/* The page title: cream with a gold sheen that crosses it now and then. The
   sheen is the background moving behind clipped text, so it costs no layout;
   without motion it is simply the cream. */
.page-h h1,.demo-bar h1,.pick-h{background:linear-gradient(100deg,var(--fg) 30%,#fff6d8 45%,var(--accent) 50%,var(--fg) 65%);
  background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
  color:var(--fg);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 24px color-mix(in srgb,var(--accent) 25%,transparent));
  animation:pvSheen 7s linear infinite}
@keyframes pvSheen{0%{background-position:100% 0}100%{background-position:-200% 0}}
.mono,input,select,button{font-family:var(--mono)}
input,select,button{font-size:13px;color:inherit}
.main{min-width:0;padding:48px 52px 64px;display:flex;flex-direction:column;gap:44px}
/* Page sections were separated by their own margins; the shell owns that gap
   now, so a stray bottom margin would double it. */
.main>*{margin-bottom:0}
.wrap{max-width:100%;margin:0;padding:0}
.dim{color:var(--dim)}.dim2{color:var(--dim2)}.accent{color:var(--accent)}.sm{font-size:13.5px}.strong{font-weight:500}
/* The kicker: small tracked mono over a heading. On a page head, a drawer or
   a banner it is gold behind a diamond; elsewhere it is the quiet label. */
.kicker{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim2)}
.page-h>.kicker,.feat-hd .kicker,.demo-bar .kicker{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.24em;color:var(--accent)}
.page-h>.kicker::before,.feat-hd .kicker::before,.demo-bar .kicker::before,.dia::before{content:"";flex:none;width:7px;height:7px;background:var(--accent);transform:rotate(45deg)}
.sub{color:var(--dim);max-width:62ch;margin:0 0 26px}
.lede{color:var(--dim);font-size:18px;max-width:62ch;text-wrap:pretty}
.lede.sm{font-size:15px;margin-bottom:4px}
.lede p{margin:0 0 14px}
/* ---- shell: a sticky rail, and a top bar once the rail no longer fits ----- */
.shell{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:start;
  position:relative;z-index:1}
/* Laptop widths: a narrower rail and less side padding give the wide tables
   the room they need. The phone layout further down overrides both. */
@media (max-width:1600px){
  .shell{grid-template-columns:240px minmax(0,1fr)}
  .main{padding-left:32px;padding-right:32px}
}
/* Smaller laptops (1280-1366): the character table still needs a little more. */
@media (max-width:1400px){
  .main{padding-left:24px;padding-right:24px}
  .tbl.alts{font-size:13px}
  .tbl.alts th,.tbl.alts td{padding-left:6px;padding-right:6px}
}
.rail{display:flex;flex-direction:column;gap:30px;position:sticky;top:0;height:100vh;
  padding:34px 26px;background:var(--bg2);border-right:1px solid var(--line);overflow-y:auto}
.rail{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 25%,transparent) transparent}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 25%,transparent)}
.rail::-webkit-scrollbar-track{background:transparent}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.rail-foot p{margin:0;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--off)}
.brand{display:flex;align-items:center;gap:13px;color:var(--fg)}
.brand:hover{color:var(--fg)}
.wm{font-family:Cinzel,Georgia,serif;font-size:19px;font-weight:700;letter-spacing:.03em}
.wm b{font-weight:700;color:inherit}
.wm{display:flex;flex-direction:column;line-height:1.05}
.wm-f{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim2);margin-top:4px}
.wm-f-ph{visibility:hidden}
.mark{flex:none;display:block}
/* The mark breathes: a gold glow that swells and settles. */
.rail .mark,.topbar .mark{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 35%,transparent));animation:pvLogo 5s ease-in-out infinite}
@keyframes pvLogo{0%,100%{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 30%,transparent))}
  50%{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 70%,transparent))}}
@media (prefers-reduced-motion:reduce){.rail .mark,.topbar .mark,.page-h h1,.demo-bar h1,.pick-h{animation:none}}
/* Retail | Forever. Two links in one box, the current one filled: a segmented
   control, the same idiom as the region picker on the settings page. It sits
   between the brand and the nav in the rail, first in the mobile menu. */
.flv{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--edge);padding:3px;gap:0}
.flv-a{text-align:center;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim2);padding:10px 6px;white-space:nowrap}
.flv-a:hover{color:var(--fg)}
.flv-a.on{color:var(--on-accent);background:var(--btn)}
.flv-a.on:hover{color:var(--on-accent)}
.mobmenu .flv{margin:4px 12px 12px}
/* The first-visit chooser (flavorPicker). Covers the root page rather than
   replacing it, so the page underneath is still the page. Each card wears
   its own game's colours -- retail's black and gold, Forever's teal and tan
   (the same values as body[data-flavor="forever"] below) -- so the choice
   reads before a word of it does. */
.pick{display:none}
html.pv-pick .pick{display:flex;position:fixed;inset:0;z-index:60;overflow-y:auto;
  padding:40px 16px;background:radial-gradient(ellipse 70% 55% at 50% 0,rgba(227,183,90,.12) 0,transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 100%,rgba(150,90,230,.08),transparent 70%),var(--bg)}
html.pv-pick body{overflow:hidden}
.pick-in{width:min(900px,100%);margin:auto;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:10px}
.pick-brand{display:flex;align-items:center;gap:12px;color:var(--fg);margin-bottom:18px}
.pick-brand .wm{font-size:20px}
.pick-h{margin:0}
.pick-s{margin:0 0 22px;font-size:13.5px;color:var(--dim);max-width:52ch;text-wrap:pretty}
.pick-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;width:100%}
.pick-c{display:flex;flex-direction:column;gap:10px;text-align:left;padding:30px 30px 26px;
  border:1px solid var(--edge);background:var(--panel);box-shadow:var(--plate);color:var(--fg);
  transition:border-color .15s,transform .15s,box-shadow .15s}
.pick-c:hover,.pick-c:focus-visible{border-color:var(--pc-accent,var(--accent));transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);outline:none}
.pick-k{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--pc-accent,var(--accent))}
.pick-k::before{content:"";width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
.pick-t{font-family:Cinzel,Georgia,serif;font-size:26px;font-weight:700;line-height:1.15}
.pick-p{font-size:13.5px;line-height:1.6;color:var(--pc-dim,var(--dim));flex:1}
.pick-f{font-size:11.5px;color:var(--pc-dim2,var(--dim2))}
.pick-go{margin-top:8px;align-self:flex-start;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:11px 16px;background:var(--pc-btn,var(--btn));color:var(--pc-on,var(--on-accent));
  clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
/* Forever's card is a piece of the Forever page: its teal, its pale teal
   frame, its gold, and the game's teal on the button. */
.pick-c[data-flavor="forever"]{--pc-accent:#e8b44c;--pc-dim:#b3cdd3;--pc-dim2:#9fc0c8;
  --pc-btn:linear-gradient(180deg,#76d6c6,#5fbdae);--pc-on:#04202b;color:#eef5f3;border-color:rgba(140,210,220,.3);
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.2),inset 0 0 0 5px rgba(140,210,220,.18),0 20px 40px rgba(0,0,0,.4);
  background:linear-gradient(180deg,#07405c 0,#063349 60%,#042434 100%)}
/* The intro a flavor opens on before it has a week to track. */
.intro{display:flex;flex-direction:column;gap:30px}
.intro .st-c{margin-top:10px}
.intro .prose{max-width:68ch}
.intro-l{display:flex;flex-direction:column;gap:6px}
.dc-l{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--dim)}
.dc-l li::marker{color:var(--off)}
.tbl.dun{min-width:640px}
.tbl.dun .dun-n{color:var(--dim);max-width:34ch;font-size:13.5px}
/* An instance or a zone by name, in Cinzel, as the game's map labels it. */
.tbl.dun td:first-child{font-family:Cinzel,Georgia,serif;font-size:14.5px;font-weight:700;letter-spacing:.01em}
.tbl.dun td:first-child a{color:var(--fg)}
.tbl.dun td:first-child a:hover{color:var(--accent2)}
.tbl.dun td .mono{font-weight:600}
/* "New" and the like, a small lit tag after the name. */
.tbl.dun .rw-c{display:inline-block;margin:0 0 0 10px;padding:2px 7px;vertical-align:2px;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#04202b;background:var(--teal,var(--accent))}
/* ---- alts: every character in one table -------------------------------
   The table the site already uses, with the class colour on the name, the
   level as the number that matters, and professions as small bars.
   display:table is spelled out because the class pages' .alts list is a
   flex column, and on the table that splits head and body into two grids
   whose columns no longer line up. */
.tbl.alts{display:table;min-width:980px}
.tbl.alts td{vertical-align:middle}
/* The character table has ten columns, so it cannot afford the reference
   tables' roomy 16px cell padding: at laptop widths that alone pushed Played
   and Zone off the right edge. Tighter cells and header tracking here only. */
.tbl.alts th,.tbl.alts td{padding-left:8px;padding-right:8px}
.tbl.alts th{letter-spacing:.1em}
.tbl.alts tbody tr:not(.al-rx):hover{background:color-mix(in oklab,var(--accent) 5%,transparent)}
.al-s{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;white-space:nowrap}
.al-s:hover{color:var(--fg)}
th[aria-sort] .al-s{color:var(--accent)}
th[aria-sort=ascending] .al-s::after{content:' ▲'}
th[aria-sort=descending] .al-s::after{content:' ▼'}
.al-c{display:flex;align-items:center;gap:10px}
.al-c img{width:28px;height:28px;border:1px solid var(--line);flex:none}
.al-cn{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Two small buttons, only for a character that actually has something to
   show: an export from before addon 1.12 has no bags or bank at all, and an
   icon nobody's client will ever fill in is worse than no icon. */
.al-inv{display:flex;gap:4px;flex:none;margin-left:auto}
.al-inv button{background:none;border:1px solid var(--line);width:24px;height:24px;padding:0;
  display:flex;align-items:center;justify-content:center;color:var(--dim2);cursor:pointer}
.al-inv button:hover{color:var(--accent);border-color:var(--accent)}
/* The last-synced clock: sits with the bag and bank buttons, shaped like them
   but not a button (nothing to press), so it is drawn without the hover. */
.al-sy{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--line);color:var(--dim2);cursor:help}
.al-sy:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.al-sy.old{color:var(--danger-fg);border-color:color-mix(in srgb,var(--danger-fg) 60%,transparent)}
.al-n{font-family:Cinzel,Georgia,serif;font-size:15px;letter-spacing:.02em;color:var(--cc,var(--fg));text-decoration:none;white-space:nowrap}
.al-n:hover{text-decoration:underline}
.al-m{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--dim2)}
.al-lv{font-family:var(--mono);font-size:18px;color:var(--accent);line-height:1}
.al-x{display:block;width:64px;height:2px;background:var(--line);position:relative;margin:6px 0 3px}
.al-x i{position:absolute;inset:0 auto 0 0;background:color-mix(in oklab,var(--key) 70%,var(--accent));display:block}
.al-cls{color:var(--cc,var(--fg))}
.tbl.alts td.mono{white-space:nowrap}
.al-ps{display:flex;flex-direction:column;gap:6px;width:220px}
/* The game's professions bar: black, a brass edge, filled in the trade's
   own colour with a little gloss, the name and rank across the middle. */
.al-p{display:flex;align-items:center;gap:7px}
.al-p img,.al-2i img{border:1px solid var(--frame);flex:none;display:block}
.al-pb{position:relative;flex:1;min-width:0;height:18px;background:#050505;border:1px solid var(--frame);
  box-shadow:inset 0 0 0 1px #000;overflow:hidden;display:flex;align-items:center;justify-content:center}
.al-pb i,.al-2b i{position:absolute;inset:1px auto 1px 1px;width:var(--pw);display:block;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--pc) 55%,#fff),var(--pc) 45%,color-mix(in srgb,var(--pc) 65%,#000))}
.al-pb span{position:relative;font-size:10.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px;
  text-shadow:0 1px 1px #000,0 0 3px #000}
.al-2{display:flex;gap:10px;flex-wrap:wrap;margin-top:1px}
.al-2i{display:flex;align-items:center;gap:5px}
.al-2t{display:flex;flex-direction:column;gap:3px}
.al-2b{position:relative;width:34px;height:5px;background:#050505;border:1px solid var(--frame);display:block}
.al-2b i{inset:0 auto 0 0}
.al-2r{font-family:var(--mono);font-size:10px;color:var(--dim);line-height:1}
.al-g{color:var(--accent);white-space:nowrap}
.al-g i{font-style:normal;color:var(--dim2)}
#al-sum .v i{font-style:normal;font-size:15px;color:var(--dim2)}
button.al-p,button.al-2i{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
button.al-p:hover .al-pb,button.al-2i:hover .al-2b{border-color:var(--accent)}
button.al-p .al-pb span::after{content:' ›';color:var(--accent)}
.tbl.alts tbody tr{cursor:pointer}
.tbl.alts tbody tr.on{background:color-mix(in oklab,var(--accent) 9%,transparent)}
.tbl.alts tbody tr.on td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
/* Each character's row in a dark shade of its own class colour, with a
   stripe of it down the left edge. Not the class colour laid transparently
   over the teal: a colour washed over teal turns grey-blue (Paladin pink
   read as no pink at all), while the class colour darkened keeps its hue --
   Paladin a deep pink, Druid a burnt orange. The shades come from the script
   (--cw, --cwh hover, --cwo open), which darkens each class colour only as
   far as keeps the palest text in the row at a contrast of 5 (4.6 on hover
   and the open row), so a light class like Priest or Rogue gets a little
   less colour than the rest. The two greys go one step lighter inside a row
   and every text gets a faint shadow. The class-coloured name (Cinzel 700)
   and class (600) get a crisp 1px dark outline all round, and a class colour
   too dark for its row arrives lightened in --cct. */
.tbl.alts tbody tr[data-who]{background:var(--cw,transparent)}
.tbl.alts tbody tr[data-who] td:first-child{box-shadow:inset 3px 0 0 var(--cc,transparent)}
.tbl.alts tbody tr[data-who]:hover{background:var(--cwh,var(--cw,transparent))}
.tbl.alts tbody tr[data-who].on{background:var(--cwo,var(--cw,transparent))}
body[data-flavor="forever"] .tbl.alts tbody tr[data-who]{--dim:#dde7ec;--dim2:#c8d6dd}
.tbl.alts tbody tr[data-who] td{text-shadow:0 1px 1px rgba(0,0,0,.3)}
.tbl.alts tbody tr[data-who] .al-n{font-weight:700}
.tbl.alts tbody tr[data-who] .al-cls{font-weight:600}
.tbl.alts tbody tr[data-who] .al-n,.tbl.alts tbody tr[data-who] .al-cls{color:var(--cct,var(--cc,var(--fg)));
  text-shadow:-1px -1px 0 rgba(0,0,0,.8),1px -1px 0 rgba(0,0,0,.8),-1px 1px 0 rgba(0,0,0,.8),1px 1px 0 rgba(0,0,0,.8),
    0 1px 0 rgba(0,0,0,.8),0 -1px 0 rgba(0,0,0,.8),1px 0 0 rgba(0,0,0,.8),-1px 0 0 rgba(0,0,0,.8),0 2px 3px rgba(0,0,0,.5)}
.tbl.alts tbody tr[data-who].on td:first-child{box-shadow:inset 3px 0 0 var(--cc,var(--accent))}
.tbl.alts tbody tr td:first-child{padding-left:10px}
/* The unfolded sheet: a row of its own, joined to the row above it. */
.tbl.alts tbody tr.al-rx{cursor:default;background:none}
.tbl.alts tbody tr.al-rx td{border-top:0;padding:0 0 16px;box-shadow:none;vertical-align:top;font-size:inherit}
.al-rx-in{will-change:transform}
.al-rx .ch-detail{border-color:color-mix(in oklab,var(--accent) 45%,var(--line));border-top:2px solid var(--accent)}
/* The unfolded sheet in its character's colours: a calm shade of the class
   colour for the ground (--cx, from the script) and the class colour for its
   edges. Every block in it -- stats, the gear columns, each group of
   reputations, skills or recipes, each part of the history -- is a surface of
   its own, a step lighter with a hairline edge, so a long sheet reads as
   blocks instead of one blue field. The greys go one step lighter, as in
   the rows. */
.al-rx .ch-detail{background:var(--cx,var(--card));border-color:color-mix(in srgb,var(--cc,var(--accent)) 45%,var(--line));
  border-top:2px solid var(--cc,var(--accent));--blk:rgba(255,255,255,.05);--blk-l:rgba(255,255,255,.11)}
body[data-flavor="forever"] .al-rx .ch-detail{--dim:#dde7ec;--dim2:#c8d6dd}
.al-rx .ch-detail .vp-tab[aria-selected="true"]{border-bottom-color:var(--cc,var(--accent))}
.al-rx .repg{background:var(--blk);border:1px solid var(--blk-l);padding:0 14px;margin:0 0 10px}
.al-rx .repg:last-child{border-bottom:1px solid var(--blk-l);margin-bottom:0}
.al-rx .ch-kv,.al-rx .doll-c,.al-rx .doll-w,.al-rx .hi>section{background:var(--blk);border:1px solid var(--blk-l);padding:12px 16px}
.al-rx .ch-pvp .ch-kv{margin-top:2px}
.tbl.alts thead th:first-child{padding-left:10px}
/* Rested XP as a share of the level, gold once it is worth half a level or
   more; the line above the table names the alt with the most. */
.al-rs{font-family:var(--mono);font-size:13px;color:var(--dim)}
.al-rs.hi{color:var(--accent)}
.al-hint{margin:0;font-size:13px;color:var(--dim)}
.al-merge{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.al-merge b{font-weight:600;color:var(--fg)}
/* display:flex above would otherwise win over [hidden] and leave an empty
   bordered box whenever there is nothing to suggest. */
.al-merge[hidden]{display:none}
.ch-mg{font:inherit;font-size:11px;background:var(--well);color:var(--dim);border:1px solid var(--line);padding:2px 6px;margin-left:6px;cursor:pointer}
.ch-mg:hover{color:var(--fg)}
.al-hint b{font-weight:400;color:var(--cc,var(--fg))}
/* An alt not synced for a while: the date turns warm, the tooltip says
   where it was left. */
/* ---- recipes: one profession's list, the game's window as a page ---------- */
.rv{display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);padding:22px 24px;min-width:0;white-space:normal}
.rv-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.rv-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rv-t img{border:1px solid var(--frame)}
.rv-t b{font-family:Cinzel,Georgia,serif;font-size:17px;font-weight:400;color:var(--fg)}
.rv-t .mono{font-size:11px}
.rv-f{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rv-q{background:var(--bg);border:1px solid var(--line);color:var(--fg);font:inherit;font-size:12.5px;padding:6px 10px;width:220px;max-width:100%}
.rv-q:focus{outline:none;border-color:var(--accent)}
.rv-f label{font-size:10.5px;letter-spacing:.06em;color:var(--dim);display:flex;align-items:center;gap:6px;cursor:pointer}
.rv-key{display:flex;gap:14px;flex-wrap:wrap;font-size:10px;color:var(--dim2)}
.rv-key>span{display:flex;align-items:center;gap:5px}
.rv-key .rv-note{margin-left:auto}
.rv-d{width:8px;height:8px;flex:none;display:inline-block;border:1px solid #000}
.rv-d.d0{background:#ff8040}.rv-d.d1{background:#ffd200}.rv-d.d2{background:#40bf40}.rv-d.d3{background:#808080}
.rv-l{display:flex;flex-direction:column;gap:1px}
.rv-g{display:flex;flex-direction:column}
.rv-r{display:grid;grid-template-columns:8px minmax(160px,1.1fr) 2fr 70px;gap:12px;align-items:center;padding:7px 0;
  border-top:1px solid color-mix(in srgb,var(--fg) 6%,transparent);font-size:12.5px}
.rv-r:first-child{border-top:0}
.rv-n{min-width:0}
.rv-n a{color:var(--fg);text-decoration:none}
.rv-n a:hover{text-decoration:underline}
.rv-x{margin-left:6px;font-family:var(--mono);font-size:10.5px;color:var(--dim2)}
.rv-need{display:flex;flex-wrap:wrap;gap:4px 12px}
.rv-rg{display:inline-flex;align-items:baseline;gap:5px;font-size:11.5px}
.rv-rg b{font-family:var(--mono);font-weight:400;font-size:10.5px;color:var(--dim)}
.rv-rg a{color:var(--dim);text-decoration:none}
.rv-rg a:hover{color:var(--fg)}
.rv-rg i{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--dim2);border:1px solid var(--line);padding:0 4px}
.rv-rg.short i{color:var(--danger-fg,#e06c5a);border-color:color-mix(in oklab,var(--danger-fg,#e06c5a) 40%,transparent)}
.rv-k{font-size:10.5px;color:var(--accent);text-align:right}
.rv-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.rv-tab{display:flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);color:var(--dim);font-size:11px;padding:4px 10px 4px 4px;cursor:pointer}
.rv-tab img{border:1px solid var(--frame)}
.rv-tab[aria-pressed=true]{border-color:var(--accent);color:var(--fg)}
.ch-pane .rv{background:none;border:0;box-shadow:none;padding:0}
.rv-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;font-size:11px}
.rv-url{flex:1 1 260px;min-width:0;background:var(--bg);border:1px solid var(--line);color:var(--fg);
  font-family:var(--mono);font-size:11px;padding:5px 8px}
.share{display:flex;flex-direction:column;gap:22px}
.sh-foot{margin:0;font-size:12px;color:var(--dim2)}
.sh-foot a{color:var(--accent)}
@media (max-width:700px){
  .rv-r{grid-template-columns:8px 1fr auto;gap:6px 10px}
  .rv-need{grid-column:2 / -1;grid-row:2}
  .rv-key .rv-note{margin-left:0}
}
/* ---- professions, account-wide: every alt's recipe lists read together ----
   The recipe sheet's own parts (skill-up dots, reagent chips, folding groups)
   in a card of its own under the table, tabbed like the sheet. */
.pf{display:flex;flex-direction:column;gap:14px;min-width:0}
.pf-card{background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);padding:24px 26px;display:flex;flex-direction:column;gap:18px;min-width:0}
.pf-pane{display:flex;flex-direction:column;gap:14px;min-width:0}
.pf-out{display:flex;flex-direction:column;gap:12px;min-width:0}
.pf-note{margin:0;font-size:11.5px;color:var(--dim2);line-height:1.6;max-width:84ch;text-wrap:pretty}
.pf-sum{margin:0;font-size:13.5px;color:var(--fg)}
.pf-bar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.pf-bar label{font-size:10.5px;letter-spacing:.06em;color:var(--dim);display:flex;align-items:center;gap:6px;cursor:pointer}
.pf-q,.pf-sel,.pf-num,.pf-w{background:var(--bg);border:1px solid var(--line);color:var(--fg);font-size:12.5px;padding:6px 10px;max-width:100%;min-width:0}
.pf-q,.pf-w{width:300px}
.pf-sel{max-width:min(100%,420px)}
.pf-num{width:76px}
.pf-q:focus,.pf-sel:focus,.pf-num:focus,.pf-w:focus{outline:none;border-color:var(--accent)}
.pf-sel option,.pf-sel optgroup{background:var(--card);color:var(--fg)}
.pf-sh{margin:0 0 14px}
.pf-sh .rv-share{margin:0}
.ash-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px;font-size:13px}
.ash-c{display:inline-flex;align-items:center;gap:6px;color:var(--cc,var(--fg));cursor:pointer}
.ash-c input{width:auto;margin:0;accent-color:var(--accent)}
.acc-q input{width:100%;max-width:520px;font:inherit;font-size:15px;padding:10px 12px;background:var(--well);color:var(--fg);border:1px solid var(--line)}
.acc-q input:focus{outline:none;border-color:var(--accent)}
.acc-hits{display:flex;flex-direction:column;margin:10px 0 18px}
.acc-hits:empty{display:none}
.acc-hit{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:8px 0;border-bottom:1px solid var(--line2);font-size:14px}
.acc-hit>a{min-width:220px}
.acc-who{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--cc,var(--fg));cursor:pointer}
.acc-who:hover{text-decoration:underline}
.acc-hit .mono{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.acc-chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:0 0 20px}
.acc-c{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;text-align:left;font:inherit;cursor:pointer;
  background:color-mix(in srgb,var(--cc,var(--accent)) 12%,var(--card));color:var(--fg);border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--cc,var(--accent))}
.acc-c:hover{border-color:var(--cc,var(--accent))}
.acc-c[aria-pressed="true"]{border-color:var(--cc,var(--accent));background:color-mix(in srgb,var(--cc,var(--accent)) 22%,var(--card))}
.acc-n{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:16px;color:var(--cc,var(--fg));
  /* Lifted toward white: the chip itself is tinted with the class colour, so the
     darker class colours (Shaman #0070DD) vanished into their own card. */
  color:color-mix(in oklab,var(--cc,var(--fg)) 62%,#fff);
  text-shadow:-1px -1px 0 rgba(0,0,0,.7),1px -1px 0 rgba(0,0,0,.7),-1px 1px 0 rgba(0,0,0,.7),1px 1px 0 rgba(0,0,0,.7)}
.acc-m{font-size:11px;color:var(--dim)}
.acc-p{display:flex;flex-wrap:wrap;gap:8px}
.acc-p>span{display:inline-flex;align-items:center;gap:3px}
.acc-p i{font-style:normal;font-size:11px;color:var(--dim)}
.pf-hits{display:flex;flex-direction:column;gap:6px}
.pf-hits:empty{display:none}
.pf-hit{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:10px 14px;font-size:13px;
  border:1px solid color-mix(in oklab,var(--accent) 45%,var(--line));background:color-mix(in oklab,var(--accent) 8%,var(--card))}
.pf-hit>b{font-weight:500;color:var(--accent)}
.pf-hit a:not(.pf-who){color:var(--fg)}
.pf-hit .lnk-btn{margin-left:auto}
.pf-rec{padding:10px 0;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:7px;min-width:0}
.pf-rec:first-child{border-top:0}
.pf-rh{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:13px}
.pf-rh img,.pf-p img{border:1px solid var(--frame);flex:none}
.pf-rh a{color:var(--fg);text-decoration:none}
.pf-rh a:hover{text-decoration:underline}
.pf-rh .mono{font-size:10.5px}
.pf-pool{margin-left:auto}
.pf-hs{display:flex;flex-direction:column;gap:4px;padding-left:12px;border-left:1px solid var(--line)}
.pf-h{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;font-size:12px;min-width:0}
.pf-h .mono{font-size:10.5px}
.pf-who{font-family:Cinzel,Georgia,serif;font-size:14px;letter-spacing:.02em;text-decoration:none;color:var(--fg)}
a.pf-who:hover{text-decoration:underline}
.pf-ok{color:var(--accent)}
.pf-bad{color:var(--danger-fg,#e06c5a)}
.pf-pick{padding:12px 14px;border:1px solid color-mix(in oklab,var(--accent) 40%,var(--line));display:flex;flex-direction:column;gap:6px}
.pf-pick p{margin:0;font-size:13.5px}
.pf-p{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-p b{font-family:Cinzel,Georgia,serif;font-size:16px;font-weight:400;color:var(--fg)}
.pf-p .mono{font-size:10.5px}
.pf-grp{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.pf-grp:first-child{border-top:0;padding-top:0}
.pf-miss{margin:0;padding:6px 0 10px 16px;display:flex;flex-direction:column;gap:4px;font-size:12px}
.pf-miss a{color:var(--fg);text-decoration:none}
.pf-miss a:hover{text-decoration:underline}
.pf-miss li::marker{color:var(--off)}
.pf-miss .mono{font-size:10px;color:var(--dim2);margin-left:8px}
.pf-m{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:4px 14px;align-items:center;padding:8px 0;border-top:1px solid var(--line2);font-size:12.5px}
.pf-m:first-child{border-top:0}
.pf-m>span:first-child{display:flex;align-items:center;gap:8px;color:var(--fg)}
.pf-m>span:first-child img{border:1px solid var(--frame)}
.pf-m .mono{font-size:10.5px}
.tbl.pf-t{min-width:560px}
.tbl.pf-t a:not(.pf-who){color:var(--fg);text-decoration:none}
.tbl.pf-t .pf-who{font-size:13px}
.rv-r.pf-r{grid-template-columns:8px minmax(160px,1.1fr) 2fr 150px}
.pf-r .rv-k{white-space:normal}
@media (max-width:700px){
  .pf-card{padding:14px 12px}
  .rv-r.pf-r{grid-template-columns:8px 1fr auto}
  .pf-m{grid-template-columns:1fr}
  .pf-pool{margin-left:0}
}
#al-sum:empty{display:none}
/* ---- your characters, from the addon --------------------------------------
   Same bones as the vault hero: the panel on the left, the sync card on the
   right. The list is one card per character; the card you pick opens the
   sheet below it, tabbed the way the game tabs it. */
.chars{display:flex;flex-direction:column;gap:22px}
.ch-main{min-width:0;display:flex;flex-direction:column;gap:22px}
/* Addon sync and item search used to sit as permanent strips above the
   roster; both are now a button beside the heading that opens the same
   .inv-box lightbox the bag/bank popup uses, so the roster starts right
   under the heading and the two tools cost one row between them. */
.ch-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ch-sync-b{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
/* Addon sync: the import steps, then the two downloads as plain cards. */
.sync-dlg{width:min(640px,94vw);gap:16px;max-height:min(760px,92vh);overflow-y:auto}
.sync-dlg .ch-sync-in{flex:none}
.sync-step{display:flex;flex-direction:column;gap:10px}
.sync-k{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px}
.sync-k::before{content:"";width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
.sync-ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.55;color:var(--dim)}
.sync-ol code{color:var(--accent2)}
.sync-dlg .wk-imp-m{margin:0}
.sync-dlg .wk-imp-m:empty{display:none}
.dlx{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
.dlx-i{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:rgba(0,0,0,.22);border:1px solid var(--line)}
.dlx-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.dlx-h b{font-family:Cinzel,Georgia,serif;font-size:16px;color:var(--fg)}
.dlx-v{font-size:11px;color:var(--dim2);letter-spacing:.06em}
.dlx-i p{margin:0;font-size:13px;line-height:1.55;color:var(--dim)}
.dlx-i p a{color:var(--accent2)}
.dlx-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:auto}
.dlx-a .btn-gold,.dlx-a .obtn{text-decoration:none;padding:11px 16px;font-size:12px}
.dlx-z{font-size:11.5px;color:var(--dim);text-decoration:none}
.dlx-z:hover{color:var(--accent)}
.dlx-tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2);border:1px solid var(--line);padding:3px 7px}
.scard .dlx{margin-top:auto}
.ch-sync-in{display:flex;gap:8px;flex:1 1 360px;min-width:0}
.ch-sync-in input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);color:var(--fg);
  font-family:var(--mono);font-size:12px;padding:7px 10px}
.ch-sync-in input:focus{outline:none;border-color:var(--accent)}
.ch-sync-in .btn-gold{flex:none}
.ch-sync-dl{display:flex;gap:16px;flex-wrap:wrap;font-size:11px}
.ch-sync-dl a{color:var(--dim);text-decoration:none;white-space:nowrap}
.ch-sync-dl a:hover{color:var(--accent)}
.ch-sync-b .wk-imp-m{flex-basis:100%;margin:0}
.ch-sync-b .wk-imp-m:empty{display:none}
/* One box, gear and bags and bank all read the same way: type, see who has
   it and where. */
.ch-find-b{display:flex;flex-direction:column;gap:10px}
.ch-find-b input{background:var(--bg);border:1px solid var(--line);color:var(--fg);
  font-family:var(--mono);font-size:12px;padding:7px 10px}
.ch-find-b input:focus{outline:none;border-color:var(--accent)}
.ch-find-r{display:flex;flex-direction:column;gap:1px;background:var(--line2)}
.ch-find-r:empty{display:none}
.cf-r{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--card);font-size:12.5px}
.cf-r a{color:inherit;text-decoration:none}
.cf-r a:hover{text-decoration:underline}
.cf-w{color:var(--cc,var(--fg));flex:none;width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-k{flex:none;width:9ch;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2)}
.cf-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-c{flex:none;font-family:var(--mono);color:var(--dim)}
.ch-list{display:flex;flex-direction:column;gap:14px;min-width:0}
.ch-empty{margin:0;padding:24px 26px;border:1px dashed var(--edge);background:rgba(0,0,0,.18);color:var(--dim);font-size:14px;line-height:1.65}
.ch-empty code{font-family:var(--mono);color:var(--fg)}
.ch-detail{background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);padding:24px 26px;display:flex;flex-direction:column;gap:20px;min-width:0}
.ch-detail .vp-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ch-pane{min-width:0}
/* The bag/bank, addon sync and item search lightboxes: a native <dialog>,
   but opened with .show() rather than .showModal(). A modal dialog is
   promoted to the browser's top layer, which paints above literally
   everything else in the page regardless of z-index -- including the
   Wowhead tooltip script's, so an item's tooltip inside one of these boxes
   would render half hidden behind the box that named it. .show() keeps the
   dialog in ordinary stacking order (see z-index below, comfortably under
   Wowhead's), at the cost of doing the backdrop (#dlg-bg, a plain element
   now, not ::backdrop) and Esc-to-close by hand instead of for free.
   Sized to the content, not the viewport -- a bag of eight items should not
   open full-screen. The display property must stay scoped to [open]: any
   author rule for it, even at lower specificity, overrides the UA
   stylesheet's dialog:not([open]){display:none}, so an unscoped
   display:flex here shows the empty dialog on every page load instead of
   only when opened. */
.inv-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;z-index:41;
  width:min(600px,94vw);max-height:min(640px,84vh);padding:22px 24px;
  background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.35)),var(--bg2);color:var(--fg);border:1px solid var(--edge);
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.25),inset 0 0 0 5px var(--edge),0 30px 60px rgba(0,0,0,.6)}
.inv-box[open]{display:flex;flex-direction:column;gap:14px}
.dlg-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40}
.inv-h{display:flex;align-items:center;gap:10px}
.inv-t{font-family:Cinzel,Georgia,serif;font-size:19px;font-weight:700;color:var(--accent2)}
.inv-when{flex:1;min-width:0}
/* Close, always top right and big enough to find: margin-left:auto pushes it
   there whatever the text before it is (the bag header's line is short, and
   the button used to sit right after it). Shared by every lightbox. */
/* Previous/next character either side of the name -- hidden (see the .hid
   rule, not [hidden]: .inv-nav has no display of its own to fight, but every
   other toggle in this dialog uses .hid, so this stays consistent) when the
   roster behind the dialog is one character, since there is nothing to step
   to. */
.inv-nav{flex:none;background:none;border:0;padding:2px 4px;font-size:18px;line-height:1;
  color:var(--dim2);cursor:pointer;transition:color .15s}
.inv-nav:hover{color:var(--accent)}
.inv-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Bags/Bank as a second tab row under the name -- reuses .vp-tab's own
   look (the character sheet's Stats/Gear/... tabs) rather than a new style.
   Hidden the same way, when the character behind the dialog has only one of
   the two. */
.inv-tabs{padding-bottom:10px;border-bottom:1px solid var(--line)}
.app-dl{width:min(460px,94vw);max-height:none}
.app-dl::backdrop{background:rgba(0,0,0,.6)}
.app-dl p{margin:0;font-size:14px;line-height:1.6;color:var(--dim)}
.app-dl p b{color:var(--fg)}
.app-dl .app-dl-n{font-size:12.5px;color:var(--dim2)}
.app-dl .btn-gold{align-self:flex-start;text-decoration:none;padding:13px 20px}
.inv-x{margin:-4px -6px -4px auto;flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0;
  background:rgba(255,255,255,.03);border:1px solid var(--edge);color:var(--fg);font-size:22px;line-height:1;cursor:pointer;
  transition:border-color .15s,color .15s}
.inv-x:hover{border-color:var(--accent);color:var(--accent)}
.inv-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The Features drawer: everything the site does, sliding in from the right.
   Shown by .open (the script) or :target (a bare #features link before the
   script has run). The page behind stops scrolling while it is open. */
.feat{display:none;position:fixed;inset:0;z-index:50}
.feat:target,.feat.open{display:block}
.feat-bg{position:absolute;inset:0;background:rgba(0,0,0,.62);cursor:default}
.feat-p{position:absolute;top:0;right:0;bottom:0;width:min(620px,100vw);display:flex;flex-direction:column;
  background:radial-gradient(500px 360px at 90% 0,var(--glow-a),transparent 70%),var(--bg);border-left:1px solid var(--edge);
  box-shadow:-24px 0 60px rgba(0,0,0,.45);animation:feat-in .22s ease-out}
@keyframes feat-in{from{transform:translateX(48px);opacity:0}}
@media (prefers-reduced-motion:reduce){.feat-p{animation:none}}
.feat-hd{display:flex;align-items:flex-start;gap:12px;padding:22px 24px 14px}
.feat-hd>div{flex:1;min-width:0}
.feat-hd h2{margin:8px 0 0;font-size:28px;line-height:1.15}
.feat-tabs{display:flex;gap:2px;padding:0 24px;border-bottom:1px solid var(--line);overflow-x:auto}
.feat-tab{padding:10px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:var(--dim);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.feat-tab:hover{color:var(--fg)}
.feat-tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.feat-b{flex:1;min-height:0;overflow-y:auto;padding:4px 24px 24px;overscroll-behavior:contain}
.feat.tabbed .feat-sec[data-off],.feat.tabbed .feat-sh{display:none}
.feat-sh{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.feat-sh::before{content:"";width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
.ft{padding:20px 0;border-bottom:1px solid var(--line2)}
.ft:last-child{border-bottom:0}
.ft-t{margin:0 0 6px;font-size:18px;line-height:1.3;color:var(--accent2)}
.ft-p{margin:0 0 12px;color:var(--dim);font-size:14px;line-height:1.6;text-wrap:pretty}
.ft-i{display:block;width:100%;height:auto;margin:0 0 10px;border:1px solid var(--line);background:var(--card)}
/* A picture opens full size on click: a link to the image itself, so it
   still works without the script, which turns it into the .zoom overlay. */
.ft-z{display:block;position:relative;cursor:zoom-in}
.ft-z::after{content:"Click to enlarge";position:absolute;top:8px;right:8px;padding:3px 8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.7);opacity:0;transition:opacity .15s}
.ft-z:hover::after,.ft-z:focus-visible::after{opacity:1}
.ft-z:hover .ft-i{border-color:var(--accent)}
.ft-z:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.zoom{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:56px 24px 24px;
  background:rgba(0,0,0,.86);cursor:zoom-out}
.zoom[hidden]{display:none}
.zoom img{display:block;max-width:min(1400px,96vw);max-height:calc(100vh - 90px);width:auto;height:auto;
  border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.zoom .inv-x{position:absolute;top:14px;right:16px;margin:0}
.ft-l{font-size:11px;color:var(--accent);text-decoration:none}
.ft-l:hover{color:var(--accent2)}
.feat-ft{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid var(--edge);background:var(--bg2)}
.feat-ft span{flex:1;min-width:160px;font-size:13px;color:var(--dim)}
.feat-ft .btn-gold{text-decoration:none;display:inline-block}
body.feat-lock{overflow:hidden}
@media (max-width:640px){.feat-hd{padding:16px 16px 10px}.feat-tabs{padding:0 16px}.feat-b{padding:4px 16px 20px}.feat-ft{padding:12px 16px}}
/* Bags and bank as the game draws them: icon slots with the stack count in
   the corner and a border in the item's quality colour, grouped by item class
   (Equipment, Consumables, Crafting...), each group split by subclass. The
   small subgroups sit side by side, so a bag of forty kinds of thing stays
   one screen tall. */
.inv-grid{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:14px}
/* The scroll box clips at its own edge, and the hover outline below sits 3px
   outside a slot: without this room the first column and the last row lost
   the left and bottom of it. Pulled back out with the negative margin, so
   the icons still line up with the heading above. */
.inv-grid{padding:3px;margin:-3px}
.inv-g{display:flex;flex-direction:column;gap:6px}
.inv-gh{margin:0;font-size:12.5px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px}
.inv-gh::after{content:"";flex:1;height:1px;background:var(--line)}
.inv-subs{display:flex;flex-wrap:wrap;gap:8px 18px}
.inv-sub{display:flex;flex-direction:column;gap:4px;min-width:0}
.inv-sh{font-size:10.5px;color:var(--dim)}
.inv-slots{display:flex;flex-wrap:wrap;gap:4px}
.inv-s{position:relative;width:40px;height:40px;flex:none;display:block;border:1px solid var(--line);
  background:var(--well);overflow:hidden;text-decoration:none}
.inv-s img{display:block;width:100%;height:100%;object-fit:cover}
.inv-s b{position:absolute;right:2px;bottom:0;font-family:var(--mono);font-size:11px;font-weight:600;line-height:1.3;
  color:#fff;text-shadow:0 0 2px #000,0 0 2px #000,1px 1px 1px #000}
.inv-s:hover,.inv-s:focus-visible{outline:2px solid var(--accent2);outline-offset:1px}
.inv-s.q2{border-color:#1eff00}.inv-s.q3{border-color:#0070dd}.inv-s.q4{border-color:#a335ee}.inv-s.q5{border-color:#ff8000}
.inv-s.q0 img{filter:saturate(.6) brightness(.85)}
.inv-s.wait{background:linear-gradient(110deg,var(--well) 30%,var(--bg2) 50%,var(--well) 70%);background-size:200% 100%;
  animation:inv-wait 1.2s linear infinite}
@keyframes inv-wait{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.inv-s.wait{animation:none}}
.ch-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 28px}
.ch-kv .kv{font-size:13px}
.ch-kv .kv span:last-child{font-family:var(--mono);color:var(--fg)}
.ch-reps{display:flex;flex-direction:column;gap:1px}
.ch-reps .repg-b{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.rep-s{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--dim2)}
/* No r1..r8 classes on these: Wowhead's tooltip stylesheet, loaded on the
   same pages, owns .r1-.r4 (its recipe colours) and painted Hostile's text
   pure yellow. The row's data-st carries the standing instead. */
/* Each standing its own colour, red (Hated) through yellow (Neutral) and
   green to blue (Revered) and purple (Exalted), on the bar, the "... to X"
   line, a badge and a stripe down the left, so the level reads at a glance
   down a whole list. Every one keeps a contrast of 4.5 or more on the
   panels it sits on. Only rows that carry data-st (Forever's reputation
   window and sheet); retail's Battle.net rows keep their own look. */
.rep[data-st="1"]{--st:#ff9a94}.rep[data-st="2"]{--st:#ffab86}.rep[data-st="3"]{--st:#ffc27a}.rep[data-st="4"]{--st:#f2dc6a}
.rep[data-st="5"]{--st:#8fe06e}.rep[data-st="6"]{--st:#4fdcb4}.rep[data-st="7"]{--st:#7ccbff}.rep[data-st="8"]{--st:#d2adff}
.rep[data-st]{padding-left:10px;box-shadow:inset 3px 0 0 var(--st)}
.rep[data-st] .rep-s{color:var(--st)}
.rep[data-st] .rep-t{height:4px;background:color-mix(in srgb,var(--st) 16%,var(--line))}
.rep[data-st] .rep-t i{background:var(--st);}
.rep-b{display:inline-block;margin-left:2px;padding:0 6px;line-height:1.6;
  color:var(--st,var(--dim2));border:1px solid color-mix(in srgb,var(--st,var(--dim2)) 45%,transparent);
  background:color-mix(in srgb,var(--st,var(--dim2)) 12%,transparent)}
.ch-pvp{display:flex;flex-direction:column;gap:14px}
.ch-pvp .big{font-family:Cinzel,Georgia,serif;font-size:26px;color:var(--fg)}
.ch-none{margin:0;color:var(--dim);font-size:13px}
/* The History tab: the character's own past, the account's gold as one
   quiet line, and the journal of every character under it. */
.hi{display:flex;flex-direction:column;gap:22px}
.hi-h{margin:0 0 8px}
.hi-l{list-style:none;margin:0;padding:0}
.hi-l li{display:flex;justify-content:space-between;align-items:baseline;gap:4px 14px;flex-wrap:wrap;
  padding:6px 0;border-bottom:1px solid var(--line2);font-size:13px;color:var(--fg)}
.hi-t{min-width:0}
.hi-w{font-weight:600}
.hi-a{font-size:10.5px;color:var(--dim2);white-space:nowrap}
.hi-sp svg{display:block;width:100%;height:48px;overflow:visible;cursor:crosshair}
.hi-sl{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hi-x{stroke:var(--dim2);stroke-width:1;vector-effect:non-scaling-stroke}
.hi-cap{margin:6px 0 0;font-size:11px;color:var(--dim)}
.hi-f{margin:0}
.ch-nudge{display:flex;align-items:center;gap:8px;margin:14px 0 0;color:var(--dim);font-size:13px}
.ch-nudge img{border:1px solid var(--frame);flex:none}
.ch-rm{background:none;border:0;padding:0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--off);cursor:pointer}
.ch-rm:hover{color:var(--danger-fg)}
/* Role tags: small chips under an alt's name, and a row of the same chips
   over the table to show only the alts that carry one. */
.al-tags{display:flex;flex-wrap:wrap;align-items:center;gap:3px;max-width:200px;margin-top:2px;white-space:normal}
.al-tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;line-height:15px;color:var(--dim);border:1px solid var(--line);padding:0 5px;
  background:none;cursor:default}
.al-tx,.al-ta{background:none;border:0;padding:0;font-family:var(--mono);font-size:10px;line-height:15px;
  color:var(--off);cursor:pointer}
.al-tx:hover,.al-ta:hover{color:var(--accent)}
.al-ta{letter-spacing:.06em;text-transform:uppercase;font-size:9.5px}
@media (hover:hover){.tbl.alts tbody tr:not(:hover) .al-ta:not(:focus){opacity:0}}
button.al-ts{cursor:pointer;border-style:dashed}
button.al-ts:hover{color:var(--accent);border-color:var(--accent)}
.al-ti{width:92px;background:var(--bg);border:1px solid var(--line);color:var(--fg);font-family:var(--mono);
  font-size:10.5px;padding:1px 5px}
.al-ti:focus{outline:none;border-color:var(--accent)}
.al-tf{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.al-tf:empty{display:none}
.al-tf .lbl{margin-right:4px}
.al-tf .al-tag{cursor:pointer;font-size:10px;line-height:20px;padding:0 8px}
.al-tf .al-tag i{font-style:normal;color:var(--dim2)}
.al-tf .al-tag:hover{color:var(--fg)}
.al-tf .al-tag[aria-pressed=true]{color:var(--accent);border-color:var(--accent);
  background:color-mix(in oklab,var(--accent) 10%,transparent)}
/* An account-wide reading under the table: a few calm lines on what to roll
   next. Reputation spread used to sit beside it as a fold; it is a lightbox
   off the toolbar now, same as addon sync and item search, so .ch-box only
   has the one card left to lay out. */
.ch-x{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-start}
.ch-x[hidden]{display:none}
.ch-box{flex:2 1 460px;min-width:0;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);padding:22px 24px}
.ch-box.ch-next{flex:1 1 260px;display:flex;flex-direction:column;gap:10px}
.ch-box-s{margin:12px 0 4px;font-size:12px;color:var(--dim)}
.rep-w{grid-column:1 / -1;font-family:var(--mono);font-size:10px;color:var(--dim2);
  display:flex;gap:6px;align-items:baseline;min-width:0}
.rep-w button{background:none;border:0;padding:0;font:inherit;font-size:10.5px;color:var(--cc,var(--fg));cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-w button:hover{text-decoration:underline}
.ch-gap{margin:0;font-size:13px;color:var(--dim);line-height:1.6}
.ch-gap-l{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:6px}
.ch-gap-l span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--fg)}
.ch-gap-l img{border:1px solid var(--frame)}
/* The paper doll: two columns of slots and the weapons under them, the
   game's own order, an empty slot drawn as a gap rather than left out. */
.doll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.doll-c{display:flex;flex-direction:column}
.doll-w{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin-top:14px;
  border-top:1px solid var(--line);padding-top:6px}
.doll-a{margin:0 0 12px;font-size:11px;letter-spacing:.08em;color:var(--dim2)}
.gr{display:grid;grid-template-columns:72px minmax(0,1fr) 34px;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line2);font-size:13px}
.gr-s{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2)}
.gr-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.gr.empty .gr-n{color:var(--off)}
.gr-l{font-size:11px;color:var(--dim2);text-align:right}
@media (max-width:720px){.ch-list{grid-template-columns:minmax(0,1fr)}.doll{grid-template-columns:minmax(0,1fr)}.doll-w{grid-template-columns:minmax(0,1fr)}}
.nav{display:flex;flex-direction:column;gap:2px;font-size:15px}
.navlink{color:var(--dim2);padding:11px 14px;white-space:nowrap;border-left:2px solid transparent;transition:color .15s,background .15s}
.navlink:hover{color:var(--fg);background:rgba(255,255,255,.03)}
/* Where you are: a gold edge, a gold wash fading to the right, and a little
   of the gold bleeding in off the edge. */
.navlink.on{color:var(--fg);border-left-color:var(--accent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 20%,transparent),transparent);
  box-shadow:inset 8px 0 20px -12px var(--accent)}
/* The class jump list, colour-coded, reachable from every page: each class
   behind a small lit dot of its own colour. */
.rcls-list{display:flex;flex-direction:column;gap:1px;font-size:13px;padding:0 0 0 2px}
.rcls{display:flex;align-items:center;gap:10px;padding:4px 14px;color:var(--cc)}
.rcls::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--cc);
  box-shadow:0 0 8px var(--cc);opacity:.85}
.rcls:hover{color:var(--cc);background:rgba(255,255,255,.03)}
.rcls:hover::before{opacity:1}
/* Below the rail breakpoint: a sticky bar and a panel it opens. */
.topbar{display:none;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px;border-bottom:1px solid var(--edge);position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg2) 94%,transparent);backdrop-filter:blur(8px)}
/* In the bar the wordmark runs on one line, the flavor tag beside it, so the
   bar stays one thumb tall. */
.topbar .wm{flex-direction:row;align-items:baseline;gap:7px;font-size:17px}
.topbar .wm-f{margin:0}
.topbar .wm-f-ph{display:none}
.burger{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-8px -10px -8px 0;background:none;border:0;cursor:pointer}
.burger i{width:20px;height:2px;background:var(--fg);transition:transform .18s,opacity .18s}
/* Open, the three bars fold into a cross. */
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobmenu{display:none;flex-direction:column;gap:2px;padding:14px 8px 22px;
  background:var(--bg2);border-bottom:1px solid var(--edge);position:sticky;top:53px;z-index:29;
  box-shadow:0 24px 40px -20px rgba(0,0,0,.7);max-height:calc(100vh - 53px);overflow-y:auto;overscroll-behavior:contain}
.mobmenu .navlink{font-size:15px;padding:12px 14px}
.mob-cls-h{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim2);padding:0 12px;margin-top:16px}
.mob-cls-h::before{content:"";width:6px;height:6px;background:var(--accent);transform:rotate(45deg)}
.mob-cls{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px;margin-top:10px}
.mob-cls .rcls{padding:8px 10px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
/* Forever: the rail is parchment, a gradient of the logo's flat tan, with a
   hairline frame drawn inside it; everything on it is dark ring brown, bold
   enough to read on the lighter ground. */
body[data-flavor="forever"] .rail,body[data-flavor="forever"] .mobmenu{
  background:linear-gradient(180deg,#d1b68d,#b99a70);color:#2b2115;
  box-shadow:inset -1px 0 0 rgba(0,0,0,.2),8px 0 30px rgba(0,0,0,.25);--line:rgba(43,33,21,.22);
  scrollbar-color:rgba(43,33,21,.3) transparent}
body[data-flavor="forever"] .rail{border-right:0;outline:1px solid rgba(43,33,21,.3);outline-offset:-10px}
body[data-flavor="forever"] .mobmenu{border-bottom:1px solid rgba(43,33,21,.35)}
body[data-flavor="forever"] .rail .brand{color:#2b2115}
body[data-flavor="forever"] .rail .wm-f,body[data-flavor="forever"] .rail .rail-foot p{color:#4a3a22}
body[data-flavor="forever"] .rail .navlink,body[data-flavor="forever"] .mobmenu .navlink{color:#2b2115;font-weight:500}
body[data-flavor="forever"] .rail .navlink:hover,body[data-flavor="forever"] .mobmenu .navlink:hover{
  color:#170f07;background:rgba(43,33,21,.08)}
body[data-flavor="forever"] .rail .navlink.on,body[data-flavor="forever"] .mobmenu .navlink.on{
  color:#170f07;font-weight:600;background:rgba(43,33,21,.16);border-left-color:#2b2115;box-shadow:none}
body[data-flavor="forever"] .mobmenu .mob-cls-h{color:#4a3a22}
/* Group headings in a grouped menu (Forever's, see NAV_GROUPS): the same small
   kicker as the Classes heading, with air above so each group reads as one. */
.nav-h{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim2);padding:0 14px;margin:18px 0 4px}
.nav-h::before{content:"";flex:none;width:6px;height:6px;background:var(--accent);transform:rotate(45deg)}
body[data-flavor="forever"] .nav-h{color:#4a3a22}
body[data-flavor="forever"] .nav-h::before{background:#2b2115;opacity:.6}
/* The switch on Forever: a well of the page's own teal with the current game
   lit in the game's teal, so it reads as a piece of the other surface. */
body[data-flavor="forever"] .flv{background:#073d58;border-color:#04202b;box-shadow:inset 0 0 0 1px rgba(140,210,220,.12)}
body[data-flavor="forever"] .flv-a{color:#9fc0c8}
body[data-flavor="forever"] .flv-a:hover{color:#eef5f3}
body[data-flavor="forever"] .flv-a.on,body[data-flavor="forever"] .flv-a.on:hover{color:#04202b;background:linear-gradient(180deg,#76d6c6,#5fbdae)}
/* The "signed in"/"admin" badges default to gold-on-gold (--accent/--key),
   unreadable on the parchment -- swap them for the same dark-brown ink the
   rest of the rail nav uses. */
body[data-flavor="forever"] .rail .navlink.acct::after,body[data-flavor="forever"] .mobmenu .navlink.acct::after{
  color:#170f07;border-color:rgba(23,15,7,.5);background:rgba(23,15,7,.16)}
body[data-flavor="forever"] .rail .navlink.adm::after,body[data-flavor="forever"] .mobmenu .navlink.adm::after{
  color:#170f07;border-color:rgba(23,15,7,.6);background:rgba(23,15,7,.22)}
/* One breakpoint decides the whole shell: the rail goes, the bar arrives. */
@media (max-width:980px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .topbar{display:flex}
  .mobmenu:not([hidden]){display:flex}
  .main{padding:26px 16px 70px;gap:34px}
  .cls{scroll-margin-top:70px}
}
/* An admin-only entry is labelled where it is used, so nobody has to remember
   which of these the public can actually see. */
/* De Account-link zegt zelf of je bent ingelogd, in hetzelfde idioom als de
   admin-badge hieronder. Dat hangt aan html.anon, dat in de <head> uit de
   pv_acct-cookie wordt gezet, dus het staat goed voordat er iets is getekend
   en het klopt op elke pagina, niet alleen op de accountpagina zelf. */
.navlink.acct{display:inline-flex;align-items:center;gap:7px}
html:not(.anon) .navlink.acct::after{content:"signed in";font-family:var(--mono);
  font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in oklab,var(--accent) 42%,transparent);
  background:color-mix(in oklab,var(--accent) 12%,transparent);padding:1px 4px}
.navlink.adm{display:inline-flex;align-items:center;gap:7px}
/* An admin-only entry ships hidden until the script sees the admin cookie;
   the display above would otherwise beat the hidden attribute. */
.navlink[hidden]{display:none}
.navlink.adm::after{content:"admin";font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--key);border:1px solid color-mix(in oklab,var(--key) 42%,transparent);background:color-mix(in oklab,var(--key) 12%,transparent);padding:1px 4px}
.adm-note{display:flex;align-items:center;gap:9px;margin:0 0 18px;padding:9px 13px;font-size:13px;color:var(--dim);border:1px solid color-mix(in oklab,var(--key) 34%,transparent);background:color-mix(in oklab,var(--key) 9%,transparent)}
.adm-note b{color:var(--key);font-weight:600}
.tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.tools input{width:190px}
.tools input,.tools select{background:var(--bg2);border:1px solid var(--line);padding:7px 10px;outline:none}
.tools input:focus,.tools select:focus{border-color:var(--accent)}
.card{display:block;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);color:inherit}
.card.pad{padding:24px 26px}
.card.soft{background:var(--bg2)}
.grid{display:grid;gap:14px}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:26px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.cls-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.stack{display:flex;flex-direction:column;gap:10px}
.stack.lg{gap:22px}
.stack.sm{gap:7px}
.meta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.feat{padding:18px}
.feat h3{margin:9px 0 7px;font-size:19px;font-weight:600}
.feat p{margin:0;color:var(--dim);font-size:14.5px}
.feat:hover{border-color:var(--accent);color:inherit}
.ch{margin:0 0 14px;font-size:15px;font-weight:600}
.ch.lg{margin:9px 0 4px;font-size:19px}
.note{color:var(--dim);font-size:14px;margin:0 0 16px}
/* ---- vault hero ---------------------------------------------------------- */
.vhero{display:flex;flex-wrap:wrap;gap:28px;align-items:stretch}
/* A wrapping flex row, not a two-column grid: a hard second column squeezes the
   panel instead of letting the side cards drop beneath it. */
.vpanel{flex:1 1 420px;min-width:0;background:var(--panel);
  border:1px solid var(--edge);box-shadow:var(--plate);padding:32px;display:flex;flex-direction:column;gap:24px}
.vp-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.lbl{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim2)}
/* A panel's own title: the label in gold behind the diamond. */
.scard>.lbl:first-child,.ch-box>.lbl:first-child,.vp-tabs.one .vp-tab,.vp-tab.lbl[aria-selected=true]{display:inline-flex;align-items:center;gap:10px;color:var(--accent)}
.scard>.lbl:first-child::before,.ch-box>.lbl:first-child::before,.vp-tabs.one .vp-tab::before,.vp-tab.lbl[aria-selected=true]::before{
  content:"";flex:none;width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
.vp-reset{font-size:12.5px;color:var(--dim2)}
.vp-reset b{font-weight:700;color:var(--accent2)}
/* The panel's heading is the first tab. Alone it is exactly the label it was
   before there was a second one; the switch only appears once the addon has
   sent something to switch to. */
.vp-tabs{display:flex;gap:20px;min-width:0;flex-wrap:wrap}
.vp-tab{background:none;border:0;padding:0 0 5px;font-family:inherit;cursor:pointer;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.vp-tabs.one .vp-tab{cursor:default}
.vp-tab[aria-selected=true]{border-bottom-color:var(--accent)}
.vp-tabs.one .vp-tab[aria-selected=true]{border-bottom-color:transparent}
.vp-tab:not([aria-selected=true]):hover{color:var(--fg)}
.vp-pane{display:flex;flex-direction:column;gap:24px;min-width:0}
/* ---- what the vault is holding ------------------------------------------- */
.vp-when{margin:0;font-size:11px;color:var(--dim2)}
.gvl{display:flex;flex-direction:column;gap:18px}
.gvg-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:9px}
.gvg-t{font-size:13px}
.gvg-n{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2)}
.gvi{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:2px 11px;
  align-items:center;padding:6px 0}
/* The comparison sits under the name, indented past the slot number, so the
   row still scans as one item rather than two columns of numbers. */
.gvi-c{grid-column:2 / -1;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.05em;color:var(--off)}
.gvi-c.up{color:var(--daily)}
.gvi-c.down{color:var(--faint)}
.gvi-c.open{color:var(--dim2)}
.gvi-c b{font-weight:400;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);border:1px solid color-mix(in oklab,var(--accent) 42%,transparent);
  background:color-mix(in oklab,var(--accent) 12%,transparent);padding:1px 4px;cursor:help}
/* The crest cost, on its own line under the comparison and indented to match
   it, so a row reads as one item: what it is, what it beats, what finishing it
   costs. Quieter than the comparison by default -- the comparison is why you
   would take the item at all, this is only what happens next. */
.gvi-k{grid-column:2 / -1;font-size:10px;letter-spacing:.05em;color:var(--off)}
/* Enough in the bag, and not enough. The same two readings the comparison
   above uses, in the same two colours, so one row does not speak two
   languages. */
.gvi-k.ok{color:var(--daily)}
.gvi-k.short{color:var(--faint)}
.gvi-s{font-size:10px;color:var(--faint);width:1.4em}
/* Wowhead's script drops its icon inside the link. Sized here so nine of them
   line up; with the script off the link stands alone and the row still reads. */
.gvi-a{display:flex;align-items:center;gap:9px;min-width:0;font-size:13.5px;font-weight:500;
  text-decoration:none;border:0}
.gvi-a .iconsmall,.gvi-a .icontiny,.gvi-a .iconmedium,.gvi-a .iconlarge{flex:none;width:26px;height:26px;
  display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.gvi-a .iconsmall ins,.gvi-a .icontiny ins,.gvi-a .iconmedium ins,.gvi-a .iconlarge ins{display:block;width:100%;height:100%;
  background-size:cover;background-position:center}
.gvi-a .iconsmall del,.gvi-a .icontiny del,.gvi-a .iconmedium del,.gvi-a .iconlarge del{display:none}
.gvi-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-bottom:1px solid color-mix(in oklab,currentColor 28%,transparent)}
.gvi-a:hover .gvi-n{border-bottom-color:currentColor}
/* The track is the quieter half of the pair: the item level is the number you
   compare, the track is what it is on. Empty for an export that predates the
   addon sending it, and an empty span takes no room. */
.gvi-t{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tc,var(--dim2));
  white-space:nowrap}
.gvi-l{font-size:12px;color:var(--accent)}
.gvi-l.none{color:var(--faint)}
/* The one row a vault history week's diff worked out was actually claimed
   (see vaulthist.php's pre_inv comparison): a small tag beside the name and a
   faint tint on the whole row, so it stands out among the other eight without
   drowning them. Uses the same green as an upgrade comparison -- this too is
   a "here is a fact" colour, not a warning. */
.gvi-take{background:color-mix(in oklab,var(--daily) 7%,transparent)}
.gvi-tk{flex:none;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--daily);border:1px solid color-mix(in oklab,var(--daily) 45%,transparent);
  background:color-mix(in oklab,var(--daily) 12%,transparent);padding:1px 5px;cursor:help}
.vp-foot{margin:0;font-size:12px;line-height:1.7;color:var(--dim)}
/* ---- vault history: what the vault offered in earlier weeks --------------- */
.vh-top{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.vh-lede{margin:0;font-size:12.5px;line-height:1.6;color:var(--dim)}
.vh-who .chip{font-size:11px;padding:5px 10px;color:var(--cc,var(--off))}
.vh-who .chip[aria-pressed=true]{border-color:var(--cc,var(--accent));color:var(--cc,var(--accent))}
.vh-wk{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--edge);padding-top:18px}
.vh-wh{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.vh-d{font-size:14px;font-weight:600;color:var(--fg)}
.vh-r{margin-left:10px;font-size:11px;color:var(--dim2)}
.vh-c{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding:3px 8px;white-space:nowrap}
.vh-c.no{color:var(--dim2);border-color:var(--edge)}
.vh-e{margin:0;font-size:13px;line-height:1.7;color:var(--dim)}
.vh-e a{color:var(--accent)}
.vh-more{align-self:flex-start}
.vh-more[hidden]{display:none}
.vp-b{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.vslots{flex:none;display:grid;grid-template-columns:repeat(3,62px);grid-auto-rows:58px;gap:8px}
/* A closed slot is a dark socket; it counts down to itself instead of sitting
   blank, grey and signed, so it can never be misread as an item level. */
.vslots i{display:flex;align-items:center;justify-content:center;font-style:normal;
  font:500 14px/1 var(--mono);color:var(--dim2);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.25));box-shadow:inset 0 0 0 1px var(--line);
  transition:background .18s,box-shadow .18s}
/* An open slot is lit in its track's own colour: a glow from the top, a
   2px edge and a halo, the item level in white on it. The colours are the
   five the loot tables use, so nine squares say which tracks the week is
   paying in one look. A slot with no track known keeps the gold. */
.vslots i.on{color:#fff;font-size:18px;font-weight:700;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--tc,var(--accent)) 36%,transparent),rgba(0,0,0,.6));
  box-shadow:inset 0 0 0 2px var(--tc,var(--accent)),inset 0 0 12px color-mix(in srgb,var(--tc,var(--accent)) 40%,transparent),
    0 0 16px color-mix(in srgb,var(--tc,var(--accent)) 45%,transparent)}
/* A floor rather than a figure: the same socket, a thinner edge and no halo,
   so it reads as this track unconfirmed. */
.vslots i.min{font-size:12px;letter-spacing:-.02em;color:color-mix(in srgb,#fff 78%,transparent);
  box-shadow:inset 0 0 0 1px var(--tc,var(--accent)),inset 0 0 10px color-mix(in srgb,var(--tc,var(--accent)) 25%,transparent)}
.vslots i.need{font-size:13px;letter-spacing:-.02em;color:var(--dim2)}
.vp-n{flex:1 1 190px;min-width:0;display:flex;flex-direction:column;gap:14px}
.vp-big{display:flex;align-items:baseline;gap:8px;margin:0}
.vp-big #st-slots{font-family:Cinzel,Georgia,serif;font-size:64px;font-weight:700;line-height:.9;color:var(--accent2);
  text-shadow:0 0 30px color-mix(in srgb,var(--accent) 45%,transparent)}
.vp-of{font-size:20px;color:var(--dim2)}
.vp-cap{font-size:14px;color:var(--dim);margin-left:4px}
.vp-note{margin:0;font-size:13px;line-height:1.7;color:var(--dim)}
.vp-note b{font-weight:700;color:var(--accent2)}
.vp-note .dimmer{color:var(--tc,var(--faint))}
/* One row per vault source. The 1px gaps are the background showing through. */
.vp-rows{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.vpr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:11px 2px 11px 0;border-bottom:1px solid var(--line2)}
.vpr:last-child{border-bottom:0}
.vpr-b{width:3px;height:22px;background:rgba(255,255,255,.12)}
/* Gold said only "this source has credit", which the count beside it already
   says. The track it is paying is the thing the bar can say that nothing else
   on the line does. No track known and it falls back to the gold. */
.vpr.on .vpr-b{background:var(--tc,var(--accent))}
.vpr-t{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpr-n{font-size:13px;font-weight:600;color:var(--fg);white-space:nowrap}
.vpr-n i{font-style:normal;font-weight:400;color:var(--dim2)}
.vside{flex:1 1 260px;max-width:320px;min-width:0;display:flex;flex-direction:column;gap:28px}
/* Once the side column has dropped under the panel it takes the full width. */
@media (max-width:1100px){.vside{max-width:none}}
@media (max-width:640px){.vpanel{padding:24px 20px}.scard{padding:22px 20px}.vp-h{flex-wrap:wrap}.vp-big #st-slots{font-size:52px}}
.scard{background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);padding:26px 28px;display:flex;flex-direction:column;gap:14px}
.scard.grow{flex:1}
.sbars{display:flex;flex-direction:column;gap:12px}
.sbar{display:flex;flex-direction:column;gap:7px}
.sb-h{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}
.sb-n{color:var(--fg)}
.sb-t{height:5px;background:rgba(255,255,255,.07)}
.sb-t i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 8px color-mix(in srgb,var(--accent) 50%,transparent);transition:width .25s ease}
.sb-t.d i{background:var(--daily)}
.s-p{margin:0;font-size:14px;line-height:1.6;color:var(--dim)}
.s-p code{font-family:var(--mono);color:var(--accent2)}
.s-in{display:flex;gap:8px}
.s-in input{flex:1;min-width:0;background:var(--well);border:1px solid var(--line);color:var(--fg);
  font-family:var(--mono);font-size:12.5px;padding:12px 14px;outline:none}
.s-in input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
/* The primary action: a gold bar lit from the top, the label in Cinzel,
   with the corners clipped the way the item tiles are. */
.btn-gold{background:var(--btn);color:var(--on-accent);border:0;font-family:Cinzel,Georgia,serif;font-size:13px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:11px 18px;cursor:pointer;line-height:1.2;
  clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px);
  transition:filter .15s}
.btn-gold:hover{color:var(--on-accent);filter:brightness(1.08) drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 40%,transparent))}
.btn-gold:disabled{filter:grayscale(.6) brightness(.7);cursor:default}
/* The clipped corners would clip the focus ring too. */
.btn-gold:focus-visible{clip-path:none;outline:2px solid var(--fg);outline-offset:2px}
/* The first download pins itself to the bottom of the card. The second must
   follow it, not claim a second helping of the free space -- with two of them
   both taking auto, the card spreads them to opposite ends of whatever height
   it happens to have. */
.s-dl{font-size:12.5px;font-weight:500;color:var(--accent2);margin-top:auto;padding:13px 0;border-top:1px solid var(--line)}
.s-dl + .s-dl{margin-top:0}
.s-dl:hover{color:#fff}

.wk-intro{margin:0;font-size:12px;line-height:1.7;color:var(--faint);max-width:74ch}
/* The checklist switched off site-wide. Hidden rather than dropped: the Great
   Vault panel reads its progress off these cards, so removing them would leave
   the nine squares stuck at zero. Everything you can click on goes. */
#checklist.off .wk-intro,#checklist.off .wk-imp{display:none}
/* ...except the vault band. It was caught by the blanket rule above, which is
   how the nine squares kept working while the thing that says what is in each
   one disappeared. The vault rows are counted off the game's own vault, not
   off a quest id, so they are the half that was never in doubt. The group
   header goes: its running total counts the hidden quest rows. */
#checklist.off .band:not(.vault),#checklist.off .wk-grp .wk-h{display:none}
#checklist.off .wk-grp:not(:has(.band.vault)){display:none}
.wk-btn{background:none;border:1px solid var(--line);padding:4px 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2);cursor:pointer;transition:border-color .15s,color .15s}
.wk-btn:hover{border-color:var(--accent);color:var(--accent)}
.wk-btn[aria-pressed=true]{border-color:color-mix(in oklab,var(--accent) 45%,var(--line));background:color-mix(in oklab,var(--accent) 14%,transparent);color:var(--accent)}
#wk-notes{margin-left:auto}
.wk-grp{display:flex;flex-direction:column;gap:22px}
.wk-grp+.wk-grp{margin-top:42px}
.wk-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin:0}
.wk-hl{margin:0;font-family:Cinzel,Georgia,serif;font-weight:400;font-size:26px;letter-spacing:.02em}
.wk-sum,.wk-cd,.wk-clr{font-family:var(--mono);font-size:11px}
.wk-sum{color:var(--dim2);margin-left:auto}
.wk-cd{letter-spacing:0;text-transform:none;color:#4e4a44}
.wk-clr{background:none;border:0;padding:0;color:var(--dim2);cursor:pointer}
.wk-clr:hover{color:var(--danger-fg)}
.band{display:flex;flex-direction:column;gap:12px}
.band+.band{margin-top:10px}
.wk-sub{display:flex;align-items:baseline;gap:9px;margin:0}
.wk-bsum{margin-left:auto;font-size:10px;letter-spacing:.06em;color:var(--off)}
.wk-bsum.full{color:var(--accent)}
.wk-sub .n,.wk-sub h4{font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--off);font-weight:400;margin:0}
.lnk{color:inherit}
.lnk:hover{color:var(--accent)}
.lnk::after{content:"\2197";font-size:.72em;margin-left:3px;color:var(--dim2);vertical-align:super}
.lnk:hover::after{color:var(--accent)}

.wk-ticks{display:flex;gap:3px;width:100%}
.tick{position:relative;flex:1;min-width:0;height:15px;padding:0;border:0;
  background:rgba(255,255,255,.08);cursor:pointer;transition:background .12s}
.tick:hover{background:color-mix(in srgb,var(--fg) 22%,transparent)}
.tick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tick.on{background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 6px color-mix(in srgb,var(--accent) 45%,transparent)}
/* A single-step entry is a checkbox, not a bar: it reads as a thing you tick. */
.wk-ticks.one{justify-content:flex-start}
.wk-ticks.one .tick{flex:none;width:15px;height:15px;background:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 28%,transparent)}
.wk-ticks.one .tick:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.wk-ticks.one .tick.on{background:var(--accent);box-shadow:none}
.wk-ticks.one .tick.on::after{content:"";position:absolute;left:4px;top:4px;width:7px;height:7px;background:var(--on-accent)}
.wk-ticks.pips .tick{height:8px}

.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.vcard{background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.vc-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
/* Slot state is read by the hero panel and the band summary; drawing it a
   second time inside every card only repeats what the nine squares say. */
.vc-slots{display:none}
.vc-t{display:block;font-family:Cinzel,Georgia,serif;font-size:17px;font-weight:700;line-height:1.3}
.vc-h .wk-c{font-size:11px;color:var(--dim2)}
.vc-m{display:flex;align-items:baseline;justify-content:flex-end;gap:10px}
.vc-next{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in oklab,var(--key) 78%,var(--fg));text-align:right}
.vc-r{border-top:1px solid var(--line);padding-top:7px;margin-top:1px;display:flex;flex-direction:column;gap:1px}
.vslot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}
.vs-req{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim2);white-space:nowrap}
.vs-pick{max-width:64%;border:0;background:none;padding:2px 0;font-size:12.5px;color:var(--tc,var(--fg));text-align:right;text-align-last:right;cursor:pointer;outline:none;border-bottom:1px dotted transparent}
.vs-pick:hover:not(:disabled){border-bottom-color:var(--accent);color:var(--accent)}
.vs-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vs-pick:disabled{color:var(--dim2);opacity:.5;cursor:default}
.vslot.locked .vs-req{opacity:.5}
.vs-pick option{background:var(--card);color:var(--tc,var(--fg))}
/* The closed select wears the chosen track's colour, so --tc is set on the
   select and inherited by the whole list. The empty first option carries no
   track of its own and must not borrow that one: initial makes var() fall
   through to the plain text colour, which is what a dash should read as. */
.vs-pick option:not([class]){--tc:initial}

/* The tick column is a fixed width so a lone checkbox and a group of three or
   five pips all align on the same two edges. That is the difference between
   this reading as a list and reading as noise. */
.wk{display:grid;grid-template-columns:58px minmax(0,1fr) auto auto;gap:14px;align-items:center;
  background:rgba(0,0,0,.3);padding:14px 18px;cursor:pointer}
.wk:hover{background:rgba(255,255,255,.04)}
.rows{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--edge)}
.wk-t{font-size:13px;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-c{font-size:11px;color:var(--off);text-align:right}
.wk-tag{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);
  background:color-mix(in srgb,var(--fg) 6%,transparent);padding:3px 7px;justify-self:end;white-space:nowrap}
.wk-tag.paid{color:var(--fg);letter-spacing:.04em}
.wk-tag.paid b{font-weight:600}
.wk-w,.wk-n{display:none}
.wk-w{align-items:center;gap:6px;font-size:12px;color:var(--dim2);padding-top:2px}
.wk .wk-w,.wk .wk-n{grid-column:2/-1}
.wk-n{font-size:13px;line-height:1.5;color:var(--dim);padding:1px 0 6px;max-width:74ch}
.pin{flex:none;color:var(--accent);opacity:.8}
#checklist.notes .wk-w{display:flex}
#checklist.notes .wk-n{display:block}
#checklist.notes .wk-t{white-space:normal}
#checklist.notes .vcard .wk-n{padding-bottom:0}
.wk.synced .wk-t::before,.vcard.synced .vc-t::before,.wk.manual .wk-t::before,.vcard.manual .vc-t::before{content:"";display:inline-block;width:5px;height:5px;margin-right:7px;vertical-align:middle}
.wk.synced .wk-t::before,.vcard.synced .vc-t::before{background:var(--accent);opacity:.85}
.wk.manual .wk-t::before,.vcard.manual .vc-t::before{box-shadow:inset 0 0 0 1px var(--dim2)}
.wk.done .wk-t{color:var(--dim2);text-decoration:line-through;text-decoration-color:color-mix(in oklab,var(--dim2) 55%,transparent)}
.wk.done .wk-tag{opacity:.5}

.wk-imp{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.wk-imp summary{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2);gap:8px}
.wk-imp summary:hover{color:var(--accent)}
.wk-imp-h{margin:12px 0 10px;font-size:13.5px;color:var(--dim);max-width:70ch}
.wk-imp-h code,.wk-imp-k code{font-family:var(--mono);font-size:12.5px;color:var(--accent)}
.wk-imp-dl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.wk-imp-dl .btn{margin-top:0}
.wk-imp-dl code{font-family:var(--mono);font-size:12px;color:var(--dim)}
.wk-imp-r{display:flex;gap:8px;flex-wrap:wrap}
.wk-imp-r input{flex:1 1 320px;min-width:0;background:var(--bg2);border:1px solid var(--line);padding:8px 10px;outline:none}
.wk-imp-r input:focus{border-color:var(--accent)}
.wk-imp-m{margin:10px 0 0;font-size:11.5px;color:var(--dim2);min-height:1.2em}
.wk-imp-m.bad{color:var(--accent)}
.wk-imp-k{margin:8px 0 0;font-size:11px;color:var(--dim2);max-width:74ch;line-height:1.8}
.key-dot{display:inline-block;width:5px;height:5px;vertical-align:middle}
.key-dot.on{background:var(--accent)}
.key-dot.off{box-shadow:inset 0 0 0 1px var(--dim2)}
.kvs{display:flex;flex-direction:column}
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
/* Inside a delve card the pair is label left, value right, and the value gets
   the room: these are short numbers with long names beside them. */
.dcard .kvs{gap:0}
.dcard .kv{font-size:12px;gap:12px;align-items:baseline;padding:8px 0;color:var(--dim2)}
.dcard .kv:last-child{border-bottom:0;padding-bottom:0}
.dcard .kv>span:first-child{flex:0 1 auto;min-width:0}
.dcard .kv>span:last-child{flex:0 0 auto;text-align:right;color:var(--fg);font-size:11.5px}
.kv span:first-child{color:var(--dim)}
.kv.top{border-bottom:0;border-top:1px solid var(--line);padding:8px 0 0;margin-bottom:8px;align-items:baseline}
.g2,.g4{display:grid;gap:12px;align-items:center}
.g2{grid-template-columns:1fr auto}
.g4{grid-template-columns:1.5fr 1.05fr 1.05fr .95fr}
.g2.head,.g4.head{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2);padding-bottom:7px;border-bottom:1px solid var(--line)}
.g2.r,.g4.r{font-size:14.5px;padding:9px 0;border-bottom:1px solid var(--line)}
.g2.r>span:first-child,.g4.r>span:first-child{color:var(--dim)}
.g2.r .strong,.g4.r .strong{color:var(--fg)}
.il{display:inline-flex;flex-direction:column;gap:1px;min-width:0}
/* ---- loot and delve tables ----------------------------------------------- */
.page-h{display:flex;flex-direction:column;gap:12px;padding-bottom:26px;border-bottom:1px solid var(--edge)}
.page-h h1{margin:0}
.page-s{margin:0;font-size:16px;line-height:1.55;color:var(--dim2);max-width:62ch;text-wrap:pretty}
/* The track key: one small framed plate, a diamond per track. It follows the
   page head, so on a wide screen it is pulled up beside the title. */
.legend{display:flex;gap:8px 16px;flex-wrap:wrap;align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 18px;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate)}
.lg-i{display:flex;align-items:center;gap:8px;color:var(--tc,var(--dim2))}
.lg-i i{width:8px;height:8px;background:currentColor;transform:rotate(45deg)}
/* Beside the title on a wide screen, under it on a narrow one. */
@media (min-width:1100px){
  .page-h:has(>.legend){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:30px}
  .page-h:has(>.legend)>*{grid-column:1}
  .page-h>.legend{grid-column:2;grid-row:1 / span 3;align-self:end}
}
.sec-h.col{flex-direction:column;align-items:stretch;gap:8px}
.sec-n{margin:0;font-size:14px;line-height:1.55;color:var(--dim2);text-wrap:pretty}
.sec-h>.sec-n{padding-left:23px}
/* A wide table scrolls inside its own box; the page never scrolls sideways.
   Same thin, translucent bar as the rail, so it reads as the site's own
   scrollbar rather than the browser's default. */
.tw{overflow-x:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 25%,transparent) transparent;
  padding:8px 8px 10px;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate)}
.tw::-webkit-scrollbar{height:6px}
.tw::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 25%,transparent)}
.tw::-webkit-scrollbar-track{background:transparent}
.tbl{border-collapse:collapse;width:100%;min-width:600px;font-size:14px;text-align:left}
.tbl th{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim2);padding:14px 16px;border-bottom:1px solid var(--edge);white-space:nowrap}
.tbl td{padding:12px 16px;vertical-align:middle}
/* Every other row a shade lighter, so a long row is easy to follow across. */
.tbl tbody tr:nth-child(even){background:rgba(255,255,255,.024)}
.tbl tr.best{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.tbl .tier{display:flex;flex-direction:row;align-items:center;gap:14px}
/* The delve tier: a small gold plaque, Cinzel on a gold wash. */
.t-n{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;font-family:Cinzel,Georgia,serif;font-size:15px;font-weight:700;
  color:var(--accent2);background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid var(--edge)}
.t-q{font-size:12px;color:var(--faint)}
/* Track colours: the item-quality ladder, Adventurer grey up through
   Veteran green, Champion blue, Hero purple to Myth orange. Until the
   26 Sep 2026 second reskin pass the site ran Blizzard's upgrade-track
   colours instead (green, blue, gold, red, purple, darkened a step for the
   near-black ground); Chris chose the design prototype's ladder over that, so
   these are its five values exactly, and every tile, legend, crest diamond,
   vault slot and select follows them from here. */
.t-adventurer{--tc:#c9c4b8}
.t-veteran{--tc:#3fd13f}
.t-champion{--tc:#3c8fe8}
.t-hero{--tc:#b460f0}
.t-myth{--tc:#ff9a2e}
.t-pvp{--tc:#8d867a}
/* Naming the colour and taking it are two steps on purpose. Anything that
   declares a colour of its own -- .il-t, .gvi-t, an <option> -- matches at the
   same weight as a single-class .t-hero on the same element and wins on source
   order alone, which is how the table labels the legend promises came out
   grey. Those read var(--tc,<their own colour>) instead: the track wins when
   the element carries one, the component's own colour stands when it does not,
   and neither answer depends on where in this file the rules sit. --tc
   inherits, so a chip carries the class on its outer span and both halves
   follow. A rule with two classes still outranks all of this, which is what
   keeps a capped crest red and an empty vault slot grey. */
.t-adventurer,.t-veteran,.t-champion,.t-hero,.t-myth,.t-pvp{color:var(--tc)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.dcard{background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);padding:24px;display:flex;flex-direction:column;gap:12px}
.dcard.hi{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.dcard>.lbl:first-child{display:flex;align-items:baseline;gap:12px;font-family:Cinzel,Georgia,serif;font-size:16px;font-weight:700;
  letter-spacing:.02em;text-transform:none;color:var(--accent2);line-height:1.35}
.dcard>.lbl:first-child::before{content:"";flex:none;width:7px;height:7px;background:var(--accent);transform:translateY(-2px) rotate(45deg)}
.dc-p{margin:0;font-size:13.5px;line-height:1.6;color:var(--dim)}
.il-n{display:flex;align-items:center;gap:6px;font-size:14.5px;white-space:nowrap}
.il-i{width:13px;height:13px;flex:none;color:var(--dim2)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.il-drop .il-i{color:var(--accent)}
.il-vault .il-n{color:var(--dim)}
.il-crest .il-n{color:var(--dim)}
.il-t{font-size:10.5px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--tc,var(--dim2));text-wrap:pretty}
/* Inside a table the cell is one line: the item level on a tile, then the
   track beside it in the track's colour. The stacked form stays for the cards
   on Home. */
.tbl .il{display:flex;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
.tbl .il-l{display:none}
.tbl .il-t{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:13px;letter-spacing:0;text-transform:none}
/* The tile: the number in white bold mono on a glow of the track's colour,
   a hairline of it all round, the corners clipped. The number is the thing
   you read and the colour the thing you glance at, so the one sits on the
   other instead of both fighting in the text colour. */
.tbl .il-n{justify-content:center;min-width:46px;padding:5px 8px;font-size:14px;font-weight:700;gap:0;color:#fff;
  border:1px solid var(--tc,rgba(255,255,255,.25));
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--tc,#c9c4b8) 33%,transparent),rgba(0,0,0,.5));
  clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
/* A crest count is not an item: no tile, a diamond of its tier instead. */
.tbl .il-crest .il-n{min-width:0;padding:0;border:0;background:none;clip-path:none;font-weight:600;gap:8px;color:var(--fg)}
.tbl .il-crest .il-n::before{content:"";flex:none;width:9px;height:9px;background:var(--tc,var(--dim2));transform:rotate(45deg)}
.tbl .il-crest .il-t{font-size:12px}
.tbl .il-none .il-n,.tbl .il-none .il-t{color:var(--off)}
.tbl .il-none .il-n{border-color:var(--line);background:none}
.tbl tbody tr:hover{background:rgba(255,255,255,.045)}
.tbl tbody tr.best:hover{background:color-mix(in oklab,var(--accent) 10%,transparent)}
/* Source column: the affix marker and the "4 a week" style cap under a row. */
.rw-x{text-decoration:none;color:var(--accent);cursor:help;margin-left:2px}
.rw-c{display:block;margin-top:3px;font-size:10.5px;color:var(--faint)}
/* The level flow builder: an ordered list of zones with reorder/remove
   buttons, then the same row shape again for the saved routes below it. */
.zf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.zf-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);font-size:12.5px}
.zf-row .zf-n{font-family:var(--mono);font-size:11px;color:var(--dim2);min-width:1.4em;text-align:right}
.zf-row .zf-lv{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim2)}
.zf-row .zf-btns{display:flex;gap:10px;flex-shrink:0}
.zf-empty{margin:0;font-size:12px;color:var(--dim2)}
/* Raid prep: a card per raid holding a few labelled groups of ticks. Every
   box is the visitor's own, so the look is plain -- a line, a label, a note
   under it -- with no colour standing for "correct" the way the enchant list
   below it does. */
.rp-card{display:flex;flex-direction:column;gap:18px;padding:16px;border:1px solid var(--line)}
.rp-grp .rp-gh{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim2)}
.rp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rp-i{border-bottom:1px solid var(--line);padding-bottom:8px}
.rp-i:last-child{border-bottom:0;padding-bottom:0}
.rp-l{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;cursor:pointer;font-size:13px}
.rp-l input{flex:none;width:16px;height:16px;accent-color:var(--accent)}
.rp-n{flex:1 1 auto;min-width:0}
.rp-note{margin:4px 0 0 26px;font-size:12px;color:var(--dim2)}
.rp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:4px}
.rp-count{font-size:11px;color:var(--dim2)}
/* The enchant check: one row per slot, a status word on the right that is
   the only part of this page allowed to look "correct" or "missing", since
   it comes from the addon rather than the visitor. */
.rp-who{margin:0 0 8px;font-size:12.5px;color:var(--dim2)}
.rp-elist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.rp-e{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.rp-e:last-child{border-bottom:0}
.rp-en{flex:none;min-width:88px;color:var(--dim2)}
.rp-ei{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-es{flex:none;margin-left:auto;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.rp-e[data-st="ok"] .rp-es{color:#7fd18b}
.rp-e[data-st="bare"] .rp-es{color:#e0a25a}
.rp-e[data-st="unknown"] .rp-es,.rp-e[data-st="none"] .rp-es{color:var(--off,var(--dim2))}
/* The two ladders. Numbers only, so the columns are narrow and the row's own
   track colour does the labelling. */
.lad td{white-space:nowrap}
.lad .sp{margin-left:6px;font-size:10px;color:var(--accent)}
.lad-h{margin:0;font-size:12px;line-height:1.7;color:var(--dim)}
.lad-s{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:2px}
.lad-s div{background:var(--card);border:1px solid var(--line);padding:14px 16px}
.lad-s b{display:block;font-weight:500;font-size:12px;margin-bottom:4px}
.lad-s span{font-size:11.5px;line-height:1.6;color:var(--dim)}
.il-none{opacity:.5}
.il-l{display:none;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2)}
.ilvl-block{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.row.three{grid-template-columns:1.5fr 1.1fr 1.1fr}
.btn{display:inline-block;white-space:nowrap;margin-top:16px;border:1px solid var(--line);padding:8px 12px;font-size:14px;font-family:inherit}
.btn:hover{border-color:var(--accent)}
details.card{padding:18px 20px}
summary{display:flex;align-items:center;gap:14px;list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.sum-kind{min-width:84px}
.sum-t{font-size:19px;font-weight:600;flex:1}
.det{padding-top:14px}
.steps{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14.5px}
h4.kicker{margin:0 0 9px}
.tbl{overflow:hidden}
.tbl-h{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tbl-h h2{margin:0;font-size:17px;font-weight:600}
.row{display:grid;gap:8px;padding:12px 20px;border-bottom:1px solid var(--line);font-size:14.5px;align-items:center}
.row.four{grid-template-columns:1.5fr 1.05fr 1.05fr .95fr}
.row.five{grid-template-columns:.75fr 1fr 1fr 1fr .9fr}
.row.bis{grid-template-columns:.8fr 1.9fr 1.1fr}
.panel>*+*{margin-top:14px}
.steps.num{padding-left:20px}
.src a{color:color-mix(in oklab,var(--cc,var(--accent)) 80%,var(--fg))}
.stale{color:var(--accent);font-weight:500}
.row.head{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2);padding:10px 20px}
.row-card{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;padding:17px 20px}
.row-card:hover{border-color:var(--accent)}
.pid{font-size:15px;min-width:56px}
.rc-t{font-size:16.5px;font-weight:600;flex:1 1 200px}
.rc-s{flex:1 1 100%;max-width:70ch}
.cc{color:color-mix(in oklab,var(--cc) 88%,var(--fg))}
.back{display:inline-block;color:var(--dim);font-size:14px;margin-bottom:18px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.tab{background:none;border:1px solid var(--line);padding:8px 14px;font-family:inherit;font-size:14.5px;font-weight:500;color:var(--dim);cursor:pointer}
.tab.on{background:color-mix(in oklab,var(--cc) 18%,transparent);border-color:color-mix(in oklab,var(--cc) 45%,var(--line));color:color-mix(in oklab,var(--cc) 88%,var(--fg))}
.panel{display:none}
.panel.on{display:block}
.src{margin:18px 0 0;padding:0;font-size:11.5px;color:var(--dim2);text-align:right}
.src a{color:var(--dim2);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--dim2) 45%,transparent)}
.src a:hover{color:var(--accent)}
.ftr{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding-top:22px;margin-top:auto;font-size:12.5px;color:var(--dim2)}
.ftr-l{color:var(--dim2);margin-right:auto}
.ftr-l:hover{color:var(--accent)}
.ftr-bsky{display:inline-flex;align-items:center;gap:7px;color:var(--dim2);text-decoration:none}
.ftr-bsky:hover{color:var(--accent)}
/* A finger is not a mouse pointer. On a touch screen the tick boxes and the
   small controls grow to a real hit area; the dense look stays on desktop. */
@media (pointer:coarse){
  .wk-ticks{gap:6px}
  .tick{width:24px;height:24px}
  .tick.on::after{left:8px;top:4px;width:6px;height:12px;border-width:0 2.5px 2.5px 0}
  .wk-btn{min-height:34px;padding:8px 12px}
  .vs-pick{min-height:34px}
  .navlink{padding:10px 12px}
  .wk{min-height:44px}
}
@media (max-width:720px){
  .tools{margin-left:0;width:100%}
  .tools input{flex:1;width:auto}
  .row.four,.row.five{grid-template-columns:1fr 1fr}
  .row.head{display:none}
  .il-l{display:inline}
  .g4{grid-template-columns:1fr 1fr;row-gap:10px}
  .g4.head{display:none}
  .g4.r>span:first-child{grid-column:1/-1}
  .vgrid{grid-template-columns:1fr}
  .wk{grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:9px 0}
  .wk-t{grid-row:1;grid-column:1;white-space:normal}
  .wk-tag{grid-row:1;grid-column:2}
  .wk-ticks{grid-row:2;grid-column:1}
  .wk-c{grid-row:2;grid-column:2}
  .wk .wk-n,.wk .wk-w{grid-column:1/-1}
  .g2,.g2.head{grid-template-columns:1fr auto}
  .g2 .il-l{display:none}
}

/* ---- class anchors ------------------------------------------------------- */
/* Nothing sticky covers the top of the content column on desktop, so the
   anchor only has to clear the mobile bar. */
.cls{scroll-margin-top:24px}

/* ---- classes directory --------------------------------------------------- */
/* One section per class: a colour bar, the name in the class colour, and a
   hairline that fades out of that colour into the ordinary rule. */
/* Each class is one framed plate: a header band washed in the class colour
   from the left, with the name glowing in it, and the specs as cells under
   it, split by hairlines. */
.cls{display:flex;flex-direction:column;gap:0;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate)}
.cls+.cls{margin-top:22px}
.cls-h{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid color-mix(in srgb,var(--cc) 40%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 20%,transparent),transparent 70%);box-shadow:inset 2px 0 0 var(--cc)}
.cls-bar{display:none}
.cls-n{margin:0;font-size:22px;color:var(--cc);text-shadow:0 0 20px color-mix(in srgb,var(--cc) 33%,transparent)}
.cls-rule{flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 40%,transparent),transparent)}
.cls-c{font-size:11px;letter-spacing:.1em;color:var(--dim2);white-space:nowrap}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line2);margin:5px}
.scell{background:var(--bg2);padding:18px 20px;
  display:flex;flex-direction:column;gap:14px}
.scell-h{display:flex;align-items:center;gap:11px}
.crow-i{width:32px;height:32px;flex:none;background:#0d0c0b;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px var(--cc)}
.scell-n{display:flex;flex-direction:column;gap:3px;min-width:0}
.scell-n b{font-size:15px;font-weight:600}
.scell-n .mono{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim2)}
.scell-l{display:flex;flex-direction:column;gap:8px}
.gset{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gsrc{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim2);width:70px;flex:none}
/* A guide link is a small key: mono in a hairline box. */
.glink{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--fg);padding:4px 9px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.glink:hover{color:var(--accent2);border-color:var(--accent)}
@media (pointer:coarse){.glink{padding:4px 0}}

/* ---- class pages -------------------------------------------------------- */
/* Item quality colours are Blizzard's own scale. They are the fastest way to
   read a gear list, with or without the tooltip script attached. */
.itm{font-weight:500}
.q0{color:#9d9d9d}.q1{color:#ffffff}.q2{color:#1eff00}.q3{color:#0070dd}.q4{color:#a335ee}.q5{color:#ff8000}
a.itm{text-decoration:none;border-bottom:1px solid color-mix(in oklab,currentColor 32%,transparent)}
a.itm:hover{border-bottom-color:currentColor}
/* No item id yet, so this is a name search rather than the item itself. */
a.itm.noid{border-bottom-style:dotted;border-bottom-color:color-mix(in oklab,currentColor 40%,transparent)}
.row.bis{grid-template-columns:104px minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
.row.bis .kicker{padding-top:2px}
.alts{display:flex;flex-direction:column;gap:5px;min-width:0}
.alt{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:13px}
.alt-src{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim2)}
.alt-note{font-size:12px;color:var(--dim2)}
.ld-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.ld-top .kicker{margin:0}
.ld-when{font-size:10px;letter-spacing:.08em;color:var(--dim2)}
.ld{border:1px solid var(--line);padding:13px 15px;background:var(--bg2)}
.ld+.ld{margin-top:10px}
.ld-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ld-n{font-size:15px;font-weight:600}
.ld-calc{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.ld-note{margin:7px 0 0;font-size:13.5px;color:var(--dim)}
.ld-copy{display:flex;align-items:center;gap:9px;margin-top:10px}
.ld-str{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--bg);border:1px solid var(--line);padding:7px 9px;
  font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.ld-btn{flex:none}
.ld-btn.done{border-color:color-mix(in oklab,var(--key) 55%,var(--line));color:var(--key)}
.kvs.items .kv{display:block;padding:11px 0}
.kvs.items .kv:first-child{padding-top:2px}
.kvs.items .kv:last-child{border-bottom:0;padding-bottom:2px}
.kv-k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim2);margin-bottom:5px}
.kv-v{display:block;line-height:1.5}
.kvs.items .kv-v a{margin-right:2px}
.kv-or{color:var(--dim2);font-size:12px}
.fine-note{margin:12px 0 0;font-size:12.5px;color:var(--dim2)}
@media (max-width:720px){
  .row.bis{grid-template-columns:1fr 1fr}
  .row.bis>span:first-child{grid-column:1/-1}
  .alts{grid-column:1/-1}
}

/* ---- settings ---------------------------------------------------------- */
/* ---- signed-out notice ---------------------------------------------------- */
/* Hidden by default and revealed only for a visitor with no account cookie, so
   the wrong state is never shown even for one frame. */
/* De tegenhanger van de anonbalk: hetzelfde signaal, andere kant op. Beide
   hangen aan html.anon, dat in de <head> wordt gezet voordat er iets
   getekend is, zodat geen van beide even verkeerd staat. */
/* Vaste paginatekst die alleen klopt als je uitgelogd bent. Hij stond er
   altijd, ook boven "Signed in" en boven de storingsmelding, waar hij het
   tegendeel beweerde van wat eronder stond. */
html:not(.anon) .anon-only{display:none}
.anonbar{display:none}
/* A preview page explains itself in its own banner, and "not signed in"
   beside a page full of somebody's characters would only confuse. */
html.anon body[data-demo] .anonbar{display:none}
/* Preview is for people without an account yet. html.anon is set in <head>
   from the pv_acct cookie, before first paint, so a signed-in visitor never
   sees the entry flash in and out. */
html:not(.anon) .navlink.demo{display:none}

/* The way into the preview from a home page. Loud on purpose: it is the one
   thing a first visit with nothing synced can do besides read. The script
   sets [hidden] once the browser has characters of its own, and display:flex
   would otherwise win over it. */
.try{display:flex;align-items:center;gap:18px;margin:0 0 22px;padding:20px 24px;
  border:1px solid var(--edge);box-shadow:var(--plate);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 13%,transparent),rgba(0,0,0,.3) 70%);
  color:var(--fg);text-decoration:none;transition:border-color .15s,transform .15s}
.try[hidden]{display:none}
.try:hover,.try:focus-visible{border-color:var(--accent);transform:translateY(-1px)}
.try-k{flex:none;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.try-k::before{content:"";width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
.try-b{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.try-t{font-family:Cinzel,Georgia,serif;font-size:19px;font-weight:700;line-height:1.3;color:var(--accent2)}
.try-s{font-size:13px;line-height:1.5;color:var(--dim);text-wrap:pretty}
.try-go{flex:none;padding:11px 16px;background:var(--btn);color:var(--on-accent);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
.try:hover .try-go{filter:brightness(1.08)}
@media (max-width:640px){
  .try{flex-wrap:wrap;gap:10px 14px}
  .try-k{width:100%}
  .try-go{width:100%;text-align:center}
}

/* The preview's own banner, and the three steps at its foot. */
.demo-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:end;
  margin:0 0 26px;padding:30px 32px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:var(--plate);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,transparent),rgba(0,0,0,.3) 70%)}
.demo-bar h1{margin:6px 0 8px}
.demo-bar .lede{margin:0}
.demo-bar-a{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.demo-bar-a .btn-gold{text-decoration:none;display:inline-block}
.demo-bar-n{font-size:11px;color:var(--dim2)}
@media (max-width:760px){
  .demo-bar{grid-template-columns:minmax(0,1fr);padding:18px 16px}
  .demo-bar-a{align-items:flex-start}
}
.demo-steps{list-style:none;margin:0;padding:0;counter-reset:st;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
.demo-steps li{counter-increment:st;padding:22px 24px;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);
  font-size:14px;line-height:1.6;color:var(--dim)}
.demo-steps li::before{content:counter(st);display:block;font-family:Cinzel,Georgia,serif;font-size:34px;font-weight:700;line-height:1;
  color:var(--accent2);text-shadow:0 0 20px color-mix(in srgb,var(--accent) 40%,transparent);margin-bottom:12px}
.demo-steps b{color:var(--fg);font-weight:600}
.pick-demo{margin:22px 0 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.pick-demo-t{font-size:14px;color:var(--fg)}
.pick-demo-l{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pick-demo-a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);text-decoration:none;
  transition:background .15s,border-color .15s}
.pick-demo-a:hover,.pick-demo-a:focus-visible{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:var(--accent)}
.pick-demo-a[data-flavor="forever"]{color:#7fe0d0;border-color:rgba(95,189,174,.5)}
.pick-demo-a[data-flavor="forever"]:hover{background:rgba(95,189,174,.1);border-color:#5fbdae}

html.anon .anonbar{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;
  flex-wrap:wrap;padding:12px 16px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 80%);
  border:1px solid var(--line);border-left:2px solid var(--accent);font-size:12.5px;color:var(--dim)}
.anonbar-t{min-width:0}
/* Two ways in, because half the people reading this line already have an
   account and "Create an account" is not an invitation they need. */
.anonbar-l{display:flex;align-items:center;gap:18px;white-space:nowrap}
.anonbar-a{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.anonbar-a:hover{color:var(--accent2)}
.anonbar-a.dim{color:var(--dim)}
.anonbar-a.dim:hover{color:var(--accent)}
@media(max-width:560px){.anonbar-l{gap:12px}.anonbar-a.dim{display:none}}

/* ---- prose pages ---------------------------------------------------------- */
.prose{max-width:68ch;display:flex;flex-direction:column;gap:0}
.prose h2{display:flex;align-items:center;gap:14px;font-size:22px;margin:40px 0 0;padding:0}
.prose h2::before{content:"";flex:none;width:9px;height:9px;background:var(--accent);transform:rotate(45deg)}
.prose h2::after{content:"";flex:1 1 0;min-width:24px;height:1px;background:linear-gradient(90deg,var(--edge),transparent)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:15px;font-weight:500;font-family:'IBM Plex Sans',system-ui,sans-serif;
  letter-spacing:0;margin:22px 0 0}
.prose p{margin:14px 0 0;font-size:14.5px;line-height:1.75;color:var(--dim);text-wrap:pretty}
.prose ul,.prose ol{margin:12px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.prose li{font-size:14.5px;line-height:1.7;color:var(--dim);text-wrap:pretty}
.prose li b,.prose p b{color:var(--fg);font-weight:500}
.prose code{font-family:var(--mono);font-size:12px;color:var(--fg)}

/* ---- account -------------------------------------------------------------- */
.acc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;align-items:start}
.acc-pane{display:flex;flex-direction:column;gap:24px}
/* A flex display beats the hidden attribute, so say it again explicitly. */
.acc-pane[hidden]{display:none}
.acc-f{display:flex;flex-direction:column;gap:14px;max-width:44ch}
.acc-f label{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--dim)}
.acc-f input{background:var(--well);border:1px solid var(--line);color:var(--fg);
  font-family:inherit;font-size:14px;padding:12px 14px;outline:none}
.acc-f input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.acc-f input:disabled{opacity:.5}
.acc-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.lnk-btn{background:none;border:0;padding:0;font-family:inherit;font-size:12px;
  color:var(--dim2);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.lnk-btn:hover{color:var(--accent)}
a.obtn{display:inline-block}
/* The status line holds its height so an answer never shifts the form. */
.acc-msg{min-height:1.4em;font-size:11.5px;color:var(--dim2)}
.acc-msg.on{border-left:2px solid var(--accent);padding-left:10px}
.acc-msg.bad{color:var(--danger-fg);border-left-color:var(--danger)}
#account{display:flex;flex-direction:column;gap:24px}

/* ---- feedback ------------------------------------------------------------- */
#feedback,#friends,#crafters,#messages{display:flex;flex-direction:column;gap:30px}
/* On the account, feedback, friends, crafters and messages pages every
   section is a framed plate of its own, with its title inside the frame. */
#account .sec,#feedback .sec,#friends .sec,#crafters .sec,#messages .sec{background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);padding:30px 32px;min-width:0}
#account .sec-h h2,#feedback .sec-h h2,#friends .sec-h h2,#crafters .sec-h h2,#messages .sec-h h2{font-size:22px}
@media (max-width:640px){#account .sec,#feedback .sec,#friends .sec,#crafters .sec,#messages .sec{padding:22px 20px}}
.acc-msg:empty{display:none}
.fb-f{max-width:64ch}
.fb-l{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--dim)}
.acc-f textarea,.fb-rf textarea{background:var(--well);border:1px solid var(--line);color:var(--fg);
  font-family:inherit;font-size:13px;line-height:1.6;padding:10px 11px;outline:none;resize:vertical;width:100%}
.acc-f textarea:focus,.fb-rf textarea:focus{border-color:var(--accent)}
.fb-n{align-self:flex-end;font-size:10px;color:var(--off)}
/* The honeypot: out of sight and out of the tab order, still in the form. */
.fb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fb-link{flex:1 1 320px;min-width:0;background:var(--well);border:1px solid var(--line);color:var(--fg);
  font-size:12px;padding:9px 11px;outline:none}
.fb-list{display:flex;flex-direction:column;gap:22px}
.fb-t{display:flex;flex-direction:column;gap:12px;padding:20px 22px;background:rgba(0,0,0,.22);border:1px solid var(--line)}
.fb-t.unread{border-color:color-mix(in oklab,var(--accent) 55%,var(--line));box-shadow:0 0 18px color-mix(in srgb,var(--accent) 12%,transparent)}
.fb-th{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:11px}
.fb-k{color:var(--fg);letter-spacing:.08em;text-transform:uppercase}
.fb-s{color:var(--dim2)}
.fb-new{color:var(--accent)}
.fb-m{border-left:2px solid var(--line);padding:2px 0 2px 12px}
.fb-m.admin{border-left-color:var(--accent)}
.fb-who{margin:0 0 4px;font-size:10.5px;color:var(--dim2)}
/* Plain text as it was typed: line breaks kept, nothing read as markup. */
.fb-b{margin:0;font-size:13px;line-height:1.65;color:var(--dim);white-space:pre-wrap;overflow-wrap:anywhere}
.fb-m.admin .fb-b{color:var(--fg)}
.fb-rf{display:flex;flex-direction:column;gap:10px;max-width:64ch}
/* The menu's "an answer is waiting" dot. */
.navlink.fb,.navlink.pm{display:inline-flex;align-items:center;gap:7px}
.navlink.fb[data-new]::after,.navlink.pm[data-new]::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 6px color-mix(in oklab,var(--accent) 60%,transparent)}
body[data-flavor="forever"] .rail .navlink.fb[data-new]::after,body[data-flavor="forever"] .mobmenu .navlink.fb[data-new]::after,
body[data-flavor="forever"] .rail .navlink.pm[data-new]::after,body[data-flavor="forever"] .mobmenu .navlink.pm[data-new]::after{
  background:#8a2a12;box-shadow:none}
.ftr-fb{margin-right:0}

/* ---- settings ------------------------------------------------------------ */
.set-stack{display:flex;flex-direction:column;gap:46px}
/* The region is a choice between two things, so it reads as two cards with a
   radio dot rather than as a pair of buttons. */
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.seg-b{display:flex;align-items:center;gap:12px;text-align:left;background:var(--panel);
  border:1px solid var(--edge);box-shadow:var(--plate);padding:20px 22px;cursor:pointer;font-family:inherit;color:var(--dim)}
.seg-b i{width:13px;height:13px;flex:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 28%,transparent)}
.seg-b span{display:flex;flex-direction:column;gap:3px;font-size:11px;
  font-family:var(--mono);letter-spacing:.06em;color:var(--dim2)}
.seg-b b{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:13px;font-weight:500;
  letter-spacing:0;color:var(--fg)}
.seg-b:hover{border-color:color-mix(in oklab,var(--accent) 40%,var(--line))}
.seg-b[aria-pressed=true]{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.seg-b[aria-pressed=true] i{background:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),inset 0 0 0 4px #12100c}
/* An outline button: used for the two bulk actions and for clearing data. */
/* The secondary action: tracked mono in a hairline box. */
.obtn{background:rgba(255,255,255,.03);border:1px solid var(--edge);padding:9px 14px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.3;
  color:var(--dim2);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.obtn:hover{border-color:var(--accent);color:var(--accent2);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.obtn.danger{color:var(--danger-fg);border-color:color-mix(in srgb,var(--danger-fg) 40%,transparent)}
.obtn.danger:hover{border-color:var(--danger-fg);color:var(--danger-fg);background:color-mix(in srgb,var(--danger-fg) 8%,transparent)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.02);border:1px solid var(--line);padding:7px 12px;font-family:inherit;font-size:11px;font-weight:600;
  letter-spacing:.12em;color:var(--dim2);cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.chip:hover{border-color:var(--accent);color:var(--accent2)}
.chip[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent2);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent) 30%,transparent)}
.set-warn{margin:0;font-size:12px;color:var(--faint);max-width:70ch}
.set-grp{display:flex;flex-direction:column;gap:0}
.set-grp+.set-grp{margin-top:22px}
.set-grp .wk-sub{margin:0 0 8px}
.set-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto 40px;gap:14px;align-items:center;
  padding:10px 0;border-bottom:1px solid color-mix(in oklab,var(--line) 50%,transparent);cursor:pointer;
  position:relative;min-height:44px}
.set-row:last-child{border-bottom:0}
.set-one{border-bottom:0;padding-top:2px}
.set-t{font-size:13px}
/* A row switched off says so by going quiet, not by disappearing. */
.set-row:has(.set-x:not(:checked)) .set-t{color:var(--off)}
.set-b{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);white-space:nowrap}
.set-x{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sw{justify-self:end;width:38px;height:20px;background:color-mix(in srgb,var(--fg) 9%,transparent);
  border:1px solid var(--line);position:relative;transition:background .15s,border-color .15s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;background:var(--dim2);transition:left .12s ease,background .12s}
.set-x:checked+.sw{background:color-mix(in oklab,var(--accent) 26%,transparent);
  border-color:color-mix(in oklab,var(--accent) 55%,var(--line))}
.set-x:checked+.sw::after{left:21px;background:var(--accent)}
.set-x:focus-visible+.sw{outline:2px solid var(--accent);outline-offset:2px}
.set-row:hover .sw{border-color:color-mix(in oklab,var(--accent) 45%,var(--line))}
.set-g{min-width:0}
.set-goal{background:var(--bg2);border:1px solid var(--line);padding:5px 8px;
  font-size:11px;color:var(--dim);outline:none;cursor:pointer}
.set-goal:hover,.set-goal:focus{border-color:color-mix(in oklab,var(--accent) 45%,var(--line));color:var(--fg)}
.set-goal option{background:var(--card);color:var(--fg)}
.set-n{margin-left:auto;font-size:10.5px;letter-spacing:.06em;color:var(--dim2)}
.set-btns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
/* Which alt's week you are looking at. Only drawn once there are two. */
.wk-who{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px;
  padding-bottom:16px;border-bottom:1px solid var(--line2)}
.wk-who .chip{font-size:11px;padding:5px 10px}
.wk-who .chip:disabled{cursor:default}
.wk-who .chip:disabled:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent)}
/* Paired machines on the account page. */
.dev-l{display:flex;flex-direction:column;gap:0;margin:0}
.dev-r{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--line2)}
.dev-r:last-child{border-bottom:0}
.dev-n{font-size:13.5px}
.dev-m{font-size:11px;color:var(--faint);letter-spacing:.06em}
/* A pairing or friend code: big mono in a sunken well, one letter a cell. */
.dev-code{align-self:flex-start;font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:.42em;color:var(--accent2);
  margin:6px 0 0;padding:14px 8px 14px 22px;background:var(--well);border:1px solid var(--edge);
  text-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent)}
/* One friend, on the Friends page: a private label you can rename in place,
   an unfriend button, and (below, full width) whatever their account-wide
   share currently shows, reusing .acc-* from the share page itself. */
.fr-r{align-items:center}
.fr-label-f{display:flex;align-items:center;gap:8px}
.fr-label{background:var(--well);border:1px solid var(--line);color:var(--fg);
  padding:6px 9px;font-size:13px;max-width:220px}
.fr-label:focus{border-color:var(--accent)}
.fr-acts{display:flex;gap:8px;flex-wrap:wrap}
.fr-share{flex:1 0 100%;padding:8px 0 2px}
/* A friend's character chips are the way into their recipes: a chevron says
   they open, the open one is lit in its class colour, and the pane below
   carries the search and the recipe view. */
.fr-hint{margin:0 0 8px;font-size:11px}
.fr-share .acc-chars{margin:0}
.fr-c{position:relative;padding-right:30px}
.fr-c::after{content:"";position:absolute;top:14px;right:14px;width:6px;height:6px;
  border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg);transition:transform .15s}
.fr-c:hover::after{border-color:var(--cc,var(--accent))}
.fr-c:focus-visible{outline:2px solid var(--cc,var(--accent));outline-offset:2px}
.fr-c[aria-expanded="true"]{border-color:var(--cc,var(--accent));
  background:color-mix(in srgb,var(--cc,var(--accent)) 24%,var(--card));
  box-shadow:inset 3px 0 0 var(--cc,var(--accent)),0 0 0 1px var(--cc,var(--accent))}
.fr-c[aria-expanded="true"]::after{transform:rotate(-135deg);top:18px;border-color:var(--cc,var(--accent))}
.fr-pane{padding:14px 0 4px}
.fr-top{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.fr-top .acc-q{flex:1 1 240px;min-width:0}
/* ---- crafters, messages, your profile ------------------------------------ */
.sec[hidden],.pv-prof[hidden],.ms-thread[hidden],.ch-empty[hidden],.fr-region[hidden]{display:none}
.fr-region{margin-left:auto}
/* Sharing a whole character with friends: the switch on the owner's sheet,
   the list on the Friends page, and a friend's sheet opened there (which
   borrows the home page's unfolded-sheet look, .al-rx .ch-detail). */
.ff-bar{display:flex;flex-direction:column;gap:6px;padding:10px 14px;margin:0 0 16px;
  background:var(--blk,rgba(255,255,255,.04));border:1px solid var(--blk-l,var(--line))}
.ff-sw{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px}
.ff-sw .sw{flex:none}
.ff-keep{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:11px}
.ff-keep label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.ff-n{margin:0;font-size:12px;color:var(--dim)}
.ff-err{margin:0;font-size:12px;color:var(--danger-fg)}
.ff-list{display:flex;flex-direction:column;gap:8px}
.ff-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 12px;border:1px solid var(--line);background:var(--card)}
.ff-who{flex:0 1 230px;min-width:0}
.ff-who b{font-weight:600;color:var(--cc,var(--fg))}
.fr-full .ch-detail{padding:18px 20px}
.fr-fh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.fr-fn{font-size:18px;font-weight:600;color:var(--cc,var(--fg))}
.fr-fh .lnk-btn{margin-left:auto}
.fr-inv{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.fr-inv .obtn{display:inline-flex;align-items:center;gap:6px}
.fr-kept{font-size:11px}
.fr-share .acc-chars+.fr-hint{margin-top:16px}
.fr-fc .acc-m.dim2{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
/* Friends' loot finds: a separate opt-in from "share everything" above and
   from the anonymous community totals on Dungeons and raids. */
.fr-lr{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px}
.fr-lr[data-q="0"]{--qc:#9d9d9d}.fr-lr[data-q="1"]{--qc:#f2f2f2}.fr-lr[data-q="2"]{--qc:#1eff00}
.fr-lr[data-q="3"]{--qc:#4aa6ff}.fr-lr[data-q="4"]{--qc:#c27dff}.fr-lr[data-q="5"]{--qc:#ff9a2e}
.fr-lr a.lt-a{color:var(--qc,var(--fg));font-weight:600;text-decoration:none}
.fr-lr a.lt-a:hover{text-decoration:underline;text-underline-offset:2px}
.fr-lw{flex:1 1 320px;min-width:0}
.fr-lt{white-space:nowrap}
@media (max-width:560px){
  .fr-full .ch-detail{padding:14px 12px}
  .ff-who{flex-basis:100%}
}
.acc-f select,.cr-filters select,.cr-filters input{background:var(--well);border:1px solid var(--line);color:var(--fg);
  padding:10px 12px;font:inherit;font-size:13.5px;min-width:0}
.acc-f select option,.cr-filters select option{background:var(--card);color:var(--fg)}
.acc-f select:focus,.cr-filters select:focus,.cr-filters input:focus{outline:none;border-color:var(--accent)}
/* The profile card on the home page: impossible to miss, one line of what it
   means, the switch beside it. Private reads as a quiet dashed frame, open as
   a lit one. */
.pv-prof{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;margin:0 0 22px;padding:18px 22px;
  border:1px dashed var(--edge);background:rgba(0,0,0,.18)}
.pv-prof[data-state="open"]{border-style:solid;border-color:color-mix(in oklab,var(--accent) 55%,var(--line));
  background:color-mix(in oklab,var(--accent) 7%,transparent)}
.pv-prof-t{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1 1 360px;font-size:13.5px;line-height:1.55;color:var(--dim)}
.pv-prof-t b{font-size:17px;color:var(--fg);font-weight:600}
.pv-prof .kicker{color:var(--accent)}
.pv-prof .acc-row{margin:0}
/* "Since your last visit": the build, your guild and friends who share with
   you, read together at the top of the home page. Quality colours match the
   loot feed's own (.fr-lr on the Friends page). */
.pv-digest{display:flex;flex-direction:column;gap:10px;margin:0 0 22px;padding:16px 20px;
  border:1px solid var(--line);background:var(--card)}
.pv-digest[hidden]{display:none}
.pv-digest-t{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.pv-digest-t .kicker{color:var(--accent)}
.pv-digest-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13.5px;line-height:1.5}
.pv-digest-l li{padding-left:15px;position:relative}
.pv-digest-l li::before{content:'';position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.pv-digest [data-q="0"]{--qc:#9d9d9d}.pv-digest [data-q="1"]{--qc:#f2f2f2}.pv-digest [data-q="2"]{--qc:#1eff00}
.pv-digest [data-q="3"]{--qc:#4aa6ff}.pv-digest [data-q="4"]{--qc:#c27dff}.pv-digest [data-q="5"]{--qc:#ff9a2e}
.pv-digest a.lt-a{color:var(--qc,var(--fg));font-weight:600;text-decoration:none}
.pv-digest a.lt-a:hover{text-decoration:underline;text-underline-offset:2px}
.cr-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;margin:0 0 16px}
.cr-f{display:flex;flex-direction:column;gap:12px;margin:0 0 20px}
.cr-f .acc-q input{max-width:none}
.cr-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px}
.cr-filters label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--dim2)}
.cr-filters input{width:90px}
.cr-filters select,.cr-filters input{height:44px;box-sizing:border-box}
.cr-res{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px}
.cr-res>p{grid-column:1/-1;margin:0}
.cr-res[aria-busy]{opacity:.6}
.cr-r{display:flex;flex-direction:column;gap:10px;padding:16px 18px;min-width:0;
  background:color-mix(in srgb,var(--cc,var(--accent)) 9%,var(--card));border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--cc,var(--accent))}
.cr-r-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.cr-n{font-size:17px;font-weight:600;color:color-mix(in srgb,var(--cc,var(--fg)) 55%,#fff)}
.cr-w{flex:1 0 100%;font-size:11.5px}
.cr-you{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:1px 6px}
.cr-r .acc-p{display:flex;flex-wrap:wrap;gap:4px 10px}
.cr-r .acc-p>span{display:inline-flex;align-items:center;gap:4px}
.cr-hits{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.cr-hits li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.cr-hits .mono{display:inline-flex;align-items:center;gap:5px;font-size:11px}
.cr-note{margin:0;font-size:13px;line-height:1.5;color:var(--dim);font-style:italic;overflow-wrap:anywhere}
.cr-r .acc-row{margin-top:auto}
.cr-one-h{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin:0 0 16px}
.cr-one-h h2{margin:0 0 4px;font-size:22px}
.cr-one .acc-q{margin:0 0 6px}
.cr-state{color:var(--fg)}
.cr-state[data-on]{color:var(--accent)}
.cr-note-f{max-width:64ch;margin:14px 0 4px}
.cr-mine{margin:10px 0 14px}
/* ---- guild ------------------------------------------------------------------ */
#guild{display:flex;flex-direction:column;gap:30px}
#guild .sec{background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);padding:30px 32px;min-width:0}
#guild .sec-h h2{font-size:22px}
@media (max-width:640px){#guild .sec{padding:22px 20px}}
.gd-pick[hidden],.gd-one[hidden],.gd-me[hidden],#gd-out[hidden],.gd-pane[hidden],.gd-dx[hidden]{display:none}
.gd-h{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin:0 0 18px}
.gd-h h2{margin:4px 0 4px;font-family:Cinzel,Georgia,serif;font-size:clamp(22px,2.4vw,30px);letter-spacing:.02em;color:var(--fg);overflow-wrap:anywhere}
.gd-h .kicker{color:var(--accent)}
.gd-sub{font-size:11.5px;color:var(--dim2)}
.gd-nums{display:flex;gap:10px;flex-wrap:wrap}
.gd-num{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid var(--line);background:rgba(0,0,0,.16);min-width:96px}
.gd-num b{font-family:var(--mono);font-size:20px;color:var(--accent);font-weight:600;line-height:1.1}
.gd-num span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2)}
.gd-state{margin:0 0 18px;padding:18px 22px;border:1px dashed var(--edge);background:rgba(0,0,0,.18);color:var(--dim);font-size:14px;line-height:1.65}
.gd-state b{color:var(--fg);font-size:16px;font-weight:600;display:block;margin:0 0 4px}
.gd-state[data-s="ok"]{border-style:solid;border-color:color-mix(in oklab,var(--accent) 45%,var(--line));background:color-mix(in oklab,var(--accent) 6%,transparent)}
.gd-state ol{margin:8px 0 0;padding-left:22px}
.gd-tabs{margin:0 0 16px}
.gd-bar{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin:0 0 12px}
.gd-bar label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--dim2)}
.gd-bar select{background:var(--well);border:1px solid var(--line);color:var(--fg);padding:9px 12px;font:inherit;font-size:13px;height:40px;box-sizing:border-box;min-width:0;max-width:100%}
.gd-bar select option{background:var(--card);color:var(--fg)}
.gd-bar .mono{font-size:11px}
.tbl.gd-t{min-width:760px}
.tbl.gd-t th,.tbl.gd-t td{padding-left:10px;padding-right:10px}
.tbl.gd-t th{letter-spacing:.1em}
.tbl.gd-t tbody tr[data-gd-who]{cursor:pointer}
.tbl.gd-t tbody tr[data-gd-who] td:first-child{box-shadow:inset 3px 0 0 var(--cc,transparent)}
.tbl.gd-t tbody tr[data-gd-who]:hover{background:color-mix(in oklab,var(--accent) 5%,transparent)}
.tbl.gd-t tbody tr.on{background:color-mix(in oklab,var(--accent) 9%,transparent)}
.tbl.gd-t td.mono{white-space:nowrap}
.gd-n{font-family:Cinzel,Georgia,serif;font-size:15px;letter-spacing:.02em;color:color-mix(in srgb,var(--cc,var(--fg)) 60%,#fff);white-space:nowrap}
.gd-c{display:flex;align-items:center;gap:10px;min-width:0}
.gd-c img{width:26px;height:26px;border:1px solid var(--line);flex:none}
.gd-c>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.gd-you{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:0 5px;vertical-align:2px}
.gd-you.off{color:var(--dim2);border-color:var(--line)}
.gd-cls{color:var(--cc,var(--fg))}
.gd-lv{font-family:var(--mono);font-size:17px;color:var(--accent)}
.gd-il{display:flex;align-items:center;gap:8px;font-family:var(--mono)}
.gd-il b{font-weight:600;min-width:2.2em}
.gd-il i{display:block;height:4px;width:70px;background:var(--line);position:relative}
.gd-il i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:var(--accent)}
.gd-ps{display:flex;flex-wrap:wrap;gap:4px 10px}
.gd-ps>span{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.gd-ps>span[data-gd-sec]{opacity:.75}
.gd-rp{display:flex;flex-direction:column;gap:4px;min-width:96px;font-family:var(--mono);font-size:11.5px;color:var(--st,var(--dim2))}
.gd-rp i{display:block;height:3px;background:color-mix(in srgb,var(--st,var(--dim2)) 18%,var(--line));position:relative}
.gd-rp i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:var(--st,var(--dim2))}
.gd-rp[data-gd-st="1"]{--st:#ff9a94}.gd-rp[data-gd-st="2"]{--st:#ffab86}.gd-rp[data-gd-st="3"]{--st:#ffc27a}.gd-rp[data-gd-st="4"]{--st:#f2dc6a}
.gd-rp[data-gd-st="5"]{--st:#8fe06e}.gd-rp[data-gd-st="6"]{--st:#4fdcb4}.gd-rp[data-gd-st="7"]{--st:#7ccbff}.gd-rp[data-gd-st="8"]{--st:#d2adff}
.gd-rp.none{color:var(--dim2)}
/* Raid readiness's Enchants column, and the matching per-slot badge in the
   unfolded gear list (same three states: ok, bad = confirmed no enchant,
   unknown = addon has not synced 1.16+ yet). */
.gd-en{font-family:var(--mono);font-size:12.5px;color:var(--dim2)}
.gd-en[data-gd-st="ok"]{color:#7fd18b}
.gd-en[data-gd-st="bad"]{color:#ff9a94;font-weight:600}
.gd-en[data-gd-st="unknown"]{color:var(--dim2)}
.gd-en.none{color:var(--dim2)}
.gd-eb{flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:1px 5px;border:1px solid var(--line);color:var(--dim2)}
.gd-eb[data-gd-st="ok"]{color:#7fd18b;border-color:currentColor}
.gd-eb[data-gd-st="bad"]{color:#ff9a94;border-color:currentColor}
.gd-rh{display:inline-flex;align-items:center;gap:6px}
.gd-rx{background:none;border:0;padding:0 2px;font:inherit;color:var(--dim2);cursor:pointer;letter-spacing:0}
.gd-rx:hover{color:var(--danger-fg)}
/* The unfolded member: gear on the left, reputation on the right. */
.gd-dx>td{padding:0!important;background:rgba(0,0,0,.2)}
.gd-d{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px 28px;padding:18px 20px 22px;box-shadow:inset 3px 0 0 var(--cc,var(--accent))}
@media (max-width:900px){.gd-d{grid-template-columns:1fr}}
.gd-d h3{margin:0 0 8px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim2)}
.gd-gear{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:2px 16px}
.gd-gear>div{display:flex;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid var(--line2);min-width:0}
.gd-gear .gs{flex:none;width:74px;font-family:var(--mono);font-size:10.5px;color:var(--dim2)}
.gd-gear a{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;font-size:13.5px}
.gd-gear .gl{flex:none;font-family:var(--mono);font-size:12px;color:var(--dim)}
.gd-reps{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto;padding-right:6px}
.gd-reps>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;font-size:13px;color:var(--dim)}
.gd-reps .gd-rp{grid-column:1/-1;min-width:0}
.gd-none{margin:0;color:var(--dim2);font-size:13px}
.gd-craft .acc-q{margin:0 0 6px}
.gd-foot{margin:14px 0 0;font-size:11.5px;color:var(--dim2)}
.gd-me .ash-who{margin:12px 0 16px}
.gd-me .ash-c .mono{font-size:11px}
@media (max-width:640px){
  .gd-num{min-width:0;flex:1 1 30%}
  .gd-state{padding:14px 16px}
}
/* The message lightbox. */
.pm-f{gap:12px}
.pm-f textarea{min-height:90px}
/* The message window can outgrow a lightbox's usual height (Turnstile adds a
   row): it gets more room and scrolls inside itself, so Send is never outside. */
.pm-box{top:3vh;transform:translateX(-50%);max-height:94vh;overflow-y:auto}
.pm-note{font-size:12px}
.pm-f .hid{display:none}
.pv-ts{min-height:0}
.pv-ts:empty{display:none}
/* Messages: list and conversation side by side, or one at a time on a phone. */
.ms-wrap{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:24px;align-items:start}
.ms-wrap:not([data-open]){grid-template-columns:1fr}
@media (max-width:900px){
  .ms-wrap,.ms-wrap:not([data-open]){grid-template-columns:1fr}
  .ms-wrap[data-open] .ms-list{display:none}
}
@media (min-width:901px){.ms-back{display:none}}
.ms-threads{display:flex;flex-direction:column}
.ms-t{display:flex;flex-direction:column;gap:3px;text-align:left;font:inherit;color:var(--dim);background:none;border:0;
  border-bottom:1px solid var(--line2);padding:12px 10px;cursor:pointer;min-width:0}
.ms-t:hover{background:rgba(255,255,255,.03)}
.ms-t[aria-current="true"]{background:color-mix(in oklab,var(--accent) 10%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
.ms-t-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ms-t-h b{color:var(--fg);font-weight:600;font-size:14.5px}
.ms-t[data-unread] .ms-t-h b::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:8px;vertical-align:middle}
.ms-t-a{font-size:11px;color:var(--accent)}
.ms-t-l{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-h{display:flex;flex-direction:column;gap:6px;padding:0 0 14px;border-bottom:1px solid var(--line2)}
.ms-h h2{margin:0;font-size:22px}
.ms-realm{font-size:11.5px;margin-top:-4px}
.ms-back{align-self:flex-start}
.ms-acts{display:flex;gap:16px;flex-wrap:wrap}
.ms-tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:1px 6px;color:var(--dim2)}
.ms-log{display:flex;flex-direction:column;gap:12px;padding:18px 0;max-height:min(60vh,560px);overflow-y:auto}
.ms-m{align-self:flex-start;max-width:min(560px,88%);padding:10px 14px;background:rgba(0,0,0,.22);border:1px solid var(--line)}
.ms-m[data-mine]{align-self:flex-end;border-color:color-mix(in oklab,var(--accent) 45%,var(--line));background:color-mix(in oklab,var(--accent) 8%,transparent)}
.ms-b{margin:0 0 6px;font-size:14px;line-height:1.6;color:var(--fg);white-space:pre-wrap;overflow-wrap:anywhere}
.ms-w{font-size:10.5px;color:var(--dim2)}
.ms-rf{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line2);padding-top:14px}
.ms-rf textarea{background:var(--well);border:1px solid var(--line);color:var(--fg);padding:12px 14px;font:inherit;font-size:14px;resize:vertical}
.ms-rf textarea:focus{outline:none;border-color:var(--accent)}
.ms-closed{padding-top:12px}
.ms-mail{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fg);margin:0 0 6px}
.ms-mail input{accent-color:var(--accent)}
.ms-bl{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px;font-size:13.5px}
.ms-b-r{display:inline-flex;gap:8px;align-items:baseline}
/* A rule with a word in it, to separate the password form from the other way in. */
.bnet-or{display:flex;align-items:center;gap:12px;margin:16px 0 14px;color:var(--off);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.bnet-or::before,.bnet-or::after{content:"";flex:1;height:1px;background:var(--line)}
.bnet-btn{display:inline-block}
.bnet-n{margin-top:10px}
.bnet-tag{font-family:var(--mono);font-size:13px;color:var(--accent)}
/* Fifty alts is a normal number, so this has to stay readable at that size:
   a dense wrapping grid rather than a list, sorted so the ones you actually
   play are at the top. */
.chars-tools{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.chars-count{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2)}
.chars-grid{display:flex;flex-wrap:wrap;gap:6px;max-height:340px;overflow-y:auto;
  padding:2px 2px 4px;margin-top:2px}
.chr{background:none;border:1px solid var(--line);padding:6px 10px;cursor:pointer;
  font-family:inherit;font-size:12px;color:var(--dim);display:flex;align-items:baseline;gap:7px;
  transition:border-color .15s,color .15s,background .15s}
.chr:hover{border-color:var(--accent);color:var(--fg)}
.chr[aria-pressed=true]{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.chr i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--off)}
.chr[aria-pressed=true] i{color:color-mix(in oklab,var(--accent) 70%,transparent)}
/* The class colour names the character; the gold border says it is picked. Two
   different questions, so they are answered by two different properties rather
   than fighting over the text colour. */
/* ---- every alt at once ---------------------------------------------------- */
.week{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.week-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.week-list{display:flex;flex-direction:column;gap:0;background:var(--panel);
  border:1px solid var(--edge);box-shadow:var(--plate);padding:8px 8px 10px}
/* Name, the nine squares, the count, gear, score, and what is left to do.
   Tabular figures so the three number columns line up down the list. */
.wk-r{background:transparent;border-top:1px solid var(--line2);display:grid;
  grid-template-columns:minmax(90px,1.1fr) auto 46px 54px 54px auto minmax(0,1.4fr);
  gap:14px;align-items:center;padding:11px 16px;font-variant-numeric:tabular-nums}
.wk-r:first-child{border-top:0}
.wk-r:nth-child(even){background:rgba(255,255,255,.024)}
.wk-r:hover{background:rgba(255,255,255,.045)}
.wk-r-n{font-family:Cinzel,Georgia,serif;font-size:15px;font-weight:700;color:var(--cc,var(--fg));text-decoration:none;border:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-r-n:hover{color:var(--cc,var(--accent));text-decoration:underline;
  text-underline-offset:2px}
.wk-sq{display:grid;grid-template-columns:repeat(3,7px);grid-auto-rows:7px;gap:2px}
.wk-sq i{background:color-mix(in srgb,var(--fg) 8%,transparent);box-shadow:inset 0 0 0 1px var(--line2)}
.wk-sq i.on{background:var(--accent);box-shadow:none}
.wk-r-c{font-size:11px;color:var(--dim2);text-align:right}
.wk-r-i{font-size:15px;font-weight:700;color:var(--accent2);text-align:right}
.wk-r-m{font-size:14px;font-weight:600;color:var(--dim);text-align:right}
.wk-r-x{font-size:11.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* One bar per crest tier, in the same colours the loot table gives the gear
   tracks, because in this game a crest tier and a gear track are the same word.
   The fill is a hard-stopped gradient rather than a nested element: it is one
   node per tier either way, and currentColor then means the bar is coloured by
   its track class alone, with nothing to keep in step. */
/* One column per crest tier: its initial over a bar of how full its cap is.
   Five thin bars alone were a smudge at this size and needed a legend the row
   has no space for; the letter carries the name and the colour then only has
   to agree with it. */
.wk-cr{display:flex;gap:5px;color:var(--off)}
.wk-crc{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:13px;cursor:help}
/* The colour is set on the column and inherited by both halves, never declared
   on them: a declared .wk-crc b would outrank the single-class .t-hero and
   every letter would come out grey. Inheritance loses to any rule at all, which
   is exactly the precedence wanted. */
.wk-crc b{font-family:var(--mono);font-weight:500;
  font-size:9.5px;line-height:1;letter-spacing:0;text-align:center;color:inherit}
.wk-crc i{height:3px;
  background:linear-gradient(to right,currentColor var(--f,0%),color-mix(in srgb,var(--fg) 9%,transparent) var(--f,0%))}
/* Nothing against this tier's name: the letter stays, so the column still reads
   left to right, and it drops back to the dimmest text on the site. */
.wk-crc.off{color:var(--off);opacity:.55}
/* Full is the one reading here that is bad news - everything that tier pays
   from now on is thrown away - so it is the one that gets the warning colour
   rather than the gold a finished vault slot gets. */
.wk-crc.cap{color:var(--danger-fg)}
.wk-crc.cap i{background:var(--danger)}
.wk-cr.none{width:0}
@media (max-width:720px){
  .wk-r{grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px 12px}
  .wk-r-i,.wk-r-m{display:none}
  .wk-r-x{grid-column:1 / -1;white-space:normal}
}
/* ---- the roster page ----------------------------------------------------- */
.ros-tools{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:22px}
.ros-r{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#ros-tabs .chip{font-size:11.5px;padding:6px 11px;color:var(--cc,var(--off))}
#ros-tabs .chip:hover{color:var(--cc,var(--accent))}
#ros-tabs .chip[aria-selected=true]{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--cc,var(--accent))}
.ros-list{display:flex;flex-direction:column;gap:22px}
.rosc{background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);padding:30px 32px;display:grid;
  grid-template-columns:minmax(0,1fr);gap:20px}
/* The armory shape: gear down both flanks, the character between them. The
   render is Blizzard's own and arrives at whatever size they drew it, so the
   column is fixed and the image scales into it. */
/* Capped and centred: stretched across a wide screen the two gear columns drift
   to the far edges and the render is marooned in the middle of an empty card. */
.rosc-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,400px) minmax(0,1fr);
  gap:10px 26px;align-items:start;max-width:1040px;margin:0 auto;width:100%}
.rosc-col{display:flex;flex-direction:column;gap:11px;min-width:0}
.rosc-col.r{text-align:right}
.rosc-art{position:relative;display:flex;align-items:flex-start;justify-content:center;
  margin-top:-6px}
.rosc-art img{width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);
  mask-image:linear-gradient(180deg,#000 72%,transparent)}
/* An item is a Wowhead link, exactly as in the vault panel: with the script
   attached it gains the icon and the hover card, and without it the quality
   colour and the name still say what the thing is.
   
   The icon is injected INSIDE the link, as its first child, so the link itself
   has to be the flex row -- an earlier version reversed the row instead and the
   icons ended up wherever the text happened to leave them. */
.gi{display:flex;flex-direction:column;gap:1px;min-width:0}
.gi.r{text-align:right}
.gi-t{display:contents}
.gi a{text-decoration:none;border:0;min-width:0;display:flex;align-items:center;gap:9px}
.gi.r a{flex-direction:row-reverse}
.gi .iconsmall,.gi .icontiny,.gi .iconmedium,.gi .iconlarge{flex:none;width:26px;height:26px;
  display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.gi .iconsmall ins,.gi .icontiny ins,.gi .iconmedium ins,.gi .iconlarge ins{display:block;
  width:100%;height:100%;background-size:cover;background-position:center}
.gi .iconsmall del,.gi .icontiny del,.gi .iconmedium del,.gi .iconlarge del{display:none}
.gi-n{font-size:12.5px;min-width:0}
.gi-n a{overflow:hidden}
.gi-n a > :last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gi-m{font-family:var(--mono);font-size:10px;color:var(--off);letter-spacing:.06em;
  padding-left:35px}
.gi.r .gi-m{padding-left:0;padding-right:35px}
.gi-m b{font-weight:400;color:var(--accent)}
.gi.empty .gi-n{color:var(--off)}
.rosc-reps{display:flex;flex-direction:column;gap:1px;padding-top:18px;
  border-top:1px solid var(--line2)}
.repg{border-bottom:1px solid var(--line2)}
.repg:last-child{border-bottom:0}
.repg summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:baseline;gap:14px;padding:9px 0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim2)}
.repg summary::-webkit-details-marker{display:none}
.repg summary:hover{color:var(--accent)}
.repg[open] summary{color:var(--accent)}
.repg-n{color:var(--off)}
.repg-b{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:10px 26px;padding:4px 0 16px}
@media (max-width:720px){
  .rosc-body{grid-template-columns:minmax(0,1fr)}
  .rosc-col.r{text-align:left}
  .rosc-art{order:-1;max-width:220px;margin:0 auto}
}
.rosc-h{display:flex;flex-direction:column;gap:3px;min-width:0}
.rosc-n{font-family:Cinzel,Georgia,serif;font-size:26px;font-weight:700;letter-spacing:.02em;color:var(--cc,var(--fg));
  text-shadow:0 0 20px color-mix(in srgb,var(--cc,var(--fg)) 33%,transparent)}
.rosc-m{font-size:11px;letter-spacing:.08em;color:var(--faint);font-family:var(--mono)}
.rosc-il{display:flex;align-items:baseline;gap:9px;margin-top:9px}
.rosc-il b{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--accent2);line-height:1}
.rosc-il span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2)}
.rosc-il.mp{margin-top:6px}
.rosc-il.mp b{font-size:21px}
@media (max-width:640px){.rosc{padding:22px 18px}.week-list{padding:4px}}
.rep-r.untimed{color:var(--faint)}
.rep.run{grid-template-columns:minmax(0,1fr) auto}
.rosc-gear{display:flex;flex-wrap:wrap;gap:3px;margin-top:12px}
.gslot{font-family:var(--mono);font-size:10px;padding:2px 5px;border:1px solid var(--line);color:var(--dim2)}
.gslot b{font-weight:400;color:var(--fg)}
.gslot.low{border-color:color-mix(in oklab,var(--danger) 40%,transparent);color:var(--danger-fg)}
.rep{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline;
  cursor:help}
.rep.run{cursor:default}
.rep-n{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-r{font-family:var(--mono);font-size:11px;color:var(--accent)}
.rep-t{grid-column:1 / -1;height:2px;background:var(--line);position:relative}
.rep-t i{position:absolute;inset:0 auto 0 0;background:var(--accent);display:block}
.ros-more{background:none;border:0;padding:4px 0;font-family:var(--mono);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);cursor:pointer}
.ros-more:hover{color:var(--accent)}
@media (max-width:720px){.rosc{grid-template-columns:minmax(0,1fr)}}
.chr span:first-child{color:var(--cc,inherit)}
.chr:hover span:first-child{color:var(--cc,var(--fg))}
.wk-who .chip{color:var(--cc,var(--off))}
.wk-who .chip:hover{color:var(--cc,var(--accent))}
.wk-who .chip[aria-pressed=true]{color:var(--cc,var(--accent))}
.hid{display:none !important}
/* "Install as an app". A card that sits above the bottom edge, never over the
   menu; display:flex needs its own [hidden] rule or it would always show. */
.pwa{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:55;
  margin:0 auto;max-width:440px;display:flex;gap:14px;align-items:flex-start;
  background:var(--bg2);border:1px solid var(--line);padding:14px 16px;box-shadow:0 18px 40px -20px #000}
.pwa[hidden]{display:none}
.pwa .mark{flex:none;margin-top:2px}
.pwa-t{margin:0 0 4px;font-weight:600;color:var(--fg)}
.pwa-p{margin:0;color:var(--dim);font-size:13px;line-height:1.45}
.pwa-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ---- patch art -----------------------------------------------------------
   --key and --key2 come from the patch's index.md theme, so the isle a
   patch is set on colours its own pages. Gold stays gold: it means "reward".
   Everything below no-ops on a patch with no theme and no art. */
/* The stage has no picture in it: an aurora mesh in the patch's two colours,
   a fine diagonal weave for structure, and turbulence grain so nothing is a
   flat fill. All of it follows --key, so each patch gets its own sky. */
.stage{position:relative;overflow:hidden;margin-bottom:-1px;isolation:isolate;padding:24px 0 40px;
  background:
    repeating-linear-gradient(114deg,transparent 0 24px,color-mix(in oklab,var(--key) 8%,transparent) 24px 25px),
    radial-gradient(96% 86% at 6% 88%,color-mix(in oklab,var(--key) 46%,transparent),transparent 64%),
    radial-gradient(74% 82% at 72% 6%,color-mix(in oklab,var(--key2) 44%,transparent),transparent 66%),
    radial-gradient(52% 88% at 40% 102%,color-mix(in oklab,var(--accent) 20%,transparent),transparent 58%),
    radial-gradient(60% 70% at 92% 78%,color-mix(in oklab,var(--key) 26%,transparent),transparent 62%),
    linear-gradient(180deg,#0d121c 0%,#080a10 100%)}
.stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E")}

/* Nine arcs, one per vault slot; the ones you have earned burn gold. */
.vring{position:absolute;right:52px;top:50%;transform:translateY(-50%);
  width:148px;height:148px;z-index:1;pointer-events:none}
.vr-o{fill:none;stroke:color-mix(in oklab,var(--key) 20%,transparent);stroke-width:.7}
.vr-s{fill:none;stroke:color-mix(in oklab,var(--key) 30%,transparent);stroke-width:5.5;stroke-linecap:round;
  transition:stroke .3s}
.vr-s.on{stroke:color-mix(in oklab,var(--accent) 78%,transparent);
  filter:drop-shadow(0 0 6px color-mix(in oklab,var(--accent) 45%,transparent))}
.stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,color-mix(in oklab,var(--bg) 58%,transparent) 0%,color-mix(in oklab,var(--bg) 6%,transparent) 30%,color-mix(in oklab,var(--bg) 52%,transparent) 66%,var(--bg) 100%),
  radial-gradient(90% 74% at 16% 82%,color-mix(in oklab,var(--bg) 80%,transparent),transparent 72%),
  radial-gradient(70% 90% at 86% 6%,color-mix(in oklab,var(--key) 12%,transparent),transparent 70%)}
.stage-in{position:relative;z-index:2}
.st{display:flex;align-items:flex-end;gap:30px;flex-wrap:wrap}
.st-l{display:flex;flex-direction:column;gap:6px;min-width:0}
.st-n{display:flex;align-items:flex-end;gap:14px}
.st-big{font-size:clamp(48px,6.4vw,72px);line-height:.86;font-weight:700;letter-spacing:-.045em;
  margin:2px 0 0;background:linear-gradient(172deg,#fff6e2 0%,#e9c883 46%,#b98f36 100%);
  -webkit-background-clip:text;background-clip:text;color:#e9c883;-webkit-text-fill-color:transparent}
.st-big i{font-style:normal;font-size:.44em;-webkit-text-fill-color:var(--dim2);color:var(--dim2)}
.st-cap{margin:0 0 9px;font-size:16.5px;color:var(--fg)}
.st-cap b{color:var(--accent);font-weight:600}
.st-c{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px;padding-bottom:5px}
@media (max-width:640px){.st-c{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.st-chip{padding:14px 16px}.st-chip .v{font-size:21px}.st-chip .k{font-size:10px;letter-spacing:.14em}}
/* A figure: a small framed plate, the label in tracked mono over the number
   in Cinzel. Gold for money and counts, cream for the quiet ones. */
.st-chip{display:flex;flex-direction:column;gap:6px;min-width:0;border:1px solid var(--edge);box-shadow:var(--plate);
  background:var(--panel);padding:18px 22px}
.st-chip .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim2)}
.st-chip .v{font-family:Cinzel,Georgia,serif;font-size:26px;font-weight:700;line-height:1.2;color:var(--accent2);
  overflow-wrap:anywhere}
.st-chip.q .v{color:var(--fg)}
.stage .hdr-sub{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.has-stage .hdr{transition:background .18s,border-color .18s}
.has-stage .hdr.ontop{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.has-stage .main{padding-top:30px}

.orn{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.orn span{flex:1 1 auto;height:1px}
.orn .l{background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--key) 46%,transparent))}
.orn .r{background:linear-gradient(270deg,transparent,color-mix(in oklab,var(--key) 46%,transparent))}
.orn svg{flex:none;color:var(--key)}
/* A section on a content page: a Cinzel heading with a mono qualifier beside it,
   then a hairline. Same rhythm as the checklist's own section heads. */
.sec{display:flex;flex-direction:column;gap:20px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.sec-h h2{margin:0;font-size:24px;line-height:1.25;display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0}
@media (max-width:640px){.sec-h h2{font-size:21px;gap:12px}.sec-h>.sec-n{padding-left:0}}
/* A section title: a gold diamond before it, a gold hairline after it that
   fades out towards the right. */
.sec-h h2::before{content:"";flex:none;width:9px;height:9px;background:var(--accent);transform:rotate(45deg)}
.sec-h h2::after{content:"";flex:1 1 0;min-width:24px;height:1px;background:linear-gradient(90deg,var(--edge),transparent)}
.sec-h .mono{font-size:11px}
.sec-t{text-align:center;margin:0 0 3px;font-size:22px;font-weight:600;letter-spacing:-.02em}
.sec-s{text-align:center;margin:0 0 20px;color:var(--dim);font-size:14px}

/* A vault card with art behind it: the scrim, not the card, carries the dark. */
.vcard.art{position:relative;border:1px solid var(--line);padding:0;overflow:hidden;min-height:340px;
  justify-content:flex-end;background:var(--bg2);box-shadow:0 18px 40px -26px #000}
.vcard.art>picture{position:absolute;inset:0;z-index:0}
.vcard.art>picture>img{width:100%;height:100%;object-fit:cover;display:block}
.vcard.art::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,
  color-mix(in oklab,var(--bg) 28%,transparent) 0%,color-mix(in oklab,var(--bg) 74%,transparent) 46%,
  color-mix(in oklab,var(--bg) 96%,transparent) 100%)}
.vcard.art.lit{border-color:color-mix(in oklab,var(--accent) 42%,var(--line));
  box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 10%,transparent),0 20px 44px -24px color-mix(in oklab,var(--accent) 30%,#000)}
.vcard.art>*{position:relative;z-index:2}
.vcard.art .vc-h{position:absolute;left:15px;right:15px;top:14px;z-index:2}
.vcard.art .vc-t{padding:0 15px}
.vcard.art .wk-ticks{padding:0 15px}
.vcard.art .vc-m{padding:0 15px}
.vcard.art .vc-r{margin:0 15px 13px;border-top-color:color-mix(in oklab,var(--fg) 14%,transparent)}
.vcard.art .wk-n,.vcard.art .wk-w{padding-left:15px;padding-right:15px}
.vcard.art .vc-slot{border-color:color-mix(in oklab,var(--fg) 26%,transparent);
  background:color-mix(in oklab,var(--bg) 55%,transparent)}
.vcard.art .vc-slot.on{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 10px color-mix(in oklab,var(--accent) 80%,transparent)}
@media(max-width:720px){.stage{padding:18px 0 30px}.orn{gap:10px}
  .set-row{grid-template-columns:minmax(0,1fr) auto 40px}.set-b{display:none}
  .vring{width:150px;height:150px;right:-34px;opacity:.75}}

/* ---- the prototype's components, second pass ------------------------------
   The first pass took the prototype's palette and frames; these take its
   components as drawn, value for value, read off its inline styles. Later in
   the sheet than the rules they refine, so they win on order alone. */
/* Every framed plate lights its hairline on hover. */
:is(.vpanel,.scard,.vcard,.dcard,.cls,.st-chip,.rows,.rosc,.lad-w,.tw,.ch-box,.pf-card):hover{border-color:rgba(232,190,100,.45)}
:is(.vpanel,.scard,.vcard,.dcard,.cls,.st-chip,.rows,.rosc,.lad-w,.tw,.ch-box,.pf-card){transition:border-color .25s}
/* Home: the vault panel. */
.vpanel{padding:30px 32px}
.vp-reset{font-size:13px;font-weight:500}
.vp-b{gap:24px 36px}
.vslots{grid-template-columns:repeat(3,86px);grid-auto-rows:74px;gap:10px}
.vslots i{flex-direction:column;gap:2px;font:500 14px/1 var(--mono);color:var(--dim2);
  background:linear-gradient(180deg,#141315,#0a0a0b);border:2px solid #2a2622;box-shadow:inset 0 2px 6px rgba(0,0,0,.8);
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
.vslots i.on,.vslots i.min{--q:var(--tc,var(--accent));color:#fff;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--q) 33%,transparent),rgba(0,0,0,.6));
  border-color:var(--q);box-shadow:0 0 16px color-mix(in srgb,var(--q) 53%,transparent),inset 0 0 12px color-mix(in srgb,var(--q) 40%,transparent);
  animation:pvGlow 4s ease-in-out infinite}
.vslots i.min{animation:none;border-width:1px;box-shadow:inset 0 0 12px color-mix(in srgb,var(--q) 25%,transparent)}
.vslots i b{font:700 22px/1 var(--mono);color:#fff;letter-spacing:0}
.vslots i.min b{font-size:17px}
.vslots i small{font:500 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);opacity:.7;
  max-width:100%;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-big{gap:10px}
.vp-big #st-slots{font-size:76px;line-height:1}
.vp-of{font-size:22px;font-weight:500}
.vp-cap{font-size:15px;color:var(--dim2);margin-left:0}
.vp-note{font-size:14px;color:var(--dim2)}
.vp-note b{color:var(--fg)}
/* One line per vault source: its name, a bar of segments, one per tick, and
   the count with the thresholds. */
.vp-rows{gap:14px;border-top:0}
.vpr{grid-template-columns:200px minmax(0,1fr) 120px;gap:20px;padding:0;border-bottom:0;font-size:15px}
.vpr-b{display:none}
.vpr-t{font-size:15px}
.vpr-g{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.vpr-g i{height:6px;background:rgba(255,255,255,.08)}
.vpr-g i.on{background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 8px color-mix(in srgb,var(--accent) 50%,transparent)}
.vpr-n{text-align:right;font-size:13px;font-weight:500;color:var(--dim2)}
.vpr-n{color:var(--fg)}
@media (max-width:640px){
  .vslots{grid-template-columns:repeat(3,minmax(0,86px));grid-auto-rows:66px;gap:8px}
  .vpr{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px}
  .vpr-g{grid-column:1 / -1;grid-row:2}
}
/* The sync card. */
.scard{padding:28px;gap:18px}
.s-p{font-size:14.5px;line-height:1.55;color:var(--dim2)}
.s-in input{padding:13px 14px;font-size:13px}
.s-in .btn-gold,.ch-sync-in .btn-gold{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:0;
  text-transform:none;padding:13px 18px;
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
.s-dl{padding:10px 0}
/* Whose week: a label, then a chip per character in its class colour. */
.wk-who{gap:12px;border-bottom:0;padding-bottom:0}
.wk-who-l,.wk-who>.lbl{font:600 12px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim2)}
.wk-who .chip,#ros-tabs .chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font:400 14px 'IBM Plex Sans',system-ui,sans-serif;
  letter-spacing:0;color:var(--cc,var(--fg));border:1px solid var(--line);background:transparent;box-shadow:none}
.wk-who .chip::before,#ros-tabs .chip::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--cc,var(--accent))}
.wk-who .chip:hover,#ros-tabs .chip:hover{border-color:var(--cc,var(--accent));color:var(--cc,var(--fg))}
.wk-who .chip[aria-pressed=true],#ros-tabs .chip[aria-selected=true]{border-color:var(--cc,var(--accent));
  background:color-mix(in srgb,var(--cc,var(--accent)) 13%,transparent);color:var(--cc,var(--accent2));box-shadow:none}
/* A band's heading: the gold kicker, and its count at the far end. */
.wk-sub .n,.wk-sub h4{font-size:12px;font-weight:600;letter-spacing:.24em;color:var(--accent)}
.wk-sub[data-band]::before{content:"";flex:none;width:7px;height:7px;background:var(--accent);transform:translateY(-1px) rotate(45deg);align-self:center}
.wk-sub[data-band] .n::after{content:" ·";letter-spacing:.24em}
.wk-sub{gap:10px}
.wk-bsum{font-size:12px;font-weight:500;letter-spacing:0;color:var(--dim2)}
/* The vault cards. */
.vgrid{gap:20px}
.vcard{padding:24px 24px 22px;gap:16px}
.vc-t{font-size:17px;font-weight:600}
.vc-h .wk-c{font-size:14px;font-weight:600;color:var(--accent2)}
.wk-ticks.pips{gap:4px}
.wk-ticks.pips .tick{height:6px;background:rgba(255,255,255,.08)}
.wk-ticks.pips .tick.on{background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 8px color-mix(in srgb,var(--accent) 50%,transparent)}
.vc-r{border-top:0;padding-top:0;gap:8px}
.vslot{min-height:0}
.vs-req{font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--fg)}
.vslot.locked .vs-req{color:var(--dim2);opacity:1}
.vs-pick{font-size:12px;padding:0}
.vc-m{justify-content:flex-start;padding-top:12px;border-top:1px solid var(--line)}
.vc-next{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;text-align:left;color:var(--accent)}
.vc-m:has(.vc-next:empty){display:none}
/* The plain checklist: one framed plate, a hairline between lines. */
.rows{gap:0;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate)}
.wk{background:none;padding:18px 24px;gap:18px;grid-template-columns:58px minmax(0,1fr) auto auto}
.wk+.wk{border-top:1px solid var(--line)}
.wk:hover{background:rgba(255,255,255,.025)}
.wk-t{font-size:15px}
.wk-ticks.one .tick{width:18px;height:18px;box-shadow:inset 0 0 0 1.5px var(--accent)}
.wk-ticks.one .tick.on::after{left:5px;top:5px;width:8px;height:8px}
.wk-tag{padding:4px 10px;font-size:11px;font-weight:600;letter-spacing:.14em;background:none;border:1px solid var(--line);color:var(--dim2)}
.wk-c{font-size:14px;font-weight:600;color:var(--accent2)}
@media (max-width:720px){.wk{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:14px 16px}.vcard{padding:20px}}

/* Classes: two columns of class plates, each spec one line under the band. */
.cls-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.cls-cols .cls+.cls{margin-top:0}
@media (max-width:1100px){.cls-cols{grid-template-columns:minmax(0,1fr)}}
.cls-h{padding:18px 22px;justify-content:space-between;border-bottom:1px solid color-mix(in srgb,var(--cc) 33%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 20%,transparent),transparent 70%);box-shadow:inset 3px 0 0 var(--cc)}
.cls-rule{display:none}
.cls-c{font-size:12px;font-weight:500;letter-spacing:0}
.cgrid{display:flex;flex-direction:column;gap:0;background:none;margin:0}
.scell{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px 14px;align-items:center;padding:14px 22px;background:none}
.scell+.scell{border-top:1px solid var(--line)}
.scell-h{display:contents}
.crow-i{grid-row:1 / span 2;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--cc) 53%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--cc) 20%,transparent);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.scell-n{flex-direction:row;align-items:baseline;gap:10px;grid-column:2}
.scell-n .mono{font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--tc,var(--dim2))}
.scell-l{grid-column:2;flex-direction:row;flex-wrap:wrap;gap:6px 14px}
.gset{gap:6px}
.gsrc{width:auto;letter-spacing:.14em;color:var(--dim2)}
.glink{clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px)}
.r-tank{--tc:#6fa8ff}.r-healer{--tc:#6fe08a}.r-melee-dps{--tc:#ff7a6a}.r-ranged-dps{--tc:#ffb86a}
.legend.bare{padding:0;background:none;border:0;box-shadow:none;gap:8px 14px}
.legend.bare:hover{border-color:transparent}

/* Every alt's week: the prototype's Characters table. */
.week-list{padding:8px 8px 10px}
.wk-r{grid-template-columns:minmax(150px,1.5fr) 150px 70px 70px minmax(0,2.2fr) minmax(0,1.3fr);gap:16px;padding:12px 18px;
  border-top:0;font-size:14px}
.wk-r:nth-child(odd):not(.wk-hd){background:rgba(255,255,255,.022)}
.wk-r:nth-child(even){background:none}
.wk-r:not(.wk-hd):hover{background:rgba(227,183,90,.07)}
.wk-hd{padding:14px 18px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim2);
  border-bottom:1px solid var(--edge)}
.wk-hd:hover{background:none}
.wk-r-who{display:flex;align-items:center;gap:12px;min-width:0}
.wk-r-who img{flex:none;width:38px;height:38px;display:block;border:1px solid var(--cc,var(--line));
  box-shadow:0 0 14px color-mix(in srgb,var(--cc,transparent) 33%,transparent);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.wk-r-nt{display:flex;flex-direction:column;gap:2px;min-width:0}
.wk-r-cl{font-size:12px;color:var(--dim2)}
.wk-v{display:flex;flex-direction:column;gap:5px}
.wk-sq{grid-template-columns:repeat(9,12px);grid-auto-rows:16px;gap:3px}
.wk-sq i{background:#1d1b1e;box-shadow:inset 0 0 0 1px #2c2926;
  clip-path:polygon(2px 0,calc(100% - 2px) 0,100% 2px,100% calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,0 calc(100% - 2px),0 2px)}
.wk-sq i.on{background:linear-gradient(180deg,var(--accent2),var(--accent));box-shadow:0 0 6px color-mix(in srgb,var(--accent) 60%,transparent)}
.wk-r-c{font-size:11px;font-weight:500;text-align:left}
.wk-r-i{font-size:16px;text-align:left}
.wk-r-m{font-size:15px;font-weight:700;text-align:left}
.wk-r-x{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--accent);white-space:normal}
.wk-cr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;color:var(--fg)}
.wk-crc{flex-direction:row;align-items:center;gap:6px;width:auto;min-width:0;padding:5px 7px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px)}
.wk-crc i{flex:none;width:7px;height:7px;background:var(--tc,var(--dim2));transform:rotate(45deg)}
.wk-crc b{font-size:13px;font-weight:600;text-align:left;color:#fff}
.wk-crc.off{opacity:.55}
.wk-crc.off b{color:var(--dim2)}
.wk-crc.cap{border-color:#ff6b5a88;background:rgba(255,80,60,.1)}
.wk-crc.cap b{color:#ff6b5a}
.wk-crc.cap i{background:var(--tc,var(--danger))}
/* A tier with a season cap: "earned/cap" instead of the bag balance, so the
   number that says "you are about to waste this" is on the page rather than
   in a title tooltip a touch or keyboard visitor never sees. Two lines, not
   one seven-character run, because the chip is a fifth of a column at every
   width down to a phone. */
.wk-crc.earned{padding:4px 6px}
.wk-crc.earned b{display:flex;flex-direction:column;gap:0;line-height:1.15}
.wk-crc-of{font-size:9.5px;font-weight:500;color:var(--dim2)}
.wk-crc.cap .wk-crc-of{color:#ff6b5a}
@media (max-width:1300px){.wk-r{grid-template-columns:minmax(140px,1.4fr) 140px 56px 56px minmax(0,2fr) minmax(0,1.1fr);gap:12px}.wk-sq{grid-template-columns:repeat(9,11px)}}
@media (max-width:980px){
  .wk-hd{display:none}
  .wk-r{grid-template-columns:minmax(0,1fr) auto auto;gap:10px 14px}
  .wk-r-who{grid-column:1 / -1}
  .wk-cr,.wk-r-x{grid-column:1 / -1}
}
@media (max-width:720px){.wk-r{grid-template-columns:minmax(0,1fr) auto auto}.wk-r-i,.wk-r-m{display:block}}

/* ---- the character table, as the prototype draws it ----------------------
   No frame round the table: a line of column heads, then every character a
   dark card of its own with a gap between, a hairline edge, and its class
   colour as a 3px stripe down the left and on its name. This replaces the
   class-coloured row shades (--cw/--cwh/--cwo) the table wore before. */
#al-tw.tw{background:none;border:0;box-shadow:none;padding:0 0 4px}
#al-tw.tw:hover{border-color:transparent}
.tbl.alts{border-collapse:separate;border-spacing:0 8px;margin-top:-8px}
.tbl.alts thead th{border-bottom:0;padding-top:8px;padding-bottom:0;font-size:10.5px;letter-spacing:.18em}
.tbl.alts tbody tr[data-who],.tbl.alts tbody tr[data-who]:hover,.tbl.alts tbody tr[data-who].on,
.tbl.alts tbody tr:nth-child(even){background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.38))}
.tbl.alts tbody tr[data-who] td{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);text-shadow:none;
  transition:border-color .2s}
.tbl.alts tbody tr[data-who] td:first-child{border-left:1px solid var(--edge);box-shadow:inset 3px 0 0 var(--cc,var(--accent))}
.tbl.alts tbody tr[data-who] td:last-child{border-right:1px solid var(--edge)}
.tbl.alts tbody tr[data-who]:hover{filter:brightness(1.15)}
.tbl.alts tbody tr[data-who].on td{border-color:color-mix(in srgb,var(--cc,var(--accent)) 55%,transparent)}
.tbl.alts tbody tr[data-who].on td:first-child{box-shadow:inset 3px 0 0 var(--cc,var(--accent))}
body[data-flavor="forever"] .tbl.alts tbody tr[data-who]{--dim:var(--dim);--dim2:#9fc0c8}
.tbl.alts tbody tr[data-who] .al-n,.tbl.alts tbody tr[data-who] .al-cls{color:var(--cc,var(--fg));text-shadow:none}
.tbl.alts tbody tr[data-who] td:first-child{padding-left:16px}
.tbl.alts thead th:first-child{padding-left:16px}
.al-c{gap:14px}
.al-c img{width:38px;height:38px;border:1px solid var(--cc,var(--line));box-shadow:0 0 14px color-mix(in srgb,var(--cc,transparent) 33%,transparent);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.al-cn{gap:3px}
.al-n{font-size:14px;font-weight:700}
.al-m{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:12px;letter-spacing:0}
.al-fa.h{color:#e0707a}.al-fa.a{color:#6fa8ff}
.al-lv{font-weight:700;color:var(--accent2)}
.al-x{width:56px;height:4px;background:rgba(255,255,255,.1);margin:5px 0 3px}
.al-x i{background:var(--teal,var(--accent));box-shadow:0 0 6px var(--teal,var(--accent))}
.al-rs{font-weight:500;color:var(--dim2)}
.al-cls{font-weight:600}
.al-g{color:var(--accent2)}
.tbl.alts td.mono:not(.al-g){color:inherit}
.al-ps{flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:6px;width:auto}
.al-pi{position:relative;display:flex;flex-direction:column;gap:3px;width:30px;flex:none}
.al-pi img{width:30px;height:30px;display:block;border:1px solid var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 35%,transparent);
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
.al-pi.sec img{border-color:rgba(255,255,255,.25);box-shadow:none}
.al-pi b{position:absolute;right:-2px;top:17px;padding:0 3px;font:700 10px/1.3 var(--mono);color:#fff;background:rgba(0,0,0,.75);text-shadow:0 1px 0 #000}
.al-pt{display:block;height:3px;background:rgba(0,0,0,.45)}
.al-pt i{display:block;height:100%;width:var(--pw);background:linear-gradient(90deg,#b8741f,var(--accent2))}
.al-pi.sec .al-pt i{background:var(--teal,var(--accent))}
button.al-pi{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
button.al-pi:hover img{border-color:var(--accent2);filter:brightness(1.15)}
.al-inv button,.al-sy{border-color:var(--edge)}
/* The sheet unfolded under a row sits as a card of its own in the gap. */
.tbl.alts tbody tr.al-rx,.tbl.alts tbody tr.al-rx:nth-child(even){background:none}
.tbl.alts tbody tr.al-rx td{padding:0}
/* The heading and its tools, as the prototype's Forever home. */
#chars>.sec-h h2{font-size:clamp(28px,3vw,40px);letter-spacing:.02em}
#chars>.sec-h h2::before,#chars>.sec-h h2::after{display:none}
.ch-tools .obtn{clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px);
  padding:10px 13px;letter-spacing:.12em;background:none}
#sync-open{background:var(--btn);color:var(--on-accent);border-color:transparent}
#sync-open:hover{filter:brightness(1.08);color:var(--on-accent)}
body[data-flavor="forever"] #al-sum .st-chip:last-child .v{color:var(--teal)}

/* Forever reference tables: a level band over a bar placing it on the climb,
   the faction in its colour, new instances named in gold. */
.lvc{display:flex;flex-direction:column;gap:5px;min-width:110px}
.lvc .mono{font-size:13.5px;font-weight:700;color:var(--accent2)}
.lvb{position:relative;display:block;height:5px;background:rgba(255,255,255,.08)}
.lvb::after{content:"";position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);
  background:linear-gradient(90deg,var(--lc,var(--teal,var(--accent))),var(--accent2));box-shadow:0 0 8px var(--lc,var(--teal,var(--accent)))}
.fac{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--tc,var(--fg))}
.fac i,.lg-i.fac-alliance i,.lg-i.fac-horde i,.lg-i.fac-both i{flex:none;width:7px;height:7px;background:var(--tc,currentColor);transform:rotate(45deg)}
.fac-alliance{--tc:#4a8cf0}.fac-horde{--tc:#e0474f}.fac-both{--tc:#f5d488}
.tbl.dun td:first-child{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:14.5px}
.tbl.dun td:first-child a{color:var(--fg)}
.tbl.dun tr.new td:first-child,.tbl.dun tr.new td:first-child a{color:var(--accent2)}
.tbl.dun td:nth-child(2){color:var(--dim2)}
.tbl.dun .dun-n{font-size:13px;color:var(--dim2)}
.tbl.dun .rw-c,.legend .rw-c,.raid .rw-c{clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px)}
.legend .rw-c{display:inline-block;margin-right:8px;padding:2px 7px;font-size:9.5px;font-weight:700;letter-spacing:.14em;color:#04202b;background:var(--teal,var(--accent))}
.legend.bare .lg-i.plain{color:var(--dim2)}
/* The raids, as cards. */
.raid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.raid{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:16px;padding:26px;background:var(--panel);
  border:1px solid var(--edge);box-shadow:var(--plate);transition:border-color .25s}
.raid:hover{border-color:rgba(232,190,100,.45)}
.raid::before{content:"";position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 25%,transparent),transparent 70%);pointer-events:none}
.raid-h{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.raid-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.raid-n{font:900 24px/1.15 Cinzel,Georgia,serif;color:var(--accent2)}
.raid-n a{color:inherit}
.raid-n .rw-c{display:inline-block;margin-left:8px;padding:2px 7px;vertical-align:4px;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#04202b;background:var(--teal,var(--accent))}
.raid-w{font-size:13px;color:var(--dim2)}
.raid-s{flex:none;display:flex;flex-direction:column;align-items:center;padding:8px 12px;border:1px solid var(--edge);background:rgba(0,0,0,.3);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.raid-s b{font:700 22px/1.1 var(--mono);color:#fff}
.raid-s i{font:600 9px var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--dim2)}
.raid-p{position:relative;margin:0;font-size:13.5px;line-height:1.55;color:var(--fg)}
.raid-l{position:relative;display:flex;align-items:center;gap:10px;margin-top:auto;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal,var(--accent))}
.raid-l::before{content:"";flex:none;width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
/* Gear by boss (27 Sep): under each dungeon table, one folding plate per
   instance, a card per boss inside it, a row per item. Item colours are the
   game's quality scale, lifted a little where the game's own shade is too dark
   to read on this ground. State lives in data-* attributes: Wowhead's tooltip
   CSS owns the short q0-q5 class names. */
.lt-top{display:flex;flex-direction:column;gap:16px;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);padding:26px 30px;transition:border-color .25s}
.lt-top:hover{border-color:rgba(232,190,100,.45)}
.lt-top-t h2{margin:0 0 6px;font-size:clamp(22px,2.4vw,28px);color:var(--accent2)}
.lt-top-t p{margin:0;max-width:70ch;color:var(--dim);font-size:14px}
.lt-f{display:flex;flex-wrap:wrap;gap:6px}
.lt-fb,.lt-all{padding:7px 11px;border:1px solid var(--edge);background:rgba(0,0,0,.25);color:var(--fg);cursor:pointer;
  font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
.lt-fb:hover,.lt-all:hover{border-color:var(--accent);color:var(--accent2)}
.lt-fb[aria-pressed="true"]{background:var(--teal,var(--accent));border-color:transparent;color:#04202b}
.lt-key{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;color:var(--dim2)}
.lt-ki{display:inline-flex;align-items:flex-start;gap:8px}
.lt-ki .lt-st{margin-top:1px}
.lt-tools{display:flex;gap:6px}
.lt-st{flex:none;display:inline-block;padding:3px 7px;font:700 9.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  border:1px solid currentColor;color:var(--dim2);
  clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px)}
.lt-st[data-st="forever"]{background:var(--teal,var(--accent));border-color:transparent;color:#04202b}
.lt-st[data-st="classic"]{color:var(--accent2)}
.lt-st[data-st="unknown"]{color:var(--off,var(--dim2))}
.lt-st[data-st="partial"]{color:#e0a25a}
.lt-go{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal,var(--accent));vertical-align:1px;white-space:nowrap}
.lt-go::before{content:"";width:5px;height:5px;background:currentColor;transform:rotate(45deg)}
.tbl.dun td:first-child a.lt-go{color:var(--teal,var(--accent));font-family:var(--mono)}
.tbl.dun td:first-child a.lt-go:hover{color:var(--accent2)}
.raid-lt{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:12.5px;color:var(--dim2)}
.lt-list{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.lt-h{display:flex;align-items:center;gap:10px;margin:0 0 4px;font:600 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim2)}
.lt-h::before{content:"";flex:none;width:7px;height:7px;background:var(--accent);transform:rotate(45deg)}
.lt{background:var(--panel);border:1px solid var(--edge);scroll-margin-top:84px;transition:border-color .25s}
.lt:hover,.lt[open]{border-color:rgba(232,190,100,.4)}
.lt-s{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:13px 18px;list-style:none}
summary.lt-s{cursor:pointer}
summary.lt-s::-webkit-details-marker{display:none}
summary.lt-s:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lt-sn{font:700 16px/1.25 Cinzel,Georgia,serif;color:var(--fg);min-width:0}
.lt[open] .lt-sn{color:var(--accent2)}
.lt-sm{font:500 11.5px var(--mono);color:var(--dim2)}
.lt-s .lt-st{margin-left:auto}
.lt-x{flex:none;width:8px;height:8px;margin:0 2px 0 4px;border-right:2px solid var(--dim2);border-bottom:2px solid var(--dim2);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.lt[open] .lt-x{transform:rotate(225deg) translate(-2px,-2px)}
.lt-u{background:none;border-style:dashed;border-color:var(--line)}
.lt-u:hover{border-color:var(--line)}
.lt-u .lt-sn{color:var(--dim)}
.lt-u .lt-sm{font-family:inherit;font-size:13px}
.lt-bd{display:flex;flex-direction:column;gap:14px;padding:2px 18px 18px}
.lt-src{margin:0;max-width:90ch;font-size:12.5px;line-height:1.55;color:var(--dim2)}
.lt-bs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:12px;align-items:start}
.lt-b{display:flex;flex-direction:column;gap:4px;padding:14px 14px 8px;background:rgba(0,0,0,.24);border:1px solid var(--line);border-top:2px solid color-mix(in srgb,var(--accent) 55%,transparent);transition:opacity .2s}
.lt-b.lt-0{opacity:.55}
.lt-bh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.lt-bn{margin:0;font:700 15px/1.25 Cinzel,Georgia,serif;color:var(--accent2)}
.lt-bn a{color:inherit}
.lt-bn a:hover{color:#fff}
.lt-bw{flex:none;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal,var(--accent))}
.lt-is{list-style:none;margin:0;padding:0}
.lt-i{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line2)}
.lt-i:first-child{border-top:0}
.lt-i[hidden]{display:none}
.lt-ic{display:block;width:34px;height:34px;border:1px solid var(--qc,var(--line));background:var(--well);box-shadow:0 0 8px color-mix(in srgb,var(--qc,transparent) 30%,transparent)}
.lt-ic img{display:block;width:32px;height:32px}
.lt-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.lt-b a.lt-a{font-weight:600;font-size:13.5px;line-height:1.3;color:var(--qc,var(--fg)) !important;text-decoration:none;overflow-wrap:anywhere}
.lt-b a.lt-a:hover{text-decoration:underline;text-underline-offset:2px}
.lt-b [data-q="0"]{--qc:#9d9d9d}.lt-b [data-q="1"]{--qc:#f2f2f2}.lt-b [data-q="2"]{--qc:#1eff00}.lt-b [data-q="3"]{--qc:#4aa6ff}.lt-b [data-q="4"]{--qc:#c27dff}.lt-b [data-q="5"]{--qc:#ff9a2e}
.lt-m{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font:500 11px var(--mono);color:var(--dim2)}
.lt-lv{color:var(--faint,var(--dim2))}
.lt-ch{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--teal2,var(--accent2)) 85%,transparent);cursor:help}
.lt-ch::before{content:"";width:5px;height:5px;background:currentColor;transform:rotate(45deg)}
.lt-p{font:700 12px var(--mono);color:var(--accent2);text-align:right;min-width:3.4em}
.lt-e{margin:4px 0 6px;font-size:12.5px;color:var(--dim2)}
.lt-miss{margin-top:2px;padding-top:6px;border-top:1px dashed var(--line);font-size:12px;color:var(--faint,var(--dim2))}
@media (max-width:640px){
  .lt-top{padding:20px 16px}
  .lt-s{padding:12px 14px}
  .lt-bd{padding:2px 12px 14px}
  .lt-s .lt-st{margin-left:0}
}
/* Real loot: what PatchVault players saw drop, laid over the Classic numbers
   by the "lt" module once /api/loot.php has something. Without data only the
   .lt-rl invitation lines show. */
.lt-st[data-st="seen"]{color:#9be3a6;background:rgba(127,209,139,.12)}
.lt-real{margin:0;max-width:78ch;font-size:13px;line-height:1.55;color:var(--dim)}
.lt-real b{color:var(--fg);font-weight:600}
.lt-real a,.lt-rl a{color:var(--accent2)}
.lt-rl{margin:0;font-size:12px;color:var(--dim2)}
.lt-rl::before{content:"";display:inline-block;width:5px;height:5px;margin:0 8px 1px 0;background:#9be3a6;transform:rotate(45deg)}
.lt-sk{color:#9be3a6}
.lt-obs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 4px;font:500 11px/1.4 var(--mono);color:var(--dim)}
.lt-obs .lt-st{padding:2px 6px;font-size:9px}
.lt-p{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.lt-pk{font:600 8.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim2)}
.lt-oc{display:block;flex-basis:100%;font:600 11px var(--mono);color:#9be3a6}
.lt-oc[data-z]{color:var(--dim2);font-weight:500}
.lt-oc[data-u]::after{content:" · unconfirmed";color:var(--dim2);font-weight:500}
.lt-nh{margin:8px 0 0;padding-top:8px;border-top:1px dashed var(--line);font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9be3a6}
.lt-nw .lt-ic:empty::after{content:"?";display:grid;place-items:center;height:100%;font:700 14px var(--mono);color:var(--dim2)}
.lt-b.lt-sb{border-top-color:rgba(127,209,139,.6)}
.lt-up{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid #7fd18b;background:rgba(0,0,0,.2)}
.lt-up[hidden]{display:none}
.lt-uh{margin:0;font-size:13.5px;line-height:1.5;color:var(--dim)}
.lt-ul{padding:0;border:0;background:none;color:var(--accent2);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.lt-ul:hover{color:#fff}
.lt-uhd{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.lt-uhd h3{margin:0;font:700 17px/1.25 Cinzel,Georgia,serif;color:var(--fg)}
.lt-uhd h3 b{color:var(--cc,var(--accent2))}
.lt-um{font:500 11.5px var(--mono);color:var(--dim2)}
.lt-uo{margin-left:auto}
.lt-uw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:6px 10px}
.lt-uw a{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);background:rgba(0,0,0,.22);color:var(--fg);text-decoration:none;transition:border-color .2s}
.lt-uw a:hover{border-color:#7fd18b}
.lt-uw-n{flex:none;min-width:1.7em;font:700 18px/1 var(--mono);color:#9be3a6;text-align:right}
.lt-uw-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.lt-uw-t b{font-weight:600;font-size:13.5px;line-height:1.25}
.lt-uw-t span{font:500 11px var(--mono);color:var(--dim2)}
.lt-uw .lt-st{margin-left:auto}
.lt-un2{margin:0;font-size:12px;line-height:1.5;color:var(--dim2)}
.lt-un{font:600 11.5px var(--mono);color:#9be3a6}
.lt-un i{font-style:normal;font-weight:500;color:var(--dim2)}
.lt-ub{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-top:3px;padding:1px 7px;font:700 10.5px/1.5 var(--mono);color:#062b12;background:#8fdc9a;cursor:help}
.lt-ut::before{content:"";display:inline-block;vertical-align:1px;margin-right:5px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid currentColor}
/* The stat changes of the swap, on their own line under the verdict: gains in
   the badge's own ink, losses in a dark red that still reads on the green. */
.lt-ub{display:block}
.lt-us{display:flex;flex-wrap:wrap;gap:0 10px;padding-left:13px;font-weight:600}
.lt-us i{font-style:normal;white-space:nowrap}
.lt-us i[data-d="dn"]{color:#8b1a1a}
.lt-i[data-up]{background:linear-gradient(90deg,rgba(127,209,139,.12),transparent 75%)}
.lt-b[hidden],.lt[hidden],.lt-list[hidden]{display:none}
.lt-other{margin-top:0}
.lt-nw a.lt-a .iconsmall{display:none}
/* Gear finder: three lists of the same "gf-row" shape (item, a tag or a
   profession, a short stat line, and either an explanation or a call to
   action), so cross-alt and crafted read as one page rather than two
   bolted-together widgets. */
.gf-who{margin:0 0 4px;font-size:12.5px;color:var(--dim2)}
.gf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.gf-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.gf-row:last-child{border-bottom:0}
.gf-a{font-weight:600}
.gf-tag{flex:none;font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px}
.gf-tag[data-gf="ok"]{color:#062b12;background:#8fdc9a}
.gf-tag[data-gf="bound"]{color:var(--dim2);border:1px solid var(--line)}
.gf-tag[data-gf="unknown"]{color:#e0a25a;border:1px solid color-mix(in oklab,#e0a25a 45%,transparent)}
.gf-slot{font:500 11.5px var(--mono);color:var(--dim2)}
.gf-stats{display:flex;flex-wrap:wrap;gap:0 8px;font:600 11.5px var(--mono);color:#9be3a6}
.gf-prof{font-size:11px;color:var(--dim2)}
.gf-note{flex-basis:100%;margin:2px 0 0;font-size:12px;color:var(--dim2)}
.gf-go{margin-left:auto;flex:none}
.gf-drop{display:flex}
@media (max-width:640px){
  .gf-row{padding:10px 0}
  .gf-go{flex-basis:100%;margin-left:0;text-align:center}
}
/* Level together, framed at the head of the Zones page. */
#zp{background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate);padding:30px 32px;transition:border-color .25s}
#zp:hover{border-color:rgba(232,190,100,.45)}
@media (max-width:640px){#zp{padding:22px 18px}}

/* Account and feedback forms, as the prototype's: full-width wells and a
   big chamfered gold action. */
.acc-f,.fb-f,.fb-rf{max-width:none}
.acc-f input,.fb-link{padding:14px 16px;font-size:13.5px}
.acc-f textarea{min-height:180px;padding:16px;font-size:14px}
:is(#account,#feedback,#friends) .btn-gold{padding:15px 22px;font-size:13px;letter-spacing:.1em;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
:is(#account,#feedback,#friends) .obtn{padding:14px 20px;font-family:Cinzel,Georgia,serif;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--fg);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
:is(#account,#feedback,#friends) .obtn.danger{color:var(--danger-fg);border-color:rgba(255,100,80,.4)}
#feedback .chip,#account .chip{padding:9px 16px;font-size:11px;letter-spacing:.14em;
  clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
.fb-t{padding:22px 24px;gap:10px;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate)}
.fb-m.admin{border-left:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);padding:12px 14px}

/* ---- motion ---------------------------------------------------------------
   Every animation of the design prototype, by its own name and values. The
   page arrives out of a blur (pvIn), table rows and list items slide in one
   after another (pvRow), lit vault slots breathe (pvGlow), two glows drift
   and motes of light rise behind everything (pvDrift, pvRise), and the game
   switch bursts open over the page (pvWipe, pvEmblem). The rows only move on
   a page's first paint: html.pv-settled goes on after a moment or at the
   first click or key, whichever comes first, so a sort, a filter or opening
   a character redraws the rows in place instead of replaying the entrance.
   prefers-reduced-motion switches all of it off at the end of this block. */
@keyframes pvGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
@keyframes pvDrift{0%,100%{translate:0 0}50%{translate:80px 50px}}
@keyframes pvRise{0%{transform:translateY(0);opacity:0}10%{opacity:.8}85%{opacity:.5}100%{transform:translateY(-110vh);opacity:0}}
@keyframes pvIn{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes pvRow{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes pvWipe{0%{clip-path:circle(0% at var(--wx,140px) var(--wy,150px));opacity:1}45%{clip-path:circle(150% at var(--wx,140px) var(--wy,150px));opacity:1}70%{opacity:1}100%{clip-path:circle(150% at var(--wx,140px) var(--wy,150px));opacity:0}}
@keyframes pvEmblem{0%{transform:scale(.4) rotate(-90deg);opacity:0}45%{transform:scale(1) rotate(0);opacity:1}75%{transform:scale(1.05);opacity:1}100%{transform:scale(1.4);opacity:0}}
/* The second half of the two above, played by the page the switch lands on:
   it opens already covered and lifts off. */
@keyframes pvWipeOut{0%,45%{opacity:1}100%{opacity:0}}
@keyframes pvEmblemOut{0%{transform:scale(1);opacity:1}55%{transform:scale(1.05);opacity:1}100%{transform:scale(1.4);opacity:0}}
.pv-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pv-bg i{position:absolute;display:block}
.pv-g1,.pv-g2{border-radius:50%;will-change:translate}
.pv-g1{left:30%;top:-300px;width:900px;height:700px;background:var(--glow-a);filter:blur(120px);animation:pvDrift 20s ease-in-out infinite}
.pv-g2{right:-200px;bottom:-200px;width:800px;height:700px;background:var(--glow-b);filter:blur(130px);animation:pvDrift 26s ease-in-out -8s infinite}
.pv-m{left:var(--x);bottom:-20px;width:var(--s);height:var(--s);border-radius:50%;background:var(--mote-a);
  box-shadow:0 0 calc(var(--s) * 3) var(--mote-a);opacity:.7;animation:pvRise var(--d) linear var(--o) infinite}
.pv-m.b{background:var(--mote-b);box-shadow:0 0 calc(var(--s) * 3) var(--mote-b)}
/* fill-mode "both" here, not "forwards": once this animation reaches its
   .6s end, "forwards"/"both" keeps transform/filter alive on this element
   forever -- even landing on the no-op end values (transform:none,
   filter:none) still registers as "not none" to getComputedStyle, which
   permanently turns .main into a containing block for position:fixed
   descendants. Every lightbox dialog (bags/bank, addon sync, item search)
   lives under .main, so they stopped centering on the viewport and pinned
   to wherever .main's box happened to be instead. "backwards" alone still
   holds the from-state for a delayed start (none here, but harmless) and
   lets the animation cleanly end -- no fill-mode is really needed for .main
   itself since its default (unanimated) style already equals the "to"
   keyframe, but "backwards" is kept for symmetry with the row animation
   below, which does need it. */
.main{animation:pvIn .6s cubic-bezier(.2,.7,.2,1) backwards}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr){animation:pvRow .5s cubic-bezier(.2,.7,.2,1) backwards}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(2){animation-delay:35ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(3){animation-delay:70ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(4){animation-delay:105ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(5){animation-delay:140ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(6){animation-delay:175ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(7){animation-delay:210ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(8){animation-delay:245ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(9){animation-delay:280ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(10){animation-delay:315ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(11){animation-delay:350ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(12){animation-delay:385ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(13){animation-delay:420ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(14){animation-delay:455ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(15){animation-delay:490ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(16){animation-delay:525ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(17){animation-delay:560ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(18){animation-delay:595ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(19){animation-delay:630ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(20){animation-delay:665ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(21){animation-delay:700ms}
html:not(.pv-settled) :is(.tbl tbody tr,.vpr):nth-child(n+22){animation-delay:700ms}
.pv-wipe{display:none;position:fixed;inset:0;z-index:90;pointer-events:none;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 50%,#f5d488 0%,#c9913a 22%,#0f5a6e 55%,#031a26 90%)}
.pv-wipe-e{width:180px;height:180px;display:flex;align-items:center;justify-content:center}
.pv-wipe-e svg{width:160px;height:160px;filter:drop-shadow(0 0 40px rgba(255,220,140,.9))}
.pv-wipe.go{display:flex;animation:pvWipe 1s cubic-bezier(.6,0,.2,1) both}
.pv-wipe.go .pv-wipe-e{animation:pvEmblem 1s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:no-preference){
  html.pv-wipe-in .pv-wipe{display:flex;animation:pvWipeOut .55s cubic-bezier(.6,0,.2,1) both}
  html.pv-wipe-in .pv-wipe .pv-wipe-e{animation:pvEmblemOut .55s cubic-bezier(.2,.7,.2,1) both}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pv-m{display:none}
  .pv-wipe{display:none!important}
}
/* ---- your current character: the rail plate, the drawer, the hover compare
   The plate sits under the Retail | Forever switch and opens the drawer,
   which slides in from the left (Features comes in from the right). The
   compare panel is the in-game "currently equipped" tooltip, placed beside
   Wowhead's own. State rides in data-* attributes: Wowhead's CSS owns short
   class names. */
.cur-pl{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px 10px 14px;text-align:left;cursor:pointer;
  font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--edge);
  box-shadow:inset 3px 0 0 var(--cc,var(--edge));transition:border-color .15s}
.cur-pl:hover{border-color:var(--accent)}
.cur-pl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cur-pl-k{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim2)}
.cur-pl-n{font-family:Cinzel,Georgia,serif;font-size:15px;font-weight:700;line-height:1.25;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cur-pl[data-set] .cur-pl-n{color:var(--cc,var(--fg))}
.cur-pl-m{font-family:var(--mono);font-size:10.5px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cur-pl svg{flex:none;color:var(--dim2)}
.cur-pl:hover svg{color:var(--accent)}
.mobmenu .cur-pl{width:auto;margin:0 12px 12px}
/* On Forever's parchment rail the plate is a well of the page's teal, like
   the switch above it. */
body[data-flavor="forever"] .rail .cur-pl,body[data-flavor="forever"] .mobmenu .cur-pl{
  background:#073d58;border-color:#04202b;color:#eef5f3;
  box-shadow:inset 3px 0 0 var(--cc,#5fbdae),inset 0 0 0 1px rgba(140,210,220,.12)}
body[data-flavor="forever"] .rail .cur-pl:hover,body[data-flavor="forever"] .mobmenu .cur-pl:hover{border-color:#2b2115}
body[data-flavor="forever"] .rail .cur-pl-k,body[data-flavor="forever"] .mobmenu .cur-pl-k,
body[data-flavor="forever"] .rail .cur-pl svg,body[data-flavor="forever"] .mobmenu .cur-pl svg{color:#9fc0c8}
body[data-flavor="forever"] .rail .cur-pl-m,body[data-flavor="forever"] .mobmenu .cur-pl-m{color:#b3cdd3}
body[data-flavor="forever"] .rail .cur-pl-n,body[data-flavor="forever"] .mobmenu .cur-pl-n{color:#d9e6e9}
body[data-flavor="forever"] .rail .cur-pl[data-set] .cur-pl-n,body[data-flavor="forever"] .mobmenu .cur-pl[data-set] .cur-pl-n{color:var(--cc,#eef5f3)}
/* The top bar's own way in, beside the menu button: a figure with the
   current character's class colour as a dot. */
.cur-tb{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-8px 0 -8px auto;
  padding:0;background:none;border:0;color:var(--fg);cursor:pointer}
.cur-tb i{position:absolute;right:9px;bottom:10px;width:8px;height:8px;background:var(--cc,var(--accent));transform:rotate(45deg);
  box-shadow:0 0 0 2px var(--bg2)}
.cur-tb:not([data-set]) i{display:none}
.cur-tb:hover{color:var(--accent)}

.cur-d{position:fixed;inset:0;z-index:50}
.cur-d[hidden]{display:none}
.cur-bg{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.cur-p{position:absolute;top:0;left:0;bottom:0;width:min(440px,100vw);display:flex;flex-direction:column;
  background:radial-gradient(420px 320px at 10% 0,var(--glow-a),transparent 70%),var(--bg);border-right:1px solid var(--edge);
  box-shadow:24px 0 60px rgba(0,0,0,.45);animation:cur-in .22s ease-out}
@keyframes cur-in{from{transform:translateX(-48px);opacity:0}}
.cur-hd{display:flex;align-items:flex-start;gap:12px;padding:22px 22px 12px}
.cur-hd>div{flex:1;min-width:0}
.cur-hd .kicker{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.24em;color:var(--accent)}
.cur-hd .kicker::before{content:"";flex:none;width:7px;height:7px;background:var(--accent);transform:rotate(45deg)}
.cur-hd h2{margin:8px 0 0;font-size:26px;line-height:1.15}
.cur-b{flex:1;min-height:0;overflow-y:auto;padding:4px 22px 22px;overscroll-behavior:contain}
.cur-e{margin:6px 0;color:var(--dim);font-size:14px;line-height:1.6}
.cur-e a{text-decoration:underline;text-underline-offset:2px}
.cur-k{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim2)}
.cur-now{position:relative;padding:14px 16px 12px 18px;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate)}
.cur-now::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cc)}
.cur-now-h{display:flex;flex-direction:column;gap:2px;padding-right:74px}
.cur-now-i{position:absolute;top:14px;right:16px;text-align:right;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2)}
.cur-now-i b{display:block;font-size:22px;font-weight:600;letter-spacing:0;color:var(--accent2);line-height:1.2}
.cur-now-n{font-family:Cinzel,Georgia,serif;font-size:22px;font-weight:700;line-height:1.2;color:var(--cc)}
.cur-cm{font-size:11px;color:var(--dim2);line-height:1.5}
.cur-j{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.cur-ja{padding:7px 10px;font-size:11px;letter-spacing:.06em;color:var(--fg);background:rgba(255,255,255,.03);border:1px solid var(--edge)}
.cur-ja:hover{color:var(--accent2);border-color:var(--accent)}
.cur-eq{margin-top:10px}
.cur-eq>summary{cursor:pointer;padding:4px 0;list-style-position:inside}
.cur-g{display:flex;flex-direction:column;margin-top:4px}
.cur-gr{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:5px 0;border-top:1px solid var(--line2);font-size:13px}
.cur-gs{font-size:10.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.08em}
.cur-gn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cur-gl{font-size:12px;color:var(--accent2)}
.cur-sh{display:flex;align-items:center;gap:10px;margin:22px 0 10px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.cur-sh::before{content:"";width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
.cur-l{display:flex;flex-direction:column;gap:6px}
.cur-c{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:center;width:100%;padding:9px 12px 9px 16px;
  text-align:left;font:inherit;color:var(--fg);cursor:pointer;background:rgba(255,255,255,.02);border:1px solid var(--line);
  box-shadow:inset 3px 0 0 var(--cc,var(--edge));transition:border-color .15s,background .15s}
.cur-c:hover{border-color:var(--edge);background:rgba(255,255,255,.05)}
.cur-c[aria-pressed="true"]{border-color:color-mix(in srgb,var(--cc,var(--accent)) 60%,transparent);background:color-mix(in srgb,var(--cc,var(--accent)) 10%,transparent)}
.cur-cn{grid-column:1;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:15px;color:var(--cc,var(--fg));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cur-c .cur-cm{grid-column:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cur-ci{grid-column:2;grid-row:1/span 2;font-size:10.5px;color:var(--dim2);text-align:right}
.cur-ci b{display:block;font-size:17px;font-weight:600;color:var(--accent2)}
.cur-c[aria-pressed="true"] .cur-ci::after{content:"Playing";display:block;margin-top:2px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cc,var(--accent))}
.cur-ft{display:flex;flex-direction:column;gap:6px;padding:14px 22px;border-top:1px solid var(--edge);background:var(--bg2)}
.cur-sw{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;cursor:pointer}
.cur-sw input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.cur-ft-s{font-size:12.5px;color:var(--dim)}
body.cur-lock{overflow:hidden}
@media (max-width:640px){.cur-hd{padding:16px 16px 10px}.cur-b{padding:4px 16px 18px}.cur-ft{padding:12px 16px}
  .cur-gr{grid-template-columns:64px minmax(0,1fr) auto;gap:8px}}

.cmp-tt{position:absolute;z-index:100000002;width:max-content;max-width:min(350px,calc(100vw - 16px));pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cmp-tt[hidden]{display:none}
/* The same frames inside Wowhead's full-screen phone tooltip, under it. */
.cmp-mob{display:flex;flex-direction:column;align-items:center;gap:6px;margin:12px auto 72px;max-width:calc(100vw - 24px)}
.cmp-mob .cmp-wt table{max-width:min(330px,calc(100vw - 24px))}
/* Wowhead's own frame (its CSS draws the border from tooltip.png); kept in the
   flow here instead of being positioned like Wowhead's floating one. */
.cmp-wt.wowhead-tooltip{position:static!important;visibility:visible!important;display:block!important;float:none!important;
  left:auto!important;top:auto!important;max-width:100%}
.cmp-wt table{max-width:330px}
.cmp-wt td{font:12px/17px Verdana,"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;color:#fff;white-space:normal}
.cmp-wt td table{max-width:none;width:100%}
.cmp-eq{color:#808080;margin:0 0 2px}
.cmp-none{color:#fff}
.cmp-gap{height:8px}
.cmp-rep{margin-top:8px;color:#ffd100}
.cmp-dr{color:#fff}
.cmp-dr[data-d="up"]{color:#1eff00}
.cmp-dr[data-d="dn"]{color:#ff2020}
.cmp-note{margin-top:4px;color:#808080}
/* Whose gear it is, one quiet line above the frames. */
.cmp-k{display:inline-flex;align-items:center;gap:7px;padding:2px 8px;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#ece6da;background:rgba(8,9,14,.92);border:1px solid rgba(255,255,255,.15)}
.cmp-k i{flex:none;width:7px;height:7px;background:var(--cc);transform:rotate(45deg)}

/* Scrollbars (27 Sep): every panel that scrolls on its own (the Playing as
   drawer, the Features drawer, the lightboxes, the message log, the rail, the
   mobile menu, wide tables) gets the same slim, square, themed bar instead of
   the browser's default. The page's own scrollbar is left alone.
   scrollbar-width/-color is Firefox and Chrome 121+ (Chrome then ignores the
   ::-webkit-scrollbar rules); the ::-webkit-scrollbar rules are for Safari and
   older Chromium. The thumb brightens while the pointer is over the panel
   (and over the thumb itself where the pseudo-elements apply).
   Retail: translucent gold. Forever: the pale teal of its frames. The Forever
   rail and mobile menu are parchment, so they get a dark ring brown. */
:root{--sb-thumb:rgba(227,183,90,.28);--sb-thumb-h:rgba(227,183,90,.6);--sb-track:rgba(255,255,255,.03)}
body[data-flavor="forever"]{--sb-thumb:rgba(127,224,208,.3);--sb-thumb-h:rgba(127,224,208,.62);--sb-track:rgba(255,255,255,.04)}
body[data-flavor="forever"] .rail,body[data-flavor="forever"] .mobmenu{
  --sb-thumb:rgba(43,33,21,.3);--sb-thumb-h:rgba(43,33,21,.6);--sb-track:rgba(43,33,21,.06)}
.cur-b,.feat-b,.feat-tabs,.inv-box,.inv-grid,.ms-log,.chars-grid,.rail,.mobmenu,.tw,.tr-zoom,html.pv-pick .pick{
  scrollbar-width:thin;scrollbar-color:var(--sb-thumb) var(--sb-track)}
.cur-b:hover,.feat-b:hover,.feat-tabs:hover,.inv-box:hover,.inv-grid:hover,.ms-log:hover,.chars-grid:hover,.rail:hover,
.mobmenu:hover,.tw:hover,.tr-zoom:hover,html.pv-pick .pick:hover,
body[data-flavor="forever"] .rail:hover,body[data-flavor="forever"] .mobmenu:hover{scrollbar-color:var(--sb-thumb-h) var(--sb-track)}
body[data-flavor="forever"] .rail,body[data-flavor="forever"] .mobmenu{scrollbar-color:var(--sb-thumb) var(--sb-track)}
:is(.cur-b,.feat-b,.feat-tabs,.inv-box,.inv-grid,.ms-log,.chars-grid,.rail,.mobmenu,.tw,.tr-zoom,.pick)::-webkit-scrollbar{width:6px;height:6px}
:is(.cur-b,.feat-b,.feat-tabs,.inv-box,.inv-grid,.ms-log,.chars-grid,.rail,.mobmenu,.tw,.tr-zoom,.pick)::-webkit-scrollbar-track{background:var(--sb-track)}
:is(.cur-b,.feat-b,.feat-tabs,.inv-box,.inv-grid,.ms-log,.chars-grid,.rail,.mobmenu,.tw,.tr-zoom,.pick)::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:0}
:is(.cur-b,.feat-b,.feat-tabs,.inv-box,.inv-grid,.ms-log,.chars-grid,.rail,.mobmenu,.tw,.tr-zoom,.pick)::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h)}
:is(.cur-b,.feat-b,.feat-tabs,.inv-box,.inv-grid,.ms-log,.chars-grid,.rail,.mobmenu,.tw,.tr-zoom,.pick)::-webkit-scrollbar-corner{background:transparent}
/* ---- Help, What's new, Forever build notes (27 Sep 2026) ----------------- */
.hp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.hp-card{display:flex;flex-direction:column;gap:7px;padding:18px 20px;min-width:0;background:var(--panel);border:1px solid var(--edge);
  box-shadow:var(--plate);color:var(--fg);text-decoration:none;transition:border-color .15s}
.hp-card:hover{border-color:var(--accent)}
.hp-k{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.hp-t{font-family:Cinzel,Georgia,serif;font-size:17px;font-weight:700;line-height:1.3;color:var(--fg)}
.hp-s{font-size:13.5px;line-height:1.55;color:var(--dim2)}
.hp-more{margin:0;font-size:14px;line-height:1.6;color:var(--dim2)}
.hp-more a,.hp-crumb a{color:inherit}
.hp-more a:hover,.hp-crumb a:hover{color:var(--accent2)}
.hp-fig{margin:20px 0 4px;display:flex;flex-direction:column;gap:8px}
.hp-fig a{display:block;line-height:0}
.hp-fig img{display:block;max-width:100%;height:auto;border:1px solid var(--line);background:var(--card)}
.hp-fig figcaption{font-size:12.5px;line-height:1.5;color:var(--dim2)}
.hp-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:68ch}
.hp-pn{display:flex;flex-direction:column;gap:5px;padding:14px 16px;border:1px solid var(--line);color:var(--fg);text-decoration:none;font-size:14px;min-width:0}
.hp-pn span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2)}
.hp-pn:hover{border-color:var(--accent)}
.hp-next{text-align:right}
.clog h2{font-size:20px}
.clog li b{color:var(--fg);font-weight:500}
.bn{display:flex;flex-direction:column;gap:40px}
.bn-links{display:flex;flex-wrap:wrap;gap:10px}
.bn-links a{text-decoration:none;color:var(--fg);font-size:13px}
.bn-list{display:flex;flex-direction:column;gap:16px}
.bn-b{display:flex;flex-direction:column;gap:12px;min-width:0;padding:22px 24px;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--plate)}
.bn-b[data-new]{border-top:2px solid var(--accent)}
.bn-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.bn-h h3{margin:0;font-family:Cinzel,Georgia,serif;font-size:21px;line-height:1.25;color:var(--fg);flex:1 1 auto;min-width:0}
.bn-v{font-size:13px;font-weight:500;color:var(--dim2);margin-right:6px}
.bn-d{font-size:12px;color:var(--dim2)}
.bn-k{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line);padding:2px 8px}
.bn-note{margin:0;font-size:15px;line-height:1.6;color:var(--fg);max-width:80ch}
.bn-s,.bn-l{margin:0;font-size:14px;line-height:1.65;color:var(--dim);max-width:80ch;overflow-wrap:anywhere}
.bn-l b{color:var(--fg);font-weight:500}
.bn-ar{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.bn-ar li{font-size:12px;line-height:1.4;border:1px solid var(--line);padding:3px 8px;color:var(--dim)}
.bn-ar li i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--dim2);margin-left:6px}
.bn-api summary{cursor:pointer;font-size:13px;color:var(--dim2)}
.bn-api summary:hover{color:var(--accent2)}
.bn-api ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.6;color:var(--dim)}
.bn-api code{font-family:var(--mono);font-size:11.5px;color:var(--fg)}
.bn-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:12px;border-top:1px solid var(--line2);font-size:13px}
.bn-addon{margin-right:auto;color:var(--dim)}
.bn-addon b{color:var(--fg);font-weight:500}
.bn-f a{color:var(--dim2)}
.bn-f a:hover{color:var(--accent2)}
.bn-wait{margin:0;font-size:12px;color:var(--dim2)}
@media (max-width:640px){
  .hp-nav{grid-template-columns:1fr}
  .hp-next{text-align:left}
  .bn-b{padding:18px 16px}
  .bn-h h3{font-size:18px}
}
/* The admin fly-out (27 Sep 2026). Only ever drawn by the script, and only
   after the server said this visitor is an admin (the global state pull, or
   /api/admin-panel.php); nobody else gets the markup. A tab on the right edge
   with the new-feedback count, and a panel from the right like Features. The
   colours come from --adp: gold on Retail, teal on Forever. */
.adp-tab,.adp{--adp:var(--accent);--adp2:var(--accent2)}
body[data-flavor="forever"] .adp-tab,body[data-flavor="forever"] .adp{--adp:var(--teal2);--adp2:#bff3ea}
.adp-tab{position:fixed;right:0;top:50%;z-index:35;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 6px 10px 7px;transform:translateY(-50%);background:var(--card);border:1px solid color-mix(in srgb,var(--adp) 45%,var(--edge));border-right:0;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.25),-10px 0 26px rgba(0,0,0,.35);color:var(--adp);cursor:pointer;
  font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;transition:padding .15s,color .15s}
.adp-tab[hidden]{display:none}
.adp-tab:hover{color:var(--adp2);padding-right:10px}
.adp-tab:focus-visible{outline:2px solid var(--adp);outline-offset:2px}
.adp-tab svg{flex:none}
.adp-tab-t{writing-mode:vertical-rl;transform:rotate(180deg)}
.adp-tab b{min-width:18px;padding:3px 4px;background:var(--adp);color:var(--on-accent);font-size:10.5px;letter-spacing:0;text-align:center}
.adp-tab b[hidden]{display:none}
body.adp-lock{overflow:hidden}
.adp{position:fixed;inset:0;z-index:50}
.adp[hidden]{display:none}
.adp-bg{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.adp-p{position:absolute;top:0;right:0;bottom:0;width:min(440px,100vw);display:flex;flex-direction:column;
  background:radial-gradient(420px 320px at 90% 0,color-mix(in srgb,var(--adp) 10%,transparent),transparent 70%),var(--bg);
  border-left:1px solid var(--edge);box-shadow:-24px 0 60px rgba(0,0,0,.45);animation:feat-in .22s ease-out}
@media (prefers-reduced-motion:reduce){.adp-p{animation:none}}
.adp-hd{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 12px}
.adp-hd>div{flex:1;min-width:0}
.adp-hd .kicker{display:flex;align-items:center;gap:10px;color:var(--adp)}
.adp-hd .kicker::before{content:"";flex:none;width:7px;height:7px;background:var(--adp);transform:rotate(45deg)}
.adp-hd h2{margin:8px 0 2px;font-size:24px;line-height:1.15}
.adp-at{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--dim2)}
.adp[data-stale] .adp-at{color:var(--danger-fg)}
.adp-b{flex:1;min-height:0;overflow-y:auto;padding:4px 22px 18px;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px}
.adp-e{margin:8px 0;color:var(--dim);font-size:13.5px}
.adp-s{position:relative;padding:13px 15px 12px;background:var(--panel);border:1px solid var(--edge);
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.25),inset 0 0 0 5px var(--edge)}
.adp-s[data-hot]{border-color:color-mix(in srgb,var(--adp) 55%,var(--edge))}
.adp-sh{display:flex;align-items:baseline;gap:10px;margin:0 0 9px;font:600 10.5px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim2)}
.adp-sh span{flex:1}
.adp-sh a,.adp-sh em{font-style:normal;letter-spacing:.06em;text-transform:none;font-weight:400;color:var(--adp)}
.adp-sh a:hover{color:var(--adp2)}
.adp-big{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
.adp-big b{font:600 30px/1 var(--mono);color:var(--adp2)}
.adp-big span{font-size:12.5px;color:var(--dim)}
.adp-dot{flex:none;align-self:center;width:8px;height:8px;background:var(--daily);box-shadow:0 0 0 3px color-mix(in srgb,var(--daily) 25%,transparent);transform:rotate(45deg)}
.adp-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:4px 16px;margin:0}
.adp-kv p{display:flex;justify-content:space-between;gap:8px;margin:0;padding:3px 0;border-top:1px solid var(--line2);font-size:12.5px;color:var(--dim)}
.adp-kv1{grid-template-columns:1fr}
.adp-kv b{font:600 12.5px/1.4 var(--mono);color:var(--fg)}
.adp-kv b[data-warn]{color:var(--danger-fg)}
.adp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.adp-t{display:flex;flex-direction:column;gap:3px;padding:8px 10px;background:rgba(0,0,0,.2);border:1px solid var(--line)}
.adp-t b{font:600 20px/1.1 var(--mono);color:var(--adp2)}
.adp-t span{font:500 9.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim2)}
.adp-fb{display:flex;flex-direction:column;margin:0 -4px}
.adp-fb a{display:block;padding:7px 4px;border-top:1px solid var(--line2);color:var(--fg)}
.adp-fb a:hover{background:rgba(255,255,255,.03)}
.adp-fb a:hover .adp-fm{color:var(--adp2)}
.adp-fm{display:block;font:500 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--adp)}
.adp-ft{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--dim);overflow-wrap:anywhere}
.adp-top{display:flex;flex-direction:column;gap:3px;margin-top:10px}
.adp-top p{position:relative;display:flex;justify-content:space-between;gap:10px;margin:0;padding:3px 6px;font:12px/1.4 var(--mono);color:var(--dim)}
.adp-top p i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--adp) 12%,transparent);pointer-events:none}
.adp-top p span{position:relative;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adp-top p b{position:relative;color:var(--fg);font-weight:600}
.adp-lk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:12px 22px 14px;border-top:1px solid var(--edge);background:var(--bg2)}
.adp-lk a{padding:8px 4px;text-align:center;font:500 10.5px/1.2 var(--mono);letter-spacing:.06em;color:var(--fg);background:rgba(255,255,255,.03);border:1px solid var(--edge)}
.adp-lk a:hover{color:var(--adp2);border-color:var(--adp)}
.adp-lk a[data-n]::after{content:attr(data-n);margin-left:5px;padding:0 4px;background:var(--adp);color:var(--on-accent)}
@media (max-width:640px){
  .adp-tab{top:auto;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:none;padding:9px 5px 8px 6px;gap:6px}
  .adp-hd{padding:16px 16px 10px}.adp-b{padding:4px 16px 16px}.adp-lk{padding:10px 16px 12px;grid-template-columns:repeat(4,minmax(0,1fr))}
}