:root{
  color-scheme:dark;
  --bg:#dfe3e9; --s1:#ffffff; --s2:#eff1f4; --s3:#e3e6eb; --s4:#d3d8e0;
  --tx:#0d0f13; --tx2:#4c5563; --tx3:#5f6875; --tx4:#8b93a1;
  --acc:var(--tx); --acc2:var(--tx); --accInk:var(--bg); --accTx:var(--tx);
  --good:#0a6b42; --goodBg:#c3e8d4;
  --info:#1d5fa8; --infoBg:#dbe8f8;
  --warn:#8a5300; --warnBg:#fbeacb;
  --stM:#c2382a; --stR:#0a6b42; --stG:#1d5fa8;
  --slot:#d8dde4; --slotDeep:#e7eaef; --slotTx:#4e5763;
  --scrim:rgba(24,28,36,.42);
  --sh1:0 1px 2px rgba(13,15,19,.10);
  --sh2:0 1px 3px rgba(13,15,19,.10),0 10px 28px rgba(13,15,19,.11);
  --sh3:0 16px 44px rgba(13,15,19,.22);
  --r:14px; --rs:10px; --pad:20px; --hdr:60px;
  /* TYPE, ONE SIZE PER ROLE. Desktop first; the phone steps are in the 560px :root block below and
     nowhere else. A sentence is --t-body or --t-text and never smaller. Uppercase is only ever
     --t-label, for at most three words naming the value beside it. Numbers are Geist Mono, names
     never are. Hierarchy is a size step, then a colour step (tx, tx2, tx3), never opacity. */
  --t-label:12px; --t-meta:14px; --t-chip:14px; --t-text:15px; --t-ui:15px; --t-body:16px;
  --t-title:18px; --t-lede:20px; --t-h3:24px; --t-h2:30px; --t-hero:36px;
  --t-num-s:18px; --t-num-m:22px; --t-num-l:28px; --t-num-xl:34px; --t-num-2xl:42px; --t-num-3xl:56px;
  --t-input:16px; --t-logo:25px;
  /* The old positional scale, kept as aliases so every rule written against it - including ones
     being written now - comes up with the rest. Each names the role most of its uses had; the rules
     that meant something else are re-pointed in the legibility block at the end. New rules take a
     --t-* role, never these. */
  --f0:var(--t-label); --f1:var(--t-meta); --f2:var(--t-text); --f3:var(--t-title);
  --f4:var(--t-num-m); --f5:var(--t-h3); --f6:var(--t-num-xl); --f7:var(--t-num-2xl);
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1680px; --gut:28px;
  --accSoft:var(--sel);
  /* a selected thing, anywhere: the charcoal the primary buttons are */
  --sel:color-mix(in srgb,var(--tx) 14%,var(--s2));
  /* the primary button, in one place: the game's gold mixed into the surface, gold text - the
     selected-tier look. Change these and every call to action follows. */
  --ctaBg:color-mix(in srgb,var(--tx) 14%,var(--s2));
  --ctaHover:color-mix(in srgb,var(--tx) 22%,var(--s2));
  --ctaTx:var(--tx);
  /* dark is the only theme this app ships - the light palette read as washed out */
color-scheme:dark;
  --bg:#0a0b0d; --s1:#131519; --s2:#1a1d23; --s3:#23272f; --s4:#2e333c;
  --tx:#f3f5f7; --tx2:#a7b0bd; --tx3:#8b95a3; --tx4:#7e8795;
  /* the game's own gold, from the OSRS design system: gold #E6A519 for fills and
     resting state, yellow #FFCF3F only where something is lit, black under both */
  --acc:var(--tx); --acc2:var(--tx); --accInk:var(--bg); --accTx:var(--tx);
  --good:#34d399; --goodBg:#123528;
  --info:#60a5fa; --infoBg:#111f33;
  --warn:#ffc247; --warnBg:#2e2410;
  --stM:#f97362; --stR:#3ecf8e; --stG:#5b9dfb;
  /* referenced by a struck-through kill row, a rising price and the tooltip, and
     never defined until now - those four things were rendering uncoloured */
  --bad:#f97362; --badBg:#33140f;
  /* the recessed surface - used by three stat panels and, until now, defined nowhere,
     so all three rendered transparent against the card behind them */
  --sunk:var(--slotDeep);
  --slot:#252932; --slotDeep:#101216; --slotTx:#98a2b0;
  /* The game's own stack colours, and the first three taken from its palette that carry
     information rather than decoration: under a hundred thousand in yellow, thousands in white,
     millions in green. You read the magnitude by hue before you read the digits. Bank only. */
  --qy:#ffff00; --qk:#ffffff; --qm:#00ff80;
  --scrim:rgba(0,0,0,.72);
  /* nothing on a black page casts a shadow onto anything. sh1 and sh2 are hairlines that
     stop a card melting into the one behind it; sh3 is for things that really do float. */
  --sh1:0 1px 2px rgba(0,0,0,.30);
  --sh2:0 1px 3px rgba(0,0,0,.26);
  --sh3:0 14px 38px rgba(0,0,0,.55);

}

@media(max-width:1400px){:root{--maxw:1300px}}
/* every phone size, in one place: sentences 14-15, labels 11, inputs stay 16 */
@media(max-width:560px){:root{--gut:14px;--pad:16px;
  --t-label:11px;--t-meta:13px;--t-chip:13px;--t-text:14px;--t-ui:14px;--t-body:15px;--t-title:16px;
  --t-lede:18px;--t-h3:22px;--t-h2:26px;--t-hero:28px;--t-num-s:16px;--t-num-m:18px;
  --t-num-l:24px;--t-num-xl:28px;--t-num-2xl:34px;--t-logo:19px}}
@media(max-width:620px){#prayerbook .prayrow{grid-template-columns:1fr;gap:8px;padding:13px 0}}

*{box-sizing:border-box;border:0;margin:0}
/* a page that scrolls sideways is a bug every time, so say so once */
html,body{max-width:100%;overflow-x:clip}
[hidden]{display:none!important}   /* must beat any explicit display on the element */
html,body{overflow-x:hidden}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:var(--t-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;letter-spacing:-.006em}
h1,h2,h3,h4{text-wrap:balance;line-height:1.2;font-weight:700}
.hero h2{font-size:var(--f6);font-weight:800;letter-spacing:-.03em}
.sec-h h2{font-size:var(--f5);font-weight:800;letter-spacing:-.025em}
.modal .mh h3{font-size:var(--f4);letter-spacing:-.015em}
.sty-h h3,.pcard .hd h3{font-size:var(--f3);letter-spacing:-.01em}
button,input,select{font:inherit;color:inherit;background:none;letter-spacing:inherit}
button{cursor:pointer}
/* iOS Safari zooms the page when you focus an input under 16px and never zooms back out.
   Inputs are 16px everywhere; their visual size comes from padding. */
input,select,textarea{font-size:var(--t-input)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
:focus:not(:focus-visible){outline:none}
.n,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lbl,.mlbl{font-size:var(--f0);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx4)}
/* the planner and the open diary are scrolled to by name and carry neither class */
.sec,.card,#planner,.dopen,.cadet{scroll-margin-top:calc(var(--hdr) + 18px)}

.top{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);contain:paint}
/* One row, always. The chips are a single shrink-proof group pinned right; the wordmark is
   what gives up space when the screen is narrow, because it can ellipsis and they cannot. */
.top-in{max-width:var(--maxw);margin:0 auto;padding:11px var(--gut);display:flex;gap:12px;
  align-items:center;flex-wrap:nowrap}
.chips{display:flex;gap:8px;flex:none;margin-left:auto}
.logo{display:flex;align-items:center;gap:11px;min-width:0;overflow:hidden}
.logo .mk{height:38px;aspect-ratio:112/128;flex:none;background-size:contain;background-repeat:no-repeat;
  background-position:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
/* A mark and one word. The scimitar says which game this is faster than a tile spelling it out,
   so the tile went and the blade grew to carry the brand on its own. */
.logo h1{display:flex;align-items:center;gap:8px;line-height:1;font-weight:900;
  text-transform:uppercase;letter-spacing:-.045em;white-space:nowrap}
.logo .mk2{font-size:var(--t-logo);color:var(--tx)}
/* On a phone the wordmark and three chips cannot share a line without the wordmark being
   cut to "L". Two tidy full-width rows read better than one truncated one. */
@media(max-width:680px){
  .top-in{gap:9px;padding:9px var(--gut);flex-wrap:wrap}
  .logo{gap:8px;width:100%;overflow:visible}
  .logo .mk{height:29px}
  .logo h1{gap:6px}
  .chips{gap:6px;width:100%;margin-left:0;justify-content:space-between}
  /* scoped to .chips so it beats the base rules - unscoped, none of this applied at all */
  .chips .stat-chip{flex:1;min-width:0;justify-content:center;padding:8px 6px;gap:6px;
    border-radius:10px}
  /* icons only: every chip carries a title naming it, and the words were being cut anyway */
  .chips .stat-chip .v{display:none}
  .chips .stat-chip,.chips .stat-chip.ic{padding:9px 0;gap:0}
  .chips .stat-chip .coin,.chips .stat-chip .sicon,.chips .stat-chip .bskt{width:20px;height:20px}
  .stat-chip::after{display:none}   /* the chevron is dead weight at this size */
  /* the account you are on, by name, on the logo's line: the header is the positioned box, so this is
     the header's top-right corner, centred on the 29px logo mark */
  .chips #whochip{position:absolute;top:11px;right:var(--gut);height:31px;flex:none;padding:0 11px;gap:7px;
    max-width:calc(100% - 2*var(--gut) - 156px)}
  .chips #whochip .v{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .chips #whochip .sicon{width:18px;height:18px;flex:none}
}
@media(max-width:380px){:root{--t-logo:17px}}
.logo .sub{font-size:var(--f0);font-weight:600;color:var(--tx4)}
.stat-chip{display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:11px;background:var(--s1);
  box-shadow:var(--sh1);white-space:nowrap}
.stat-chip .k{font-size:var(--f0);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tx4)}
.stat-chip .v{font-family:var(--mono);font-size:var(--f2);font-weight:700}
.stat-chip:is(button){color:var(--tx)}
.stat-chip:is(button):hover{background:var(--s2)}
.stat-chip:is(button)::after{content:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 88px}

.viewnav{display:flex;gap:5px;padding:5px;background:var(--s1);border-radius:12px;margin-top:18px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
/* a chip that is one picture needs no room for a label */
.stat-chip.ic{padding:9px 11px}
.stat-chip.ic::after{content:none}
.stat-chip.ic .sicon{width:17px;height:17px;opacity:.75}
.stat-chip.ic:hover .sicon,.stat-chip.ic.on .sicon{opacity:1}
.stat-chip.ic.on{background:var(--s3)}
/* ---------- the account menu ---------- */
/* The name chip opens a menu rather than a page. A dropdown under the chip on a wide screen; on a
   phone a sheet from the bottom edge, nearer the thumb than the chip at the top. Every row
   is the same two bands - name, then combat level and link - so the icons and names line up down
   the list, and the tick of the account in use sits where the other rows keep their remove. */
#whochip::after{content:"\25BE";font-size:var(--f0)}
#whochip[aria-expanded="true"]{background:var(--s3)}
.acctmenu{position:fixed;z-index:300;top:0;left:0;width:320px;max-height:calc(100vh - 90px);
  overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:var(--r);background:var(--s2);
  box-shadow:var(--sh3);display:grid;gap:2px}
.amscrim{display:none;position:fixed;inset:0;z-index:299;background:var(--scrim);touch-action:none}
.amhd,.amlbl{padding:10px 10px 4px;font-size:var(--f0);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx4)}
.amhd{display:none}
.amgrp{display:grid;gap:2px}
/* the cursor switch */
.amrow.amcur{grid-template-columns:32px minmax(0,1fr) auto}
.amcur .amic img{width:26px;height:26px;object-fit:contain;display:block}
.amsw{margin-left:auto;flex:none;width:36px;height:20px;border-radius:99px;background:var(--s3);position:relative}
.amsw i{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:99px;background:var(--tx3);transition:left .12s ease}
.amsw.on{background:var(--ctaBg)}
.amsw.on i{left:19px;background:var(--ctaTx)}
html.dscim,html.dscim *{cursor:url(/img/cursor-dscim.png) 1 1,auto}
html.dscim input:not([type=checkbox]):not([type=radio]):not([type=range]),html.dscim textarea{cursor:text}
.amline{display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:center;border-radius:var(--rs)}
.amline:hover{background:var(--s3)}
.amline.on{background:var(--s3)}
.amline.on:hover{background:var(--s4)}
.amrow{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:center;min-height:56px;
  padding:8px 0 8px 10px;border-radius:var(--rs);text-align:left;color:var(--tx)}
.amrow:focus-visible,.amx:focus-visible,.amyes:focus-visible,.amno:focus-visible{outline-offset:-2px;
  border-radius:var(--rs)}
.amadd{grid-column:1/-1;padding-right:10px}
.amic{width:32px;height:32px;border-radius:9px;background:var(--slotDeep);display:grid;place-items:center;
  color:var(--tx3)}
.amic .sicon{width:20px;height:20px}
.amt{display:grid;gap:2px;min-width:0}
.amt b{font-size:var(--f2);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ams{display:flex;align-items:center;gap:8px;min-width:0;height:18px;font-size:var(--f1);color:var(--tx4);
  white-space:nowrap;overflow:hidden}
.amcb{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-weight:700;color:var(--tx2)}
.amcb img{width:14px;height:14px;object-fit:contain}
.amdet{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--tx3)}
.ampill{flex:none;padding:1px 8px;border-radius:99px;background:var(--s4);font-size:var(--f0);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--tx3)}
.ampill.ok{background:var(--goodBg);color:var(--good)}
.amend,.amx{justify-self:center;width:32px;height:32px;display:grid;place-items:center;border-radius:9px}
.amend{color:var(--accTx)}
.amx{color:var(--tx4)}
.amx:hover{background:var(--s4);color:var(--tx)}
.acctmenu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
.amline.amask{grid-template-columns:32px minmax(0,1fr);gap:10px 12px;padding:12px 10px;background:var(--s3)}
.amq{display:grid;gap:2px;min-width:0}
.amq b{font-size:var(--f2);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amq span{font-size:var(--f1);color:var(--tx3)}
.ambtns{grid-column:2;display:flex;gap:6px}
.amyes,.amno{height:32px;padding:0 14px;border-radius:9px;font-size:var(--f1);font-weight:700}
.amyes{background:var(--badBg);color:var(--bad)}
.amyes:hover{background:color-mix(in srgb,var(--bad) 28%,var(--s2))}
.amno{background:var(--s4);color:var(--tx)}
.amno:hover{background:color-mix(in srgb,var(--tx) 16%,var(--s3))}
.amnote{padding:8px 10px;font-size:var(--f1);color:var(--bad)}
/* the account type: five tiles, a badge over a name */
.amkind{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:2px 4px 6px}
.amk{display:grid;justify-items:center;align-content:center;gap:5px;min-height:58px;padding:8px 2px 7px;
  border-radius:9px;font-size:var(--t-label);font-weight:600;color:var(--tx3)}
.amk:hover{background:var(--s3);color:var(--tx)}
.amk.on{background:var(--sel);color:var(--tx)}
.amk:focus-visible{outline-offset:-2px}
.amk .kico{width:22px;height:22px;object-fit:contain;flex:none}
.amic .kico{width:20px;height:24px;object-fit:contain}
.chips #whochip .kico{width:16px;height:19px;object-fit:contain;flex:none}
/* an account that can't use the Grand Exchange doesn't see what is only for one that can */
:root[data-ge="0"] .ge-only{display:none}
/* A lookup of a name this browser already keeps offers that account instead of a second copy. It
   joins the flow while it asks, so its two buttons push the page down rather than sit on it. */
.rsnnote.amoffer,.acctwrap .rsnnote.amoffer{position:static;display:flex;flex-wrap:wrap;align-items:center;
  gap:8px 12px;margin-top:10px;color:var(--tx2)}
.rsnnote.amoffer .amob{display:flex;flex-wrap:wrap;gap:6px}
.rsnnote.amoffer .btn{height:32px;min-height:32px;padding:0 14px;font-size:var(--f1)}
/* the same RuneLite bank already linked to another saved account: said, not refused */
.linkrow .lk .lkwarn{color:var(--warn)}
@media(max-width:560px){
  .acctmenu{left:8px;right:8px;bottom:auto;width:auto;max-height:calc(100vh - 140px);
    padding:6px 8px 8px;border-radius:var(--r)}
  .amscrim{display:block}
  .amhd{display:block}
  .amline{grid-template-columns:minmax(0,1fr) 60px}
  .amrow{min-height:60px}
  .amx{width:40px;height:40px}
  .amyes,.amno{height:40px;padding:0 18px}
}
/* below the width where ten labels fit, the labels go and the icons carry the row */
@media(max-width:1120px){
  .vtab .t{display:none}
  .viewnav .vtab{padding:9px 14px;gap:0}
  .viewnav .vtab .sicon{width:18px;height:18px}
}
.viewnav::-webkit-scrollbar{display:none}
.vtab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:9px;font-size:var(--f2);font-weight:700;color:var(--tx3);white-space:nowrap}
.vtab:hover{color:var(--tx)}
.vtab.on{background:var(--s3);color:var(--tx)}
.view[hidden]{display:none}
/* hold the layout open so the first paint is never a collapsed page */
#homeup:empty,#buyplan:empty{min-height:190px}
#styles:empty{min-height:470px}
#banktab:empty{min-height:180px}
#prayerbook:empty{min-height:150px}
#kitstyles:empty{min-height:420px}
:is(#homeup,#buyplan,#styles,#banktab,#prayerbook,#kitstyles):empty{
  background:var(--s1);border-radius:var(--r);box-shadow:var(--sh2)}

.hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:22px;align-items:center;padding:var(--pad);
  background:var(--s1);border-radius:var(--r);box-shadow:var(--sh2);margin-top:18px}
/* The portrait, the stat pills and the badge row are one component. A raid room asks the same
   question a boss page asks, so its header borrows them by name rather than keeping a smaller
   copy of each - which is what the 54px sprite and the 12px stat line were. */
.hero .por,.roomhd .por{width:168px;height:168px;border-radius:var(--rs);background:var(--slotDeep);display:grid;place-items:center;
  overflow:hidden;flex:none}
.hero .por img,.roomhd .por img{max-width:138px;max-height:138px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.28))}
.hero .meta,.roomhd .meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px;align-items:center}
.heroact{display:grid;gap:8px;justify-items:stretch;width:196px}
.hero>.heromap,.hero>.heroact{align-self:center}
.hnote:empty{display:none}
#view-boss.bhome>:not(#bosshome):not(#bosspicker){display:none!important}
#view-boss.bhome #bclose{display:none}
#bosshome{margin-top:34px}
#bosshome .bhsec{margin:6px 0 24px}
#bosshome .bhall{margin:34px 0 0}
.kch>img{width:28px;height:28px;object-fit:contain}
.kch .ic-combat{background-image:var(--ic-combat)}
/* one column, one height: these measured 41.5 / 36 / 34 stacked at the same width */
.heroact .btn,.heroact .toggle,.heroact .viewbtn{width:100%;justify-content:center;
  height:36px;min-height:36px;border-radius:11px}
/* two ticks stacked are a checklist, so the boxes share an edge instead of each following the
   length of its own label */
.heroact .toggle{justify-content:flex-start}
/* two lines are reserved whatever it says, so ticking the box cannot move the page */
.hnote{font-size:var(--f0);line-height:1.5;color:var(--tx4);margin:0;text-align:center;
  min-height:30px}
@media(max-width:900px){.heroact{width:100%}}
/* where it is, at a scale that shows a lair rather than a kingdom */
.heromap{display:grid;gap:7px;width:208px}
.hmwin{position:relative;width:100%;height:132px;border-radius:var(--rs);overflow:hidden;
  background:var(--slotDeep);display:block}
.hmwin img{position:absolute;image-rendering:pixelated;pointer-events:none}
.hmwin:hover{outline:0;filter:brightness(1.08)}
.hmpin{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:99px;background:var(--acc);box-shadow:0 0 0 3px var(--sel)}
.hmlbl{display:flex;align-items:center;gap:7px;font-size:var(--f0);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--tx4);justify-content:center}
.hmlbl .sicon{width:13px;height:13px;opacity:.7}
@media(max-width:1340px){.hero{grid-template-columns:auto minmax(0,1fr) auto}
  .heromap{display:none}}
@media(max-width:900px){.hero{grid-template-columns:1fr}.heromap{display:grid;width:100%}}
.statgrp{display:inline-flex;align-items:center;gap:12px;padding:5px 12px;border-radius:99px;
  background:var(--s2)}
.bossline.haswhy{align-items:start}
.bossline .bstyles{display:inline-flex;gap:4px;flex-wrap:wrap}
.bossline .bwhy{grid-column:2/-1;margin:5px 0 0;font-size:var(--f1);line-height:1.55;color:var(--tx3);max-width:76ch}
.mtag{margin-left:8px;padding:2px 7px;border-radius:99px;font-size:var(--f0);font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;background:var(--warnBg);color:var(--warn)}
.ki.off{color:var(--bad);text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.85}
.ki.off img{filter:grayscale(1);opacity:.5}
.ki.off .sty{background:var(--badBg);color:var(--bad);text-decoration:none}
.bossrail{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px;padding:4px 0}
.bossrail::-webkit-scrollbar{height:7px}
.bossrail::-webkit-scrollbar-thumb{background:var(--s3);border-radius:99px}
/* the picture is what you pick by - the name under it is confirmation, not the handle */
.brb{flex:none;min-width:0;display:grid;gap:8px;justify-items:center;padding:15px 10px;
  border-radius:var(--r);background:var(--s1);text-align:center;
  transition:background .14s,transform .14s}
.brb:hover{background:var(--s2);transform:translateY(-2px)}
/* One step up the neutral ladder, the way a selected tab says it. The accent mixed into a dark
   surface came out rgb(57,47,25) - an olive-brown that matches nothing else on the page. The
   gold still marks the choice, on the name below, where it is a mark and not a wash. */
.brb.on{background:var(--s3)}
.brb.on .bl{color:var(--tx)}
.brb img{width:84px;height:84px;object-fit:contain}
.brb .brph{width:84px;height:84px;opacity:.45}
/* the clamp allows two lines, so reserve two: otherwise a one-line boss name lifts the dots
   and the time 13px above the button next to it and the rail reads as two ragged rows */
.brb .bl{font-size:var(--f0);font-weight:700;line-height:1.3;color:var(--tx2);
  min-height:calc(1.3em * 2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* a time that is not known yet, rather than a time that is a dash */
.brb .bt2.wait{color:var(--tx4);opacity:.45}
.brb .bt2{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--tx3)}
.brb .bgp{display:inline-flex;align-items:center;gap:5px;color:var(--tx)}
.brb .bgp .sicon{width:15px;height:15px;flex:none}
.brb .bgp .u{margin-left:3px;font-family:var(--sans);font-size:var(--t-label);font-weight:600;color:var(--tx3)}
.brb .dots{display:flex;gap:4px;min-height:16px;align-items:center}
.brb .dots .sicon{width:16px;height:16px}
#bossrail{--k:10;grid-template-columns:repeat(auto-fill,minmax(max(196px,calc((100% - (var(--k,10) - 1) * 9px) / var(--k,10))),1fr))}
#bossrail .brb{grid-template-columns:64px minmax(0,max-content) minmax(max-content,1fr);grid-template-rows:auto auto;align-content:center;
  justify-items:start;align-items:center;gap:4px 8px;padding:10px 14px 10px 10px;text-align:left}
#bossrail .brb img,#bossrail .brb .brph{grid-column:1;grid-row:1/span 2;width:64px;height:64px}
#bossrail .brb .bl{grid-column:2/-1;grid-row:1;align-self:end;padding-left:4px;
  contain:inline-size;justify-self:stretch;display:flex;align-items:flex-end;min-height:calc(1.3em * 2);max-height:calc(1.3em * 2)}
#bossrail .brb .dots{grid-column:2;grid-row:2;min-height:36px;min-width:0;flex-wrap:wrap;align-content:flex-start;align-self:start;padding-left:4px}
#bossrail .brb .dots .brsalt{width:14px;height:14px}
#bossrail .brb .bt2{grid-column:3;grid-row:2;align-self:start}
.roomhd .por{background:none}
@media(max-width:700px){.bossrail{display:flex;overflow-x:auto;scrollbar-width:none}
  .bossrail::-webkit-scrollbar{display:none}
  .bossrail .brb{flex:none;width:132px}
  #bossrail .brb{width:210px}}
.teamcards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;width:100%}
.teamcards .crow{min-width:0;padding:8px 4px 7px}
.teamcards .crow .cl{font-size:var(--f5)}
/* the bosses a raid card's style is used at: one strip of portraits under its name, so the three cards stay
   the same height and nothing opens a gap above their upgrades */
.uamini{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:30px;font-size:var(--f1);color:var(--tx4)}
.uamini .um{width:30px;height:30px;border-radius:7px;background:var(--slotDeep);display:grid;place-items:center}
.uamini .um img{width:26px;height:26px;object-fit:contain}
.usedat{display:grid;gap:8px;margin-top:2px}
.uagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.ua{display:grid;justify-items:center;align-content:start;gap:5px;min-width:0;padding:9px 5px 8px;
  border-radius:var(--r);background:var(--s2);text-align:center}
.ua img{width:46px;height:46px;object-fit:contain}
.ua>span{font-size:var(--f0);font-weight:600;line-height:1.3;color:var(--tx2)}
.roomcard{margin-top:4px;display:grid;gap:16px}
/* the bar over the raid's cards: a gap above it from the room, and none to spare below */
.sec-h.kitbar{margin:8px 0 0;align-items:end}
/* one fight's forms, phases or bosses, picked by picture above the gear - the raid page's room rail */
.fightbar{margin-top:28px}
.fighth{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 10px}
.fightw{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--t-meta);
  font-weight:700;color:var(--tx2)}
.fightw .sicon{width:16px;height:16px}
.fighth .toggle{margin-left:auto}
/* Portrait left, everything about the fight right - the boss page's own two-column head, on
   its own surface so the room you picked reads as a card rather than as a caption above the
   three kit columns. */
.roomhd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center}
.roomhd h3{font-size:var(--f5);letter-spacing:-.025em}
.roomhd .badges{margin-top:12px}
.roomhd .mtag{margin-left:0}
@media(max-width:760px){.roomhd{grid-template-columns:minmax(0,1fr);gap:16px;justify-items:start}}
.roomwhy{margin:0;font-size:var(--f2);line-height:1.62;color:var(--tx2);max-width:80ch}
.roomsets{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1120px){.roomsets{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.roomsets{grid-template-columns:1fr}}
.shopsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr));gap:14px;
  padding:var(--pad) 0}
.shopsum div{display:grid;gap:4px}
.shopsum .v{font-family:var(--mono);font-size:var(--f5);font-weight:700}
.shopsum .lbl{font-size:var(--f0);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx4)}
.badge img,.badge .sicon{flex:0 0 15px;width:15px;height:15px;object-fit:contain;
  margin-right:6px;display:block;background-size:contain;background-repeat:no-repeat;
  background-position:center}
.toggle img.tgi{width:18px;height:18px;object-fit:contain;margin-right:2px}
/* the slot the icon would take is held even when there is no icon, so nothing shifts */
.toggle img.tgi[style*=hidden]{width:18px}
.toggle.dim{opacity:.42;cursor:default}
.toggle.dim:hover{background:var(--s2);color:var(--tx3)}
/* one rhythm for the whole panel: 22 between the bands, 16 inside a card */
/* the real answer, above the four approximations of it */
.wsync{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:var(--r);
  background:var(--sel)}
.wsync.on{background:var(--s2)}
.wsync>.sicon{width:26px;height:26px;flex:none}
.wsync .wst{display:grid;gap:3px;min-width:0}
.wsync .wst b{font-size:var(--f3);font-weight:650;color:var(--tx)}
.wsync .wst .rll{font-size:var(--f1);color:var(--tx3);line-height:1.55;font-weight:500}
.wsync .btn{margin-left:auto;flex:none}
@media(max-width:600px){.wsync{flex-wrap:wrap}.wsync .btn{margin-left:0}}
.welcome{display:grid;gap:22px;padding:26px var(--pad) 24px;background:var(--s1);
  border-radius:var(--r);justify-items:start}
.welcome h3{font-size:var(--f5);letter-spacing:-.02em}
.welcome p{font-size:var(--f2);line-height:1.62;color:var(--tx2);max-width:68ch;margin:0}
.welcome .row{display:flex;gap:10px;flex-wrap:wrap}
.warnline{color:var(--warn)!important;font-weight:700}
.nv-nav_home{background-image:var(--ic-nav_home)}
.nv-nav_boss{background-image:var(--ic-nav_boss)}
.nv-nav_raid{background-image:var(--ic-nav_raid)}
.nv-nav_gear{background-image:var(--ic-nav_gear)}
.nv-nav_shop{background-image:var(--ic-nav_shop)}
.nv-nav_acct{background-image:var(--ic-nav_acct)}
.nv-nav_map{background-image:var(--ic-nav_map)}
.ic-player{background-image:var(--ic-player)}
.bskt-i{background-image:var(--ic-ge)}
.vtab .sicon{width:16px;height:16px;opacity:.55;transition:opacity .15s}
.vtab.on .sicon,.vtab:hover .sicon{opacity:1}

.ui-stats{background-image:var(--ic-ui_stats)}
.ui-quest{background-image:var(--ic-ui_quest)}
.ic-zulrah{background-image:var(--ic-zulrah)}
.ic-ca{background-image:var(--ic-ca)}
.ic-diary{background-image:var(--ic-diary)}
/* drawn rather than fetched, so it takes the colour of the text beside it */
.ic-view{background-image:none;background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.2 9.1 1 12c1.2 2.9 5.5 7 11 7s9.8-4.1 11-7c-1.2-2.9-5.5-7-11-7zm0 12a5 5 0 110-10 5 5 0 010 10zm0-2.6a2.4 2.4 0 100-4.8 2.4 2.4 0 000 4.8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.2 9.1 1 12c1.2 2.9 5.5 7 11 7s9.8-4.1 11-7c-1.2-2.9-5.5-7-11-7zm0 12a5 5 0 110-10 5 5 0 010 10zm0-2.6a2.4 2.4 0 100-4.8 2.4 2.4 0 000 4.8z'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.ic-home{background-image:var(--ic-home)}
/* the account chip wears a helmet rather than a ring */
.ic-me{background-image:var(--ic-me)}
.ic-tbow{background-image:var(--ic-tbow)}

/* ---------- depth ----------
   Every panel was a flat fill on a flat ground, so nothing had a near or far edge. A single
   hairline of light along the top gives each card a lit edge without drawing a border. */
.card,.gridwrap>.grid>.card,.roomcard{
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--tx) 4%,transparent) 0,
    transparent 1px,transparent 100%)}
.pcard{transition:transform .16s ease,background .16s ease}
.pcard:hover{transform:translateY(-3px);background:var(--s2)}
.mode{transition:transform .18s ease}
.mode:hover{transform:translateY(-3px)}

/* ---------- home stat strip ---------- */
/* the lookup box only needs a third of a desktop row, so the numbers sit beside it */
.acctwrap{display:grid;grid-template-columns:minmax(280px,400px) 1fr;gap:16px;align-items:start;
  margin:0 0 22px;padding-bottom:30px}
/* on this row the lookup is a pill like the four beside it, not a card wrapped round one */
.acctwrap .rsnbox{margin:0;position:relative;padding:0;background:none;gap:0;max-width:none}
.acctwrap .rsnrow{height:62px;padding:8px;gap:8px;border-radius:var(--r);background:var(--s1);
  flex-wrap:nowrap}
.acctwrap .rsnrow .srch,.acctwrap .rsnrow .btn{height:46px;padding-top:0;padding-bottom:0}
/* out of the flow, so a message cannot make the row taller than its neighbours */
.acctwrap .rsnnote{position:absolute;top:calc(100% + 7px);left:22px;right:0}
/* a new account: the name box and nothing it has not got yet */
.rsnhelp{display:none}
#view-stats.nostats .skwrap,#view-stats.nostats #statsbar,#view-stats.nostats #goalsec{display:none!important}
#view-stats.nostats>.sec>.sec-h{justify-content:center}
#view-stats.nostats>.sec>.sec-h .eyebrow{display:none}
#view-stats.nostats>.sec>.sec-h .lead{text-align:center;margin:28px auto 0;display:grid;justify-items:center}
#view-stats.nostats>.sec>.sec-h .lead .dek{margin-left:auto;margin-right:auto}
#view-stats.nostats .acctwrap{grid-template-columns:minmax(0,560px);justify-content:center;margin-top:22px}
#view-stats.nostats .rsnhelp{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:52px 0 40px}
@media(max-width:900px){.acctwrap{grid-template-columns:1fr;gap:12px}}
.acctbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:10px;margin:0}
.acctbar .ab{display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:var(--r);
  background:var(--s1)}
.acctbar .ab .sicon{width:22px;height:22px}
.acctbar .ab img{width:30px;height:30px;object-fit:contain}
.acctbar .ab .t{display:grid;gap:1px;min-width:0}
.acctbar .ab .v{font-family:var(--mono);font-size:var(--f4);font-weight:700;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acctbar .ab .l{font-size:var(--f0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx4)}
/* below the rules it has to beat, which is the only reason it now applies */
@media(max-width:560px){
  .acctbar{grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0 20px}
  .acctbar .ab{padding:11px 12px;gap:9px}
}
.rlvl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rlvl input[type=range]{width:190px;accent-color:var(--acc)}
.rlvlval{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--acc);white-space:nowrap}
.rlvlhint{font-size:var(--f1);color:var(--tx4);flex:1;min-width:180px}

/* ---------- footer ---------- */
footer{margin-top:56px;padding:24px 0 0;display:grid;gap:18px}
.fbot{display:flex;align-items:center;justify-content:space-between;gap:10px 32px;flex-wrap:wrap}
.fbot .fsmall{flex:1 1 520px;max-width:900px}
.flegal{font-size:var(--f1);font-weight:600;color:var(--tx3);text-decoration:none}
.flegal:hover{color:var(--acc)}
.fright{color:var(--tx4)}
.fmain{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.4fr);gap:32px;align-items:start}
@media(max-width:900px){.fmain{grid-template-columns:1fr 1fr;gap:22px 28px}
  .fbrandcol,.fbuilt{grid-column:1/-1}}
