/* Review page components (raid fight pages, key reviews, the home page's sample card). Moved out of the builders'
   inline <style> blocks on Oct 20 (docs/PLAN_SCALE.md, "Change things in one place"): a look changes here, for every
   page, with no rebuild. Linked after site.css and before spacing.css by tools/site_nav.py ui_head(). */
/* ---- fight (was build_player.py FIGHT_CSS) ---- */
.fight-head{margin-bottom:1.25rem}
.fight-head .fh-t{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.fight-head h1{font-size:clamp(1.9rem,5.5vw,2.6rem)}
.fpill{display:inline-block;padding:.15rem .65rem;border-radius:999px;font-size:.85rem;font-weight:700;white-space:nowrap}
.fpill.kill{background:var(--kill-soft);color:var(--kill)}
.fpill.prog{background:var(--prog-soft);color:var(--prog)}
.fight-head .fight-meta{margin:.45rem 0 0;color:var(--muted)}
.fight-head .tiles{margin-top:1rem}
.fsib{display:flex;flex-wrap:wrap;gap:.4rem}
.fsib a,.fsib span{border-radius:999px;border:1px solid var(--line);font-weight:700;text-decoration:none}
.fsib span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
main:has(.fight-head){padding-top:1.25rem}
/* fight pages and key reviews only */
.part>.part-h{top:var(--sn-h,0px)!important}
/* ---- tab (was build_player.py TAB_CSS) ---- */
/* Header: date tile, boss name, best pull or kill, night details, the night's other fights */
.fhv{margin-bottom:1rem;padding:0;border:0;white-space:normal}
.fhv h1{font-size:clamp(1.7rem,5vw,2.3rem);margin:0}
.fsib{margin:0}
.fsib a,.fsib span{padding:.15rem .6rem;font-size:.82rem}
.h1row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.hmeta{color:var(--muted);font-size:.98rem}
.hmeta b{color:var(--ink)}
.fnote{margin:.7rem 0 0;font-size:.85rem;white-space:normal}
/* look comes from the tip boxes in site.css */
.h4row{display:grid;grid-template-columns:3.6rem 1fr auto;gap:.9rem;align-items:center}
.h4row .cal{display:block;height:auto;width:3.6rem;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--panel);text-align:center;padding:0}
.h4row .cal span{line-height:1.35}
.h4row .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}
.h4row .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}
.h4row .cal .w{display:block;color:var(--muted);font-size:.75rem;font-weight:700;padding-bottom:.2rem}
.h4txt .hmeta,.h4sub{margin:.15rem 0 0}
.h4sub{color:var(--muted);font-size:.85rem}
.h4row .fsib{align-self:start}
@media (max-width:520px){
  .h4row{grid-template-columns:3rem 1fr}
  .h4row .fsib{grid-column:1/-1}
  .h4row .cal{width:3rem}
  .h4row .cal .d{font-size:1.35rem}
}
/* Tabs: a full-width bar that sticks under the site bar, sitting on the boxed panel's gold top edge */
.ftabwrap{margin-top:1.5rem}
.ftabs{display:grid;grid-template-columns:repeat(3,1fr);position:sticky;top:var(--sn-h,0px);z-index:15;background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;overflow:hidden}
.ftabs button{font:inherit;cursor:pointer;background:none;border:0;text-align:center;font-size:.88rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:.75rem 1rem}
.ftabs button+button{border-left:1px solid var(--line)}
.ftabs button:hover{color:var(--ink)}
.ftabs button[aria-selected="true"]{color:var(--panel);background:var(--gold)}
.ftabs button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.fpanels{border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:0 0 12px 12px;padding:1.25rem;background:color-mix(in srgb,var(--panel) 45%,var(--bg))}
.scope2{margin:0 0 .9rem;font-size:.85rem;line-height:1.5;color:var(--muted)}
.scope2 .info{margin-left:.3rem;vertical-align:.05em}
.scope2 b{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem;color:var(--gold)}
.fpanels .tl-detail{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:0 0 .6rem}
.fpanels{min-width:0}
.fpanel .part>.part-h{display:none}
.fpanel .part{margin-top:0;padding-top:0;border-top:0}
.fpanel .gear-sec{margin-top:0;padding-top:0;border-top:0}
.fpanel .coach-top{margin:0 0 1.25rem}
.ptop{margin:0 0 1.25rem}
.ptop .tiles{margin:0}
.ptop .actions{margin:.75rem 0 0}
@media (max-width:760px){
  .ftabs button{font-size:.7rem;letter-spacing:.04em;padding:.7rem .3rem}
  .fpanels{padding:1rem .85rem}
}
/* ---- tldr (was build_player.py TLDR_CSS) ---- */
/* TL;DR card: what to work on, then improvements; each item opens its tab */
.tldr{margin:0 0 1.25rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem .5rem}
.tldr h2{font-size:1.05rem;margin:0}
.tl-h{display:flex;align-items:center;justify-content:space-between;gap:.25rem 1rem;margin:0 0 .4rem}
.tl-col+.tl-col{margin-top:.6rem;border-top:1px dashed var(--line);padding-top:.8rem}
.tl-quiet{margin:.1rem 0 .6rem;color:var(--muted);font-size:.95rem}
.tl-list{list-style:none;margin:0;padding:0}
.tl-it{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.1rem .7rem;align-items:center;cursor:pointer;padding:.5rem .1rem;border-radius:8px}
.tl-it:hover{background:color-mix(in srgb,var(--line) 35%,transparent)}
.tl-it:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tl-n{display:grid;place-items:center;min-width:1.6rem;height:1.6rem;border-radius:50%;font-weight:800;font-size:.85rem;background:var(--work-soft,#E4ECF8);color:var(--work,#2B5AA8)}
.tl-n.tl-ok{background:var(--kill-soft);color:var(--kill)}
.tl-body{min-width:0}
.tl-tt{display:flex;align-items:center;gap:.45rem;min-width:0}
.tl-t{font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tl-to{font-size:.78rem;font-weight:700;color:var(--gold);white-space:nowrap;opacity:.85}
.tl-it:hover .tl-to{opacity:1;text-decoration:underline}
.tl-it .imp{flex:none}
@media (max-width:520px){
  .tl-to{font-size:.78rem;opacity:.8}
}
/* Doing well: same row spacing as What to work on, smaller text, two columns on wider screens, no tab label */
.tl-wins .tl-list{display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem}
@media (max-width:520px){
  .tl-wins .tl-list{grid-template-columns:1fr}
}
.tl-wins .tl-to{display:none}
.tl-wins .tl-n{min-width:1.1rem;height:1.1rem;font-size:.65rem}
.tl-wins .tl-t{font-size:.88rem;font-weight:600}
/* detail at the top of each tab */
.tl-detail{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:.4rem 1rem .6rem;margin:0 0 1.25rem}
.tl-dh{margin:.45rem 0 .1rem;font-size:.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.tl-d{padding:.7rem 0;border-top:1px solid var(--line);border-radius:6px;transition:background-color .6s}
.tl-dh+.tl-d{border-top:0}
.tl-dt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:start;font-weight:700;line-height:1.35}
.tl-dt .tl-n{margin-top:-.05rem}
.tl-dt .imp{vertical-align:.1em;margin-left:.2rem}
.tl-d ul{margin:.4rem 0 0 2.2rem;padding:0}
.tl-d li{margin:.2rem 0}
.tl-d .wc-why{margin:.4rem 0 0 2.2rem}
.dwc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3rem .8rem;margin:.5rem 0 0 2.2rem}
.dwc dt{font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-top:.18rem}
.dwc dt:first-child{color:var(--gold)}
.dwc dd{margin:0}
.tl-see{display:table;margin-top:.2rem;color:var(--muted);font-weight:600;font-size:.85rem;white-space:nowrap;text-decoration:none}
.tl-see:hover{color:var(--ink);text-decoration:underline}
.fpanel .flash{background:color-mix(in srgb,var(--gold) 14%,transparent);transition:background-color .6s}
@media (max-width:520px){
  .dwc{margin-left:0}
}
.tl-d.flash{background:color-mix(in srgb,var(--gold) 18%,transparent)}
.tl-dt[data-slots]{cursor:pointer}
.tl-dt[data-slots]:hover>span:last-child{text-decoration:underline dotted;text-underline-offset:3px}
/* ---- dpsv (was build_player.py DPSV_CSS) ---- */
.dpsv{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem 1rem;margin:0 0 1rem}
.dv-h{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.dv-h .tl{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dv-scope{font-size:.82rem;color:var(--muted)}
.dv-scope::before{content:"·";margin-right:.4rem}
.dv-scope b{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem;color:var(--gold)}
.dv-big{font-size:2rem;font-weight:800;line-height:1.1;margin:.15rem 0 .5rem;color:var(--gold)}
.dv-you{--c:var(--gold)}
.dv-same{--c:#7FA7E6}
.dv-top{--c:var(--muted)}
.dv-track{position:relative;height:.9rem;border-radius:999px;background:color-mix(in srgb,var(--line) 70%,transparent)}
.dv-fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--gold)}
.dv-tick{position:absolute;top:-.3rem;bottom:-.3rem;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--c)}
.dv-legend{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin-top:.65rem;font-size:.85rem;color:var(--muted)}
.dv-lg{display:inline-flex;align-items:center;gap:.35rem}
.dv-lg i{width:.7rem;height:.7rem;border-radius:3px;background:var(--c)}
.dv-lg b{color:var(--ink)}
/* ---- gear plan (was build_player.py GEAR_PLAN_CSS) ---- */
.gp-legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.82rem;color:var(--muted);margin:.2rem 0 .6rem}
.gp-legend span{display:inline-flex;align-items:center;gap:.35rem}
.gp-legend i{display:inline-block;width:.9rem;height:.55rem;border-radius:3px}
.gp-k-fill{background:var(--gold)}
.gp-k-ext{background:repeating-linear-gradient(90deg,var(--gold) 0 3px,transparent 3px 6px);opacity:.6}
.gp-k-med{width:3px!important;height:.9rem!important;background:var(--ink)}
.gp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.gp-row{display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto auto;grid-template-areas:"ic nm il pill" ". txt txt txt" ". bar bar bar";align-items:center;column-gap:.55rem;row-gap:.3rem;padding:.5rem .6rem;border-radius:10px;border-left:4px solid transparent}
.gp-row:nth-child(odd){background:color-mix(in srgb,var(--line) 22%,transparent)}
.gp-low{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 7%,var(--panel))!important}
.gp-ic{grid-area:ic;display:flex}
.gp-ic img{width:22px;height:22px;border-radius:4px}
.gp-nm{grid-area:nm;min-width:0;display:flex;align-items:center;gap:.4rem}
.gp-nm b{font-weight:700}
.gp-txt{grid-area:txt;min-width:0;line-height:1.35;font-size:.88rem}
.gp-txt small{color:var(--muted);font-size:.8rem;white-space:nowrap}
.gp-il{grid-area:il;font-weight:800;font-variant-numeric:tabular-nums;font-size:1.05rem}
.gp-pill{grid-area:pill;font-size:.74rem;font-weight:800;letter-spacing:.03em;padding:.2rem .5rem;border-radius:999px;white-space:nowrap;justify-self:end}
.gp-rep{background:color-mix(in srgb,var(--bad) 14%,var(--panel));color:var(--bad)}
.gp-up{background:var(--gold-soft);color:var(--gold)}
.gp-max{background:var(--kill-soft);color:var(--kill)}
.gp-cap{background:color-mix(in srgb,var(--line) 60%,transparent);color:var(--muted)}
.gp-tier{font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--work);border:1px solid currentColor;border-radius:4px;padding:0 .25rem}
.gp-bar{grid-area:bar;position:relative;height:.45rem;border-radius:999px;background:color-mix(in srgb,var(--line) 70%,transparent)}
.gp-fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--gold)}
.gp-low .gp-fill{background:var(--bad)}
.gp-ext{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(90deg,var(--gold) 0 3px,transparent 3px 6px);opacity:.6}
.gp-med{position:absolute;top:-.25rem;bottom:-.25rem;width:2px;margin-left:-1px;background:var(--ink);border-radius:2px}
.gp-dgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem;margin:.4rem 0 .8rem}
.gp-dg{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.65rem .8rem}
.gp-dh{display:flex;flex-direction:column;margin-bottom:.35rem}
.gp-dh small{color:var(--muted);font-size:.82rem}
.gp-dg ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.gp-dg li{display:flex;align-items:center;gap:.4rem;font-size:.9rem;min-width:0}
.gp-dg li .ic{flex:none}
.gp-sl{flex:none;width:4.6rem;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.gp-note{font-size:.9rem;margin:.5rem 0;max-width:44rem}
.gp-note b{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--work);margin-right:.35rem}
/* ---- gp opt (was build_player.py GP_OPT_CSS) ---- */
.o-quiet{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;margin:.8rem 0 .2rem;padding-top:.6rem;border-top:1px dashed var(--line);opacity:.6}
.o-ql{font-size:.78rem;color:var(--muted);margin-right:.2rem}
.o-q{display:inline-flex;align-items:center;gap:.2rem;font-size:.75rem;color:var(--muted)}
.o-q img{width:16px;height:16px;border-radius:3px;filter:grayscale(1)}
.o-q b{font-weight:600}
.o4{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem}
.o4-b{border-radius:12px;padding:.7rem .8rem;border:1px solid var(--line);background:color-mix(in srgb,var(--gold) 6%,var(--panel))}
.o4-b.o-replace{background:color-mix(in srgb,var(--bad) 6%,var(--panel))}
/* soft tint, no colored edge (Style rules) */
.o4-h{display:flex;align-items:center;justify-content:space-between}
.o4-h span{font-weight:800;font-size:1.2rem}
.o4-b p{margin:.15rem 0 .5rem;font-size:.82rem;color:var(--muted)}
.o4-b ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.o4-b li{display:grid;grid-template-columns:1.4rem minmax(0,1fr) auto;align-items:center;gap:.45rem;font-size:.9rem}
.o4-n{display:flex;align-items:center;gap:.35rem;font-weight:700}
.o4-v{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
.o4-v i{font-style:normal;margin:0 .25rem}
.o4-v b{color:var(--ink);font-weight:800}
/* ---- gp where (was build_player.py GP_WHERE_CSS) ---- */
.cw-r{position:relative}
.o4-b li.cw-r{grid-template-columns:1.4rem minmax(0,1fr) auto auto}
.wp{position:relative}
.wp>summary{list-style:none;cursor:pointer;font-size:.72rem;font-weight:800;letter-spacing:.03em;color:var(--work);border:1px solid color-mix(in srgb,var(--work) 45%,transparent);border-radius:999px;padding:.12rem .45rem}
.wp>summary::-webkit-details-marker{display:none}
.wp-pop{display:none;position:absolute;right:0;top:calc(100% + .35rem);z-index:30;width:min(19rem,82vw);background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.18);padding:.6rem .7rem}
.wp[open] .wp-pop{display:block}
@media (hover:hover){
  .wp:hover .wp-pop{display:block}
}
.wp-h{margin:0 0 .3rem;font-weight:800;font-size:.85rem}
.wp-k{margin:0 0 .35rem;font-size:.78rem;color:var(--muted)}
.wp-l{list-style:none;margin:0 0 .35rem;padding:0;display:flex;flex-direction:column;gap:.35rem}
.wp-l li{display:flex!important;flex-wrap:wrap;align-items:center;gap:.15rem .4rem;font-size:.85rem}
.wp-d{flex-basis:100%;font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.wp-i{display:inline-flex;align-items:center;gap:.3rem;min-width:0}
.wp-sts{display:inline-flex;gap:.2rem}
.wp-st{font-size:.68rem;font-weight:700;padding:0 .3rem;border-radius:4px;background:var(--kill-soft);color:var(--kill)}
.wp-l small{flex-basis:100%;color:var(--muted);font-size:.75rem}
.wp-c{margin:.25rem 0 0;font-size:.8rem;color:var(--muted)}
.wp-c b{color:var(--ink);margin-right:.25rem}
.o4-b li>a.o4-ic{display:flex}
.o-q>a.wh{display:inline-flex;align-items:center;gap:.2rem}
.wp[open]>summary{background:color-mix(in srgb,var(--work) 12%,transparent)}
/* a gear tip opened this row: its Where detail shows in the card under the row, not as a pop-up */
.o4-b li.wp-in .wp-pop{display:none!important}
.wp-inl{grid-column:1/-1;margin:.1rem 0 .35rem;padding:.55rem .65rem;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.o4-b.flash{background:color-mix(in srgb,var(--gold) 14%,var(--panel))}
/* ---- cs (was build_player.py CS_CSS) ---- */
.k-cks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.k-ck{display:grid;grid-template-columns:3rem 1.4rem minmax(0,1fr) auto;align-items:center;gap:.5rem;padding:.4rem .5rem;border-radius:10px}
.k-ic{display:inline-flex;width:18px;flex:none}
.k-ckt{display:flex;flex-direction:column;min-width:0}
.k-ckt small{color:var(--muted);font-size:.78rem}
.k-ckt small a{white-space:normal}
.k-act{font-size:.76rem;font-weight:700;color:var(--bad)}
.km{justify-self:start;font-size:.66rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;padding:.15rem .4rem;border-radius:999px;min-width:2.6rem;text-align:center;color:var(--m);background:color-mix(in srgb,var(--m) 16%,transparent)}
.km-ok{--m:var(--kill)}
.km-fix{--m:var(--bad)}
.km-warn{--m:var(--prog)}
.km-none{--m:var(--muted)}
.k-st-ok{opacity:.65}
.k-st-none{opacity:.55}
.k-st-fix{background:color-mix(in srgb,var(--bad) 8%,var(--panel))}
.k-st-warn{background:color-mix(in srgb,var(--prog) 10%,var(--panel))}
.k-st-warn .k-act{color:var(--prog)}
.cs-fun{display:flex;align-items:flex-start;gap:.45rem;margin:.7rem 0 0;font-size:.88rem;padding:.5rem .65rem;border-radius:10px}
.cs-praise{background:var(--kill-soft)}
.cs-joke{background:var(--gold-soft)}
@media (max-width:520px){
  .k-ck{grid-template-columns:3rem 1.4rem minmax(0,1fr)}
  .k-ck .k-act{grid-column:3}
}
/* ---- A section link inside a sentence (Oct 20): gold text with a gold underline, part of the line, not a pill ---- */
a.see-inl.tl-see{display:inline;margin:0;padding:0;border:0;background:none;white-space:normal;font:inherit;font-weight:600;color:var(--gold);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}
a.see-inl.tl-see:hover{color:var(--ink);text-decoration-color:var(--gold)}
/* summary rows (Oct 23): the Why sits behind an (i) on the row; the row itself goes to its section */
.tl-tt .tl-why{flex:none;margin-left:6px}
.tl-clean{font-style:italic}

/* ---- Active mitigation card (layout patterns pick 4B): key reviews and raid tank pages (Oct 25), html in
   tools/sections/mitigation.py. Moved from mplus.css so one edit changes both. ---- */
.ms-do{display:flex;gap:.8rem;align-items:baseline;padding:.75rem .9rem;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:10px;background:var(--gold-soft);margin:.2rem 0 1.1rem;font-weight:600;line-height:1.45}
.ms-dok{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.ms{margin:.2rem 0 1.2rem}
.ms-h{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin-bottom:.35rem;font-size:.92rem}
.ms-h span{color:var(--muted)}
.ms-h .map-open{margin:0 0 0 auto;padding:.25rem .7rem;font-size:.78rem}
.ms-pins{position:relative;height:24px}
.ms-pin{position:absolute;top:0;transform:translateX(-50%)}
.ms-pin a{display:block;line-height:0}
.ms-pin .ic{width:20px;height:20px;margin:0;border-radius:4px;box-shadow:0 0 0 1.5px var(--gold)}
.ms-pin.w .ic{box-shadow:0 0 0 1.5px var(--bad)}
.ms-band{position:relative;height:22px;border-radius:5px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}
.ms-up{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--gold) 70%,transparent)}
.ms-dn{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--bad) 55%,transparent);display:grid;place-items:center}
.ms-dn b{font-size:.72rem;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.ms-bt{position:absolute;top:0;bottom:0;display:grid;place-items:center;border-right:1px dashed color-mix(in srgb,var(--ink) 35%,transparent)}
.ms-bt b{font-size:.68rem;font-weight:600;color:var(--muted);white-space:nowrap}
.ms-hits{position:relative;height:30px;border-bottom:1px solid var(--line)}
.ms-hit{position:absolute;bottom:0;width:2px;margin-left:-1px;background:color-mix(in srgb,var(--ink) 45%,transparent)}
.ms-hit.dn{background:var(--bad)}
@media (max-width:560px){
  .ms-bt{overflow:hidden}
  .ms-bt b{white-space:normal;text-align:center;font-size:.58rem;line-height:1}
}
.ms-key{font-size:.82rem;color:var(--muted);margin:-.4rem 0 .4rem}
.ms-key i{display:inline-block;width:3px;height:.8rem;background:var(--bad);margin-right:.4rem;vertical-align:-1px}
/* ---- Gear tab, Stats (tools/sections/gear.py, Oct 25): each stat bar segment shows "30% · 908", the share alone
   when the segment is narrow and nothing when it's a sliver; the primary stat line and the quiet Raidbots link */
.sbb i.sg{container-type:inline-size;position:relative}
.sbb i.sg>span{position:absolute;inset:0;display:grid;place-items:center}
.sbb i.sg .sg-s{display:none}
@container (max-width:70px){.sbb i.sg .sg-f{display:none}.sbb i.sg .sg-s{display:grid}}
@container (max-width:24px){.sbb i.sg .sg-s{display:none}}
.sb-prim{margin:8px 0 0;font-size:.85rem;color:var(--muted)}
.sb-rb{margin:16px 0 0;font-size:.85rem}
.sb-rb a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.sb-rb a:hover{color:var(--ink)}
/* What each stat is worth to you now (gear.stat_worth(), Oct 26; mockup sections-parity V2 "value in bar"): one row per
   stat, the bar's length is the stat's value next to your best one, the value sits inside the bar, the +DPS number
   on the right. Tanks get a second column (Survival); the Why line under it is quiet */
.sv{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 24px;margin:6px 0 0}
.sv-r{display:grid;grid-template-columns:6rem 1fr 5.2rem;gap:8px;align-items:center;margin-bottom:8px;font-size:.9rem}
.sv-hd{margin-bottom:4px;align-items:end}
.sv-hd .sv-h{font-size:.9rem;font-weight:700;color:var(--ink)}
.sv-hd>span:last-child{font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.2}
.sv-b{position:relative;height:16px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.sv-b i{position:absolute;left:0;top:0;bottom:0;min-width:2.4rem;border-radius:999px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;box-sizing:border-box}
.sv-b em{font-style:normal;font-size:.68rem;font-weight:700;color:var(--c-0E1220);font-variant-numeric:tabular-nums}
.sv-d{text-align:right;font-size:1.02rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.sv-note{margin:4px 0 0;font-size:.8rem;color:var(--muted)}
.sv-wait .sv-q{margin:4px 0 0;font-size:.9rem;color:var(--muted)}
.sv-why{margin-top:12px;font-size:.82rem;color:var(--muted)}
.sv-why summary{cursor:pointer;list-style:none;display:inline-flex;gap:6px;align-items:center;color:var(--muted);text-decoration:underline dotted;text-underline-offset:3px}
.sv-why summary::-webkit-details-marker{display:none}
.sv-why summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.sv-why[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.sv-why p{margin:8px 0 0;line-height:1.45}
@media (max-width:600px){.sv{grid-template-columns:1fr}.sv-r{grid-template-columns:5.2rem 1fr 4.4rem}}
/* Gear upgrades, trinkets table: long trinket names wrap on phones instead of pushing the numbers off screen */
.tr-t td:first-child .wh{white-space:normal}
.tr-t th{white-space:nowrap}

/* Fight mechanics shared by key reviews and raid pages (Oct 25, section parity; docs/SECTION_PARITY.md): the pull bar
   and Deaths (tools/sections/deaths.py), Defensive cooldowns (tools/sections/defcd.py) and the Avoidable damage bars
   (tools/sections/avoid.py). Moved here from mplus.css. Scoped where a raid page has a class of the same name: the
   Damage by ability chart's .dc-row (site.css) and the cast graph's i.hp. */
.tlx-row{display:flex;align-items:center;gap:.5rem;margin:.25rem 0}
.tlx-lab{width:5.6rem;font-size:.8rem;color:var(--muted);flex:none;line-height:1.15}
.tlx-lab small{display:block;font-size:.7rem;opacity:.8}
.tlx-end{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.55}
.tlx-track{position:relative;flex:1;height:26px;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:5px}
.tlx-track.thin{height:12px}
.tlx-p{position:absolute;top:4px;bottom:4px;background:#3d7fd9;border-radius:2px}
.tlx-p.boss{background:#c8402f}
.tlx-p.wipe{outline:2px solid #ff5a4a;outline-offset:1px}
.tlx-pen{position:absolute;top:4px;bottom:4px;background:repeating-linear-gradient(45deg,#e3a43b 0 4px,transparent 4px 8px);border-radius:2px}
.tlx-d{position:absolute;top:-4px;width:2px;height:8px;background:var(--bad);transform:translateX(-1px)}
.tlx-d.me{height:12px;background:var(--ink)}
.tlx-timer{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--gold)}
.tlx-timer b{position:absolute;top:-1.15rem;right:4px;font-size:.7rem;color:var(--gold);white-space:nowrap}
.tlx-b{position:absolute;top:1px;bottom:1px;width:4px;border-radius:2px;background:#c8402f;opacity:.8;transform:translateX(-2px)}
.tlx-axis{position:relative;height:1rem;margin-left:6.1rem;font-size:.7rem;color:var(--muted)}
.tlx-axis span{position:absolute;transform:translateX(-50%)}
.tlx-leg .lg-end{width:2px!important;background:var(--ink);opacity:.55}
.tlx-leg{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.78rem;color:var(--muted);margin:.35rem 0 .6rem}
.tlx-leg i{display:inline-block;width:12px;height:10px;border-radius:2px;margin-right:.3rem;vertical-align:-1px}
/* Deaths (Oct 21): the pull bar from Pacing, then a thin lane per player with a red x where they died */
.tlx.dl .tlx-row .tlx-lab{display:flex;align-items:center;gap:.35rem;width:8rem}
.tlx.dl .tlx-lab .dic{width:16px;height:16px}
.dl-lane{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.dl-x{position:absolute;top:50%;width:11px;height:11px;transform:translate(-50%,-50%) rotate(45deg);background:var(--bad);border-radius:2px;cursor:help}
.d-ready{display:inline-flex;align-items:center;gap:4px;margin-left:.4rem;padding:1px 8px;border-radius:99px;font-size:.75rem;font-weight:700;color:var(--prog);background:var(--prog-soft)}
.d-ready .ab{display:inline-flex}.d-ready .ab .ic{margin:0}
.dl-rows{display:grid}
.dl-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:center;padding:.5rem 0;border-top:1px solid var(--line);font-size:.9rem}
.dl-row:first-child{border-top:0}
/* Defensive cooldowns (Oct 21): a lane per ability under the Pacing pull bar. Hits differ by shape as well as color:
   solid = a defensive was up, hollow = one was ready and not pressed, short = all on cooldown. A thin line per pressed
   defensive underneath shows when it was used. */
.dc{margin:.4rem 0 .2rem}
.dc .dc-row{display:grid;grid-template-columns:13rem minmax(0,1fr) 3rem;gap:.5rem;align-items:center;padding:.35rem 0}
.dc-name{font-size:.88rem;line-height:1.25}
.dc-name .sub{display:block;font-size:.8rem;color:var(--muted)}
.dc-lane{display:grid;gap:3px}
.dc-track{position:relative;display:block;height:22px;border-radius:5px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.dc-hit{position:absolute;bottom:3px;width:6px;height:16px;border-radius:2px;transform:translateX(-50%);cursor:help}
.dc-hit.up{background:var(--kill)}
.dc-hit.ready{background:transparent;border:2px solid var(--prog);box-sizing:border-box}
.dc-hit.cd{height:7px;background:color-mix(in srgb,var(--ink) 40%,transparent)}
.dc-head{padding:.15rem 0}
.dc-head .tlx-track{height:22px}
.dc-use{position:relative;display:block;height:8px;border-radius:3px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.dc-use b{position:absolute;top:0;bottom:0;background:var(--c);border-radius:2px;cursor:help}
.dc-sep{height:1px;background:var(--line);margin:.4rem 0}
.dc-n{text-align:right}
.dc-leg{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.6rem}
.dc-leg span{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.dc-leg .dc-hit{position:static;transform:none}
.dc-sw{display:inline-block;width:16px;height:4px;border-radius:2px;background:var(--c)}
@media (max-width:620px){.dc .dc-row{grid-template-columns:7rem minmax(0,1fr) 2.4rem}.dc-name{font-size:.8rem}}
/* Partly avoidable (Oct 21): an ability with a part nobody can dodge */
.pill-part{display:inline-block;margin-left:.4rem;padding:1px 7px;border-radius:99px;font-size:.7rem;font-weight:700;color:var(--muted);background:color-mix(in srgb,var(--ink) 8%,transparent)}
/* Avoidable damage in buckets (Oct 22, mockup B): one hit as a share of your health */
div.hp{margin:.6rem 0}
.hp-row{display:grid;grid-template-columns:13rem minmax(0,1fr) 11rem auto;gap:.6rem;align-items:center;padding:.45rem 0;font-size:.85rem;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.hp-l .sub{display:block;font-size:.75rem;color:var(--muted)}.hp-l .sub .pill-part{margin-left:.3rem;font-size:.65rem;padding:0 6px}.hp-l .ab-row{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:.3rem}
.hp-row{grid-template-columns:13rem minmax(0,1fr) 10rem 8.5rem}   /* fixed columns so every bar lines up (Oct 25: a long pill shortened one bar) */
.info.howto.ic-only{margin-left:.15rem;text-decoration:none}
.hp-num{display:flex;flex-direction:column;line-height:1.15}.hp-num b{font-size:1.05rem;color:var(--ink)}.hp-num small{font-size:.72rem;color:var(--muted)}.hp-num em{font-style:normal;font-size:.72rem;color:var(--prog);margin-top:.1rem}
.hp-bar{position:relative;height:.8rem;border-radius:999px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden}.hp-bar i{position:absolute;left:0;top:0;bottom:0;display:block}
.hp-bar .bad{background:#CB6D62}.hp-bar .warn{background:var(--prog)}.hp-bar .ok{background:var(--muted)}
.hp-bar i.w8{opacity:.3}
.hp .pill-part{margin:0;justify-self:end}
.bk-h{margin:1.5rem 0 .3rem;letter-spacing:.06em;font-size:.78rem}.bk-h:first-child{margin-top:.4rem}
.bk-h.bad{color:#B4453A}.bk-h.warn{color:var(--prog)}.bk-h.ok{color:var(--muted)}
@media (max-width:640px){.hp-row{grid-template-columns:1fr auto}.hp-l,.hp-bar{grid-column:1/-1}}
.tlx.dl .dic,.dl-row .dic{width:20px;height:20px;border-radius:5px;box-shadow:0 0 0 1.5px var(--cc,var(--line));background:var(--panel)}
.tlx.dl .dic.me,.dl-row .dic.me{box-shadow:0 0 0 2px var(--gold),0 0 0 4px color-mix(in srgb,var(--gold) 35%,transparent)}
.tlx.dl .tlx-lab .dic{width:16px;height:16px}
.tlx.dl~.mini-h,div.hp .mini-h{margin:1rem 0 .3rem;font-size:.95rem}
/* ---- Damage and rotation questions (Oct 25): shared by key reviews and raid pages (tools/sections/questions.py;
   moved from mplus.css). Classes dq/dqq, never q: Wowhead's tooltips use .q for their text ---- */
.dqq{margin:.8rem 0}
.dq{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:.8rem;padding:.6rem .8rem;border-left:4px solid var(--line);margin:.4rem 0;font-size:.9rem;background:var(--panel)}
.dq.ok{border-color:var(--kill)}.dq.bad{border-color:#CB6D62}.dq.warn{border-color:var(--prog)}
.dq>b{color:var(--ink)}.dq>span{color:var(--muted);min-width:0}
.rl{list-style:none;padding:0;margin:.5rem 0 0}
.rl li{display:grid;grid-template-columns:1fr;gap:.15rem;padding:.45rem .7rem;border-left:4px solid var(--kill);margin:.3rem 0;font-size:.88rem;background:var(--panel)}
.rl li.bad{border-color:#CB6D62;background:color-mix(in srgb,#CB6D62 7%,var(--panel))}
.rl li>span{color:var(--muted)}.rl li>b{font-weight:600;color:var(--ink)}
.dq .mt{margin-top:.6rem}
@media (max-width:640px){.dq{grid-template-columns:1fr}}
/* the top fix on raid pages: a gold row inside "Are you pressing the right things?" (option B) */
.rl li.rl-top{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--panel))}
.rl li.rl-top.flash,.rl li.flash{background:color-mix(in srgb,var(--gold) 24%,var(--panel));transition:background-color .6s}
.rl li{transition:background-color 1.2s}
.rl-worth{display:inline-block;margin-left:.5rem;padding:.05rem .5rem;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c-1B2340);background:var(--gold);vertical-align:1px}
.rl li .ab .ic{width:16px;height:16px;vertical-align:-3px}
/* The fight (raid Damage and rotation): each phase's cards and Your job */
.dr-fight>*+*{margin-top:12px}
.dr-ph{margin:0;font-size:.86rem;color:var(--muted)}.dr-ph b{color:var(--ink)}
.dr-fight>.dr-ph:not(:first-child){margin-top:24px}
.dq{transition:background-color 1.2s}.dq.flash{background:color-mix(in srgb,var(--gold) 18%,var(--panel));transition:background-color .6s}
.gxl>li.flash{background:color-mix(in srgb,var(--gold) 18%,var(--panel))}
.dr-fight .gxtip{transition:background-color 1.2s}.dr-fight .gxtip.flash{background:color-mix(in srgb,var(--gold) 18%,var(--panel));transition:background-color .6s}
.rl li.warn{border-color:var(--prog);background:color-mix(in srgb,var(--prog) 7%,var(--panel))}
.dc-key{flex-wrap:wrap}
/* the key reviews' plain table (moved from mplus.css, Oct 25: the talent card's table is shared) */
table.mt{width:100%;border-collapse:collapse;font-size:.92rem;margin:.3rem 0}
table.mt th{text-align:left;font-size:.75rem;color:var(--muted);font-weight:600;padding:.3rem .4rem;border-bottom:1px solid var(--line)}
table.mt td{padding:.4rem;border-bottom:1px solid var(--line);vertical-align:top}
table.mt tr.hl td{background:color-mix(in srgb,var(--bad) 10%,transparent)}
table.mt .sub{display:block;font-size:.74rem;color:var(--muted);margin-top:4px}
/* ---- Talent tree and Copy (Oct 25): shared by key reviews and raid pages (tools/sections/talents.py; moved from
   mplus.css) ---- */
.tt-wrap{margin:.6rem 0;background:#1f1f1f;border-radius:10px;padding:.5rem .5rem 1rem}
.tt-tabs{display:flex;align-items:center;gap:.3rem;margin:0 0 .4rem;border-bottom:1px solid #333}
.tt-tabs .copy-b{margin-left:auto;margin-bottom:.3rem;border:1px solid var(--c-FFD100);background:color-mix(in srgb,var(--c-FFD100) 12%,transparent);color:#f1f1f1;border-radius:999px;padding:.35rem .85rem;font-size:.82rem}
.tt-tabs .copy-b span{color:inherit;margin-left:0;font-size:inherit;font-weight:700}
.tt-tabs .copy-b:hover{background:color-mix(in srgb,var(--c-FFD100) 22%,transparent)}
.tt-tabs .copy-b.done{border-color:var(--kill);background:color-mix(in srgb,var(--kill) 18%,transparent)}
.tt-tabs button{border:0;background:none;color:#a8a8a8;font:inherit;font-weight:700;font-size:.92rem;padding:.5rem .9rem;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.tt-tabs button span{margin-left:.4rem;font-weight:600;font-size:.75rem;color:#777}
.tt-tabs button[aria-selected=true]{color:var(--c-FFD100);border-bottom-color:var(--c-FFD100)}
.tt-tabs button[aria-selected=true] span{color:var(--c-C9A400)}
.ttw{position:relative;margin:0 auto}
@media (max-width:560px){
  .ttw{zoom:.66}
}
.tt-lines{position:absolute;left:0;top:0}
.tt-lines line{stroke:#666;stroke-width:20}
.tt-lines polygon{fill:#666}
.tt-lines line.on{stroke:#b8a01c}
.tt-lines polygon.on{fill:#b8a01c}
.tt-n{position:absolute;display:block;text-decoration:none;--fr:#8f8f8f;z-index:1;isolation:isolate}
.tt-n.tn-on{--fr:var(--c-FFD100)}
.tt-n .tt-i{position:absolute;inset:0;background-size:116%;background-position:center;background-repeat:no-repeat;filter:grayscale(1) brightness(.85);box-shadow:inset 0 0 0 2.5px var(--fr)}
.tt-n.tn-on .tt-i{filter:none}
.tt-n.tn-ac .tt-i{border-radius:3px}
.tt-n.tn-pa .tt-i{border-radius:50%}
.tt-n.tn-ch .tt-i{box-shadow:none;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}
.tt-n.tn-ch::after{content:"";position:absolute;inset:-7%;background:var(--fr);z-index:-1;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}
.tt-tab{position:absolute;top:33%;height:34%;width:17%;background:var(--fr)}
.tt-tab.l{left:-22%;clip-path:polygon(100% 0,0 50%,100% 100%)}
.tt-tab.r{right:-22%;clip-path:polygon(0 0,100% 50%,0 100%)}
.tt-n .tt-i.half.l{clip-path:polygon(29% 0,50% 0,50% 100%,29% 100%,0 71%,0 29%)}
.tt-n .tt-i.half.r{clip-path:polygon(50% 0,71% 0,100% 29%,100% 71%,71% 100%,50% 100%)}
.tt-n .tt-b{position:absolute;left:46%;top:60%;background:#000;color:#fff;font:600 12px/1 var(--fb);padding:3px 5px;border-radius:2px;white-space:nowrap;z-index:2}
.tt-n:hover .tt-i{filter:brightness(1.15)}
.tt-n:not(.tn-on):hover .tt-i{filter:grayscale(1) brightness(1.05)}
.tt-fold table.mt tbody tr:last-child td{border-bottom:0}
.tt-copy{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.5rem 0}
.tt-copy .sub{font-size:.8rem;color:var(--muted)}
.copy-b{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--panel));color:var(--ink);border-radius:999px;padding:.4rem .9rem;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.copy-b svg{width:16px;height:16px}
.copy-b.done{border-color:var(--kill);background:color-mix(in srgb,var(--kill) 16%,var(--panel))}
@media (max-width:640px){.tt-tabs{flex-wrap:wrap}}
/* Ability links inside Deaths rows and the Damage and rotation questions sit on the text line on both page types
   and the Active mitigation card (Oct 25: raid pages drew them as inline-flex and they sat 3 to 4px low) */
.dl-row .ab,.dq .ab,.ms-do .ab,.deep-hint .ab{display:inline;white-space:nowrap;gap:0}
.dl-row .ab .ic,.dq .ab .ic,.ms-do .ab .ic,.deep-hint .ab .ic{width:16px;height:16px;vertical-align:-3px;margin-right:.28rem}
/* Rotation basics, Option A (Oct 25, Christiaan; tools/sections/dmgrot.py basics()): Opener / One target / Two or more
   tabs, a centered icon strip 40px above and below, the "Top of the list first" line under it, then a numbered list */
.rb-tl{display:inline-grid;grid-auto-flow:column;gap:3px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--panel);margin:4px 0 0}
.rb-tl button{font:inherit;cursor:pointer;border:0;border-radius:999px;background:none;color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:.4rem 1rem}
.rb-tl button:hover{color:var(--ink)}
.rb-tl button[aria-selected="true"]{background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)}
.rb-tl button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.rb-a .rs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 4px;margin:40px 0}
.rb-a .rs-pri{gap:8px}
.rb-a .rs:has(+.rb-top){margin-bottom:12px}
.rb-top{text-align:center;color:var(--muted);font-size:.85rem;margin:0 0 40px}
.rs-i{position:relative;display:inline-flex;flex:none;width:40px;height:40px;border-radius:6px;cursor:help;outline:none}
.rs-i>img:not(.rs-swp){width:100%;height:100%;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.35)}
.rs-i:hover>img:not(.rs-swp),.rs-i:focus-visible>img:not(.rs-swp){box-shadow:0 0 0 2px var(--gold)}
.rs-pot{border-radius:50%;padding:3px;border:2px dashed var(--gold);width:44px;height:44px;box-sizing:border-box}
.rs-pot>img:not(.rs-swp){border-radius:50%}
.rs-ln{flex:none;width:12px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--muted) 55%,transparent)}
.rs-n{position:absolute;top:-6px;left:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-size:.68rem;font-weight:700;line-height:15px;text-align:center;box-sizing:border-box}
.rs-swp{position:absolute;right:-6px;bottom:-6px;width:20px;height:20px;border-radius:4px;box-shadow:0 0 0 2px var(--panel)}
.rb-ol{list-style:none;counter-reset:rb;margin:0;padding:0;font-size:.9rem}
.rb-ol li{counter-increment:rb;position:relative;padding:.32rem 0 .32rem 1.7rem;border-bottom:1px solid var(--line)}
.rb-ol li:last-child{border-bottom:0}
.rb-ol li::before{content:counter(rb);position:absolute;left:0;top:.32rem;width:1.2rem;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.rb-ol li.rb-nb{counter-increment:none;color:var(--muted);font-size:.85rem}
.rb-ol li.rb-nb::before{content:""}
.rb-ol .rb-w{color:var(--muted)}
.rb-ol .ab{display:inline;white-space:nowrap;gap:0}
.rb-ol .ab .ic{width:16px;height:16px;vertical-align:-3px;margin-right:.3rem}
.rb-ol .info{margin-left:.2rem}
.rb-then{font-size:.85rem;color:var(--muted);margin:8px 0 0}
@media (max-width:640px){.rs-i{width:36px;height:36px}.rs-pot{width:40px;height:40px}.rs-ln{width:8px}
  .rb-tl{display:grid;grid-auto-columns:1fr;width:100%}.rb-tl button{padding:.45rem .3rem;font-size:.68rem;letter-spacing:.04em}}
/* The top of raid fight pages and key reviews, one look for both (Christiaan, Oct 28, header option E; built by
   tools/sections/page_head.py). A band with the boss's or dungeon's art faded behind, like the Dashboard's cards; the
   icon at 60x60; the name and the result pill; one line in regular weight with the difficulty or key level first, in
   the accent; the spec and role icon on the right. */
.ph{position:relative;display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;border-radius:var(--r5,16px);overflow:hidden;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.ph>*:not(.ph-bg){position:relative;z-index:1}
.ph-bg{position:absolute;inset:0;z-index:0}
.ph-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 30%;filter:saturate(.55);display:block}
.ph-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) 84%,transparent) 55%,color-mix(in srgb,var(--panel) 66%,transparent) 100%)}
.ph-ic{width:60px;height:60px;border-radius:10px;flex:none;display:block;box-shadow:0 0 0 1px var(--line)}
.ph-t{min-width:0;flex:1}
.ph-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ph h1{margin:0;font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.1}
.ph-line{margin:.3rem 0 0;color:var(--muted);font-size:.98rem;font-weight:400}
.ph-lvl{color:var(--acc,var(--gold));font-weight:700}
.ph-pill{display:inline-block;padding:.15rem .65rem;border-radius:999px;font-size:.85rem;font-weight:700;white-space:nowrap}
.ph-pill.kill,.ph-pill.timed{background:var(--kill-soft);color:var(--kill)}
.ph-pill.prog{background:var(--prog-soft);color:var(--prog)}
.ph-pill.over{background:color-mix(in srgb,#e3a43b 22%,transparent);color:#c98a1c}
.ph-spec{position:relative;width:32px;height:32px;flex:none;align-self:center}
.ph-spec img{width:32px;height:32px;border-radius:6px;display:block}
.ph-spec .role{position:absolute;right:-6px;bottom:-6px;width:17px;height:17px;border-radius:0}
@media (min-width:521px){.ph-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media (max-width:520px){.ph{gap:.75rem;padding:.85rem .9rem}.ph-line{font-size:.9rem}}