/* Dashboard (/dashboard/): the signed-in home page. Its own tokens, so it can evolve apart from the review pages. */

:root{--bg:var(--c-F3F4F8);--panel:#fff;--ink:var(--c-1B2340);--muted:var(--c-5A6280);--line:var(--c-D9DCE6);--soft:var(--c-EBEDF3);
--gold:var(--c-A87A1E);--gold-soft:var(--c-F3E7C9);--kill:#3E7D22;--kill-soft:#E2EFD8;--prog:#9A5A12;--prog-soft:#F6E8D3;--bnet:#148EFF;
--t-blue:#0B5FD0;--t-purple:#8A2BD1;--t-orange:#C25F00;--t-green:#2E8A12;--t-grey:#6B7080;--t-pink:#C2457F;--t-gold:#9C7A1C;
--DeathKnight:#C41E3A;--DemonHunter:#A330C9;--Druid:#FF7C0A;--Evoker:#33937F;--Hunter:#7FAF3F;--Mage:#2FA8D0;--Monk:#00C27A;
--Paladin:#E06FA8;--Priest:#9AA3B5;--Rogue:#C9B215;--Shaman:#0070DD;--Warlock:#7375D8;--Warrior:#B07F4F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:var(--c-121726);--panel:var(--c-1A2033);--ink:var(--c-E9EBF3);--muted:var(--c-A3A9BF);--line:var(--c-2E3650);--soft:var(--c-222941);
--gold:var(--c-E2B64E);--gold-soft:var(--c-3A3120);--kill:#8FD45E;--kill-soft:#22321A;--prog:#F0B060;--prog-soft:#3A2A16;--t-blue:#3D8BFF;--t-purple:#B95CFF;--t-orange:#FF8000;--t-grey:#9DA2B0;--t-pink:#E268A8;--t-gold:#E5CC80;--t-green:#1EFF00;
--Hunter:#AAD372;--Mage:#3FC7EB;--Monk:#00FF98;--Paladin:#F48CBA;--Priest:#E8ECF5;--Rogue:#FFF468;--Warrior:#C69B6D}}
:root[data-theme="dark"]{--bg:var(--c-121726);--panel:var(--c-1A2033);--ink:var(--c-E9EBF3);--muted:var(--c-A3A9BF);--line:var(--c-2E3650);--soft:var(--c-222941);
--gold:var(--c-E2B64E);--gold-soft:var(--c-3A3120);--kill:#8FD45E;--kill-soft:#22321A;--prog:#F0B060;--prog-soft:#3A2A16;--t-blue:#3D8BFF;--t-purple:#B95CFF;--t-orange:#FF8000;--t-grey:#9DA2B0;--t-pink:#E268A8;--t-gold:#E5CC80;--t-green:#1EFF00;
--Hunter:#AAD372;--Mage:#3FC7EB;--Monk:#00FF98;--Paladin:#F48CBA;--Priest:#E8ECF5;--Rogue:#FFF468;--Warrior:#C69B6D}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:1.0625rem;line-height:1.45}
h1,h2,h3{font-family:var(--fh);font-weight:var(--fhw);line-height:1.15;margin:0;letter-spacing:var(--fhls);font-size-adjust:none}
a{color:var(--gold)} button{font:inherit;color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
[hidden]{display:none!important}
.cc{color:var(--cc)} .c-DeathKnight{--cc:var(--DeathKnight)}.c-DemonHunter{--cc:var(--DemonHunter)}.c-Druid{--cc:var(--Druid)}.c-Evoker{--cc:var(--Evoker)}
.c-Hunter{--cc:var(--Hunter)}.c-Mage{--cc:var(--Mage)}.c-Monk{--cc:var(--Monk)}.c-Paladin{--cc:var(--Paladin)}.c-Priest{--cc:var(--Priest)}
.c-Rogue{--cc:var(--Rogue)}.c-Shaman{--cc:var(--Shaman)}.c-Warlock{--cc:var(--Warlock)}.c-Warrior{--cc:var(--Warrior)}
.t-blue{color:var(--t-blue)}.t-purple{color:var(--t-purple)}.t-orange{color:var(--t-orange)}.t-green{color:var(--t-green)}.t-grey{color:var(--t-grey)}.t-pink{color:var(--t-pink)}.t-gold{color:var(--t-gold)}   /* all seven Warcraft Logs parse colors (grey, pink and gold were missing until Oct 20) */
/* top bar: site name left, account right */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{max-width:60rem;margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;gap:.75rem}
.brand{font-family:var(--fh);font-size:1.15rem;color:var(--ink);text-decoration:none;white-space:nowrap;font-weight:var(--fhw);letter-spacing:var(--fhls);font-size-adjust:none}
.top .grow{flex:1}
.acct{position:relative}
.acct>button{display:flex;align-items:center;gap:.45rem;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:.25rem .65rem .25rem .3rem;cursor:pointer;font-weight:600;font-size:.95rem}
.acct .dot{width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;background:var(--bnet);color:#fff;font-weight:700;font-size:.85rem}
.acct .tagname{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct .tagnum{color:var(--muted);font-weight:400}
.menu{position:absolute;right:0;top:calc(100% + .4rem);min-width:13rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:.35rem;z-index:30}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:.55rem .7rem;border-radius:8px;text-decoration:none;color:var(--ink);background:none;border:0;cursor:pointer}
.menu a:hover,.menu button:hover{background:var(--soft)}
.menu .sep{height:1px;background:var(--line);margin:.3rem 0}
.menu .fine{padding:.4rem .7rem;color:var(--muted);font-size:.85rem}
.wrap{max-width:60rem;margin:0 auto;padding:1.25rem 1rem 4rem}
.av{width:2.6rem;height:2.6rem;border-radius:10px;display:grid;place-items:center;font-family:var(--fh);font-size:1.25rem;color:#fff;background:var(--cc);flex:none;font-weight:var(--fhw);letter-spacing:var(--fhls);font-size-adjust:none}
.ilvl{font-variant-numeric:tabular-nums}
/* tabs */
.seg{display:inline-flex;background:var(--soft);border-radius:999px;padding:.25rem;gap:.2rem;margin:1rem 0}
.seg button{border:0;background:none;border-radius:999px;padding:.4rem 1rem;font-weight:700;color:var(--muted);cursor:pointer}
.seg button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* raid header */
.pill{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.8rem;font-weight:700;white-space:nowrap}
.pill.kill{background:var(--kill-soft);color:var(--kill)} .pill.prog{background:var(--prog-soft);color:var(--prog)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px}
.stat .k{color:var(--muted);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.stat .v{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
/* A parse Warcraft Logs hasn't shared with us yet: a shimmer, and a popover in the page's theme (Oct 20) */
:root{--pop-bg:#fff;--pop-line:var(--c-D9DCE6);--pop-shadow:color-mix(in srgb,var(--c-1B2340) 16%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pop-bg:var(--c-252C44);--pop-line:var(--c-3A4360);--pop-shadow:rgba(0,0,0,.45)}}
:root[data-theme="dark"]{--pop-bg:var(--c-252C44);--pop-line:var(--c-3A4360);--pop-shadow:rgba(0,0,0,.45)}
.stat .v.pw{padding-top:.25rem}
.pwait{position:relative;display:block;width:2.6rem;height:1.3rem;border-radius:6px;cursor:help;outline:none;
  background:linear-gradient(90deg,var(--soft) 0%,color-mix(in srgb,var(--soft) 55%,var(--ink) 18%) 50%,var(--soft) 100%);background-size:200% 100%;animation:pwait 1.6s linear infinite}
.pwait:focus-visible{box-shadow:0 0 0 2px var(--gold)}
@keyframes pwait{to{background-position:-200% 0}}
.pwait-tip,.pop-tip{display:none;position:absolute;z-index:30;top:calc(100% + .5rem);left:0;width:max-content;max-width:min(16rem,calc(100vw - 4rem));
  background:var(--pop-bg);color:var(--ink);border:1px solid var(--pop-line);box-shadow:0 8px 22px var(--pop-shadow);
  font:400 .82rem/1.4 var(--fb);padding:.55rem .7rem;border-radius:8px;white-space:normal;text-transform:none;letter-spacing:0}
.pwait-tip::before,.pop-tip::before{content:"";position:absolute;top:-6px;left:1rem;width:10px;height:10px;background:var(--pop-bg);border-left:1px solid var(--pop-line);border-top:1px solid var(--pop-line);transform:rotate(45deg)}
.pwait:hover .pwait-tip,.pwait:focus .pwait-tip,.pop:hover .pop-tip,.pop:focus .pop-tip{display:block}
.stat:not(:first-child) .pwait-tip{left:50%;transform:translateX(-50%)}.stat:not(:first-child) .pwait-tip::before{left:calc(50% - 5px)}
.boss:has(.pwait:hover),.boss:has(.pwait:focus){overflow:visible;z-index:6}
@media (prefers-reduced-motion:reduce){.pwait{animation:none}}
/* empty states */
.empty{text-align:left;padding:1.25rem}
.empty h3{font-size:1.2rem;margin:0 0 .35rem}
.empty p{margin:.25rem 0 .9rem;color:var(--muted)}
.paste{display:flex;gap:.5rem;flex-wrap:wrap}
.paste input{flex:1 1 14rem;min-width:0;padding:.65rem .8rem;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.paste button{padding:.65rem 1rem;border-radius:10px;border:0;background:var(--gold);color:var(--panel);font-weight:700;cursor:pointer}
.ok{margin:.6rem 0 0;color:var(--kill);font-weight:700}
.howto{display:inline-block;margin-top:.8rem;font-weight:700;text-decoration:none}
.mplus-list{margin:.6rem 0 0;padding-left:1.1rem;list-style:disc;color:var(--muted)}
.cpick{position:relative}
.cpick>button{display:flex;align-items:center;gap:.45rem;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:.25rem .55rem .25rem .25rem;cursor:pointer;font-weight:700;max-width:11rem}
.cpick>button .av{width:1.8rem;height:1.8rem;font-size:.95rem;border-radius:7px}
.cpick>button .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpick .menu{left:0;right:auto;min-width:16rem;max-height:22rem;overflow:auto}
.cpick .menu button{display:flex;align-items:center;gap:.55rem}
.cpick .menu .av{width:1.7rem;height:1.7rem;font-size:.9rem;border-radius:7px}
.cpick .menu .il{margin-left:auto;color:var(--muted);font-weight:700}
.cpick .menu button[aria-current="true"]{background:var(--soft)}
@media (max-width:520px){.brand{display:none!important}.acct .tagname{display:none}}
.seg{margin:1rem 0 1.25rem}
.boss{padding:.9rem 1rem}
.boss-h{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.6rem}
.boss-h h4{font-family:var(--fh);font-weight:var(--fhw);font-size:1.2rem;margin:0;letter-spacing:var(--fhls);font-size-adjust:none}
.boss-h a{margin-left:auto;font-weight:700;text-decoration:none;font-size:.92rem;white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.stat .v{font-size:1.3rem}
.bosslist{display:grid;gap:.6rem}
.night{margin-bottom:1.6rem}
.night{display:grid;grid-template-columns:3.6rem 1fr;gap:.85rem}
.cal{width:3.6rem;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--panel);text-align:center;align-self:start;position:sticky;top:4rem}
.cal .m{display:block;background:var(--gold);color:var(--panel);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;padding:.15rem 0}
.cal .d{display:block;font-family:var(--fh);font-size:1.6rem;line-height:1.3;font-weight:var(--fhw);letter-spacing:var(--fhls);font-size-adjust:none}
.cal .w{display:block;color:var(--muted);font-size:.75rem;font-weight:700;padding-bottom:.2rem}
@media (max-width:520px){.night{grid-template-columns:3rem 1fr;gap:.6rem}.cal{width:3rem}.cal .d{font-size:1.35rem}.stat .v{font-size:1.15rem}}
.av{overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.hero{position:relative;overflow:hidden;border-radius:16px;margin:0 0 .25rem;min-height:11rem;display:flex;align-items:flex-end;padding:1rem;
  background:radial-gradient(120% 140% at 85% 30%,color-mix(in srgb,var(--cc) 35%,var(--panel)) 0%,var(--panel) 62%);border:1px solid var(--line)}
.hero .art{position:absolute;right:-6%;top:-95%;height:330%;width:auto;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.hero .txt{position:relative;max-width:62%}
.hero h1{font-size:2.1rem;font-weight:700}
.hero .sub{color:var(--muted);font-weight:400}
@media (max-width:520px){.hero{min-height:9rem}.hero h1{font-size:1.7rem}.hero .txt{max-width:60%}.hero .art{right:-30%;top:-70%;height:280%}}
.cpick .menu{min-width:19.5rem}.cpick .menu .lv{color:var(--muted);font-weight:600;font-size:.85rem;margin-left:auto;white-space:nowrap}.cpick .menu .il{white-space:nowrap}
.cpick .menu .il{margin-left:.7rem;min-width:4.2rem;text-align:right}.cpick .menu .il small{font-weight:600;color:var(--muted)}
/* ---------- character banners ---------- */
.hero{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);margin:0 0 .25rem}
.hero .txt{position:relative;z-index:2}
.hero h1{font-size:2.1rem;font-weight:700}
.hero .sub{color:var(--muted);font-weight:400}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.45rem}
.chip2{padding:.1rem .55rem;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-weight:700;font-size:.85rem}
.hero .art{position:absolute;pointer-events:none;z-index:1}
/* 1 Spotlight: class-tinted glow, render on the right */
.h1{min-height:11rem;display:flex;align-items:flex-end;padding:1rem;background:radial-gradient(120% 140% at 85% 30%,color-mix(in srgb,var(--cc) 35%,var(--panel)) 0%,var(--panel) 62%)}
.h1 .art{right:-6%;top:-95%;height:330%}
@media (max-width:520px){.h1 .art{right:-28%}.hero h1{font-size:1.7rem}.hero .txt{max-width:62%}}
/* ---------- boss cards: Blizzard's boss art fills the card, held back under a panel-colored scrim; no art = plain card */
.boss{display:block;position:relative;overflow:hidden}
.boss>.bg{position:absolute;inset:0;z-index:0}
.boss>.bg img{width:100%;height:100%;object-fit:cover;object-position:70% 30%;filter:saturate(.55);display:block}
.boss>.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 94%,transparent) 0%,color-mix(in srgb,var(--panel) 86%,transparent) 55%,color-mix(in srgb,var(--panel) 72%,transparent) 100%)}
.boss:has(.bg) .team{background:color-mix(in srgb,var(--panel) 80%,transparent)}
/* raid nights: a hairline between nights */
.night+.night{border-top:1px solid var(--line);padding-top:1.4rem}
.hero.h1{min-height:12.5rem;align-items:stretch;flex-direction:column;justify-content:flex-end;gap:.8rem}
.hero .txt{max-width:64%}
.k2{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.muted{color:var(--muted)}
/* boss cards: Review sits on the stats' baseline */
.boss .body{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;column-gap:1rem}
.boss .body .boss-h{grid-column:1/-1}
/* Stats span the whole card, so Score, Parse and Deaths line up on every card whether or not it has a Review button;
   the button sits over the empty right end of the row (Christiaan, Oct 20). On phones it drops to its own row. */
.boss .body .stats{grid-column:1/-1;grid-row:2}
.boss .body .rv{grid-column:2;grid-row:2;align-self:end;font-weight:800;text-decoration:none;font-size:.85rem;white-space:nowrap;position:relative;z-index:2;
  padding:.3rem .85rem;border-radius:999px;color:var(--gold);background:transparent;
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent)}
/* S2 scoreboard strip along the bottom */
.s2 .board{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px;max-width:40rem}
.s2 .board>div{padding:.5rem .75rem;border-left:1px solid var(--line)}
.s2 .board>div:first-child{border-left:0}
.s2 .board .v{font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
@media (max-width:520px){
  .hero .txt{max-width:70%}
  .s2 .board{grid-template-columns:repeat(2,minmax(0,1fr))}.s2 .board>div:nth-child(3){border-left:0}.s2 .board>div:nth-child(n+3){border-top:1px solid var(--line)}
  .boss .body .rv{grid-column:1/-1;grid-row:auto;justify-self:end;margin-top:.4rem}
}
/* The character sits in a right-hand slot (17rem, narrower on phones) so it stays in the same spot at every width.
   fitArt() places it exactly; this is the fallback until the figure is measured. */
.hero.h1 .art{top:-38%;bottom:auto;height:168%;width:auto;left:auto;right:calc(min(17rem, 38%) / 2);transform:translateX(50%)}
/* Wide screens: the whole character, head to feet, centered in the space right of the stats. */
@media (min-width:760px){
  .hero.h1{min-height:15rem}
  .hero.h1 .art{filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
  .hero .txt,.s2 .board{max-width:calc(100% - 17rem)}
}
/* Live-page additions */
.menu a[aria-current="page"]{font-weight:700}
.brand.short{display:none}
.err{margin:.6rem 0 0;color:#C0392B;font-weight:700}
.loading{color:var(--muted);padding:2rem 0}
/* The first "Loading your characters…" (and its no-characters / error text) sits in the middle of the screen */
#boot{position:fixed;inset:0;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem}
.src{color:var(--muted);font-size:.8rem;margin:1.5rem 0 0}
.src a{color:inherit}
/* Whole boss card opens its fight page; Review stays as the visible cue */
.boss .body .rv::after{content:"";position:absolute;inset:0;z-index:3;border-radius:14px}
.boss{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.boss:has(.rv:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.boss .body .rv{position:static}
/* Team line: one line from the boss's team review along the card's bottom edge, above the whole-card link */
.boss>.body{position:relative;z-index:2}
.boss:has(.team){padding-bottom:0}
.team{position:relative;z-index:4;display:flex;align-items:center;gap:.5rem;margin:.8rem -1rem 0;padding:.6rem 1rem;border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--soft) 85%,transparent);backdrop-filter:blur(4px);text-decoration:none;color:var(--ink);font-size:.92rem;border-radius:0 0 13px 13px}
.team .ti{width:1.1em;height:1.1em;fill:var(--muted);flex:none}
.team .go{margin-left:auto;font-weight:700;color:var(--gold);white-space:nowrap}
.team:hover{background:var(--soft)} .team:hover .go{text-decoration:underline}
.team.nr .go{color:var(--muted);font-weight:600} .team.nr:hover,.boss:hover .team.nr:hover{background:none} .team.nr:hover .go{text-decoration:none}   /* no review: not a link (Oct 23) */
@media (max-width:520px){.team{flex-wrap:wrap;align-items:flex-start;row-gap:.25rem}.team .ti{margin-top:.2em}.team .tt{flex:1 1 calc(100% - 1.7rem)}}
/* Character card: Blizzard's class scene behind the character, darkened under the name and numbers (same in light and dark) */
.hero.cbg{background:linear-gradient(90deg,color-mix(in srgb,var(--c-0C0F1A) 92%,transparent) 0%,color-mix(in srgb,var(--c-0C0F1A) 75%,transparent) 38%,color-mix(in srgb,var(--c-0C0F1A) 15%,transparent) 75%,color-mix(in srgb,var(--c-0C0F1A) 5%,transparent) 100%),var(--classbg) center 58%/cover no-repeat,var(--c-151A2B);border-color:color-mix(in srgb,var(--cc) 35%,var(--line))}
.hero.cbg h1{text-shadow:0 2px 12px rgba(0,0,0,.6)}
.hero.cbg .sub{color:var(--c-C9CDE0)}
.hero.cbg .board{background:color-mix(in srgb,var(--c-0E1220) 72%,transparent);border-color:rgba(255,255,255,.12)}
.hero.cbg .board>div{border-color:rgba(255,255,255,.12)}
.hero.cbg .board .k2{color:var(--c-AEB4CC)}
.hero.cbg .board .v{color:var(--c-F1F2F8)}
@media (max-width:520px){.hero.cbg{background:linear-gradient(90deg,color-mix(in srgb,var(--c-0C0F1A) 90%,transparent) 0%,color-mix(in srgb,var(--c-0C0F1A) 60%,transparent) 55%,color-mix(in srgb,var(--c-0C0F1A) 20%,transparent) 100%),var(--classbg) 62% 58%/cover no-repeat,var(--c-151A2B)}}

/* boss badge by the name (Warcraft Logs boss icon, the boss achievement picture) */
.boss-h .badge{width:36px;height:36px;border-radius:8px;flex:none;box-shadow:0 0 0 1px var(--line)}
/* ---------- Mythic+ key cards (beta) */
.key .boss-h{display:flex;flex-wrap:nowrap;align-items:center;gap:.6rem}
.key .kt{display:flex;flex-direction:column;justify-content:center;min-height:36px;min-width:0;flex:1 1 auto}
.key .kn{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.key .kn h4{margin:0;line-height:1.15}
.key .kl{font-size:.8rem;font-weight:800;color:var(--gold);line-height:1.1}
.key .spec{margin-left:auto;position:relative;width:26px;height:26px;flex:none;align-self:flex-start}
.key .spec img:first-child,.boss .specs .spec img:first-child{width:26px;height:26px;border-radius:5px;display:block}
.key .spec .role,.boss .specs .spec .role{position:absolute;right:-5px;bottom:-5px;width:15px;height:15px}
/* raid boss cards: the spec played, top right like key cards (two on a role switch) */
.boss .specs{margin-left:auto;display:flex;gap:.6rem;align-self:flex-start}
.boss .specs .spec{position:relative;width:26px;height:26px;flex:none}
/* tabs and filters on one line */
.mrow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.25rem;min-height:2.9rem}
.mrow .seg{margin:0}
.mf{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.45rem}
.mf-w{position:relative}
.mf-b{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .7rem .42rem .85rem;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  font:inherit;font-weight:700;font-size:.85rem;color:var(--ink);cursor:pointer;white-space:nowrap}
.mf-b:hover{border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.mf-b:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mf-b .chev{width:.7rem;height:.7rem;fill:none;stroke:currentColor;stroke-width:2.4;opacity:.7;transition:transform .15s}
.mf-b[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mf-b.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--panel))}
.mf-b .ic{width:18px;height:18px;border-radius:4px;margin:-.1rem 0}
/* popover */
.mfp{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:15rem;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.12);padding:.45rem;animation:mfin .12s ease-out}
.mfp.r{left:auto;right:0}
@keyframes mfin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mfp h5{display:none}
.mfo{display:flex;align-items:center;gap:.65rem;width:100%;border:0;background:none;font:inherit;font-size:.92rem;color:var(--ink);text-align:left;
  padding:.55rem .65rem;border-radius:10px;cursor:pointer}
.mfo:hover,.mfo:focus-visible{background:var(--soft);outline:none}
.mfo img{width:24px;height:24px;border-radius:5px;flex:none}
.mfo .n{flex:1;white-space:nowrap}
.mfo .ct{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.mfo .ck{width:1rem;height:1rem;flex:none;fill:none;stroke:var(--gold);stroke-width:3;visibility:hidden}
.mfo[aria-selected="true"]{font-weight:800}
.mfo[aria-selected="true"] .ck{visibility:visible}
.mfo:disabled{opacity:.4;cursor:default}
.mfo:disabled:hover{background:none}
.mfsep{height:1px;background:var(--line);margin:.3rem .4rem}
/* Boss menu: a raid name above its bosses when more than one raid is listed */
.mfg{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:.75rem .7rem .3rem}
.mfsep+.mfg{margin-top:.5rem}
/* key range */
.mfk{padding:.35rem .45rem .2rem}
.mfk .lb{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:.35rem 0 .45rem}
.mfk .chips{display:flex;flex-wrap:wrap;gap:.4rem}
.mfc{min-width:2.9rem;padding:.4rem .6rem;border-radius:999px;border:1px solid var(--line);background:none;font:inherit;font-weight:800;font-size:.88rem;color:var(--ink);cursor:pointer}
.mfc:hover{border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.mfc[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--panel)}
.mfc.in{background:color-mix(in srgb,var(--gold) 16%,transparent);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.mfk .ft{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem;padding-top:.6rem;border-top:1px solid var(--line)}
.mfl{border:0;background:none;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;cursor:pointer;padding:.2rem 0;font-size:.88rem}
.mfdone{border:0;border-radius:10px;background:var(--ink);color:var(--panel);font:inherit;font-weight:800;padding:.45rem .9rem;cursor:pointer}
.mfbd{display:none}
.mf-clear{border:0;background:none;color:var(--gold);font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;padding:.4rem .35rem}
.mf-clear:hover{text-decoration:underline}
/* phones: filters drop to their own line, menus open as a bottom sheet */
@media (max-width:620px){
  .mrow{flex-direction:column;align-items:flex-start}
  .mf{justify-content:flex-start}
  .mfbd{display:block;position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.45);animation:mfin .12s}
  .mfp,.mfp.r{position:fixed;left:0;right:0;top:auto;bottom:0;border-radius:20px 20px 0 0;max-height:75vh;overflow:auto;padding:.6rem .8rem 1.4rem;animation:mfup .18s ease-out}
  .mfp h5{display:block;margin:.2rem .4rem .6rem;font-size:1rem;text-align:center;position:relative}
  .mfp h5::before{content:"";display:block;width:2.5rem;height:4px;border-radius:2px;background:var(--line);margin:0 auto .7rem}
  .mfo{padding:.75rem .6rem}
  @keyframes mfup{from{transform:translateY(30%);opacity:.5}to{transform:none;opacity:1}}
}
.pill.fail{background:color-mix(in srgb,#E5484D 18%,var(--panel));color:color-mix(in srgb,#E5484D 85%,var(--ink))}
.mfk .lb+.chips+.lb{margin-top:.8rem}
/* one Filters pill on phones */
.mf-allw{display:none}
.mf-b .fn{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.mf-b .nb{min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:999px;background:var(--gold);color:var(--panel);font-size:.72rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.mfall .sec{padding:.2rem .2rem .9rem;border-bottom:1px solid var(--line);margin-bottom:.7rem}
.mfall .sec .lb{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:.35rem .45rem .45rem}
.mfall .sec.mfk{padding:.2rem .2rem .9rem}
.mfall .chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 .45rem}
.mfall .mfo{padding:.6rem .55rem}
.mfc.wi{display:inline-flex;align-items:center;gap:.4rem}
.mfc.wi img{width:18px;height:18px;border-radius:4px}
.mfc:disabled{opacity:.4;cursor:default}
.mfall .ft{position:sticky;bottom:-1.4rem;display:flex;justify-content:space-between;align-items:center;background:var(--panel);margin:0 -.8rem -1.4rem;padding:.8rem 1.2rem 1.2rem;border-top:1px solid var(--line)}
.mfall .mfdone{padding:.7rem 1.2rem;font-size:.95rem}
@media (max-width:620px){
  .mrow{flex-direction:row;align-items:center}
  .mf>.mf-w:not(.mf-allw),.mf>.mf-clear{display:none}
  .mf-allw{display:block}
  .mfall{max-height:85vh}
}
/* Wider screens where the pills don't fit beside the tabs: fold them into the Filters pill and its bottom sheet, as on phones
   (the script adds .fold when the row would wrap; Oct 19) */
.mrow.fold .mf>.mf-w:not(.mf-allw),.mrow.fold .mf>.mf-clear{display:none}
.mrow.fold .mf-allw{display:block}
.mrow.fold .mfbd{display:block;position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.45);animation:mfin .12s}
.mrow.fold .mfp{position:fixed;left:50%;right:auto;transform:translateX(-50%);width:min(34rem,100%);top:auto;bottom:0;border-radius:20px 20px 0 0;max-height:85vh;overflow:auto;padding:.6rem .8rem 1.4rem}
.mrow.fold .mfp h5{display:block;margin:.2rem .4rem .6rem;font-size:1rem;text-align:center}
.mrow.fold .mfp h5::before{content:"";display:block;width:2.5rem;height:4px;border-radius:2px;background:var(--line);margin:0 auto .7rem}
/* A fight the log watcher found that has no review yet: the Review button's place, muted and not a link (Oct 19) */
.boss .body .rv.soon,.boss:hover .body .rv.soon{border-color:var(--line);color:var(--muted);background:transparent;cursor:default;pointer-events:none}

/* Scrollbars inside panels (character picker, menus): thin, no track, a soft ink thumb; same as the M+ map dock */
.sn-menu,.menu{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 25%,transparent) transparent}
.sn-menu::-webkit-scrollbar,.menu::-webkit-scrollbar{width:8px;height:8px}.sn-menu::-webkit-scrollbar-track,.menu::-webkit-scrollbar-track{background:transparent}
.sn-menu::-webkit-scrollbar-thumb,.menu::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 22%,transparent);border-radius:8px;border:2px solid var(--panel)}
.sn-menu::-webkit-scrollbar-thumb:hover,.menu::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 38%,transparent)}
/* Card hover (Oct 20): elevation level 3 with the dark-mode tint. The whole card lifts 2px with a level 3
   shadow and a light surface tint (Material's dark-theme overlay at level 3, 6% white (Christiaan, Oct 20)); each link lights up only
   while the pointer is over the part that opens it: the upper part opens the review (the Review pill's ::after covers
   the card), the bottom strip opens the team review. */
.boss{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.boss::before{content:"";position:absolute;inset:0;z-index:1;background:#fff;opacity:0;pointer-events:none;transition:opacity .15s ease}
.boss:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--line) 75%,#fff 10%);
  box-shadow:0 6px 16px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3)}
.boss:hover::before{opacity:.06}
/* hovering the upper part: the card takes 6%, the team strip only 2% so it reads as a separate link (Christiaan, Oct 20) */
.boss:hover .team{background:color-mix(in srgb,var(--panel) 80%,#fff 2%);border-top-color:color-mix(in srgb,var(--line) 70%,#fff 14%)}
.boss:hover .team:hover{background:color-mix(in srgb,var(--soft) 88%,#fff 12%)}
.boss:hover .body .rv{background:transparent;border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.boss .body .rv:hover,.boss .body .rv:focus-visible{background:color-mix(in srgb,var(--gold) 12%,transparent);border-color:var(--gold)}
.boss:has(.rv.soon){cursor:default}
@media (prefers-reduced-motion:reduce){.boss,.boss:hover{transform:none;transition:box-shadow .15s ease}}

/* Review bar (Oct 20, option 3B): neutral like the Team review bar; only the state on the right is colored, one line */
.boss:has(.rb){padding-bottom:0}
.rb{position:relative;z-index:4;display:flex;align-items:center;gap:.5rem;margin:.8rem -1rem 0;padding:.6rem 1rem .75rem;border-top:1px solid var(--line);
  color:var(--muted);font-size:.9rem;background:color-mix(in srgb,var(--panel) 80%,transparent);flex-wrap:nowrap}
.rb .ti{width:1.1em;height:1.1em;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* In progress: the arrows turn while a review step runs (Oct 23); still for people who ask for less motion */
.rb .ti-spin{animation:rb-spin 1.6s linear infinite;transform-origin:50% 50%}
@keyframes rb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rb .ti-spin{animation:none}}
.rb-t{color:var(--ink);flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-s{flex:none;margin-left:auto;white-space:nowrap;font-weight:800;font-size:inherit}
button.rb-s{background:none;border:0;padding:0;font-family:inherit;cursor:pointer}button.rb-s:hover{text-decoration:underline}
/* Hovering the card underlines Request review, like Team review (Christiaan, Oct 20) */
.boss:hover .rb-req:not(:disabled){text-decoration:underline}button.rb-s:disabled{cursor:default;opacity:.7;text-decoration:none}
button.rb-s:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.rb-off{color:var(--muted);opacity:.65;cursor:default;outline:none}.rb-off:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.rb .pop{position:relative}.rb .pop .pop-tip{left:auto;right:0;transform:none;top:auto;bottom:calc(100% + .55rem)}
.rb .pop .pop-tip::before{top:auto;bottom:-6px;left:auto;right:1rem;transform:rotate(225deg)}
.rb:has(.pop:hover),.rb:has(.pop:focus){z-index:7}.boss:has(.rb .pop:hover),.boss:has(.rb .pop:focus){overflow:visible;z-index:6}
.rb-gold{color:var(--gold)}.rb-blue{color:var(--t-blue)}.rb-green{color:var(--kill)}
.rb-why{flex:none;margin-left:auto;white-space:nowrap;font-size:.82rem}
/* Admins: a draft waiting for approval (Oct 22) */
.rb-old{color:var(--prog)}.rb-draft{color:var(--t-blue);text-decoration:underline;text-underline-offset:2px}
.rb-line{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)}.rb-line i{display:block;height:100%}.rb-line i.b{background:var(--t-blue)}.rb-line i.g{background:var(--kill)}
/* Review bar transitions (Oct 23, Christiaan picked "Celebrate" with the Shimmer pulse; dashboard animateBars()) */
.rb-line i.a{background:var(--prog)}.rb-amber{color:var(--prog)}.rb .ti-stop{stroke:var(--prog)}
/* Needs a check (Oct 23): built, waiting for a person */
.rb-gold-t{color:var(--gold)}.rb .ti-person{stroke:var(--gold)}
.rb-hold{position:absolute;right:0;top:0;bottom:0;width:8%;background:var(--gold)}
/* Resumes in (Oct 23): waiting for the hour's Warcraft Logs allowance */
.rb .ti-cup{stroke:var(--prog)}
/* Can't open the log, and Not reviewed (Oct 23) */
.rb .ti-lock{stroke:var(--prog)}.rb-draw .ti-lock rect,.rb-draw .ti-lock path{stroke-dasharray:48;stroke-dashoffset:48;animation:rb-draw .7s ease .15s forwards}
.rb-line i.mu{background:color-mix(in srgb,var(--muted) 45%,transparent)}.rb-muted{color:var(--muted)}
.rb-acts{display:inline-flex;align-items:center;gap:.8rem}.rb-acts button{background:none;border:0;padding:0;font:inherit;font-weight:800;cursor:pointer}.rb-acts button:hover{text-decoration:underline}
.rb-how{font-weight:600;color:var(--t-blue);text-decoration:underline;text-underline-offset:2px;cursor:help}
a.rb-open{color:inherit;text-decoration:none;cursor:pointer}a.rb-open:hover .rb-s{text-decoration:underline}a.rb-open:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}.rb-acts .rb-decline{color:var(--prog)}.rb-acts button:disabled{cursor:default;opacity:.7;text-decoration:none}.rb-acts button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}.rb-line i.rb-wait{background:color-mix(in srgb,var(--prog) 45%,transparent);transition:width 1s linear}.rb-cd{font-variant-numeric:tabular-nums}
.rb-line i{position:relative;overflow:hidden;transition:width .7s cubic-bezier(.22,.8,.3,1),background-color .5s ease}
.rb-t{position:relative}
.rbx-out{position:absolute;left:0;right:0;top:0;overflow:hidden;text-overflow:ellipsis;animation:rb-up-out .32s ease forwards}
.rbx-in{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:top;animation:rb-up-in .38s cubic-bezier(.2,.8,.3,1) both}
@keyframes rb-up-out{to{transform:translateY(-110%);opacity:0}}
@keyframes rb-up-in{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
.rbr-in{animation:rb-fade-in .35s ease .08s both}
.rbr-out{position:absolute;right:1rem;top:.6rem;pointer-events:none;animation:rb-fade-out .25s ease forwards}
@keyframes rb-fade-in{from{opacity:0}}@keyframes rb-fade-out{to{opacity:0}}
.rb .ti-pop{animation:rb-pop .45s cubic-bezier(.3,1.6,.5,1) both}
.rb .ti-spin.ti-pop{animation:rb-pop .45s cubic-bezier(.3,1.6,.5,1) both,rb-spin 1.6s linear .45s infinite}
@keyframes rb-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
/* one sweep of light along the line when it moves forward */
.rb-sweep .rb-line i::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 30%,rgba(255,255,255,.75) 45%,transparent 60%) no-repeat;background-size:250% 100%;animation:rb-sweep .9s ease-out forwards}
@keyframes rb-sweep{from{background-position:120% 0}to{background-position:-60% 0}}
/* Shimmer while a step runs: a soft highlight keeps running along the filled part */
/* while a step runs the blue part pulses, glowing and fading (Christiaan, Oct 24: "the pulse for when the other
   steps are going", slowed to 2.8 s); while in line a soft blue shimmer runs along the whole track, since the blue part
   is only a sliver, and the hourglass runs out and flips */
.rb.running .rb-line i{animation:rb-pulse 2.8s ease-in-out infinite}
@keyframes rb-pulse{50%{filter:brightness(1.7);box-shadow:0 0 8px 1px color-mix(in srgb,var(--t-blue) 60%,transparent)}}
.rb.queued .rb-line{background:linear-gradient(90deg,transparent 0 35%,color-mix(in srgb,var(--t-blue) 55%,transparent) 50%,transparent 65%) no-repeat,var(--line);background-size:300% 100%,auto;animation:rb-shim 2.2s linear infinite}
.rb .ti-hg{stroke:var(--t-blue)}
.rb .hg{transform-origin:12px 12px;transform-box:view-box;animation:rb-hg 3.2s ease-in-out infinite}
.rb .hg .sand-t,.rb .hg .sand-b{fill:var(--t-blue);stroke:none;transform-box:view-box}
.rb .hg .sand-t{transform-origin:12px 11px;animation:rb-sandt 3.2s linear infinite}
.rb .hg .sand-b{transform-origin:12px 20px;animation:rb-sandb 3.2s linear infinite}
@keyframes rb-hg{0%,80%{transform:rotate(0)}100%{transform:rotate(180deg)}}
@keyframes rb-sandt{0%{transform:scaleY(1)}80%,100%{transform:scaleY(0)}}
@keyframes rb-sandb{0%{transform:scaleY(0)}80%,100%{transform:scaleY(1)}}
/* the request window's time line (Christiaan picked C, Oct 24): a blue box with the hourglass above the daily limit */
.rq-time{display:flex;gap:.6rem;align-items:flex-start;margin:1rem 0 0;font-size:.92rem;line-height:1.4;color:var(--ink);
  background:color-mix(in srgb,var(--t-blue) 12%,transparent);border:1px solid color-mix(in srgb,var(--t-blue) 35%,transparent);border-radius:10px;padding:.65rem .8rem}
.rq-time svg{width:1.15rem;height:1.15rem;flex:none;margin-top:.1rem;fill:none;stroke:var(--t-blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes rb-shim{from{background-position:130% 0}to{background-position:-30% 0}}
/* Ready or Stopped: the mark draws in and the card glows once, green or amber */
.rb-draw .ti-ok path,.rb-draw .ti-stop path{stroke-dasharray:24;stroke-dashoffset:24;animation:rb-draw .55s ease .15s forwards}
@keyframes rb-draw{to{stroke-dashoffset:0}}
.card.rb-glow{animation:rb-glow 1.4s ease}
.card.rb-warn{animation:rb-warn 1.4s ease}
@keyframes rb-glow{30%{box-shadow:0 0 0 2px color-mix(in srgb,var(--kill) 70%,transparent),0 0 28px color-mix(in srgb,var(--kill) 35%,transparent)}}
@keyframes rb-warn{30%{box-shadow:0 0 0 2px color-mix(in srgb,var(--prog) 70%,transparent),0 0 28px color-mix(in srgb,var(--prog) 35%,transparent)}}
@media (prefers-reduced-motion:reduce){.rb-line i{transition:none}.rb.running .rb-line i,.rb.queued .rb-line,.rb .hg,.rb .hg path{animation:none}.rb-sweep .rb-line i::before{display:none}
  .rbx-out,.rbr-out{display:none}.rbx-in,.rbr-in,.rb .ti-pop,.card.rb-glow,.card.rb-warn{animation:none}.rb-draw .ti-ok path,.rb-draw .ti-stop path{animation:none;stroke-dasharray:none}}
.boss:has(.rb) .team{margin-top:0}
.newpill{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--kill);border:1px solid var(--kill);border-radius:999px;padding:.05rem .4rem;flex:none}

/* ---- Request review confirmation (Christiaan picked "Dungeon banner", Oct 20): the run's art with its name over it,
   the four steps of a review, today's requests, then Not now / Request review. Built by confirmRequest(). ---- */
.rq-back{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--c-0A0D18) 55%,transparent)}
.rq{width:min(30rem,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.rq-ban{background:linear-gradient(180deg,color-mix(in srgb,var(--c-0A0D18) 15%,transparent),color-mix(in srgb,var(--c-0A0D18) 85%,transparent)),var(--art,linear-gradient(135deg,#2a3150,var(--c-141A2E)));
  background-size:cover;background-position:center;padding:3.2rem 1.5rem 1rem;color:#fff;border-radius:16px 16px 0 0}
.rq-eb{margin:0 0 .2rem;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.rq-ban h3{font-family:var(--fh);font-weight:var(--fhw);font-size:1.7rem;margin:0;line-height:1.15;letter-spacing:var(--fhls);font-size-adjust:none}
.rq-sub{margin:.15rem 0 0;color:var(--c-DFE3EF);font-size:.92rem}
.rq-in{padding:1.1rem 1.5rem 1.4rem}
.rq-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.rq-steps li{font-size:.82rem;color:var(--muted);border-top:3px solid color-mix(in srgb,var(--t-blue) 50%,transparent);padding-top:.4rem;line-height:1.3}
.rq-steps li b{display:block;color:var(--ink);font-size:.88rem}
.rq-lim{margin:1rem 0 0;font-size:.92rem;color:var(--muted)}.rq-lim b{color:var(--ink)}
.rq-pips{display:inline-flex;gap:.3rem;vertical-align:-1px;margin-right:.45rem}
.rq-pips i{width:.7rem;height:.7rem;border-radius:50%;border:1.5px solid var(--gold)}.rq-pips i.u{background:var(--gold)}
.rq-pips i.n{background:color-mix(in srgb,var(--gold) 45%,transparent)}
.rq-acts{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.2rem}
.rq-acts button{font:inherit;font-weight:800;border-radius:999px;padding:.55rem 1.2rem;cursor:pointer}
.rq-no{border:1px solid var(--line);background:transparent;color:var(--ink);font-weight:700}
.rq-yes{border:0;background:var(--gold);color:var(--c-1B2340)}
.rq-acts button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:520px){.rq-steps{grid-template-columns:1fr 1fr;row-gap:.8rem}.rq-ban h3{font-size:1.45rem}}
/* View as (Oct 20, admins only): a slim amber bar under the top bar while looking at a guildmate's Dashboard,
   in the yellow tip box colors ("worth checking"): soft tint, thin border in the color, the way back on the right */
.vas{width:calc(100% - 2rem);max-width:58rem;box-sizing:border-box;margin:.75rem auto 0;padding:.5rem .6rem .5rem .9rem;display:flex;align-items:center;gap:.75rem;
  background:var(--prog-soft);border:1px solid color-mix(in srgb,var(--prog) 45%,transparent);border-radius:10px;font-size:.9rem;color:var(--ink)}
.vas p{margin:0;flex:1;min-width:0}
.vas button{flex:none;border:1px solid color-mix(in srgb,var(--prog) 45%,transparent);background:var(--panel);border-radius:8px;padding:.3rem .65rem;font-weight:700;cursor:pointer}
.vas button:hover{background:var(--soft)}
@media (max-width:620px){.vas{width:calc(100% - 32px);margin-top:.6rem;flex-wrap:wrap}}
.rb-req:disabled{opacity:.55;cursor:not-allowed}

/* Warcraft Logs down (Oct 21, option D): one amber notice above the list on both tabs; the cards stay as they are */
.wcl-note{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;margin:0 0 1.2rem;background:color-mix(in srgb,var(--prog) 10%,var(--panel));border-color:color-mix(in srgb,var(--prog) 35%,transparent);font-size:.92rem;color:var(--ink)}
.wcl-note b{color:var(--prog)}.wcl-note .wd{width:1.2rem;height:1.2rem;flex:none;margin-top:.1rem;fill:none;stroke:var(--prog);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Today row and refresh strip (Oct 22, option H + glass strip) */
.tnow{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem .9rem;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-weight:600;font-size:.92rem;margin-bottom:.75rem}
.night.today .tnow{margin-bottom:0}
.tnow-b{display:inline-flex;align-items:center;gap:.4rem;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);background:transparent;color:var(--gold);border-radius:999px;padding:.3rem .85rem;font:inherit;font-weight:800;font-size:.85rem;cursor:pointer;white-space:nowrap;flex:none}
.tnow-b:hover,.tnow-b:focus-visible{border-color:var(--gold)}
.tnow-b.wait{color:var(--muted);border-color:var(--line)}
.tnow-b svg{display:block}
.tnow-b.busy svg{animation:rfrspin 1s linear infinite}
@media (max-width:520px){.tnow{flex-direction:column;align-items:flex-start;gap:.5rem}}
.fresh-in{animation:freshIn .45s cubic-bezier(.2,.8,.2,1) both}
.fresh-in::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(91,209,139,.6);animation:freshGlow 2.4s ease forwards;pointer-events:none;z-index:3}
@keyframes freshIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes freshGlow{0%,60%{opacity:1}100%{opacity:0}}
.rstrip{position:fixed;left:50%;transform:translateX(-50%);width:min(calc(100% - 2rem),58rem);z-index:40;display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem .6rem .75rem;border-radius:12px;
  background:color-mix(in srgb,var(--panel) 68%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 8px 22px rgba(0,0,0,.28);color:var(--ink);transition:opacity .35s ease,transform .35s ease}
.rstrip.hide{opacity:0;transform:translate(-50%,-10px);pointer-events:none}
.rstrip .body{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:.1rem .5rem;align-items:baseline}
.rstrip .ttl{font-weight:800}
.rstrip .sub{color:var(--muted);font-size:.9rem}
.rstrip .x{border:0;background:none;color:var(--muted);cursor:pointer;padding:.2rem;line-height:0;flex:none}
.rstrip .x:hover{color:var(--ink)}
.rring{position:relative;width:2.1rem;height:2.1rem;flex:none}
.rring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.rring.spin svg{animation:rringSpin 1s linear infinite}
@keyframes rringSpin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
.rring .num{position:absolute;inset:0;display:grid;place-items:center;font-size:.64rem;font-weight:800;font-variant-numeric:tabular-nums}
.rico{width:2.1rem;height:2.1rem;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--soft)}
.rico svg{display:block}
.rico.c-found{color:var(--kill,#3FA66B)}.rico.c-none{color:var(--muted)}.rico.c-busy{color:var(--prog,#C98A2B)}
@keyframes rfrspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tnow-b.busy svg,.rring.spin svg,.fresh-in,.fresh-in::after{animation:none}}

/* DEPTH (Oct 28): Dashboard cards lift on a shadow with a hairline border; a card inside a card gets a border only,
   set into it in the page's darker tone (never a shadow on a shadowed card) */
:is(.avd-card,.bc-tile,.bcard,.bf-fold,.bh-tile,.burn-tiles>div,.card,.cd-box,.coach,.dg-card,.dh-card,.dpsv,.gc,.gp-dg,.hb-card,.ht-plot,.jb,.lay-b .rl-sec,.mstat>div,.nm-card,.patterns,.pcm-card,.pg,.player,.pn-card,.ptx-a-fight,.pv-card,.pv-fx,.pv-panel,.pv-pc,.pv-sr,.pvs,.pvx,.rb-tl,.rl-chart,.rl-costs,.rl-insight,.rl-mcard,.rl-prog,.rl-sm,.rl-story,.rl-time,.tablewrap,.timeline,.tl-detail,.tldr,details.deep,details.hx-c,details.hx-i,details.phx,details.wc-item):not(:is(.avd-card,.bc-tile,.bcard,.bf-fold,.bh-tile,.burn-tiles>div,.card,.cd-box,.coach,.dg-card,.dh-card,.dpsv,.gc,.gp-dg,.hb-card,.ht-plot,.jb,.lay-b .rl-sec,.mstat>div,.nm-card,.patterns,.pcm-card,.pg,.player,.pn-card,.ptx-a-fight,.pv-card,.pv-fx,.pv-panel,.pv-pc,.pv-sr,.pvs,.pvx,.rb-tl,.rl-chart,.rl-costs,.rl-insight,.rl-mcard,.rl-prog,.rl-sm,.rl-story,.rl-time,.tablewrap,.timeline,.tl-detail,.tldr,details.deep,details.hx-c,details.hx-i,details.phx,details.wc-item) *){border-color:var(--line)!important;box-shadow:inset 0 1px 0 var(--hl),var(--soft-sh)!important}
:is(.avd-card,.bc-tile,.bcard,.bf-fold,.bh-tile,.burn-tiles>div,.card,.cd-box,.coach,.dg-card,.dh-card,.dpsv,.gc,.gp-dg,.hb-card,.ht-plot,.jb,.lay-b .rl-sec,.mstat>div,.nm-card,.patterns,.pcm-card,.pg,.player,.pn-card,.ptx-a-fight,.pv-card,.pv-fx,.pv-panel,.pv-pc,.pv-sr,.pvs,.pvx,.rb-tl,.rl-chart,.rl-costs,.rl-insight,.rl-mcard,.rl-prog,.rl-sm,.rl-story,.rl-time,.tablewrap,.timeline,.tl-detail,.tldr,details.deep,details.hx-c,details.hx-i,details.phx,details.wc-item) :is(.avd-card,.bc-tile,.bcard,.bf-fold,.bh-tile,.burn-tiles>div,.card,.cd-box,.coach,.dg-card,.dh-card,.dpsv,.gc,.gp-dg,.hb-card,.ht-plot,.jb,.lay-b .rl-sec,.mstat>div,.nm-card,.patterns,.pcm-card,.pg,.player,.pn-card,.ptx-a-fight,.pv-card,.pv-fx,.pv-panel,.pv-pc,.pv-sr,.pvs,.pvx,.rb-tl,.rl-chart,.rl-costs,.rl-insight,.rl-mcard,.rl-prog,.rl-sm,.rl-story,.rl-time,.tablewrap,.timeline,.tl-detail,.tldr,details.deep,details.hx-c,details.hx-i,details.phx,details.wc-item){border-color:var(--line)!important;box-shadow:none!important;background:var(--bg)!important}
/* the toast slides out from under the top bar */
.rstrip{z-index:19;transition:transform .36s cubic-bezier(.32,.72,0,1),opacity .12s linear}
.rstrip.hide{opacity:0;transform:translate(-50%,calc(-100% - 18px));transition:transform .22s cubic-bezier(.55,0,1,.45),opacity .12s linear .1s}
@starting-style{.rstrip:not(.hide){opacity:0;transform:translate(-50%,calc(-100% - 18px))}}
@media (prefers-reduced-motion:reduce){.rstrip,.rstrip.hide{transition:opacity .15s linear!important}.rstrip.hide{transform:translateX(-50%)!important}}
/* END DEPTH */