.fby{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--f1);font-weight:600;color:var(--tx3)}
.fby img{width:28px;height:23px;flex:none;image-rendering:pixelated}
.fby b{color:var(--tx);font-weight:700}
/* every column opens with a heading of the same height, so the lists under them share a line */
.fcol h4{display:flex;align-items:center;height:30px;margin-bottom:8px;
  font-size:var(--t-title);font-weight:700;letter-spacing:-.01em;color:var(--tx2)}
.fcol h4.fbrandh{gap:9px;font-size:var(--t-title);font-weight:900;letter-spacing:-.04em;text-transform:uppercase;
  color:var(--tx)}
.fcol h4.fbrandh .mk{height:26px;aspect-ratio:112/128;flex:none;background-size:contain;background-repeat:no-repeat;
  background-position:center;background-image:var(--ic-logo)}
.fcol ul{list-style:none;display:grid;gap:7px;margin:0;padding:0}
.fcol ul.f2{grid-template-columns:repeat(2,max-content);column-gap:32px}
.fcol a,.flink,.fcred{font-size:var(--f1);font-weight:600;color:var(--tx3);text-align:left;padding:0;text-decoration:none}
.fcol a:hover,.flink:hover{color:var(--acc)}
.fblurb{font-size:var(--f1);line-height:1.75;color:var(--tx3);max-width:44ch;margin:0 0 15px}
.fchips{display:flex;gap:7px;flex-wrap:wrap}
.fchip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;
  background:var(--s1);font-size:var(--t-chip);font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--tx3)}
.fchip b{font-family:var(--mono);font-size:var(--f1);color:var(--tx2)}
.frule{height:1px;background:color-mix(in srgb,var(--tx) 8%,transparent)}
.fsmall{font-size:var(--f0);line-height:1.8;color:var(--tx4);letter-spacing:.02em;margin:0}
.fbot .dot{opacity:.4}
/* borrowed state, said out loud rather than implied */
/* ---------- the dashboard ---------- */
.homebar{margin:18px 0 0;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.homebar .ab{text-align:left;width:100%}
.homebar .ab:hover{background:var(--s2)}
/* The bosses you farm. Under the account band, at the 12px every later block uses - or the band's
   own 18px when there is no band. :empty matches only a container with no children, not even
   whitespace, which is why the render writes "". */
.farmrow{margin:12px 0 0}
/* the roadmap: numbered steps, a picture each */
.roadmap{margin:18px 0 0}
.roadmap:empty{display:none}
.rmhead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}
.rmhead h3{margin:0;font-size:var(--f3)}
.rmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:10px}
.rmtile{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px;border-radius:var(--r);background:var(--s1);
  width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.rmtile.flat{cursor:default}
.rmtile.flat:hover{background:var(--s1)}
.rmacts{display:flex;gap:4px}
.rmact{width:28px;height:28px;border-radius:99px;display:grid;place-items:center;font-size:var(--f1);color:var(--tx4);background:transparent}
.rmact:hover{background:var(--s3);color:var(--tx)}
.rmtile:hover{background:var(--s2)}
.rmtile:disabled{cursor:default}
.rmtile:disabled:hover{background:var(--s1)}
.rmd{font-size:var(--f1);line-height:1.4;color:var(--tx3)}
.rmart{position:relative;width:56px;height:56px;border-radius:12px;background:var(--slotDeep);display:grid;place-items:center}
.rmart img{width:40px;height:40px;object-fit:contain}
.rmart .rmn{position:absolute;top:-6px;left:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;display:grid;place-items:center;
  background:var(--s3);font-family:var(--mono);font-size:var(--f0);font-weight:700;color:var(--tx)}
.rmbody{display:grid;gap:3px;min-width:0}
.rmk{font-size:var(--f0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx4)}
.rmbody>b{font-size:var(--f2);font-weight:700;line-height:1.3;color:var(--tx);overflow-wrap:anywhere}
.rmchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.rmchip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;background:var(--s2);font-size:var(--f1);color:var(--tx2)}
.rmchip .sicon{width:14px;height:14px;flex:none}
.rmchip.good{color:var(--good)}
/* a step that closed itself: still there to see, quietly */
.rmphase .rmtile:has(.rmchip.good:only-child){background:color-mix(in srgb,var(--good) 8%,var(--s1))}
.rmphase{margin:0 0 26px}
.rmph{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin:0 0 12px}
.rmph>div{display:grid;gap:2px}
.rmph h3{margin:0;font-size:var(--f3)}
.rmph span{font-size:var(--f1);color:var(--tx3)}
#roadpage .lsum{margin:0 0 22px}
.lstat img.rmsi{width:26px;height:26px;object-fit:contain}
.rmmore{margin:0}
/* WikiSync, when it is the thing standing between an account and half the site: what it unlocks on
   the left, the steps and the two buttons on the right */
.homesync{margin:12px 0 0}
.homesync .qhero{margin-top:0}
/* two classes, or the photo panel's 176px floor (later in the sheet) wins and a phone gets a tall empty box */
.qhero-art.hsart{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;align-content:center;gap:12px;min-height:0;align-self:stretch}
.hsu{display:grid;justify-items:center;gap:10px;min-width:0;text-align:center}
.hsart .hsu img{height:56px;max-width:56px;image-rendering:pixelated;filter:none}
.hsu .mlbl{color:var(--tx3)}
.hsteps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.hsteps li{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:10px}
.hsteps b{width:26px;height:26px;border-radius:99px;background:var(--s3);color:var(--tx);
  display:grid;place-items:center;font-family:var(--mono)}
.hsync .hsyncmsg{margin-top:10px}
.farmrow:empty{display:none}
.homebar[hidden]+.farmrow{margin-top:18px}
/* the same three columns as the quest, diary and combat cards under it, so the edges line up */
/* Three rows a card - head, stats, gear - shared across each row of cards as a subgrid, so a name that
   takes two lines moves every card's stats down together rather than one card's alone. */
.fgrid{display:grid;column-gap:12px;row-gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
/* three across on a desktop, two on a tablet, one on a phone; the rest wait behind Show all */
.fmore{display:none;margin:12px auto 0;padding:8px 14px;border-radius:var(--rs);font-weight:600;color:var(--tx2)}
.fmore:hover{background:var(--s2);color:var(--tx)}
@media(max-width:1000px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid:not(.all) .fcard:nth-child(n+3){display:none}
  .fmore.fm2{display:block}
}
@media(max-width:560px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .fgrid:not(.all) .fcard:nth-child(n+2){display:none}
  .fmore{display:block}
}
.fcard{position:relative;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:14px;
  align-content:start;min-width:0;
  padding:calc(var(--pad) + 4px);border-radius:var(--r);background:var(--s1);font-family:var(--sans)}
.fhead{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;text-align:left;
  margin:-8px;padding:8px;border-radius:var(--rs);transition:background .14s}
.fhead:hover{background:var(--s2)}
.fart{width:96px;height:96px;display:grid;place-items:center}
.fart img{max-width:96px;max-height:96px;object-fit:contain}
/* the name keeps clear of the x in the corner */
.fhead .wh{display:grid;gap:3px;min-width:0;padding-right:22px}
/* the kills are the achievement on the card, so they are the loudest line in its head */
.fgain{display:flex;align-items:baseline;gap:7px;min-width:0}
.fgain b{font-family:var(--mono);font-size:var(--f5);font-weight:800;line-height:1;color:var(--acc)}
.fgain span{font-size:var(--f0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fhead h3{font-size:var(--f5);letter-spacing:-.025em;line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fsub{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--f2);color:var(--tx3)}
.fsub .sicon{width:16px;height:16px;flex:none}
.fsub .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fst{display:flex;align-items:center;gap:7px;min-width:0;padding:10px 9px;border-radius:var(--rs);
  background:var(--s2)}
.fst>img,.fst>.sicon{width:20px;height:20px;object-fit:contain;flex:none}
.fst .t{display:grid;gap:1px;min-width:0}
.fst .v{font-family:var(--mono);font-size:var(--f2);font-weight:700;line-height:1.15;color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fst .l{font-size:var(--f0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx4);
  white-space:nowrap}
/* the setup: eleven squares in the equipment order and its dps in the twelfth */
.fgear{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
/* the drops row sits on the gear's grid: four drops, then two columns of what a kill is worth */
.fdrops{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;align-items:stretch}
.fdrops.none{display:none}
.fdrops .fdrop{width:auto;height:auto;aspect-ratio:1}
.fdrops .fdrop img{width:64%;height:auto;aspect-ratio:1;object-fit:contain}
.fgp{grid-column:span 2;display:grid;align-content:center;gap:4px;padding:0 10px;border-radius:8px;
  background:var(--slotDeep);font-size:var(--f0);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx4)}
.fdrops.wait .fgp{grid-column:1/-1;min-height:44px;text-transform:none;letter-spacing:0}
.fgp b{font-family:var(--mono);font-size:var(--f2);letter-spacing:0;color:var(--tx);margin-right:4px}
.fgp i{font-style:normal}
.fgp>span{white-space:nowrap;overflow:hidden;text-overflow:clip}
/* a card too narrow for "12.3K a kill" - two across a tablet, or a phone - says "12.3K kill" */
.fcard{container-type:inline-size}
@container (max-width:380px){
  .fgp{padding:0 7px;letter-spacing:.02em}
  .fgp .w{display:none}
  .fst{padding:9px 6px;gap:5px}
  .fst>img,.fst>.sicon{width:16px;height:16px}
}
.fgear .slot{width:auto;height:auto;aspect-ratio:1}
/* a width and an aspect ratio, never a percentage height: inside a square sized by its width that
   is circular, and one sprite came out taller than its square */
.fgear .slot img{width:64%;height:auto;aspect-ratio:1;object-fit:contain}
.fdps{aspect-ratio:1;border-radius:8px;background:var(--slotDeep);display:grid;place-content:center;
  text-align:center;gap:1px}
.fdps .v{font-family:var(--mono);font-size:var(--f3);font-weight:700;line-height:1;color:var(--acc)}
.fdps .l{font-size:var(--f0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx4)}
.farmx{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:7px;display:grid;
  place-items:center;background:var(--s3);color:var(--tx3);font-size:var(--f2);line-height:1;
  opacity:0;transition:opacity .14s,background .14s}
.fcard:hover .farmx,.farmx:focus-visible{opacity:1}
.farmx:hover{color:var(--tx);background:var(--s4)}
/* nothing hovers on a touch screen, so the way out is always showing there */
@media(hover:none){.farmx{opacity:1}}
@media(max-width:560px){
  .fgrid{gap:10px}
  .fhead{grid-template-columns:72px minmax(0,1fr);gap:12px}
  .fart{width:72px;height:72px}
  .fart img{max-width:72px;max-height:72px}
  .fst{padding:9px 7px;gap:6px}
  .fst>img,.fst>.sicon{width:18px;height:18px}
}
/* two across: one card at full width spent nine hundred pixels saying one thing */
/* minmax(430px,...) is a floor, not a preference: auto-fit drops empty tracks but never
   shrinks the minimum, so on a phone this was a 430px track in a 362px box. min() lets
   the floor fall to whatever width there actually is. */
#homenext{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
  gap:12px;
  margin-top:12px}
/* 1fr is minmax(auto,1fr) and will not shrink below its content, which is how a
   210px track and a 164px track came to add up to 430 inside a 362px box */
#homenext .qhero{margin-top:0;grid-template-columns:minmax(150px,210px) minmax(0,1fr)}
/* three of them across a desktop, one under the other on a phone */
.homework{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
  grid-template-rows:repeat(5,auto) 1fr auto;column-gap:12px;row-gap:17px;margin-top:12px}
/* one shape for both: a heading, a band of art, aligned rows, the action on the floor */
/* the last row is the floor, so both buttons land in the same place whatever is above them */
.wcard{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:17px;
  padding:calc(var(--pad) + 4px);border-radius:var(--r);background:var(--s1);
  font-family:var(--sans)}
.wart{min-height:108px}
.wgear{min-height:44px}
.wcard>.btn{grid-row:-1}
/* The seven rows exist so three cards can align with each other. When the work area holds only
   the fallback card there is nothing to align with, and the five rows it does not fill are
   still five rows: their six row-gaps came to 102px of empty space under two lines of text.
   The gaps belong to the container, so the container is what has to stop declaring them. */
.homework.solo{grid-template-rows:auto}
.homework.solo .wcard{grid-row:auto;grid-template-rows:auto;row-gap:12px}
.homework.solo .wcard>.btn{grid-row:auto}
/* start at the top: stretching these rows to fill the band put the three card
   titles on three different baselines */
.wh{display:grid;gap:3px;align-content:start}
/* held to two lines for the same reason .wsub is: a long quest name moved every band
   under it out of line with the other two cards */
.wh h3{font-size:var(--f5);letter-spacing:-.025em;line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* two lines, always - one card's subtitle wrapping was what moved its picker */
.wsub{font-size:var(--f2);color:var(--tx3);margin:0;line-height:1.5;
  min-height:calc(var(--f2) * 1.5 * 2);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
/* the app's pick is a default, not a decision */
.wpick{position:relative;margin-top:8px;justify-self:start}
.wpb{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 11px;
  border-radius:99px;background:var(--s2);font-size:var(--f1);font-weight:600;color:var(--tx3);
  max-width:100%}
.wpb .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpb .cv{color:var(--tx4);font-size:var(--t-label)}
.wpb:hover,.wpb.on{background:var(--s3);color:var(--tx)}
.wpl{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:268px;max-width:340px;
  max-height:264px;overflow-y:auto;padding:6px;border-radius:var(--r);background:var(--s2);
  box-shadow:var(--sh3);display:grid;gap:2px}
.wpo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:8px 11px;border-radius:var(--rs);text-align:left}
.wpo .t{font-size:var(--f2);font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.wpo .s{font-family:var(--mono);font-size:var(--f0);color:var(--tx4)}
.wpo:hover{background:var(--s3)}
.wpo.on{background:var(--s3)}
.wpo.on .t{color:var(--accTx)}
/* nothing is blown up past twice its natural size; these sprites are 30-70px */
.wart{display:flex;gap:18px;align-items:center;justify-content:center;overflow:hidden}
.wart img{max-height:120px;max-width:132px;width:auto;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
/* max-height only constrains; these sprites are 30px and need forcing up to be seen */
.wart img.rw{height:62px;width:auto;max-width:76px;image-rendering:pixelated}
.wart img.rw.ca{height:40px;max-width:44px}
.wart img.sm{max-height:76px;max-width:76px}
/* the four rewards as a progression: earned ones lit, the rest waiting */
.wart.set{gap:10px;align-items:flex-end;flex-wrap:wrap;justify-content:center}
.rwt{display:grid;justify-items:center;gap:5px;opacity:.34;filter:grayscale(1)}
.rwt.on{opacity:1;filter:none}
/* the one you are working on: not finished, but not something to grey out either */
.rwt.live{opacity:1;filter:none}
.rwt.live em{color:var(--accTx)}
.rwt em{font-style:normal;font-size:var(--f0);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx4)}
.rwt.on em{color:var(--good)}
/* experience rewards read as a row of amounts, each wearing its skill */
.wxp{display:flex;gap:6px;flex-wrap:wrap}
.xpchip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 5px;border-radius:99px;
  background:var(--s2);font-family:var(--mono);font-size:var(--f0);font-weight:700;
  color:var(--tx2)}
.xpchip img{width:15px;height:15px;object-fit:contain}
.wrows{display:grid;gap:9px;align-content:start}
.wrow{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center}
.wrow.tier{grid-template-columns:20px 82px minmax(0,1fr) 44px}
.wrow img{width:20px;height:20px;object-fit:contain}
.wrow .t{font-size:var(--f2);font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.wrow .t2{font-size:var(--f1);line-height:1.5;color:var(--tx2)}
.wrow .s{font-size:var(--f0);color:var(--tx4);font-family:var(--mono);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.wrow .bar{height:4px;border-radius:99px;background:var(--slotDeep);overflow:hidden}
.wrow .bar i{display:block;height:100%;background:var(--tx2);border-radius:99px}
.wrow.ok .bar i{background:var(--good)}
.wrow.ok .t,.wrow.ok .s{color:var(--good)}
.wdot{width:9px;height:9px;border-radius:99px;background:var(--s4);justify-self:center}
.wdot.ok{background:var(--good)}
/* the gear a quest unlocks, at a size you can tell a scythe from a rapier */
.wgear{display:flex;gap:14px;align-items:center;justify-content:center;overflow:hidden}
.wgear img{max-height:42px;max-width:44px;object-fit:contain}
.wgives{display:grid;gap:8px;align-content:start}
/* this row has three children on the combat card, and two columns wrapped the
   count onto its own line where it was ellipsised to "4 ..." */
.wgives .wrow{grid-template-columns:20px minmax(0,1fr) auto}
.wcard .btn{justify-self:start;align-self:end;background:var(--s3);color:var(--tx);
  box-shadow:none}
.wcard .btn:hover{background:var(--s4)}
/* ---- combat tasks: the six tiers as tabs, and the bosses left in the one you pick ---- */
/* The list spans the gear band, the rows band, the rewards band and the spare row. That row is 1fr
   on the container, and an item crossing a flexible track hands its excess only to that track - so
   the quest and diary bands beside it keep their own heights and only the empty row under them
   grows. "and N more" shares the floor with the button rather than adding a line to the list, and
   both are given the column: two items locked to one row and not to a column open a second one. */
.wca>.calist{grid-row:3/7}
.wca>.camore,.wca>.btn{grid-column:1}
.wca>.camore{grid-row:-1;justify-self:end;align-self:center}
/* on the line the quest and diary pickers sit on, at their height */
.caprog{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  min-height:30px;margin-top:8px}
.caprog .v,.caprog .p{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--tx2);
  white-space:nowrap}
.caprog .p{color:var(--tx4)}
.caprog.ok .v{color:var(--good)}
.caprog .bar{height:6px;border-radius:99px;background:var(--slotDeep);overflow:hidden}
/* Six across at 51px a cell in the three-card width, so the names live in the heading above. The
   8px it hangs below the band puts each count on the baseline of the diary labels beside it. */
.catabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;align-self:end;
  margin-bottom:-8px}
.catb{display:grid;justify-items:center;align-content:start;gap:6px;min-width:0;padding:10px 0 8px;
  border-radius:var(--rs)}
.catb:hover{background:var(--s2)}
/* 22px sprites at twice their size, greyed until earned - the diary card's rule beside it */
.catb img,.catb .ph{width:44px;height:42px;max-width:100%;object-fit:contain;
  image-rendering:pixelated;filter:grayscale(1);opacity:.4}
.catb.ok img,.catb.on img{filter:none;opacity:1}
.catb .nm{display:none}
.catb .bar{width:calc(100% - 14px);max-width:40px;height:3px;border-radius:99px;
  background:var(--slotDeep);overflow:hidden}
.catb .bar i,.caprog .bar i{display:block;height:100%;background:var(--tx2);border-radius:99px}
.catb.ok .bar i,.caprog.ok .bar i{background:var(--good)}
.catb .n{font-family:var(--mono);font-size:var(--f0);font-weight:700;color:var(--tx4);
  white-space:nowrap}
.catb.ok .n{color:var(--good)}
.catb.on{background:var(--sel)}
.catb.on:not(.ok) .n{color:var(--accTx)}
/* the rows hang 10px into the card's padding, so a hover tint has room and the art keeps the
   card's left edge */
.calist{display:grid;gap:2px;align-content:start;margin:0 -10px}
.cab{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:10px;align-items:start;
  padding:9px 10px 7px;border-radius:var(--rs);text-align:left}
.cab:hover{background:var(--s2)}
/* centred on the name's 20px line, hanging beside the first task rather than pushing it down */
.caba{width:36px;height:36px;display:grid;place-items:center;margin-top:-8px}
.caba img{max-width:36px;max-height:36px;object-fit:contain}
.cabb{display:grid;gap:4px;min-width:0}
.cabh{display:flex;align-items:center;gap:8px;min-width:0;min-height:20px}
.cabh b{flex:0 1 auto;min-width:0;font-size:var(--f2);font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cab:hover .cabh b{color:var(--accTx)}
/* the name keeps its room; the time or the note beside it gives way first */
.cabs{flex:0 10 auto;display:inline-flex;align-items:center;gap:4px;min-width:0;overflow:hidden;
  font-family:var(--mono);font-size:var(--f0);color:var(--tx4);white-space:nowrap}
.cabs .sicon{width:13px;height:13px}
.cabn{flex:none;margin-left:auto;font-family:var(--mono);font-size:var(--f0);font-weight:700;
  color:var(--accTx);white-space:nowrap}
.catk{font-size:var(--f1);line-height:1.45;color:var(--tx3);display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.catk b{font-weight:700;color:var(--tx)}
.camore{padding:4px 0;font-size:var(--f1);font-weight:600;color:var(--tx3)}
.camore:hover{color:var(--accTx)}
.cadone{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:14px;
  align-items:center;padding:7px 10px}
.cadone img{width:44px;height:42px;object-fit:contain;image-rendering:pixelated}
.cadone .t{display:grid;gap:2px;min-width:0}
.cadone b{font-size:var(--f3);font-weight:700;color:var(--good)}
.cadone .t span{font-size:var(--f1);color:var(--tx3)}
.cadone .btn{grid-column:2}
/* a finished tier has nothing to list, so the one thing it says sits in the middle of the room the
   list would have had, rather than at the top of an empty one */
.calist.done{align-content:center;justify-content:center}
/* One card and nothing to line up with: the same reset .solo makes, and room for more bosses. */
.homework.one{grid-template-rows:auto}
.homework.one .wcard{grid-row:auto;grid-template-rows:none;row-gap:14px}
.homework.one .wcard>.btn,.homework.one .wca>.calist,.homework.one .wca>.camore{grid-row:auto}
.homework.one .wca>.camore{justify-self:start;margin-left:46px}
.homework.one .catabs{margin-bottom:0}
.homework.one .calist{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  column-gap:12px}
/* on its own it has the whole width to say it in, so it says it larger */
.homework.one .calist.done{grid-template-columns:auto}
.homework.one .cadone{grid-template-columns:66px minmax(0,1fr);column-gap:18px}
.homework.one .cadone img{width:66px;height:63px}
.homework.one .cadone b{font-size:var(--f4)}
/* and wide enough for two columns: every tier as a labelled row on the left, which is the progress
   for all six at once, and the bosses on the right. The third row is 1fr so a long list grows that
   row and not the heading's, and the button and "and N more" share the floor. */
@media(min-width:1000px){
  .homework.one .wca{grid-template-columns:minmax(0,300px) minmax(0,1fr);
    grid-template-rows:auto auto 1fr auto;column-gap:40px}
  .homework.one .wca>.wh{grid-area:1/1}
  .homework.one .wca>.catabs{grid-area:2/1}
  .homework.one .wca>.btn{grid-area:4/1}
  .homework.one .wca>.calist{grid-area:1/2/4/3}
  .homework.one .wca>.camore{grid-area:4/2;align-self:center}
  /* two, not as many as fit: at 1440 a third column halved the height of a list the tier rows
     beside it are already taller than */
  .homework.one .calist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .homework.one .catabs{grid-template-columns:minmax(0,1fr);gap:2px;margin:0 -10px}
  .homework.one .catb{grid-template-columns:22px 92px minmax(0,1fr) 56px;justify-items:start;
    align-items:center;column-gap:10px;padding:10px}
  .homework.one .catb img{width:22px;height:21px}
  .homework.one .catb .nm{display:block;font-size:var(--f2);font-weight:700;color:var(--tx2)}
  .homework.one .catb.on .nm{color:var(--tx)}
  .homework.one .catb .bar{width:100%;max-width:none}
  .homework.one .catb .n{justify-self:end}
}
.hact{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;align-items:center}
/* a purchase is a card, not a full-width row - the row spent most of its width on nothing and
   capped the list at three */
.hrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(232px,100%),1fr));gap:8px;
  margin-top:10px}
.hbuy{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px 12px;border-radius:var(--rs);background:var(--s1);text-align:left}
.hbuy:hover{background:var(--s2)}
.hbuy.dim{opacity:.55}
.hbuy .ha{width:32px;height:32px;display:grid;place-items:center}
.hbuy .ha img{max-width:32px;max-height:32px;object-fit:contain}
.hbuy .ht{display:grid;gap:1px;min-width:0}
.hbuy .ht b{font-size:var(--f2);font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.hbuy .ht span{font-size:var(--f0);color:var(--tx4);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.hbuy .hp{font-family:var(--mono);font-size:var(--f2);font-weight:700;color:var(--accTx)}
.hbuy.dim .hp{color:var(--tx4)}
.homecards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
@media(max-width:1000px){.homecards{grid-template-columns:1fr}}
/* the card that fills last was changing height when it did, and nudging the two
   beside it - they hold their height while the network catches up */
/* one card carries a button in its heading and the others do not, which pushed its rows
   half a line below theirs - every heading occupies the same band */
.homecards .rcard{align-content:start;min-height:252px}
.homecards .rcard>h3,.homecards .rhead,.rail .rcard>h3,.rail .rhead{min-height:30px;display:flex;align-items:center}
.homecards .rhead h3{min-height:0}
.homecards .mrow{width:100%;text-align:left}
/* all three cards' rows share one inset and one rhythm */
.homecards .rlist{gap:5px}
.homecards .rrow{grid-template-columns:34px minmax(0,1fr) auto;gap:11px;padding:8px 10px}
.homecards .rrow img{justify-self:center}
.homecards .mrow:hover .t{color:var(--accTx)}
/* a row in a dashboard card: the art of the thing, what it is, and one number */
.hlist{display:grid;gap:5px}
.hitem{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:8px 10px;border-radius:var(--rs);background:var(--s2);text-align:left;width:100%}
.hitem:hover{background:var(--s3)}
.hitem .ha{width:34px;height:34px;display:grid;place-items:center}
.hitem .ha img{max-width:34px;max-height:34px;object-fit:contain}
.hitem .ht{display:grid;gap:1px;min-width:0}
.hitem .ht b{font-size:var(--f2);font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.hitem .ht span{font-size:var(--f0);color:var(--tx4);font-family:var(--mono);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hitem:hover .ht b{color:var(--accTx)}
.hitem .hn{font-family:var(--mono);font-size:var(--f2);font-weight:700;color:var(--tx3)}
.demobar{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:18px 0 0;
  padding:15px 18px;border-radius:var(--r);background:var(--s1)}
.demobar .sicon{width:26px;height:26px;flex:none}
.demobar .t{display:grid;gap:3px;flex:1;min-width:240px}
.demobar .t b{font-size:var(--f3)}
.demobar .t span{font-size:var(--f1);color:var(--tx3);line-height:1.5}
/* two actions offered side by side are two actions of the same size */
.demobar .dmact{display:flex;gap:8px;flex-wrap:wrap}
.demobar .dmact>*{height:40px;padding:0 18px;border-radius:11px;font-size:var(--f2);
  display:inline-flex;align-items:center}
.intro{display:grid;gap:20px;margin:0 0 30px}

.ipt .sicon,.ipt .coin{width:22px;height:22px;flex:none;background-size:contain;
  background-repeat:no-repeat;background-position:center}

.irow{display:flex;gap:10px;flex-wrap:wrap}
/* the way through to a thing's own page, wherever you are already looking at that thing */
.viewbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;
  height:34px;padding:0 10px;border-radius:9px;background:var(--s2);color:var(--tx4);
  text-decoration:none;font-size:var(--f1);font-weight:700}
.viewbtn .sicon{width:16px;height:16px;opacity:.7}
.viewbtn:hover{background:var(--s3);color:var(--tx)}
.viewbtn:hover .sicon{opacity:1}
.viewbtn.wide{width:100%}
/* 56px beside a 29px pill, where the same pair is 30 and 30 one panel over */
.optrow .viewbtn{width:30px;height:30px;align-self:center;padding:0;justify-content:center;background:none}
.optrow .viewbtn:hover{background:var(--s4)}
.optrow .ownt{position:absolute;top:2px;right:2px;width:22px;height:22px;padding:0;display:grid;place-items:center;border-radius:99px;background:none;color:var(--tx4);font-size:var(--t-label);z-index:1}
.optrow .ownt:hover{background:var(--s4);color:var(--tx)}
.optrow .ownt.on{background:var(--s4);color:var(--tx)}
.optrow .ownt:not(.on){opacity:0}
.optrow:hover .ownt,.optrow .ownt:focus-visible{opacity:1}
.prow .viewbtn{height:28px;padding:0 8px}
/* Cards, not slivers. Four columns of 268px is what truncated "Branda th..." and stacked the
   upgrade pill on top of the style label. */
.kcard{display:grid;grid-template-rows:1fr auto;border-radius:var(--r);background:var(--s1);
  overflow:hidden}
.kcard:hover{background:var(--s2)}
.kcgo{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:14px 16px 12px;text-align:left;width:100%}
.kcgo[disabled]{cursor:default}
.kcgo .art{display:flex;align-items:center;justify-content:center;width:76px;height:76px}
.kcgo .art img{max-width:76px;max-height:76px;object-fit:contain}
.kct{display:grid;gap:5px;min-width:0}
.kct .nm{font-size:var(--f3);font-weight:700;line-height:1.2}
.kct .meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;font-size:var(--f1)}
.kcn{font-family:var(--mono);font-size:var(--f5);font-weight:700;color:var(--tx);
  letter-spacing:-.02em}
.kcm{color:var(--tx4)}
/* a row with nothing to say about a pet says that, rather than saying something else */
.kcpet.none{color:var(--tx4);font-style:normal}
.kcfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 16px 14px;min-height:44px}
.kcfoot .viewbtn{height:30px;padding:0 12px;font-size:var(--f1)}
.kcup.ghost{visibility:hidden}
.kcfoot .kcup{flex:0 1 auto;min-width:0}
.kcup .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--tx3);font-size:var(--f1);font-weight:600}
/* the pet a boss drops, on the card its killcount is already on */
.kcpet{display:flex;align-items:center;gap:7px;padding:4px 9px 4px 5px;border-radius:99px;
  background:var(--s2);min-width:0}
.kcpet img{width:22px;height:22px;object-fit:contain;flex:none}
.kcpet .pn{font-size:var(--f1);font-weight:600;color:var(--tx3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:104px}
.kcpet .pv{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--accTx)}
/* all of them, ordered by how close you are */
.petgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(272px,100%),1fr));gap:8px}
.petc{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:9px 13px;border-radius:var(--rs);background:var(--s1)}
.petc .art{display:flex;align-items:center;justify-content:center;width:46px;height:46px}
.petc .art img{max-width:46px;max-height:46px;object-fit:contain}
.petc .t{display:grid;gap:2px;min-width:0}
.petc .nm{font-size:var(--f2);font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.petc .sub{font-size:var(--f0);color:var(--tx4);font-family:var(--mono);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.petc .n{display:grid;justify-items:end;gap:2px}
.petc .n b{font-family:var(--mono);font-size:var(--f3);font-weight:700;color:var(--acc)}
.petc .n em{font-style:normal;font-size:var(--f0);color:var(--tx4);font-family:var(--mono)}
.petc .n .never{color:var(--tx4)}
.petc.cold{opacity:.62}
.petc.own{background:var(--goodBg)}
.petc.own .got{font-size:var(--f1);font-weight:700;color:var(--good)}
/* and everything Wise Old Man tracks that you have never killed */
.kcnever{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(196px,100%),1fr));gap:8px}
.kcchip{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--rs);
  background:var(--s1);text-align:left}
.kcchip:hover{background:var(--s2)}
.kcchip[disabled]{opacity:.5;cursor:default}
.kcchip img,.kcchip .noart{width:30px;height:30px;object-fit:contain;flex:none}
.kcchip .t{font-size:var(--f1);font-weight:600;color:var(--tx2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rsnbox{display:grid;gap:12px;padding:20px;border-radius:var(--r);background:var(--s1);
  max-width:560px}
.rsnhead{display:flex;align-items:center;gap:9px;font-size:var(--f3)}
.rsnrow{display:flex;gap:9px;flex-wrap:wrap}
.rsnrow .srch{flex:1;min-width:190px;background:var(--slotDeep)}
.rsnnote{font-size:var(--f1);line-height:1.6;color:var(--tx3);margin:0}
.rsnnote.bad{color:var(--warn)}
.skillgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
/* the game shows skills three across, and so does this - one board, with what you gained on
   the same tile as the level it moved */
.skwrap{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:26px;margin-top:22px;
  align-items:start}
.skwrap .sec-h{margin:0}
@media(max-width:1180px){.skwrap{grid-template-columns:1fr;gap:22px}}
@media(max-width:560px){.skillgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}}
/* the levels every setup is worked out from, typed over on the page that shows them. Same columns,
   gap and tile as the board above, so the two grids share their edges at every width. */
.lvedit{margin-top:36px}
.lvgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.lvt{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--rs);
  background:var(--s1);cursor:text}
.lvt:focus-within{background:var(--s2)}
.lvt .sicon{width:22px;height:22px}
.lvt .nm{flex:1;min-width:0;font-size:var(--f0);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvt input{flex:none;width:58px;height:36px;padding:0 4px;border-radius:9px;background:var(--slotDeep);
  font-family:var(--mono);font-weight:700;text-align:center}
@media(max-width:560px){.lvgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .lvt input{width:40px}
  /* a skill name wraps before it is cut off, at any type size */
  .lvt{padding:10px 10px;gap:8px}
  .lvt .nm{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2;letter-spacing:.04em}}

/* ---------- the column beside the board ---------- */
.rail{display:grid;gap:12px}
.rcard{padding:calc(var(--pad) + 4px);border-radius:var(--r);background:var(--s1);display:grid;gap:12px;
  align-content:start}
.rcard h3{font-size:var(--f0);font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx4);margin:0}
.rhead{display:flex;align-items:center;gap:10px}
.rhead h3{flex:1}
/* the Skills page: when Wise Old Man last read the hiscores, and the button that asks it to again */
.womup .rnote{flex:1;min-width:0}
.womup .toggle:disabled,.womup .toggle:disabled:hover{background:var(--slotDeep);color:var(--tx4);cursor:default}
.toggle.sm{height:28px;min-height:28px;padding:0 11px;font-size:var(--f0);letter-spacing:.06em;
  text-transform:uppercase}
.rbig{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rbig .v{font-family:var(--mono);font-size:var(--f6);font-weight:700;letter-spacing:-.03em;
  line-height:1;color:var(--good)}
.rbig .l{font-size:var(--f1);color:var(--tx3)}
.rnote{font-size:var(--f1);line-height:1.65;color:var(--tx3);margin:0}
.rlist{display:grid;gap:10px}
.rrow{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:9px;align-items:center;
  font-size:var(--f2)}
.rrow img{width:20px;height:20px;object-fit:contain}
.rrow .nm{font-weight:600;text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.rrow .v{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--good)}
.rrow .v b{color:var(--acc)}
/* a bar is just a bar - it was also claiming a full grid row, which broke every other
   grid it was dropped into */
.rbar{height:3px;border-radius:99px;background:var(--slotDeep);overflow:hidden}
.rrow .rbar{grid-column:1/-1}
.rbar i{display:block;height:100%;background:var(--tx2);border-radius:99px}
.rrow .rbar i{background:var(--good)}
.mlist{display:grid;gap:13px}
/* every cell placed on purpose - left to itself the grid put the detail beside the headline
   and squeezed both into half a column */
.mlist .mrow{display:grid;grid-template-columns:20px minmax(0,1fr);gap:3px 10px;align-items:center}
.mrow.goal{grid-template-columns:20px minmax(0,1fr) auto}
.mrow img{grid-column:1;grid-row:1/span 2;width:20px;height:20px;object-fit:contain}
.mrow>span:not(.t):not(.s):not(.rbar){grid-column:1;grid-row:1/span 2}
.mrow .t{grid-column:2;grid-row:1;font-size:var(--f2);font-weight:700;line-height:1.35}
.mrow .s{grid-column:2;grid-row:2;font-size:var(--f1);color:var(--tx3);font-family:var(--mono)}
.mrow .rbar{grid-column:1/-1;grid-row:3;margin-top:4px}
.mrow .gdel{grid-column:3;grid-row:1;color:var(--tx4);font-size:var(--f3);line-height:1;padding:0 2px}
.mrow .gdel:hover{color:var(--warn)}
.mrow.done .t{color:var(--good)}
/* the suggestion chips under a goal - not the header's stat chips, which own .chips */
.gchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ---------- achievements ---------- */
/* the three tiers either side of the one being led with are context, not the subject */
.qhero-art .dim{opacity:.3;filter:grayscale(1)}
.qhero-art img.dim{height:46px;max-width:46px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(282px,100%),1fr));gap:12px;
  margin-top:14px}
/* one shape for every region, like the quest cards - a fixed art panel and a fixed body */
.dc{height:324px;display:grid;grid-template-rows:126px 1fr;border-radius:var(--r);
  background:var(--s1);overflow:hidden;text-align:left;padding:0}
.dc:hover{background:var(--s2)}
.dc.all .dart{background:color-mix(in srgb,var(--tx) 6%,var(--slotDeep))}
/* the art was sitting flat against the top edge of its own panel */
.dart{display:flex;align-items:center;justify-content:center;gap:12px;padding:20px 16px 16px;
  background:var(--slotDeep);position:relative}
.dart img{width:46px;height:46px;object-fit:contain}
.dart img.dim{opacity:.22;filter:grayscale(1)}
.dbody{padding:13px 15px 15px;display:grid;gap:9px;align-content:start;
  grid-template-rows:auto auto 1fr;overflow:hidden}
.dbody .dnext{align-self:end}
.dtiers{display:grid;gap:7px}
.dt{display:grid;grid-template-columns:56px minmax(0,1fr) 42px;gap:8px;align-items:center}
.dt .tn{font-size:var(--f0);font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--tx4)}
.dt .tv{font-family:var(--mono);font-size:var(--f0);text-align:right;color:var(--tx3)}
.dt.ok .tn,.dt.ok .tv{color:var(--good)}
.dt.ok .rbar i{background:var(--good)}
/* columns, not a grid: these lines are a hierarchy - the reward, then what it does - and a grid
   fills left to right, which would put a benefit beside the thing it belongs to rather than
   under it. Columns fill downwards. */
.rwlist{list-style:none;display:grid;gap:5px;margin:2px 0 0;padding:0}
.drw .rwlist{display:block;columns:2 300px;column-gap:28px}
.drw .rwlist>li{break-inside:avoid;margin-bottom:9px}
.rwlist li{font-size:var(--f1);line-height:1.5;color:var(--tx2);padding-left:13px;position:relative}
.rwlist li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:99px;background:var(--acc)}
.rwsub{list-style:none;margin:3px 0 0;padding:0}
.rwsub li{color:var(--tx3);padding-left:14px}
.rwsub li::before{left:1px;top:9px;width:4px;height:4px;background:var(--tx4)}
/* One gutter for the whole list, wide enough for a picture, with the bullets of the lines that
   have none sitting in the middle of it - so the text has a single left edge either way. */
.rwlist.hasart>li{padding-left:26px}
.rwlist.hasart>li::before{left:7px}
.rwlist li.art::before{display:none}
.rwlist li.art>img{position:absolute;left:0;top:1px;width:18px;height:18px;object-fit:contain}
.rwlist li.more{color:var(--tx4)}
.rwlist li.more::before{background:var(--tx4)}
/* the one line on a card that says why the region is worth finishing */
.dnext{font-size:var(--f0);line-height:1.5;color:var(--tx3);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dnext b{color:var(--accTx);text-transform:uppercase;letter-spacing:.05em;margin-right:5px}
.dnext.done{color:var(--good)}
/* the header text starts at .dsech img 46px + .dsech gap 11px; this indent must match */
.drw{padding:6px 0 14px 57px}
/* The one list on this page that is read rather than glanced at, and it was the smallest text
   on it: a 10px label over 12px lines, two steps under body. Label, lines and pictures each
   come up, and the bullet gutters widen with them so the text keeps one left edge. */
.drw .mlbl{font-size:var(--f2);color:var(--tx3)}
.drw .rwlist li{font-size:var(--f3);line-height:1.55;padding-left:17px}
.drw .rwlist li::before{top:10px;width:6px;height:6px}
.drw .rwlist.hasart>li{padding-left:36px}
.drw .rwlist.hasart>li::before{left:10px}
.drw .rwlist li.art>img{width:26px;height:26px;top:0}
.drw .rwsub li{font-size:var(--f2);padding-left:16px}
.dopen{margin-top:22px;display:grid;gap:30px}
.dsec{display:grid;gap:14px}
.dsech{display:flex;align-items:center;gap:11px}
/* "Easy" is the heading of everything under it and was set at the size of a card subtitle */
.dsech img{width:46px;height:46px;object-fit:contain}
.dsech h4{font-size:var(--f5);letter-spacing:-.02em}
.dsech .rbar{flex:1;max-width:240px}
/* A 57px indent is a sixth of a phone, so the icon that sets it comes back down and the
   indent follows it: 34 + 11 = 45. */
@media(max-width:560px){.dsech img{width:34px;height:34px}
  .drw{padding-left:45px}}
/* two columns: a task is one sentence, and one sentence across a page built for boss cards is
   most of a line of empty */
/* the gap across is wider than the gap down, so two columns read as two columns rather than as
   one grid of loose boxes */
.dlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(430px,100%),1fr));
  gap:8px 16px}
/* two lines is the height of a row, whether the task fills them or not, so the grid does not
   step up and down as you read across it */
.drow{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:13px;align-items:center;
  padding:13px 15px;border-radius:var(--rs);background:var(--s1);min-height:66px}
.drow .tick{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  background:var(--slotDeep);color:transparent;font-size:var(--f1);font-weight:700}
.drow.ok .tick{background:var(--good);color:var(--s1)}
/* a tick you put there yourself, until a sync agrees with you */
.drow.mine .tick,.ctask.mine .tick{background:var(--s4);color:var(--tx)}
.drow,.ctask{cursor:pointer}
.drow:hover,.ctask:hover{background:var(--s2)}
.drow:hover .tick,.ctask:hover .tick{background:var(--s4)}
.drow.ok:hover .tick,.ctask.ok:hover .tick{box-shadow:none}
.drow.ok .tt{color:var(--tx3)}
/* and a task that would run past them is cut rather than allowed to push its row taller */
.drow .tt{font-size:var(--f2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.drow .tq{display:flex;gap:5px;justify-content:flex-end;flex:none}
@media(max-width:700px){.drow{grid-template-columns:20px minmax(0,1fr)}
  .drow .tq{grid-column:2;max-width:none;justify-content:flex-start}}

/* six for combat achievements, four for diaries - auto-fit rather than a fixed six, so the
   four do not sit in two thirds of the width with a hole beside them */
.ctiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px;
  margin-top:14px}
@media(max-width:900px){.ctiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.ctiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ct{display:grid;gap:5px;justify-items:start;padding:13px 14px 14px;border-radius:var(--r);
  background:var(--s1);text-align:left}
.ct img{width:22px;height:22px;object-fit:contain}
.ct .tn{font-size:var(--f0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx4)}
.ct .tv{font-family:var(--mono);font-size:var(--f4);font-weight:700;letter-spacing:-.02em}
.ct .tp{font-size:var(--f0);color:var(--tx4)}
.ct .rbar{width:100%}
.ct:hover{background:var(--s2)}
/* picked, not merely pointed at - hover is also --s2 */
.ct.on{background:var(--sel)}
.ct.on .tv{color:var(--accTx)}
/* The achievement pages carry no highlight colour: region tags, quest links, the picked tier, the
   filter chip and the tasks-left count are charcoal. Bars, done ticks and unmet skill levels keep theirs. */
#view-ach .qr.rg,#view-ach .qr.pre.first{background:var(--s3);color:var(--tx2)}
#view-ach a.qr,#view-ach .qr.go{text-decoration:none}
#view-ach .qr.go:hover{background:var(--s4);color:var(--tx)}
#view-ach .ct.on{background:var(--s3)}
#view-ach .ct.on .tv{color:var(--tx)}
#view-ach .toggle.on{background:var(--s3);color:var(--tx)}
#view-ach .toggle.on .box{background:var(--tx2);color:var(--s1)}
#view-ach .calf{color:var(--tx2)}
.ct.ok .rbar i{background:var(--good)}
.cfilt{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:18px 0 10px}
.cfilt .lbl{margin-left:auto}
.clistwrap{display:grid;gap:7px}
.cgrp{border-radius:var(--r);background:var(--s1);overflow:hidden}
.cgrp.open{background:var(--s2)}
/* a board of bosses, three or four across, at a size worth looking at */
.cagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(272px,100%),1fr));gap:10px;
  align-items:start}
.cacard{border-radius:var(--r);background:var(--s1);overflow:hidden}
.cacard:hover{background:var(--s2)}
.cacard{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto auto;
  gap:4px 15px;align-items:center;padding:15px;text-align:left;width:100%}
.cacard.open{background:var(--sel)}
/* the tasks, in the board, on the row under the card you opened - no box around them, because
   the rows are already boxes and a box of boxes is just a dark band */
.cadet{grid-column:1/-1;padding:2px 0 6px}
.cadet-h{display:flex;align-items:center;gap:15px;margin-bottom:12px}
.cadet-h .t{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:0}
.cadet-h .t b{font-size:var(--f3)}
.cadet-h .t span{font-size:var(--f0);color:var(--tx4);font-family:var(--mono)}
.caart{grid-row:1/4;display:flex;align-items:center;justify-content:center;width:96px;height:96px}
.caart img{max-width:96px;max-height:96px;object-fit:contain}
.canm{font-size:var(--f3);font-weight:700;align-self:end;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.casub{font-size:var(--f0);color:var(--tx4);font-family:var(--mono);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cacard .rbar{align-self:start}
.calf{grid-column:2;font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--acc)}
.cacard.open .calf{grid-column:3;grid-row:1/4;justify-self:end}
/* the two closest, side by side - in half the width the card was built for, so the picture gets
   a narrower column, the headline comes down a size, and the two stretch to the same height so
   their buttons sit on one line */
.cheroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:12px;
  align-items:stretch;margin-top:20px}
.cheroes .qhero{margin-top:0;grid-template-columns:minmax(130px,170px) minmax(0,1fr);gap:16px}
/* the diary hero is four rewards in a row above its text, not one picture beside it */
.cheroes .qhero.dhero{grid-template-columns:minmax(0,1fr);gap:14px;align-content:start}
.dhero-art{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px;
  border-radius:var(--rs);background:var(--slotDeep)}
.dta{display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 4px;
  border-radius:8px;opacity:.32;filter:grayscale(1)}
.dta.got{opacity:1;filter:none}
.dta.now{opacity:1;filter:none;background:var(--sel)}
.dta img{height:52px;max-width:52px;object-fit:contain}
.dta .ph{height:52px}
.dta em{font-style:normal;font-size:var(--f0);font-family:var(--mono);color:var(--tx4);
  text-transform:uppercase;letter-spacing:.05em}
.dta.now em{color:var(--accTx)}
.dta.got em{color:var(--tx3)}
.cheroes .qhero-art{min-height:0}
.cheroes .qhero-art img{height:120px;max-width:104px}
.cheroes .qhero-t h3{font-size:var(--f4);text-wrap:balance}
.cbrow{display:grid;grid-template-columns:46px minmax(0,1fr) 132px 78px;gap:15px;align-items:center;
  padding:11px 14px;width:100%;text-align:left}
.cbrow img,.cbrow .noart{width:46px;height:46px;object-fit:contain}
.cbrow .noart{border-radius:var(--rs);background:var(--s2)}
.cbrow .nm{font-size:var(--f2);font-weight:700;display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cbrow .sub{font-size:var(--f0);color:var(--tx4);font-family:var(--mono)}
.cbrow .lf{font-family:var(--mono);font-size:var(--f1);font-weight:700;text-align:right;
  color:var(--accTx)}
@media(max-width:760px){.cbrow{grid-template-columns:46px minmax(0,1fr) 60px}
  .cbrow .rbar{display:none}}
.clist{display:grid;gap:8px;padding:4px 0 2px}
.ctask{display:grid;grid-template-columns:20px 20px minmax(0,1fr) auto auto;gap:13px;
  align-items:center;padding:13px 15px;border-radius:var(--rs);background:var(--s1)}
.ctask img{width:20px;height:20px;object-fit:contain}
.ctask .tick{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  background:var(--slotDeep);color:transparent;font-size:var(--f1);font-weight:700}
.ctask.ok .tick{background:var(--good);color:var(--s1)}
.ctask .nm{font-size:var(--f2);font-weight:700;display:block}
.ctask.ok .nm{color:var(--tx3)}
.ctask .d{font-size:var(--f1);color:var(--tx3);line-height:1.45}
.ctask .ty{font-size:var(--f0);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx4);white-space:nowrap}
.ctask .pc{font-family:var(--mono);font-size:var(--f0);color:var(--tx4);width:34px;text-align:right}
/* What to bring: the game's 28-slot inventory, and beside it one row per thing in it - icon, name,
   count, why. The rows share their columns through subgrid, so every icon, name, count and reason
   starts on one edge. Each row is one inventory cell tall and the list starts on the grid's own top
   padding, so row n sits level with grid row n. Drawn here and on the generated boss pages. */
.binv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start}
.binvg{display:grid;grid-template-columns:repeat(4,44px);grid-auto-rows:44px;gap:4px;padding:10px;
  border-radius:var(--rs);background:var(--slotDeep)}
.binvg i{position:relative;display:grid;place-items:center;border-radius:7px;background:var(--slot);
  overflow:hidden;font-style:normal}
.binvg i img{max-width:34px;max-height:34px;object-fit:contain}
/* a stack's size, top left, where the game prints it */
.binvg i em{position:absolute;top:2px;left:4px;font-style:normal;font-family:var(--mono);font-size:var(--f0);
  font-weight:700;line-height:1;color:var(--accTx)}
.binvg i b{font-size:var(--f0);font-weight:700;color:var(--slotTx);text-align:center;line-height:1.1;padding:2px}
.binvl{display:grid;grid-template-columns:32px max-content auto minmax(0,1fr);grid-auto-rows:44px;
  column-gap:14px;row-gap:4px;padding:10px 0;min-width:0}
.binvr{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;min-width:0;
  padding:0 16px 0 6px;border-radius:var(--rs);background:var(--s1)}
.binvr .a{display:grid;place-items:center;width:32px;height:32px}
.binvr .a img{max-width:30px;max-height:30px;object-fit:contain}
.binvr b{font-size:var(--f2);font-weight:700;white-space:nowrap}
.binvr .c{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--accTx);min-width:3ch}
.binvr .w{font-size:var(--f1);line-height:1.35;color:var(--tx3);min-width:0}
/* the list goes under the grid, and a row takes the height its reason needs */
@media(max-width:900px){
  .binv{grid-template-columns:minmax(0,1fr);gap:12px}
  .binvg{justify-self:start}
  .binvl{grid-auto-rows:minmax(44px,auto);padding:0}
  .binvr{padding-top:6px;padding-bottom:6px}
}
@media(max-width:560px){
  .binvl{grid-template-columns:32px minmax(0,1fr) auto}
  .binvr{row-gap:1px}
  .binvr .a{grid-row:1/3}
  .binvr b{white-space:normal}
  .binvr .w{grid-column:2/4}
}
/* A boss's combat tasks, a band a tier in tier order, each band leading with the tier's own sword.
   Two across where there is room; a task is a sentence, so it is never cut short. */
.btk{display:grid;gap:20px}
/* the way to every task: a quiet button, because the page's one gold button is its call to action.
   Not .btn.alt - the generated pages already use a bare .alt for their option rows. */
.btn.btkall{background:var(--s1);color:var(--tx);box-shadow:none}
.btn.btkall:hover{background:var(--s2)}
.btkgo{color:var(--accTx);font-weight:600;text-decoration:none}
.btkgo:hover{text-decoration:underline}
.btkt{display:grid;gap:9px}
/* the header takes the rows' own 15px side padding, so its sword starts over their tick and its
   "N points each" ends over their "N pts" */
.btkh{display:flex;align-items:center;gap:9px;padding:0 15px}
.btkh img{width:22px;height:22px;object-fit:contain}
.btkh .tn{font-size:var(--f0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.btkh .tv,.btkband .tv{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--tx3)}
.btkh .tp,.btkband .tp{margin-left:auto;font-size:var(--f0);color:var(--tx4)}
/* a raid's own tasks, after the boss's: the same tiers under a heading of their own */
.btkband{display:flex;align-items:baseline;gap:10px;padding:0 15px;margin:30px 0 14px}
.btkband h3{font-size:var(--f4);font-weight:700}
.btkl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(460px,100%),1fr));gap:8px}
.btkr{display:grid;grid-template-columns:minmax(0,1fr) auto 40px;gap:14px;align-items:center;
  padding:13px 15px;border-radius:var(--rs);background:var(--s1)}
.btk.me .btkr{grid-template-columns:20px minmax(0,1fr) auto 40px}
.btkr .tick{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  background:var(--slotDeep);color:transparent;font-size:var(--f1);font-weight:700}
.btkr.ok .tick{background:var(--good);color:var(--s1)}
.btkr .t{display:grid;gap:2px;min-width:0}
.btkr .t b{font-size:var(--f2);font-weight:700}
.btkr.ok .t b{color:var(--tx3)}
.btkr .t span{font-size:var(--f1);line-height:1.45;color:var(--tx3)}
.btkr .tg{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.btkr .ty{padding:3px 8px;border-radius:99px;background:var(--s2);font-size:var(--f0);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);white-space:nowrap}
.btkr .pt{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--accTx);text-align:right;
  white-space:nowrap}
@media(max-width:560px){
  .btkr{grid-template-columns:minmax(0,1fr) 40px;gap:6px 12px}
  .btk.me .btkr{grid-template-columns:20px minmax(0,1fr) 40px}
  .btkr .tg{grid-column:1/-1;grid-row:2;flex-direction:row;align-items:center}
  .btkr .tick,.btkr .pt{align-self:start}
  .btk.me .btkr .tg{grid-column:2/-1}
}
@media(max-width:760px){.ctask{grid-template-columns:20px 20px minmax(0,1fr)}
  .ctask .ty,.ctask .pc{display:none}}
.gchips .clbl{font-size:var(--f0);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx4);margin-right:2px}
/* ---------- targets ---------- */
.goalgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(252px,100%),1fr));gap:12px;
  margin-bottom:16px}
.gcard{display:grid;gap:9px;align-content:start;padding:15px 16px 16px;border-radius:var(--r);
  background:var(--s1)}
.gcard .gh{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center}
.gcard .gh img{width:26px;height:26px;object-fit:contain}
.gcard .gt h4{font-size:var(--f3);letter-spacing:-.01em}
.gcard .gt .sub{font-family:var(--mono);font-size:var(--f0);color:var(--tx4)}
.gcard .gdel{color:var(--tx4);font-size:var(--f4);line-height:1;padding:0 3px}
.gcard .gdel:hover{color:var(--warn)}
.gcard .gbig{font-family:var(--mono);font-size:var(--f5);font-weight:700;letter-spacing:-.03em;
  line-height:1;color:var(--accTx)}
.gcard .gbig span{font-family:var(--sans);font-size:var(--f1);font-weight:600;color:var(--tx3);
  letter-spacing:0}
.gcard .gbig .ok{color:var(--good)}
.gcard.done .rbar i{background:var(--good)}
.gcard .note{font-size:var(--f1);line-height:1.55;color:var(--tx3);margin:0}
.goalbar{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
/* the goals row on the home page: its cards, or one line and three milestones to pick from */
.homegoals{margin:12px 0 0}
.homegoals .goalgrid{margin-bottom:0}
/* a boss's loot: what a kill is worth, then the drop table */
.lsum{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.lstat{display:flex;align-items:center;gap:12px;padding:12px 22px 12px 16px;border-radius:var(--r);background:var(--s1)}
.lstat .sicon{width:26px;height:26px}
.lstat .ic-combat{background-image:var(--ic-combat)}
.lstat .lsv{display:grid;gap:3px}
.lstat b{font-family:var(--mono);font-size:var(--f5);font-weight:700;line-height:1;color:var(--tx)}
.lstat .lsl{font-size:var(--f0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx4)}
.ltable{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(290px,calc((100% - 20px) / 3)),1fr));gap:6px 10px}
.lrow{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:54px;
  padding:8px 16px 8px 8px;border-radius:var(--rs);background:var(--s1)}
.lrow .lic{display:grid;place-items:center;width:38px;height:38px}
.lgrp{margin:18px 0 8px;font-size:var(--f1);font-weight:700;color:var(--tx2)}
.lgrp:first-of-type{margin-top:4px}
.lrow .lic img{max-width:32px;max-height:32px;object-fit:contain}
.lrow .lt{display:grid;gap:3px;min-width:0}
.lrow .ln{font-size:var(--f1);font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .lm{font-family:var(--mono);font-size:var(--f0);color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .lv{font-family:var(--mono);font-size:var(--f1);font-weight:600;text-align:right;color:var(--tx);white-space:nowrap}
.lmore{margin-top:12px}
/* the points a raid is worked out at, typed in where the figure would be */
.rlpts input{width:9ch;padding:0;border:0;background:none;font-family:var(--mono);font-size:var(--t-input);font-weight:700;
  line-height:1;color:var(--tx)}
.rlpts input:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:4px}
.gcard.gadd{place-content:center;justify-items:center;gap:6px;font-size:var(--f1);font-weight:700;color:var(--tx3)}
.gcard.gadd:hover{background:var(--s2);color:var(--tx)}
.homegoals .goalgrid{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)) 104px}
.homegoals .gcard.gadd{grid-column:-2/-1;grid-row:1}
@media(max-width:700px){.homegoals .goalgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .homegoals .gcard.gadd{grid-column:auto;grid-row:auto}}
.gcard.gadd .gplus{font-family:var(--mono);font-size:var(--f5);line-height:1}
.hgh{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.hgh .toggle{margin-left:auto}
.hgideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.hgi{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:14px 16px;border-radius:var(--r);background:var(--s1)}
.hgi img{width:26px;height:26px;object-fit:contain}
.hgi .t{display:grid;gap:2px;min-width:0}
.hgi .t b{color:var(--tx)}
.hgi .t span{font-size:var(--t-meta);color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hgi .x{font-family:var(--mono);font-weight:700;color:var(--tx2);white-space:nowrap}
.hgi .x em{font-style:normal;font-family:var(--sans);font-size:var(--t-label);color:var(--tx3);margin-left:4px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;
  background:var(--s2);font-size:var(--f1);font-weight:600;color:var(--tx2)}
.chip b{font-family:var(--mono);font-size:var(--f0);color:var(--tx4)}
.chip:hover{background:var(--s3);color:var(--tx)}
/* ---------- setting a goal ----------
   One surface under the cards, four fields on one baseline: the skill (the skills tab laid out as the game lays
   it out, with icons and your levels), the level (the marks worth aiming at, or typed), what that leaves and how
   long it takes, and the button. The nearest milestones sit under it, one tap each. */
.gset{display:grid;gap:14px;padding:16px;border-radius:var(--r);background:var(--s1)}
.gsrow{display:grid;grid-template-columns:minmax(210px,250px) auto minmax(0,1fr) auto;gap:12px 20px;align-items:end}
.gsf{display:grid;gap:7px;min-width:0}
.gsskill{position:relative}
.gsl{font-size:var(--f0);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx4)}
.gsk{display:grid;grid-template-columns:26px minmax(0,1fr) auto 10px;gap:10px;align-items:center;height:48px;
  padding:0 14px 0 11px;border-radius:var(--rs);background:var(--slotDeep);color:var(--tx);text-align:left}
.gsk:hover,.gsk[aria-expanded="true"]{background:var(--s3)}
.gsk::after{content:"\25BE";font-size:var(--f0);color:var(--tx3)}
.gsk img,.skopt img{width:24px;height:24px;object-fit:contain;justify-self:center}
.gsk b{font-size:var(--f2);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsk .lvl,.skopt .lvl{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--tx3)}
.skmenu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;width:min(560px,calc(100vw - 32px));padding:6px;
  border-radius:var(--r);background:var(--s2);box-shadow:var(--sh3);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.skopt{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:44px;
  padding:6px 12px 6px 8px;border-radius:9px;text-align:left;color:var(--tx)}
.skopt:hover{background:var(--s3)}
.skopt.on{background:var(--sel)}
.skopt:focus-visible{outline-offset:-2px}
.skopt b{font-size:var(--f1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gslv{display:flex;gap:6px;align-items:center;height:48px}
.gslv .lvc{height:48px;min-width:48px;padding:0 10px;border-radius:var(--rs);background:var(--slotDeep);
  font-family:var(--mono);font-size:var(--f2);font-weight:700;color:var(--tx2)}
.gslv .lvc:hover{background:var(--s3);color:var(--tx)}
.gslv .lvc.on{background:var(--sel);color:var(--tx)}
.gslv input{width:76px;height:48px;padding:0 6px;border-radius:var(--rs);background:var(--slotDeep);
  font-family:var(--mono);font-size:var(--t-input);font-weight:700;text-align:center;color:var(--tx);min-width:0}
.gsprev{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;min-height:48px;min-width:0}
.gsprev b{font-family:var(--mono);font-size:var(--f5);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--tx)}
.gsprev span{font-size:var(--f1);line-height:1.45;color:var(--tx3)}
.gset .gsgo{height:48px;padding:0 22px}
.gset .gsgo:disabled{opacity:.5;cursor:default}
.gslv input::placeholder{font-family:var(--sans);font-weight:600;color:var(--tx4)}
.gset .gchips{gap:8px}
.gset .chip{height:34px;min-height:34px}
.gmile img{width:18px;height:18px;object-fit:contain}
@media(max-width:980px){
  .gsrow{grid-template-columns:minmax(0,1fr) auto}
  .gsout{grid-column:1/2}
  }
@media(max-width:560px){
  .gset{padding:14px}
  .gsrow{grid-template-columns:minmax(0,1fr)}
  .gsout{grid-column:auto}
  .gset .gsgo{width:100%}
  .skmenu{right:0;width:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
  }
.sk .rt{display:grid;gap:1px;text-align:right;justify-items:end;align-self:start}
.sk .rt .gn{order:-1}
/* this is the number the page is for, so it is not set at label size */
.sk .gn{font-family:var(--mono);font-size:var(--f2);font-weight:700;color:var(--good);
  white-space:nowrap;line-height:1.2}
.sk .gn b{color:var(--acc);margin-left:4px;font-size:var(--f1)}
.sk .gn.idle{color:var(--tx4);opacity:.5}
.sk.tot{background:var(--s2)}
.sk.tot .nm{color:var(--tx3)}
.sk{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--rs);
  background:var(--s1)}
.sk img{width:22px;height:22px;object-fit:contain;flex:none}
.sk .t{display:grid;gap:1px;min-width:0;flex:1}
.sk .lv{font-family:var(--mono);font-size:var(--f3);font-weight:700;line-height:1.1}
.sk .lv .max{color:var(--acc)}
.sk .nm{font-size:var(--f0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx4)}
.sk .bar{display:block;height:3px;border-radius:99px;background:var(--slotDeep);overflow:hidden;
  margin-top:5px}
.sk .bar i{display:block;height:100%;background:var(--tx2);border-radius:99px}
.sk.maxed .bar i{background:var(--good)}
.sk.maxed{background:color-mix(in srgb,var(--good) 9%,var(--s1))}
.sk .rt .xp{font-size:var(--f0)}
.sk .xp{font-family:var(--mono);font-size:var(--f0);color:var(--tx4);white-space:nowrap}
/* one row per line across a wide screen left a third of it empty between the name and
   the price, so the list runs in columns like every other grid here */
.pricelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(560px,100%),1fr));gap:8px}
/* seven children: icon, name, price, sparkline, change, basket, view. Six tracks put
   the last of them on a second row under the icon. */
.prow{display:grid;grid-template-columns:34px minmax(0,1fr) 110px auto 32px auto;
  gap:12px;align-items:center;
  padding:11px 15px;border-radius:var(--rs);background:var(--s1)}
.prow img{width:30px;height:30px;object-fit:contain}
.prow .pn{display:grid;gap:2px;min-width:0}
.prow .pn b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .pw{font-size:var(--t-meta);color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .plow{font-style:normal;font-size:var(--t-label);font-weight:600;letter-spacing:.04em;margin-right:7px;
  padding:1px 8px;border-radius:99px;background:var(--goodBg);color:var(--good)}
.prow .pv{display:grid;justify-items:end;gap:2px}
.prow.on{background:var(--s2)}
.pricebar{margin:0 0 14px}
/* merching */
.mkctl{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:0 0 12px}
.mkfld{display:grid;gap:4px}
.mkfld>span{font-size:var(--f1);font-weight:600;color:var(--tx3)}
.mkfld input,.mkfld select{height:40px;min-width:140px;padding:0 12px;border-radius:10px;background:var(--s1);font-weight:600;color:var(--tx)}
.mkgrow{flex:1 1 260px}
.mkgrow input{width:100%}
.mktax{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:0 0 14px;padding:12px 14px;border-radius:var(--r);background:var(--s1)}
.mktax>b{align-self:center;font-size:var(--f2)}
.mktaxout{align-self:center;font-size:var(--f2);color:var(--tx2)}
.mktaxout b{font-family:var(--mono);color:var(--tx)}
.mkerr{margin:0 0 10px;color:var(--bad);font-size:var(--f1)}
.mktable{display:grid;gap:4px}
.mkrow{display:grid;grid-template-columns:36px minmax(0,2fr) repeat(8,minmax(0,1fr));align-items:center;gap:12px;padding:8px 12px;border-radius:12px;background:var(--s1);cursor:pointer}
.mkrow:hover{background:var(--s2)}
.mkrow.mkhead{background:transparent;cursor:default;font-size:var(--f1);font-weight:600;color:var(--tx3);padding-top:0;padding-bottom:0}
.mkrow.mkinv{grid-template-columns:36px minmax(0,2.2fr) repeat(3,minmax(0,1fr)) 64px 32px;cursor:default}
.mkrow.mkbank{grid-template-columns:36px minmax(0,2.2fr) repeat(4,minmax(0,1fr));cursor:default}
.mkrow.mkmove{grid-template-columns:36px minmax(0,1fr) auto;cursor:default}
.mkic img{width:32px;height:32px;object-fit:contain;display:block}
.mkn{display:grid;gap:2px;min-width:0}
.mkn b{font-size:var(--f2);font-weight:700;overflow-wrap:anywhere}
.mkn i,.mkv i{font-style:normal;font-size:var(--f1);color:var(--tx3)}
.mkv{display:grid;gap:2px;font-family:var(--mono);font-size:var(--f2);font-weight:700;text-align:right}
.mkrow.mkhead>span:nth-child(n+3){text-align:right}
#pricebar .ab .l{text-transform:none;letter-spacing:0} :is(#pricelist,#pricebar) .up{color:var(--good)} :is(#pricelist,#pricebar) .down{color:var(--bad)}
.mkx{width:30px;height:30px;border-radius:99px;color:var(--tx3)}
.mkx:hover{background:var(--s3);color:var(--tx)}
.mkdet{padding:6px 12px 12px}
.mkdetin{display:grid;gap:10px;padding:12px;border-radius:12px;background:var(--s2)}
.mkdetrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:var(--f1);color:var(--tx2)}
.mkcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:16px}
.mkcol{display:grid;gap:4px;align-content:start}
.mkcol h3{margin:0 0 6px;font-size:var(--f3)}
.mknote{margin:14px 0 0;font-size:var(--f1);line-height:1.5;color:var(--tx3)}
#pricelist{display:block}
.mkrow.on{background:var(--s2)}
.mkn i.mkmob{display:none} .mkn i.mkmob:first-of-type{color:var(--tx2)}
.mktax .mkfld input{background:var(--s2)}
.mksell{height:32px;padding:0 12px}
.mksellform{margin:0;padding:10px 12px;border-radius:12px;background:var(--s2)}
.mkh3{margin:20px 0 8px;font-size:var(--f3)}
.mkchartw{display:grid;gap:2px}
.mkchart{display:block;width:100%;height:150px}
.mkax{font-family:var(--mono);font-size:var(--f1);color:var(--tx3)}
.mkleg{display:flex;align-items:center;gap:6px;font-size:var(--f1);color:var(--tx3)}
.mkleg i{width:12px;height:3px;border-radius:2px;background:var(--good)}
.mkleg i.lo{margin-left:8px;background:var(--tx3)}
.mkfine{margin:0;font-size:var(--f1);line-height:1.5;color:var(--tx3)}
.mkv.mktx{color:var(--tx3)}
.mklim.unk{color:var(--warn)}
.mkworks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:10px}
.mkwork{display:grid;gap:3px;padding:10px 12px;border-radius:10px;background:var(--s1)}
.mkwork h4{margin:0 0 4px;font-size:var(--f2)}
.mkwl{display:flex;justify-content:space-between;gap:10px;font-size:var(--f2);color:var(--tx2)}
.mkwl b{font-family:var(--mono);color:var(--tx)}
.mkwl.mkwm b{color:var(--tx3)}
.mkwl.mkws>span{color:var(--tx)}
.mkwork .mkfine{margin-top:6px}
.mkwl>span>i{display:block;font-style:normal;font-size:var(--f1);color:var(--tx3)}
.mkwl{align-items:baseline}
.mkmode{align-self:end}
.mkwg{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:4px 10px;align-items:end;font-size:var(--f2)}
.mkwg>span{color:var(--tx2)}
.mkfold{margin:0 0 12px}
.mkfold>summary{display:none}
.mkfold>.mkctl,.mkfold>.mktax{margin:0}
.mkwin{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:3px 12px;font-size:var(--f2)}
.mkwin>span{color:var(--tx2)}
.mkplan{display:grid;gap:4px;margin:0 0 14px;padding:12px;border-radius:var(--r);background:var(--s1)}
.mkplanh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin:0 0 4px;font-size:var(--f2)}
.mkplanh span{color:var(--tx2)}
.mkplanr{display:grid;grid-template-columns:18px 28px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:6px 8px;border-radius:10px;text-align:left;color:var(--tx)}
.mkplanr:hover{background:var(--s2)}
.mkplanr>span:first-child{grid-row:1/3;color:var(--tx3);font-size:var(--f1)}
.mkplanr>.mkic{grid-row:1/3}
.mkplanr>.mkic img{width:26px;height:26px}
.mkplanr>b{font-size:var(--f2);overflow-wrap:anywhere}
.mkplanr>i{grid-column:3;font-style:normal;font-size:var(--f1);color:var(--tx3)}
.mkplanr>em{grid-row:1/3;grid-column:4;font-style:normal;font-family:var(--mono);font-weight:700;color:var(--good)}
.mkplanr>em small{display:block;text-align:right;font-size:var(--f1);font-weight:600;color:var(--tx3)}
.mkplanh b.up{color:var(--good)}
.mkplanh .up{color:var(--good)}
.mkptab{display:grid;gap:2px;overflow-x:auto}
.mkprow{display:grid;grid-template-columns:minmax(160px,2fr) repeat(9,minmax(70px,1fr));gap:10px;align-items:center;padding:7px 8px;border-radius:10px;text-align:right;font-family:var(--mono);font-size:var(--f2);font-weight:700;color:var(--tx)}
button.mkprow:hover{background:var(--s2)}
.mkprow>span:first-child{text-align:left}
.mkprow .up{color:var(--good)}
.mkprow.mkphead{font-family:inherit;font-size:var(--f1);font-weight:600;color:var(--tx3);padding-top:0;padding-bottom:0}
.mkprow.mkptot{background:var(--s2);font-family:var(--mono)}
.mkprow.mkptot>span:first-child{font-family:inherit}
.mkpn{display:flex;align-items:center;gap:8px;min-width:0;font-family:inherit}
.mkpn b{overflow-wrap:anywhere}
.mkpn .mkic img{width:26px;height:26px}
.mkwin>i{font-style:normal;font-family:var(--mono);text-align:right;color:var(--tx3)}
.mkwin>i.on{color:var(--tx);font-weight:700}
.mkwin>:nth-child(-n+3){font-size:var(--f1);font-family:inherit;color:var(--tx3)}
.mkwg>i.on{color:var(--tx);font-weight:700}
.mkwg>i{font-style:normal;font-family:var(--mono);text-align:right;color:var(--tx3)}
.mkwg>b{font-family:var(--mono);text-align:right;color:var(--tx)}
.mkwg>i:nth-child(-n+5),.mkwg>b:nth-child(-n+5){font-family:inherit;font-size:var(--f1)}
.pricelist .pdetail{grid-column:1/-1}
.pdetail .pdwhy{font-size:var(--t-meta);color:var(--tx3)}
.pdetail .pdclose{margin-left:auto}
.pdetail .pchart{padding:0;background:transparent}
.pdetail .pcchg{font-size:var(--t-meta);color:var(--tx3);font-weight:600}
.pdetail .pdstats .up{color:var(--bad)}
.pdetail .pdstats .down{color:var(--good)}
.prow .pp{font-family:var(--mono);font-weight:700;text-align:right}
.prow .pc{font-family:var(--mono);font-size:var(--f1);font-weight:700;text-align:right}
.prow .up{color:var(--bad)} .prow .down{color:var(--good)}
.prow svg{display:block}
@media(max-width:760px){
  /* six children survive here, so six tracks - four meant the last three wrapped onto a second
     row under the thumbnail. And the thing holding the track is .sparkcell, not the svg in it. */
  .prow{grid-template-columns:30px minmax(0,1fr) auto auto auto auto;gap:8px;padding:10px 12px}
  .prow .sparkcell{display:none}
}
.pempty{padding:26px;text-align:center;color:var(--tx3);font-size:var(--f2)}
/* an empty state is about the panel, never about one track of it */
.emptystate,.pempty,.bankempty,.mnores{grid-column:1/-1}
.kclist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(352px,100%),1fr));gap:10px}
#kclist{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.kch{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:var(--f4);font-weight:800;letter-spacing:-.015em}
.kch .sicon{width:22px;height:22px}
.kch em{font-style:normal;font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--tx3);
  padding:2px 8px;border-radius:99px;background:var(--s2)}
.kcrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--rs);
  background:var(--s1);text-align:left;width:100%;transition:background .14s}
.kcrow:hover{background:var(--s2)}
.kcrow img{width:34px;height:34px;object-fit:contain;flex:none}
.kcrow .t{display:grid;gap:2px;min-width:0;flex:1}
.kcrow .nm{font-size:var(--f2);font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.kcrow .kc{font-family:var(--mono);font-size:var(--f4);font-weight:700;color:var(--acc)}
.kcrow .sub{display:flex;align-items:center;gap:7px;text-transform:none;letter-spacing:0;
  font-size:var(--f1);font-weight:600;color:var(--tx3)}
.kcdps{font-family:var(--mono);font-weight:700;color:var(--tx2)}
.kcsty{font-size:var(--f0);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.kcup{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:99px;
  background:var(--goodBg);flex:none}
.kcup img{width:18px;height:18px;object-fit:contain}
.kcup .pct{font-family:var(--mono);font-size:var(--f0);font-weight:700;color:var(--good)}
.chalgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px}
/* the three cards are bands of the same height in the same order, so the rewards and the
   buttons sit on one line across the page however much text a card happens to carry */
.chal{display:grid;gap:15px;padding:var(--pad);border-radius:var(--r);background:var(--s1);
  position:relative;overflow:hidden;align-content:start;
  grid-template-rows:subgrid;grid-row:span 8}
.chal .warnline{color:var(--warn);font-weight:700;margin:0;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.chal .waves{display:grid;gap:7px;align-content:start;min-width:0;margin:0}
/* one row that scrolls rather than a block that grows - the Inferno has twelve of these */
.chal .waverow{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding-bottom:4px;
  scrollbar-width:thin;margin:0}
.chal .wv{flex:0 0 74px}
.chal .wv span{display:block;font-size:var(--t-meta);line-height:1.25;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chal .mlbl .n{font-family:var(--mono);color:var(--tx3);margin-left:5px}
.chal>.note{margin:0;overflow:hidden}
.chal .art{position:absolute;right:-14px;top:-10px;width:150px;height:150px;opacity:.16;
  object-fit:contain;pointer-events:none}
.chal .hd{display:flex;align-items:center;gap:12px;position:relative}
.chal .hd img{width:46px;height:46px;object-fit:contain;flex:none}
.chal .hd h3{font-size:var(--f4);letter-spacing:-.02em}
.chal .hd .sub{font-size:var(--f0);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx4)}
.chal .kcbig{margin-left:auto;text-align:right}
.chal .kcbig .v{font-family:var(--mono);font-size:var(--f5);font-weight:700;color:var(--acc);
  display:block;line-height:1}
.chal .kcbig .l{font-size:var(--f0);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx4)}
.chal .why{font-size:var(--f1);line-height:1.65;color:var(--tx3);margin:0;position:relative}
.chal .best{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative}
.chal .reward{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:var(--rs);
  background:var(--slotDeep);position:relative}
.chal .reward img{width:26px;height:26px;object-fit:contain}
.chal .best{align-self:start}
.chal .reward .t{font-size:var(--f1);font-weight:700}
/* the card is already --s1; an --s1 button on it has nothing to separate it */
.chal .btn.alt{background:var(--s3)}
.chal .btn.alt:hover{background:var(--s4)}

.gainrow{display:grid;grid-template-columns:28px 1fr 108px 92px;gap:13px;align-items:center;
  padding:10px 14px;border-radius:var(--rs);background:var(--s1)}
.gainrow img{width:22px;height:22px;object-fit:contain}
.gainrow .nm{font-size:var(--f2);font-weight:700;text-transform:capitalize}
.gainrow .xp{font-family:var(--mono);font-weight:700;text-align:right;color:var(--good)}
.gainrow .lv{font-family:var(--mono);font-size:var(--f1);font-weight:700;text-align:right;
  color:var(--tx3)}
.gainrow .lv b{color:var(--acc)}
@media(max-width:620px){.gainrow{grid-template-columns:24px 1fr 86px;gap:10px}.gainrow .lv{display:none}}
.prow{cursor:pointer}
.prow:hover{background:var(--s2)}
.pdetail{padding:var(--pad);border-radius:var(--rs);background:var(--s1);display:grid;gap:16px}
.pdhead{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.pdhead img{width:40px;height:40px;object-fit:contain}
.pdhead h3{font-size:var(--f4);letter-spacing:-.02em}
.pdhead .now{margin-left:auto;font-family:var(--mono);font-size:var(--f5);font-weight:700}
.pdstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(104px,100%),1fr));gap:11px}
.pdstats div{display:grid;gap:3px}
.pdstats .v{font-family:var(--mono);font-size:var(--f3);font-weight:700}
.pdstats .l{font-size:var(--f0);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx4)}
.pdchart{width:100%;height:150px;display:block;overflow:visible}
.pdchart .fill{fill:color-mix(in srgb,var(--tx) 8%,transparent)}
.pdchart .line{fill:none;stroke:var(--acc);stroke-width:1.8}
/* one auto margin, or the price lands at an x that moves with the item's name */
.pdclose{margin-left:0}
.emptystate{display:grid;justify-items:center;gap:9px;text-align:center;padding:46px 26px;
  border-radius:var(--r);background:var(--s1)}
.emptystate .sicon{width:34px;height:34px;opacity:.5;margin-bottom:3px}
.emptystate b{font-size:var(--f4);letter-spacing:-.02em}
.emptystate span{font-size:var(--f2);line-height:1.65;color:var(--tx3);max-width:46ch}

/* the hero stat groups ran together into one long number soup */
.hero .statgrp,.roomhd .statgrp{display:inline-flex;align-items:center;gap:13px;padding:7px 13px;
  border-radius:99px;background:var(--slotDeep)}
#herometa{display:flex;flex-wrap:wrap;align-items:center}
.hero .por,.roomhd .por{width:168px;height:168px}
.hero .por img,.roomhd .por img{max-width:150px;max-height:150px}

/* every eyebrow gets a mark, so sections scan by shape. The declaration that used to
   sit here was dead - a second .eyebrow 158 lines below wins outright - but the
   ::before is a selector of its own and is the one doing the work. */
.eyebrow::before{content:"";width:4px;height:4px;border-radius:99px;background:var(--acc);
  flex:none}

/* tables respond to the pointer like everything else does */

/* one button height across the app */
.btn,.toggle,.tab,.mini{min-height:36px}
.mini{min-height:30px}
/* cash is one line under the bank's heading, at the height of the buttons beside it and on
   their ground - the deep slot colour it had inside a card all but vanishes on the page */
.cashline{margin-top:12px}
.field.cashline input{height:36px;padding-top:0;padding-bottom:0;background:var(--s1)}
/* potions and the slayer task beside the prayer book: a 36px pill group and a 36px toggle */
.fightctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fightctl .potrow{max-width:100%;overflow-x:auto}
.fightctl #ontask{background:var(--s1)}
.bc .bm{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.bc .bm .sicon{width:13px;height:13px}
.bc .bmtier{margin-left:4px;padding:1px 7px;border-radius:99px;background:var(--slotDeep);
  font-size:var(--f0);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tx4)}
.sk-def{background-image:var(--ic-def)}
/* a blue partyhat, cropped from RuneLite's sprite: the thing the game is famous for handing around */
.sk-share{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAC4ElEQVR4nO1VzW7TQBD+vJs0BcQBpCIICo2qKseql9564jk48Qq8Es/Ac/SKxCGVEIpaofITJ47dGaPZH3ttr5MgIU79JMfO7s58883M7gIPiCIp8X8dJuXFZVH2r9s/IOUNxidf9jY8n05b65Ly7CLfYZ+ULVIBYXz6tcfQO92O2VkfcVKOTz5Xc0o+JqffADDAFFHSJLy4zHE1v244lLHtmQDARTVnlJIMGELG5HQROG0SbjZxx4ubDNkGyDNgMlt3ghqfXEMPnqOVXomCTYrtu3YqzvwTS5tXuc6yXrVajaywNqkevDCkZNR+N9HaGnXRTXETk1namCfcS/gtUi7chK+rVSvpksejrVbIFze1AsIqyJjA9QtnVU0FA/lhZFC+rsoaTWe1ypB4MwJGI+zEZPbDkBGvTSbZlDBUSkKQQw9eVXWVRMfw66d9X75tp95mx6gy7wLEkprcqcyaSs2ATCiZFLXPbCwRYg3dSGkUplwb26AsKjMnLFBKtARjZSLTgzdb/dlAFMC/q5F+FAFhp3vXAC0BaQReugV+G3Gc3KwL4VwpbZ/GgUegQKlJ7z3LQApoif4xtCGUbikiDux/PXgdBFSfZnZM0pqBeQVQBqK0kRFXUxlYAvQEUE9BPLR7V41cE4TEQSDB9qobUAIQ0pXpFRIx0kwBFFAmd4v3Rq1ExJw6A6nx0uzfqimq5vD7zj4yL/1gutXYp66WKUBrF1BHKZxDUZuCtTgeQuHAOT50JkHd5DDpKPXdmpseIUPYPdVqUspxLw2F1NV0GJBLSv2JoIOUewVck8lakqxltkEj3d1SKo4kQlF40CLPoXAY1LS+maSSnkyUkbFbWkLuJS2Tu9sP1a1w9PIjoA7i5ELMBRR0nMx9S5AC6Yg2kth1FLtBjsafoLUEMQT0o7qObuPbfVgT3i7edXycT4+7pLEAPLZdZXH74+j41Xye9JLuE8guXM3nf+X/AfgX+APW1ds2Dj42hAAAAABJRU5ErkJggg==)}
@media(max-width:560px){[data-share] .v{display:none}}
.skprog{display:grid;gap:9px;margin-top:4px}
.skprog .pbar{display:block;height:7px;border-radius:99px;background:var(--slotDeep);
  overflow:hidden}
.skprog .pbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .3s ease}
.skprog .pnote{font-size:var(--f1);color:var(--tx3)}
.pill.good{background:var(--goodBg);color:var(--good)}
.pickbox{margin-top:14px;padding:var(--pad);border-radius:var(--r);background:var(--s1);
  display:grid;gap:13px}
#slotpick .mh{display:flex;align-items:center;gap:13px}
#slotpick .mh h3{font-size:var(--f3);text-transform:capitalize}
#slotpick .mh .mini{margin-left:auto}
#slotpick .mb{max-height:470px;overflow-y:auto;scrollbar-width:thin;display:grid;gap:5px;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
#slotpick .mb>.note{grid-column:1/-1}
/* the item in the slot tops the picker on a phone only; a mouse has the hover card */
#mcur{display:none}
.optrow .onm{display:none}
.pkact{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;margin-top:10px}
.pkact .pkd{min-width:0;font-size:var(--f2);color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkact .pkd b{font-family:var(--mono);font-weight:700}
.pkact .pkd b.pos{color:var(--good)} .pkact .pkd b.neg{color:var(--bad)}
.pkact .pkwear{flex:none}
/* the Stats button and the equipment stats card: the hover card on a computer, the sheet on a phone */
.wkacts{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;justify-self:start}
.stbtn{display:inline-flex;align-items:center;gap:8px}
.stbtn .sicon{width:16px;height:16px}
.sk-stats{background-image:var(--ic-ui_stats)} .sk-rstr{background-image:var(--ic-rstr)} .sk-mdmg{background-image:var(--ic-mdmg)}
.eqbox .th .sicon{width:28px;height:28px}
#statsheet .box.full.eqbox{width:auto;box-shadow:none}
#statsheet .stcards{display:grid;gap:12px}
#statsheet .stcards>.box>.tstats:first-child{margin-top:0}
.stitems{display:grid;gap:2px}
.stit{display:grid;grid-template-columns:32px minmax(0,1fr) repeat(3,48px);align-items:center;gap:8px;min-height:40px}
.stit img{width:32px;height:32px;object-fit:contain}
.stit .nm{display:grid;gap:1px;min-width:0}
.stit .nm b{font-size:var(--f1);font-weight:700;line-height:1.25;overflow-wrap:anywhere;color:var(--tx)}
.stit .nm i{font-style:normal;font-size:var(--f0);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx4)}
.stit>b{font-family:var(--mono);font-size:var(--f1);font-weight:700;text-align:right}
.stit.hd{min-height:22px}
.stit.hd .sicon{justify-self:end;width:16px;height:16px}
/* on a computer a panel pulled out from the right, the height of the window; on a phone the whole screen (below) */
#statsheet{position:fixed;top:0;right:0;bottom:0;z-index:320;width:min(460px,100vw);overflow-y:auto;overscroll-behavior:contain;
  padding:var(--pad);background:var(--bg);box-shadow:var(--sh3);animation:pullout .16s ease-out}
@keyframes pullout{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
#statsheet .sthead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
#statsheet .sthead h3{margin:0;font-size:var(--f3)}

@media(max-width:760px){

  .pk .pbar,.pk .pdd,.pk .pill{display:none}
  /* the picker as one full-screen sheet: the item in the slot, then every option in order, scrolling */
  #slotpick{position:fixed;inset:0;z-index:320;display:flex;background:var(--bg)}
  #slotpick .pickbox{flex:1;min-width:0;min-height:0;margin:0;border-radius:0;grid-template-rows:auto auto auto minmax(0,1fr);
    padding:calc(var(--pad) + env(safe-area-inset-top)) var(--pad) 0}
  #mcur{display:block}
  .mkrow{grid-template-columns:32px minmax(0,1fr) auto}
  .mkrow>.mkv:not(.mkp){display:none}
  .mkrow.mkinv{grid-template-columns:32px minmax(0,1fr) auto 60px 32px}
  .mkn i.mkmob{display:block}
  .mkn i.mkm1{color:var(--tx2)}
  .mkprow{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;padding:10px;text-align:left}
  .mkprow>span[data-l]::before{content:attr(data-l) " ";font-weight:500;color:var(--tx3)}
  .mkprow>span:empty{display:none}
  .mkprow>.mkpn,.mkprow.mkptot>span:first-child{grid-column:1/-1}
  .mkprow.mkphead{display:none}
  button.mkprow{background:var(--s2)}
  .mkfold{margin:0 0 8px;border-radius:12px;background:var(--s1)}
  .mkfold>summary{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-weight:700;cursor:pointer;list-style:none}
  .mkfold>summary::-webkit-details-marker{display:none}
  .mkfold>summary::after{content:"+";color:var(--tx3)}
  .mkfold[open]>summary::after{content:"\2212"}
  .mkfold>.mkctl{padding:0 14px 14px}
  .mkfold>.mktax{background:transparent;padding-top:0}
  .mkfold>.mktax>b{display:none}
  .mkn i.mkdesk,.mkp i{display:none}
  .mktax>b{flex:1 1 100%}
  .mktaxout{flex:1 1 100%}
  .mkchart{height:110px}
  .mkctl>.mkfld,.mktax>.mkfld{flex:1 1 140px}
  .mkfld input,.mkfld select{min-width:0;width:100%}
  .mkrow.mkinv>.mkv:not(:nth-child(5)){display:none}
  .mkrow.mkinv>.mkv:nth-child(5){display:grid}
  .mkrow.mkbank>.mkv:nth-child(3){display:grid}
  .mkrow.mkmove>.mkv{display:grid}
  .mkrow.mkhead{display:none}
  .lsum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .lstat{min-width:0;padding:12px 14px}
  #statsheet{position:fixed;inset:0;z-index:320;display:block;width:auto;box-shadow:none;animation:none;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);
    padding:calc(var(--pad) + env(safe-area-inset-top)) var(--pad) calc(16px + env(safe-area-inset-bottom))}
  #slotpick .mb{max-height:none;min-height:0;grid-template-columns:minmax(0,1fr);gap:4px;overscroll-behavior:contain;
    padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  #slotpick .optrow{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px;
    padding-right:6px}
  #slotpick .optrow .opt{position:static;display:grid;grid-template-columns:36px minmax(0,1fr) auto;place-items:center start;
    gap:12px;min-height:56px;padding:8px 10px}
  #slotpick .optrow .opt img{width:36px;height:36px}
  #slotpick .optrow .oe{width:36px;text-align:center}
  #slotpick .optrow .onm{display:block;min-width:0;max-width:100%;font-weight:700;font-size:var(--f2);line-height:1.25}
  #slotpick #mcur .box.full{width:auto;box-shadow:none}
  #slotpick .mb{padding:0 0 calc(16px + env(safe-area-inset-bottom))}
  #slotpick .mb{scrollbar-width:none}
  #slotpick .mb::-webkit-scrollbar{display:none}
  #slotpick .optrow .od{position:static;font-size:var(--f1)}
  #slotpick .optrow .opg{display:flex;margin-top:3px;font-family:var(--mono);font-size:var(--f1);font-weight:600;color:var(--tx3)}
  #slotpick .optrow:has(.opt.prev){background:var(--s3)}
  #slotpick .optrow .ownt{position:static;opacity:1}
}
.wkbtn{align-self:flex-start;justify-self:start}
.workbox{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;column-gap:8px;row-gap:18px;padding:14px;
  border-radius:var(--rs);background:var(--slotDeep);min-width:0}
/* the working: numbered steps, each with its answer, and under it every number that goes in with the running total.
   One grid for the whole box, shared by every line (subgrid), so the operations and the totals line up all the way down */
.wks{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:1px;min-width:0}
.wkh{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-bottom:5px;min-width:0}
.wkh .wkn{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:99px;background:var(--s3);
  font-family:var(--mono);font-size:var(--f0);font-weight:700;color:var(--tx2)}
.wkh h5{flex:1 1 auto;min-width:0;margin:0;font-size:var(--f1);font-weight:700;color:var(--tx)}
.wkh b{font-family:var(--mono);font-size:var(--t-num-s);font-weight:700;color:var(--tx);white-space:nowrap}
.wkl{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;min-height:28px;padding:2px 0;font-size:var(--f1)}
.wki{width:22px;height:22px;display:grid;place-items:center}
.wki img{max-width:22px;max-height:22px;object-fit:contain}
.wki .sicon{width:17px;height:17px}
.wki .pi{width:20px;height:20px;background-size:contain;background-repeat:no-repeat;background-position:center}
.wkt{color:var(--tx3);line-height:1.35;overflow-wrap:anywhere}
.wko{font-family:var(--mono);color:var(--tx4);text-align:right;white-space:nowrap}
.wkv{font-family:var(--mono);font-weight:700;color:var(--tx2);text-align:right;white-space:nowrap}
.wkl.wkf .wkt{font-family:var(--mono);font-size:var(--f0)}
.wkchips{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:4px;padding:3px 0 5px}
.wkchips span{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 9px 0 4px;border-radius:99px;background:var(--s2);
  font-family:var(--mono);font-size:var(--f0);font-weight:700;color:var(--tx2)}
.wkchips img{width:20px;height:20px;object-fit:contain}
.wkbar{grid-column:2/-1;height:6px;margin:6px 0 2px;border-radius:99px;background:var(--s3);overflow:hidden}
.wkbar i{display:block;height:100%;border-radius:99px;background:var(--tx2)}
.workbox .wkfoot{grid-column:1/-1;margin:0;font-size:var(--f0);line-height:1.55;color:var(--tx4)}
.wkrow{display:flex;align-items:baseline;gap:9px;font-size:var(--f1);padding:4px 0}
.wkrow span{color:var(--tx3);min-width:106px}
.wkrow b{font-family:var(--mono);font-weight:700}
.wkrow i{font-style:normal;color:var(--tx4);font-size:var(--f0);margin-left:auto;text-align:right}
.wkfx{display:flex;gap:5px;flex-wrap:wrap;padding:7px 0}
.workbox .note{margin:7px 0 0;font-size:var(--f0);line-height:1.6}
.vtbl tbody tr{cursor:pointer;transition:background .12s}
.vtbl tbody tr:hover td{background:var(--s2)}
.vtbl tbody tr:hover td:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}
.vtbl tbody tr:hover td:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}
/* On a phone the value tables were 687px inside a 347px scroller, so the only columns you
   could see were the two that matter least. Drop to what a decision actually needs: the item,
   what it costs, what it buys, and the button to star it.
   uptbl  : rank, item, style, cost, dps now, dps after, gain, impact, cost/1%
   valtbl : rank, item, slot, cost, time saved, impact, cost/1%, star */
@media(max-width:620px){
  .tw{overflow-x:visible}
  #uptbl th:nth-child(1),#uptbl td:nth-child(1),
  #uptbl th:nth-child(3),#uptbl td:nth-child(3),
  #uptbl th:nth-child(5),#uptbl td:nth-child(5),
  #uptbl th:nth-child(8),#uptbl td:nth-child(8),
  #uptbl th:nth-child(9),#uptbl td:nth-child(9),
  #valtbl th:nth-child(1),#valtbl td:nth-child(1),
  #valtbl th:nth-child(3),#valtbl td:nth-child(3),
  #valtbl th:nth-child(6),#valtbl td:nth-child(6),
  #valtbl th:nth-child(7),#valtbl td:nth-child(7){display:none}
  .vtbl{width:100%;table-layout:auto}
  .vtbl th,.vtbl td{padding-left:9px;padding-right:9px}
}
.sharebox{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:360;
  display:grid;gap:10px;padding:15px 17px;border-radius:var(--r);background:var(--s2);
  box-shadow:var(--sh3);width:min(560px,calc(100vw - 24px))}
.sharebox .srch{width:100%;min-width:0;background:var(--slotDeep);font-family:var(--mono);
  font-size:var(--t-input)}
.sharebox .row{display:flex;gap:9px;align-items:center}
.sharebox .row .mini{margin-left:auto}
/* with nothing to solve, the trade-off and kit sections are empty scaffolding - collapse them
   so the explanation is the first thing on the page rather than the last */
/* on the planner itself, not on the raids page - the same planner also sits on the challenges
   page, and a class on the page it is not currently in does nothing */
#planner.nokit .slider,
#planner.nokit #kitstats,
#planner.nokit .kitonly{display:none}
#planner.nokit #curve,#planner.nokit #kitstyles{min-height:0}
.mstat{display:inline-flex;align-items:center;gap:5px}
#busy{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:350;
  display:flex;align-items:center;gap:11px;padding:12px 18px;border-radius:99px;
  background:var(--s2);box-shadow:var(--sh3);font-size:var(--f2);font-weight:600;
  color:var(--tx2);pointer-events:none}
#busy .spin{width:15px;height:15px;border-radius:50%;flex:none;
  background:conic-gradient(from 0deg,transparent 0 25%,var(--acc) 100%);
  -webkit-mask:radial-gradient(circle 5px at 50% 50%,transparent 99%,#000 100%);
          mask:radial-gradient(circle 5px at 50% 50%,transparent 99%,#000 100%);
  animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#busy .spin,#statsheet{animation:none}}
.mstat .k{font-size:var(--f0);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tx4)}
.mstat .v{font-family:var(--mono);font-size:var(--f2);font-weight:700}
.sicon{width:17px;height:17px;flex:none;display:inline-block;background-size:contain;
  background-repeat:no-repeat;background-position:center;image-rendering:-webkit-optimize-contrast}
/* every icon is a CSS variable set once at boot, so re-rendered markup never needs repainting */
.sk-att{background-image:var(--ic-att)}   .sk-str{background-image:var(--ic-str)}
.sk-rng{background-image:var(--ic-rng)}   .sk-mag{background-image:var(--ic-mage)}
.sk-pray{background-image:var(--ic-prayer)} .sk-slay{background-image:var(--ic-slayer)}
.sk-hp{background-image:var(--ic-hp)}   .sk-farm{background-image:var(--ic-farming)}     .sk-hit{background-image:var(--ic-hitsplat)}
.sk-stab{background-image:var(--ic-stab)} .sk-slash{background-image:var(--ic-slash)}
.sk-crush{background-image:var(--ic-crush)} .sk-acc{background-image:var(--ic-accuracy)}
#bagicon{background-image:var(--ic-bag)}
#geicon{background-image:var(--ic-ge)}
#logomk{background-image:var(--ic-logo)}
.coin{background-image:var(--ic-coin)}
/* price + coin, used everywhere a gp figure appears */
.gpv{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.gpv::before{content:"";width:14px;height:14px;flex:none;background-image:var(--ic-coin);
  background-size:contain;background-repeat:no-repeat;background-position:center}
td .gpv{justify-content:flex-end}
.kv b .sicon{vertical-align:-3px;margin-right:5px}
.htitle{width:22px;height:22px;vertical-align:-3px;margin-right:9px}
.potrow{display:inline-flex;gap:5px;padding:4px;border-radius:99px;background:var(--s1)}
.potb{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:99px;
  font-size:var(--f1);font-weight:700;color:var(--tx3);white-space:nowrap}
.potb:hover{color:var(--tx)}
.potb.on{background:var(--s3);color:var(--tx);box-shadow:var(--sh1)}
.potb .pi{width:19px;height:19px;background-size:contain;background-repeat:no-repeat;
  background-position:center;flex:none}
.prayrow .rl{display:inline-flex;align-items:center;gap:7px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.badge{display:inline-flex;align-items:center;flex:0 0 auto;width:fit-content;
  font-size:var(--f1);font-weight:600;padding:4px 10px;border-radius:99px;background:var(--s3);
  color:var(--tx2);white-space:nowrap}
.badge.wk{background:color-mix(in srgb,var(--tx) 14%,var(--s2));color:var(--tx)}
/* the kill and hour badges flow with the rest */
.herogp{display:inline-flex;flex-wrap:nowrap;gap:6px}
.herogp:empty{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 20px;border-radius:11px;background:var(--ctaBg);color:var(--ctaTx);font-weight:700;
  font-size:var(--f2);white-space:nowrap;box-shadow:none;text-decoration:none}
.btn:hover{background:var(--ctaHover)}
.btn.alt{background:var(--s1);color:var(--tx);box-shadow:none}
.btn[hidden]{display:none!important}
/* one primary and two secondaries, all the same size - they are the same kind of control */
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn.alt:hover{background:var(--s3)}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:16px;justify-items:start}
  .hero .por,.roomhd .por{width:112px;height:112px}
  .hero .por img,.roomhd .por img{max-width:102px;max-height:102px}}

.sec{margin-top:36px}
.sec-h{display:flex;align-items:flex-start;gap:18px;margin-bottom:14px;flex-wrap:wrap}
.sec-h .lead{flex:1;min-width:250px}
.sec-h>:not(.lead){flex:none;margin-top:2px}
/* 66 characters is the convention for a page of prose. This is two sentences under a heading
   with the whole section beneath them, in a column twice that wide, and holding it to a third of
   the room reads as timid rather than careful. */
.sec-h .dek{margin-top:6px;font-size:var(--f2);color:var(--tx2);max-width:104ch;font-weight:500}
/* 66 characters is the right limit for a paragraph and the wrong one for a single sentence */
/* and the ones already marked wide simply fill the column */
.sec-h .dek.wide{max-width:none}
.eyebrow{display:flex;align-items:center;gap:7px;font-size:var(--f0);font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx4);margin-bottom:6px}
.card{background:var(--s1);border-radius:var(--r);box-shadow:var(--sh2)}
@media(max-width:700px){.sec-h>:not(.lead){width:100%;margin-top:4px}}

.field{display:flex;align-items:center;gap:7px}
.field input{width:122px;padding:8px 11px;border-radius:9px;background:var(--slotDeep);font-family:var(--mono);
  font-weight:700;font-size:var(--t-input)}
.cashfield{gap:6px}
.cashfield input{width:96px;text-align:right;padding-right:6px}
.cashfield .suffix{font-family:var(--mono);font-weight:700;font-size:var(--f2);color:var(--tx2);margin-left:-2px}
.coin{width:22px;height:22px;flex:none;display:inline-block;background-size:contain;
  background-repeat:no-repeat;background-position:center}
/* three icons at three sizes in one row, and the tallest stretched the row by seven pixels.
   The phone block already unified them; the desktop one never did. */
.stat-chip .coin,.stat-chip .bskt,.stat-chip .sicon,.stat-chip.ic .sicon{width:19px;height:19px}
.toggle{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:99px;
  background:var(--slotDeep);font-size:var(--f1);font-weight:700;color:var(--tx3);white-space:nowrap}
.toggle:hover{background:var(--s3);color:var(--tx)}
.toggle.on{background:color-mix(in srgb,var(--tx) 14%,var(--s2));color:var(--tx)}
.toggle .box{width:15px;height:15px;border-radius:5px;display:grid;place-items:center;font-size:var(--t-label);
  background:color-mix(in srgb,var(--tx) 30%,var(--s2));color:transparent}
.toggle.on .box{background:var(--tx);color:var(--s1)}

.styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* a card is a share of the row, not a floor under it */
.styles>*{min-width:0}
@media(max-width:1120px){.styles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.styles{grid-template-columns:minmax(0,1fr)}}
.styles>.sty,.roomsets>.sty,.mysets>.sty{padding:var(--pad);display:flex;flex-direction:column;gap:14px;position:relative;
  transition:box-shadow .14s}
#styles>.sty{cursor:pointer}
#styles>.sty:hover{background:var(--s2)}
#styles>.sty.active{background:var(--s2)}
#styles>.sty.active .sty-h h3{color:var(--accTx)}
.styletag{font-size:var(--f0);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx4);margin-left:auto}
#styles>.sty.active .styletag{color:var(--accTx)}
.sty-h{display:flex;align-items:center;gap:10px;min-height:26px}
.sty-h .sreset{margin-left:auto}
/* the style's own skill icon in place of its colour dot: Strength, Ranged, Magic */
.sty-h .dot{width:20px;height:20px;border-radius:0;background-color:transparent;
  background-size:contain;background-repeat:no-repeat;background-position:center}
.sty-m .sty-h .dot{background-image:var(--ic-str)}
.sty-r .sty-h .dot{background-image:var(--ic-rng)}
.sty-g .sty-h .dot{background-image:var(--ic-mage)}
.sty-m{--c:var(--stM)}.sty-r{--c:var(--stR)}.sty-g{--c:var(--stG)}
.eq{display:grid;grid-template-columns:repeat(3,48px);gap:6px;justify-content:center;padding:12px;
  background:var(--slotDeep);border-radius:var(--rs)}
.slot{width:48px;height:48px;border-radius:8px;background:var(--slot);display:grid;place-items:center;
  position:relative;transition:transform .12s,box-shadow .12s}
/* the icon lifts, not the tile - a tile that moves out from under the pointer ends its own
   hover, comes back, and flickers there until you move away */
.slot:hover{background:var(--s3)}
.slot img{transition:transform .12s}
.slot:hover img{transform:translateY(-2px)}
.eq.ro .slot{cursor:default}
.eq.ro .slot:hover img{transform:none}
.eq.ro .slot:hover{box-shadow:none}
.eq.ro .slot.combo:hover{background:color-mix(in srgb,var(--good) 34%,var(--slotDeep))}
.eq.ro .slot.swapped:hover{background:color-mix(in srgb,var(--warn) 32%,var(--slotDeep))}
.slot img{width:34px;height:34px;object-fit:contain}
/* both hands on the weapon: not a slot you can fill, and not one you can click */
.slot.blocked{cursor:default;background:var(--slotDeep)}
.slot.blocked:hover img{transform:none}
.slot.blocked .x{width:13px;height:1.5px;background:var(--tx4);transform:rotate(-45deg)}
.slot.empty::after{content:attr(data-s);font-size:var(--f0);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--slotTx)}
.slot.canup::before{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:99px;
  background:var(--acc);box-shadow:0 0 0 2px var(--slotDeep)}
.slot.hypo{background:color-mix(in srgb,var(--info) 22%,var(--slotDeep))}
.slot[role=button]{cursor:pointer}
/* a slot's two steps, at its edges, while it is hovered or focused */
/* in the gap beside the square, not over its picture; live only while their own square is */
.eq:not(.ro){column-gap:28px}
/* a bar the height of the square filling its side of the gap, dark against the panel, there only while its
   own square is hovered or focused - one square's arrow never sits over its neighbour's */
.slstep{position:absolute;top:0;bottom:0;width:24px;display:grid;place-items:center;padding:0;z-index:2;
  font-size:var(--t-title);font-weight:700;line-height:1;color:var(--tx3);opacity:0;visibility:hidden;
  border-radius:6px;background:color-mix(in srgb,var(--slot) 45%,var(--slotDeep))}
.slstep.dn{left:-25px}
.slstep.up{right:-25px}
.slot:hover .slstep,.slot:focus-within .slstep,.slot.hot .slstep{opacity:1;visibility:visible;transition:opacity .1s}
.slstep:hover{background:var(--slot);color:var(--tx)}
.slstep.end{color:var(--tx4)}
/* nothing past it: not there at all, hovered or not, on a touch screen or not */
.eq .slot .slstep.end{visibility:hidden}
/* a touch screen can't hover, so there the arrows are always out, and the grid leaves room for the outer two */
@media(hover:none){
  .slstep{opacity:1;visibility:visible;width:23px}
  .slstep.dn{left:-24px}
  .slstep.up{right:-24px}
  /* two arrows to a gap: 23 + 23, and a sliver between them */
  .eq:not(.ro){column-gap:50px;padding-left:32px;padding-right:32px}
}
/* worn in more than one style, or swapped in: a bar along the bottom, so a square can also be not owned or locked */
.slot.combo{box-shadow:inset 0 -3px 0 var(--good)}
.slot.swapped{box-shadow:inset 0 -3px 0 var(--warn)}
.lgd i.sw-combo{box-shadow:inset 0 -3px 0 var(--good)}
.lgd i.sw-swap{box-shadow:inset 0 -3px 0 var(--warn)}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px}
.lgd{display:inline-flex;align-items:center;gap:7px;font-size:var(--f1);font-weight:600;color:var(--tx3)}
/* the key's swatches, and the same swatch again at the front of the row that clears that colour */
.lgd i,.lockbar>i{width:16px;height:16px;border-radius:4px;background:var(--slot);position:relative;flex:none}
.lgd i.sw-up::after{content:"";position:absolute;top:1px;right:1px;width:6px;height:6px;
  border-radius:99px;background:var(--acc)}
.lgd i.sw-hypo,.lockbar>i.sw-hypo{background:color-mix(in srgb,var(--info) 45%,var(--slotDeep))}
.lgd i.sw-man,.lockbar>i.sw-man{background:color-mix(in srgb,var(--tx) 30%,var(--slotDeep))}

.slot.manual{background:color-mix(in srgb,var(--tx) 18%,var(--slotDeep))}
.slot.manual::after{content:"";position:absolute;bottom:3px;left:3px;width:7px;height:7px;
  border-radius:99px;background:var(--acc);box-shadow:0 0 0 2px var(--slotDeep)}
/* a pick you don't own is still not owned: the blue stays, the locked dot says it's yours */
.slot.manual.hypo{background:color-mix(in srgb,var(--info) 22%,var(--slotDeep))}
/* what you are trying but do not own, and the two ways out of it */
/* eight characters, once - the only thing anybody is asked to type */
.linkrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0;padding:12px 15px;
  border-radius:var(--r);background:var(--s1)}
/* No max-width: 62ch came to 493px of text in a row well over twice that wide, which reads as an
   arbitrary edge rather than a measure. This is a status line in a full-width row, not prose. */
/* Two jobs in one row: the sentence takes what is left, the buttons keep their size. Without
   this the text claimed 1119px of a 1149px row and both buttons wrapped underneath it. */
.linkrow .lk{font-size:var(--f1);color:var(--tx3);flex:1 1 320px;min-width:0;line-height:1.5}
.linkrow>.toggle{flex:none;align-self:center}
.linkrow .lk b{color:var(--tx2)}
.linkrow .lk.ok b{color:var(--good)}
.linkrow .lk .sicon{vertical-align:-3px;margin-right:5px;opacity:.8}
/* the same icon on the button that opens the row */
#linkbtn .sicon{width:15px;height:15px;vertical-align:-3px;margin-right:6px;opacity:.85}
.linkrow .lkin{display:flex;gap:8px;align-items:center}
.linkrow .srch{width:150px;background:var(--slotDeep);font-family:var(--mono);
  letter-spacing:.08em;text-transform:uppercase}
.linkrow .lknote{font-size:var(--f0);color:var(--acc);font-family:var(--mono)}
/* Both RuneLite blocks: icon, title and pill on one line, then each sentence on its own line starting
   under the title rather than under the icon - 20px of icon and 8px of gap. */
.linkrow .lk{display:grid;gap:2px}
.rlh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.linkrow .lk .rlh>.sicon,.wsync .rlh>.sicon{width:20px;height:20px;flex:none;margin:0;vertical-align:0;opacity:.85}
.rlh .pendtag,.wsync .rlh .pendtag{margin:0}
.rll{display:block;padding-left:28px}
.wsync .wst{gap:2px}
.trybar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0;padding:12px 15px;
  border-radius:var(--r);background:color-mix(in srgb,var(--info) 14%,var(--s1))}
.trybar .ti{display:flex;gap:6px;flex:none}
.trybar .ti img{width:28px;height:28px;object-fit:contain}
.trybar .tt{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:0}
.trybar .tt b{font-size:var(--f1)}
.trybar .tt span{font-size:var(--f0);color:var(--tx3);font-family:var(--mono)}
/* a slot wearing something you are only trying */
.slot.borrowed{background:color-mix(in srgb,var(--info) 34%,var(--slotDeep))}
/* The way out of a coloured square, drawn by slotBar() for both pages that draw the style card:
   one row for each colour that has one, in the legend's order. The holder spaces the rows and
   hides itself when there are none; each row is tinted the colour of the squares it clears. */
.slotbar{display:grid;gap:6px;margin-bottom:12px}
.slotbar[hidden]{display:none!important}
.lockbar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--rs);
  background:var(--sel);color:var(--accTx);
  font-size:var(--f2);font-weight:600}
.lockbar.sugbar{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.lockbar>span{min-width:0}
.lockbar button{margin-left:auto;flex:none}
.eq .sp{width:48px;height:48px}
.dpsblk{display:flex;flex-direction:column;gap:11px}
.dpsrow{display:flex;align-items:baseline;gap:9px}
.dpsrow .v{font-family:var(--mono);font-size:var(--f7);font-weight:700;letter-spacing:-.05em;line-height:.95;
  color:var(--accTx)}
.dpsrow .u{font-size:var(--f0);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}
.dpsrow .ttk{margin-left:auto;font-size:var(--f1);font-weight:600;color:var(--tx2);font-family:var(--mono)}
.dpsrow .ttk .sicon{vertical-align:-3px}
.bar{height:6px;border-radius:99px;background:var(--s3);overflow:hidden}
.bar i{display:block;height:100%;background:var(--c);border-radius:99px;transition:width .35s}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:7px}
/* a long weapon name was pushing its cell past the card edge in the narrow raid
   columns, so every cell is allowed to shrink and its value is clipped, not the card */
.kv div{min-width:0}
.kv b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 11px;
  background:var(--slotDeep);border-radius:8px}
.kv span{font-size:var(--f0);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.kv b{font-family:var(--mono);font-size:var(--f2);font-weight:700}
.kv span{white-space:nowrap}
.note{font-size:var(--f1);color:var(--tx2);line-height:1.5;font-weight:500}
.note b{color:var(--tx);font-weight:700}
.mini{font-size:var(--f0);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);
  padding:6px 11px;border-radius:99px;background:var(--slotDeep)}
/* four places use .mini as a plain label, and a label that lights up reads as a button */
.mini:is(button):hover{background:var(--s3);color:var(--tx)}
.mini[hidden]{display:none!important}
.badge.warnb{background:color-mix(in srgb,var(--tx) 14%,var(--s2));color:var(--tx)}
.waves{margin-top:12px}
.waverow{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.wv{display:flex;flex-direction:column;align-items:center;gap:4px;width:74px;padding:8px 5px;
  border-radius:10px;background:var(--sunk);text-align:center}
.wv:hover{background:var(--s2)}
.wv img{width:30px;height:30px;object-fit:contain}
.wv span{font-size:var(--f0);font-weight:600;color:var(--tx3);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;width:100%}
.cstyles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%}
.cst{display:grid;gap:1px;padding:9px 10px;border-radius:10px;background:var(--sunk);min-width:0}
.cst .cl{font-size:var(--f0);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--sc,var(--tx4))}
.cst .cv{font-family:var(--mono);font-size:var(--f3);font-weight:700;line-height:1.15}
.cst .cw{font-size:var(--f0);color:var(--tx4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cst.off{opacity:.45}
.cst.off .cv{color:var(--tx4)}
/* the pick, given the room the rest of the app gives its headline answer */
.qhero{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:22px;margin-top:20px;
  padding:20px;border-radius:var(--r);background:var(--s1);align-items:center}
/* the id selector above outranks a bare .qhero however narrow the screen gets, so the
   stacking rule has to name it too or the home page never stacks */
@media(max-width:800px){.qhero,#homenext .qhero,.cheroes .qhero{
  grid-template-columns:minmax(0,1fr);gap:16px}}
.qhero-art{display:flex;align-items:flex-end;justify-content:center;gap:12px;padding:16px;
  border-radius:var(--rs);background:var(--slotDeep);min-height:176px;position:relative;
  overflow:hidden;flex-wrap:wrap}
.qhero-art img{height:140px;max-width:118px;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.qhero-art img.qgi{height:84px;max-width:84px}
.qhero-t h3{font-size:var(--f5);letter-spacing:-.02em;margin:3px 0 7px}
.qhero-t .qu{font-size:var(--f2);color:var(--tx2);margin:0 0 6px}
/* the action at the bottom of a hero was sitting on the sentence above it */
.qhero-t>.btn,.qhero-t>.toggle{margin-top:14px}
.qhero-t .rwlist+.note,.qhero-t .qtl+.note{margin-top:10px}
/* three heroes put their action under a paragraph and got three different gaps */
.qhero-t .note+:is(.btn,.irow,.hact){margin-top:15px}
.qtabs{margin-top:22px}
/* The quest page's four lists, as cards in the diary tier cards' shape. Four across, two from 768px
   down - .ctiers alone would go three-and-one between 769 and 900 - and every row as tall as the
   tallest, so a line that wraps on a phone does not leave one pair of cards shorter than the other.
   The 12px gap is the quest grid's, so where both are four or two across the cards sit exactly over
   the quest cards below; the 15px side padding is every quest card's and section note's, so the
   words in all three start on one line. */
.ctiers.qtcards{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;
  margin-top:22px}
.qtcards .ct{padding:14px 15px 15px;gap:6px;align-content:start}
.qtcards .ct .qti{width:28px;height:28px;margin-bottom:2px}
.qtcards .ct .tp{font-size:var(--f1);color:var(--tx3);line-height:1.4}
/* picked is charcoal, as a picked tier card is on the diary page - and the skill cards under the
   Experience card with it, or the page would pick one list in charcoal and the next in gold */
#view-quest .qtcards .ct.on{background:var(--s3)}
#view-quest .qtcards .ct.on .tv{color:var(--tx)}
/* the list you are in is charcoal; the skill you pick under it keeps the gold pick, so the two read differently */
.qtcards .ct .tn{font-size:var(--t-label);letter-spacing:.08em;color:var(--tx3)}
.qtcards .ct.on .tn{color:var(--tx)}
.qtcards .ct .qti,.qsec>h3.hic img{image-rendering:pixelated}
@media(max-width:768px){.ctiers.qtcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the quest icon with a green tick on it, for done */
.qdone{position:relative;display:inline-grid;place-items:center;flex:none}
.qdone>img{width:100%;height:100%;object-fit:contain}
.qdone>i{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;
  display:grid;place-items:center;background:var(--good);color:var(--s1);font-style:normal;
  font-size:var(--t-label);font-weight:800;line-height:1}
/* a section heading with its icon, centred on the heading's line */
.qsec>h3.hic{display:flex;align-items:center;gap:10px}
.qsec>h3.hic .qn{margin-left:0}
.qsec>h3 .qsi{width:26px;height:26px;object-fit:contain;flex:none}
.qn{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:99px;
  background:color-mix(in srgb,var(--tx) 10%,transparent);font-family:var(--mono);font-size:var(--f0)}
.qnote{margin:0}
.qfilt{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:14px 0 0}
.qfilt .srch{width:auto;min-width:200px;max-width:320px;margin-left:auto;
  background:var(--slotDeep);box-shadow:none;font-size:var(--t-input)}
.qfilt .toggle{margin-left:0}
/* The note under the cards carried .qnote's 12px top margin into a row centred on the search box,
   so its centre sat 6px below the search and the toggle. Without it, and as tall as the search box,
   the three share one centre line. Once the row cannot fit, the note takes its own line and the
   search fills the one under it beside the toggle, instead of hanging off the right on a line of
   its own with the toggle alone on a third. */
.qfilt>.qnote{margin:0;align-self:stretch;display:flex;align-items:center}
@media(max-width:700px){
  .qfilt>.qnote{flex:1 1 100%}
  .qfilt .srch{flex:1 1 0;min-width:0;max-width:none;margin-left:0}
}
/* what you would actually do there, which is the currency every other page here uses */
.qtl{display:grid;gap:5px;margin-top:2px;align-content:start}
.qtrow{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:9px;
  background:var(--slotDeep);width:100%;text-align:left}
.qtrow:hover{background:var(--s2)}
.qtrow img{width:26px;height:26px;object-fit:contain;flex:none}
.qtrow .tn{font-size:var(--f1);font-weight:700;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.qtrow .td{font-family:var(--mono);font-size:var(--f1);font-weight:700;flex:none}
.qtrow .tt{font-family:var(--mono);font-size:var(--f0);color:var(--tx4);flex:none;
  display:inline-flex;align-items:center;gap:4px}
.qtrow .tn0{font-size:var(--f0);color:var(--tx4);flex:none}
.qr i{font-style:normal;font-family:var(--mono);color:var(--tx4);margin-left:3px}
/* two heroes across, exactly as the home page does it. minmax(min(430px,100%)) is a floor and
   not a preference: auto-fit drops empty tracks but never shrinks the minimum, so a bare 430px
   would be a 430px track inside a 362px phone. */
#questhero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
  gap:12px;margin-top:12px}
#questhero .qhero{margin-top:0;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;align-content:start}
#questhero .qhero-art{min-height:0;flex-wrap:nowrap;align-items:flex-end;padding:8px 4px 0;background:none}
#questhero .qhero-art img{height:120px;max-width:120px}
/* the band is 210px wide at most, so three 84px items wrapped into a ragged second row and made
   the hero 308px tall. Four at 62px is two clean rows inside the 178px of usable width. */
#questhero .qhero-art{align-content:center}
#questhero .qhero-art img.qgi{height:72px;max-width:72px}
#questhero .qhero-art img.sk{height:56px;max-width:56px}
/* The id outranks a bare .qhero however narrow the screen gets, so the stacking rule has to name
   it too - the trap #homenext documents. It also has to come after the rule above, which names it
   just as hard and sets the two columns back, which is how the first version of this rule came to
   sit thirty lines higher up doing nothing at all. */
@media(max-width:800px){#questhero .qhero{grid-template-columns:minmax(0,1fr);gap:16px}}
/* the list you decided on, lifted off the page by one background step rather than by a border */
.qsec.qtodo{margin-top:18px;padding:17px 18px 20px;border-radius:var(--r);background:var(--s1)}
.qsec.qtodo .qc{background:var(--s2)}
.qsec.qtodo .qc.todo{background:var(--s3)}
.qsec.qtodo .wxp{margin-top:9px}
/* "you are four Agility short, and these are the quests that award Agility" */
/* The skill is what this card is about, so it is drawn at the size of a subject rather than at
   the size of a bullet. It spans the title and the number because both are about it, which also
   leaves one left edge down the card instead of two. */
.qgap{margin-top:18px;grid-template-columns:46px minmax(0,1fr);column-gap:15px;align-items:center}
.qgap>img.sk{grid-column:1;grid-row:1/3;width:46px;height:46px;object-fit:contain}
.qgap>.rhead,.qgap>.rbig{grid-column:2}
.qgap>.dlist,.qgap>.rnote,.qgap>.pempty{grid-column:1/-1}
.qgap .rhead h3{font-size:var(--f2);letter-spacing:0;text-transform:none;color:var(--tx)}
.qgap .dlist{margin-top:2px}
/* a row here is a fact with two buttons on it rather than a thing to click, so it does not
   pretend to be one - the buttons are the controls */
.qgrow{cursor:default;background:var(--s2)}
.qgrow:hover{background:var(--s2)}
.qgrow .tick{background:transparent}
.qgrow .tick img{width:20px;height:20px;object-fit:contain}
.qgrow .tt{display:flex;align-items:center;gap:9px;flex-wrap:wrap;-webkit-line-clamp:none}
.qgrow .tt b{font-size:var(--f2)}
.qgrow .tq{align-items:center;gap:7px}
.qgrow .toggle{height:28px;padding:0 11px;font-size:var(--f0)}
.qgrow .toggle .box{width:14px;height:14px}
/* .qr is title-cased because it is usually a label - two words and a number. A pill carrying a
   sentence is not a label, and "Nothing Stands In The Way" reads as a mistake. */
.qr.plain{text-transform:none}
.qr.done{color:var(--good)}
/* "xp and rewards so small i can barely read it". Every one of these was --f0, 10px: the
   smallest step on the scale, which is there for a label sitting above something and not for the
   number a row exists to carry. The two chips at the end of a shortfall row - what the quest
   awards and the level it takes you to - are the answer the card was built to give, so they read
   at the size of an answer; the reward text, the value at the end of each reward row and every
   requirement pill come up a step with them - a pill wearing a 15px icon beside 10px type reads
   as an icon with a footnote. Scoped under the id because the same classes draw the home page,
   where they summarise something you can open rather than being the thing itself. */
#view-quest .qgap .rbig .l,#view-quest .qgap .rnote{font-size:var(--f2)}
#view-quest .qgrow .qr,#view-quest .qreq .qr{font-size:var(--f1)}
#view-quest .qgrow .tq .qr{font-size:var(--f2);padding:5px 11px}
#view-quest .xpchip{font-size:var(--f2);padding:5px 11px 5px 6px}
#view-quest .xpchip img{width:18px;height:18px}
#view-quest .wrow .t2{font-size:var(--f2)}
#view-quest .wrow .s{font-size:var(--f1)}
#view-quest .qtmore{font-size:var(--f1)}
.qskills{margin-top:14px}
.qskills .ct{padding:11px 15px 12px}
/* the same gap and inset as the tab cards above, so their edges line up */
.qskills{gap:12px}
/* the state of the whole page, said once at the top of it rather than in place of it */
.qnote{margin-top:12px;padding:12px 15px;border-radius:var(--rs);background:var(--s1);
  font-size:var(--f1);color:var(--tx3);line-height:1.6;font-weight:500}
.qnote b{color:var(--tx2);font-weight:650}
.qnote .lnk{font-size:inherit;font-weight:650;color:var(--acc);text-decoration:underline;
  text-underline-offset:2px}
.qnote .lnk:hover{color:var(--tx)}
.qsec{margin-top:26px}
/* the note above a list and the total under it, a row's gap away from the rows rather than touching them */
.qsec>.qnote+.dlist{margin-top:8px}
.qsec>.dlist+.rnote{margin-top:12px}
.qsec>h3{font-size:var(--f4);letter-spacing:-.02em}
.qsec .qn{display:inline-block;margin-left:7px;padding:1px 8px;border-radius:99px;
  background:var(--slotDeep);color:var(--tx3);font-family:var(--mono)}
/* Seven bands on a subgrid, which is the mechanism the home page's three cards already use:
   cards sharing a visual row share their row heights, so every title, every art band and every
   button lands on one baseline across that row without a single number being measured by eye,
   and separate rows are free to differ. What this replaces was a fixed 408px box with
   hand-placed 32px and 36px tracks that clipped its own contents to stay aligned - it bought
   the alignment with the information people came to the page for. */
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  grid-template-rows:repeat(7,auto);grid-auto-rows:auto;column-gap:12px;row-gap:0;margin-top:12px}
/* The space between one row of cards and the next is a margin rather than the grid's row-gap,
   and that is not a preference. A subgrid whose own row-gap is zero still gets the parent's
   row-gap folded into any band that has no content, so every card with no reward items carried
   a 12px hole where its gear row should have collapsed to nothing. Measured: with the gap on,
   an empty band is 12px; as a margin it is 0 and every band still lands on one baseline. */
.qc{grid-row:span 7;display:grid;grid-template-rows:subgrid;row-gap:0;margin-bottom:12px;
  border-radius:var(--r);background:var(--s1);overflow:hidden}
/* the art band runs edge to edge, so every other band carries its own side padding */
.qc>:not(.qart){padding-left:15px;padding-right:15px}
.qc>.qh{padding-top:13px}
.qc>.qu{padding-top:6px}
.qc>.wgives{padding-top:12px}
.qc>.qfoot{padding-top:11px}
.qc>.hact{padding-top:12px;padding-bottom:16px;margin-top:0}
/* the gear row is 44px tall on the home card whether it holds anything or not, because there it
   always does. Here it usually does not, and an empty 44px band on 180 cards is 180 holes. */
.qc>.wgear{min-height:0}
.qc>.wgear.has{padding-top:10px}
.qc.wip{background:rgba(240,170,60,.07)}
/* the ones you said you would do */
.qc.todo{background:var(--s3)}
/* the bosses are why anyone is on this page, so they get the top of the card at full size */
/* the art is the point of the card, so it gets real room */
.qart{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;
  position:relative;overflow:hidden}
.qart.none,.qhero-art.none{align-items:center;justify-content:center}
/* a quest with nothing to draw draws nothing. 202 cards wearing the same grey glyph is worse
   than an empty band, and the band's height comes from its neighbours in the row anyway. */
.qc>.qart.none{padding:0;background:transparent}
.qart.skill,.qhero-art.skill{align-items:center;gap:16px}
.qart .qph,.qhero-art .qph{width:46px;height:46px;opacity:.3}
/* item art is drawn much smaller than boss art, so it is sized up to sit with it */
.qart img.qgi{height:76px;max-width:76px;cursor:default;image-rendering:auto}
/* a skill icon is 25px of source, so it stops well short of the 124px a boss gets rather than
   being blown up into a blur */
.qart img.sk{height:46px;max-width:46px;cursor:default}
.qhero-art img.sk{height:64px;max-width:64px}
.qart img{height:124px;max-width:112px;object-fit:contain;cursor:pointer;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.28));transition:transform .14s}
.qart img:hover{transform:translateY(-3px)}
.qmore{position:absolute;right:9px;bottom:7px;padding:2px 8px;border-radius:99px;
  background:color-mix(in srgb,var(--bg) 70%,transparent);font-family:var(--mono);
  font-size:var(--f0);font-weight:700;color:var(--tx3)}
/* the title band grows to the tallest title in its row instead of clipping every name to two
   lines, which is the whole of what the subgrid bought */
.qc .qh{flex-wrap:wrap}
.qc .qh>:not(h3){flex:none}
.qfoot{align-self:start;display:grid;gap:6px}
.qtmore{font-size:var(--f0);color:var(--tx4);padding-left:4px}
.qh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qh h3{font-size:var(--f2);letter-spacing:-.01em}
.qu{margin:0;font-size:var(--f1);color:var(--tx2);line-height:1.5}
.qzones{display:flex;gap:6px;flex-wrap:wrap}
.qz{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:99px;
  background:var(--slotDeep);font-size:var(--f0);font-weight:600;color:var(--tx3)}
.qz img{width:22px;height:22px;border-radius:99px;object-fit:cover;flex:none}
.qreq{display:flex;gap:5px;flex-wrap:wrap}
/* a pill that wraps is a pill three lines tall, and a row three lines tall next to rows one
   line tall is the ragged edge that made this list look broken */
.qr{padding:3px 9px;border-radius:99px;background:var(--slotDeep);font-size:var(--f0);
  font-weight:600;color:var(--tx3);text-transform:capitalize;white-space:nowrap}
.qr.go{cursor:pointer}
/* which region a task belongs to, when the list is every region at once */
.qr.rg{background:var(--sel);color:var(--accTx)}
.qr.go:hover{background:var(--sel);color:var(--accTx)}
/* where you have just been sent */
.qc.focus{background:var(--sel)}
/* a pill that names a skill can show it - twenty-four icons sat in the bundle while the page
   drew the word on its own */
.qr img{width:15px;height:15px;object-fit:contain;vertical-align:-3px;margin:0 5px 0 -2px}
.qr b{font-family:var(--mono);color:var(--tx2)}
.qr.short b{color:var(--acc)}
.qr.pre{text-transform:none}
/* the one you can start today is the one worth looking at */
.qr.pre.first{background:var(--sel);color:var(--accTx)}
.alt2{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;
  border-radius:10px;background:var(--sunk);font-size:var(--f1);color:var(--tx3);line-height:1.45}
/* one rule for both, so the weapon line and the next-best line beneath it cannot drift apart */
.alt2 img,.wline img{width:20px;height:20px;object-fit:contain;flex:none}
.alt2 b{color:var(--tx2);font-weight:700}
.alt2.warn{background:rgba(240,170,60,.10)}
.alt2.warn b{color:var(--acc)}
/* The weapon a card is built around, with its picture in front of its name the way the next-best
   line and the upgrade rows below both do it. Inset by the next-best line's own 10px, so the
   weapon's art, the next best's art and every upgrade's art stand in one column down the card, and
   the weapon's name starts where the next best's sentence does.
   The art sits on the name's line only; the prayer and effects hang under the name, so the name
   and what it is doing start on the same edge. Placed rather than flowed, so a weapon with no art
   keeps its name in the second column like every other card. */
.wline{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:8px;align-items:center;
  padding:0 10px;font-size:var(--f1);line-height:1.5;font-weight:500;color:var(--tx2)}
.wline img{grid-column:1;grid-row:1}
.wline b{grid-column:2;grid-row:1;min-width:0;color:var(--tx);font-weight:700}
.wline span{grid-column:2;grid-row:2}
.dpsblk{flex:1 1 auto}
.recs{display:grid;gap:6px;margin-top:auto}
/* an Ironman's suggestion with its Skip beside it, the same height */
.recw{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.rskip{padding:0 12px;border-radius:9px;background:var(--s2);font-size:var(--f0);font-weight:700;color:var(--tx3)}
.rskip:hover{background:var(--s3);color:var(--tx)}
td .rskip,.ft .rskip,.hact .rskip{min-height:32px}
.rskipped{justify-self:start;padding:6px 10px;border-radius:var(--rs);font-size:var(--f0);font-weight:700;color:var(--tx3)}
.rskipped:hover{background:var(--s2);color:var(--tx)}
.rec{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;background:var(--s2);
  text-align:left;width:100%}
.rec:hover{background:var(--s3)}
.rec img{width:26px;height:26px;object-fit:contain;flex:none}
.rec .rn{flex:1;min-width:0;font-size:var(--f1);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec .rg{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--good);flex:none}
/* the price makes way for what the click will do, so the row says it without growing */
.rec .ro{display:none;font-family:var(--mono);font-size:var(--f0);font-weight:700;color:var(--acc);
  white-space:nowrap}
.rec:hover .ro{display:inline}
.rec:hover .rc{display:none}
.rec .rc{font-family:var(--mono);font-size:var(--f0);color:var(--tx3);flex:none;min-width:54px;text-align:right}
/* Why an upgrade is on the list, when the reason is the fight: the target's trait, or your task. It
   sits under the name, and the pair is pulled into the row's own padding (15 + 16 = 31px, less 3px
   each side, is inside the 26px picture), so a tagged row is as tall as the rest, the three cards'
   rows still line up across, and the name keeps its width instead of giving it to the pill. */
.rnw{flex:1;min-width:0;display:grid;justify-items:start;margin-block:-3px}
.rnw>:first-child{max-width:100%;line-height:15px}
.rwhy{display:inline-flex;align-items:center;gap:4px;height:16px;padding:0 7px;border-radius:99px;
  background:var(--s3);font-size:var(--f0);font-weight:600;line-height:1;color:var(--tx2);
  white-space:nowrap}
:is(.rec,.qtrow,.itc) .rwhy :is(img,.sicon){width:14px;height:14px;object-fit:contain;flex:none;
  margin-left:-3px}
.rec:hover .rwhy{background:var(--s4)}
.qtrow .rwhy{background:var(--s2)}
.qtrow:hover .rwhy{background:var(--s3)}
#uptbl .itc .sl{display:flex;align-items:center;gap:7px}

.swgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.sw{padding:15px 17px;background:var(--s1);border-radius:var(--rs)}
.sw .n{font-family:var(--mono);font-size:var(--f5);font-weight:700;line-height:1;letter-spacing:-.04em}
.sw .l{font-size:var(--f0);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin-top:7px}

.tabs{display:flex;gap:5px;padding:5px;background:var(--s1);border-radius:12px;flex-wrap:wrap}
.tab{padding:8px 16px;border-radius:9px;font-size:var(--f1);font-weight:700;color:var(--tx3);white-space:nowrap}
.tab:hover{color:var(--tx)}
.tab.on{background:var(--s3);color:var(--tx)}

.tw{overflow:auto;max-height:min(70vh,660px);background:var(--s1);border-radius:var(--r);box-shadow:var(--sh2)}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:740px}
th{text-align:left;font-size:var(--f0);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);
  padding:13px 15px;background:var(--slotDeep);position:sticky;top:0;white-space:nowrap;z-index:3}
th.n,td.n{text-align:right}
td{padding:11px 15px;vertical-align:middle}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--s2) 55%,transparent)}
tbody tr:hover td{background:var(--s3)}
td.n{white-space:nowrap;font-size:var(--f2);font-weight:600}
.rk{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--tx3);width:32px;text-align:center}
.itc{display:flex;align-items:center;gap:11px;min-width:0}
.itc img{width:30px;height:30px;object-fit:contain;flex:none}
.itc .nm{font-weight:700;font-size:var(--f2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itc .sl{font-size:var(--f1);font-weight:500;color:var(--tx3);margin-top:1px}
.gain{color:var(--good)}
td.gain{font-weight:700}
.gain .sub{color:var(--tx2);font-weight:600}
.gbar{position:relative;height:7px;min-width:80px;background:var(--s3);border-radius:99px;overflow:hidden}
.gbar i{position:absolute;left:0;top:0;height:100%;background:var(--good);border-radius:99px}
.pill{display:inline-block;font-size:var(--f1);font-weight:600;padding:3px 10px;border-radius:99px;
  background:var(--s3);color:var(--tx2);white-space:nowrap}
.pill.buy{background:var(--goodBg);color:var(--good)}
.pill.grind{background:var(--infoBg);color:var(--info)}
.emptyrow{padding:30px;text-align:center;color:var(--tx3);font-size:var(--f2)}
@media(max-width:900px){table{min-width:0}
  #uptbl :is(th,td):nth-child(5),#uptbl :is(th,td):nth-child(6),#uptbl :is(th,td):nth-child(8){display:none}
  #valtbl :is(th,td):nth-child(6){display:none}}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(262px,100%),1fr));gap:16px;align-items:stretch}
/* the upgrade rails hold a variable number of cards, so the final row is usually short.
   sitting them on a panel means the leftover space reads as the panel, not as a hole. */
.gridwrap{display:block}
.gridwrap:empty{display:none}
.gridwrap > .grid{grid-template-columns:repeat(auto-fill,minmax(min(258px,100%),1fr))}
.gridwrap > .note{margin:0}
.pcard{padding:var(--pad);display:flex;flex-direction:column;gap:13px}
.pcard .hd{display:flex;align-items:center;gap:12px;
  /* two lines of h3 + the .s under it, so the price band starts at the same y in every card */
  min-height:calc(var(--f3) * 1.2 * 2 + 3px + var(--f1) * 1.5)}
.pcard .hd>div{min-width:0}
.pcard .hd h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .hd img{width:42px;height:42px;object-fit:contain;flex:none}
.pcard .hd .ph{width:42px;height:42px;border-radius:9px;background:var(--s2);flex:none;display:grid;
  place-items:center;color:var(--tx4)}
.pcard .hd .s{font-size:var(--f1);font-weight:500;color:var(--tx3);margin-top:3px}
.pcard p{font-size:var(--f2);color:var(--tx2);line-height:1.55;font-weight:500}
.pcard .ft{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}
.big{font-family:var(--mono);font-size:var(--f4);font-weight:700;letter-spacing:-.03em;line-height:1}
.mrow{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}

.gm{padding:var(--pad);display:grid;gap:16px}
/* four starting points, offered to somebody who has just given their name */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(228px,100%),1fr));gap:10px;
  /* .welcome is justify-items:start, which is right for its heading and its button row
     and wrong here - without this the cards shrink to one 367px column in a 1154px card */
  justify-self:stretch;width:100%;margin:0}
.tierb{display:grid;gap:10px;align-content:start;padding:16px;border-radius:var(--r);
  background:var(--s2);text-align:left}
.tierb.on{background:var(--sel)}
.tierb:hover{background:var(--s3)}
.tierb.sug{background:var(--s2)}
.tierb.busy{opacity:.55;cursor:default}
.tierb .tn{display:flex;align-items:center;gap:9px;font-size:var(--f3);font-weight:700}
.tierb .tn em{font-style:normal;font-size:var(--f0);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tx4)}
.tierb .td{font-size:var(--f1);color:var(--tx3);line-height:1.45}
.tierb .tc{font-family:var(--mono);font-size:var(--f0);color:var(--tx4)}
/* the kind cards carry no price line, so they sit tighter than the tier cards */
/* the same three cards as the boss page, at the size this page has room for */
/* the same three cards as the boss page, drawn by the same function - so the same
   gutter and the same breakpoints */
.mysets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* These have to sit AFTER the line above, not with the other breakpoints four hundred lines up,
   because that rule and this one have the same specificity and the later one wins. For eleven
   hundred lines the stacking rule was up there and never once applied: at 375px the three cards
   were 105px wide each and the recommendation row inside them was 295. */
@media(max-width:1120px){.mysets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.mysets{grid-template-columns:minmax(0,1fr)}}

/* no hover here: on the boss page the same lighting is paired with a click, and here
   there is nothing behind it */
.msfoot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:var(--f1);color:var(--tx3)}
.msfoot .w{font-weight:700;color:var(--tx2)}
/* a row of chips, because the badge does the explaining and the words are a label */
.kindrow{display:flex;flex-wrap:wrap;gap:8px;margin:0;justify-self:stretch}
.kindc{display:flex;align-items:center;gap:9px;height:40px;padding:0 14px 0 10px;
  border-radius:99px;background:var(--s2)}
.kindc:hover{background:var(--s3)}
.kindc.on{background:var(--accSoft)}
.kindc .kico{width:20px;height:20px;object-fit:contain;image-rendering:pixelated;flex:none;
  background-size:contain;background-repeat:no-repeat;background-position:center}
.kindc .kn{font-size:var(--f2);font-weight:700}
.kindc.on .kn{color:var(--accTx)}
/* A status rather than a warning: nothing here is broken or risky, it simply cannot be installed
   from RuneLite's own list until the review lands, so this is the size of a footnote.
   The stray `.kindc` that used to sit on the front of this made it `.kindc .pendtag`, which
   matches nothing - a comment does not separate selectors - so this never applied anywhere. */
.pendtag{display:inline-block;margin:0 6px;padding:1px 7px;border-radius:99px;background:var(--s3);
  font-size:var(--f0);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx4);
  vertical-align:1px;white-space:nowrap}
.pendwhy{display:block;margin-top:3px;color:var(--tx4)}
.wsync .pendtag{margin-left:8px}
.kfrom{font-size:var(--f0);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx4)}
/* the gear a tier actually gives you */
.tierb .tgear{display:flex;gap:8px;align-items:center;min-height:36px;flex-wrap:wrap;
  padding:2px 0}
.tierb .tgear img{width:30px;height:30px;object-fit:contain}
/* everything a preset would give you, before you commit to it */
.ppreview{display:grid;gap:14px;justify-self:stretch;width:100%;padding:18px;
  border-radius:var(--r);background:var(--s2)}
.pph{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pph b{font-size:var(--f3)}
.pph span{font-size:var(--f1);color:var(--tx3)}
.ppgrid{display:flex;flex-wrap:wrap;gap:5px}
/* the size of the bank slot it is about to become, and it takes the same click */
.ppi{width:46px;height:46px;border-radius:var(--rs);background:var(--slotDeep);display:grid;
  place-items:center;position:relative}
.ppi:hover{background:var(--s4)}
.ppi:hover::after{content:"\00d7";position:absolute;top:1px;right:4px;font-size:var(--f2);
  font-weight:700;color:var(--bad)}
.ppi img{max-width:36px;max-height:36px;object-fit:contain}
.ppi:hover img{opacity:.45}
.ppgo{justify-self:start}
#addpanel{margin-top:12px}
/* #gearman is nested inside the add panel, so it needs its own rhythm */
#gearman{display:grid;gap:6px}
#gearman .gmslot{padding-top:14px}
.bhsec .kch img{width:24px;height:24px;object-fit:contain}
#view-boss.bhome .pickhead{display:none}
.bhtop{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:0 0 14px}
.bhsearch{position:relative;display:block;flex:1 1 340px;max-width:620px;margin:0}
.bhtier{display:flex;flex-wrap:wrap;gap:6px}
.bhtier .fchip .fci{width:22px;height:22px;object-fit:contain;margin:-3px 0 -3px -4px;flex:none}
.bhtier .fchip .sicon{width:16px;height:16px;flex:none}
.bhchips .ic-combat,.bhtier .ic-combat{background-image:var(--ic-combat)}
.bhchips .ic-view{background-image:var(--ic-view)}
.bhchips .fchip,.bhtier .fchip{text-transform:none;letter-spacing:0;font-size:var(--t-chip);font-weight:600}
#view-boss.bhome #tierfacets{display:none}
.bhsearch .sicon{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);pointer-events:none}
.bhsearch .srch{width:100%;height:48px;padding-left:46px;background:var(--s2);box-shadow:none}
.bhsearch .srch:focus-visible{outline:none;background:var(--s3)}
.bhchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.bhchips .fchip .fci{width:22px;height:22px;object-fit:contain;margin:-3px 0 -3px -4px;flex:none}
.bhchips .fchip .sicon{width:16px;height:16px;flex:none}
/* one line of cards at every width: what does not fit is not drawn on a second */
.bhrow{--bhn:8;grid-template-columns:repeat(var(--bhn),minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:0;overflow:hidden;gap:0 9px}
@media(max-width:1260px){.bhrow{--bhn:6}}
@media(max-width:960px){.bhrow{--bhn:5}}
#gearman.gmtabbed .gmslot:not([data-slot*="-"]) h4,#gearman.gmtabbed .gslot{display:none}
#gearman.gmtabbed .gmslot:not([data-slot*="-"]){padding-top:0}
#gearman .gmslot+.gmslot{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tx) 9%,transparent)}
#gearman .gmslot:first-child{padding-top:2px}
.gmslot{display:grid;gap:10px;content-visibility:auto;contain-intrinsic-size:auto 160px}
.gmslot[hidden]{display:none!important}
.gmslot h4{font-size:var(--f0);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);
  display:flex;align-items:center;gap:8px}
.gsty{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 6px;border-radius:99px;background:var(--s2);
  color:var(--tx);font-size:var(--f1);font-weight:700;letter-spacing:0;text-transform:none}
.gsty .sicon{width:15px;height:15px}
.gmitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:5px}
.gi{position:relative;aspect-ratio:1;display:grid;place-items:center;padding:0;border-radius:6px;
  background:var(--slot);font-size:var(--f1);font-weight:600;color:var(--tx2)}
.gi>span{display:none}
.gi:hover{color:var(--tx)}
.gi::before{content:"";position:absolute;top:3px;right:5px;font-family:var(--mono);font-size:var(--t-label);line-height:1;color:var(--tx)}
.gi img{width:34px;height:34px;object-fit:contain}
.gi:hover{background:var(--s3)}
.gi.own{background:var(--sel);color:var(--tx)}
.gi.own::before{content:"\2713"}
.gi:not(.own) img{opacity:1}
.gi[hidden]{display:none!important}

/* ---------- bank tab ---------- */
/* With an empty bank the welcome card sits directly on top of this, two surfaces flush against
   each other reading as one panel with a seam in it. They are different things. */
.banktab{padding:var(--pad);background:var(--slotDeep)}
.welcome+.banktab,.welcome+.gm{margin-top:16px}
.banktabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.btab{font-size:var(--f0);font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:6px 12px;
  border-radius:8px;background:var(--slot);color:var(--slotTx)}
.btab:hover{color:var(--tx)}
.btab.on{background:var(--sel);color:var(--tx)}
.bankgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:5px}
.bslot{aspect-ratio:1;border-radius:6px;background:var(--slot);display:grid;place-items:center;
  position:relative;transition:transform .1s,box-shadow .1s}
.bslot:hover{background:color-mix(in srgb,var(--stM) 26%,var(--slotDeep))}
.bslot img{transition:transform .12s}
.bslot:hover img{transform:translateY(-2px)}
.bslot img{width:34px;height:34px;object-fit:contain;position:relative;z-index:1}
.bslot::after{content:"\00d7";position:absolute;inset:0;border-radius:6px;opacity:0;transition:opacity .1s;
  display:grid;place-items:center;font-size:var(--f5);font-weight:700;color:var(--stM);
  background:color-mix(in srgb,var(--stM) 22%,transparent);z-index:2}
.bslot:hover::after{opacity:1}
.bankempty{padding:28px;text-align:center;color:var(--slotTx);font-size:var(--f2)}
/* ---------- the bank, the shape the game keeps it ---------- */
/* The gear grid above is auto-fill - nineteen columns at 1220px - which is what stops it reading
   as a bank however good the contents are. This one is eight across at every width and lets the
   size of the square be the thing that gives. */
/* Three columns: the fights you plan for, the bank, what it is worth. The rails are minmax(R,1fr)
   and the bank is minmax(0, eight 96px squares). The grid grows tracks with a fixed limit before
   flexible ones, so every spare pixel goes to the bank until its squares reach 96px, and only then
   do the rails take the rest - which is what keeps a square at 62px at 1220, 72px at 1440 and 96px
   at 1920, and stops an ultrawide turning it into a billboard, without a cap that leaves a hole
   beside it. R itself grows with the window: 260px at 1220, 331 at 1440, 340 from 1480 up. */
.bkwrap{--bkgap:clamp(3px,0.8vw,6px);--bksb:10px;--bkcell:120px;
  --bkrail:clamp(220px,calc(32vw - 130px),340px);
  --bkmax:calc(8 * var(--bkcell) + 7 * var(--bkgap) + 2 * var(--pad) + var(--bksb));
  display:grid;gap:20px;align-items:start;
  grid-template-columns:minmax(var(--bkrail),1fr) minmax(0,var(--bkmax)) minmax(var(--bkrail),1fr);
  grid-template-areas:"plans bank sum"}
/* no bank yet: nothing to plan against and nothing to value, so the message gets the whole row */
.bkwrap.solo{grid-template-columns:minmax(0,1fr);grid-template-areas:"bank"}
/* Without the loadouts rail: the bank and its summary, back inside the page's normal width so the
   bank's left edge is the logo's and the nav's again. Only from 1100 up, where three columns were;
   below that the narrower layouts already put the rail underneath. */
@media(min-width:1100px){
  .bkwrap.noplans:not(.solo){grid-template-columns:minmax(0,var(--bkmax)) minmax(var(--bkrail),1fr);
    grid-template-areas:"bank sum"}
}
body:has(#view-bank:not([hidden]) .bkwrap.noplans) .wrap,
body:has(#view-bank:not([hidden]) .bkwrap.noplans) .top-in{max-width:var(--maxw)}
/* The app's content column stops at --maxw, which binds between 1356 and 1400 wide and above 1736.
   The bank is the one page that wants every pixel, so while it is open the column goes - and the
   header row with it, because they share a gutter, and widening one without the other would put
   the bank's left edge 28px to the left of the logo above it. */
body:has(#view-bank:not([hidden])) .wrap,
body:has(#view-bank:not([hidden])) .top-in{max-width:none}
/* The cell is still simply an eighth of the panel, and eight is still the number that never moves -
   a grid that reflows to nine or to nineteen is a web layout, not a bank. What changed is what the
   panel is an eighth of: the 120px cap that stopped it at 1052px, and left 317px of nothing beside
   it at 1440, is gone, and the column the grid above hands it is the only limit. The gap still
   comes down on a phone so that eight columns of something usable fit. */
.bkpanel{grid-area:bank;min-width:0}
/* Ten buttons over the eight columns, which lands each one at four fifths of a slot - the
   proportion the game's own tab strip has.
   It is a scroll box that never scrolls, which is the only way to make it agree with the grid at
   every width: `scrollbar-gutter:stable` reserves the same gutter here as it does there, and
   reserves nothing here when the platform reserves nothing there. Subtracting a flat ten pixels
   instead left the row ten short of its own columns on a phone, where scrollbars overlay and take
   no width at all. Measured at 375: tabs ended at 335 and the eighth column at 345. */
.bktabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:var(--bkgap);
  margin-bottom:10px;overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin}
.bktabs::-webkit-scrollbar{width:var(--bksb)}
.bktab{display:flex;align-items:center;gap:9px;min-width:0;padding:8px 12px 8px 8px;border-radius:8px;
  background:var(--slot);position:relative;text-align:left}
.bktab:hover{background:var(--s4)}
.bkta{position:relative;width:32px;height:32px;flex:none;display:grid;place-items:center}
.bktt{display:grid;gap:2px;min-width:0}
.bktt b{font-family:var(--mono);font-size:var(--f2);font-weight:700;color:var(--tx);line-height:1.1}
.bktt span{font-size:var(--t-label);color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the tab you are in is the lit surface, the way every other selected thing in this app is */
.bktab.on{background:var(--sel)}
.bktab img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.bktab .bkn{font-family:var(--mono);font-size:var(--f3);font-weight:700;color:var(--slotTx)}
.bktab .bkn.inf{font-size:var(--f4);line-height:1}
.bktab.on .bkn{color:var(--tx)}
/* scrollbar-gutter holds the ten pixels whether it is scrolling or not, and the webkit width is
   pinned to the same ten so the columns cannot shift under a scrollbar appearing */
.bkg{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--bkgap);
  max-height:70vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
  scrollbar-width:thin;scrollbar-color:var(--s4) transparent;container-type:inline-size}
.bkg::-webkit-scrollbar{width:var(--bksb)}
.bkg::-webkit-scrollbar-track{background:transparent}
.bkg::-webkit-scrollbar-thumb{background:var(--s4);border-radius:99px}
.bks{aspect-ratio:1;border-radius:8px;background:var(--slot);position:relative;overflow:hidden;transition:opacity .15s}
/* The picture is fitted to the square, never the square to the picture. Absolutely positioned,
   because a percentage height on an in-flow child of a cell sized by aspect-ratio falls back to
   the sprite's own height: the two tallest items in his bank, an elite void robe and an occult
   necklace, pushed their rows to 148px and 135px while the six squares beside them stayed at 120.
   Three bands share a square - the stack count along the top, the value along the bottom, the
   picture between them - so the box is 60% wide and 54% tall and centred, which leaves 23% of the
   square above and below it: the count, at 5% from the top and a sixth of a square tall at most,
   ends above the picture at every width down to 620px (at 56% it ran 0.1px into it at 1440). The
   box has the proportions of the 36x32 canvas every sprite now comes on, so contain scales every
   item by the same factor. It stops at twice the sprite's own size, because past that a square on
   a tablet shows a picture blown up rather than a bank.
   pixelated keeps them the pixel art they are instead of the smear bilinear makes of them, which
   is the app's own habit for item sprites already and is what the game does. */
.bks img{position:absolute;inset:0;margin:auto;width:min(60%,72px);height:min(54%,64px);
  object-fit:contain;image-rendering:pixelated}
/* A placeholder is the ghost of something you have taken out - the game draws the item greyed
   with a 0 where the count goes. Drawn and nothing else: it is not owned, it is not counted and
   it is worth nothing, which is why it is a class here and never a number anywhere. */
.bks.ph{background:color-mix(in srgb,var(--slot) 36%,var(--slotDeep))}
.bks.ph img{opacity:.3;filter:grayscale(1)}
/* An empty square in game draws nothing, so it draws nothing here: it holds its position on the
   panel's own ground and reads as the gap it is. */
.bks.hole{background:transparent}
/* the line the game draws between one tab and the next in the All view - a row of its own, which
   is also what puts the next tab's first item back in the first column. The same hairline the
   prayer book uses between its rows, so it is this app's divider and not a new one. */
.bkdiv{grid-column:1/-1;height:2px;border-radius:99px;
  background:color-mix(in srgb,var(--slotTx) 22%,transparent)}
/* one tab's squares: a wrapper the grid never sees, so they are the grid's own items; hidden when
   another tab is open, which is how a tab click shows a tab without drawing it */
.bkgt{display:contents}
/* Top left, over the sprite, with the drop shadow the game gives it. It scales with the square
   between two steps of the type scale, because the square does: the size that reads at 96px is
   too big for a 36px phone cell, and the size a phone needs is lost in a desktop one. Measured
   against the grid rather than the window, because the rails mean the window no longer says how
   big a square is - a square is an eighth of the grid, so 2cqw is a sixth of a square. */
.bkq{position:absolute;top:5%;left:6%;font-family:var(--mono);font-size:clamp(var(--f0),2cqw,var(--f2));
  font-weight:700;line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.92);pointer-events:none}
.bkq.q1{color:var(--qy)}
.bkq.q2{color:var(--qk)}
.bkq.q3{color:var(--qm)}
.bkmeta{margin-top:12px;font-size:var(--f1);color:var(--slotTx)}
.bkmeta b{color:var(--tx2);font-weight:700}
.bknote{margin:0 0 10px}
.bkblank{display:grid;justify-items:center;gap:16px;padding:22px 0}
/* What the stack is worth, along the bottom on the quantity's left edge, so the two numbers in a
   square read as one column and never as two things fighting for the corner. A notch smaller and
   a notch quieter than the count, which is the game's and comes first; a stack worth a million or
   more takes the gold, because that is the square worth finding. */
.bkv{position:absolute;left:6%;bottom:5%;font-family:var(--mono);
  font-size:clamp(var(--f0),1.7cqw,var(--f1));font-weight:600;line-height:1;letter-spacing:-.02em;
  color:var(--tx3);text-shadow:0 1px 0 rgba(0,0,0,.92);pointer-events:none}
.bkv.hi{color:var(--acc)}
/* A loadout picked: what it takes out is lit and everything else steps back. Lit is a surface, not
   an outline - this app draws no borders. */
.bkg.lens .bks:not(.lit){opacity:.18}
.bks.lit{background:var(--sel)}
/* and a tab with any of it in keeps a light under its picture, so a setup spread over three tabs
   does not look like nothing from inside a fourth */
.bktabs.lens .bktab.has{opacity:1}
.bktab.has::after{content:"";position:absolute;left:50%;bottom:5%;width:6px;height:6px;margin-left:-3px;
  border-radius:99px;background:var(--acc)}

/* ---------- the rails either side of the bank ---------- */
/* One card per question, in the app's rail style. A rail stops at 480px, which is exactly what it
   is at 1920 beside a full-size bank; past that it would only be whitespace, so on a wider screen
   the two stay on the page's outer edges - the left one on the same line as the nav, the right one
   on the same line as the chips - and the bank sits between them. */
.bkrail{min-width:0;width:100%;max-width:480px;display:grid;gap:12px;align-content:start}
.bkplans{grid-area:plans}
/* the rail takes whatever the bank leaves, so nothing is left beside it; wide enough, its cards pair up */
.bksum{grid-area:sum;justify-self:stretch;max-width:none;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  align-items:start}
.bkrc{padding:var(--pad);display:grid;gap:10px;align-content:start}
.bkrh{font-size:var(--f0);font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx4);line-height:1.2}
.bkrv{font-family:var(--mono);font-size:var(--f6);font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--tx)}
.bkrv.wait{color:var(--tx4)}
/* What you could sell, under the bank at its full width: a card a pile, the total in gold at the
   size the bank's own worth uses, then every item as a tile, most valuable first. */
.bksell{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:20px;align-items:start}
.bksell[hidden]{display:none!important}
/* the experience strip: the rail's rows, three columns across the page */
.bkxpw{margin-top:12px}
.bkxpw.none{display:none}
.bkxh{margin:0;font-size:var(--f4);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--tx)}
.bkxhd{display:grid;gap:4px}
.bkxd{margin:0;font-size:var(--f1);line-height:1.4;color:var(--tx3)}
.bkxg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 28px;margin:0 -8px}
@media(max-width:1100px){.bkxg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.bkxg{grid-template-columns:minmax(0,1fr)}}
/* a skill's line: its levels beside its name, what it would make under it, and experience, not coins */
.bkxp{align-items:start}
.bkxp .bkcn b{display:flex;align-items:baseline;gap:8px}
.bkxl{font-family:var(--mono);font-size:var(--t-label);font-weight:700;color:var(--good)}
.bkxi{display:flex;flex-wrap:wrap;gap:3px}
.bktvr.bkxp .bkxi img{width:28px;height:28px}
/* a skill's line at a size you read from across the room: the icon, the name in white, the experience large */
.bkxg{row-gap:6px}
.bkxg .bkxp{grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 12px}
.bkxg .bkxp .a{width:44px;height:44px}
.bkxg .bkxp .a img{width:36px;height:36px}
.bkxg .bkxp .bkcn{gap:6px}
.bkxg .bkxp .bkcn b{font-size:var(--f3);font-weight:700;color:var(--tx);gap:10px}
.bkxg .bkxp .bkxl{font-size:var(--f1)}
.bkxg .bkxp .v{font-size:var(--f4);color:var(--tx);gap:6px}
.bkxg .bkxp .v .u{font-size:var(--f1)}
.bkxg .bktvr.bkxp .v::before{content:none}
.bktvr.bkxp .v .u{font-family:var(--sans);font-size:var(--t-label);font-weight:600;color:var(--tx4)}
.bksc{padding:calc(var(--pad) + 4px);display:grid;gap:16px;align-content:start;font-family:var(--sans)}
.bksch{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.bksch .wh{display:grid;gap:3px;min-width:0}
.bksch h3{font-size:var(--f5);letter-spacing:-.025em;line-height:1.15}
.bkss{font-size:var(--f2);color:var(--tx3);margin:0;line-height:1.5}
.bkstot{display:grid;justify-items:end;gap:4px;flex:none}
.bkstot .v{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:var(--f6);
  font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--acc);white-space:nowrap}
.bkstot .v::before{content:"";width:28px;height:28px;flex:none;background-image:var(--ic-coin);
  background-size:contain;background-repeat:no-repeat;background-position:center}
.bkstot .l{font-size:var(--f0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx4)}
.bkitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.bkit{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:6px 12px 6px 6px;border-radius:var(--rs);background:var(--s2);min-width:0}
.bkit img{width:36px;height:32px;object-fit:contain;image-rendering:pixelated}
.bkit .n{display:grid;gap:1px;min-width:0}
.bkit .n b{font-family:var(--sans);font-size:var(--f2);font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.bkit .n span{font-family:var(--mono);font-size:var(--f0);color:var(--tx4)}
.bkit .gpv{font-family:var(--mono);font-size:var(--f2);font-weight:700;color:var(--acc)}
.bksmore{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:560px){
  .bksch{flex-direction:column;gap:12px}
  .bkstot{justify-items:start}
  .bkitems{grid-template-columns:minmax(0,1fr)}
}
.bkrs{font-size:var(--f1);color:var(--tx3);line-height:1.4;margin:0}
/* A row's hover surface runs into the card's padding and its content does not: the negative margin
   and the padding cancel, so every picture in a rail starts on the card's own content edge. */
.bktv,.bksl,.bkpg{display:grid;gap:2px;margin:0 -8px}
.bktvr{display:grid;grid-template-columns:24px minmax(0,1fr) calc(6ch + 18px);gap:10px;align-items:center;
  padding:5px 8px;border-radius:8px;text-align:left;width:100%}
.bktvr:hover,.bkslr:hover,.bkpr:hover{background:var(--s2)}
.bktvr.on,.bkslr.on,.bkpr.on{background:var(--s3)}
.bktvr .a{width:24px;height:24px;display:grid;place-items:center;font-family:var(--mono);
  font-size:var(--f1);font-weight:700;color:var(--tx3)}
.bktvr img,.bkslr .ics img,.bkpm img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.bktvr .rbar{height:4px}
.bkcat{cursor:default}
.bkcat:hover{background:none}
.bkcn{display:grid;gap:5px;min-width:0}
.bkcn b{font-size:var(--f1);font-weight:600;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkcat .sicon{width:20px;height:20px}
.bktvr .v{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--tx3);text-align:right;
  display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;white-space:nowrap}
.bktvr .v:not(:empty)::before{content:"";width:13px;height:13px;flex:none;background-image:var(--ic-coin);
  background-size:contain;background-repeat:no-repeat;background-position:center}
.bkrv:not(.wait){display:inline-flex;align-items:center;gap:10px}
.bkrv:not(.wait)::before{content:"";width:30px;height:30px;flex:none;background-image:var(--ic-coin);
  background-size:contain;background-repeat:no-repeat;background-position:center}
.bktvr.on .v{color:var(--tx)}
.bkslr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:baseline;
  padding:8px;border-radius:var(--rs);text-align:left;width:100%}
.bkslr:disabled{cursor:default;opacity:.55}
.bkslr b{font-size:var(--f2);font-weight:700}
.bkslr .v{font-family:var(--mono);font-size:var(--f2);font-weight:700;color:var(--acc)}
.bkslr .ics{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,24px);
  grid-auto-rows:24px;height:24px;gap:0 4px;overflow:hidden}
/* under 620px a square is too small to carry a value over its art without touching it */
@media(max-width:619px){.bks .bkv{display:none}}
.bkpc{gap:14px}
.bkpgw{display:grid;gap:6px;align-content:start;min-width:0}
.bkpr{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;
  min-height:44px;padding:6px 8px;border-radius:var(--rs);text-align:left;width:100%}
.bkpr .a{width:32px;height:32px;display:grid;place-items:center}
.bkpr .a img{max-width:32px;max-height:32px;object-fit:contain}
.bkpr b{font-size:var(--f2);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bkpr.on b{color:var(--accTx)}
.bkpr .k{font-family:var(--mono);font-size:var(--f0);color:var(--tx4)}
/* what the picked fight takes, under its own row and indented to its name: 8 of row padding, 32 of
   picture and 10 of gap put the name 50px in, so everything under it starts there too */
.bkpd{display:grid;gap:8px;padding:4px 8px 12px 50px}
.bkpst{display:flex;gap:4px;flex-wrap:wrap}
.bkpst button{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;
  background:var(--slotDeep);font-size:var(--f0);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx3)}
.bkpst button i{width:6px;height:6px;border-radius:99px;display:block}
.bkpst button.on{background:var(--s4);color:var(--tx)}
.bkpst button.dim{opacity:.45}
.bkpsw{display:flex;align-items:center;gap:8px}
.bkpsw button{width:26px;height:26px;border-radius:99px;background:var(--slotDeep);font-weight:700;
  color:var(--tx2);display:grid;place-items:center}
.bkpsw button:disabled{opacity:.35;cursor:default}
.bkpsw span{font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--tx2)}
.bkpn{font-size:var(--f1);color:var(--tx3);line-height:1.4;margin:0}
.bkpn.ok{color:var(--good)}
.bkpm{display:grid;grid-template-columns:24px minmax(0,1fr);gap:1px 8px;align-items:center}
.bkpm img{grid-row:span 2}
.bkpm b{font-size:var(--f1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bkpm span{font-size:var(--f0);color:var(--tx4)}
/* Under 1100 three columns cannot all be useful, so the summary keeps its place beside the bank -
   it is short, and it is about the bank - and the loadouts drop underneath in two columns. Below
   860 it is one column in reading order: the bank, what it is worth, then the fights, with the
   three summary cards side by side while they fit; below 620 the two lists of fights stack too. */
@media(max-width:1099px){
  .bkwrap{grid-template-columns:minmax(0,1fr) var(--bkrail);grid-template-areas:"bank sum" "plans plans"}
  .bkplans{max-width:none}
  .bkpc{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .bkph{grid-column:1/-1}
}
@media(max-width:859px){
  .bkwrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"bank" "sum" "plans"}
  .bkrail{max-width:none}
  .bksum{justify-self:stretch;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start}
}
@media(max-width:619px){
  .bkpc{grid-template-columns:minmax(0,1fr)}
}
/* ---------- prayer book ---------- */
#prayerbook{padding:0 var(--pad)}
.prayrow{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;padding:15px 0}
.prayrow+.prayrow{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--slotTx) 22%,transparent)}
.prayrow .rl{font-size:var(--f0);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slotTx)}
.praygrid{display:flex;flex-wrap:wrap;gap:6px}
.pray{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 7px;border-radius:99px;
  background:var(--slot);opacity:.5;transition:opacity .12s,box-shadow .12s;white-space:nowrap}
.pray:hover{opacity:.85}
.pray.on{opacity:1}
/* your pick, which your level no longer reaches - not the one in the numbers */
.pray.stale{opacity:.55}
.pray.stale .pn{text-decoration:line-through}
.pray.picked{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--tx) 45%,transparent)}
.pray.best{opacity:1;background:color-mix(in srgb,var(--tx) 16%,var(--slotDeep))}
/* how you fight: four cards, two by two */
.fightcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.fightcards{grid-template-columns:minmax(0,1fr)}}
.fcd{padding:var(--pad);display:grid;gap:6px;align-content:start}
.fcdh{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.fcdh h3{font-size:var(--f4);font-weight:800;margin:0}
.fcd .prayrow{grid-template-columns:78px minmax(0,1fr);padding:12px 0}
.pray.tick{opacity:1;background:color-mix(in srgb,var(--tx) 12%,var(--slotDeep))}
.pray.use{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--tx) 45%,transparent)}
.pray .pi{width:20px;height:20px;background-size:contain;background-repeat:no-repeat;background-position:center;flex:none}
.pray.book{padding:6px 14px 6px 8px}
.pray.book .pl{font-family:var(--sans)}
.pray[disabled]{cursor:default}
.pray:not(:has(img)):not(:has(.pi)){padding-left:12px}
.btab .bti{width:20px;height:20px;object-fit:contain;margin-right:7px;vertical-align:-5px}
.addtabs{margin:0 0 14px}
#ammobook .praygrid,#bookbook .praygrid{padding-top:8px}
.pray.locked{opacity:.22;filter:grayscale(1);cursor:not-allowed}
.pray img{width:22px;height:22px;object-fit:contain;flex:none}
.pray .pn{font-size:var(--f1);font-weight:700;color:var(--tx)}
.pray .pl{font-size:var(--f0);font-family:var(--mono);color:var(--slotTx)}

.bskt{width:26px;height:26px;flex:none;background-size:contain;background-repeat:no-repeat;background-position:center}
.addb{width:24px;height:24px;border-radius:7px;background:var(--s3);color:var(--tx2);flex:none;
  display:grid;place-items:center;font-size:var(--t-ui);font-weight:700;line-height:1}
.addb:hover{background:var(--sel);color:var(--tx)}
.addb.in{background:var(--good);color:var(--s1)}

.skrow .sn{flex:1;min-width:0;font-weight:700;font-size:var(--f2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.skrow .sp{font-family:var(--mono);font-size:var(--f2);font-weight:700}
.sksum{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.sksum div{display:grid;gap:2px}
.sksum .v{font-family:var(--mono);font-size:var(--f4);font-weight:700}
.addhead{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:4px}
.addhead .srch{max-width:260px}
#addpanel[hidden]{display:none!important}

/* it sits under the room cards and had no margin, so the two blocks touched */
.kit{display:grid;gap:16px;margin-top:36px}
.kitbox{padding:var(--pad);background:var(--s1);border-radius:var(--rs);display:grid;gap:11px}
/* one funding plan: what you are buying, what pays for it, and what that costs */
/* each plan is its own surface rather than a rule between them - this app steps backgrounds
   instead of drawing lines */
.fund{display:grid;gap:10px;background:var(--s2);border-radius:var(--rs);padding:14px}
.fbuy{display:flex;align-items:center;gap:12px}
.fbuy img{width:34px;height:34px;object-fit:contain;flex:none}
.fbuy b{display:block;font-size:var(--f3);font-weight:650;color:var(--tx2)}
.fbuy .s{display:block;font-size:var(--f1);color:var(--tx3);margin-top:2px}
.fbuy .fnet{margin-left:auto;font-size:var(--f4);font-weight:700;color:var(--good);
  font-variant-numeric:tabular-nums}
.fsell{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fsell .mlbl{margin:0 2px 0 0}
.kititems{display:flex;flex-wrap:wrap;gap:7px}
.ki{display:flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border-radius:99px;
  background:var(--slotDeep);font-size:var(--f1);font-weight:600}
.ki img{width:24px;height:24px;object-fit:contain;flex:none}
.ki.combo{background:var(--goodBg);color:var(--good)}
/* a stack size, in front of the thing it counts */
.ki .lq{font-family:var(--mono);font-size:var(--f0);color:var(--acc);margin-right:5px}
.ki .sty{font-family:var(--mono);font-size:var(--f0);color:var(--tx3);font-weight:700;padding:0;display:inline;gap:0}
.ki.combo .sty{color:var(--good)}
.bossline{display:grid;grid-template-columns:36px 1fr auto auto auto;gap:12px;align-items:center;
  padding:9px 12px;border-radius:9px;background:var(--slotDeep)}
.bossline img{width:36px;height:36px;object-fit:contain}
/* boss by boss: a card a boss, picture left */
.bbgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kitbox.bbbox{background:none;background-image:none;box-shadow:none;padding:0;margin-top:14px}
.bbbox .bb{background:var(--s1)}
.bb{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start;padding:16px 18px;
  border-radius:var(--r);background:var(--slotDeep)}
.bbart{display:grid;place-items:center;width:96px;height:96px}
.bbart img{max-width:96px;max-height:96px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.bbt{display:grid;gap:8px;min-width:0;align-content:start}
.bbt h5{margin:0;font-size:var(--f3);font-weight:800;letter-spacing:-.01em;line-height:1.25}
.bbstats{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.bbs{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;border-radius:99px;background:var(--s2);
  font-size:var(--f1);font-weight:700;color:var(--tx)}
.bbs .sicon{width:16px;height:16px}
.bbv{display:inline-flex;align-items:center;gap:5px;font-size:var(--f1);color:var(--tx3)}
.bbv b{font-family:var(--mono);font-size:var(--f2);color:var(--tx)}
.bbv .sicon{width:15px;height:15px}
.bb .bwhy{margin:0;font-size:var(--f1);line-height:1.55;color:var(--tx3)}
@media(max-width:900px){.bbgrid{grid-template-columns:minmax(0,1fr)}
  .bb{grid-template-columns:72px minmax(0,1fr);gap:14px;padding:14px}
  .bbart,.bbart img{width:72px;height:72px;max-width:72px;max-height:72px}}
.bossline .bn{font-size:var(--f2);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bossline .bs{font-size:var(--f0);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;
  border-radius:99px}
.bossline .bd,.bossline .bt{font-family:var(--mono);font-size:var(--f1);font-weight:700}
.bossline .bt{color:var(--tx2)}
.slider{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.slider input[type=range]{flex:1;min-width:170px;accent-color:var(--acc)}
.bigstat{display:flex;gap:28px;flex-wrap:wrap}
/* Five stats whose widths are set by their labels (85px to 178px) put the five numbers at five
   unrelated x positions under a full-bleed slider row. Fixed tracks, not content widths and not
   auto-fill: five tracks fill the card edge to edge, and the four survivors do not move when
   #bisstat is dropped by the best-in-slot pass. Scoped by id so the two-stat .bigstat in the
   dead-capital card keeps its flex row. */
/* the raid kit's numbers: time on target large, and four tiles beside it, or under it where the card is tall */
#kitstats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:14px 20px;align-items:stretch;min-width:0}
#kitstats .ksh{display:grid;align-content:center;gap:6px;min-width:0}
#kitstats .ksv{font-family:var(--mono);font-size:var(--t-num-2xl);font-weight:700;letter-spacing:-.03em;line-height:1.05;white-space:nowrap}
#kitstats .kss{font-size:var(--t-meta);color:var(--tx3)}
#kitstats .kst{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-width:0}
#kitstats .ksc{display:grid;grid-template-columns:18px minmax(0,1fr);align-content:center;align-items:center;gap:6px 8px;
  padding:12px 14px;border-radius:var(--rs);background:var(--s2);min-width:0}
#kitstats .ki{width:18px;height:18px;background:center/contain no-repeat}
#kitstats .ki-bag{background-image:var(--ic-bag)} #kitstats .ki-combo{background-image:var(--ic-combat)}
#kitstats .ki-switch{background-image:var(--ic-hp)} #kitstats .ki-bis{background-image:var(--ic-coin)}
#kitstats .ksc b{font-family:var(--mono);font-size:var(--t-num-s);font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#kitstats .ksc b.good{color:var(--good)} #kitstats .ksc b.warn{color:var(--warn)} #kitstats .ksc b.wait{color:var(--tx4)}
#kitstats .ksc .kl{grid-column:1/-1;font-size:var(--t-meta);line-height:1.3;color:var(--tx3)}
/* settings on the left, the kit's numbers on the right, each on its own surface */
.raidset{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:12px;align-items:stretch}
.raidset>.rlvl,.raidset>#kitstats{border-radius:var(--r);background:var(--s1);box-shadow:var(--sh2);padding:var(--pad)}
.raidset>.rlvl{grid-column:1;display:grid;gap:10px;align-content:center;justify-items:start}
.raidset>#kitstats{grid-column:2;grid-row:1/span 2}
.raidset:not(:has(>.rlvl:not([hidden])))>#kitstats{grid-column:1/-1;grid-row:auto}
.raidset:not(:has(>#raidlvlwrap:not([hidden])))>#kitstats{grid-row:1}
.raidset>.rlvl{align-self:stretch}
/* three settings on the ToA tab, so the numbers beside them span three rows */
.raidset:has(>#toapathwrap:not([hidden]))>#kitstats{grid-row:1/span 3}
/* the settings' card is where the team sizes live: eight across wrap into two rows of four once it is narrow */
.raidset>.rlvl{container-type:inline-size}
@container (max-width:620px){.teamcards:has(>:nth-child(6)){grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))}}
/* the four paths in order: a boss, its place, and the salts it is fought with */
.toapath{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%}
.tpb{display:grid;grid-template-columns:18px minmax(0,1fr) 18px;grid-template-rows:auto auto;align-items:center;
  justify-items:center;gap:2px;padding:8px 2px 7px;border-radius:var(--rs);background:var(--s2)}
.tpb .tpi{grid-column:2;position:relative;width:40px;height:40px;display:grid;place-items:center}
.tpb .tpi img{width:40px;height:40px;object-fit:contain}
.tpb .tpn{position:absolute;left:-4px;top:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:var(--s4);font-family:var(--mono);font-size:var(--t-label);font-weight:700;line-height:17px;
  text-align:center;color:var(--tx)}
.tpb .tpl{grid-column:1/-1;font-size:var(--t-label);font-weight:600;color:var(--tx2);white-space:nowrap}
.tpb .tpi .tps{position:absolute;right:-7px;bottom:-3px;width:17px;height:17px;object-fit:contain}
.tpb .tpmv{grid-row:1;width:18px;height:40px;border-radius:5px;font-size:var(--t-title);font-weight:700;
  line-height:1;color:var(--tx3)}
.tpb .tpmv:hover:not(:disabled){background:var(--s4);color:var(--tx)}
.tpb .tpmv:disabled{visibility:hidden}
.tpb .tpmv[data-dir="-1"]{grid-column:1}
.tpb .tpmv[data-dir="1"]{grid-column:3}
.toahint{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:var(--f1);color:var(--tx4)}
.toahint .toggle .tps{width:16px;height:16px;object-fit:contain}
.brb .dots .brsalt{width:14px;height:14px;object-fit:contain}
.potnote{margin:6px 0 0}
@media(max-width:900px){.raidset>.rlvl,.raidset>#kitstats{grid-column:1/-1;grid-row:auto}}
@media(max-width:560px){.teamcards{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))}}
/* three settings tall: the time on top and the tiles filling the rest, two by two */
@media(min-width:901px){.raidset:has(>#toapathwrap:not([hidden]))>#kitstats{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .raidset:has(>#toapathwrap:not([hidden]))>#kitstats .kst{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raidset:has(>#toapathwrap:not([hidden]))>#kitstats .ksh{align-content:start}
  .raidset:has(>#toapathwrap:not([hidden]))>#kitstats .ksv{font-size:var(--t-num-3xl)}
  /* a tall tile: its icon at the top, the figure and what it is at the foot */
  .raidset:has(>#toapathwrap:not([hidden]))>#kitstats .ksc{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;
    align-content:stretch;align-items:end;gap:4px;padding:18px 20px}
  .raidset:has(>#toapathwrap:not([hidden]))>#kitstats .ki{width:24px;height:24px;align-self:start}
  .raidset:has(>#toapathwrap:not([hidden]))>#kitstats .ksc b{font-size:var(--t-num-l)}}
/* half the page is too narrow for four tiles in a row */
@media(min-width:901px) and (max-width:1400px){#kitstats .kst{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){#kitstats .kst{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#kitstats{grid-template-columns:minmax(0,1fr)}}
.bigstat div{display:grid;gap:3px}
.bigstat .v{font-family:var(--mono);font-size:var(--f5);font-weight:700;letter-spacing:-.03em}
/* The switch count is what you are choosing between, so it is the number; the clear time is
   what it buys you; everything else is fine print. One card each, all the same size. */
.curve{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(112px,100%),1fr));gap:8px}
.crow{display:grid;gap:2px;justify-items:center;padding:15px 8px 13px;border-radius:var(--r);
  background:var(--s2);text-align:center}
.crow:hover{background:var(--s3)}
.crow.on{background:var(--sel);color:var(--tx)}
/* the switch count is the whole point of the strip, so it is the size of one */
.crow .cl{font-family:var(--mono);font-size:var(--t-num-3xl);font-weight:800;letter-spacing:-.055em;
  line-height:.92}
@media(max-width:900px){.crow .cl{font-size:var(--t-num-2xl)}}
.crow .cw{font-size:var(--f0);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx4)}
.crow.on .cw{color:var(--tx3)}
.crow .cv{font-family:var(--mono);font-size:var(--f3);font-weight:700;margin-top:5px}
.crow .cx{font-size:var(--f0);color:var(--tx4);font-family:var(--mono)}
.crow.on .cx{color:var(--tx3)}

.modal .mh{padding:17px var(--pad) 14px;display:flex;align-items:center;gap:12px;background:var(--s2)}
.modal .mh h3{flex:1}
.modal .sb{padding:13px var(--pad);background:var(--s2);display:grid;gap:11px}
/* ---------- every item ---------- */
/* wide enough that an item's name is its name rather than the first nine letters of it */
.itgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:8px}
.facets .fchip img{width:16px;height:16px;object-fit:contain;image-rendering:pixelated}
.itcard{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:9px 11px;border-radius:var(--rs);background:var(--s1)}
.itcard.own{background:var(--s2)}
.itcard .ita{width:38px;height:38px;display:grid;place-items:center}
.itcard .ita img{max-width:38px;max-height:38px;object-fit:contain}
.itcard .itt{display:grid;gap:1px;min-width:0}
.itcard .itt b{font-size:var(--f2);font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.itcard .itt span{font-size:var(--f0);color:var(--tx4);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.itcard .ownt{flex:none;width:80px;padding:0;height:30px;font-size:var(--f0);text-align:center}
.itcard .viewbtn{height:30px;padding:0 9px}
.srch{width:100%;padding:11px 14px;border-radius:11px;background:var(--s1);font-weight:600;box-shadow:var(--sh1)}
.mb{overflow-y:auto;padding:12px}
.facets{display:flex;flex-wrap:wrap;gap:6px}
.facets .fchip{display:inline-flex;align-items:center;gap:5px;font-size:var(--f1);font-weight:600;padding:7px 13px;border-radius:99px;background:var(--s1);
  color:var(--tx3);box-shadow:var(--sh1)}
.fchip:hover{color:var(--tx)}
.fchip.on{background:var(--sel);color:var(--tx)}
.fchip.tier.on{background:var(--info);color:var(--s1)}
.picker{padding:var(--pad);display:grid;gap:13px;margin-top:12px}
.picker[hidden]{display:none!important}
.pickhead{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.pickhead .srch{max-width:320px}
.pickhead .mini{margin-left:auto}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(232px,100%),1fr));gap:10px;
  max-height:min(58vh,520px);overflow-y:auto;padding:2px}
.bc{background:var(--s2);display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--s1);
  border-radius:var(--rs);text-align:left;width:100%;min-height:94px}
/* A panel, its search, its filters and its 267 cards were all --s1. With borders banned a step
   in background is the only thing that separates anything, so these are the steps. */
.picker .srch,.pickbox .srch,.gm .srch{background:var(--slotDeep);box-shadow:none}
.picker .srch:focus-visible,.pickbox .srch:focus-visible,.gm .srch:focus-visible{outline:none;background:var(--s3)}
.picker .fchip{background:var(--s2)}
.bc:hover{background:var(--s3)}
.bc.on{background:var(--sel);color:var(--tx)}
.bc img{width:74px;height:74px;object-fit:contain;flex:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.25))}
.bc .bn{font-size:var(--f2);font-weight:700;line-height:1.25}
.bc .bm{font-family:var(--mono);font-size:var(--f0);color:var(--tx2);margin-top:2px}
.bc.on .bm{color:var(--tx3)}
.opt{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:11px;min-height:56px;
  text-align:left;width:100%}
.opt:hover{background:var(--s2)}
.opt.sel{background:var(--sel)}
.opt img{width:34px;height:34px;object-fit:contain;flex:none}
.opt .g{flex:1;min-width:0}
.opt .g .nm{font-weight:700;font-size:var(--f2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt .g .mt{font-size:var(--f1);color:var(--tx2);font-family:var(--mono);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A third line, only on the rows that need one. The numbers above it are mono because they are
   numbers; this is a sentence, so it is prose, and a step dimmer than them because it explains
   the row rather than ranking it. */
.opt .g .cond{font-size:var(--f1);color:var(--tx3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt.unowned img{opacity:1}
.opt.unowned .nm{color:var(--tx3)}
.optrow{position:relative;aspect-ratio:1;border-radius:8px;background:var(--slot);min-width:0}
.optrow:hover{background:var(--s4)}
.optrow:has(.opt.sel){background:var(--sel)}
.optrow .opt{position:absolute;inset:0;display:grid;place-items:center;min-height:0;padding:0;border-radius:8px;background:none}
.optrow .opt:hover,.optrow .opt.sel{background:none}
.optrow .opt img{width:60%;height:60%;object-fit:contain}
.optrow .oe{font-size:var(--t-title);color:var(--tx3)}
.optrow .od{position:absolute;left:5px;bottom:3px;font-family:var(--mono);font-size:var(--t-label);color:var(--tx2);line-height:1}
.ownt{font-size:var(--f0);font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:7px 11px;
  border-radius:99px;background:var(--s3);color:var(--tx3);white-space:nowrap;flex:none}
.ownt:hover{background:var(--s3);color:var(--tx2)}
.ownt.on{background:var(--sel);color:var(--tx)}
@media(max-width:560px){.ov{padding:0;place-items:end center}
}

/* ---------- home ---------- */
.homehead{margin-top:26px}
.homehead h2{font-size:var(--f6);font-weight:800;letter-spacing:-.03em}
.homehead .dek{margin-top:6px;font-size:var(--f2);color:var(--tx2);max-width:104ch;font-weight:500}
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.raids{margin:0 0 18px}
.raidcard{min-height:210px}
.raidcard.on{background:var(--s2)}
.raidcard.on .scrimg{background:linear-gradient(96deg,var(--s2) 30%,
  color-mix(in srgb,var(--s2) 88%,transparent) 50%,
  color-mix(in srgb,var(--s2) 30%,transparent) 78%,transparent)}
.raidcard.on .mk2{color:var(--acc)}

/* ---------- the switches that decide what the solver may reach for ---------- */
.toolbar{display:grid;gap:11px;justify-items:start;margin:0 0 6px}
.toolbar .trow{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
/* The two filters: three and four options each, flipped between while comparing rather than set
   once, so pills rather than a dropdown. Every rule here is scoped to .pickrow - an unscoped
   .pill{} restyled the fourteen "Affordable now" and "grind" pills elsewhere in the app, which is
   what a second rule for a class somebody else already owns always does. */
.toolbar .pickrow{margin-top:10px;align-items:center}
/* beside a heading, both rows end at the right edge */
@media(min-width:900px){.sec-h>.toolbar{justify-items:end}
  .sec-h>.toolbar .trow{justify-content:flex-end}}
/* the picture sits inside the pill, ahead of the word */
.pickrow .pill{display:inline-flex;align-items:center;gap:7px}
.pickrow .pill .pli{width:17px;height:17px;flex:none;object-fit:contain}
.pickrow .plbl{font-size:var(--f0);color:var(--tx4);text-transform:uppercase;letter-spacing:.06em;
  margin-right:2px}
.pickrow .plbl:not(:first-child){margin-left:10px}
.pickrow .pill{display:inline-block;padding:7px 13px;border-radius:99px;background:var(--s2);
  font-size:var(--f1);font-weight:600;color:var(--tx3);white-space:nowrap;cursor:pointer}
.pickrow .pill:hover{background:var(--s3);color:var(--tx2)}
.pickrow .pill.on{background:color-mix(in srgb,var(--tx) 14%,var(--s2));color:var(--tx)}
.toggle.wep{background:var(--s2);color:var(--tx2)}
.toggle.wep .box{display:none}
.toggle.wep .cv{font-family:var(--mono);font-size:var(--f0);color:var(--tx4);margin-left:3px}
.toggle.wep.on{background:var(--s3);color:var(--tx)}
.speclist{display:grid;gap:5px;width:100%;max-width:620px;padding:14px 15px;border-radius:var(--r);
  background:var(--s1)}
.speclist .note{margin:0 0 4px}
.specopt{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:3px 11px;
  align-items:center;padding:9px 11px;border-radius:var(--rs);text-align:left}
.specopt:hover{background:var(--s2)}
.specopt.on{background:var(--sel)}
.specopt img{width:30px;height:30px;object-fit:contain;grid-row:span 2}
.specopt .nm{font-size:var(--f2);font-weight:700}
.specopt.on .nm{color:var(--accTx)}
.specopt .dv{font-family:var(--mono);font-size:var(--f2);font-weight:700;color:var(--good);text-align:right}
.specopt .mt{grid-column:2;font-size:var(--f0);color:var(--tx4);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.specopt .own{font-family:var(--mono);font-size:var(--f0);color:var(--tx4);text-align:right}
.specopt.no{opacity:.45}
@media(max-width:900px){.modes{grid-template-columns:1fr}}
.mode{position:relative;min-height:236px;border-radius:var(--r);overflow:hidden;background:var(--s1);
  box-shadow:var(--sh2);text-align:left;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad);transition:transform .15s,box-shadow .15s}
.mode:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.mode .art{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;
  padding-right:6px;gap:2px;pointer-events:none}
.mode .art img{height:88%;max-height:190px;object-fit:contain;opacity:.95;
  filter:drop-shadow(0 7px 16px rgba(0,0,0,.3))}
.mode .art img:nth-child(2){height:64%;opacity:.6;margin-right:-14px;order:-1}
.mode .art img:nth-child(3){height:50%;opacity:.38;margin-right:-22px;order:-2}
.mode .scrimg{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg,var(--s1) 30%,color-mix(in srgb,var(--s1) 88%,transparent) 50%,
    color-mix(in srgb,var(--s1) 30%,transparent) 78%,transparent)}
.mode .mt{position:relative;display:grid;gap:6px}
.mode .mk2{font-size:var(--f0);font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accTx)}
.mode h3{font-size:var(--f5);font-weight:800;letter-spacing:-.025em}
.mode p{font-size:var(--f2);color:var(--tx2);font-weight:500;max-width:32ch;line-height:1.5}
/* the card is bottom-aligned, so an unreserved blurb band drops the short card's title out of
   line. max-width:32ch pins every blurb to 280px whatever the card width, which wraps the three
   raid strings to 3, 3 and 2 lines - reserve the 3-line case and all three eyebrows, titles and
   blurbs share a baseline, with nothing clipped and no empty line left over. */
.raidcard p{min-height:calc(1.5em * 3)}
.mode .go{margin-top:6px;font-size:var(--f1);font-weight:700;color:var(--tx)}
.mode .stat{position:relative;display:flex;gap:16px;margin-top:10px;flex-wrap:wrap}
.mode .stat b{font-family:var(--mono);font-size:var(--f3);font-weight:700;display:block}
.mode .stat span{font-size:var(--f0);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx4)}

footer{margin-top:56px;padding:24px 0 0;font-size:var(--f1);color:var(--tx3);line-height:1.65;display:grid;
  gap:18px;font-weight:500}
footer b{color:var(--tx2);font-weight:700}

/* ---------- feedback ----------
   A round button in the corner of every page and the small dialog it opens (detail.js). It floats, so it
   takes no space and moves nothing; the page's own 88px of bottom padding lets the last line of any page
   scroll clear of it. It sits under the account menu (z-index 300) and its phone sheet, and above the page.
   Separation is surface and shadow, never a line. Sizes are role tokens. */
.fbk-fab{position:fixed;right:20px;bottom:20px;z-index:290;width:56px;height:56px;
  border-radius:99px;display:grid;place-items:center;background:var(--s3);box-shadow:var(--sh3);
  transition:background .12s ease}
.fbk-fab:hover{background:var(--s4)}
.fbk-fab[aria-expanded=true]{background:var(--s4)}
.fbk-fab img{width:38px;height:36px;display:block;image-rendering:pixelated}
.fbk-panel{position:fixed;right:20px;bottom:88px;z-index:291;width:min(392px,calc(100vw - 40px));
  max-height:calc(100dvh - 160px);overflow:hidden auto;overscroll-behavior:contain;padding:var(--pad);
  border-radius:var(--r);background:var(--s2);box-shadow:var(--sh3);display:grid;grid-template-columns:minmax(0,1fr);gap:14px;
  font-family:var(--sans);color:var(--tx);text-align:left}
.fbk-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fbk-head h2{font-size:var(--t-title);font-weight:800;letter-spacing:-.015em;margin:0}
.fbk-x{width:32px;height:32px;border-radius:99px;display:grid;place-items:center;flex:none;
  font-size:var(--t-lede);line-height:1;color:var(--tx3)}
.fbk-x:hover{background:var(--s3);color:var(--tx)}
.fbk-form{display:grid;gap:12px}
.fbk-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fbk-type{display:grid;grid-template-rows:32px auto;justify-items:center;align-content:start;gap:6px;
  padding:10px 6px;border-radius:var(--rs);background:var(--s1);color:var(--tx);min-width:0}
.fbk-type:hover{background:var(--s3)}
.fbk-type.on{background:var(--sel);color:var(--tx)}
.fbk-ic{height:32px;display:grid;place-items:center}
.fbk-ic img{max-width:32px;max-height:32px;display:block;image-rendering:pixelated}
.fbk-tt{display:grid;gap:1px;justify-items:center;min-width:0;max-width:100%}
.fbk-tt b{font-size:var(--t-ui);font-weight:700;white-space:nowrap}
.fbk-tt em{font-style:normal;font-size:var(--t-meta);color:var(--tx3);white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis}
.fbk-type.on .fbk-tt em{color:var(--tx3)}
.fbk-field{display:grid;gap:6px}
.fbk-lblrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.fbk-count,.fbk-opt{font-family:var(--mono);font-size:var(--t-meta);color:var(--tx3)}
.fbk-count.full{color:var(--warn)}
.fbk-field textarea,.fbk-field input{width:100%;padding:10px 12px;border-radius:var(--rs);background:var(--slotDeep);
  color:var(--tx);font-family:var(--sans);line-height:1.45}
.fbk-field textarea{resize:vertical;min-height:108px;max-height:260px}
/* screenshots: up to five square previews in a row, each with its remove button, and the add button under them */
.fbk-field .fbk-file{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;opacity:0;pointer-events:none}
.fbk-shots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.fbk-shots:empty{display:none}
.fbk-shot{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--slotDeep)}
.fbk-shot img{width:100%;height:100%;object-fit:cover;display:block}
.fbk-shot button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:99px;display:grid;
  place-items:center;background:var(--s1);color:var(--tx);font-size:var(--t-ui);line-height:1}
.fbk-shot button:hover{background:var(--s3)}
.fbk-add{justify-self:start;padding:8px 12px;border-radius:var(--rs);background:var(--s2);font-size:var(--t-ui);
  font-weight:600;color:var(--tx2)}
.fbk-add:hover{background:var(--s3);color:var(--tx)}
.fbk-field textarea::placeholder,.fbk-field input::placeholder{color:var(--tx4)}
.fbk-field textarea:focus-visible,.fbk-field input:focus-visible{outline:2px solid var(--acc);outline-offset:0}
.fbk-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.fbk-check{position:relative;display:flex;align-items:center;gap:9px;width:fit-content;cursor:pointer;
  font-size:var(--t-ui);font-weight:600;color:var(--tx)}
.fbk-check input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.fbk-check .box{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;flex:none;
  font-size:var(--t-meta);background:var(--slotDeep);color:transparent}
.fbk-check input:checked+.box{background:var(--good);color:var(--s1)}
.fbk-check input:focus-visible+.box{outline:2px solid var(--acc);outline-offset:2px}
.fbk-preview,.fbk-always{margin:0;font-size:var(--t-text);line-height:1.5;color:var(--tx3);overflow-wrap:anywhere}
.fbk-err{margin:0;min-height:1.45em;font-size:var(--t-text);font-weight:600;line-height:1.45;color:var(--bad)}
.fbk-actions{display:flex;gap:8px}
.fbk-actions .btn[aria-disabled=true]{opacity:.6;cursor:progress}
.fbk-actions .btn.alt,.fbk-done .btn.alt{background:var(--s3)}
.fbk-actions .btn.alt:hover,.fbk-done .btn.alt:hover{background:var(--s4)}
.fbk-done{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px}
.fbk-done img{width:32px;height:30px;justify-self:center;image-rendering:pixelated}
.fbk-dt{display:grid;gap:2px}
.fbk-dt b{font-size:var(--t-title)}
.fbk-dt span{font-size:var(--t-text);color:var(--tx3)}
.fbk-done .btn{grid-column:1/-1;justify-self:start}
@media(max-width:560px){
  .fbk-fab{right:20px;bottom:24px;width:56px;height:56px}
  .fbk-fab img{width:38px;height:36px}
  /* the whole screen, inside the notch and the home bar, not a bubble over the page */
  .fbk-panel{inset:0;width:auto;height:auto;max-height:none!important;border-radius:0;box-shadow:none;
    align-content:start;gap:16px;background:var(--bg);
    padding:calc(env(safe-area-inset-top) + 16px) 18px calc(env(safe-area-inset-bottom) + 18px)}
  .fbk-field textarea{min-height:132px}
  .fbk-tt em{display:none}
}
/* The privacy notice and its switch. Two columns on the same split as the row above it, so the notice
   lines up under the disclaimer and the switch under the account note; one column on a phone. Sentences
   are --t-text and the one control is --t-ui, like every other footer line and toggle. */
.fpriv{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start}
/* the privacy page */
.pv{display:grid;gap:12px}
.pvh{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--t-title);font-weight:700;color:var(--tx)}
.pvh img{width:26px;height:26px;object-fit:contain}
.pvp{margin:0;max-width:860px;font-size:var(--t-text);line-height:1.7;color:var(--tx3)}
.pvp b{color:var(--tx)}
.pvp a,.pvcard a,.pvrow a{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
.pvgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pvcard,.pvrow{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;
  padding:16px 20px 16px 16px;border-radius:var(--r);background:var(--s1)}
.pvic{display:block;width:32px;height:32px;margin-top:1px;object-fit:contain;image-rendering:pixelated;
  background-size:contain;background-repeat:no-repeat;background-position:center}
.pvcard b,.pvrow b{display:block;margin-bottom:4px;font-size:var(--t-text);font-weight:700;color:var(--tx)}
.pvcard p,.pvrow p{margin:0;font-size:var(--t-text);line-height:1.6;color:var(--tx3)}
.pvrows{display:grid;gap:8px}
.pvlist{padding:16px 20px;border-radius:var(--r);background:var(--s1)}
.pvlist h4{margin:0 0 12px;font-size:var(--f0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx4)}
.pvlist ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pvlist li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;
  font-size:var(--t-text);line-height:1.55;color:var(--tx2)}
.pvlist li::before{display:grid;place-items:center;width:22px;height:22px;border-radius:99px;background:var(--s3);
  font-size:var(--f0);font-weight:700;color:var(--tx)}
.pvlist.yes li::before{content:"\2713"}
.pvlist.no li::before{content:"\2715"}
.pvt{display:grid;grid-template-columns:40px minmax(0,1fr) 190px;gap:14px;align-items:center;
  padding:14px 20px 14px 16px;border-radius:var(--r);background:var(--s1)}
.pvt b{display:block;margin-bottom:3px;font-size:var(--t-text);font-weight:700;color:var(--tx)}
.pvt p{margin:0;font-size:var(--t-text);line-height:1.6;color:var(--tx3)}
.pvkeep{justify-self:end;text-align:right;font-family:var(--mono);font-size:var(--f1);font-weight:600;color:var(--tx)}
.pvkeep span{display:block;font-family:var(--sans);font-size:var(--f0);font-weight:600;color:var(--tx4)}
@media(max-width:760px){.pvgrid{grid-template-columns:1fr}
  .pvt{grid-template-columns:40px minmax(0,1fr)}.pvkeep{grid-column:2;justify-self:start;text-align:left}}
.fprivtx{display:grid;gap:6px;min-width:0}
.fprivmore summary{cursor:pointer;width:fit-content;font-size:var(--t-ui);font-weight:600;color:var(--tx3)}
.fprivmore summary:hover{color:var(--acc)}
.fprivmore ul{margin:8px 0 0;padding-left:18px;display:grid;gap:6px;font-size:var(--t-text);line-height:1.6;color:var(--tx3)}
.fprivsw{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.fprivsw .toggle{flex:none}
.fprivst{font-size:var(--t-text);line-height:1.5;color:var(--tx3)}
@media(max-width:760px){.fpriv{grid-template-columns:1fr;gap:12px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- item tooltip ---------- */
#tip{position:fixed;z-index:400;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .11s ease,transform .11s ease;max-width:290px}
#tip.on{opacity:1;transform:translateY(0)}
:is(#tip,#mcur,#statsheet) .box{background:var(--s2);border-radius:var(--rs);padding:13px 15px;box-shadow:var(--sh3);
  display:grid;gap:9px}
:is(#tip,#mcur,#statsheet) .th{display:flex;align-items:center;gap:10px}
:is(#tip,#mcur,#statsheet) .th img{width:32px;height:32px;object-fit:contain;flex:none}
:is(#tip,#mcur,#statsheet) .th b{font-size:var(--f2);line-height:1.25}
:is(#tip,#mcur,#statsheet) .th .sl{font-size:var(--f0);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx4)}
:is(#tip,#mcur,#statsheet) .rows{display:grid;gap:3px}
:is(#tip,#mcur,#statsheet) .r{display:flex;gap:10px;font-size:var(--f1);align-items:baseline}
:is(#tip,#mcur,#statsheet) .r span{color:var(--tx3);flex:1;white-space:nowrap}
:is(#tip,#mcur,#statsheet) .r b{font-family:var(--mono);font-weight:700}
:is(#tip,#mcur,#statsheet) .r b.pos{color:var(--good)} :is(#tip,#mcur,#statsheet) .r b.neg{color:var(--bad)}
:is(#tip,#mcur,#statsheet) .fx{font-size:var(--f1);line-height:1.5;color:var(--acc);font-weight:600}
:is(#tip,#mcur,#statsheet) .pr{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--f2);
  font-weight:700}
:is(#tip,#mcur,#statsheet) .pr::before{content:"";width:14px;height:14px;background-image:var(--ic-coin);
  background-size:contain;background-repeat:no-repeat}
/* the equipment stats screen: five columns for stab, slash, crush, magic and ranged, attack over defence, then
   the four that stand alone; a nought is dimmed, not dropped */
:is(#tip,#mcur,#statsheet) .box.full{width:300px}
:is(#tip,#mcur,#statsheet) .th .tpr{margin-left:auto;align-self:flex-start;padding-top:2px;font-family:var(--mono);font-size:var(--f1);font-weight:700;color:var(--tx)}
:is(#tip,#mcur,#statsheet) .tstats{display:grid;grid-template-columns:62px repeat(5,minmax(0,1fr));gap:5px 4px;align-items:center}
:is(#tip,#mcur,#statsheet) .tstats .sicon{width:16px;height:16px;justify-self:center}
:is(#tip,#mcur,#statsheet) .tstats b,:is(#tip,#mcur,#statsheet) .tother b{font-family:var(--mono);font-size:var(--f1);font-weight:700;text-align:center;color:var(--tx)}
:is(#tip,#mcur,#statsheet) .tstats .tl{font-size:var(--f0);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx4)}
:is(#tip,#mcur,#statsheet) .tother{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:7px 0 6px;border-radius:9px;
  background:var(--s1)}
:is(#tip,#mcur,#statsheet) .tother span{display:grid;gap:2px;justify-items:center}
:is(#tip,#mcur,#statsheet) .tother i{font-style:normal;font-size:var(--f0);color:var(--tx4);white-space:nowrap}
/* the phone sheet's cards colour their bonuses like the hover card */
:is(#tip,#mcur,#statsheet) b.pos{color:var(--good)} :is(#tip,#mcur,#statsheet) b.neg{color:var(--bad)}
:is(#tip,#mcur,#statsheet) b.nil{color:var(--tx4);font-weight:600}
/* on a gear board: what the square beats among what you own, and the upgrade it points to */
:is(#tip,#mcur,#statsheet) .tboard{display:grid;gap:8px;padding-top:2px}
:is(#tip,#mcur,#statsheet) .tln{font-size:var(--f1);line-height:1.45;color:var(--tx2)}
:is(#tip,#mcur,#statsheet) .tln b{font-family:var(--mono)}
:is(#tip,#mcur,#statsheet) .tup{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 10px 7px 7px;
  border-radius:9px;background:var(--s3)}
:is(#tip,#mcur,#statsheet) .tup img{width:26px;height:26px;object-fit:contain;justify-self:center}
:is(#tip,#mcur,#statsheet) .tup .t{display:grid;gap:1px;min-width:0}
:is(#tip,#mcur,#statsheet) .tup .t b{font-size:var(--f1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#tip,#mcur,#statsheet) .tup .t span{font-size:var(--f0);color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#tip,#mcur,#statsheet) .tup>b{font-family:var(--mono);font-size:var(--f1)}

/* ---------- world map ----------
   The map is the only place in the app where something has to sit *on top of* something else,
   so the controls and the attribution are the one legitimate use of a floating panel: they get
   the page background at 80% with a blur behind them rather than a box with an edge. */
.maplay{margin-top:9px}
/* The search and every layer in one row above the map, because a column of controls beside a
   map is that much map you cannot see. */
.maptools{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:16px}
/* the pill row is its own line under the title and the search, rather than flowing after them */
.mlayers{flex-basis:100%}
.maptools .srch{width:236px;flex:none;height:36px;padding:0 14px;background:var(--s1)}
.maptools .toggle{height:36px}
.maph2{font-size:var(--f5);letter-spacing:-.025em;margin-right:5px}
@media(max-width:760px){.maph2{width:100%}}
/* height comes from the renderer: whatever is left of the window under the controls. The
   fallback is only what it looks like before that runs. */
.mapstage{position:relative;overflow:hidden;border-radius:var(--r);background:var(--slotDeep);
  box-shadow:var(--sh2);height:min(70vh,760px);touch-action:none;cursor:grab;
  contain:paint;user-select:none}
/* This used to take the whole window on the grounds that the map is the product here. On a wide
   monitor that reads as the one page element ignoring the grid everything else keeps to, so it
   keeps to the column. The height is unchanged. */
.mapbleed{width:100%;margin-left:0}
.mapstage.grab{cursor:grabbing}
@media(max-width:1000px){.mapstage{height:min(62vh,560px)}}
@media(max-width:620px){.maptools .srch{width:100%}}
.mtiles,.mmarks{position:absolute;inset:0}
.mmarks{pointer-events:none}
.mtiles img{position:absolute;display:block;image-rendering:pixelated;-webkit-user-drag:none;
  user-select:none;pointer-events:none}
.mtiles img.und{opacity:.28;filter:grayscale(.5)}

/* pins are drawn, not boxed - a coloured dot with a ring of page colour round it reads on both
   the bright grass and the near-black cave floor without needing an outline */
.mpin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;display:grid;
  justify-items:center;gap:2px;padding:0;line-height:1}
.mpin i{display:block;width:13px;height:13px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 2.5px var(--bg),0 1px 3px rgba(0,0,0,.7)}
/* an NPC pin is small on purpose - there are three thousand of them, and the one you want is
   the one you searched for */
.mpin.npc i{width:9px;height:9px;background:var(--info)}
.mpin.npc.sel i{background:var(--acc);width:13px;height:13px}
.mpin.npc b{background:color-mix(in srgb,var(--bg) 82%,transparent);color:var(--tx2)}
.mpin.tree i{background:var(--good)}
.mpin.boss i{width:15px;height:15px;background:var(--stM)}
.mpin b{font-family:var(--mono);font-size:var(--t-label);font-weight:700;letter-spacing:.04em;
  color:var(--tx);background:color-mix(in srgb,var(--bg) 82%,transparent);padding:1px 4px;
  border-radius:5px;white-space:nowrap;max-width:132px;overflow:hidden;text-overflow:ellipsis}
.mpin.boss b{font-family:var(--sans);letter-spacing:0}
.mpin:hover i{transform:scale(1.25)}
.mpin.sel i{background:var(--acc2);box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--acc)}
.mpin.poi{width:20px;height:20px;background-size:contain;background-repeat:no-repeat;
  background-position:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.mpin.poi:hover{transform:translate(-50%,-50%) scale(1.3)}

.mfloat{position:absolute;z-index:4;background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(12px);border-radius:11px;padding:5px;display:flex;gap:4px;
  box-shadow:var(--sh2)}
.mzoom{top:12px;right:12px;flex-direction:column}
.mplanes{top:12px;left:12px}
.mplanes .mlbl2{font-size:var(--f0);color:var(--tx4);text-transform:uppercase;letter-spacing:.06em;
  padding:0 7px 0 3px;align-self:center}
/* the way out of a dungeon, offered only where there is one */
.mup{top:12px;left:190px;padding:0 12px;font-size:var(--f0);font-weight:700;white-space:nowrap}
/* a line somebody is still reading is not a line to overwrite */
.mhint.said{color:var(--accTx)}
.mfloat button{width:30px;height:30px;border-radius:8px;font-size:var(--f2);font-weight:700;
  color:var(--tx3);display:grid;place-items:center;font-family:var(--mono)}
.mfloat button:hover{color:var(--tx);background:var(--s2)}
.mfloat button.on{background:var(--sel);color:var(--tx)}
.mattr{position:absolute;z-index:4;right:12px;bottom:12px;font-size:var(--f0);line-height:1.5;
  color:var(--tx3);background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px);
  padding:4px 9px;border-radius:8px;max-width:60%;text-align:right}
.mattr a{color:var(--tx2);text-decoration:underline;text-underline-offset:2px}
.mhere{position:absolute;z-index:4;left:12px;bottom:12px;font-family:var(--mono);font-size:var(--f0);
  color:var(--tx3);background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px);
  padding:4px 9px;border-radius:8px}
/* on a phone the credit and the coordinate readout cannot share the bottom edge, and the
   credit is the one that has to be there */
@media(max-width:620px){.mhere{display:none}.mattr{max-width:none;left:12px}}

/* the popup is the one thing on this page that genuinely floats, so it is the one thing with
   a real shadow under it */
.mpop{position:absolute;z-index:6;transform:translate(-50%,calc(-100% - 16px));width:250px;
  background:var(--s1);border-radius:var(--r);box-shadow:var(--sh3);padding:14px;display:grid;
  gap:9px;pointer-events:auto}
.mpop h4{font-size:var(--f3);letter-spacing:-.01em}
.mpop .msub{font-size:var(--f1);color:var(--tx2);line-height:1.5}
.mpop .mxy{font-family:var(--mono);font-size:var(--f0);color:var(--tx4);letter-spacing:.04em}
.mpop .mart{display:flex;align-items:center;gap:11px}
.mpop .mart img{width:52px;height:52px;object-fit:contain;flex:none}
.mpop .btn{padding:9px 14px;font-size:var(--f1);justify-self:start}
.mpop .mclose{position:absolute;top:8px;right:9px;color:var(--tx4);font-size:var(--f4);
  line-height:1;padding:2px 5px}
.mpop .mclose:hover{color:var(--tx)}

/* Every layer is a pill carrying the game's own icon for the thing it draws, so the row reads
   as a legend as much as a set of switches. The checkbox goes - with an icon and a green
   on-state there is nothing left for it to say. */
.mlayers{display:flex}
/* Thirteen pills lit green is a traffic light, not a legend. Being on is the ordinary state of
   every one of these, so on is simply a lighter surface and the icon carries the identity. */
/* one row, always - it scrolls sideways rather than wrapping a single pill onto a line of
   its own, which is the worst of both */
.mlayers{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  max-width:100%;padding-bottom:1px;
  /* the last 30px fade out, so a pill cut off at the edge reads as "there is more" rather
     than as a clipping bug. The mask only bites when there is something to scroll to. */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
.mlayers::-webkit-scrollbar{display:none}
.mlayers.fits{-webkit-mask-image:none;mask-image:none}
.mlayers .toggle{height:30px;padding:0 9px 0 6px;gap:5px;background:var(--s1);color:var(--tx4);
  font-size:var(--f0);letter-spacing:.01em}
.mlayers .toggle .box{display:none}
.mlayers .toggle:hover{background:var(--s2);color:var(--tx2)}
.mlayers .toggle.on{background:var(--s3);color:var(--tx)}
.mlayers .mli{width:16px;height:16px;object-fit:contain;flex:none;image-rendering:pixelated;
  opacity:.4;filter:grayscale(1);transition:opacity .14s,filter .14s}
.mlayers .toggle.on .mli{opacity:1;filter:none}
.mapn{font-family:var(--mono);font-size:var(--f0);font-weight:700;opacity:.55}
/* in the control row rather than under it, where it costs no height */
/* on the map rather than above it - a hint about panning belongs in front of the thing you pan */
.mhint{position:absolute;z-index:4;left:12px;bottom:47px;margin:0;max-width:30ch;
  font-size:var(--f0);line-height:1.5;color:var(--tx3);
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px);
  padding:4px 9px;border-radius:8px;pointer-events:none}
@media(max-width:900px){.mhint{display:none}}
/* the list has nowhere to sit in a row, so it is a panel over the map that opens when you
   search and closes when you are done */
.mfind{position:absolute;z-index:5;left:12px;top:58px;width:308px;max-width:calc(100% - 24px);
  max-height:calc(100% - 70px);
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);
  border-radius:var(--r);box-shadow:var(--sh3);padding:11px;display:grid;
  grid-template-rows:auto minmax(0,1fr);gap:10px}
/* the game's own three columns of four letters */
.fdial{display:grid;gap:9px}
.fdgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.fdcol{display:grid;gap:4px}
.fdb{height:30px;border-radius:8px;background:var(--s2);font-family:var(--mono);
  font-size:var(--f2);font-weight:700;color:var(--tx3);letter-spacing:.04em}
.fdb:hover{background:var(--s3);color:var(--tx)}
.fdb.on{background:var(--sel);color:var(--tx)}
.fdb.no{opacity:.25;pointer-events:none}
.fdout{display:flex;align-items:center;gap:9px;min-height:30px}
.fdout b{font-family:var(--mono);font-size:var(--f4);font-weight:700;letter-spacing:.14em;
  color:var(--accTx)}
.fdout span{font-size:var(--f1);color:var(--tx3);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mapfind{display:grid;gap:2px;max-height:min(58vh,540px);overflow-y:auto}
.mapfind::-webkit-scrollbar{width:8px}
.mapfind::-webkit-scrollbar-thumb{background:var(--s3);border-radius:99px}
.maprow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--rs);
  text-align:left;width:100%;color:var(--tx2)}
.maprow:hover{background:var(--s2);color:var(--tx)}
.maprow.on{background:var(--s3);color:var(--tx)}
.maprow .kind{font-family:var(--mono)}
.maprow .t{flex:1;min-width:0;display:grid;gap:1px}
.maprow .t b{font-size:var(--f1);font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.maprow .t span{font-size:var(--f0);color:var(--tx4);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.maprow .kind{font-size:var(--f0);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx4);flex:none}
.mnores{padding:16px 10px;font-size:var(--f1);color:var(--tx3)}
.dskel{display:grid;gap:14px;padding:26px 0}
.dskel i{display:block;height:13px;border-radius:7px;background:var(--s2);
  animation:dpulse 1.1s ease-in-out infinite}
.dskel i:nth-child(1){width:180px}
.dskel i:nth-child(2){width:56%;height:30px}
.dskel i:nth-child(3){width:78%}
.dskel i:nth-child(4){width:64%}
@keyframes dpulse{0%,100%{opacity:.45}50%{opacity:.8}}
/* ---------- a box waiting for an answer ----------
   These are not placeholders standing in for cards. The skeleton is the card: same element,
   same classes, a placeholder string of about the right length, so the height it holds is the
   height the answer lands in rather than a guess at it. Only the runs that will become numbers
   are painted over; every label around them is the real label, because none of them is waiting
   on anything. .kw sits on the skeleton's own root and never on the container, so when a
   renderer replaces the markup there is nothing left behind to unset. */
.kw{pointer-events:none}
/* colour is forced because a few of the runs this sits on are coloured by a three-class rule of
   their own - .pcard .hd .s is one - and a placeholder string showing through its own bar is
   worse than no skeleton at all. */
.kw .kb{color:transparent!important;background:var(--s3);border-radius:6px;
  animation:dpulse 1.25s ease-in-out infinite}
/* One line of a paragraph that has not arrived. Deliberately no height: the   inside takes
   the line-height of whatever it is sitting in, so a note (1.5) and a room's reason (1.62) both
   come out right without either number being written down a second time. */
.kw .kl{display:block;color:transparent!important;background:var(--s3);border-radius:6px;
  animation:dpulse 1.25s ease-in-out infinite}
/* last line of a paragraph is short, the way a last line is */
.kw .kl:last-child{width:62%}
@media (prefers-reduced-motion:reduce){.kw .kb,.kw .kl{animation:none}}
.badge img.spico{width:16px;height:16px;object-fit:contain;
  image-rendering:pixelated;margin-right:2px}
/* ================================================================ legibility
   "Desktop is most important for font sizes - needs to be much bigger everywhere can hardly read it".
   The role tokens in :root carry the sizes and --f0..--f7 are aliases of them. This block re-points the
   rules whose job is not the one their old token now names, then makes the room bigger type needs.
   It sits last so that it wins on source order alone: every selector here has the specificity of the
   rule it corrects, so a more specific rule elsewhere (a state, an id scope) still wins as it did. */

/* ---- sizes by role ---- */
.drw .mlbl{font-size:var(--t-label)}
/* meta: the slot, the price, the count, the time - short, beside or under a name */
.logo .sub,.wpo .s,.wrow .s,.catb .n,.cabs,.cabn,.hbuy .ht span,.hitem .ht span,.petc .sub,
.petc .n em,.dt .tv,.ct .tp,.cadet-h .t span,.casub,.cbrow .sub,.ctask .pc,.gchips .clbl,.gcard .gt .sub,
.sk .rt .xp,.sk .xp,.kcup .pct,.linkrow .lknote,.trybar .tt span,.wv span,.cst .cw,.qn,.qtrow .tt,
.qtrow .tn0,.qmore,.qtmore,.rec .ro,.rec .rc,.tierb .tc,.bkit .n span,.bkpr .k,.bkpm span,.pray .pl,
.ki .lq,.ki .sty,.crow .cx,.itcard .itt span,.bc .bm,.toggle.wep .cv,.specopt .mt,.specopt .own,.mup,
.mattr,.mhere,.mpop .mxy,.maprow .t span,.kcpet.none,:is(#tip,#mcur,#statsheet) .box>.sl{font-size:var(--t-meta)}
/* chips, pills, badges and the small secondary buttons */
.xpchip,.toggle.sm,.chip b,.mini,.qgrow .toggle,#view-quest .xpchip,.qz,.qr,.rwhy,.btab,.bkpst button,
.itcard .ownt,.ownt,.mlayers .toggle,.mapn{font-size:var(--t-chip)}
/* text: notes, deks, helper lines, empty states, list and table rows, tooltip rows */
.hnote,.brb .bl,.brb .bt2,.wsync .wst .rll,.rlvlval,.rlvlhint,.fcol a,.flink,.fcred,.fblurb,.fsmall,.wrow .t2,
.caprog .v,.caprog .p,.catk,.cadone .t span,.demobar .t span,.kcchip .t,.rsnnote,.rnote,.rrow .v,
.rwlist li,.dnext,.ctask .d,.gcard .note,.prow .pc,.prow .pp,.chal .reward .t,.gainrow .lv,.skprog .pnote,
.wkrow,.wkrow i,.workbox .note,.linkrow .lk,.trybar .tt b,.dpsrow .ttk,.note,.qtrow .tn,.qtrow .td,.qnote,
.alt2,.wline,.rec .rn,.rec .rg,.tierb .td,.msfoot,.pph span,.gi,.bkpn,.ki,.bossline .bd,.bossline .bt,
footer,:is(#tip,#mcur,#statsheet) .r,:is(#tip,#mcur,#statsheet) .fx,.mhint,.fdout span,.maprow .t b,.mnores{font-size:var(--t-text)}
/* buttons, toggles, tabs */
.wpb,.camore,.viewbtn,.kcfoot .viewbtn,.mrow .gdel,.gcard .gdel,.toggle,.tab,.mode .go,.mpop .mclose,
.mpop .btn{font-size:var(--t-ui)}
/* the paragraph a card exists to say */
.bossline .bwhy,.roomwhy,.welcome p,.drw .rwlist li,.chal .why,.qu,.pcard p,.mode p{font-size:var(--t-body)}
.homework.one .cadone b,.rcard h3,.emptystate b,.qgap .rhead h3,.qh h3,:is(#tip,#mcur,#statsheet) .th b,
.kitbox h4{font-size:var(--t-title)}
.homehead .dek{font-size:var(--t-lede)}
.modal .mh h3,.sty-h h3,.cheroes .qhero-t h3,.chal .hd h3,.pdhead h3,.qsec>h3{font-size:var(--t-h3)}
.sec-h h2,.maph2{font-size:var(--t-h2)}
.hero h2,.homehead h2{font-size:var(--t-hero)}
#swval{font-size:var(--t-num-s)}
.shopsum .v,.fgain b,.kcn,.gcard .gbig,.chal .kcbig .v,.pdhead .now,.sw .n,.bslot::after,
.bigstat .v{font-size:var(--t-num-l)}

/* ---- one label ----
   Seven trackings from .06em to .12em and weights from 400 to 700 were one role. And tx4 was 3.5:1 on
   a card, so the smallest text on the page was also the faintest; nothing that is read sits under tx3. */
.lbl,.mlbl,.stat-chip .k,.hmlbl,.mtag,.shopsum .lbl,.acctbar .ab .l,.fchip,.fgain span,.fst .l,.fdps .l,
.rwt em,.dt .tn,.ct .tn,.dta em,.ctask .ty,.sk .nm,.kcsty,.chal .hd .sub,.chal .kcbig .l,.pdstats .l,
.setlbl,.bc .bmtier,.mstat .k,.eyebrow,.styletag,.dpsrow .u,.kv span,.cst .cl,.sw .l,th,.tierb .tn em,
.pendtag,.kfrom,.gmslot h4,.bkrh,.bkstot .l,.prayrow .rl,.bossline .bs,.crow .cw,.pickrow .plbl,
.mode .mk2,.mode .stat span,:is(#tip,#mcur,#statsheet) .th .sl,.mplanes .mlbl2,.maprow .kind{font-weight:600;letter-spacing:.08em}
/* a label is a word, not a number: these were in Geist Mono */
.dta em,.bc .bmtier,.maprow .kind,th.n{font-family:var(--sans)}
th.n{letter-spacing:.08em}
.lbl,.mlbl,.stat-chip .k,.hmlbl,.shopsum .lbl,.acctbar .ab .l,.fchip,.fst .l,.fdps .l,.rwt em,.dt .tn,
.ct .tn,.dta em,.ctask .ty,.sk .nm,.chal .hd .sub,.chal .kcbig .l,.pdstats .l,.setlbl,.bc .bmtier,
.mstat .k,.eyebrow,.styletag,.pendtag,.kfrom,.bkrh,.bkstot .l,.crow .cw,.pickrow .plbl,.mode .stat span,
:is(#tip,#mcur,#statsheet) .th .sl,.mplanes .mlbl2,.maprow .kind,
.logo .sub,.hnote,.wpo .s,.wrow .s,.catb .n,.cabs,.hbuy .ht span,.hitem .ht span,.petc .sub,.petc .n em,
.ct .tp,.cadet-h .t span,.casub,.cbrow .sub,.ctask .pc,.gchips .clbl,.gcard .gt .sub,.sk .xp,.cst .cw,
.qtrow .tt,.qtrow .tn0,.qtmore,.caprog .p,.tierb .tc,.bkit .n span,.bkpr .k,.bkpm span,.crow .cx,.itcard .itt span,
.toggle.wep .cv,.specopt .mt,.specopt .own,.mpop .mxy,.maprow .t span,.kcpet.none,:is(#tip,#mcur,#statsheet) .box>.sl,
.rlvlhint,.fsmall,.wkrow i,.viewbtn,.chip b,.mlayers .toggle{color:var(--tx3)}

/* ---- sentence case where the words are a sentence or a control ---- */
/* a button says what it does; capitals were for labels */
.mini,.toggle.sm,.ownt,.btab,.bkpst button,.facets .fchip{text-transform:none;letter-spacing:0}
.ownt,.btab,.bkpst button{font-weight:600}
.chip b,.qr b{font-weight:700}
/* a caption that is a phrase - "locked up in 4 unused items", "Tormented synapse + an Arclight you
   grind", "0 on the list" - was set as a capitalised label */
.bigstat .lbl,.pcard .mrow .lbl,.shopsum .lbl,.gchips .clbl{font-weight:500;letter-spacing:0;
  text-transform:none;font-size:var(--t-meta)}
/* the questions the preset card asks are sentences */
.welcome .mlbl{font-size:var(--t-text);font-weight:600;letter-spacing:0;text-transform:none;color:var(--tx2)}
.dnext b{text-transform:none;letter-spacing:0}
/* "Moving this week" is the card's heading, not a caption over it */
.rcard h3{font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--tx)}
.wsync .wst b,.fbuy b,.qnote b{font-weight:700}
.qnote .lnk{font-weight:600}

/* ---- contrast ---- */
/* the selected "All" chip was #0f0f0f on #1a1d23: .picker .fchip came later than .fchip.on */
.picker .fchip.on{background:var(--sel);color:var(--tx)}
.sec-h h2 a{color:inherit}
/* a locked tier greys its picture, not its words: opacity .32 put the words at 1.4:1 */
.dta{opacity:1;filter:none}
.dta:not(.got):not(.now)>:is(img,.ph){opacity:.32;filter:grayscale(1)}
.rwt{opacity:1;filter:none}
.rwt:not(.on):not(.live)>img{opacity:.34;filter:grayscale(1)}
.petc.cold{opacity:1}
.petc.cold .art{opacity:.62}
.kcchip[disabled]{opacity:1}
.kcchip[disabled]>:is(img,.noart){opacity:.5}
.sk .gn.idle{opacity:1;color:var(--tx3)}
.brb .bt2.wait{opacity:1}
.toggle.dim{opacity:1;color:var(--tx4)}
.toggle.dim>:is(.box,img){opacity:.42}

/* ---- the header ----
   Seven chips at 15px need 785px and the page 1,025 before the wordmark gives up; at 768 it was 0px
   wide. Between 681 and 1100 the chips are the icons they already are on a phone, and only the bank
   keeps its number, because that is the one a chip there tells you. */
@media(min-width:681px) and (max-width:1100px){
  .chips .stat-chip:not(#bankbtn):has(.sicon,.bskt) .v{display:none}
  .chips .stat-chip:not(#bankbtn):has(.sicon,.bskt){padding:9px 11px;gap:0}
  .chips .stat-chip:not(#bankbtn):has(.sicon,.bskt)::after{content:none}
}

/* ---- an empty equipment square ----
   Its slot's name in capitals did not fit a 48px square at any size you could read: "SHIELD" is 59px
   at 12px. It shows a dimmed piece of what goes there instead, the Items page's own slot art, and the
   name moves into the square's title and aria-label. */
.slot.empty:not(.manual)::after{content:"";position:absolute;inset:24%;background:var(--sa) center/contain no-repeat;
  opacity:.2;filter:grayscale(1)}
.slot.empty[data-s=head]{--sa:var(--ic-sl-head)}
.slot.empty[data-s=cape]{--sa:var(--ic-sl-cape)}
.slot.empty[data-s=neck]{--sa:var(--ic-sl-neck)}
.slot.empty[data-s=ammo]{--sa:var(--ic-sl-ammo)}
.slot.empty[data-s=weapon]{--sa:var(--ic-sl-weapon)}
.slot.empty[data-s=body]{--sa:var(--ic-sl-body)}
.slot.empty[data-s=shield]{--sa:var(--ic-sl-shield)}
.slot.empty[data-s=legs]{--sa:var(--ic-sl-legs)}
.slot.empty[data-s=hands]{--sa:var(--ic-sl-hands)}
.slot.empty[data-s=feet]{--sa:var(--ic-sl-feet)}
.slot.empty[data-s=ring]{--sa:var(--ic-sl-ring)}

/* ---- rows and cells that the bigger type would have cut ---- */
/* "MEDIUM" at 12px is 56px; "10/10" in mono at 14px is 42 */
.dt{grid-template-columns:64px minmax(0,1fr) 48px}
/* A style card is two columns of stats until it is too narrow for "86.8%" beside "ACCURACY". Scoped to
   the three card holders: .sty is also the slot tag inside a kit chip, and size containment there
   collapsed the tag to nothing. */
.styles>.sty,.roomsets>.sty,.mysets>.sty{container-type:inline-size}
@container (max-width:360px){.kv{grid-template-columns:minmax(0,1fr)}}
.kv .kvw b{font-family:var(--sans)}
th{padding:12px}
td{padding:11px 12px}
@media(max-width:1100px){#uptbl :is(th,td):nth-child(8),#valtbl :is(th,td):nth-child(6){display:none}}
/* the upgrade and value tables were 731px in a 697px box at 768 */
@media(max-width:900px){th,td{padding-left:8px;padding-right:8px}}
/* and on a phone a long item name or a gain with its percentage takes a second line in its cell */
@media(max-width:620px){.vtbl .itc .nm,.vtbl td.n{white-space:normal}}
/* a tile whose value is a name - the account, the closest diary - sets it as a name, not in mono */
.acctbar .ab .v .vn{font-family:var(--sans);letter-spacing:-.01em}
/* the home tiles: "121/2,697" at 22px is 118px, which a 150px tile could not hold beside its icon */
.homebar{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
@media(max-width:560px){.homebar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .homebar .ab img{width:24px;height:24px}}
/* the filter pills wrap inside the page rather than running 96px off the side of a tablet */
.toolbar{grid-template-columns:minmax(0,1fr)}
.sec-h>.toolbar{max-width:100%}
.styletag{white-space:nowrap}
/* In a style card under 320px (two across a tablet, one on a phone) an upgrade row puts its gain over
   its price instead of beside it: the name keeps its line, and every row - tagged or not - is the same
   two lines tall, so two cards' lists still line up across. */
@container (max-width:320px){
  .rec{display:grid;grid-template-columns:26px minmax(0,1fr) auto;column-gap:9px;row-gap:0}
  .rec>img{grid-row:1/3}
  .rec>.rn,.rec>.rnw{grid-column:2;grid-row:1/3}
  .rec>.rg{grid-column:3;grid-row:1;justify-self:end}
  .rec>.rc,.rec>.ro{grid-column:3;grid-row:2;justify-self:end}
}
/* a reason pill under an upgrade's name is as tall as its text, and the row holds its height for all */
.rwhy{height:auto;padding:2px 8px;line-height:1.2}
.rnw>:first-child{line-height:1.3}
/* a 15px name over a 14px pill cannot fold into a 26px picture's row any more, so every row is the
   height of a tagged one (measured 48 and 46) and the three cards' upgrade lists still line up */
.rec{min-height:48px}
.qtrow{min-height:46px}
.canm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.casub{white-space:normal}
.qtrow .tn{white-space:normal;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kcpet .pn{max-width:150px}
/* the three potion choices are 354px at 14px; in a 270px settings box they take two rows rather than
   a scrollbar, and the corner is a card's rather than a pill's so two rows do not become a lozenge */
.setbox .potrow{flex-wrap:wrap;border-radius:18px;overflow:visible}
.petc .nm,.kcchip .t,.hbuy .ht b,.hitem .ht span{white-space:normal;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
/* a quest that awards the skill: its name and where to start on one line, the two chips and the
   to-do under it - side by side they left the name 101px of a 446px row */
.qgrow{grid-template-columns:20px minmax(0,1fr)}
.qgrow .tq{grid-column:2;justify-content:flex-start}
/* an item card's own toggle is a tick, not a word: the word took 80px of a card whose names needed it */
.itcard .ownt{width:36px;font-size:var(--t-ui);font-weight:700}
/* three across a 1440 page rather than four: "weapon · Powered Staff · 792M" is 196px at 14px */
.itgrid{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.itcard .itt b,.itcard .itt span{white-space:normal;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.petc .sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kcnever{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
/* "Jal-AkRek-Mej" is 99px at 14px; three lines hold "Fremennik warband berserker" */
.chal .wv{flex:0 0 116px}
.chal .wv span{-webkit-line-clamp:3;font-weight:500}
.cst .cw{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chal .warnline{-webkit-line-clamp:2}
/* a diary card's reason is four lines of 15px at 1280 ("Easy While worn, Brimhaven-Ardougne and Musa
   Point..."), so the fixed card is two of those lines taller: 324 + 2 x 22.5 */
.dc{height:369px}
.dnext{-webkit-line-clamp:4}
/* the home combat-task card's task sentence takes a third line at 1280; the spare row under the list
   takes the height, so the quest and diary cards beside it do not move */
.catk{-webkit-line-clamp:3}
/* "Tombs of Amascut:" is 167px of title and "never killed" 97px of meta: a card is 320px before it
   takes another column, which keeps a boss name to two lines at every width measured */
.cagrid,.petgrid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
/* a price row is seven columns; under 1,250 of room the name had 137px of them */
.pricelist{grid-template-columns:repeat(auto-fill,minmax(min(620px,100%),1fr))}
/* the price column holds six mono characters, which is what "999.9M" is */
.rec .rc{min-width:6ch}
/* The raid and challenge cards sit on their bottom edge, so a blurb one line longer lifted that card's
   eyebrow and title a line above the two beside it. Five bands shared across a row of cards on a
   subgrid: a spare band that takes the card's extra height, then eyebrow, title, blurb and numbers. */
.modes.raids{grid-auto-rows:minmax(0,1fr) auto auto auto auto;row-gap:0}
.modes.raids>.mode{display:grid;grid-row:span 5;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:6px;margin-bottom:16px}
/* an empty band carries no item, and a subgrid's padding only reaches a band through an item in it */
.modes.raids>.mode::before{content:"";grid-row:1}
.modes.raids>.mode>.mt{display:contents}
.modes.raids>.mode>.mt>*{position:relative}
.modes.raids>.mode .mk2{grid-row:2}
.modes.raids>.mode h3{grid-row:3}
.modes.raids>.mode p{grid-row:4}
.modes.raids>.mode>.stat{grid-row:5}
.modes.raids .raidcard p{min-height:0}
/* the maths panel's values share one left edge: "Damage per second" is 136px at 15px */
.wkrow span{min-width:150px}
.bkit .n b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#tip{max-width:330px}
.mpin b{font-family:var(--sans);letter-spacing:0;max-width:160px}
@media(min-width:1000px){.mlayers{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}}
/* on a phone the raid kit list's name takes the row, with the styles, dps and time under it; and a
   price row's item name takes a second line rather than an ellipsis */
@media(max-width:560px){
  .bossline{grid-template-columns:36px minmax(0,1fr) auto auto}
  .bossline .bn{grid-column:2/-1}
  .bossline .bstyles{grid-column:2}
  .prow .pn b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
/* ---- the wordmark: the owner's artwork, cropped to its letters ---- */
.logo .wm{display:block;height:24px;width:auto}
.fcol h4.fbrandh .wm{display:block;height:18px;width:auto}
@media(max-width:680px){.logo .wm{height:19px}}
@media(max-width:380px){.logo .wm{height:17px}}
/* ---- the page nav on a phone: rounded squares that scroll, the name centred under the icon ---- */
@media(max-width:680px){
  /* logo row, icon row and nav cards an equal 12px apart */
  .top-in{row-gap:12px;padding-top:12px;padding-bottom:12px}
  .viewnav,nav.dnav{gap:8px;padding:0;background:transparent;border-radius:0;margin-top:0;
    scroll-snap-type:x proximity}
  .viewnav .vtab,.dnav .vtab{flex:0 0 80px;height:80px;flex-direction:column;justify-content:center;gap:7px;
    padding:8px 4px;border-radius:14px;background:var(--s1);scroll-snap-align:start}
  .viewnav .vtab.on,.dnav .vtab.on{background:var(--s3)}
  .viewnav .vtab .sicon,.dnav .vtab .sicon{width:26px;height:26px}
  .viewnav .vtab .t,.dnav .vtab .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    white-space:normal;text-align:center;font-size:var(--t-label);font-weight:600;line-height:1.15;max-width:72px}
}
/* ---- what the bigger type broke (checked at 1440, 1220, 768 and 375) ---- */
/* the ten nav labels need 1,189px with 17px insets; with 11px they fit from 1,121 */
@media(min-width:1121px) and (max-width:1259px){.viewnav .vtab{padding-left:11px;padding-right:11px}}
/* the account name chip is the one icon chip whose words are the point */
@media(min-width:681px) and (max-width:1100px){
  .chips .stat-chip#whochip:not(#bankbtn):has(.sicon) .v{display:block}
  .chips .stat-chip#whochip:not(#bankbtn):has(.sicon){padding:7px 13px;gap:8px}
}
.lvt .nm{font-weight:600;color:var(--tx3)}
/* a diary card grows with its reward line, which starts under the tiers rather than rising over them */
.dc{height:auto;min-height:369px}
.dbody .dnext{align-self:start}
/* a quest card's title has its own line and its chips the next, on every card */
.qc .qh h3{flex-basis:100%}
/* rows of cards line up on their first line, not their middle */
.cacard{align-items:start;align-content:start}
.canm{align-self:start}
.casub .nw{white-space:nowrap}
.petc,.kcchip,.itcard,.hbuy{align-items:start}
.petc .sub{-webkit-line-clamp:3}
.kct{align-content:start}
.pcard .hd{align-items:flex-start}
#homenext .qhero,.cheroes .qhero{align-items:start}
.cst{align-content:start}
.crow{align-content:start}
.crow .cx{white-space:nowrap;letter-spacing:-.02em}
.qskills .ct{align-content:start}
/* every target row two lines tall, so two cards' lists stay level whichever names wrap */
.qtrow{min-height:52px}
/* two price columns from 1,110px of room */
.pricelist{grid-template-columns:repeat(auto-fill,minmax(min(540px,100%),1fr))}
/* a tile's value keeps its descenders */
.acctbar .ab .v{line-height:1.25}
@media(max-width:560px){
  .sk .nm{letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .acctbar .ab .v .vn{font-size:var(--t-text)}
}
/* ---- on a phone the inventory and equipment grids fill their card (static pages included) ---- */
@media(max-width:560px){
  .binvg,.dsetup .inv{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;justify-self:stretch;width:100%}
  .binvg i,.dsetup .inv i{width:auto;height:auto;aspect-ratio:1}
  .binvg i img,.dsetup .inv i img{width:62%;height:62%;max-width:none;max-height:none;image-rendering:pixelated}
  .eq,.dsetup .eq{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch}
  .eq .slot,.eq .sp{width:auto;height:auto;aspect-ratio:1}
  .eq .slot img{width:60%;height:60%;max-width:none;max-height:none;object-fit:contain;image-rendering:pixelated}
  .dsetup .dscols{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
  .dsetup .dscols>div{justify-items:stretch}
}
/* ---- squares that stay square in Safari: padding, not aspect-ratio, sizes the grid's rows ---- */
.bks{aspect-ratio:auto;height:0;padding-top:100%}
@media(max-width:560px){
  .binvg i,.dsetup .inv i{aspect-ratio:auto;height:0;padding-top:100%;display:block}
  .binvg i img,.dsetup .inv i img{position:absolute;inset:0;margin:auto}
  .binvg i b{position:absolute;inset:0;display:grid;place-items:center}
  .eq .slot,.eq .sp{aspect-ratio:auto;height:0;padding-top:100%}
  .eq .slot{display:block}
  .eq .slot img{position:absolute;inset:0;margin:auto}
}
/* ---- on a phone the boss picture spans its card, centred ---- */
@media(max-width:760px){
  .hero .por{width:100%;height:220px;justify-self:stretch}
  .hero .por img{width:100%;height:100%;max-width:290px;max-height:184px;object-fit:contain}
}
/* ---- on a phone a bank picture fills most of its square ---- */
@media(max-width:560px){.bks img{width:80%;height:72%}}
/* ---- a boss picture that turns: wider box, the video fitted inside it ---- */
.hero .por.model,.hero .por:has(.bossmodel){width:280px}
.por .bossmodel{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:760px){.hero .por.model,.hero .por:has(.bossmodel){width:100%;height:220px}}
/* ---- charcoal, not gold, for what is selected or focused ---- */
:focus-visible{outline-color:color-mix(in srgb,var(--tx) 45%,transparent)}
.qc.focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--tx) 35%,transparent)}
.fchip.on,.picker .fchip.on,.bc.on,.btab.on,.crow.on,.mfloat button.on,.fdb.on,.addb:hover{
  background:var(--s3);color:var(--tx)}
/* the boss list: pictures and names on the page */
.picker.card{background:none;background-image:none;box-shadow:none;padding:0;gap:14px}
.picker .srch{max-width:360px}
.bgrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px 12px;max-height:none;overflow:visible;
  padding:10px 0 4px}
.bgrid .bc{flex-direction:column;justify-content:flex-start;align-items:center;gap:8px;min-height:0;
  padding:10px 6px 12px;background:none;text-align:center;border-radius:var(--r)}
.bgrid .bc:hover{background:none}
.bgrid .bc.on{background:var(--s1)}
.bgrid .bc img{width:136px;height:136px;transition:transform .14s}
.bgrid .bc:hover img{transform:translateY(-3px)}
.bgrid .bc .bm{display:none}
.facets .fchip{gap:7px}
.facets .fchip .fci{width:22px;height:22px;object-fit:contain;margin:-3px 0 -3px -4px;flex:none}
.facets .fchip .sicon{width:16px;height:16px;flex:none}
.facets .fchip .ic-combat{background-image:var(--ic-combat)}
.bgrid .bc .bn{font-size:var(--f2);font-weight:700;line-height:1.3;color:var(--tx2)}
.bgrid .bc:hover .bn,.bgrid .bc.on .bn{color:var(--tx)}
@media(max-width:700px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bgrid .bc img{width:112px;height:112px}}
.srch:focus{outline:2px solid color-mix(in srgb,var(--tx) 30%,transparent);outline-offset:0}