:root{--bg:var(--c-F3F4F8);--panel:#FFFFFF;--ink:var(--c-1B2340);--muted:var(--c-5A6280);--line:var(--c-D9DCE6);--gold:var(--c-A87A1E);--gold-soft:var(--c-F3E7C9);--kill:#3E7D22;--kill-soft:#E2EFD8;--prog:#9A5A12;--prog-soft:#F6E8D3;--t-grey:#6B7080;--t-green:#2E8A12;--t-blue:#0B5FD0;--t-purple:#8A2BD1;--t-orange:#C25F00;--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:#D9C21A;--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);--gold:var(--c-E2B64E);--gold-soft:var(--c-3A3120);--kill:#8FD45E;--kill-soft:#22321A;--prog:#F0B060;--prog-soft:#3A2A16;--t-grey:#9DA2B0;--t-green:#1EFF00;--t-blue:#3D8BFF;--t-purple:#B95CFF;--t-orange:#FF8000;--t-pink:#E268A8;--t-gold:#E5CC80;--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);--gold:var(--c-E2B64E);--gold-soft:var(--c-3A3120);--kill:#8FD45E;--kill-soft:#22321A;--prog:#F0B060;--prog-soft:#3A2A16;--t-grey:#9DA2B0;--t-green:#1EFF00;--t-blue:#3D8BFF;--t-purple:#B95CFF;--t-orange:#FF8000;--t-pink:#E268A8;--t-gold:#E5CC80;--Hunter:#AAD372;--Mage:#3FC7EB;--Monk:#00FF98;--Paladin:#F48CBA;--Priest:#E8ECF5;--Rogue:#FFF468;--Warrior:#C69B6D}
*,*::before,*::after{box-sizing:border-box}
html{padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:1.0625rem;line-height:1.5}
main{max-width:56rem;margin:0 auto;padding:2.5rem 1rem 4rem}
a{color:var(--gold)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2{font-family:var(--fh);font-weight:var(--fhw);line-height:1.15;margin:0;letter-spacing:var(--fhls);font-size-adjust:none}
h1{font-size:clamp(2.1rem,6vw,3rem)}
ul,ol{list-style:none;margin:0;padding:0}
.masthead{margin-bottom:2rem}
.eyebrow{margin:0 0 .4rem;color:var(--muted);font-weight:600;letter-spacing:.02em}
.lede{margin:.5rem 0 0;color:var(--muted);font-size:1.1rem}
.crumb{margin:0 0 1.5rem;font-weight:600}
.crumb a{text-decoration:none}
.section-h{font-size:1.45rem;margin:0 0 .9rem}
.section-h .n{font-family:var(--fb);font-size:.95rem;color:var(--muted);font-weight:600;margin-left:.3rem}
/* Raid nights */
.nights{display:grid;gap:.9rem}
.night{display:grid;grid-template-columns:4.2rem 1fr auto;gap:1.1rem;align-items:center;padding:1.1rem 1.2rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.night:hover{border-color:var(--gold);transform:translateY(-1px)}
.cal{display:flex;flex-direction:column;align-items:center;justify-content:center;height:4.2rem;border-radius:10px;background:var(--gold-soft);color:var(--gold)}
.cal .mon{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.cal .day{font-family:var(--fh);font-size:1.8rem;line-height:1;font-weight:var(--fhw);letter-spacing:var(--fhls);font-size-adjust:none}
.night-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.night-title{font-family:var(--fh);font-weight:var(--fhw);font-size:1.4rem;line-height:1.2;letter-spacing:var(--fhls);font-size-adjust:none}
.night-meta,.night-count{color:var(--muted);font-size:.95rem}
.chev{font-size:2rem;color:var(--muted);line-height:1}
.boss-list,.boss-row{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:.45rem 0 .2rem}
.boss-list li,.boss-row li{display:flex;align-items:center;gap:.4rem;font-size:.95rem}
.boss{font-weight:600}
.status{font-size:.75rem;font-weight:700;padding:.08rem .5rem;border-radius:999px;white-space:nowrap}
.status.kill{background:var(--kill-soft);color:var(--kill)}
.status.prog{background:var(--prog-soft);color:var(--prog)}
.pulls{color:var(--muted);font-size:.85rem}
.boss-row{gap:.6rem;margin:0 0 1rem}
.boss-row li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem}
.earlier{margin-top:3rem}
.earlier li{padding:.55rem 0;border-top:1px solid var(--line)}
.earlier li:first-child{border-top:0}
.earlier a{font-weight:600}
.earlier span{color:var(--muted);font-size:.95rem;margin-left:.4rem}
/* Roster */
.hint{color:var(--muted);margin:0 0 2rem;max-width:42rem}
.role{margin-top:2.2rem}
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:.7rem}
.player{display:flex;flex-direction:column;gap:.1rem;padding:.85rem 1rem .9rem 1.1rem;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--cc,var(--line));border-radius:12px}
.pname{font-weight:700;font-size:1.1rem}
.pspec{font-size:.95rem}
.also{color:var(--muted);font-size:.85rem}
.pmeta{color:var(--muted);font-size:.85rem}
.parses{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.parse{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;overflow:hidden;font-size:.8rem}
.parse .pb{padding:.1rem .45rem;color:var(--muted)}
.parse .pn{padding:.1rem .45rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tc);border-left:1px solid var(--line);min-width:2.1rem;text-align:center}
.t-grey{--tc:var(--t-grey)}
.t-green{--tc:var(--t-green)}
.t-blue{--tc:var(--t-blue)}
.t-purple{--tc:var(--t-purple)}
.t-orange{--tc:var(--t-orange)}
.t-pink{--tc:var(--t-pink)}
.t-gold{--tc:var(--t-gold)}
.t-none{--tc:var(--muted)}
.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)}
.source{margin-top:2.5rem;color:var(--muted);font-size:.9rem}
/* The guides behind a page's coaching: named only here, as quietly as the Gear tab's "slots fine for now" line. */
.gfoot{margin:.6rem 0 0;font-size:.78rem;color:var(--muted);opacity:.6}
.gfoot a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.gfoot a:hover{text-decoration-color:currentColor}
@media (max-width:560px){
  .night{grid-template-columns:3.4rem 1fr;gap:.8rem;padding:1rem;align-items:start}
  .cal{height:3.4rem}
  .cal .day{font-size:1.45rem}
  .chev{display:none}
}
/* ---------- Player review pages ---------- */
.crumb a{margin-right:.2rem}
.player-head{border-left:6px solid var(--cc,var(--gold));padding-left:1rem}
.jump{margin:0 0 2rem;font-weight:600}
.boss-sec,.gear-sec,.coach{margin-top:3rem}
.boss-sec h3,.gear-sec h3{font-family:var(--fh);font-weight:var(--fhw);font-size:1.2rem;margin:2rem 0 .3rem;letter-spacing:var(--fhls);font-size-adjust:none}
.why,.note{color:var(--muted);font-size:.95rem;margin:.3rem 0 .8rem;max-width:44rem}
.note{background:var(--prog-soft);color:var(--ink);padding:.7rem .9rem;border-radius:10px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.7rem;margin:.8rem 0 1rem}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem .95rem;display:flex;flex-direction:column;gap:.1rem}
.tl{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tv{font-family:var(--fh);font-size:1.8rem;line-height:1.1;font-variant-numeric:tabular-nums;font-weight:var(--fhw);letter-spacing:var(--fhls);font-size-adjust:none}
.tv small{font-family:var(--fb);font-size:.9rem;color:var(--muted)}
.ts{font-size:.85rem;color:var(--muted)}
.tv .t-grey,.tv .t-green,.tv .t-blue,.tv .t-purple,.tv .t-orange,.tv .t-pink,.tv .t-gold{color:var(--tc)}
.tablewrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
th{font-size:.8rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
td small{display:block;color:var(--muted);font-size:.8rem;font-weight:400}
th.n,td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.ok{color:var(--kill);font-weight:700}
td.bad{color:#B3362B;font-weight:700}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) td.bad{color:#F08A80}
}
:root[data-theme="dark"] td.bad{color:#F08A80}
.ab{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.ic{width:18px;height:18px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.barcol{width:30%;min-width:8rem}
.cmp{position:relative;height:.75rem;background:var(--bg);border-radius:999px}
.cmp-you{position:absolute;left:0;top:0;bottom:0;background:var(--gold);border-radius:999px}
.cmp-med,.cmp-top{position:absolute;top:-.2rem;bottom:-.2rem;width:2px;background:var(--ink)}
.cmp-top{background:var(--t-purple)}
.timeline{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem 1.6rem}
.tl-phases{position:relative;height:1.7rem;margin-left:11rem;margin-bottom:.5rem}
.seg{position:absolute;top:0;bottom:0;background:var(--gold-soft);border-right:2px solid var(--panel);border-radius:4px;overflow:hidden}
.seg span{display:block;padding:.2rem .4rem;font-size:.75rem;font-weight:700;color:var(--gold);white-space:nowrap}
.seg.inter{background:var(--prog-soft)}
.seg.inter span{color:var(--prog)}
.tl-row{display:flex;align-items:center;height:1.7rem}
.tl-lab{width:11rem;flex:none;font-size:.85rem}
.tl-track{position:relative;flex:1;height:100%;border-bottom:1px dashed var(--line)}
.tl-track i{position:absolute;top:.35rem;width:.9rem;height:.9rem;margin-left:-.45rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--panel)}
.tl-row.es .tl-track i{background:var(--t-purple)}
.tl-row.pot .tl-track i{background:var(--t-blue);border-radius:3px}
.tl-row.death .tl-track i{background:#C0392B;border-radius:2px;transform:rotate(45deg)}
.tl-ticks{position:relative;height:1rem;margin-left:11rem;margin-top:.3rem}
.tl-ticks span{position:absolute;font-size:.75rem;color:var(--muted);transform:translateX(-50%)}
.phase-notes{display:grid;gap:.7rem}
.pn-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem}
.pn-card h4{margin:0 0 .3rem;font-size:1rem}
.pn-card h4 small{color:var(--muted);font-weight:400;margin-left:.3rem}
.pn-card p{margin:.3rem 0}
.pn-card .tip{background:var(--gold-soft);border-radius:8px;padding:.5rem .7rem}
.deaths li{padding:.4rem 0;border-top:1px solid var(--line)}
.deaths li:first-child{border-top:0}
.coach{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:14px;padding:1.2rem 1.3rem}
.coach ol{list-style:decimal;padding-left:1.3rem;margin:.4rem 0 0}
.coach li{margin:.6rem 0}
.coach li strong{display:block}
.others{display:flex;gap:1rem;flex-wrap:wrap}
a.pcard{color:inherit;text-decoration:none}
a.pcard .player{transition:border-color .15s}
a.pcard:hover .player{border-color:var(--gold)}
.pmore{color:var(--gold);font-size:.85rem;font-weight:700;margin-top:.4rem}
@media (max-width:560px){
  .tl-phases,.tl-ticks{margin-left:6.5rem}
  .tl-lab{width:6.5rem}
  .tl-lab .ab{white-space:normal;font-size:.75rem}
  .barcol{display:none}
}
/* Fight header */
.boss-h{margin-bottom:.2rem}
.fight-meta{margin:0 0 .9rem;color:var(--muted)}
.fight-meta strong{color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 0}
.btn{display:inline-block;padding:.5rem .95rem;border-radius:999px;background:var(--gold);color:var(--panel);font-weight:700;text-decoration:none}
.btn.ghost{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}
.btn:hover{filter:brightness(1.08)}
/* Phase one-liners */
:root{--bad:#B3362B;--bad-soft:#FBE7E4}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bad:#F08A80;--bad-soft:#3A1F22}
}
:root[data-theme="dark"]{--bad:#F08A80;--bad-soft:#3A1F22}
.phase-t tr.ph-row td{border-bottom:0}
.phase-t tr.todo td{padding-top:0;padding-bottom:.7rem}
.todo-k{display:inline-block;margin-right:.45rem;padding:.05rem .5rem;border-radius:999px;background:var(--gold-soft);color:var(--gold);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;vertical-align:.1em}
/* Cooldowns per phase */
.key-you{font-weight:700;color:var(--ink)}
.key-top{color:var(--muted);border-bottom:1px dotted var(--muted)}
.cd{display:inline-flex;align-items:baseline;gap:.45rem;justify-content:flex-end}
.cd b{font-size:1.15rem;min-width:.8rem;text-align:right}
.cd-top{font-size:.8rem;color:var(--muted)}
.cd-diff{font-style:normal;font-size:.75rem;font-weight:700;color:var(--panel);background:var(--bad);border-radius:999px;padding:0 .4rem}
td.cd-gap{background:var(--bad-soft);box-shadow:inset 3px 0 0 var(--bad)}
td.cd-gap b{color:var(--bad)}
.improve{margin-top:.8rem;background:var(--bad-soft);border-left:5px solid var(--bad);border-radius:12px;padding:.8rem 1rem}
.improve h4{margin:0 0 .4rem;font-size:1rem;color:var(--bad)}
.improve li{margin:.35rem 0}
.fx-ph{min-width:6.5rem;font-weight:700}
/* Personal data on phase cards */
.mine{margin-top:.5rem;border-top:1px dashed var(--line);padding-top:.5rem}
.mine strong{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.mine ul{list-style:disc;padding-left:1.2rem;margin:.3rem 0 0}
.mine li{margin:.15rem 0;font-size:.95rem}
.mine mark{background:var(--bad-soft);color:var(--bad);font-weight:700;border-radius:4px;padding:0 .25rem}
.dim{font-weight:400}
/* Flagged rows: damage taken, missing enchants */
tr.flag td{background:var(--bad-soft)}
tr.flag td:first-child{box-shadow:inset 4px 0 0 var(--bad)}
.tal-t tr.flag td:first-child{box-shadow:none}
.fix{display:block;margin-top:.25rem;font-size:.88rem;color:var(--ink);white-space:normal;max-width:34rem}
.fix::before{content:"Fix: ";font-weight:700;color:var(--bad)}
.taken-t td small{white-space:normal}
.cmp-all{position:absolute;top:-.2rem;bottom:-.2rem;width:2px;background:var(--t-grey)}
.phase-t td:first-child{min-width:11rem}
.phase-t tr.todo td{background:var(--gold-soft);color:var(--ink);font-size:.92rem;padding:.45rem .75rem}
.phase-t tr.ph-row td{padding-bottom:.5rem}
.legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.3rem 1rem;padding:.55rem .75rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.lg{display:inline-flex;align-items:center;gap:.35rem}
.lg i{display:inline-block;width:2px;height:.9rem}
.lg-all{background:var(--t-grey)}
.lg-med{background:var(--ink)}
.lg-top{background:var(--t-purple)}
a.wh{color:inherit;text-decoration:none}
a.wh:hover{text-decoration:underline dotted;text-underline-offset:3px}
details.deep{margin-top:2rem;background:var(--panel);border:1px solid var(--line);border-radius:12px}
details.deep>summary{list-style:none;cursor:pointer;flex-wrap:wrap;gap:.2rem .8rem;padding:.8rem 1rem}
details.deep>summary::-webkit-details-marker{display:none}
details.deep>summary h3{margin:0!important}
details.deep>summary::before{content:"▸";color:var(--gold);font-size:1rem;transition:transform .15s}
details.deep[open]>summary::before{transform:rotate(90deg)}
.deep-hint{color:var(--muted);font-size:.9rem}
details.deep .phase-notes{padding:0 1rem 1rem}
details.deep summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:12px}
/* Dividers between the summary and each boss */
.boss-sec,.gear-sec{border-top:2px solid var(--line);padding-top:2.2rem}
.coach ol>li>ul{list-style:disc;padding-left:1.2rem;margin:.3rem 0 0}
.coach ol>li>ul li{margin:.2rem 0}
.coach li strong{margin-bottom:.1rem}
.fold-body{padding:0 1rem 1rem}
.fold-body>.why:first-child{margin-top:0}
/* Damage source chart */
.dchart{display:grid;gap:.55rem}
.dc-key{display:flex;gap:1rem;justify-content:flex-end;font-size:.8rem;color:var(--muted)}
.dc-key i{display:inline-block;width:.8rem;height:.55rem;border-radius:2px;margin-right:.3rem}
.dc-key i.you,.dc-bar.you{background:var(--gold)}
.dc-key i.top,.dc-bar.top{background:var(--t-grey);opacity:.55}
.dc-row{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:.8rem;align-items:center}
.dc-lab{font-size:.9rem}
.dc-note{display:block;font-size:.75rem;color:var(--muted)}
.dc-bars{display:grid;gap:3px}
.dc-bar{height:.85rem;border-radius:0 4px 4px 0;position:relative;min-width:2px}
.dc-bar span{position:absolute;left:calc(100% + .35rem);top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.dc-bar.you span{color:var(--ink);font-weight:700}
.dc-bars{padding-right:3rem}
.dc-row.low .dc-bar.you{background:var(--bad)}
.dc-row.high .dc-bar.you{background:var(--kill)}
@media (max-width:560px){
  .dc-row{grid-template-columns:1fr;gap:.2rem}
}
.cd-top i{font-style:italic}
.improve>ul>li{margin:.3rem 0}
.improve>ul>li>ul{list-style:disc;padding-left:1.2rem;margin:.2rem 0 0}
.improve>ul>li>ul>li{margin:.2rem 0}
.fx-ph{display:block}
/* Top of page: what to work on + improvements (replaces the old .coach card) */
:root{--work:#2D5FA8;--work-soft:#E4ECF8}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--work:#8DB4F0;--work-soft:var(--c-1C2A44)}
}
:root[data-theme="dark"]{--work:#8DB4F0;--work-soft:var(--c-1C2A44)}
.coach-top{margin-top:2.5rem;display:grid;gap:1rem}
.cbox{border-radius:12px;padding:1rem 1.2rem;border-left:5px solid}
.cbox h2{font-family:var(--fh);font-weight:var(--fhw);font-size:1.35rem;margin:0 0 .5rem;letter-spacing:var(--fhls);font-size-adjust:none}
.cbox.work{background:var(--work-soft);border-color:var(--work)}
.cbox.work h2{color:var(--work)}
.cbox.wins{background:var(--kill-soft);border-color:var(--kill)}
.cbox.wins h2{color:var(--kill)}
.cbox ol{list-style:decimal;padding-left:1.3rem;margin:0}
.cbox ul.winlist{list-style:none;padding:0;margin:0}
.cbox>ol>li,.cbox>ul>li{margin:.6rem 0}
.cbox li strong{display:block}
.cbox li>ul{list-style:disc;padding-left:1.2rem;margin:.25rem 0 0}
.cbox li>ul li{margin:.15rem 0}
.winlist>li::before{content:"✓ ";color:var(--kill);font-weight:700}
.winlist>li strong{display:inline}
/* Two parts per boss */
.part{margin-top:2.2rem}
.part-h{margin:0 0 .2rem;padding-bottom:.4rem;border-bottom:2px solid var(--gold);color:var(--gold);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.cd-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.cd-box .timeline{border:0;border-radius:0;border-bottom:1px solid var(--line)}
.cd-box .cd-t{min-width:34rem}
/* Stat rows in the mechanics part */
.mstat{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem;margin:.6rem 0 .8rem}
.mstat>div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;display:flex;flex-direction:column}
.mstat .tv.bad-t{color:var(--bad)}
.deaths li.av{background:var(--bad-soft);border-radius:8px;padding:.4rem .6rem;border-top:0;margin:.3rem 0}
.pill-av{display:inline-block;font-size:.72rem;font-weight:700;color:var(--panel);background:var(--bad);border-radius:999px;padding:0 .45rem;margin-left:.3rem;vertical-align:.1em}
/* Raid comparison bars */
.rchart{display:grid;gap:.3rem}
.rc-row{display:grid;grid-template-columns:7.5rem 1fr 5.5rem;gap:.6rem;align-items:center;font-size:.88rem;padding:.1rem .3rem;border-radius:6px}
.rc-row.me{background:var(--gold-soft);font-weight:700}
.rc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cc,var(--ink))}
.rc-name.c-Paladin{--cc:var(--Paladin)}
.rc-name.c-Monk{--cc:var(--Monk)}
.rc-name.c-Hunter{--cc:var(--Hunter)}
.rc-name.c-Mage{--cc:var(--Mage)}
.rc-name.c-DeathKnight{--cc:var(--DeathKnight)}
.rc-name.c-Druid{--cc:var(--Druid)}
.rc-name.c-Rogue{--cc:var(--Rogue)}
.rc-name.c-Warlock{--cc:var(--Warlock)}
.rc-name.c-Warrior{--cc:var(--Warrior)}
.rc-name.c-Priest{--cc:var(--Priest)}
.rc-name.c-Shaman{--cc:var(--Shaman)}
.rc-name.c-Evoker{--cc:var(--Evoker)}
.rc-name.c-DemonHunter{--cc:var(--DemonHunter)}
.rc-track{height:.8rem;background:var(--bg);border-radius:999px;overflow:hidden;display:flex}
.rc-bar{display:block;height:100%;background:var(--t-grey);opacity:.6;border-radius:999px}
.rc-row.me .rc-bar{background:var(--gold);opacity:1}
.rc-seg{display:block;height:100%}
.rc-val{text-align:right;font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--muted)}
.rc-row.me .rc-val{color:var(--ink)}
/* Spacing before "Your other raid nights" */
.others-sec{margin-top:2.5rem}
/* Phase table on phones: fit the screen so the shaded lines wrap */
@media (max-width:560px){
  .phase-t .len,.len-note{display:none}
  .phase-t th,.phase-t td{padding:.45rem .5rem}
  .phase-t td:first-child{min-width:0}
  .phase-t td:first-child small{display:none}
  .rc-row{grid-template-columns:5.5rem 1fr 4.2rem}
}
.how{display:block;margin-top:.15rem;font-size:.84rem;color:var(--muted);white-space:normal;max-width:34rem}
tr.flag .how{color:var(--ink)}
.sub-h{font-size:1rem;margin:1rem 0 .2rem}
.fold-body>.sub-h:first-child{margin-top:0}
.ab-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.ph-pills{display:inline-flex;gap:.25rem;flex-wrap:wrap}
.pill-ph{display:inline-block;font-size:.72rem;font-weight:700;color:var(--work);background:var(--work-soft);border:1px solid var(--work);border-radius:999px;padding:0 .45rem;margin-left:.3rem;vertical-align:.1em;white-space:nowrap}
.ph-pills .pill-ph{margin-left:0}
/* Top nav: each boss with its two parts */
.jump{display:flex;flex-wrap:wrap;gap:.6rem}
.jb{display:inline-flex;align-items:center;gap:.15rem;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.2rem .3rem .2rem .8rem}
.jb a{font-weight:600;text-decoration:none;font-size:.9rem;padding:.15rem .55rem;border-radius:999px}
.jb a.jb-boss{color:var(--ink);padding-left:0;font-family:var(--fh);font-size:1rem;font-weight:var(--fhw);letter-spacing:var(--fhls);font-size-adjust:none}
.jb a:not(.jb-boss){background:var(--gold-soft)}
.jb a:not(.jb-boss):hover{background:var(--gold);color:var(--panel)}
/* Abilities inside running text: keep icon and words on the text baseline */
p .ab,li .ab,.dc-note .ab{display:inline;white-space:nowrap;gap:0}
p .ab .ic,li .ab .ic,.dc-note .ab .ic{width:16px;height:16px;vertical-align:-3px;margin-right:.3rem}
.rd-row{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:.8rem;align-items:start;padding:.55rem 0;border-top:1px solid var(--line)}
.rd-row:first-of-type{border-top:0}
.rd-metrics{display:grid;gap:.35rem}
.rd-metric{display:grid;grid-template-columns:4.5rem 1fr;gap:.5rem;align-items:center}
.rd-lab{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.rd-metric.low .dc-bar.you{background:var(--bad)}
.rd-metric.high .dc-bar.you{background:var(--kill)}
@media (max-width:560px){
  .rd-row{grid-template-columns:1fr;gap:.3rem}
}
/* Collapsible sections: hint text sits under the title */
details.deep>summary{display:grid;column-gap:.6rem;row-gap:.1rem;align-items:baseline}
details.deep>summary::before{grid-column:1;grid-row:1}
details.deep>summary h3{grid-row:1}
details.deep>summary .deep-hint{grid-row:2}
.avoid-t th small{display:block;font-weight:400;text-transform:none;letter-spacing:0;font-size:.72rem}
/* (i) info icons with a tooltip */
.info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.05rem;height:1.05rem;border-radius:50%;border:1.5px solid var(--muted);color:var(--muted);font:700 .68rem/1 var(--fb);font-style:italic;cursor:help;vertical-align:.15em;margin-left:.25rem;text-transform:none;letter-spacing:0}
.info:hover,.info:focus{border-color:var(--gold);color:var(--gold);outline:none}
.info-tip{display:none;position:absolute;z-index:20;top:calc(100% + .45rem);left:50%;transform:translateX(-50%);width:max-content;max-width:19rem;background:var(--ink);color:var(--panel);font:400 .82rem/1.4 var(--fb);font-style:normal;text-align:left;padding:.55rem .7rem;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.25);white-space:normal}
.info:hover .info-tip,.info:focus .info-tip{display:block}
th .info-tip{left:auto;right:0;transform:none}
.avoid-t td .ph-pills{display:flex;margin-top:.3rem}
@media (max-width:560px){
  .info-tip{max-width:15rem}
}
.av-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.3rem}
.avoid-t td .av-meta .ph-pills{margin-top:0}
.info.howto .info-tip{left:0;transform:none}
.deaths .ab{white-space:nowrap}
.deaths .ab .ic{width:16px;height:16px;vertical-align:-3px;margin-right:.25rem}
.deaths .ab{display:inline}
/* "How to avoid" sits beside the ability as a dotted-underline tooltip */
.info.howto{border:0;border-radius:0;padding:0;width:auto;height:auto;color:var(--work);font-size:.8rem;font-weight:600;font-style:normal;text-decoration:underline dotted;text-underline-offset:3px;margin-left:.6rem;display:inline-flex;gap:.25rem;align-items:center;vertical-align:baseline}
.info.howto i{display:inline-flex;align-items:center;justify-content:center;width:.95rem;height:.95rem;border-radius:50%;border:1.5px solid currentColor;font-size:.62rem;font-style:normal;text-decoration:none}
.info.howto:hover,.info.howto:focus{color:var(--gold)}
.avoid-t .ab-row{justify-content:flex-start;flex-wrap:wrap}
.ab.inl{display:inline;white-space:nowrap;gap:0}
.ab.inl .ic{width:16px;height:16px;vertical-align:-3px;margin-right:.28rem}
/* Tank and healer extras */
.tl-row.spike .tl-track i{background:var(--bad);border-radius:2px;width:.5rem;margin-left:-.25rem}
.tl-row.boss .tl-track i{background:var(--t-grey);border-radius:2px;width:.55rem;margin-left:-.27rem}
.advice ul.rules{list-style:disc;padding-left:1.2rem;margin:.35rem 0 0}
.advice ul.rules li{margin:.2rem 0}
.tile .bad-t{color:var(--bad)}
/* Tank guide checks: each guide rule with what the logs say */
ul.gcheck{list-style:none;padding:0;margin:.4rem 0 1rem;display:grid;gap:.45rem}
.gc{display:flex;gap:.7rem;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem}
.gc p{margin:.2rem 0 0;font-size:.92rem;color:var(--ink)}
.gc strong{font-size:.95rem}
.gc-mark{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;background:var(--line);color:var(--muted)}
.gc.ok .gc-mark{background:var(--kill-soft);color:var(--kill)}
.gc.work{background:var(--bad-soft);border-color:transparent}
.gc.work .gc-mark{background:var(--bad);color:var(--panel)}
.gc.none p{color:var(--muted)}
details.deep ul.rules{list-style:disc;padding-left:1.2rem;margin:.2rem 0}
details.deep ul.rules li{margin:.25rem 0}
/* Which pulls a section covers */
.scope{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.6rem 0 1rem;font-size:.9rem;color:var(--muted)}
.pill-pull{display:inline-block;background:var(--gold);color:var(--panel);font-weight:700;font-size:.78rem;letter-spacing:.03em;border-radius:999px;padding:.15rem .6rem;white-space:nowrap}
.pill-pull.all{background:var(--prog-soft);color:var(--prog);border:1px solid var(--prog)}
/* Avoidable damage across every pull (mockup) */
.patterns{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;margin:.6rem 0 1rem}
.patterns ul{list-style:none;padding:0;margin:.35rem 0 0;display:grid;gap:.3rem}
td.hr small{display:block;color:var(--muted);font-size:.75rem}
.pc-wrap{overflow-x:auto}
.pc-key{display:flex;flex-wrap:wrap;gap:.8rem;font-size:.8rem;color:var(--muted);margin-top:.5rem}
.pc-key i{display:inline-block;width:1.1rem;height:1.1rem;border-radius:4px;vertical-align:-3px;margin-right:4px;text-align:center;font-size:.7rem;line-height:1.1rem;min-width:0}
table.pc-t{border-collapse:separate;border-spacing:3px;font-size:.78rem;width:auto}
table.pc-t th{font-weight:600;color:var(--muted);text-align:center;padding:2px 4px}
table.pc-t th.pc-ab{text-align:left;white-space:nowrap;color:var(--ink);font-weight:500;padding-right:8px}
.pc{min-width:2.1rem;height:1.7rem;text-align:center;border-radius:5px;font-variant-numeric:tabular-nums;padding:0 3px}
td.pc.l0,i.pc.l0{background:var(--kill-soft);color:var(--kill)}
td.pc.l1,i.pc.l1{background:#F6DDB8;color:#7A4A0E}
td.pc.l2,i.pc.l2{background:#F0B98F;color:#6B2E0B}
td.pc.l3,i.pc.l3{background:var(--bad);color:var(--panel)}
td.pc.kill,i.pc.kill{background:#2A1416;color:#FFB3AA;font-style:normal}
td.pc.none,i.pc.none{background:repeating-linear-gradient(45deg,var(--line) 0 3px,transparent 3px 6px)}
td.pc.dead,i.pc.dead{background:var(--bad-soft);color:var(--bad);font-weight:700}
td.pc.ok{color:var(--muted)}
tr.pc-alive td{font-size:.72rem}
.mock-tag{display:inline-block;background:var(--work);color:var(--panel);font-size:.68rem;font-weight:700;border-radius:999px;padding:0 .45rem;margin-left:.35rem;vertical-align:2px;text-transform:uppercase;letter-spacing:.04em}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) td.pc.l1{background:#4A3418;color:#F6C98A}
  :root:not([data-theme="light"]) td.pc.l2,:root:not([data-theme="light"]) i.pc.l2{background:#6B3A1C;color:#FFD2B0}
}
:root[data-theme="dark"] td.pc.l1{background:#4A3418;color:#F6C98A}
:root[data-theme="dark"] td.pc.l2,:root[data-theme="dark"] i.pc.l2{background:#6B3A1C;color:#FFD2B0}
table.pc-t th,table.pc-t th.pc-ab{text-transform:none;letter-spacing:0;font-size:.8rem}
@media (max-width:640px){
  .avoid-t.v2 th:nth-child(3),.avoid-t.v2 td:nth-child(3),.avoid-t.v2 th:nth-child(5),.avoid-t.v2 td:nth-child(5){display:none}
  table.pc-t{border-spacing:2px;font-size:.62rem}
  table.pc-t .pc{height:1.45rem;padding:0 1px;border-radius:4px}
  table.pc-t th.pc-ab .ab{font-size:0}
  table.pc-t th.pc-ab .ab img{margin:0}
  table.pc-t th.pc-ab{padding-right:2px}
}
@media (max-width:640px){
  .avoid-t.v2 th,.avoid-t.v2 td{padding:.45rem .4rem;font-size:.85rem}
  table.pc-t{width:100%;table-layout:fixed}
  table.pc-t th.pc-ab{width:1.5rem}
  table.pc-t .pc{min-width:0}
  table.pc-t td.pc{font-size:.56rem;letter-spacing:-.02em}
}
@media (max-width:640px){
  .avoid-t.v2{table-layout:fixed}
  .avoid-t.v2 th{white-space:normal;font-size:.7rem}
  .avoid-t.v2 td:first-child{max-width:none}
}
td.pm small{display:block;color:var(--muted);font-size:.75rem;white-space:nowrap}
td.pm.bad b{color:var(--bad)}
td.pm small span{display:block}
@media (max-width:640px){
  td.pm small{white-space:normal}
  .avoid-t.v2 th:first-child,.avoid-t.v2 td:first-child{width:46%}
}
.own-hit{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--muted);margin-left:.4rem}
/* How you pressed buttons */
.rot-head{margin:.3rem 0 .6rem;color:var(--muted)}
.rot-big{font-size:1.6rem;font-weight:800;color:var(--ink);margin-right:.25rem}
.rot-vs{display:inline-block}
h4.rot-h{margin:.9rem 0 .3rem;font-size:.95rem}
@media (max-width:480px){
  .rot-strip{grid-template-columns:1fr}
  .rot-step{width:1.5rem}
}
/* What to work on: one line per item, details folded */
.todo-hint{margin:-.2rem 0 .4rem;font-size:.85rem;color:var(--muted)}
.cbox .todo-list>li{margin:.35rem 0}
details.todo>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;padding:.15rem 0}
details.todo>summary::-webkit-details-marker{display:none}
details.todo>summary::after{content:"▸";color:var(--muted);font-size:.8rem;margin-left:auto}
details.todo[open]>summary::after{content:"▾"}
.todo-t{font-weight:700}
.imp{font-size:.72rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;white-space:nowrap}
.imp-big{background:var(--work);color:var(--panel)}
.imp-medium{background:var(--panel);color:var(--work);border:1px solid var(--work)}
.imp-small{background:var(--panel);color:var(--muted);border:1px solid var(--line)}
.todo-body{padding:.2rem 0 .3rem}
.todo-body p{margin:.2rem 0}
.todo-body ul{list-style:disc;padding-left:1.2rem;margin:.25rem 0 0}
.todo-body li{margin:.15rem 0}
.winlist.todo-list>li{display:flex;gap:.3rem}
.winlist.todo-list>li details{flex:1}
/* Phase by phase, folded (mockup) */
details.phx{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem}
details.phx>summary{flex-direction:column;align-items:stretch;gap:.15rem}
details.phx>summary::after{position:absolute;right:.9rem;top:.6rem}
details.phx{position:relative}
.phx-head{padding-right:1.2rem}
.phx-do{font-size:.92rem;color:var(--ink);font-weight:400}
.ph-pill{font-size:.72rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;white-space:nowrap}
.ph-pill.ok{background:var(--kill-soft);color:var(--kill)}
.ph-pill.close{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.ph-pill.behind{background:var(--bad-soft);color:var(--bad)}
.ph-pill.none{background:var(--bg);color:var(--muted)}
.ph-nums{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:.4rem 0 .5rem}
.ph-nums>div{display:flex;flex-direction:column}
.ph-nums .tl{font-size:.72rem;color:var(--muted)}
.ph-nums .tv{font-weight:700}
.ph-nums .ts{font-size:.72rem;color:var(--muted)}
.ph-what{font-size:.9rem;margin:.6rem 0 .3rem}
.ph-nums .tv{font-size:1.05rem;font-family:inherit}
details.phx .tip,details.phx .mine{font-size:.9rem}
/* Phase by phase v2 (mockup): labeled fixes always visible, numbers behind a toggle. Rail style (vb). */
ul.phx-list{list-style:none;padding:0;margin:.5rem 0 1rem;display:grid;gap:.7rem}
li.phx{position:relative}
.phx-head{display:flex;align-items:center;gap:.4rem .55rem;flex-wrap:wrap}
.phx-head .todo-t{font-size:1.02rem}
.phx-len{margin-left:auto;font-size:.78rem;color:var(--muted)}
.phx-dot{display:none}
ul.phx-fix{list-style:none;padding:0;margin:.5rem 0 0;display:grid;gap:.3rem}
details.phx-more{margin-top:.45rem}
details.phx-more>summary{cursor:pointer;list-style:none;font-size:.82rem;color:var(--muted)}
details.phx-more>summary::-webkit-details-marker{display:none}
details.phx-more .todo-body{padding-top:.4rem}
/* B: a rail down the left with a dot per phase, and a text-link toggle */
.vb{gap:0!important;border-left:2px solid var(--line);margin-left:.5rem!important}
.vb li.phx{padding:.2rem 0 1.1rem 1.1rem}
.vb .phx-dot{display:block;position:absolute;left:-.5rem;top:.45rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--panel);border:3px solid var(--line)}
.vb li.v-ok .phx-dot{border-color:var(--kill)}
.vb li.v-behind .phx-dot{border-color:var(--bad)}
.vb li.v-close .phx-dot{border-color:var(--gold)}
.vb details.phx-more>summary{color:var(--work);text-underline-offset:2px}
.phx-more .tip,.phx-more .mine{font-size:.9rem}
/* What to work on: "Start here" card plus compact rows (also used for Improvements) */
.wc-why{margin:.4rem 0;font-size:.93rem}
.wc-saw ul,.wc-body ul{list-style:disc;padding-left:1.2rem;margin:.2rem 0 0;font-size:.92rem}
.wc-saw li,.wc-body li{margin:.15rem 0}
ol.wc-list{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
details.wc-item{background:var(--panel);border:1px solid var(--line);border-radius:10px}
details.wc-item>summary{list-style:none;cursor:pointer;align-items:center;flex-wrap:wrap;gap:.3rem .5rem;padding:.55rem .7rem;position:relative;padding-right:3rem}
details.wc-item>summary::-webkit-details-marker{display:none}
.wc-num{color:var(--muted);font-weight:800}
.wc-t{font-weight:700}
.wc-body{padding:0 .8rem .7rem}
details.wc-item>summary{display:block}
.wc-num{margin-right:.35rem}
details.wc-item>summary .imp{margin-left:.4rem;vertical-align:.1rem}
.cbox.wtw-c ol.wc-list>li{margin:0}
.cbox.wins ol.wc-list{margin-top:.3rem}
.wc-check{color:var(--kill);font-weight:800;margin-right:.4rem}
.coach-top>.cbox{min-width:0}
/* Open/close arrow: a bold chevron on the right that flips when open */
.wc-btn{position:absolute;right:1rem;top:50%;width:.65rem;height:.65rem;border-right:3px solid var(--work);border-bottom:3px solid var(--work);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
details.wc-item[open]>summary .wc-btn{transform:translateY(-20%) rotate(-135deg)}
.cbox.wins .wc-btn{border-color:var(--kill)}
details.wc-item>summary:hover{background:var(--bg);border-radius:10px}
/* Collapsible sections use the same arrow: on the right, down when closed, up when open */
details.deep>summary{grid-template-columns:1fr auto;position:relative;padding-right:2.6rem}
details.deep>summary::before{display:none}
details.deep>summary h3,details.deep>summary .deep-hint{grid-column:1}
details.deep>summary::after{content:"";position:absolute;right:1.15rem;top:50%;width:.65rem;height:.65rem;border-right:3px solid var(--work);border-bottom:3px solid var(--work);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
details.deep[open]>summary::after{transform:translateY(-20%) rotate(-135deg)}
details.deep>summary:hover{background:var(--bg);border-radius:12px}
/* Phase toggle: text plus the same arrow */
.vb details.phx-more>summary{text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.55rem}
.vb details.phx-more>summary::after{content:"";width:.5rem;height:.5rem;border-right:2.5px solid var(--work);border-bottom:2.5px solid var(--work);transform:translateY(-25%) rotate(45deg);transition:transform .15s}
.vb details.phx-more[open]>summary::after{content:"";transform:translateY(20%) rotate(-135deg)}
/* Phase numbers: mockup layouts (pa bars, pb labeled marker bar, pc percent gauge) */
.pa{margin:.5rem 0 .2rem}
.pa-cap{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
.pa-row{display:grid;grid-template-columns:7.5rem 1fr 3.5rem;align-items:center;gap:.6rem;margin:.3rem 0}
.pa-lab{font-size:.85rem;color:var(--muted)}
.pa-you .pa-lab{color:var(--ink);font-weight:700}
.pa-track{height:.7rem;background:var(--bg);border-radius:999px;overflow:hidden}
.pa-fill{display:block;height:100%;border-radius:999px;background:var(--t-grey)}
.pa-you .pa-fill{background:var(--gold)}
.pa-top .pa-fill{background:var(--ink)}
.pa-val{font-weight:700;text-align:right;font-size:.9rem}
.pn-len{font-size:.82rem;color:var(--muted);margin:.35rem 0 .6rem}
@media (max-width:480px){
  .pa-row{grid-template-columns:6rem 1fr 3.2rem}
}
/* Phase: what happens / your job */
.ptx-lab{margin:0 0 .2rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ptx-a{border-radius:8px;padding:.55rem .7rem;margin:.6rem 0;font-size:.9rem}
.ptx-a p:last-child{margin:0}
.ptx-a-fight{background:var(--panel);border:1px solid var(--line)}
.ptx-a-job{background:var(--work-soft);border-left:4px solid var(--work)}
.ptx-a-job .ptx-lab{color:var(--work)}
/* Burst-window button comparison */
.gc-p{margin:.2rem 0 0;font-size:.92rem}
.bc-do{display:inline-block;font-size:.72rem;font-weight:700;border-radius:999px;padding:.05rem .5rem;white-space:nowrap}
.bc-more{background:var(--kill-soft);color:var(--kill)}
.bc-less{background:var(--bad-soft);color:var(--bad)}
.bc-src{color:var(--muted);font-size:.8rem}
.bc-rule{margin:.4rem 0 0;padding:.45rem .6rem;border-radius:8px;background:var(--bg)}
.bc-cap{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:.5rem 0 .3rem}
.bc-tiles{display:grid;grid-template-columns:1fr 1fr}
.bc-tile{border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.bc-name{font-size:.85rem;font-weight:600}
.bc-big{font-size:1.35rem;font-weight:800;margin:.15rem 0}
.bc-big span{font-size:.85rem;font-weight:600;color:var(--muted)}
.gc .bc-cap{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.gc .bc-cap .bc-src{text-transform:none;letter-spacing:0;font-weight:400}
.gc .bc-rule{font-size:.9rem}
.bc-tile{min-width:0}
.bc-tile .bc-name,.bc-tile .bc-name *{white-space:normal;overflow-wrap:anywhere}
.bc-pair{gap:1.1rem}
.bc-pair>div{flex-direction:column}
.bc-k{white-space:nowrap;font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.bc-pair .bc-big{margin:0}
.bc-tile.bc-more .bc-big{color:var(--kill)}
.bc-tile.bc-less .bc-big{color:var(--bad)}
.bc-top{font-size:1.05rem;font-weight:700;color:var(--muted)}
.wc-t .ab{white-space:normal}
/* Boss name stays at the top while you scroll through that fight */
.boss-sec>.boss-h{position:sticky;z-index:20;background:var(--bg);margin:0 -1rem .2rem;padding:.55rem 1rem;border-bottom:1px solid var(--line)}
/* "Your role" / "Fight mechanics" stick under the boss name while you're in that part */
.boss-sec>.boss-h{line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.part>.part-h{position:sticky;z-index:19;background:var(--bg);margin:0 -1rem .2rem;padding:.45rem 1rem .4rem}
/* Raid leader view */
.rl-tiles{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
.rl-name{color:var(--cc,var(--ink));font-weight:700}
.rl-prog{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.6rem .7rem}
.rl-pull{display:grid;grid-template-columns:1.6rem 1fr 3rem;align-items:center;gap:.5rem;margin:.22rem 0}
.rl-pull.best .rl-pn,.rl-pull.best .rl-pct{font-weight:800;color:var(--ink)}
.rl-pn{font-size:.85rem;color:var(--muted);text-align:right}
.rl-pct{font-size:.85rem;text-align:right;color:var(--muted)}
.rl-bar{display:flex;height:.85rem;background:var(--bg);border-radius:4px;overflow:hidden}
.rl-seg{display:block;height:100%}
.rl-key{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.8rem;color:var(--muted);margin:.4rem 0 1.6rem}
.rl-key i{display:inline-block;width:.8rem;height:.6rem;border-radius:2px;margin-right:.3rem}
.rl-deaths{list-style:none;margin:0;padding:0;font-size:.88rem}
.rl-deaths li{margin:.1rem 0}
.rl-deaths li.av{color:var(--ink)}
table.rl-end td small,table.rl-mech td small,table.rl-grid th small{display:block;color:var(--muted);font-size:.75rem;font-weight:400}
.rl-trend{font-weight:700;white-space:nowrap}
.rl-trend.good{color:var(--kill)}
.rl-trend.bad{color:var(--bad)}
table.rl-grid th{text-align:left;font-weight:600}
.rl-c{text-align:center;font-weight:700;font-size:.88rem}
.rl-c.ok{background:var(--kill-soft);color:var(--kill)}
.rl-c.close{background:var(--gold-soft);color:var(--gold)}
.rl-c.behind{background:var(--bad-soft);color:var(--bad)}
.rl-c.none{color:var(--muted)}
.rl-c small{display:block;font-weight:400;font-size:.72rem}
.rl-tiles .tv .ab{white-space:normal}
.rl-tiles .tv{overflow-wrap:anywhere}
.rl-worst{list-style:none;margin:0;padding:0;font-size:.85rem;white-space:nowrap}
table.rl-end td:first-child{white-space:nowrap}
.rl-insight{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--work);border-radius:8px;padding:.55rem .75rem;margin:.4rem 0 .8rem}
.rl-note{font-size:.82rem;color:var(--muted);margin:.4rem 0 1.6rem}
.rl-seg.ph0,.rl-dot.ph0,.rl-st.ph0.done,.rl-st.ph0.end{background:#7C8DB5}
.rl-seg.ph1,.rl-dot.ph1,.rl-st.ph1.done,.rl-st.ph1.end{background:var(--c-A87A1E)}
.rl-seg.ph2,.rl-dot.ph2,.rl-st.ph2.done,.rl-st.ph2.end{background:#B3362B}
.rl-seg.ph3,.rl-dot.ph3,.rl-st.ph3.done,.rl-st.ph3.end{background:#3E7D22}
.rl-time{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.9rem .7rem .5rem}
.rl-bands{position:absolute;top:.4rem;bottom:2rem;left:calc(.7rem + 3.6rem);right:calc(.7rem + 4.6rem)}
.rl-band{position:absolute;top:0;bottom:0;opacity:.13}
.rl-band b{position:absolute;top:0;left:.3rem;font-size:.72rem;opacity:1;color:var(--ink);white-space:nowrap}
.rl-band.ph0{background:#7C8DB5}
.rl-band.ph1{background:var(--c-A87A1E)}
.rl-band.ph2{background:#B3362B}
.rl-band.ph3{background:#3E7D22}
.rl-trow,.rl-ticks{display:grid;grid-template-columns:3.6rem 1fr 4.6rem;align-items:center;position:relative}
.rl-trow{height:1.15rem}
.rl-trow .rl-pn{font-size:.78rem;color:var(--muted)}
.rl-trow.best .rl-pn,.rl-trow.best .rl-res{font-weight:800;color:var(--ink)}
.rl-track{position:relative;height:100%}
.rl-line{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;background:var(--ink);opacity:.55;border-radius:2px}
.rl-dot{position:absolute;top:50%;width:.7rem;height:.7rem;margin:-.35rem 0 0 -.35rem;border-radius:50%;border:2px solid var(--panel)}
.rl-res{font-size:.78rem;text-align:right;color:var(--muted)}
.rl-tickrow{position:relative;height:1.2rem;font-size:.7rem;color:var(--muted)}
.rl-tickrow span{position:absolute;transform:translateX(-50%);top:.2rem}
.rl-chart{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.6rem .7rem}
.rl-axis{font-size:.8rem;font-weight:700;color:var(--muted);margin:0 0 .2rem}
.rl-svg{width:100%;height:auto;display:block}
.rl-svg .g{stroke:var(--line);stroke-width:1}
.rl-svg .ln{fill:none;stroke:var(--muted);stroke-width:2}
.rl-svg .yl{font-size:11px;fill:var(--muted);text-anchor:end}
.rl-svg .xl{font-size:11px;fill:var(--muted);text-anchor:middle}
.rl-svg .xt{font-size:11px;fill:var(--muted);text-anchor:middle;font-weight:700}
.rl-svg .bl{font-size:12px;fill:var(--ink);text-anchor:middle;font-weight:700}
.rl-svg circle{stroke:var(--panel);stroke-width:2}
.rl-svg .ph0{fill:#7C8DB5}
.rl-svg .ph1{fill:var(--c-A87A1E)}
.rl-svg .ph2{fill:#B3362B}
.rl-svg .ph3{fill:#3E7D22}
table.rl-ladder{width:100%;border-collapse:separate;border-spacing:3px;font-size:.82rem}
table.rl-ladder th{font-weight:600;color:var(--muted);text-align:left;white-space:nowrap;padding:0 .3rem}
table.rl-ladder thead th{font-size:.72rem;text-align:center}
table.rl-ladder tr.best th{color:var(--ink);font-weight:800}
.rl-st{height:1.1rem;border-radius:3px;background:var(--bg);text-align:center;color:#fff;font-weight:800;font-size:.75rem;min-width:2.2rem}
.rl-st.done{opacity:.55}
.rl-hp{display:flex;align-items:center;gap:.4rem;min-width:7rem}
.rl-hpbar{flex:1;height:.6rem;background:var(--bg);border-radius:999px;overflow:hidden}
.rl-hpbar span{display:block;height:100%;background:var(--bad)}
.rl-hp b{font-size:.8rem;min-width:2.4rem;text-align:right}
.rl-band b{display:none}
.rl-blabels{position:absolute;left:0;right:0;top:0;height:1rem}
.rl-blabels b{position:absolute;top:0;padding-left:.25rem;font-size:.72rem;color:var(--muted);white-space:nowrap}
@media (max-width:520px){
  table.rl-ladder .rl-hpbar{display:none}
  .rl-hp{min-width:0}
  .rl-st{min-width:1.6rem}
  table.rl-ladder thead th{font-size:.62rem;white-space:normal}
}
.rl-svg{max-width:46rem;margin:0 auto}
@media (max-width:520px){
  .rl-tickrow span.odd{display:none}
}
/* What ended each pull */
.rl-stories{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.rl-story{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:10px;padding:.55rem .75rem}
.rl-story.k-tank{border-left-color:#2D5FA8}
.rl-story.k-stack{border-left-color:var(--bad)}
.rl-story.k-raid{border-left-color:var(--gold)}
.rl-story.k-avoid{border-left-color:var(--bad)}
.rl-story p{margin:.2rem 0 0;font-size:.92rem}
.rl-sh{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .6rem}
.rl-when{font-size:.8rem;color:var(--muted)}
.rl-st-h{font-weight:700}
.rl-before{color:var(--muted);font-size:.85rem}
.rl-kind{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:.05rem .5rem;background:var(--bg);color:var(--muted)}
.rl-kind.k-tank{background:var(--work-soft);color:var(--work)}
.rl-kind.k-stack,.rl-kind.k-avoid{background:var(--bad-soft);color:var(--bad)}
.rl-kind.k-raid{background:var(--gold-soft);color:var(--gold)}
.rl-dtime{padding-top:.6rem}
.rl-trow2,.rl-ticks2{display:grid;grid-template-columns:3.6rem 1fr;align-items:center}
.rl-trow2{height:1.5rem}
.rl-trow2 .rl-pn{font-size:.78rem;color:var(--muted)}
.rl-dtrack{position:relative;height:100%;border-bottom:1px dashed var(--line)}
.rl-dend{position:absolute;top:15%;bottom:15%;width:2px;background:var(--ink);opacity:.5}
.rl-dm{position:absolute;top:50%;width:.5rem;height:.5rem;margin:-.25rem 0 0 -.25rem;border-radius:50%;background:var(--t-grey);opacity:.7}
.rl-dm.turn{background:var(--bad);opacity:1}
.rl-dm.t{border-radius:1px;background:#2D5FA8;width:.6rem;height:.6rem;margin:-.3rem 0 0 -.3rem;opacity:1;z-index:2}
.rl-dl{position:absolute;top:-.25rem;transform:translateX(-100%);padding-right:.4rem;font-size:.68rem;font-weight:700;color:var(--bad);white-space:nowrap}
.rl-causes .rl-kind{margin-left:.4rem;vertical-align:.1rem}
.rl-glist{margin:.2rem 0 0;padding-left:1rem;font-size:.9rem}
.rl-glist li{margin:.25rem 0}
.rl-smgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.5rem}
.rl-sm{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.45rem .6rem}
.rl-smh{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem}
.rl-smh span{color:var(--bad);font-weight:700;text-align:right}
.rl-spark{width:100%;height:auto;display:block;margin:.2rem 0}
.rl-spark polyline{fill:none;stroke:var(--ink);stroke-width:2}
.rl-spark .tp{stroke:var(--bad);stroke-width:1.5;stroke-dasharray:3 2}
.rl-smf{font-size:.72rem;color:var(--muted)}
.rl-dl.r{transform:none;padding:0 0 0 .6rem;top:.15rem}
.rl-why{margin:.1rem 0 .5rem;font-size:.9rem}
.rl-zoom{display:grid;gap:.15rem}
.rl-zrow,.rl-zhead{display:grid;grid-template-columns:5.5rem 1fr;gap:.1rem .6rem;align-items:center}
.rl-zrow .rl-zt{grid-column:2;font-size:.78rem;color:var(--muted);margin-bottom:.35rem}
.rl-zl{font-size:.82rem}
.rl-ztrack{position:relative;height:1.1rem;background:var(--bg);border-radius:4px}
.rl-z0{position:absolute;top:0;bottom:0;width:1px;background:var(--bad);opacity:.5}
.rl-zd{position:absolute;width:.55rem;height:.55rem;border-radius:50%;background:var(--t-grey);opacity:.6}
.rl-zd.turn{background:var(--bad);opacity:.9}
.rl-zd.t{background:#2D5FA8;border-radius:1px;opacity:1;z-index:2}
.rl-zscale{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted)}
.rl-zscale i{font-style:normal}
.rl-spark .cl{fill:var(--bad-soft)}
table.rl-gt td small{display:block;color:var(--muted);font-size:.75rem}
.rl-zd{top:auto;margin:0 0 0 -.275rem}
.rl-ztrack{min-height:1.1rem}
.rl-zl small{display:block;color:var(--muted);font-size:.72rem}
.rl-causes>li,.rl-causes .wc-item,.rl-causes .wc-body{min-width:0}
.rl-causes .tablewrap{max-width:100%}
/* Avoidable mechanics */
table.rl-pc td{font-size:.72rem;min-width:2rem}
table.rl-pc td.pc.kill{outline:2px solid var(--bad);outline-offset:-2px}
.rl-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem}
.rl-mcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.5rem .65rem}
.rl-mh{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;gap:.5rem}
.rl-mbars{display:flex;align-items:flex-end;gap:2px;height:3.2rem;margin:.4rem 0 .2rem;border-bottom:1px solid var(--line)}
.rl-mb{flex:1;height:100%;display:flex;align-items:flex-end}
.rl-mb i{display:block;width:100%;background:var(--t-grey);border-radius:2px 2px 0 0}
.rl-mb.dead i{background:var(--bad)}
.rl-mf{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted)}
.rl-costs{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.6rem .75rem;display:grid;gap:.45rem}
.rl-cost{display:grid;grid-template-columns:10rem 1fr;gap:.1rem .7rem;align-items:center}
.rl-cl{font-size:.9rem}
.rl-cbar{position:relative;height:1.1rem;background:var(--bg);border-radius:4px;overflow:hidden}
.rl-cbar i{display:block;height:100%;background:var(--bad);opacity:.75}
.rl-cbar b{position:absolute;left:.4rem;top:0;font-size:.75rem;line-height:1.1rem}
.rl-cs{grid-column:2;font-size:.75rem;color:var(--muted)}
@media (max-width:520px){
  .rl-cost{grid-template-columns:1fr}
  .rl-cs{grid-column:1}
}
td.pc.nr,i.pc.nr{background:var(--line);color:var(--muted);font-size:.68rem;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0}
i.pc.nr{max-width:none}
table.pc-t th.pc-st{font-size:.66rem;font-weight:600;color:var(--muted);padding:0 2px 4px;vertical-align:top}
table.pc-t th.pc-st i{display:block;height:4px;border-radius:2px;margin:0 2px 3px}
table.pc-t th.pc-ab.pc-st{text-align:left;font-size:.72rem}
.pc-need{display:block;font-size:.66rem;color:var(--muted);font-weight:500;line-height:1.1}
@media (max-width:600px){
  table.pc-t th.pc-ab.pc-st{font-size:0}
  td.pc.nr{font-size:.52rem}
  .pc-need{font-size:.5rem;white-space:nowrap}
  table.pc-t th.pc-st{font-size:.52rem}
}
/* Avoidable mechanics: learning grid */
.mg{display:flex;flex-direction:column;gap:1.1rem;margin-top:.6rem}
.mg-strip{display:grid;gap:4px;width:100%}
.mg-axis span{text-align:center}
.mg-reach{margin-top:-.7rem}
.mg-reach span{text-align:center;font-size:.7rem;color:var(--muted)}
.mg-reach i{display:block;height:5px;border-radius:3px;margin:0 1px 3px}
.mg-row{display:flex;flex-direction:column;gap:.45rem}
.mg-h{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .45rem}
.mg-name{margin-right:.25rem}
.mg-v.st{font-weight:600;background:var(--line);color:var(--muted)}
.mg-name{font-weight:600;font-size:1rem}
.mg-name small{font-weight:500;color:var(--muted);font-size:.75rem;margin-left:.45rem}
.mg-v{font-size:.78rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;background:var(--line);color:var(--muted)}
.mg-v.bad{background:var(--bad-soft);color:var(--bad)}
.mg-v.good{background:var(--kill-soft);color:var(--kill)}
.mg-t{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto;text-align:right}
.mg-c{display:flex;flex-direction:column;align-items:center;justify-content:center;height:3rem;border-radius:6px;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden}
.mg-c b{font-size:.85rem;font-weight:700}
.mg-c i{font-style:normal;font-size:.72rem;font-weight:700;line-height:1.1}
.mg-c.l0{background:#B9E0C0;color:#1D4A20}
.mg-c.l1{background:#E3D49C;color:var(--c-463500)}
.mg-c.l2{background:#E8AC7C;color:#3D1800}
.mg-c.l3{background:#CB6D62;color:#fff}
.mg-c.l2 i{color:#5A1206}
.mg-c.off{background:transparent;border:1px dashed var(--line)}
.mg-c.nr{color:var(--muted);font-size:.78rem;font-style:italic;white-space:nowrap;text-overflow:ellipsis}
.mg-key{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.82rem;color:var(--muted);margin-top:.4rem}
.mg-key .mg-c{display:inline-block;width:1.4rem;height:1rem;border-radius:3px}
.mg-key .mg-gap{margin-left:.9rem;display:inline-flex;align-items:center;gap:.35rem}
.mg-skull{color:var(--bad)}
@media (max-width:600px){
  .mg-strip{gap:2px}
  .mg-c{height:2.5rem;border-radius:4px}
  .mg-c b{font-size:.6rem;letter-spacing:-.03em}
  .mg-c i{font-size:.56rem}
  .mg-c.nr{font-size:.62rem}
  .mg-reach span{font-size:.56rem}
}
.mg-reach .ph0{background:#7C8DB5}
.mg-reach .ph1{background:var(--c-A87A1E)}
.mg-reach .ph2{background:#B3362B}
.mg-reach .ph3{background:#3E7D22}
.mg+.rl-note{margin-top:1.2rem}
.mg-v.st .sh{display:none}
.mg-axis span{font-size:.85rem;font-weight:700;color:var(--ink)}
.mg-axis{margin-top:.3rem}
@media (max-width:600px){
  .mg-v.st .fl{display:none}
  .mg-v.st .sh{display:inline}
  .mg-axis span{font-size:.7rem}
}
@media (max-width:600px){
  .mg-v{font-size:.72rem;padding:.08rem .4rem}
  .mg-h{gap:.3rem .3rem}
  .mg-name{font-size:.95rem}
}
.mg{position:relative}
.mg>*{position:relative;z-index:1}
.mg>.mg-cols{position:absolute;z-index:0;top:-.35rem;bottom:-.35rem;left:0;right:0;width:auto}
.mg-cols span{border-radius:6px;margin:0 -2px}
.mg-cols span.z{background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
.mg-pl{margin:0 0 -.9rem;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mg-axis span{padding:.15rem 0}
@media (max-width:600px){
  .mg-cols span{margin:0 -1px;border-radius:4px}
}
.mg-c i{color:#9A1C12}
.mg-c.l3 i{color:#fff}
:root[data-theme="dark"] .mg-c.l0{background:#39553F;color:#CFE9CF}
:root[data-theme="dark"] .mg-c.l1{background:#62582F;color:#EDE2B4}
:root[data-theme="dark"] .mg-c.l2{background:#7D4E2C;color:#F4D2B6}
:root[data-theme="dark"] .mg-c.l3{background:#98473F;color:#fff}
:root[data-theme="dark"] .mg-c i{color:#FFB4A8}
:root[data-theme="dark"] .mg-cols span.z{background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mg-c.l0{background:#39553F;color:#CFE9CF}
  :root:not([data-theme="light"]) .mg-c.l1{background:#62582F;color:#EDE2B4}
  :root:not([data-theme="light"]) .mg-c.l2{background:#7D4E2C;color:#F4D2B6}
  :root:not([data-theme="light"]) .mg-c.l3{background:#98473F;color:#fff}
  :root:not([data-theme="light"]) .mg-c i{color:#FFB4A8}
  :root:not([data-theme="light"]) .mg-cols span.z{background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
}
.mg-c.nr{background:color-mix(in srgb,var(--ink) 8%,transparent)}
/* Damage by stage mockups */
table.dg-t{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:4px;margin-top:.6rem}
table.dg-t th{text-align:center;font-size:.78rem;font-weight:700;color:var(--muted);padding:2px}
table.dg-t tbody th{text-align:left;font-size:.92rem;color:var(--ink);width:30%}
table.dg-t thead th:first-child{width:30%}
table.dg-t th small{display:block;color:var(--muted);font-size:.72rem;font-weight:500}
table.dg-t td{padding:0}
table.dg-t .mg-c{height:2.6rem}
tr.dg-raid th{font-size:1rem}
tr.dg-raid td .mg-c{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ink) 35%,transparent)}
tr.dg-raid th,tr.dg-raid td{padding-bottom:.5rem}
.dg-plot{margin-top:.8rem;display:flex;flex-direction:column;gap:.9rem}
.dg-row{display:grid;grid-template-columns:8.5rem 1fr;gap:.2rem .8rem;align-items:center}
.dg-lab b{display:block;font-size:.95rem}
.dg-lab span{font-size:.8rem;color:var(--muted)}
.dg-row.worst .dg-lab span{color:var(--bad);font-weight:700}
.dg-track{position:relative;height:2rem;border-radius:6px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.dg-dot{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--cc);box-shadow:0 0 0 2px var(--panel);opacity:.95}
.dg-rl{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;background:var(--ink);border-radius:2px}
.dg-low{grid-column:2;font-size:.78rem;color:var(--muted)}
.dg-axis{display:grid;grid-template-columns:8.5rem 1fr;gap:.8rem}
.dg-axis-t{position:relative;height:1rem;font-size:.72rem;color:var(--muted)}
.dg-axis-t span{position:absolute;transform:translateX(-50%)}
.dg-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;height:3.4rem;align-items:end}
.dg-bars.big{height:6rem}
.dg-b{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative}
.dg-b i{display:block;width:100%;background:color-mix(in srgb,var(--ink) 22%,transparent);border-radius:4px 4px 0 0;min-height:2px}
.dg-b.lo i{background:#CB6D62}
.dg-b em{font-style:normal;font-size:.72rem;font-weight:700;color:var(--muted);order:-1;margin-bottom:2px}
.dg-b.lo em{color:var(--bad)}
.dg-bars.big em{font-size:.85rem}
.dg-lbl{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-size:.7rem;color:var(--muted);text-align:center;margin-top:3px}
.dg-card{border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;background:var(--panel)}
.dg-rcard{margin:.8rem 0}
.dg-ch{font-size:.9rem;margin-bottom:.35rem}
.dg-ch small{color:var(--muted);font-size:.72rem}
.dg-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.dg-lbl-foot{display:none}
.dg-lbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin-top:.7rem}
.dg-lb{border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;background:var(--panel)}
.dg-lb.worst{border-color:var(--bad)}
.dg-lbh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.dg-lbh span{font-size:.8rem;color:var(--muted);font-weight:700}
.dg-lb.worst .dg-lbh span{color:var(--bad)}
.dg-lb ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.dg-lb li{display:grid;grid-template-columns:5.6rem 1fr 2.3rem;gap:.35rem;align-items:center;font-size:.78rem;padding:1px 3px;border-radius:4px}
.dg-lb li .rl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-lb li b{text-align:right;font-variant-numeric:tabular-nums}
.dg-hb{height:6px;border-radius:3px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.dg-hb i{display:block;height:100%;border-radius:3px;background:color-mix(in srgb,var(--ink) 30%,transparent)}
.dg-lb li.lo{background:color-mix(in srgb,#CB6D62 14%,transparent)}
.dg-lb li.lo .dg-hb i{background:#CB6D62}
.dg-lb li.lo b{color:var(--bad)}
@media (max-width:760px){
  .dg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dg-lbs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  table.dg-t{border-spacing:2px}
  table.dg-t th{font-size:.62rem}
  table.dg-t tbody th{font-size:.78rem;width:27%}
  table.dg-t thead th:first-child{width:27%}
  table.dg-t th small{font-size:.6rem}
  table.dg-t .mg-c{height:2.2rem}
  table.dg-t .mg-c b{font-size:.72rem}
  .dg-row,.dg-axis{grid-template-columns:1fr}
  .dg-low{grid-column:1}
  .dg-axis-pad{display:none}
  .dg-lbs{grid-template-columns:1fr}
}
.dg-plot,.dg-lbs,table.dg-t,.dg-cards+.dg-lbl{margin-bottom:2.2rem}
.dg-cards{margin-bottom:2.2rem}
table.dg-t th .sh{display:none}
table.dg-t tbody th .rl-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){
  table.dg-t th .fl{display:none}
  table.dg-t th .sh{display:inline}
}
@media (max-width:600px){
  table.dg-t tbody th .rl-name{text-transform:none;letter-spacing:0;font-size:.8rem}
}
/* Avoidable mechanics in the player-page Pull by pull style */
.pcm-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1rem .9rem;margin-top:.8rem}
.pcm-card>.why:first-child{margin-top:0}
table.pc-t.pcm{width:100%;table-layout:fixed;border-spacing:4px}
table.pc-t.pcm th.pc-ab{vertical-align:middle}
table.pc-t.pcm td.pc{height:2.6rem;font-size:.8rem;font-weight:600;line-height:1.1}
table.pc-t.pcm td.pc small{display:block;font-size:.7rem;font-weight:700}
table.pc-t.pcm td.pc.l1 small,table.pc-t.pcm td.pc.l2 small{color:var(--bad)}
table.pc-t.pcm .z{box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 4%,transparent)}
table.pc-t.pcm thead th.z{background:color-mix(in srgb,var(--ink) 4%,transparent);border-radius:5px}
table.pc-t.pcm td.pc.none.z{background-color:color-mix(in srgb,var(--ink) 4%,transparent)}
.pcm-n{display:block;font-size:.9rem}
.pcm-meta{display:flex;align-items:center;gap:.2rem .4rem;margin-top:.25rem;font-weight:400}
.pcm-meta .mg-v{font-size:.68rem;padding:.05rem .45rem}
.pcm-t{font-size:.7rem;color:var(--muted)}
tr.pcm-lab{display:none}
.pcm-sk{color:var(--bad);margin-right:3px}
tr.pc-alive th.pc-ab{font-size:.78rem;color:var(--muted)}
@media (max-width:640px){
  .pcm-card{padding:.7rem .5rem}
  table.pc-t.pcm{border-spacing:2px}
  table.pc-t.pcm th.pc-ab{display:none}
  table.pc-t.pcm thead th.pc-ab{display:none}
  tr.pcm-lab{display:table-row}
  tr.pcm-lab td{padding:.55rem 2px .1rem}
  tr.pcm-lab .pcm-n{font-size:.9rem}
  tr.pcm-lab .pcm-n .ab{font-size:.9rem!important}
  table.pc-t.pcm td.pc{height:2.2rem;font-size:.56rem}
  table.pc-t.pcm td.pc small{font-size:.5rem}
  table.pc-t.pcm .z{box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 4%,transparent)}
  tr.pc-alive td{font-size:.48rem}
  tr.pc-alive th.pc-ab{display:none}
}
table.pc-t.pcm th.pc-ab{width:17.5rem}
.pcm-meta{flex-wrap:nowrap}
.pcm-t{white-space:nowrap}
:root[data-theme="dark"] i.pc.l1{background:#4A3418}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) i.pc.l1{background:#4A3418}
}
table.pc-t.pcm td.pc.l3 small{color:inherit}
.dg-avg{position:relative}
.dg-ref{position:absolute;left:-2px;right:-2px;height:0;border-top:2px dashed color-mix(in srgb,var(--ink) 45%,transparent);z-index:2;pointer-events:none}
.dg-b.hi i{background:#7FB38A}
.dg-ch{display:flex;gap:.35rem}
.dg-ch small{margin-left:0}
.dg-all{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.dg-all.lo{color:var(--bad)}
.dg-sub{font-size:.85rem;color:var(--muted);margin:.2rem 0 .5rem}
.dg-bars.dg-avg{height:4.4rem}
.dg-bars.dg-avg.big{height:7rem}
.dg-avg .dg-b i{border-radius:4px 4px 0 0}
.dg-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px;text-align:center;font-size:.78rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.dg-n.lo{color:var(--bad)}
.dg-n.hi{color:var(--kill)}
.dg-avg.big+.dg-nums{font-size:.95rem}
.dg-avg+.dg-nums+.dg-lbl{margin-top:1px;font-size:.66rem}
.dg-avg.big+.dg-nums+.dg-lbl{font-size:.74rem}
.dg-ch{align-items:flex-start}
.dg-who{display:flex;flex-direction:column;min-width:0}
.dg-who small{font-size:.7rem;color:var(--muted)}
@media (max-width:600px){
  .dg-cards{gap:.45rem}
  .dg-card{padding:.5rem}
  .dg-nums{gap:3px;font-size:.68rem}
  .dg-bars{gap:3px}
  .dg-avg+.dg-nums+.dg-lbl{gap:3px}
}
/* Burst mockups */
.bi{display:inline-flex;border-radius:6px;padding:2px;line-height:0}
.bi .ab{font-size:0!important;gap:0}
.bi img{width:22px;height:22px;border-radius:4px;margin:0!important}
.bi.used{box-shadow:inset 0 0 0 2px #6FAE7C;background:color-mix(in srgb,#6FAE7C 22%,transparent)}
.bi.missed{box-shadow:inset 0 0 0 2px #CB6D62;background:color-mix(in srgb,#CB6D62 22%,transparent)}
.bi.missed img{opacity:.85}
.bi.early{box-shadow:inset 0 0 0 2px var(--c-C9A94A);background:color-mix(in srgb,var(--c-C9A94A) 22%,transparent)}
.bi.cd,.bi.dead{box-shadow:inset 0 0 0 1px var(--line)}
.bs-key{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.82rem;color:var(--muted);margin:.4rem 0 .6rem}
.bk{display:inline-block;width:.95rem;height:.95rem;border-radius:3px;vertical-align:-2px;margin-right:4px}
.bk.used{background:color-mix(in srgb,#6FAE7C 30%,transparent);box-shadow:inset 0 0 0 2px #6FAE7C}
.bk.missed{background:color-mix(in srgb,#CB6D62 30%,transparent);box-shadow:inset 0 0 0 2px #CB6D62}
.bk.early{background:color-mix(in srgb,var(--c-C9A94A) 30%,transparent);box-shadow:inset 0 0 0 2px var(--c-C9A94A)}
.bk.cd{box-shadow:inset 0 0 0 1px var(--muted);opacity:.6}
.bk.wnd{background:color-mix(in srgb,var(--c-C9A94A) 25%,transparent)}
table.bs-t{width:100%;border-collapse:collapse}
table.bs-t th,table.bs-t td{padding:.5rem .4rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.bs-t thead th{font-size:.8rem;color:var(--muted);font-weight:700}
table.bs-t th small{display:block;font-size:.72rem;color:var(--muted);font-weight:500}
.bs-icons{display:flex;flex-wrap:wrap;gap:4px}
.bs-sc{display:block;font-size:.74rem;font-weight:700;margin-top:3px}
.bs-sc.ok{color:var(--kill)}
.bs-sc.bad{color:var(--bad)}
.bt{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:.4rem}
.bt-col h4{margin:0 0 .4rem;font-size:.95rem}
.bt-col h4 small{color:var(--muted);font-weight:500}
.bt-row{display:grid;grid-template-columns:6.2rem 1fr;align-items:center;gap:.4rem;height:30px}
.bt-n{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-tr{position:relative;height:28px;border-bottom:1px solid var(--line)}
.bt-w{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--c-C9A94A) 22%,transparent);border-radius:3px}
.bt-g{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--c-C9A94A) 10%,transparent)}
.bt-m,.bt-miss{position:absolute;top:50%;transform:translate(-50%,-50%)}
.bt-m .bi,.bt-miss .bi{padding:1px}
.bt-m .bi img,.bt-miss .bi img{width:16px;height:16px}
.bt-axis{display:grid;grid-template-columns:6.2rem 1fr;gap:.4rem}
.bt-axis>div{position:relative;height:1rem;font-size:.66rem;color:var(--muted)}
.bt-axis>div span{position:absolute;transform:translateX(-50%)}
.bcards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.3rem}
.bcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem}
.bcard-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem;margin-bottom:.5rem}
.bcard-h b small{color:var(--muted);font-weight:500}
.bcard-h span{font-size:.82rem;font-weight:700}
.rl-sec .ok{color:var(--kill)}
.rl-sec .bad{color:var(--bad)}
.bc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.bc-list li{display:grid;grid-template-columns:6.5rem 1fr 2.2rem;gap:.5rem;align-items:center;font-size:.85rem}
.bc-bar{display:flex;gap:3px}
.bc-bar i{flex:1;height:14px;border-radius:3px}
.bc-bar i.used{background:#6FAE7C}
.bc-bar i.missed{background:#CB6D62}
.bc-bar i.early{background:var(--c-C9A94A)}
.bc-list b{text-align:right;font-variant-numeric:tabular-nums}
.bh-tiles{display:grid;gap:.8rem;margin:.4rem 0 1rem}
.bh-tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.bh-tile .tl{font-size:.85rem;font-weight:700}
.bh-tile .tl small{color:var(--muted);font-weight:500}
.bh-tile .tv{font-size:2rem;font-weight:800}
.bh-tile .tv small{font-size:1rem;color:var(--muted);font-weight:600}
.bh-tile .ts{font-size:.8rem;color:var(--muted)}
.bx-list{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.bx-list li{display:grid;grid-template-columns:9rem 1fr;gap:.6rem;align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem}
.bx-who small{display:block;font-size:.72rem;color:var(--muted)}
.bx-what{display:flex;flex-direction:column;gap:.35rem;font-size:.86rem}
.bx{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}
.bx.missed{color:var(--bad)}
.bx.early{color:var(--c-9A7A1E)}
.bx-clean{font-size:.86rem;color:var(--muted);margin-top:.7rem}
.be{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:.4rem}
.be-col h4{margin:0 0 .4rem;font-size:.95rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem}
.be-col h4 small{color:var(--muted);font-weight:500}
.be-col h4 span{font-size:.8rem}
.be-chart{position:relative;height:7rem;border-bottom:1px solid var(--line)}
.be-w{border-radius:4px}
.be-b{position:absolute;bottom:0;background:color-mix(in srgb,var(--ink) 30%,transparent);border-radius:2px 2px 0 0;margin-left:1px;box-sizing:border-box;border-right:2px solid transparent;background-clip:padding-box}
.be-b.in{background-color:#6FAE7C}
.be-axis{position:relative;height:1rem;font-size:.66rem;color:var(--muted)}
.be-axis span{position:absolute;transform:translateX(-50%)}
.be-miss{list-style:none;margin:.6rem 0 0;padding:0;font-size:.84rem;display:flex;flex-direction:column;gap:.3rem}
.be-miss li{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.be-miss small{color:var(--muted)}
@media (max-width:700px){
  .bt,.bcards,.be{grid-template-columns:1fr}
}
@media (max-width:600px){
  .bi img{width:19px;height:19px}
  .bh-tiles{grid-template-columns:1fr 1fr}
  .bh-tile .tv{font-size:1.6rem}
  .bx-list li{grid-template-columns:1fr}
  .bt-row,.bt-axis{grid-template-columns:4.6rem 1fr}
}
.bh-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.bh-tile{min-width:0}
.bh-tile .tl{overflow-wrap:anywhere}
@media (max-width:600px){
  table.bs-t,table.bs-t tbody,table.bs-t thead{display:block}
  table.bs-t tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--line)}
  table.bs-t th,table.bs-t td{border:0;padding:.35rem .3rem}
  table.bs-t tbody th{grid-column:1/-1;padding-bottom:0;display:flex;gap:.4rem;align-items:baseline}
  table.bs-t tbody th small{display:inline}
  table.bs-t thead th:first-child{display:none}
  table.bs-t thead th{font-size:.7rem}
  table.bs-t th:first-child{width:auto}
}
/* Burst: color-at-a-glance versions */
.bk2{display:inline-block;width:.95rem;height:.95rem;border-radius:3px;vertical-align:-2px;margin-right:4px}
.bk2.used{background:#7FB38A}
.bk2.missed{background:#CB6D62}
.bk2.early{background:var(--c-D4B45A)}
.bk2.cd{background:color-mix(in srgb,var(--ink) 18%,transparent)}
table.bf-t td.bf{border-left:4px solid transparent}
table.bf-t td.bf.used{background:color-mix(in srgb,#7FB38A 16%,transparent);border-left-color:#7FB38A}
table.bf-t td.bf.missed{background:color-mix(in srgb,#CB6D62 18%,transparent);border-left-color:#CB6D62}
table.bf-t td.bf.early{background:color-mix(in srgb,var(--c-D4B45A) 20%,transparent);border-left-color:var(--c-D4B45A)}
table.bf-t td.bf .bs-sc{color:var(--ink);opacity:.75}
table.bf-t td.bf.missed .bs-sc{color:var(--bad);opacity:1}
.bf-v{display:inline-block;margin-top:.3rem;font-size:.7rem;font-weight:700;padding:.05rem .45rem;border-radius:999px}
.bf-v.used,.bv.used{background:color-mix(in srgb,#7FB38A 22%,transparent);color:var(--kill)}
.bf-v.missed,.bv.missed{background:color-mix(in srgb,#CB6D62 22%,transparent);color:var(--bad)}
.bf-v.early,.bv.early{background:color-mix(in srgb,var(--c-D4B45A) 25%,transparent);color:var(--c-8A6A12)}
tr.bf-raid th,tr.bf-raid td{font-weight:700;font-size:.9rem}
.bw-s.ok{color:var(--kill)}
.bw-s.bad{color:var(--bad)}
.bv{margin-left:auto;font-size:.7rem;font-weight:700;padding:.08rem .5rem;border-radius:999px;white-space:nowrap}
.bws{display:flex;flex-direction:column;gap:.55rem;margin-top:.3rem}
.bw-h{display:flex;justify-content:space-between;font-weight:600;margin-bottom:3px}
.bw-h span{font-variant-numeric:tabular-nums}
.bb{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.bb-c{display:flex;flex-direction:column;align-items:center;gap:3px}
.bb-c>i{display:block;width:100%;height:1.6rem;border-radius:4px 4px 0 0}
.bb-c.used>i{background:#7FB38A}
.bb-c.missed>i{background:#CB6D62}
.bb-c.early>i{background:var(--c-D4B45A)}
.bb-c.cd>i,.bb-c.dead>i{background:color-mix(in srgb,var(--ink) 14%,transparent);height:.5rem;margin-top:1.1rem}
.bb-c .ab{font-size:0!important;line-height:0}
.bb-c img{width:20px;height:20px;border-radius:4px;margin:0!important}
.bb-c.cd img,.bb-c.dead img{opacity:.35;filter:grayscale(1)}
.bcards2{grid-template-columns:repeat(3,minmax(0,1fr))}
.bcards2.wide{grid-template-columns:repeat(2,minmax(0,1fr))}
.bcard2.missed{border-color:color-mix(in srgb,#CB6D62 55%,var(--line))}
.br-tiles{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.br-t{display:flex;flex-direction:column;gap:.15rem}
.br-t .tl{font-size:.82rem;font-weight:700}
.br-t .tl small{color:var(--muted);font-weight:500}
.br-t .tv{font-size:1.8rem;font-weight:800}
.br-t .tv small{font-size:.95rem;color:var(--muted);font-weight:600}
.br-t .ts{font-size:.76rem;color:var(--muted)}
.br-bar{height:10px;border-radius:5px;background:#CB6D62;overflow:hidden}
.br-bar i{display:block;height:100%;background:#7FB38A}
.bchips{display:flex;flex-wrap:wrap;gap:.45rem}
.bchip{display:inline-flex;align-items:baseline;gap:.35rem;padding:.3rem .65rem;border-radius:999px;background:color-mix(in srgb,#7FB38A 16%,transparent);border:1px solid color-mix(in srgb,#7FB38A 45%,transparent);font-size:.85rem}
.bchip small{color:var(--muted);font-size:.72rem}
@media (max-width:760px){
  .bcards2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .bcards2,.bcards2.wide{grid-template-columns:1fr}
  .br-t .tv{font-size:1.5rem}
  table.bf-t td.bf{border-left-width:3px}
  table.bf-t tr.bf-raid th{grid-column:1/-1}
}
:root[data-theme="dark"] .bf-v.early,:root[data-theme="dark"] .bv.early{color:var(--c-E8CB78)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bf-v.early,:root:not([data-theme="light"]) .bv.early{color:var(--c-E8CB78)}
}
table.bf-t{table-layout:fixed}
table.bf-t col.bf-c1{width:13rem}
.bf-fold{margin-top:.8rem;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.bf-fold>summary{list-style:none;cursor:pointer;padding:.75rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.bf-fold>summary::-webkit-details-marker{display:none}
.bf-fs{display:flex;align-items:center;gap:.2rem;font-size:.92rem}
.bf-fs::before{content:"▸";color:var(--gold);margin-right:.4rem;transition:transform .15s}
.bf-fold[open] .bf-fs::before{transform:rotate(90deg)}
.bf-fn{font-size:.8rem;color:var(--muted)}
.bf-fold .tablewrap{margin:0 .5rem .5rem}
.bf-fold table.bf-t{margin:0}
@media (max-width:600px){
  table.bf-t col.bf-c1{width:auto}
  .bf-fold>summary{padding:.65rem .75rem}
}
.bf-fold .bf-v{display:none}
/* ---- Raid leader view: section rhythm (shared) ---- */
.rl-secs{display:flex;flex-direction:column;gap:3rem;margin-top:2.2rem}
.rl-sec>.section-h{margin:0 0 .5rem}
.rl-sec>.why{margin:0 0 1rem;max-width:46rem}
.rl-sec>*:last-child{margin-bottom:0!important}
.rl-sec .dg-cards,.rl-sec .dg-plot,.rl-sec .dg-lbs,.rl-sec table.dg-t{margin-bottom:0}
.rl-sec .rl-note{margin:.6rem 0 0}
.rl-kick{display:none}
.rl-src{margin-top:.7rem;font-size:.8rem;color:var(--muted)}
.rl-src summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.35rem}
.rl-src summary::-webkit-details-marker{display:none}
.rl-src summary::before{content:"▸";color:var(--gold);transition:transform .15s}
.rl-src[open] summary::before{transform:rotate(90deg)}
.rl-src p{margin:.4rem 0 0}
.rl-tiles{margin-bottom:0}
/* A: thin rules and a kicker over each heading */
.lay-a{gap:0}
.lay-a .rl-sec{padding:2.4rem 0;border-top:1px solid var(--line)}
.lay-a .rl-sec:first-child{border-top:0;padding-top:.6rem}
.lay-a .rl-kick{display:flex;align-items:center;gap:.45rem;margin:0 0 .35rem;font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.lay-a .rl-kick span{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;border:1.5px solid var(--gold);font-size:.68rem;letter-spacing:0}
/* B: every section is one card; cards inside it sit on the page color */
.lay-b{gap:1.25rem}
.lay-b .rl-sec{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.5rem 1.6rem}
.lay-b .rl-sec .rl-time,.lay-b .rl-sec .tablewrap,.lay-b .rl-sec .pcm-card,.lay-b .rl-sec .dg-card,.lay-b .rl-sec .bf-fold,.lay-b .rl-sec details{background:var(--bg)}
.lay-b .rl-sec .pcm-card{border:0;padding:.8rem}
.lay-b .rl-sec .pcm-card .tablewrap{background:transparent}
.lay-b .rl-sec .rl-src{background:none}
.lay-b .rl-kick{display:block;margin:0 0 .2rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lay-b .rl-kick span{display:none}
/* C: alternating full-width bands, heading with an accent bar */
.lay-c{gap:0}
.lay-c .rl-sec{padding:2.6rem 0}
.lay-c .rl-sec:nth-child(even){background:var(--panel);box-shadow:0 0 0 100vmax var(--panel);clip-path:inset(0 -100vmax)}
.lay-c .rl-sec:nth-child(even) .rl-time,.lay-c .rl-sec:nth-child(even) .tablewrap,.lay-c .rl-sec:nth-child(even) .pcm-card,.lay-c .rl-sec:nth-child(even) .dg-card,.lay-c .rl-sec:nth-child(even) .bf-fold{background:var(--bg)}
.lay-c .rl-sec:nth-child(even) .pcm-card .tablewrap{background:transparent}
.lay-c .rl-sec>.section-h{padding-left:.8rem;border-left:4px solid var(--gold)}
.lay-c .rl-kick{display:block;margin:0 0 .25rem .95rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lay-c .rl-kick span::after{content:" ·"}
.lay-c .rl-sec>.why{margin-left:.95rem}
@media (max-width:600px){
  .lay-a .rl-sec{padding:1.9rem 0}
  .lay-b{gap:.9rem}
  .lay-b .rl-sec{padding:1.1rem .8rem 1.2rem;border-radius:12px;margin:0 -.4rem}
  .lay-c .rl-sec{padding:2rem 0}
  .lay-c .rl-sec>.why{margin-left:0}
  .lay-c .rl-kick{margin-left:.95rem}
}
/* Burst fold: same right-side chevron as the other collapsible areas */
.bf-fold>summary{position:relative;padding-right:2.8rem}
.bf-fs::before{display:none}
.bf-fn{padding-left:0}
.bf-fold>summary::after{content:"";position:absolute;right:1.15rem;top:50%;width:.65rem;height:.65rem;border-right:3px solid var(--work);border-bottom:3px solid var(--work);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.bf-fold[open]>summary::after{transform:translateY(-20%) rotate(-135deg)}
.bf-fold>summary:hover{background:var(--bg);border-radius:12px}
/* How far each pull got: roomier layouts */
.pg{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}
.pg-d .pg-row{display:grid;grid-template-columns:4rem 1fr 7.5rem;align-items:center;gap:.8rem;min-height:2rem}
.pg-d .pg-row+.pg-row{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.pg-d .pg-head,.pg-d .pg-axis{border:0!important;min-height:1.6rem}
.pg-pn{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.pg-tr{position:relative;height:12px}
.pg-tr>i{position:absolute;top:0;bottom:0;opacity:.85}
.pg-tr>i:first-of-type{border-radius:6px 0 0 6px}
.pg-tr>i:last-of-type{border-radius:0 6px 6px 0}
.pg-div{position:absolute;top:-10px;bottom:-10px;border-left:1px dashed color-mix(in srgb,var(--ink) 18%,transparent)}
.pg-res{font-size:.8rem;color:var(--muted);display:flex;flex-direction:column;line-height:1.15}
.pg-res b{font-size:.8rem;color:var(--ink);font-weight:600}
.pg-row.best .pg-pn,.pg-row.best .pg-res b{color:var(--ink);font-weight:800}
.pg-row.best{background:color-mix(in srgb,var(--gold) 9%,transparent);border-radius:8px}
.pg-labs{height:1.2rem}
.pg-sl{position:absolute;top:0;font-size:.74rem;font-weight:700;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:.25rem}
.pg-sl i{width:.55rem;height:.55rem;border-radius:2px}
.pg-axis .pg-tr{height:1rem}
.pg-axis .pg-tr span{position:absolute;transform:translateX(-50%);font-size:.7rem;color:var(--muted)}
.pg-grid{display:grid;align-items:center;gap:.5rem}
.pg-headrow{margin-bottom:.4rem}
.pg-sh{font-size:.78rem;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:.3rem;white-space:nowrap;overflow:hidden}
.pg-sh i{width:.6rem;height:.6rem;border-radius:2px;flex:none}
.pg-row2{min-height:2.1rem;padding:0 .3rem;border-radius:8px}
.pg-row2.best{background:color-mix(in srgb,var(--gold) 10%,transparent)}
.pg-row2.best .pg-pn,.pg-row2.best .pg-res2{color:var(--ink);font-weight:800}
.pg-c{height:16px;border-radius:4px;background:color-mix(in srgb,var(--ink) 6%,transparent);overflow:hidden}
.pg-c i{display:block;height:100%;opacity:.85}
.pg-res2{font-size:.82rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.pg-res2.h{font-size:.74rem;font-weight:700}
.pg-strip-h{font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:.4rem}
.pg-strip{display:grid;gap:4px;margin-bottom:1.1rem}
.pg-sq{height:2.1rem;border-radius:6px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.85rem;opacity:.88}
.pg-sq.best{outline:2px solid var(--ink);outline-offset:2px;opacity:1}
.pg-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.pg-col{border-top:4px solid var(--sc);background:color-mix(in srgb,var(--sc) 7%,transparent);border-radius:8px;padding:.6rem .7rem}
.pg-ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.45rem}
.pg-ch span{font-size:.78rem;color:var(--muted)}
.pg-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pg-col li{display:flex;justify-content:space-between;font-size:.84rem;background:var(--panel);border-radius:6px;padding:.25rem .5rem}
.pg-col li span{color:var(--muted);font-variant-numeric:tabular-nums}
.pg-col li.best{font-weight:800;box-shadow:inset 0 0 0 2px var(--gold)}
.pg-col li.best span{color:var(--ink)}
.pg-col li.none{color:var(--muted);font-style:italic;background:none}
@media (max-width:600px){
  .pg{padding:.7rem .6rem}
  .pg-d .pg-row{grid-template-columns:2.6rem 1fr 4.6rem;gap:.45rem}
  .pg-pn{font-size:.74rem}
  .pg-res,.pg-res b{font-size:.68rem}
  .pg-sl{font-size:.6rem}
  .pg-sl i{display:none}
  .pg-e .pg-grid{grid-template-columns:2.6rem var(--pgc,repeat(4,minmax(0,1fr))) 3.4rem!important;gap:.3rem}
  .pg-sh{font-size:.6rem}
  .pg-sh i{display:none}
  .pg-res2{font-size:.7rem}
  .pg-sq{height:1.8rem;font-size:.72rem}
  .pg-strip{gap:2px}
  .pg-cols{grid-template-columns:1fr 1fr}
}
.pg-sh .sh{display:none}
@media (max-width:600px){
  .pg-axis .pg-tr span.odd{display:none}
  .pg-sh .fl{display:none}
  .pg-sh .sh{display:inline}
  .pg-col.empty{display:none}
}
/* Raid leader view: sticky boss bar (shown once the title scrolls away) and sticky section labels */
.rl-page>.rl-stick{margin-bottom:calc(-2.9125rem - 1px);opacity:0;pointer-events:none;transition:opacity .15s}
.rl-page>.rl-stick.on{opacity:1;pointer-events:auto}
.rl-stick small{font-family:var(--fb);font-size:.85rem;color:var(--muted);font-weight:500;margin-left:.6rem}
.rl-page .rl-sec>.rl-kick{position:sticky;z-index:19;background:var(--bg);margin-left:-1rem;margin-right:-1rem;padding:.5rem 1rem .45rem}
.lay-a .rl-sec>.rl-kick{margin-bottom:.35rem}
@media (max-width:600px){
  .rl-stick small{font-size:.75rem;margin-left:.4rem}
}
.boss-sec.rl-page{margin-top:0;border-top:0;padding-top:0}
/* Night page: bosses with a raid leader view link to it */
.boss-row li.linked{padding:0}
.boss-row li.linked a{display:flex;align-items:center;gap:.4rem;padding:.5rem .8rem;color:inherit;text-decoration:none;border-radius:10px}
.boss-row li.linked:hover{border-color:var(--gold)}
.boss-row li.linked a:hover{background:color-mix(in srgb,var(--gold) 7%,transparent)}
.boss-row li.linked .go{width:.45rem;height:.45rem;border-right:2px solid var(--muted);border-top:2px solid var(--muted);transform:rotate(45deg);margin-left:.15rem}
.boss-row li.linked a:hover .go{border-color:var(--gold)}
/* What ended each pull: last hits before each death (mockups) */
.dh-h{font-size:.9rem;margin:1rem 0 .5rem;font-family:inherit;font-weight:700}
table.dh-a{width:100%;border-collapse:collapse;font-size:.82rem;table-layout:fixed}
table.dh-a th,table.dh-a td{padding:.45rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.dh-a thead th{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
table.dh-a thead th:first-child{width:9rem}
table.dh-a th small,table.dh-a td small{display:block;color:var(--muted);font-size:.7rem;font-weight:500}
table.dh-a td b{display:block;font-variant-numeric:tabular-nums}
.dh-sp{display:block;line-height:1.25}
table.dh-a td.kb{background:color-mix(in srgb,#CB6D62 14%,transparent)}
table.dh-a td.kb small{color:var(--bad);font-weight:700}
.dh-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.dh-card{border:1px solid var(--line);border-radius:10px;padding:.55rem .65rem;background:var(--panel)}
.dh-ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.35rem}
.dh-ch small{color:var(--muted);font-size:.72rem}
.dh-card ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.dh-card li{display:grid;grid-template-columns:2.8rem minmax(0,1fr) 4.5rem 3.4rem;gap:.4rem;align-items:center;font-size:.78rem}
.dh-card li .dh-sp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-t{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.72rem}
.dh-card li.kb .dh-t{color:var(--bad);font-weight:800}
.dh-card li b{text-align:right;font-variant-numeric:tabular-nums}
.dh-bar{display:block;height:7px;border-radius:4px;background:color-mix(in srgb,var(--ink) 7%,transparent);overflow:hidden}
.dh-bar i{display:block;height:100%;background:color-mix(in srgb,var(--ink) 35%,transparent)}
li.kb .dh-bar i,tr.kb .dh-bar i{background:#CB6D62}
table.dh-c{width:100%;border-collapse:collapse;font-size:.82rem}
table.dh-c th,table.dh-c td{padding:.3rem .5rem;text-align:left}
table.dh-c thead th{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)}
table.dh-c tbody th{vertical-align:top;width:9rem;font-weight:600}
table.dh-c tbody th small{display:block;color:var(--muted);font-size:.7rem;font-weight:500}
table.dh-c tr.top td,table.dh-c tr.top th{border-top:1px solid var(--line)}
table.dh-c tr.g td,table.dh-c tr.g th{background:color-mix(in srgb,var(--ink) 3%,transparent)}
table.dh-c tr.kb td{color:var(--bad);font-weight:700}
table.dh-c td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.dh-c td.dh-amt{display:flex;align-items:center;gap:.45rem;justify-content:flex-end}
table.dh-c td.dh-amt .dh-bar{width:5rem}
@media (max-width:600px){
  .dh-cards{grid-template-columns:1fr}
  table.dh-a,table.dh-a tbody{display:block}
  table.dh-a thead{display:none}
  table.dh-a tr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--line);padding:.35rem 0}
  table.dh-a th{grid-column:1/-1;border:0;padding:.1rem .3rem}
  table.dh-a td{border:0;padding:.25rem .3rem;font-size:.66rem}
  table.dh-a td small{font-size:.58rem}
  table.dh-c td.dh-amt .dh-bar{display:none}
}
table.dh-a .dh-sp .ab{white-space:normal}
table.dh-a .dh-sp{overflow-wrap:anywhere}
@media (max-width:600px){
  table.dh-a .dh-sp .ab{font-size:0!important}
  table.dh-a .dh-sp .ab img{width:20px;height:20px;margin:0}
}
table.dh-c .sh{display:none}
@media (max-width:600px){
  table.dh-c .fl{display:none}
  table.dh-c .sh{display:inline}
  table.dh-c{font-size:.74rem;table-layout:fixed}
  table.dh-c tbody th,table.dh-c thead th:first-child{width:5.6rem}
  table.dh-c thead th:nth-child(2){width:3.2rem}
  table.dh-c thead th:nth-child(4){width:3.6rem}
  table.dh-c th,table.dh-c td{padding:.3rem .3rem}
  table.dh-c td .ab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  table.dh-c tbody th small{font-size:.62rem}
}
/* How the wipe happened (mockups d-g) */
.sv-key{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.78rem;color:var(--muted);margin:.2rem 0 .5rem}
.sv-key i{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;vertical-align:-1px;margin-right:4px}
.sv-tl{display:flex;flex-direction:column}
.sv-row{display:grid;grid-template-columns:7rem 1fr;align-items:center;gap:.6rem;min-height:1.7rem;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.sv-row:has(.sf-v){grid-template-columns:7rem 1fr 3rem}
.sv-n{font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-tr{position:relative;height:1.5rem}
.sv-tr>i{position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:50%;opacity:.85}
.sv-tr>i.kb{outline:2px solid var(--ink);outline-offset:1px;opacity:1}
.sv-sk{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:.8rem;color:var(--bad)}
.sv-ax{border:0}
.sv-ax .sv-tr span{position:absolute;transform:translateX(-50%);font-size:.68rem;color:var(--muted);top:.2rem}
.sv-lead{font-size:.9rem;margin:.2rem 0 .6rem}
ol.pb{list-style:none;margin:.3rem 0 0;padding:0 0 0 .4rem;border-left:2px solid var(--line)}
ol.pb li{position:relative;display:grid;grid-template-columns:3rem 1fr;gap:.6rem;padding:.4rem 0 .4rem .7rem;font-size:.9rem}
ol.pb li::before{content:"";position:absolute;left:-.48rem;top:.75rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--muted)}
ol.pb li.pb-big::before{background:var(--bad);width:.8rem;height:.8rem;left:-.58rem;top:.68rem}
ol.pb li.pb-tank::before{background:#6C8FC7}
ol.pb li.pb-wear::before{background:var(--c-C9A94A)}
ol.pb li.pb-big{background:color-mix(in srgb,#C8654F 9%,transparent);border-radius:0 8px 8px 0}
.pb-t{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700}
.sf-bar{position:relative;display:flex;height:14px;border-radius:4px;overflow:hidden;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.sf-bar i{display:block;height:100%}
.sf-max{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.sf-v{font-size:.8rem;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
table.cg-t{width:100%;border-collapse:collapse;font-size:.84rem}
table.cg-t th,table.cg-t td{padding:.4rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.cg-t thead th{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
table.cg-t td small{display:block;color:var(--muted);font-size:.72rem}
table.cg-t td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.cg-bar{position:relative;display:flex;width:9rem;height:10px;border-radius:5px;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.cg-bar i.hp{background:#5FA37A;border-radius:5px 0 0 5px}
.cg-bar i.sh{background:#C9C2E8}
.cg-hit{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--bad)}
.cg-v{font-size:.72rem;font-weight:700;padding:.08rem .5rem;border-radius:999px;white-space:nowrap}
.cg-v.full{background:color-mix(in srgb,#C8654F 20%,transparent);color:var(--bad)}
.cg-v.low{background:color-mix(in srgb,var(--c-C9A94A) 25%,transparent);color:var(--c-8A6A12)}
@media (max-width:600px){
  .sv-row{grid-template-columns:4.8rem 1fr}
  .sv-row:has(.sf-v){grid-template-columns:4.8rem 1fr 2.4rem}
  .sv-n{font-size:.72rem}
  ol.pb li{grid-template-columns:2.6rem 1fr;font-size:.84rem}
  table.cg-t thead{display:none}
  table.cg-t,table.cg-t tbody{display:block}
  table.cg-t tr{display:grid;grid-template-columns:1fr auto;gap:.15rem .5rem;padding:.45rem 0;border-bottom:1px solid var(--line)}
  table.cg-t th,table.cg-t td{border:0;padding:0}
  table.cg-t td:nth-child(4){grid-column:1/-1}
  .cg-bar{width:100%}
}
/* Wipe count options (mockups) */
.cn-pill{flex:none;font-size:.74rem;font-weight:800;padding:.12rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);margin-right:.2rem;white-space:nowrap}
.cn-right{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--muted);white-space:nowrap;padding-right:.3rem}
.cn-right+.wc-btn{margin-left:.6rem}
.cn-stack{flex:none;flex-direction:column;align-items:center;line-height:1;min-width:2.4rem;margin-right:.3rem;padding-right:.55rem;border-right:1px solid var(--line)}
.cn-stack b{font-size:1.25rem}
.cn-stack small{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-top:2px}
.cn-after{font-size:.82rem;color:var(--muted);font-weight:600;white-space:nowrap}
.cn-head{display:flex;gap:.9rem;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:0 1rem .3rem;margin-top:.3rem}
.cn-head span:first-child{min-width:1.4rem}
details.wc-item>summary:has(.cn-right){padding-right:6.2rem}
.cn-right{position:absolute;right:2.7rem;top:50%;transform:translateY(-50%);margin:0;padding:0}
.cn-stack{display:inline-flex;vertical-align:middle}
.cn-pill{display:inline-block;vertical-align:.1rem}
.cn-after{margin-left:.3rem}
/* Avoidable mechanics detail (mockups AVD a-e) */
.av-tiles{margin:.2rem 0 .8rem}
.av-tv{font-size:1.15rem!important;line-height:1.2}
.av-key{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.8rem;color:var(--muted);margin:0 0 .5rem}
.av-kb,.av-hf{display:inline-block;font-size:.68rem;font-weight:800;padding:0 .3rem;border-radius:4px;margin-left:.25rem;line-height:1.35;white-space:nowrap}
.av-kb{background:var(--ink);color:var(--panel)}
.av-hf{background:var(--c-E8C34A);color:var(--c-2A1F00)}
.av-wrap{overflow-x:auto}
table.av-t{border-collapse:separate;border-spacing:0;font-size:.8rem;min-width:100%}
table.av-t th,table.av-t td{border-bottom:1px solid var(--line);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
table.av-t thead th{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:normal;vertical-align:bottom}
table.av-t th.av-p{text-align:left;position:sticky;left:0;background:var(--panel);z-index:1}
table.av-t th.av-p small{display:block;font-size:.66rem;color:var(--muted);font-weight:500}
.av-rk{color:var(--muted);font-size:.72rem}
td.av-tot{text-align:left}
td.av-tot b{font-size:.8rem}
td.av-tot small{display:block;font-size:.64rem;color:var(--muted)}
.av-bar{display:inline-block;width:4.2rem;height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink) 8%,transparent);margin-right:.35rem;vertical-align:middle;overflow:hidden}
.av-bar i{display:block;height:100%;background:#C8654F}
td.av-d{font-weight:800;font-size:.9rem}
.avc{display:flex;flex-direction:column;gap:.35rem;margin-top:.6rem}
.avc-row{display:grid;grid-template-columns:7rem 1fr 4.6rem;gap:.6rem;align-items:center;padding:.3rem 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.avc-n small{display:block;font-size:.68rem;color:var(--muted)}
.avc-bar{display:flex;height:14px;border-radius:4px;overflow:hidden;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.avc-bar i{display:block;height:100%}
.avc-s{display:block;font-size:.74rem;color:var(--muted);margin-top:.2rem}
.avc-s .av-kb{background:none;color:var(--bad);border:1px solid;font-weight:700}
.avc-v{font-size:.8rem;text-align:right;font-variant-numeric:tabular-nums}
.avc-h{font-size:.85rem;font-weight:700;margin:.4rem 0 .3rem}
.avc-cost{height:20px}
.avd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.avd-card{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--ac);border-radius:10px;padding:.65rem .75rem}
.avd-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem .6rem;align-items:baseline}
.avd-h span{font-size:.78rem;color:var(--muted);font-weight:700}
.avd-k{display:flex;gap:.9rem;font-size:.75rem;color:var(--muted);margin:.2rem 0 .45rem}
.avd-card ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.avd-card li{display:grid;grid-template-columns:6.5rem 1fr 3.2rem auto;gap:.4rem;align-items:center;font-size:.8rem}
.avd-card li .av-bar{width:100%;margin:0}
.avd-card li b{text-align:right;font-variant-numeric:tabular-nums}
.avd-card li.avd-more{display:block;color:var(--muted);font-size:.74rem}
table.ave-t{width:100%;border-collapse:collapse;font-size:.84rem}
table.ave-t th,table.ave-t td{padding:.5rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.ave-t thead th{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
table.ave-t th small,table.ave-t td small{display:block;font-size:.7rem;color:var(--muted);font-weight:500}
table.ave-t td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
ul.ave-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
ul.ave-l span{color:var(--muted);font-size:.78rem}
.av-learn{margin-top:1rem}
.av-learn .pcm-card{margin:0 .6rem .6rem}
@media (max-width:600px){
  .avc-row{grid-template-columns:4.8rem 1fr 3.6rem;gap:.4rem}
  .avd{grid-template-columns:1fr}
  .avd-card li{grid-template-columns:5.5rem 1fr 3rem auto}
  table.ave-t thead{display:none}
  table.ave-t,table.ave-t tbody{display:block}
  table.ave-t tr{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);padding:.4rem 0}
  table.ave-t th,table.ave-t td{border:0;padding:.15rem .3rem}
  table.ave-t th,table.ave-t td:nth-child(2){grid-column:1/-1}
  table.ave-t td.n{text-align:left}
}
table.av-t{width:100%;table-layout:auto}
table.av-t thead th{min-width:0}
table.av-t th,table.av-t td{padding:.4rem .3rem}
table.av-t th.av-p{min-width:6.5rem}
td.av-tot{min-width:6rem}
td.av-tot .av-bar{width:2.6rem}
table.av-t th.av-p small{text-transform:none;letter-spacing:0}
.av-bg{white-space:nowrap}
/* Avoidable mechanic how-to bubbles (mockups TIP a-c) */
.avt-body b{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;opacity:.75;margin-top:.45rem}
.avt-body b:first-child{margin-top:0}
.avt-body span{display:block}
.avd-h>b{display:inline-flex;align-items:center;gap:.1rem}
.avt-a{margin-left:.4rem}
.avt-a .info-tip{left:0;transform:none;max-width:17rem;font-weight:400}
.avt-b{position:relative;margin-left:.5rem;font-size:.7rem;font-weight:700;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:999px;padding:.05rem .5rem;cursor:help;white-space:nowrap}
.avt-b:hover,.avt-b:focus{background:color-mix(in srgb,var(--gold) 14%,transparent);outline:none}
.avt-pop{display:none;position:absolute;z-index:20;top:calc(100% + .45rem);left:0;width:17rem;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:10px;padding:.65rem .75rem;box-shadow:0 10px 26px rgba(0,0,0,.18);font-size:.82rem;line-height:1.4;font-weight:400;white-space:normal;text-transform:none;letter-spacing:0}
.avt-pop b{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:.45rem}
.avt-pop b:first-child{margin-top:0}
.avt-pop span{display:block}
.avt-b:hover .avt-pop,.avt-b:focus .avt-pop{display:block}
.avd-card{position:relative}
.avt-slot{position:absolute;top:.6rem;right:.7rem}
.avd-card:has(.avt-c) .avd-h{padding-right:1.6rem}
.avt-c>summary{list-style:none;cursor:pointer;width:1.15rem;height:1.15rem;border-radius:50%;border:1.5px solid var(--muted);color:var(--muted);display:grid;place-items:center;font:italic 700 .7rem/1 var(--fb)}
.avt-c>summary::-webkit-details-marker{display:none}
.avt-c[open]>summary{border-color:var(--gold);color:var(--gold)}
.avt-c .avt-body{position:absolute;right:-.7rem;top:1.6rem;width:min(19rem,80vw);z-index:5}
.avd-card:has(.avt-c[open]) .avd-k{margin-top:0}
.avt-c[open]{position:static}
.avd-card:has(.avt-c[open]) .avt-slot{position:static;float:none}
.avd-card:has(.avt-c[open]) .avt-slot .avt-c{display:block}
.avd-card:has(.avt-c[open]) .avt-slot summary{position:absolute;top:.6rem;right:.7rem}
.avd-card .avt-c .avt-body{position:static;width:auto;margin:.45rem 0 .55rem;background:color-mix(in srgb,var(--gold) 9%,transparent);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:.5rem .65rem;font-size:.82rem;line-height:1.4}
.avd-h .avt-body span,.avd-h .avt-pop span{color:inherit;font-weight:400;font-size:.82rem}
.avd-h .avt-body b,.avd-h .avt-pop b{font-weight:700}
.avt-a .info-tip b{color:inherit}
@media (max-width:600px){
  .avd-h .avt-a,.avd-h .avt-b{position:static}
  .avt-a .info-tip,.avt-pop{left:.6rem;right:.6rem;top:2.4rem;width:auto;max-width:none;transform:none}
}
.avd-h .avt-a .info-tip{color:var(--panel)}
/* How-to-avoid pill opens the same dark tooltip as the (i) icons */
.avd-h .avt-b .avt-pop{background:var(--ink);color:var(--panel);border:0;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.25);padding:.55rem .7rem}
.avd-h .avt-pop b{color:inherit;opacity:.75}
/* Healing cooldowns at the big hits (mockups HEAL a-e) */
.hv{display:inline-block;font-size:.68rem;font-weight:800;padding:.08rem .5rem;border-radius:999px;margin-top:.25rem;white-space:nowrap}
.hv.ready{background:color-mix(in srgb,#CB6D62 20%,transparent);color:var(--bad)}
.hv.spent{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--muted)}
.hv.oneshot{background:color-mix(in srgb,#6C8FC7 20%,transparent);color:#3E5F9A}
table.hc-a th small,table.hc-a td small{display:block;font-size:.7rem;color:var(--muted);font-weight:500}
table.hc-a tbody th .hv{display:inline-block}
table.hc-a td.hh{font-weight:800;font-size:1rem;text-align:right}
table.hc-a tr.hv-ready th{box-shadow:inset 4px 0 0 #CB6D62}
.ht-b{margin:.9rem 0 1.2rem}
.ht-h{font-size:.88rem;margin-bottom:.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem}
.ht-plot{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.4rem .6rem}
.ht-row{display:grid;grid-template-columns:6rem 1fr 6.5rem;gap:.5rem;align-items:center;height:32px}
.ht-n{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ht-tr{position:relative;height:28px;border-bottom:1px dashed var(--line)}
.ht-m{position:absolute;top:50%;transform:translate(-50%,-50%)}
.ht-m .bi img,.ht-rd .bi img{width:18px;height:18px}
.ht-rd{display:flex;gap:3px;flex-wrap:wrap}
.ht-rdh{font-size:.66rem;color:var(--muted);font-weight:700;text-transform:uppercase}
.ht-ax{height:1.1rem}
.ht-ax .ht-tr{border:0;height:1rem}
.ht-ax .ht-tr span{position:absolute;transform:translateX(-50%);font-size:.66rem;color:var(--muted)}
.ht-hit{position:absolute;top:.3rem;bottom:1.3rem;width:3px;margin-left:calc(6rem + .5rem + .6rem);background:#CB6D62;border-radius:2px;z-index:0}
.hc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.hc-card ul{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.hc-card li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .5rem;font-size:.82rem}
.hc-strip{grid-column:1/-1;display:flex;gap:3px;order:3}
.hc-strip i{flex:1;height:12px;border-radius:3px;max-width:26px}
.hc-strip i.used{background:#7FB38A}
.hc-strip i.early{background:var(--c-D4B45A)}
.hc-strip i.ready{background:#CB6D62}
.hc-strip i.cd{background:color-mix(in srgb,var(--ink) 15%,transparent)}
.hc-card li b{font-size:.74rem;text-align:right}
ul.hd{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
ul.hd li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-size:.86rem}
ul.hd li.hd-ready{border-left:4px solid #CB6D62}
.hd-h{margin-bottom:.3rem}
.hd-l{display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:baseline;margin-top:.15rem}
.hd-k{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);min-width:4.6rem}
.hd-k.bad{color:var(--bad)}
.hd-k.ok{color:var(--kill)}
.bf-fold ul.hd{margin:0 .7rem .7rem}
.he-head,.he-row{display:grid;gap:.7rem;align-items:center}
.he-head{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:.4rem}
.he-row{padding:.45rem 0;border-bottom:1px solid var(--line)}
.he-p small{display:block;font-size:.72rem;color:var(--muted)}
.he-hp{position:relative;height:16px;border-radius:8px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.he-hp i{display:block;height:100%;border-radius:8px;background:#7FB38A}
.he-hp em{position:absolute;right:.4rem;top:-1px;font-style:normal;font-size:.72rem;font-weight:800}
.he-rd{display:flex;flex-wrap:wrap;gap:3px}
.he-rd small{color:var(--muted)}
.he-row .hv{margin:0;justify-self:start}
@media (max-width:700px){
  .hc-cards{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ht-row{grid-template-columns:4.2rem 1fr 3.4rem}
  .ht-hit{margin-left:calc(4.2rem + .5rem + .6rem)}
  .he-head{display:none}
  .he-row{gap:.35rem .6rem}
}
.hd-i{white-space:nowrap}
.ht-plot{overflow:hidden}
@media (max-width:600px){
  .ht-rd .bi img{width:15px;height:15px}
  .ht-rdh{font-size:.55rem}
}
/* Healing lens (HEAL=f) */
.he-g{margin-top:1rem}
.he-g h4{margin:0 0 .2rem;font-size:.9rem;font-family:inherit;font-weight:800}
.he-g h4 span{color:var(--muted);font-weight:600}
.he-g-heal h4{color:var(--bad)}
.he-row.he-missed .he-hp i,.he-row.he-tank .he-hp i,.he-row.he-big .he-hp i{background:color-mix(in srgb,var(--ink) 25%,transparent)}
.he-rd.off{opacity:.35;filter:grayscale(1)}
.he-v small{display:block;font-size:.72rem;color:var(--muted);margin-top:.15rem;line-height:1.3}
.hv.lens-missed{background:color-mix(in srgb,var(--c-C9A94A) 25%,transparent);color:var(--c-8A6A12)}
.hv.lens-tank{background:color-mix(in srgb,#6C8FC7 20%,transparent);color:#3E5F9A}
.hv.lens-big{background:color-mix(in srgb,#6C8FC7 20%,transparent);color:#3E5F9A}
.he-head,.he-row{grid-template-columns:9rem minmax(0,1fr) minmax(0,.8fr) 14rem}
@media (max-width:600px){
  .he-row{grid-template-columns:1fr 1fr}
  .he-v{grid-column:1/-1}
}
/* Healing lens with raid health and tank panel (HEAL=g) */
.hg{display:grid;grid-template-columns:5.2rem 1fr;gap:.25rem .5rem;align-items:center}
.hg-l{font-size:.68rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.1}
.hg-l b{font-size:.85rem;color:var(--ink);margin-left:.3rem;text-transform:none}
.hg-l small{display:block;text-transform:none;font-weight:500;letter-spacing:0}
.he-hp.hd i{background:#CB6D62}
.he-row{position:relative}
.tp{grid-column:1/-1;margin:.35rem 0 .1rem;padding:.5rem .7rem;border-radius:8px;background:color-mix(in srgb,#6C8FC7 9%,transparent);border-left:3px solid #6C8FC7;font-size:.83rem}
.tp-h{line-height:1.45}
.tp-s{color:var(--muted)}
.tp-h .hv{margin-left:.3rem}
.tp-l{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .35rem;margin-top:.35rem}
.tp-k{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-right:.2rem}
.tp-k+*{margin-left:0}
.tp-l .tp-k:not(:first-child){margin-left:.8rem}
.tp-w{font-size:.7rem;color:var(--muted);margin-right:.4rem}
@media (max-width:600px){
  .hg{grid-template-columns:4.6rem 1fr;grid-column:1/-1}
  .tp-l .tp-k:not(:first-child){margin-left:0;flex-basis:100%}
}
/* Healing at the big hits, filtered layouts (HLAY a-e) */
table.hl-t th small,table.hl-t td small{display:block;font-size:.72rem;color:var(--muted);font-weight:500}
table.hl-t td.n{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.hb{display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem}
.hb-card{background:var(--panel);border:1px solid var(--line);border-left:4px solid #CB6D62;border-radius:10px;padding:.6rem .8rem;font-size:.86rem}
.hb-h{display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:baseline;margin-bottom:.35rem}
.hb-h span{font-size:.78rem;color:var(--muted)}
.hb-l{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .4rem;margin-top:.25rem}
ol.hc-l li{grid-template-columns:2.6rem 1fr}
.dim{color:var(--muted)}
table.hl-d td{vertical-align:top}
table.hl-d td small{display:block;font-size:.72rem;color:var(--muted)}
table.hl-d td>div+div{margin-top:.4rem}
.hl-tiles{margin-bottom:.8rem}
ul.hf-l{list-style:none;margin:0 1rem .8rem;padding:0;font-size:.84rem;display:flex;flex-direction:column;gap:.3rem}
/* Healing findings with health charts (HEAL g, HLAY f-j) */
.hpw{display:flex;gap:4px;margin:.5rem 0 .3rem}
.hpy{position:relative;width:30px;flex:none;height:150px}
.hpy span,.hpx span{position:absolute;font-size:10px;color:var(--muted);line-height:1;white-space:nowrap}
.hpy span{right:0;transform:translateY(-50%)}
.hpc{flex:1;min-width:0;position:relative;padding-bottom:16px}
.hpx{position:absolute;left:0;right:0;bottom:0;height:12px}
.hpx span{transform:translateX(-50%)}
.hpx span:last-child{transform:translateX(-100%)}
svg.hps{display:block;width:100%;height:150px;background:var(--bg);border-radius:6px}
svg.hps.sm{height:44px;margin:0;background:transparent}
svg.hps .g{stroke:var(--line);stroke-width:1}
svg.hps .hl{fill:none;stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
svg.hps.sm .hl{stroke:#CB6D62;stroke-width:2}
svg.hps .hl2{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
svg.hps .bd{fill:#CB6D62;opacity:.75}
svg.hps .bh{fill:#4E9A3A;opacity:.75}
svg.hps .end{stroke:#CB6D62;stroke-width:2;vector-effect:non-scaling-stroke}
svg.hps .mk{stroke:var(--gold);stroke-width:2;stroke-dasharray:3 2;vector-effect:non-scaling-stroke}
.hx p{margin:.3rem 0;font-size:.86rem}
.hx-key{display:flex;flex-wrap:wrap;gap:.2rem .8rem;font-size:.72rem;color:var(--muted)}
.hx-key span{display:inline-flex;align-items:center;gap:.3rem}
i.hk{display:inline-block;width:12px;height:8px;border-radius:2px}
i.hk.hl{height:2px;background:var(--ink)}
i.hk.bd{background:#CB6D62}
i.hk.bh{background:#4E9A3A}
i.hk.mk{width:2px;height:10px;background:var(--gold)}
i.hk.end{width:2px;height:10px;background:#CB6D62}
.hx-cd{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .4rem;margin-top:.5rem}
.hx-cd .tp-k{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.hx-cd .tp-k+*{margin-right:.4rem}
.hx-lists{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.6rem}
.hx-lists h5{margin:0 0 .25rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.hx-lists ul{list-style:none;margin:0;padding:0;font-size:.8rem}
.hx-lists li{display:flex;justify-content:space-between;gap:.5rem;padding:.12rem 0;border-bottom:1px solid var(--line)}
.hx-lists li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-list{display:grid;gap:.5rem}
details.hx-i,details.hx-c{background:var(--panel);border:1px solid var(--line);border-left:4px solid #CB6D62;border-radius:10px}
details.hx-i>summary,details.hx-c>summary{list-style:none;cursor:pointer;padding:.55rem .75rem}
details.hx-i>summary::-webkit-details-marker,details.hx-c>summary::-webkit-details-marker{display:none}
details.hx-i>summary{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:.3rem .8rem;align-items:center}
details.hx-i>summary .hx-t{font-weight:700;font-size:.88rem}
details.hx-i>summary .hx-t::before{content:"▸ ";color:var(--gold)}
details.hx-i[open]>summary .hx-t::before{content:"▾ "}
.hx-b{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;grid-column:1/-1}
.hx-n{font-size:.82rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.hx-n b{color:#CB6D62}
details.hx-i>.hx,details.hx-c>.hx{padding:0 .75rem .75rem;border-top:1px solid var(--line)}
.hx-dh{display:grid;gap:.2rem;grid-column:2/-1}
.hx-dh>span{display:flex;align-items:center;gap:.4rem;font-size:.74rem}
.hx-dh i{display:block;height:10px;border-radius:3px;min-width:2px}
.hx-dh i.bd{background:#CB6D62}
.hx-dh i.bh{background:#4E9A3A}
.hx-dh em{font-style:normal;color:var(--muted);white-space:nowrap}
.hx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.6rem}
details.hx-c[open]{grid-column:1/-1}
.hx-ch{font-weight:700;font-size:.88rem;margin-bottom:.3rem}
.hx-ch::before{content:"▸ ";color:var(--gold)}
details.hx-c[open] .hx-ch::before{content:"▾ "}
.hx-cb{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .4rem;margin-top:.35rem}
.hx-cb .hx-n{margin-left:auto}
.hx-strip-h{font-size:.74rem;color:var(--muted);margin:.2rem 0 .3rem}
.hx-strip{display:grid;gap:3px;margin-bottom:.8rem}
.hx-sq{display:flex;align-items:center;justify-content:center;height:34px;border-radius:6px;background:var(--line);color:var(--muted);font-size:.74rem;font-weight:700;text-decoration:none}
.hx-sq.on{background:#CB6D62;color:#fff}
table.hl-d tr.hx-dr td{padding-top:0;border-top:0}
table.hl-d svg.hps.sm{height:50px}
details.hx-in{border-left-width:1px}
details.hx-in>summary{grid-template-columns:1fr}
@media (max-width:600px){
  details.hx-i>summary{grid-template-columns:1fr}
  .hx-dh{grid-column:1}
  .hx-lists{grid-template-columns:1fr}
  svg.hps{height:130px}
  .hpy{height:130px}
  table.hl-d tr.hx-dr td{grid-column:1/-1}
}
/* Healing: who could press it, and one pull with two problems (HLAY k-m) */
.kt{display:inline-block;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:.12rem .4rem;border-radius:4px;margin-right:.4rem;vertical-align:middle;white-space:nowrap}
.kt.tank{background:#DCE7F7;color:#1F4E8C}
.kt.raid{background:#F6DEDA;color:#9B3A2F}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .kt.tank{background:#1E3354;color:#9EC3F5}
  :root:not([data-theme="light"]) .kt.raid{background:#4A2522;color:#F2AAA0}
}
:root[data-theme="dark"] .kt.tank{background:#1E3354;color:#9EC3F5}
:root[data-theme="dark"] .kt.raid{background:#4A2522;color:#F2AAA0}
.gs{display:inline-block;font-size:.72rem;font-weight:700;padding:.05rem .4rem;border-radius:999px;white-space:nowrap}
.gs.ok{background:var(--kill-soft);color:var(--kill)}
.gs.dead{background:var(--line);color:var(--muted)}
.gs+.gs{margin-left:.3rem}
.bi.dead{filter:grayscale(1);opacity:.45}
.gv{margin-top:.6rem}
.gv>.tp-k{display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.3rem}
ul.gv-r{list-style:none;margin:0;padding:0;font-size:.84rem}
ul.gv-r li{display:grid;grid-template-columns:minmax(5rem,8rem) auto 1fr;gap:.5rem;align-items:center;padding:.25rem 0;border-bottom:1px solid var(--line)}
ul.gv-r li.dead .gv-n{opacity:.6}
.gv-ic{display:flex;flex-wrap:wrap;gap:.2rem}
.gv-fs{display:flex;flex-wrap:wrap;gap:.6rem}
figure.gv-f{margin:0;display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.72rem;text-align:center}
figure.gv-f>span{display:flex;gap:.15rem}
figure.gv-f figcaption{line-height:1.3}
.hx-b .gv{margin:0;display:flex;align-items:center;gap:.5rem}
.hx-b .gv>.tp-k{margin:0;font-size:.6rem;max-width:5.5rem;line-height:1.2}
.hx-b .gv-fs{gap:.5rem}
.gl-wrap{display:grid;gap:.3rem}
.gl{display:grid;grid-template-columns:7rem 1fr;gap:4px;align-items:center;font-size:.8rem}
.gl-n{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.gl-n .bi img,.gl-n .bi{max-height:20px}
.hpw.wide .hpy{width:7rem}
.gl-tr{position:relative;background:var(--line);border-radius:3px}
.gl-tr i{position:absolute;left:0;top:0;bottom:0;background:#4E9A3A;border-radius:3px;opacity:.8}
.gl-x{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:.8rem;line-height:1}
.gl-tr em{position:absolute;top:-3px;bottom:-3px;width:2px;background:#CB6D62}
.gl-tr em.tank{background:#2F6DB5}
.gl-pre{position:absolute;left:.4rem;top:50%;transform:translateY(-50%);font-size:.66rem;font-weight:700;color:var(--muted);white-space:nowrap}
.gl-tr{height:14px}
i.hk.ok{background:#4E9A3A}
i.hk.tk{height:2px;background:#2F6DB5}
i.hk.hl2{height:0;border-top:2px dashed var(--muted);border-radius:0}
i.hk.tke{width:2px;height:10px;background:#2F6DB5}
svg.hps .tk{fill:none;stroke:#2F6DB5;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
svg.hps .tke{stroke:#2F6DB5;stroke-width:2;vector-effect:non-scaling-stroke}
/* K */
details.kp>summary{grid-template-columns:1fr!important;gap:.35rem}
.kp-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.kp-c{font-size:.74rem;font-weight:700;color:#9B3A2F}
.kp-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:.3rem .8rem;align-items:center;padding-left:.9rem}
.kp-row .hx-t::before{content:none!important}
.kp-row .hx-t{font-weight:600;font-size:.84rem}
.kp-a{display:block;margin-top:.2rem}
.kp-sec{padding:.6rem .75rem 0;border-top:1px solid var(--line)}
.kp-sec>b{font-size:.9rem}
.kp-sec .hx{padding:0;border:0}
.kp-gap{text-align:center;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:.5rem 0 .2rem;position:relative}
details.kp>.kp-sec:last-child{padding-bottom:.75rem}
/* L */
.lp{border-left:3px solid var(--line);padding-left:.6rem;display:grid;gap:.35rem}
.lp:not(.one){border-left-color:#CB6D62}
.lp-h{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.lp:not(.one) .lp-h{color:#9B3A2F}
details.hx-i.tank{border-left-color:#2F6DB5}
details.hx-i.l-raid{border-left-color:#CB6D62}
/* M */
details.mm>summary{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)!important}
ul.mm-l{list-style:none;margin:.3rem 0 0;padding:0;font-weight:500;display:grid;gap:.3rem}
ul.mm-l li{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .3rem;font-size:.84rem}
details.mm .hx-t::before{content:none!important}
h5.mm-h{margin:.8rem 0 .1rem;font-size:.84rem}
details.mm details.hx-in{margin-top:.6rem}
@media (max-width:600px){
  .kp-row{grid-template-columns:1fr;padding-left:0}
  ul.gv-r li{grid-template-columns:1fr auto}
  ul.gv-r li .gv-ic{grid-column:1/-1}
  details.mm>summary{grid-template-columns:1fr!important}
  .gl{grid-template-columns:5rem 1fr}
  .hpw.wide .hpy{width:5rem}
}
/* Healing: the story starts when healers die first (HLAY n) */
.kt.heal{background:#E9E0F5;color:#5B3A8C}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .kt.heal{background:#33264A;color:#C9B2F0}
}
:root[data-theme="dark"] .kt.heal{background:#33264A;color:#C9B2F0}
.gs.av{background:var(--prog-soft);color:var(--prog);margin-left:.35rem}
svg.hps .hde{stroke:#7A5BB0;stroke-width:2;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
i.hk.hde{width:2px;height:10px;background:#7A5BB0}
.gl-tr em.heal{background:#7A5BB0}
.lp.root{border-left-color:#7A5BB0}
.lp.root .lp-h{color:#5B3A8C}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lp.root .lp-h{color:#C9B2F0}
}
:root[data-theme="dark"] .lp.root .lp-h{color:#C9B2F0}
.lp-then{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:.15rem}
details.hx-i.story{border-left-color:#7A5BB0}
details.hx-i.story>summary{grid-template-columns:1fr}
details.hx-i.story>summary .hx-sp svg.hps.sm{height:40px}
details.hx-i.story>summary::before{content:none}
ol.sc{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
li.sc-s{display:flex;flex-direction:column;gap:.15rem;background:var(--bg);border-radius:8px;padding:.35rem .5rem;font-size:.8rem;min-width:0;max-width:15rem}
li.sc-s .kt{align-self:flex-start;margin:0}
.sc-t{font-size:.7rem;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.sc-x{font-weight:600;line-height:1.3}
li.sc-g{align-self:center;white-space:nowrap}
.sc-m{grid-column:1/-1;font-size:.72rem;color:var(--gold);font-weight:700}
details.story[open] .sc-m{display:none}
.sc-after{display:block;font-size:.72rem;font-weight:600;color:var(--muted);margin-top:.15rem}
@media (max-width:600px){
  details.hx-i.story>summary{grid-template-columns:1fr}
  li.sc-s{max-width:none;flex:1 1 100%}
  li.sc-g{flex:1 1 100%;text-align:left;padding-left:.5rem}
  li.sc-g::after{content:" ↓"}
}
/* N: compact story chips with one tooltip at a time, and a clear "Details" control */
.sc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;position:relative}
ol.sc{gap:.35rem;align-items:center}
li.sc-c{position:relative;display:inline-flex;align-items:center;gap:.4rem;background:var(--bg);border:1px dashed var(--line);border-radius:999px;padding:.25rem .55rem .25rem .6rem;cursor:help;font-size:.8rem}
li.sc-c .kt{margin:0}
li.sc-c:hover,li.sc-c:focus-visible,li.sc-c.show{border-style:solid;border-color:var(--muted);outline:none}
li.sc-g{font-size:.85rem;color:var(--muted);font-weight:700}
li.sc-g::after{content:none}
.sc-tip{display:none;position:absolute;z-index:20;top:calc(100% + .45rem);left:0;width:17rem;background:var(--c-1B2340);color:var(--c-F3F4F8);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.25);padding:.55rem .7rem;font-size:.8rem;line-height:1.4;font-weight:400;white-space:normal;cursor:default}
.sc-tip b{display:block;font-weight:700}
.sc-tip>span{display:block;margin-top:.25rem;color:var(--c-C9CDDA)}
.sc-tip .gs.av{margin-left:.3rem}
li.sc-c:hover .sc-tip,li.sc-c:focus-visible .sc-tip,li.sc-c.show .sc-tip{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sc-tip{background:var(--c-0B0F1A);border:1px solid var(--line)}
}
:root[data-theme="dark"] .sc-tip{background:var(--c-0B0F1A);border:1px solid var(--line)}
.hx-more{display:inline-flex;align-items:center;gap:.3rem;margin-left:auto;font-size:.74rem;font-weight:700;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:999px;padding:.12rem .55rem;white-space:nowrap}
.hx-more i{font-style:normal;transition:transform .15s}
.hx-more .c{display:none}
details[open]>summary .hx-more .o{display:none}
details[open]>summary .hx-more .c{display:inline}
details[open]>summary .hx-more i{transform:rotate(180deg)}
.n-lay details.hx-i>summary .hx-t::before{content:none}
.n-lay details.hx-i>summary:hover .hx-more{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.n-lay details.hx-i>summary:hover{background:color-mix(in srgb,var(--gold) 5%,transparent)}
.n-lay .hx-b{align-items:flex-end}
.n-lay details.story>.hx .gv-fs{gap:1rem}
figure.gv-f{justify-content:flex-end}
@media (max-width:600px){
  ol.sc{position:relative}
  li.sc-c{position:static}
  .sc-tip{left:0;right:0;width:auto}
  li.sc-g{display:none}
  ol.sc{gap:.3rem}
}
/* Healing and defensives: every healer's cooldowns in their state */
.hx-figs .bi.ready,.gv .bi.ready{box-shadow:inset 0 0 0 2px #CB6D62;background:color-mix(in srgb,#CB6D62 22%,transparent)}
.gv .bi.cd img{filter:none;opacity:.35}
.gv .bi.dead img{filter:grayscale(1);opacity:.3}
.gv .bi.dead{opacity:1;filter:none}
.bk.gone{box-shadow:inset 0 0 0 1px var(--line);background:repeating-linear-gradient(45deg,var(--line) 0 2px,transparent 2px 5px)}
.hx-ckey{margin:.2rem 0 .6rem}
figure.gv-f>span:empty::before{content:attr(data-none);font-size:.68rem;color:var(--muted)}
/* Burst: clearer used / early / unused (BICON mockups a-e) */
table.bf-t td.bf:has(.bx-a,.bx-b,.bx-c,.bx-d,.bx-e){background:none}
.bx-key{margin-top:-.2rem}
.bx-key .bq{display:inline-flex}
.bq{position:relative;display:inline-flex;flex-direction:column;align-items:center;flex:none;width:auto}
/* A: corner badges */
b.bm{position:absolute;top:-6px;right:-6px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:.62rem;font-weight:900;color:#fff;line-height:1;box-shadow:0 0 0 2px var(--panel)}
.bx-key b.bm{position:static;display:inline-grid;margin-right:4px;vertical-align:-2px}
b.bm.used{background:#3E8E4E}
b.bm.early{background:var(--c-B8902A)}
b.bm.missed{background:#C0473B}
.bx-a .bq.missed .bi img{filter:grayscale(1);opacity:.45}
.bx-a .bi,.bx-b .bi,.bx-d .bi{box-shadow:none!important;background:none!important}
/* B: lit vs dark, with a word under each */
.bx-b{gap:.45rem}
.bx-b .bq.used .bi img{box-shadow:0 0 0 2px #3E8E4E,0 0 8px rgba(62,142,78,.55);border-radius:4px}
.bx-b .bq.early .bi img{box-shadow:0 0 0 2px var(--c-B8902A);border-radius:4px}
.bx-b .bq.missed .bi img{filter:grayscale(1) brightness(.55);opacity:.8;outline:2px dashed #C0473B;outline-offset:1px;border-radius:4px}
em.bt{align-self:center;width:max-content;display:block;font-style:normal;font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1;margin-top:3px;padding:1px 3px;border-radius:3px}
em.bt.used{color:#2F6E3B;background:#DDEFE0}
em.bt.early{color:var(--c-7A5C10);background:var(--c-F3E7C2)}
em.bt.missed{color:#fff;background:#C0473B}
.bx-key em.bt{display:inline-block;margin:0 4px 0 0}
/* D: thick bar under each icon */
.bx-d .bq{padding-bottom:7px}
.bx-d .bq::after{content:"";position:absolute;left:2px;right:2px;bottom:0;height:5px;border-radius:3px}
.bx-d .bq.used::after{background:#3E8E4E}
.bx-d .bq.early::after{background:var(--c-D2A332)}
.bx-d .bq.missed::after{background:#C0473B}
.bx-d .bq.missed .bi img{filter:grayscale(1);opacity:.5}
.bx-d em.bt{display:none}
i.bdk{display:inline-block;width:18px;height:5px;border-radius:3px;margin-right:5px;vertical-align:2px}
i.bdk.used{background:#3E8E4E}
i.bdk.early{background:var(--c-D2A332)}
i.bdk.missed{background:#C0473B}
/* C: grouped */
.bx-c{display:flex;flex-wrap:wrap;gap:.35rem .8rem}
.bg{display:flex;flex-direction:column;gap:2px}
.bg-l,b.bgk{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.bg.used .bg-l,b.bgk.used{color:#2F6E3B}
.bg.early .bg-l,b.bgk.early{color:var(--c-8A6A12)}
.bg.missed .bg-l,b.bgk.missed{color:#C0473B}
.bg.cd .bg-l,b.bgk.cd{color:var(--muted)}
.bg-i{display:flex;gap:3px}
.bx-c .bi{box-shadow:none!important;background:none!important}
.bg.missed .bg-i{padding:2px;border:2px dashed #C0473B;border-radius:6px}
.bg.missed .bi img{filter:grayscale(.6)}
b.bgk{margin:0 .2rem}
/* E: timeline */
.bx-e{display:grid;gap:.3rem}
.be-tr{position:relative;border-bottom:1px solid var(--line);margin:0 12px}
.be-l{position:relative;height:24px}
.be-w{position:absolute;top:0;bottom:0;z-index:0;background:color-mix(in srgb,#3E8E4E 16%,transparent);border-left:2px solid #3E8E4E;border-right:2px solid #3E8E4E}
.be-m{position:absolute;top:1px;transform:translateX(-50%);z-index:1}
.be-ax{position:relative;height:12px;margin:0 12px;font-size:.6rem;color:var(--muted)}
.be-ax span{position:absolute;top:0;white-space:nowrap}
.be-m .bi{padding:1px}
.be-m .bi img{width:20px;height:20px}
.be-m.used .bi{box-shadow:inset 0 0 0 2px #3E8E4E!important}
.be-m.early .bi{box-shadow:inset 0 0 0 2px var(--c-D2A332)!important}
.be-p{display:flex;align-items:center;gap:3px;font-size:.62rem;font-weight:800;text-transform:uppercase;color:#C0473B}
.be-p span{margin-right:3px}
.be-p .bi{box-shadow:inset 0 0 0 2px #C0473B!important;background:none!important}
.be-p .bi img{filter:grayscale(.7)}
i.bek{display:inline-block;width:18px;height:10px;background:color-mix(in srgb,#3E8E4E 16%,transparent);border-left:2px solid #3E8E4E;border-right:2px solid #3E8E4E;margin-right:5px;vertical-align:-1px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) em.bt.used{color:#9FD8A8;background:#1F3A25}
  :root:not([data-theme="light"]) em.bt.early{color:var(--c-E8C873);background:var(--c-3A3120)}
  :root:not([data-theme="light"]) .bg.used .bg-l,:root:not([data-theme="light"]) b.bgk.used{color:#8FD49A}
  :root:not([data-theme="light"]) .bg.early .bg-l,:root:not([data-theme="light"]) b.bgk.early{color:var(--c-E2B64E)}
}
:root[data-theme="dark"] em.bt.used{color:#9FD8A8;background:#1F3A25}
:root[data-theme="dark"] em.bt.early{color:var(--c-E8C873);background:var(--c-3A3120)}
/* What ended each pull: one-line fix on each closed cause (PREV mockups a-e) */
.pv{display:block;margin:.35rem 0 0 3.3rem;font-size:.86rem;font-weight:500;line-height:1.4}
.pv-a{color:var(--muted)}
.pv-a>span{font-weight:700;color:var(--ink)}
.pv-b b{display:inline-block;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:999px;padding:.05rem .45rem;margin-right:.45rem;vertical-align:.08rem}
.pv-c b{display:inline-block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#1F4E8C;background:#DCE7F7;border-radius:4px;padding:.08rem .4rem;margin-right:.45rem;vertical-align:.06rem}
.pv-d{display:flex;gap:.45rem;align-items:flex-start;margin:.5rem -3rem -.55rem -.7rem;padding:.45rem 3rem .45rem 4rem;background:color-mix(in srgb,var(--gold) 12%,transparent);border-top:1px solid color-mix(in srgb,var(--gold) 30%,transparent);border-radius:0 0 10px 10px}
.pv-d i{font-style:normal;color:var(--gold);font-weight:800}
details.wc-item[open]>summary .pv-d{border-radius:0}
.pv-e{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.pv-q{font-style:italic;color:var(--ink);border-left:3px solid var(--gold);padding-left:.55rem}
.pv-cp{font:inherit;font-size:.7rem;font-weight:700;color:var(--gold);background:none;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:999px;padding:.08rem .55rem;cursor:pointer}
.pv-cp:hover{background:color-mix(in srgb,var(--gold) 14%,transparent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pv-c b{color:#9EC3F5;background:#1E3354}
}
:root[data-theme="dark"] .pv-c b{color:#9EC3F5;background:#1E3354}
@media (max-width:600px){
  .pv{margin-left:0}
  .pv-d{padding-left:.7rem;margin-left:-.7rem}
}
/* Play-by-play: what caused the wipe (DEATHS h) */
ol.pb li.pb-root::before{background:#7A5BB0}
ol.pb li.pb-root .pb-x b:first-child{color:#5B3A8C}
.pb-cd{display:block;margin-top:.25rem;font-size:.84rem;color:var(--muted)}
.pb-cd .bi{vertical-align:middle;margin-left:.15rem}
.pb-cd.lost{margin-top:.1rem}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) ol.pb li.pb-root .pb-x b:first-child{color:#C9B2F0}
}
:root[data-theme="dark"] ol.pb li.pb-root .pb-x b:first-child{color:#C9B2F0}
.pb-left{display:inline-block;margin-left:.35rem;font-size:.72rem;font-weight:700;color:var(--muted);background:var(--bg);border-radius:999px;padding:0 .45rem;white-space:nowrap}
ol.pb li.pb-death::before{background:#B9A3A0}
.rl-kind.k-many{background:#E9E0F5;color:#5B3A8C}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rl-kind.k-many{background:#33264A;color:#C9B2F0}
}
:root[data-theme="dark"] .rl-kind.k-many{background:#33264A;color:#C9B2F0}
.dh-ph{display:inline-block;margin-left:.45rem;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.05rem .5rem;vertical-align:.1rem;white-space:nowrap}
/* Team review: player names on the Damage cards open that player's review; the arrow sits in a soft class-colored circle */
a.rl-link{text-decoration:none}
.rl-link .rl-go{display:inline-grid;place-items:center;width:1.25em;height:1.25em;margin-left:.4em;border-radius:50%;font-weight:700;line-height:1;padding-bottom:.08em;vertical-align:.05em;background:color-mix(in srgb,currentColor 14%,transparent);transition:background .15s}
.rl-link:hover .rl-go,.rl-link:focus-visible .rl-go{background:color-mix(in srgb,currentColor 26%,transparent)}
/* Right target in the burn (burn_view.py) */
.bw-h{font-size:.95rem;margin:1rem 0 .4rem;color:var(--ink)}
.bm-tag{font-style:normal;font-size:.72rem;font-weight:700;border-radius:999px;padding:0 .45rem;background:var(--prog-soft);color:var(--prog);white-space:nowrap}
.sb-row{display:grid;grid-template-columns:7.2rem 1fr 2.9rem;gap:.5rem;align-items:center;font-size:.84rem;padding:.06rem .3rem;border-radius:6px}
.sb-strip{display:flex;gap:1px;min-width:0}
i.sb{display:inline-block;flex:1 1 0;height:.75rem;border-radius:2px;background:var(--line);min-width:2px}
i.sb.on{background:var(--gold)}
i.sb.dead{background:repeating-linear-gradient(45deg,var(--line) 0 2px,transparent 2px 4px)}
.bs-key i.sb{flex:none;width:.8rem;margin-right:.3rem;vertical-align:-1px}
.sb-v{text-align:right;color:var(--muted);font-size:.8rem}
.sb-cap{margin:.4rem 0 .3rem}
.dd-list{margin:.4rem 0 .4rem;padding-left:1.1rem;font-size:.9rem}
.burn-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.burn-tiles>div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.5rem .6rem;display:flex;flex-direction:column}
.burn-tiles .tl{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.burn-tiles .tv{font-size:1.35rem;font-weight:700}
.burn-tiles .ts{font-size:.78rem;color:var(--muted)}
@media (max-width:520px){
  .sb-row{grid-template-columns:5.6rem 1fr 2.6rem}
  .burn-tiles{gap:.35rem}
  .burn-tiles>div{padding:.4rem .45rem}
  .burn-tiles .tv{font-size:1.1rem}
  .burn-tiles .tl{font-size:.64rem}
}
.bf-fold>.sb-row,.bf-fold>.why.sb-cap,.bf-fold>.bs-key,.bf-fold>.dd-list{margin-left:.8rem;margin-right:.8rem}
.bf-fold>.bs-key{padding-bottom:.6rem}
.bf-fold>.dd-list{padding-left:1.9rem;margin-left:0}
/* Burn windows: cooldowns and target (burn_view.combo_section) */
.cb-t{border-collapse:collapse;width:100%;font-size:.85rem}
.cb-t th,.cb-t td{border-bottom:1px solid var(--line);padding:.45rem .5rem;text-align:left;vertical-align:top}
.cb-t thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cb-t thead th small,.cb-t tbody th small{display:block;text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}
.cb-t tbody th{min-width:7rem}
.cb-cell{border-left:4px solid var(--line)}
.cb-cell.v-ok{border-left-color:var(--kill)}
.cb-cell.v-missed{border-left-color:#C0503F}
.cb-cell.v-early,.cb-cell.v-late,.cb-cell.v-gaps{border-left-color:var(--gold)}
.cb-raid{font-size:.85rem}
.cb-raid b.ok,.cb-gc b.ok,.bf-fn b.ok,.bw-h b.ok{color:var(--kill)}
.cb-raid b.bad,.cb-gc b.bad,.bf-fn b.bad,.bw-h b.bad{color:#C0503F}
.cb-ic{display:flex;flex-wrap:wrap;gap:.2rem .6rem;margin-bottom:.3rem}
.cb-g{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px}
.cb-g small{flex-basis:100%;font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.cb-g.used small{color:var(--kill)}
.cb-g.early small{color:var(--gold)}
.cb-g.missed small{color:#C0503F}
.cb-g.cd small{color:var(--muted)}
.cb-ic .bi img,.cb-line .bi img,.cb-mk .bi img,.cb-park .bi img{width:22px;height:22px;border-radius:4px}
.bi.missed img{outline:2px dashed #C0503F;outline-offset:1px}
.bi.cd img,.bi.dead img{filter:grayscale(1);opacity:.45}
.bi.early img{outline:2px solid var(--gold);outline-offset:1px}
.cb-first{display:block;font-size:.75rem;color:var(--muted);margin-top:.2rem}
.cb-first.late,.cb-first.gaps{color:var(--prog);font-weight:700}
.cb-na{display:block;font-size:.75rem;color:var(--muted)}
.cb-vp{display:inline-block;font-style:normal;font-size:.68rem;font-weight:700;border-radius:999px;padding:.05rem .45rem;margin-top:.2rem;white-space:nowrap}
.cb-vp.ok{background:var(--kill-soft);color:var(--kill)}
.cb-vp.missed{background:#F6DCD7;color:#A23B2C}
.cb-vp.early,.cb-vp.late,.cb-vp.gaps{background:var(--prog-soft);color:var(--prog)}
.cb-vp.dead{background:var(--line);color:var(--muted)}
i.cbk{display:inline-block;width:.8rem;height:.8rem;border-radius:3px;margin-right:.3rem;vertical-align:-1px}
i.cbk.used{background:var(--kill)}
i.cbk.early{background:var(--gold)}
i.cbk.missed{border:2px dashed #C0503F}
i.cbk.cd{background:var(--line)}
.cb-switch>input{position:absolute;opacity:0;pointer-events:none}
.cb-switch>label{display:inline-block;padding:.35rem .9rem;border:1px solid var(--line);font-weight:700;font-size:.85rem;cursor:pointer;background:var(--panel)}
.cb-switch>label[for=cbv1]{border-radius:999px 0 0 999px}
.cb-switch>label[for=cbv2]{border-radius:0 999px 999px 0;margin-left:-1px}
#cbv1:checked+label,#cbv2:checked+label{background:var(--gold);color:#fff;border-color:var(--gold)}
#cbv1:checked~.tablewrap .cb-only-tg,#cbv1:checked~.cb-keys .cb-only-tg,#cbv2:checked~.tablewrap .cb-only-cd,#cbv2:checked~.cb-keys .cb-only-cd{display:none}
.cb-only-cd.v-missed,.cb-only-tg.v-late,.cb-only-tg.v-gaps{box-shadow:inset 3px 0 0 #C0503F;padding-left:.4rem}
.cb-who{margin:.5rem .8rem;font-size:.88rem}
.cb-line{display:grid;grid-template-columns:7rem auto 1fr 6.5rem;gap:.5rem;align-items:center;padding:.25rem .8rem;border-top:1px solid var(--line);font-size:.84rem}
.cb-line.v-missed,.cb-line.v-late,.cb-line.v-gaps,.cb-line.v-early{background:color-mix(in srgb,var(--prog-soft) 60%,transparent)}
.cb-line .cb-ic{margin:0;flex-wrap:nowrap;gap:2px}
.cb-line .cb-v{text-align:right}
.cb-grid-h,.cb-grow>summary,.cb-grow.raid{display:grid;grid-template-columns:8rem repeat(3,1fr);gap:.4rem;align-items:center;padding:.35rem .6rem}
.cb-grid-h{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.cb-grow{border-top:1px solid var(--line)}
.cb-grow>summary{list-style:none;cursor:pointer}
.cb-grow>summary::-webkit-details-marker{display:none}
.cb-grow>summary small{display:block;color:var(--muted);font-size:.75rem}
.cb-grow.raid{font-size:.8rem;background:var(--panel)}
.cb-det{padding:.4rem .6rem .6rem 8.6rem;border-top:1px dashed var(--line);font-size:.84rem}
.cb-det b{display:block;margin-bottom:.2rem}
.cb-axis{position:relative;height:1rem;margin-left:7.6rem;margin-right:5rem;font-size:.7rem;color:var(--muted)}
.cb-axis span{position:absolute;white-space:nowrap}
.cb-lane{display:grid;grid-template-columns:7rem 1fr 4.6rem;gap:.6rem;align-items:center;min-height:30px;font-size:.84rem;border-top:1px solid var(--line)}
.cb-track{position:relative;height:26px}
.cb-win,i.cb-winkey{position:absolute;top:0;bottom:0;background:var(--gold-soft)}
i.cb-winkey{position:static;display:inline-block;width:.9rem;height:.7rem;margin-right:.3rem;vertical-align:-1px}
.cb-hit{position:absolute;bottom:2px;height:5px;background:var(--gold)}
.cb-mk{position:absolute;top:1px;transform:translateX(-50%)}
.cb-park{display:flex;gap:2px}
@media (max-width:620px){
  .cb-line{grid-template-columns:5.6rem 1fr}
  .cb-line .cb-tg{grid-column:1/-1}
  .cb-line .cb-v{text-align:left}
  .cb-grid-h,.cb-grow>summary,.cb-grow.raid{grid-template-columns:5.8rem repeat(3,1fr);font-size:.75rem}
  .cb-vp{font-size:.6rem;white-space:normal}
  .cb-det{padding-left:.6rem}
  .cb-lane{grid-template-columns:5.4rem 1fr 3rem}
  .cb-axis{margin-left:6rem;margin-right:3.4rem}
}
.cb-eh{display:block!important}
.cb-park{flex-wrap:wrap}
.cb-lane{min-width:0}
.cb-track{overflow:visible;min-width:0}
@media (max-width:620px){
  .cb-park .bi img{width:16px;height:16px}
}
.cb-switch>.cb-panes{margin-top:.6rem}
#cbv1:checked~.cb-panes .cb-pane-tg,#cbv2:checked~.cb-panes .cb-pane-cd{display:none}
.ba-row{display:grid;grid-template-columns:7.2rem 1fr 8.5rem;gap:.5rem;align-items:center;font-size:.86rem;padding:.1rem .3rem;border-radius:6px}
.ba-row.flag{background:var(--prog-soft)}
.ba-track{display:flex;height:.7rem;border-radius:999px;overflow:hidden}
.ba-on{display:block;height:100%;background:var(--gold)}
.ba-off{display:block;height:100%;background:var(--line)}
i.cbk.ba-on{background:var(--gold)}
i.cbk.ba-off{background:var(--line)}
.ba-dead{font-size:.75rem;color:var(--muted)}
.ba-val{text-align:right;white-space:nowrap}
.ba-val small{color:var(--muted);margin-left:.2rem}
.ba-val .bm-tag{display:block;margin-left:auto;width:max-content}
@media (max-width:620px){
  .ba-row{grid-template-columns:5.6rem 1fr 6.2rem;font-size:.8rem}
  .ba-val .bm-tag{font-size:.66rem;padding:0 .35rem}
}
.ba-row.me{background:var(--gold-soft);font-weight:700}
.pb-quip{display:block;color:var(--muted);font-size:.85rem;margin-top:.15rem}
/* A part of an open section that is always shown (no nested panel, no toggle) */
.subsec{margin:1rem 0 0;border-top:1px solid var(--line);padding-top:.7rem}
.subsec>h3{margin:0;font-size:1rem}
.subsec-hint{margin:.1rem 0 0;font-size:.85rem;color:var(--muted)}
.subsec-body{padding-top:.6rem}
/* Team review: the funny line for a boss killed with no wipes */
.rl-fun{display:flex;gap:.6rem;align-items:baseline;margin:-.6rem 0 1.4rem;padding:.75rem 1rem;border-radius:12px;background:color-mix(in srgb,var(--gold) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));font-weight:700;font-size:1.05rem}
.rl-fun span{color:var(--gold)}
/* Phase by phase redesign mockups (phase_view.py) */
.pv-card{border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;background:var(--panel);margin:.4rem 0 .9rem}
.dpsv .pv-card{margin:.9rem 0 0;border:0;border-top:1px solid var(--line);border-radius:0;padding:.8rem 0 0;background:none}
.pv-ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.pv-ch small{display:block;color:var(--muted);font-size:.78rem}
.pv-all{font-size:1rem}
.pv-all.ok,.pv-b.ok em{color:var(--kill)}
.pv-all.close,.pv-b.close em{color:var(--prog)}
.pv-all.behind,.pv-b.behind em{color:#C0503F}
.pv-bars{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px;height:5.5rem;align-items:end}
.pv-card.big .pv-bars{height:7rem}
.pv-100{position:absolute;left:0;right:0;border-top:2px dashed color-mix(in srgb,var(--ink) 35%,transparent);z-index:1;pointer-events:none}
.pv-b{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.pv-b i{display:block;border-radius:6px 6px 0 0;min-height:3px;background:#D9786B}
.pv-b.ok i{background:#7FB069}
.pv-b.close i{background:var(--c-E2B64E)}
.pv-b.none i{background:var(--line)}
.pv-b em{order:2;font-style:normal;font-weight:700;font-size:.95rem;text-align:center;margin-top:.3rem;color:var(--muted)}
.pv-lbl{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px;text-align:center;font-size:.78rem;color:var(--muted)}
.pv-key{font-size:.75rem;color:var(--muted);margin:.4rem 0 0}
.pv-chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:.5rem 0}
.pv-chips-h{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-right:.2rem}
.pv-chip{display:inline-flex;align-items:center;gap:.25rem;border:1px solid var(--line);border-radius:999px;padding:.1rem .5rem .1rem .2rem;font-size:.82rem;background:var(--panel)}
.pv-chip img{width:18px;height:18px;border-radius:50%}
.pv-chip small{color:var(--muted)}
.pv-chip.dead{border-color:var(--line);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.pv-job{background:color-mix(in srgb,#5B8DEF 8%,var(--panel));padding:.55rem .8rem;border-radius:12px;margin:.5rem 0;font-size:.9rem}
.pv-job p{margin:.15rem 0 0}
.pv-tabs>input{position:absolute;opacity:0;pointer-events:none}
.pv-tabs{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px}
.pv-tab{display:flex;flex-direction:column;align-items:center;padding:.4rem .2rem;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.pv-tab-b{display:flex;align-items:flex-end;width:60%;height:3.6rem}
.pv-tab-b i{display:block;width:100%;border-radius:4px 4px 0 0;background:#D9786B;min-height:3px}
.pv-tab.ok .pv-tab-b i{background:#7FB069}
.pv-tab.close .pv-tab-b i{background:var(--c-E2B64E)}
.pv-tab.none .pv-tab-b i{background:var(--line)}
.pv-tab b{font-size:.95rem}
.pv-tab small{color:var(--muted);font-size:.75rem}
.pv-tabs>input:checked+label{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft);background:var(--gold-soft)}
.pv-panels{grid-column:1/-1}
.pv-panel{display:none;border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;background:var(--panel)}
.pv-pcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.7rem}
.pv-pc{border:1px solid var(--line);border-radius:12px;padding:.6rem .7rem;background:var(--panel)}
.pv-num{display:grid;gap:.15rem;margin:.4rem 0}
.pv-nr{display:grid;grid-template-columns:7.5rem 1fr 3rem;gap:.4rem;align-items:center;font-size:.78rem}
.pv-nt{height:.45rem;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:999px;overflow:hidden}
.pv-nt i{display:block;height:100%;background:var(--muted)}
.pv-nr.you .pv-nt i{background:var(--gold)}
.pv-nr.top .pv-nt i{background:var(--ink)}
.pv-nr b{text-align:right}
.pv-sb{display:grid;gap:.5rem}
.pv-sr{border:1px solid var(--line);border-left:4px solid #D9786B;border-radius:10px;padding:.5rem .7rem;background:var(--panel)}
.pv-sr.v-ok{border-left-color:#7FB069}
.pv-sr.v-close{border-left-color:var(--c-E2B64E)}
.pv-sr.v-none{border-left-color:var(--line)}
.pv-sr-h{display:flex;align-items:center;gap:.5rem}
.pv-mini{flex:1;height:.5rem;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:999px;overflow:hidden}
.pv-mini i{display:block;height:100%;background:currentColor}
.pv-sr.v-behind .pv-mini{color:#D9786B}
.pv-sr.v-close .pv-mini{color:var(--c-E2B64E)}
.pv-sr.v-ok .pv-mini{color:#7FB069}
.pv-tl{display:flex;gap:3px;height:3.2rem;margin:.4rem 0 0}
.pv-seg{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:6px;background:#F2C4BD;color:#7A2E24;min-width:2.4rem;overflow:hidden}
.pv-seg.ok{background:#CFE5C3;color:#2F5A1E}
.pv-seg.close{background:var(--c-F3E1B0);color:var(--c-6E5212)}
.pv-seg.none{background:var(--line);color:var(--muted)}
.pv-seg b{font-size:.72rem}
.pv-seg em{font-style:normal;font-weight:700;font-size:.9rem}
.pv-fx{border:1px solid var(--line);border-radius:12px;padding:.5rem .7rem;background:var(--panel);margin:.6rem 0}
.pv-ok{color:var(--kill);font-size:.9rem;margin:.6rem 0}
@media (max-width:520px){
  .pv-nr{grid-template-columns:5.8rem 1fr 2.6rem}
  .pv-tab-b{height:2.8rem}
  .pv-seg b{font-size:.62rem}
  .pv-seg em{font-size:.8rem}
}
/* Phase tab treatments (PHASEB_STYLE): you vs typical and top. Chips readable in both themes. */
.pv-chip.bad{border-color:color-mix(in srgb,#C0503F 55%,transparent);background:color-mix(in srgb,#C0503F 16%,var(--panel));color:var(--ink)}
.pv-chip.warn{border-color:color-mix(in srgb,var(--c-C9952C) 55%,transparent);background:color-mix(in srgb,var(--c-C9952C) 16%,var(--panel));color:var(--ink)}
.pv-chip.dead{color:var(--ink)}
.t-behind{--lv:#C0503F}
.t-close{--lv:var(--c-B8860B)}
.t-ok{--lv:#3E7D22}
.t-none{--lv:var(--muted)}
.pv-tab{gap:.1rem;justify-content:flex-start}
.pv-cap{font-style:normal;font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;text-align:center;line-height:1.2}
.pv-none{font-size:1.5rem;font-weight:700;color:var(--muted);line-height:1.2}
.pv-big{font-size:1.6rem;line-height:1.1;color:var(--lv)}
.pv-sm{font-size:.95rem;color:var(--lv);margin-top:.2rem}
.pv-mid{font-size:1.1rem;color:var(--lv,var(--ink))}
.pv-ring2{display:grid;place-items:center;width:3.8rem;height:3.8rem;border-radius:50%;background:conic-gradient(var(--lv) var(--d),color-mix(in srgb,var(--ink) 10%,transparent) 0)}
.pv-ring2i{display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:50%;background:radial-gradient(var(--panel) 62%,transparent 63%),conic-gradient(var(--lv) var(--d),color-mix(in srgb,var(--ink) 10%,transparent) 0)}
.pv-ring2i b{font-size:.85rem}
.pv-meter2{position:relative;display:block;width:88%;height:.6rem;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);margin:.3rem 0}
.pv-meter2 i{display:block;height:100%;border-radius:999px;background:var(--lv)}
.pv-meter2 u{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1.5px;background:#5B8DEF;border-radius:2px}
.pv-meter2 s{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1.5px;background:var(--ink);border-radius:2px}
.pv-gap{display:flex;flex-direction:column;align-items:center;line-height:1.1;margin:.1rem 0}
.pv-gap b{font-size:1.15rem;color:var(--lv)}
.pv-gap em{font-style:normal;font-size:.62rem;color:var(--muted);text-transform:uppercase}
.pv-dl{position:relative;display:block;width:88%;height:1rem;margin:.25rem 0;background:linear-gradient(var(--line),var(--line)) center/100% 2px no-repeat}
.pv-dl i{position:absolute;top:50%;width:.7rem;height:.7rem;margin:-.35rem 0 0 -.35rem;border-radius:50%}
.pv-dl-t{background:var(--ink)}
.pv-dl-m{background:#5B8DEF}
.pv-dl-y{background:var(--lv);width:.95rem!important;height:.95rem!important;margin:-.475rem 0 0 -.475rem!important;box-shadow:0 0 0 2px var(--panel)}
@media (max-width:520px){
  .pv-big{font-size:1.3rem}
  .pv-ring2{width:3.2rem;height:3.2rem}
  .pv-ring2i{width:2.6rem;height:2.6rem}
  .pv-ring2i b{font-size:.75rem}
  .pv-mid{font-size:.95rem}
  .pv-gap b{font-size:.95rem}
}
/* Phase tab discoverability (PHASEB_DISC) */
.pv-tab{cursor:pointer;transition:transform .12s,box-shadow .12s}
.pv-tab:hover{transform:translateY(-2px);box-shadow:0 3px 10px color-mix(in srgb,var(--ink) 12%,transparent)}
/* a: folder tabs. The open tab joins the panel; the others look raised and clickable, with a small "pick a phase" lead-in. */
.pv-pick{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);margin:.2rem 0 .4rem}
.pv-tabs.d-a{gap:4px;row-gap:0}
.pv-tabs.d-a .pv-tab{border-radius:10px 10px 0 0;border-bottom:0;background:color-mix(in srgb,var(--ink) 4%,var(--panel));margin-top:6px;padding-bottom:.6rem}
.pv-tabs.d-a>input:checked+.pv-tab{margin-top:0;background:var(--panel);border-color:var(--gold);border-width:2px;border-bottom:0;box-shadow:none;position:relative;z-index:2;margin-bottom:-2px}
.pv-tabs.d-a .pv-panel{border:2px solid var(--gold);border-radius:0 0 12px 12px}
/* b: previous / next inside the panel */
.pv-navs{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:.6rem;padding-top:.5rem}
.pv-nav{font-weight:700;color:var(--gold);cursor:pointer;padding:.25rem .6rem;border:1px solid var(--gold);border-radius:999px;font-size:.85rem}
.pv-pos{font-size:.75rem;color:var(--muted)}
.pv-tabs.d-b>input:checked+.pv-tab{border-color:var(--gold);border-width:2px}
.pv-tabs.d-b .pv-panel{border-color:var(--gold)}
/* c: every tab carries a "Details ›" button; the open one reads "Showing ▾" */
.pv-cta{display:block;margin-top:.35rem;font-size:.72rem;font-weight:700}
.pv-cta-off{display:inline-block;border-radius:999px;background:var(--gold);color:#fff}
.pv-cta-on{display:none;color:var(--gold)}
.pv-tabs>input:checked+.pv-tab .pv-cta-off{display:none}
.pv-tabs>input:checked+.pv-tab .pv-cta-on{display:inline}
.pv-tabs.d-c .pv-panel{border-color:var(--gold)}
.pv-cta{white-space:nowrap}
.pv-cta-off{padding:.08rem .45rem;font-size:.68rem}
/* Phase by phase, vertical stack (PHASEV=v, PHASEV_STACK=1..5) */
.pvx{border:1px solid var(--line);border-radius:12px;padding:.6rem .75rem;background:var(--panel);margin:.2rem 0 .6rem}
.pvx-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem}
.pvx-big{font-size:1.6rem;color:var(--gold);line-height:1.1}
.pvx-rate{font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.pvx-sub{flex-basis:100%;font-size:.85rem;color:var(--muted)}
.pvx-sub b{color:var(--lv)}
.pvx-track{position:relative;height:.7rem;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);margin:.55rem 0 .45rem}
.pvx-track i{display:block;height:100%;border-radius:999px;background:var(--lv,var(--gold))}
.pvx-track u{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;border-radius:2px;background:#5B8DEF}
.pvx-track s{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--ink)}
.pvx-legend{display:flex;flex-wrap:wrap;gap:.2rem .9rem;font-size:.8rem;color:var(--muted)}
.pvx-lg b{color:var(--ink)}
.pvx-lg i{display:inline-block;width:.6rem;height:.6rem;border-radius:2px;margin-right:.3rem}
.pvx-lg.you i{background:var(--gold)}
.pvx-lg.mid i{background:#5B8DEF}
.pvx-lg.top i{background:var(--ink)}
.pvx.none .pvx-big{color:var(--muted)}
.pvs-list{display:grid;gap:.5rem;margin:.3rem 0}
.pvs{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.pvs>summary{list-style:none;display:flex;align-items:center;gap:.6rem;padding:.75rem .9rem;cursor:pointer;font-weight:700;font-size:1.02rem}
.pvs>summary::-webkit-details-marker{display:none}
.pvs-dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--lv,var(--line));flex:none}
.pvs-name{flex:1}
.pvs-chev{width:.55rem;height:.55rem;border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(45deg);margin-top:-.25rem;transition:transform .15s}
.pvs[open]>summary .pvs-chev{transform:rotate(-135deg);margin-top:.25rem}
.pvs>summary:hover{background:color-mix(in srgb,var(--gold) 8%,transparent)}
.pvs[open]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.pvs-body{padding:0 .9rem .8rem}
/* 3: stepper. A vertical line through the dots; the open step's body hangs off the line. */
.pvs-l3{gap:0;position:relative}
.pvs-l3:before{content:"";position:absolute;top:1rem;bottom:1rem;width:2px;background:var(--line)}
.pvs3{border:0;background:none;box-shadow:none!important;border-radius:0;overflow:visible}
.pvs3>summary{padding:.6rem .5rem}
.pvs3 .pvs-dot{width:1rem;height:1rem;box-shadow:0 0 0 3px var(--panel);position:relative;z-index:1;margin-left:.08rem}
.pvs3[open]>summary .pvs-name{color:var(--gold)}
.pvs3 .pvs-body{margin-left:2.2rem;padding:0 0 .8rem}
/* 4: big buttons. Each phase is a full-width button; the open one turns gold and its details sit under it. */
.pvs4>summary{background:color-mix(in srgb,var(--ink) 4%,var(--panel));border-radius:12px}
.pvs4[open]>summary{background:var(--gold);color:#fff}
.pvs4[open]>summary .pvs-chev{border-color:#fff}
.pvs4 .pvs-dot{box-shadow:0 0 0 2px var(--panel)}
.pvs4 .pvs-body{padding-top:.7rem}
/* 5: rows sized by how long each phase lasted, so the stack reads like the pull from top to bottom */
.pvs5>summary{min-height:calc(2.4rem + var(--secs) * .012rem);border-left:6px solid var(--lv,var(--line))}
.pvs5 .pvs-dot{display:none}
/* 2: master / detail */
.pvm{display:grid;grid-template-columns:11rem 1fr;gap:.4rem .9rem;align-items:start}
.pvm>input{position:absolute;opacity:0;pointer-events:none}
.pvm-tab{grid-column:1;display:flex;align-items:center;gap:.55rem;padding:.65rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;font-weight:700}
.pvm-tab:hover{border-color:var(--gold)}
.pvm-arrow{margin-left:auto;color:var(--gold);font-weight:700}
.pvm>input:checked+.pvm-tab{background:var(--gold);color:#fff;border-color:var(--gold)}
.pvm>input:checked+.pvm-tab .pvm-arrow{color:#fff}
.pvm-panels{grid-column:2;grid-row:1/span var(--n)}
.pvm-panel{display:none}
.pvm-h{margin:.1rem 0 .4rem;font-size:1.05rem}
.pvm-h small{color:var(--muted);font-weight:400;margin-left:.5rem}
@media (max-width:620px){
  .pvm{grid-template-columns:1fr;gap:.35rem}
  .pvm-tab{grid-column:1}
  .pvm-panels{grid-column:1;grid-row:auto;margin-top:.4rem}
}
.pvx-track i.you{background:var(--gold)}
.pvs-legend{display:flex;flex-wrap:wrap;gap:.2rem 1rem;font-size:.78rem;color:var(--muted);margin:.5rem 0 0}
.pvs-legend i{display:inline-block;width:.65rem;height:.65rem;border-radius:50%;margin-right:.35rem;vertical-align:-1px;background:var(--lv)}
.pvs-list .t-close,.pvs-legend .t-close,.pvx-sub .t-close{--lv:#D9822B}
.pvx-sub b.t-close{color:#D9822B}
.pvs-l3:before{left:calc(.5rem + .08rem + .5rem - 1px)}
/* Combining the DPS card and the phase bars (PHASEV_COMBO) */
.dv-pd{position:absolute;top:50%;width:1rem;height:1rem;margin:-.5rem 0 0 -.5rem;border-radius:50%;background:var(--lv);box-shadow:0 0 0 2px var(--panel);z-index:2;text-decoration:none}
.dv-pd span{position:absolute;top:1.15rem;left:50%;transform:translateX(-50%);font-size:.66rem;font-weight:700;color:var(--ink);white-space:nowrap}
.dv-pd.t-close{--lv:#D9822B}
.dv-pd:hover{transform:scale(1.15)}
.dv-pd-key{font-size:.75rem;color:var(--muted);margin:.1rem 0 .4rem}
.pvx-line{font-size:.92rem;margin:.1rem 0 .55rem}
.pvx-line b.t-close{color:#D9822B}
.pvx-line b.t-behind{color:#C0503F}
.pvx-line b.t-ok{color:var(--kill)}
.pvs-num{margin-left:auto;font-size:.85rem;font-weight:600;color:var(--muted)}
.pvs-num b.t-close{color:#D9822B}
.pvs-num b.t-behind{color:#C0503F}
.pvs-num b.t-ok{color:var(--kill)}
.pvs-num+.pvs-chev{margin-left:.6rem}
.pvs-whole .pvs-wh{display:flex;align-items:center;gap:.6rem;padding:.6rem .5rem;font-weight:700;font-size:1.02rem}
.pvs-whole .pvs-dot{width:1rem;height:1rem;background:var(--gold);box-shadow:0 0 0 3px var(--panel);position:relative;z-index:1;margin-left:.08rem}
.pvs-whole .pvs-body{margin-left:2.2rem}
.pvs-whole .dpsv{margin:0}
.dv-pd.up span{top:auto;bottom:1.15rem}
.dv-track.has-pd{margin-top:1.4rem}
.dv-pd.r2 span{top:2.1rem}
.dv-track.has-pd{margin-bottom:2.3rem}
/* Phase by phase: simpler open/close (mockups PHASEV_ARROW=1..5). No per-phase chevrons in any of them. */
[class*="pva-"] .pvs-chev{display:none}
[class*="pva-"] .pvs>summary{border-radius:10px}
/* 1 plain rows: the open phase turns gold, the others stay plain; a tint on hover */
.pva-1 .pvs3:not([open])>summary .pvs-name{font-weight:600}
.pva-1 .pvs3[open]>summary .pvs-name{color:var(--gold)}
/* 2 number pills: the number sits in a soft pill tinted by the result; the open one fills */
.pva-2 .pvs-num{padding:.15rem .6rem;border-radius:999px;background:color-mix(in srgb,var(--lv,var(--line)) 16%,transparent);border:1px solid color-mix(in srgb,var(--lv,var(--line)) 45%,transparent);color:var(--ink)}
.pva-2 .pvs[open] .pvs-num{background:var(--lv);border-color:var(--lv);color:#fff}
.pva-2 .pvs[open] .pvs-num b{color:#fff}
/* 3 dot is the state: hollow ring when closed, filled when open */
.pva-3 .pvs3:not([open]):not(.pvs-whole) .pvs-dot{background:var(--panel);box-shadow:inset 0 0 0 3px var(--lv,var(--line)),0 0 0 3px var(--panel)}
.pva-3 .pvs3[open] .pvs-dot{transform:scale(1.25)}
.pva-3 .pvs3:not([open])>summary .pvs-name{color:var(--muted);font-weight:600}
/* 4 rows with dividers; the open phase lifts into a gold-edged card */
.pva-4 .pvs3>summary{border-bottom:1px solid var(--line);border-radius:0}
.pva-4 .pvs3[open]{background:color-mix(in srgb,var(--gold) 7%,transparent);border-radius:12px;box-shadow:inset 3px 0 0 var(--gold)!important}
.pva-4 .pvs3[open]>summary{border-bottom:0}
/* 5 progress line: the timeline turns gold from the whole pull down to the open phase */
.pva-5.pvs-l3:before{display:none}
.pva-5>.pvs3,.pva-5>.pvs-whole{position:relative}
.pva-5>.pvs3:before,.pva-5>.pvs-whole:before{content:"";position:absolute;left:calc(.5rem + .08rem + .5rem - 1px);top:1.1rem;bottom:-1.1rem;width:2px;background:var(--line)}
.pva-5>.pvs3:last-child:before{display:none}
.pva-5>.pvs-whole:has(~.pvs[open]):before,.pva-5>.pvs3:has(~.pvs[open]):before{background:var(--gold);width:3px}
.pva-5 .pvs3:has(~.pvs[open]) .pvs-dot{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--gold)}
.pva-5 .pvs3[open] .pvs-dot{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--gold)}
/* Phase timeline on phones: a narrower indent and a tidier DPS card in the Whole pull stop */
@media (max-width:520px){
  .pvs-l3 .pvs-body{margin-left:1.9rem}
  .pvs-whole .dpsv{padding:.7rem .75rem .8rem}
  .pvs-whole .dv-h{gap:.25rem .4rem}
  .pvs-whole .dv-legend{flex-direction:column;gap:.3rem}
}
/* Whole pull sits above the phase timeline, off the line */
.pvs-whole{margin-bottom:.9rem}
.pvs-whole.w-b .pvs-body,.pvs-whole.w-c .pvs-body{margin-left:0}
.pvs-cap{font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:.2rem 0 .45rem}
.pvs-whole.w-c+.pvs-cap,.pvs-whole.w-b+.pvs-cap{margin-top:1.1rem}
@media (max-width:520px){
  .pvs-whole.w-b .pvs-body,.pvs-whole.w-c .pvs-body{margin-left:0}
}
/* Fight page top: the summary is a raised card that leads; the tab switch is a small pill that scrolls with the page;
   the tab content sits on the page without a box. The gap above the switch is about twice the gap below it. */
.tldr.tl-raised{background:color-mix(in srgb,var(--ink) 6%,var(--panel));border-color:color-mix(in srgb,var(--ink) 18%,transparent);box-shadow:0 10px 30px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25);padding:1.5rem 1.7rem 1.1rem}
.tldr.tl-raised .tl-work .tl-h{flex-direction:column;align-items:flex-start;margin-bottom:.5rem}
.tldr.tl-raised .tl-work .tl-h::before{content:"Start here";display:block;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin-bottom:.1rem}
.tldr.tl-raised .tl-work .tl-h h2{font-size:1.6rem}
.tldr.tl-raised .tl-work .tl-n{background:var(--gold);color:var(--panel)}
.tldr.tl-raised .tl-work .tl-it{padding-block:.65rem}
/* What to work on rows: the hover tint runs to the card's edges (Christiaan, Oct 20). --tl-px is the card's side padding */
.tldr{--tl-px:1.1rem}
.tldr.tl-raised{--tl-px:1.7rem}
.tldr .tl-work .tl-it{margin-inline:calc(-1 * var(--tl-px));padding-inline:calc(var(--tl-px) + .1rem);border-radius:0}
.tldr.tl-raised .tl-wins{margin-top:.6rem;padding-top:.9rem}
.ftabwrap.ft-pill{margin-top:2.75rem}
.ftabwrap.ft-pill .ftabs{position:static;display:inline-grid;width:auto;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px;gap:3px;margin:0}
.ftabwrap.ft-pill .ftabs button{border:0!important;border-radius:999px;font-size:.72rem;padding:.4rem 1rem}
.ftabwrap.ft-pill .ftabs button[aria-selected="true"]{background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)}
.ftabwrap.ft-pill .fpanels{background:transparent;border:0;border-radius:0;padding:1rem .2rem 1.25rem}
@media (max-width:520px){
  .tldr.tl-raised{padding:1.2rem 1.1rem .9rem;--tl-px:1.1rem}
  .tldr.tl-raised .tl-work .tl-h h2{font-size:1.35rem}
  .ftabwrap.ft-pill{margin-top:2.25rem}
  .ftabwrap.ft-pill .ftabs{display:grid;width:100%}
  .ft-long{display:none}
}
/* Phase by phase gap cards (tools/phase_gaps.py) */
:root{--gx-target:#B3362B;--gx-button:#C9852A;--gx-cd:#9C7A1C;--gx-time:#7B3FA0;--gx-unclear:var(--c-8A8FA3);--gx-ok:#3E7D22;--gx-stripe:var(--c-D9DCE6)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--gx-target:#F08A80;--gx-button:#F0B060;--gx-cd:#E5CC80;--gx-time:#C9A2F0;--gx-unclear:var(--c-A3A9BF);--gx-ok:#8FD45E;--gx-stripe:var(--c-2E3650)}
}
:root[data-theme="dark"]{--gx-target:#F08A80;--gx-button:#F0B060;--gx-cd:#E5CC80;--gx-time:#C9A2F0;--gx-unclear:var(--c-A3A9BF);--gx-ok:#8FD45E;--gx-stripe:var(--c-2E3650)}
.gb{margin:.1rem 0 .7rem}
.gb-track{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--gx-stripe)}
.gb-track i{display:block;height:100%}
.gb-target{background:var(--gx-target)}
.gb-button{background:var(--gx-button)}
.gb-cd{background:var(--gx-cd)}
.gb-unclear{background:var(--gx-unclear)}
.gb-time{background:var(--gx-time)}
.gb-spread{background:repeating-linear-gradient(45deg,var(--gx-stripe) 0 4px,color-mix(in srgb,var(--muted) 22%,var(--gx-stripe)) 4px 8px)}
.gxl{list-style:none;margin:0 0 .8rem;padding:0;display:grid;gap:.5rem}
/* Soft tint (Oct 15): no colored edges; each card is a light wash of its kind's color, the tag in that color */
.gx{--k:var(--gx-unclear);border:0;border-radius:12px;padding:.6rem .8rem;background:color-mix(in srgb,var(--k) 9%,var(--panel))}
.gx-target{--k:var(--gx-target)}
.gx-button{--k:var(--gx-button)}
.gx-cd{--k:var(--gx-cd)}
.gx-time{--k:var(--gx-time)}
.gx-ok{--k:var(--gx-ok)}
.gx-unclear{background:color-mix(in srgb,var(--k) 7%,var(--panel))}
.gx-top{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:.15rem}
.gx-tag{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--k)}
.gx-worth{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.gx-head{margin:0 0 .2rem;font-weight:600;line-height:1.35}
.gx-ok .gx-head{margin:0}
.gx-why{margin:0;font-size:.9rem;color:var(--muted);line-height:1.45}
.gx-src{font-size:.78rem;white-space:nowrap}
.gx-src:before{content:"· "}
.gx-unclear .gx-head{color:var(--muted)}
.gx-data{background:color-mix(in srgb,var(--k) 7%,var(--panel))}
.gx-data .gx-head{color:var(--muted)}
.pvs-whole .gxl{margin:.8rem 0 0}
/* Beta banner for a review that's still filling in (boss file "beta") */
.beta-note{margin:.6rem 0 1rem;padding:.6rem .85rem;border-radius:12px;background:color-mix(in srgb,#C9852A 14%,var(--panel));color:var(--ink);font-size:.92rem;line-height:1.45}
.beta-note b{display:inline-block;margin-right:.45rem;padding:.05rem .5rem;border-radius:999px;background:#C9852A;color:#fff;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;vertical-align:.08em}
/* Team review Damage: By phase / Overall switch, the same pill as the fight pages' tab switch */
.dsw{margin-top:.9rem}
.dsw>input{position:absolute;opacity:0;pointer-events:none}
/* Pill switch (team review Damage and Burst), the same pill as the fight pages' tab switch */
.sw-pill{display:inline-grid;grid-template-columns:repeat(2,auto);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px;gap:3px}
.sw-pill>label{cursor:pointer;border-radius:999px;text-align:center;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:.4rem 1rem}
.sw-pill>label:hover{color:var(--ink)}
#dsw1:checked~.sw-pill>label[for=dsw1],#dsw2:checked~.sw-pill>label[for=dsw2],#cbv1:checked~.sw-pill>label[for=cbv1],#cbv2:checked~.sw-pill>label[for=cbv2]{background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)}
#dsw1:focus-visible~.sw-pill>label[for=dsw1],#dsw2:focus-visible~.sw-pill>label[for=dsw2],#cbv1:focus-visible~.sw-pill>label[for=cbv1],#cbv2:focus-visible~.sw-pill>label[for=cbv2]{outline:2px solid var(--gold);outline-offset:1px}
.cb-switch.cb-pill{margin-top:.9rem}
.cb-switch.cb-pill>.cb-panes{margin-top:0;padding-top:1rem}
.dsw-panes{padding:1rem 0 0}
.dsw-panes>.dsw-p2{display:none}
#dsw2:checked~.dsw-panes>.dsw-p1{display:none}
#dsw2:checked~.dsw-panes>.dsw-p2{display:block}
.dsw-panes>div>.why:first-child{margin-top:0}
.dsw-chart .rc-row{grid-template-columns:1.4rem minmax(0,9rem) 1fr 3.4rem}
.dsw-chart .rc-val{text-align:right}
.dsw-rank{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.dsw-chart .rc-track{position:relative;overflow:visible}
.dsw-chart .rc-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsw-med{position:absolute;top:-.2rem;bottom:-.2rem;width:2px;margin-left:-1px;background:var(--ink);opacity:.7;border-radius:2px}
@media (max-width:760px){
  .dsw-chart .rc-row{grid-template-columns:1.2rem minmax(0,6.5rem) 1fr 2.8rem;gap:.45rem}
}
@media (max-width:520px){
  .sw-pill{display:grid;width:100%;box-sizing:border-box;grid-template-columns:1fr 1fr}
}
/* Role switch: a raider who healed some pulls of a boss and tanked others gets a page per role (build_player.role_toggle) */
.rtog{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;margin:.9rem 0 .2rem;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--panel);max-width:100%}
.rtog-o{display:block;padding:.38rem .95rem;border-radius:999px;font-size:.84rem;font-weight:700;line-height:1.25;text-align:center;white-space:nowrap;color:var(--muted);text-decoration:none}
.rtog a.rtog-o:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.rtog-o[aria-current="page"]{background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)}
@media (max-width:520px){
  .rtog{display:grid;width:100%}
  .rtog-o{padding:.4rem .5rem;font-size:.8rem;white-space:normal}
}
/* Damage by phase: grid follows the boss's phase count; phases not reached yet are an empty dashed slot */
.dg-avg[style*="--n"],.dg-nums[style*="--n"],.dg-lbl[style*="--n"]{grid-template-columns:repeat(var(--n),1fr)}
.dg-b.nr i{height:100%;background:transparent;border:1.5px dashed var(--line);border-radius:4px}
.dg-n.nr{font-weight:600;font-size:.72rem}
.pv-b.nr i{height:100%;background:transparent;border:1.5px dashed var(--line);border-radius:6px}
.pv-b.nr em{font-size:.75rem;font-weight:600}
.pvx.nr .pvx-sub{color:var(--muted)}
.pvs-num.pvs-nr{color:var(--muted);font-weight:600;font-size:.85rem}
.pvs.nr .pvs-dot{background:transparent;border:1.5px dashed var(--line)}
.pg-c.nr{background:transparent;border:1.5px dashed var(--line);box-sizing:border-box}
.pg-sh.nr i{background:transparent;border:1.5px dashed var(--line)}
.pg-sh.nr{color:var(--muted)}
.pg-e .pg-grid{grid-template-columns:4.2rem var(--pgc,repeat(4,minmax(0,1fr))) 5.2rem}
/* Team review: Raiders button under the site bar, right edge in line with Sign in; opens every raider's review by role */
.nm-fab{position:fixed;z-index:70;top:calc(var(--sn-h,56px) + 8px);right:max(16px,calc((100% - 56rem)/2 + 16px));display:flex;gap:.45rem;align-items:center;padding:.45rem .85rem;border-radius:999px;font-weight:800;font-size:.9rem;cursor:pointer;color:var(--ink);background:color-mix(in srgb,var(--ink) 9%,var(--bg));backdrop-filter:blur(6px)}
.nm-fab:hover{background:color-mix(in srgb,var(--ink) 14%,var(--bg))}
.nm-fab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nm-fab svg{width:1rem;height:1rem}
.nm-sheet{position:fixed;inset:0;z-index:80;display:none;background:color-mix(in srgb,var(--c-0A0E1E) 25%,transparent)}
.nm-t:checked~.nm-sheet{display:block}
.nm-bg{position:absolute;inset:0;cursor:default}
.nm-panel{position:absolute;top:calc(var(--sn-h,56px) + 52px);right:max(16px,calc((100% - 56rem)/2 + 16px));width:min(24rem,calc(100% - 32px));max-height:calc(100vh - var(--sn-h,56px) - 68px);overflow:auto;box-sizing:border-box;background:var(--bg);border-radius:16px;padding:1rem;box-shadow:0 8px 28px rgba(0,0,0,.22)}
.nm-ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.nm-ph b{font-size:1.05rem}
.nm-x{font-size:1.4rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 .2rem}
.nm-tag{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:.6rem 0 .3rem}
.nm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.nm-card{border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.nm-card>a{display:block;padding:.5rem .6rem;text-decoration:none}
.nm-card:hover{border-color:color-mix(in srgb,var(--cc,var(--ink)) 45%,var(--line))}
.nm-name{display:block;font-weight:700;color:var(--cc,var(--ink))}
.nm-sub{display:block;color:var(--muted);font-size:.78rem}
.nm-card.nm-me{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--panel));box-shadow:0 0 0 1px var(--gold) inset}
.nm-card.nm-me>a{position:relative}
.nm-you{position:absolute;bottom:.55rem;right:.5rem;padding:.05rem .45rem;border-radius:999px;background:var(--gold);color:var(--bg);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.nm-card.nm-me .nm-sub{padding-right:2.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm-alt{display:block;padding:0 .6rem .45rem;font-size:.75rem;font-weight:700;color:var(--muted)}
@media (max-width:520px){
  .rl-stick small{display:none}
}
/* Talents (mockups Oct 16, TALENT_SWAP=a|b|c): quiet boss-specific picks */
.ts-quiet{margin-top:1rem;font-size:.82rem;color:var(--muted)}
.ts-quiet .ab{color:inherit;text-decoration:none;white-space:normal;gap:.3rem}
.ts-quiet .ic{width:15px;height:15px;opacity:.85}
.ts-lab{margin:0 0 .3rem;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ts-n{color:var(--muted);font-variant-numeric:tabular-nums}
.ts-yes{color:color-mix(in srgb,var(--kill) 70%,var(--muted));font-weight:700;margin-left:.3rem}
.ts-either{margin:.55rem 0 0;line-height:1.6}
.ts-either .ab{display:inline;white-space:nowrap}
.ts-quiet p .ab .ic,.ts-quiet li .ab .ic{width:15px;height:15px;margin-right:.25rem;vertical-align:-3px}
.ts-either .ts-yes{margin-left:.15rem}
.ts-a ul{list-style:none;margin:0;padding:0}
.ts-a li{padding:.12rem 0}
.ts-a li .ab{display:inline}
.ts-a li>.ts-n{display:block;padding-left:1.3rem;font-size:.78rem}
.ts-b summary{cursor:pointer;list-style:none;color:var(--muted)}
.ts-b summary::-webkit-details-marker{display:none}
.ts-b[open] summary span{display:inline-block;transform:rotate(90deg)}
.ts-t{margin-top:.4rem;font-size:.82rem;width:auto;max-width:100%}
.ts-t th,.ts-t td{border:0;padding:.15rem .9rem .15rem 0;color:var(--muted)}
.ts-t th{font-size:.68rem}
.ts-t td.n,.ts-t th.n{text-align:right}
.ts-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.ts-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.05rem .5rem .05rem .3rem;border-radius:999px;background:color-mix(in srgb,var(--muted) 12%,transparent)}
.ts-chip .ts-yes{margin-left:.1rem}
/* Tip boxes (Oct 19, Christiaan's pick): no left bar. A soft tint, a thin border and a line icon in a circle on the left.
   Blue = tip or info (light bulb), yellow = worth checking (triangle), red = something to fix (stop sign), green = done well (check).
   Also .good ("Your build matches") and the phase fix rows (.phx-fix li), which had their own green and grey bars until Oct 20.
   Any element with one of these classes gets the look from CSS alone; new text uses class="tipbox tb-<color>". See PLAYBOOK "Tip boxes". */
.advice,.fnote,.o-none,.gb-cap,.burn-all,.patterns li,.phx-fix li,.tipbox,p.good{--tb:var(--work);position:relative;display:block;border:1px solid color-mix(in srgb,var(--tb) 28%,transparent);border-left-width:1px;background:color-mix(in srgb,var(--tb) 9%,var(--panel));color:var(--muted);border-radius:12px;padding:.75rem 1rem .75rem 3.55rem;min-height:2.6rem;font-size:.85rem;line-height:1.45;margin:.6rem 0 1rem}
.advice::before,.fnote::before,.o-none::before,.gb-cap::before,.burn-all::before,.patterns li::before,.phx-fix li::before,.tipbox::before,p.good::before{content:"";position:absolute;left:.75rem;top:calc(50% - 1.05rem);width:2.1rem;height:2.1rem;border-radius:50%;background:color-mix(in srgb,var(--tb) 16%,transparent)}
.advice::after,.fnote::after,.o-none::after,.gb-cap::after,.burn-all::after,.patterns li::after,.phx-fix li::after,.tipbox::after,p.good::after{content:"";position:absolute;left:calc(.75rem + .45rem);top:calc(calc(50% - 1.05rem) + .45rem);width:1.2rem;height:1.2rem;background:var(--tb);-webkit-mask:var(--tbi) center/contain no-repeat;mask:var(--tbi) center/contain no-repeat}
.advice,.fnote,.gb-cap,.burn-all,.patterns li.pt-trend,.phx-fix li:not(.pt-good):not(.pt-bad),.tb-blue{--tb:var(--work);--tbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2V16h5v-.1c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.burn-all.tb-yellow,.tb-yellow{--tb:var(--prog);--tbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.patterns li.pt-bad,.phx-fix li.pt-bad,.patterns li.pt-trend.pt-bad,.tb-red{--tb:var(--bad);--tbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 2h8.2L22 7.9v8.2L16.1 22H7.9L2 16.1V7.9z'/%3E%3Cpath d='M12 8v5M12 16.5h.01'/%3E%3C/svg%3E")}
.o-none,p.good,.patterns li.pt-good,.phx-fix li.pt-good,.patterns li.pt-trend.pt-good,.burn-all.tb-green,.tb-green{--tb:var(--kill);--tbi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m7.5 12.3 3 3 6-6.3'/%3E%3C/svg%3E")}
/* list rows inside the "patterns across pulls" panel: same look, smaller */
.patterns li,.phx-fix li{margin:0;padding:.45rem .7rem .45rem 2.6rem;min-height:2.1rem;font-size:.85rem;border-radius:9px}
.patterns li::before,.phx-fix li::before{left:.5rem;top:calc(50% - .775rem);width:1.55rem;height:1.55rem}
.patterns li::after,.phx-fix li::after{left:calc(.5rem + .325rem);top:calc(calc(50% - .775rem) + .325rem);width:.9rem;height:.9rem}
.gb-cap{font-size:.85rem;margin:0 0 .4rem}
body .fnote{font-size:.85rem}
/* pages built before Oct 19 set .88rem inline */
.gb-cap b{color:var(--ink)}
@media (max-width:480px){
  .advice,.fnote,.o-none,.gb-cap,.burn-all,.patterns li,.phx-fix li,.tipbox,p.good{padding-left:3.1rem}
  .advice::before,.fnote::before,.o-none::before,.gb-cap::before,.burn-all::before,.tipbox::before,p.good::before{left:.6rem;top:calc(50% - .925rem);width:1.85rem;height:1.85rem}
  .advice::after,.fnote::after,.o-none::after,.gb-cap::after,.burn-all::after,.tipbox::after,p.good::after{left:calc(.6rem + .375rem);top:calc(calc(50% - .925rem) + .375rem);width:1.1rem;height:1.1rem}
}
/* The spacing pass lives in spacing.css, linked last so it comes after every page's own components. */
/* Summary Why: flow boxes and dominoes (layout patterns, Oct 19) */
.wflow{display:flex;flex-wrap:wrap;align-items:stretch;gap:.4rem;margin:.1rem 0 .6rem}
.wflow>div{flex:1 1 8rem;border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem;font-size:.9rem;line-height:1.35}
.wflow>div.rc{border-color:var(--gold);background:var(--gold-soft)}
.wflow>div.bad{border-color:var(--bad);background:var(--bad-soft)}
.wflow>i{align-self:center;font-style:normal;color:var(--muted)}
.wft{display:block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.wflow .rc .wft{color:var(--gold)}
.wflow .bad .wft{color:var(--bad)}
.wcap{margin:.1rem 0 .5rem;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.wdoms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;margin-bottom:.6rem}
.wdom{position:relative;display:flex;flex-direction:column;gap:.15rem;border:1px solid var(--line);border-radius:10px;padding:.55rem .6rem;background:color-mix(in srgb,var(--bad) 7%,transparent)}
.wdom+.wdom::before{content:"→";position:absolute;left:-1rem;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700}
.wdom.end{border-color:var(--bad);background:var(--bad-soft)}
.wdk{font-size:.78rem;color:var(--muted);line-height:1.25;min-height:2em}
.wdv{font-family:var(--fh);font-size:1.7rem;line-height:1;color:var(--bad);font-weight:var(--fhw);letter-spacing:var(--fhls);font-size-adjust:none}
.wds{font-size:.82rem;font-weight:700}
.wds span{font-weight:400;color:var(--muted)}
.see-pill{display:inline-flex;align-items:center;font-size:.86rem;font-weight:700;color:var(--gold);text-decoration:none;margin-left:.5rem;padding:.32rem .85rem;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:999px;vertical-align:middle}
.see-pill:hover{background:color-mix(in srgb,var(--gold) 12%,transparent);border-color:var(--gold)}
.lk .see-pill:first-child{margin-left:0}
@media (max-width:560px){
  .wdoms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wdom:nth-child(3)::before{display:none}
}
/* Stats share bars (pick 5A) and enchant swap rows (pick 6A) */
.sbr{display:grid;grid-template-columns:3rem 1fr;gap:.6rem;align-items:center;margin:.35rem 0}
.sbl{font-size:.85rem;color:var(--muted);font-weight:700}
.sbb{display:flex;height:1.35rem;border-radius:6px;overflow:hidden}
.sbb i{display:grid;place-items:center;font-style:normal;font-size:.72rem;font-weight:700;color:var(--c-0E1220);overflow:hidden;white-space:nowrap}
.sbk{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.4rem 0 .8rem 3.6rem;font-size:.82rem;color:var(--muted)}
.sbk i{display:inline-block;width:.7rem;height:.7rem;border-radius:2px;margin-right:.3rem;vertical-align:-1px}
.sw{display:grid;gap:.1rem}
.swr{display:grid;grid-template-columns:5.5rem minmax(0,1fr) 1.2rem minmax(0,1fr);gap:.6rem;align-items:baseline;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.sws{color:var(--muted);font-size:.85rem}
.swa{color:var(--gold);font-weight:700}
.swy small{display:block;color:var(--muted);font-size:.76rem}
.swt{font-weight:600}
.swt small{display:block;font-weight:400;color:var(--muted);font-size:.76rem}
.swf{margin-top:.55rem}
.swf summary{cursor:pointer;color:var(--muted);font-size:.88rem}
.swf ul{list-style:none;margin:.4rem 0 0;padding:0}
.swf li{font-size:.88rem;padding:.25rem 0}
.swf li span{display:inline-block;width:5.5rem;color:var(--muted)}
@media (max-width:560px){
  .swr{grid-template-columns:minmax(0,1fr) 1.2rem minmax(0,1fr)}
  .sws{grid-column:1/-1}
  .sbk{margin-left:0}
}
/* Layout patterns on review pages (PLAYBOOK, Oct 19; tools/page_patterns.py) */
.drs{display:grid;grid-template-columns:max-content 120px minmax(0,1fr);column-gap:1.2rem;margin-top:.4rem}
.dr{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:start;padding:.75rem 0;border-bottom:1px solid var(--line)}
.dr:first-child{padding-top:.2rem}
.dr:last-child{border-bottom:0}
.dr .dp{display:flex;align-items:center;justify-content:flex-end;min-height:28px;font-weight:700;font-size:.92rem;white-space:nowrap}
.dics{display:grid;grid-template-columns:repeat(5,20px);gap:5px;align-content:start;align-items:center;padding-top:4px}
.dic{width:20px;height:20px;border-radius:5px;box-shadow:0 0 0 1.5px var(--line);background:var(--panel)}
.dic.av{box-shadow:0 0 0 1.5px var(--bad)}
.dic-x{display:grid;place-items:center;font-size:.75rem;color:var(--muted)}
.dw{display:grid;gap:.3rem;font-size:.92rem;line-height:1.45}
.dr .dw>span{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .45rem;min-height:28px;line-height:1.3}
.dr .dw .pill-av,.dr .dw .pill-ph{margin:0}
.dt{color:var(--muted);font-variant-numeric:tabular-nums}
.gtips{display:grid;margin:.4rem 0 .8rem}
.gtips .tipbox{margin:0}
.gtip strong{color:var(--ink)}
.gtip p{margin:.2rem 0 0}
.gxtips{display:grid;margin:.6rem 0 .8rem}
.gxtip{margin:0}
.gxtip .gxt{display:block;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tb);margin-bottom:.15rem}
.gxtip .gxt .info{text-transform:none;letter-spacing:0}
.gxtip strong{display:block;color:var(--ink);font-weight:600;font-size:.92rem;line-height:1.4}
.gxtip p{margin:.25rem 0 0}
.pvs-body .gb{margin-bottom:.6rem}
.pvs-body .gb-cap{margin-bottom:.45rem}
.pvs-body .pv-chips{margin-top:.8rem}
.fold-body>.tipbox{margin:.8rem 0}
summary h3 .info{margin-left:.35rem;vertical-align:2px}
.eg-h{margin:1.3rem 0 .5rem;font-size:.95rem;font-weight:700;font-family:inherit;color:var(--ink)}
.fold-body>.eg-h:first-child{margin-top:.2rem}
.gear-sec details.deep>summary h3{font-family:inherit;font-weight:700;font-size:1.17em;margin:0}
.gear-sec>details.deep:first-of-type{margin-top:12px}
.swf summary:focus:not(:focus-visible){outline:none}
.swr a.ab,.swf a.ab,.dw a.ab{white-space:normal}
.swy,.swt{min-width:0;overflow-wrap:anywhere}
@media (max-width:560px){
  .drs{grid-template-columns:max-content minmax(0,1fr)}
  .dr{row-gap:.5rem}
  .dw{grid-column:1/-1}
}
/* Alignment pass (Oct 19). Ability links in running text sit on the text line: tip box titles (the layout pass turned
   check rows into tip boxes and they lost the li rule) and timeline labels. */
.tipbox .ab,.tl-lab .ab{display:inline;white-space:nowrap;gap:0}
.tipbox .ab .ic,.tl-lab .ab .ic{width:16px;height:16px;vertical-align:-3px;margin-right:.3rem}
/* Burst-window tiles inside a tip box, on the spacing scale: the finding, then 12 to the caption that labels the tiles,
   8 to the tiles. In a tile: 12 padding, name 12 above the numbers, label 4 above its number, number 12 above the pill.
   Labels share one line and numbers share one baseline. */
.gtip .gc-p{margin:0}
.gtip .bc-cap,.gc .bc-cap{margin:12px 0 8px}
.bc-tiles{gap:8px}
.bc-tile{padding:12px;display:flex;flex-direction:column;align-items:flex-start}
.bc-pair{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;justify-content:start;column-gap:24px;row-gap:4px;align-items:baseline;margin:12px 0}
.bc-pair>div{display:contents}
.bc-pair .bc-big,.bc-top{line-height:1}
.gtip .bc-rule,.gc .bc-rule{margin-top:12px}
/* tips in a row read as one set: 4 apart (Spacing, PLAYBOOK), in button checks and Phase by phase cards too */
.gtips,.gxtips{gap:4px}
/* "By phase" label under the whole-pull DPS card starts the timeline: sub-heading spacing (32 above, 8 below; 24 on phones) */
details.deep>.fold-body>.pvs+.pvs-cap{margin-top:32px}
details.deep>.fold-body>.pvs-cap+*{margin-top:8px}
@media (max-width:600px){
  details.deep>.fold-body>.pvs+.pvs-cap{margin-top:24px}
}
/* Scrollbars inside panels (character picker, menus): thin, no track, a soft ink thumb; same as the M+ map dock */
/* ---- Site top bar (was tools/site_nav.py CSS, inline on every page until Oct 20) ---- */
.sn-top{position:sticky;top:0;z-index:40}
/* Page labels that stick while you scroll sit under the bar, not behind it (--sn-h is the bar's height, set by the script) */
html{scroll-padding-top:calc(var(--sn-h,0px) + 3.5rem)}
.boss-sec>.boss-h,.rl-page>.rl-stick{top:var(--sn-h,0px)!important}
.part>.part-h,.rl-page .rl-sec>.rl-kick{top:calc(var(--sn-h,0px) + 2.9125rem + 1px)!important}
.sn{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);font-size:1rem;line-height:1.45}
.sn-in{max-width:var(--sn-w,56rem);margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;gap:.75rem;min-height:3.35rem}
.sn a{text-decoration:none}
.sn-brand{font-family:var(--fh);font-size:1.15rem;color:var(--ink);white-space:nowrap;font-weight:var(--fhw);letter-spacing:var(--fhls);font-size-adjust:none}
.sn-grow{flex:1}
.sn-pick,.sn-acct{position:relative}
.sn-pick>button,.sn-acct>button{display:flex;align-items:center;gap:.45rem;border:1px solid var(--line);background:var(--panel);cursor:pointer;font:inherit;font-weight:700;color:var(--ink)}
.sn-pick>button{border-radius:10px;padding:.25rem .55rem .25rem .25rem;max-width:11rem}
.sn-pick>button .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cc)}
.sn-acct>button{border-radius:999px;padding:.25rem .65rem .25rem .3rem;font-size:.95rem}
.sn-dot{width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;background:#148EFF;color:#fff;font-weight:700;font-size:.85rem}
.sn-tag{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-tag small{color:var(--muted);font-weight:400;font-size:inherit}
.sn-av{width:1.8rem;height:1.8rem;border-radius:7px;display:grid;place-items:center;font-family:var(--fh);color:#fff;background:var(--cc);flex:none;overflow:hidden;font-size:.95rem;font-weight:var(--fhw);letter-spacing:var(--fhls);font-size-adjust:none}
.sn-av img{width:100%;height:100%;object-fit:cover;display:block}
.sn-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:50}
.sn-pick .sn-menu{left:0;right:auto;min-width:19.5rem;max-height:22rem;overflow:auto}
.sn-menu{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 25%,transparent) transparent}
.sn-menu::-webkit-scrollbar{width:8px;height:8px}
.sn-menu::-webkit-scrollbar-track{background:transparent}
.sn-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{background:color-mix(in srgb,var(--ink) 38%,transparent)}
.sn-menu a,.sn-menu button{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;padding:.55rem .7rem;border-radius:8px;color:var(--ink);background:none;border:0;cursor:pointer;font:inherit}
.sn-menu a:hover,.sn-menu button:hover,.sn-menu a[aria-current="true"]{background:color-mix(in srgb,var(--line) 45%,transparent)}
.sn-menu .cc{color:var(--cc);font-weight:600}
.sn-menu .lv{color:var(--muted);font-weight:600;font-size:.85rem;margin-left:auto;white-space:nowrap}
.sn-menu .il{margin-left:.7rem;min-width:4.2rem;text-align:right;color:var(--muted);font-weight:700;white-space:nowrap}
.sn-menu .il small{font-weight:600}
.sn-menu .fine{padding:.4rem .7rem;color:var(--muted);font-size:.85rem}
.sn-menu .sep{height:1px;background:var(--line);margin:.3rem 0}
.sn-menu form{margin:0}
.sn-signin{border-radius:999px;padding:.4rem .95rem;background:var(--gold);color:var(--panel)!important;font-weight:700}
.sn-owner{border-bottom:1px solid var(--line);background:color-mix(in srgb,color-mix(in srgb,var(--cc) 9%,var(--bg)) 92%,transparent);backdrop-filter:blur(8px)}
.sn-owner .sn-in{min-height:0;padding:.45rem 1rem;gap:.55rem;font-size:.95rem;color:var(--muted);font-weight:600}
.sn-owner b{color:var(--cc);font-weight:700}
.sn-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-link{text-decoration:none!important;margin-left:auto;flex:none;display:flex;gap:.4rem;align-items:center;padding:.3rem .75rem;border-radius:999px;font-weight:800;font-size:.85rem;color:var(--ink);background:color-mix(in srgb,var(--ink) 9%,var(--bg));border:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.sn-link:hover{background:color-mix(in srgb,var(--ink) 14%,var(--bg))}
.sn-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sn-link svg{width:.95rem;height:.95rem}
[hidden]{display:none!important}
@media (max-width:520px){
  .sn-in.in .sn-brand{display:none}
  .sn-tag{display:none}
}
/* ---- Landing page (was tools/build_site.py LANDING_CSS) ---- */
.land{max-width:44rem;margin:0 auto}
.land .masthead{margin:1.5rem 0 1.6rem}
.land h1{font-size:clamp(2.3rem,7vw,3.2rem)}
.land .tag{font-family:var(--fh);font-size:1.35rem;color:var(--gold);margin:.35rem 0 0;font-weight:var(--fhw);letter-spacing:var(--fhls);font-size-adjust:none}
.land .lede{max-width:34rem}
.cta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0 0 .6rem}
.b-bnet{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.2rem;border-radius:12px;background:#148EFF;color:#fff;font-weight:700;text-decoration:none;font-size:1.05rem}
.b-bnet:hover{background:#0B7BE6}
.b-guest{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.b-guest:hover,.b-guest[aria-expanded="true"]{color:var(--ink)}
.cta-fine{color:var(--muted);font-size:.9rem;margin:0 0 2rem}
.cta-fine a{color:inherit}
.pickr{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1rem;margin:0 0 2rem}
.pickr h2{font-size:1.2rem;margin:0 0 .2rem}
.pickr p{margin:0 0 .7rem;color:var(--muted);font-size:.95rem}
.pickr input{width:100%;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;margin:0 0 .7rem}
.pk-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.4rem}
.pk-list a{display:flex;flex-direction:column;padding:.45rem .65rem;border-radius:10px;border:1px solid var(--line);text-decoration:none;background:var(--bg);border-left:4px solid var(--cc)}
.pk-list a:hover{border-color:var(--cc)}
.pk-list b{color:var(--cc)}
.pk-list small{color:var(--muted);font-size:.82rem}
.peek{border-radius:18px;padding:.9rem;background:color-mix(in srgb,var(--gold) 9%,var(--bg));border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line));margin:0 0 2rem}
.peek-h{display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;margin:0 .2rem .7rem}
.peek-h>span{display:flex;flex-direction:column;font-weight:600;color:var(--muted)}
.peek-t{font-family:var(--fh);font-size:1.35rem;color:var(--ink);font-weight:var(--fhw);letter-spacing:var(--fhls);font-size-adjust:none}
.peek-h b{color:var(--cc)}
.peek-h a{font-weight:700;text-decoration:none;white-space:nowrap}
.sample .tldr{pointer-events:none;margin:0}
/* Wowhead's tooltips are tables: keep the site's table styles off them (Oct 22: Shield of the Righteous's tooltip was
   squeezed into a narrow column by the full-width tables and cell padding above) */
.wowhead-tooltip table{width:auto;font-size:inherit;border-collapse:separate}
.wowhead-tooltip th,.wowhead-tooltip td{padding:revert;border-bottom:0;text-transform:none;letter-spacing:normal;font-size:inherit;font-weight:inherit;color:inherit;vertical-align:top;text-align:left}
/* Damage and rotation card for raid damage dealers (tools/sections/dmgrot.py, Christiaan Oct 23, mockup B).
   No margins on its blocks: spacing.css spaces them (sub-headings 32 above / 8 below, groups 24). No edge bars. */
.dr-one{background:color-mix(in srgb,var(--gold) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);border-radius:12px;padding:14px 16px}
.dr-oh{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.dr-ot{font-weight:700;margin:4px 0}
.dr-one p{margin:0;color:var(--muted);font-size:.95rem}
.dr-sec{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dr-tlw{border:1px solid var(--line);border-radius:12px;padding:12px}
.dr-tr{display:grid;grid-template-columns:11rem 1fr;align-items:center;min-height:2rem}
.dr-tl{font-size:.88rem;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.dr-tl .ic,.dr-mk .ic{width:18px;height:18px;border-radius:4px;margin:0;vertical-align:0}
.dr-tl a.ab,.dr-mk a.ab{display:inline-flex}
.dr-tt{position:relative;height:1.9rem;border-bottom:1px dashed var(--line)}
.dr-bands .dr-tt{border:0;height:1.5rem}
.dr-band{position:absolute;top:0;height:100%;border-radius:6px;font-style:normal;font-size:.76rem;font-weight:700;padding:2px 6px;color:var(--gold);background:var(--gold-soft);white-space:nowrap;overflow:hidden;box-shadow:inset -2px 0 0 var(--panel)}
.dr-band.b-burn{background:color-mix(in srgb,var(--kill) 18%,var(--panel));color:var(--kill)}
.dr-seg{position:absolute;top:.55rem;height:.8rem;border-radius:4px;display:inline-block;cursor:default}
.dr-seg.wait{background:color-mix(in srgb,var(--t-orange) 35%,transparent)}
.dr-seg.held{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--kill) 40%,transparent) 0 4px,transparent 4px 8px)}
.dr-mk{position:absolute;top:.15rem;transform:translateX(-50%);line-height:0}
.dr-mk .ic{box-shadow:0 0 0 2px var(--panel)}
.dr-miss{position:absolute;top:.15rem;transform:translateX(-50%);width:18px;height:18px}
.dr-miss i{display:block;width:18px;height:18px;border-radius:50%;border:2px solid var(--bad);box-sizing:border-box}
.dr-axis{position:relative;height:1.2rem;font-size:.74rem;color:var(--muted)}
.dr-axis span{position:absolute;transform:translateX(-50%)}.dr-axis span:first-child{transform:none}
.dr-tleg{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.82rem;color:var(--muted);margin-top:8px}
.dr-tleg .dr-seg{position:static;width:1.4rem;vertical-align:-1px;margin-right:6px}
.dr-missk{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--bad);margin-right:6px;vertical-align:-1px}
.dr-phases .pvs-name{flex:0 1 auto}
.dr-phases .pvs-time{flex:1;font-size:.82rem;color:var(--muted);margin-left:8px}
.dr-chips{display:flex;flex-wrap:wrap;gap:8px}
.dr-chip{font-size:.86rem;border:1px solid var(--line);border-radius:999px;padding:4px 12px;background:var(--bg)}
.dr-chip.bad{background:color-mix(in srgb,var(--bad) 8%,var(--panel))}
@media (max-width:640px){.dr-tr{grid-template-columns:1.75rem 1fr}.dr-tl .ab{font-size:0}
 .dr-band{font-size:.7rem;padding:2px 4px}.dr-phases .pvs-time{display:none}}
.dr-chip .ab{display:inline;white-space:nowrap}.dr-chip .ab .ic{width:16px;height:16px;vertical-align:-3px;margin-right:.3rem}
/* Healing and cooldowns (healers' version of the card, Oct 23): raid cooldowns shown ungraded, and the raid's damage */
.dr-div{min-height:1.6rem}.dr-div .dr-tt,.dr-none{border:0;height:.8rem}
.dr-lab{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);gap:4px}
.dr-raid .ic{filter:saturate(.35);opacity:.85}
.dr-dmg{position:absolute;top:.5rem;height:.9rem;border-radius:3px;background:color-mix(in srgb,var(--bad) 55%,transparent)}
.dr-dmgk{display:inline-block;width:1.4rem;height:.8rem;border-radius:3px;background:color-mix(in srgb,var(--bad) 55%,transparent);margin-right:6px;vertical-align:-1px}
@media (max-width:640px){.dr-lab{font-size:0}.dr-lab .info{font-size:.7rem}}
/* Early deaths (Oct 23): why a death wasn't avoidable, under it */
.dr .dw .d-why{display:block;font-size:.84rem;color:var(--muted);margin:2px 0 4px}
/* Summary notes in their sections (Oct 23, Christiaan: no "From your summary" box). Raid and key pages. A What to work on item sits at the
   top of the section it's about, gold; a Doing well item green. Summary rows open the section and flash the note. */
.sec-note{border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));background:color-mix(in srgb,var(--gold) 7%,var(--panel));border-radius:12px;padding:.75rem 1rem .5rem;margin:0 0 1rem}
.sec-note-h{margin:0 0 .35rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700}
.sec-note .tl-d{border:0;padding:0;margin:0;background:none}.sec-note .tl-d ul{margin:.3rem 0 .2rem}
/* sized like the What happens tip (Oct 23, Christiaan: "we don't need such large text") */
.sec-note{padding:.6rem .9rem .45rem;font-size:.85rem;line-height:1.45;color:var(--muted)}
.sec-note-h{font-size:.7rem;margin-bottom:.2rem}
.sec-note .tl-dt{font-size:.92rem;font-weight:600;color:var(--ink);gap:.45rem;line-height:1.4}
.sec-note .tl-n{min-width:1.15rem;height:1.15rem;font-size:.66rem;margin-top:.1rem}
.sec-note .tl-d ul,.sec-note .tl-d .wc-why{margin-left:1.6rem;margin-top:.25rem}
.sec-note .tl-d p:empty{display:none}
/* two notes in a row sit 8 apart (Oct 23); inside a fold, spacing.css sets it */
.sec-note:has(+.sec-note){margin-bottom:8px}
/* Rotation basics (Oct 20; shared since Oct 23: raid Damage and rotation cards carry it too) */
.rot-basics{margin:.2rem 0 .8rem;border-bottom:1px solid var(--line)}
.rot-basics>summary{cursor:pointer;padding:.7rem 0 .2rem;font-size:.85rem;font-weight:600;color:var(--muted);list-style:none}
.rot-basics>summary::-webkit-details-marker{display:none}
.rot-basics>summary::after{content:" \25BE";font-size:.75rem}
.rot-basics[open]>summary::after{content:" \25B4"}
.rot-basics-in{padding:.3rem 0 .2rem}
.rot-basics table.mt{margin-bottom:.3rem}
.rot-basics table.mt tbody tr:last-child td{border-bottom:0}
.dr-basics{margin:1rem 0 0;border-bottom:0}
.dr-basics .why{font-size:.85rem;color:var(--muted);margin:.2rem 0 .4rem}
.dr-basics table.mt{width:100%;border-collapse:collapse;font-size:.9rem}
.dr-basics table.mt th{text-transform:none;letter-spacing:0;font-size:.75rem;font-weight:600;padding:.3rem .4rem}
.dr-basics table.mt td{padding:.45rem .4rem;vertical-align:top}
.dr-basics table.mt .sub{display:block;font-size:.78rem;color:var(--muted);margin-top:4px}
.dr-basics table.mt td:first-child{width:1.6rem;color:var(--muted)}
.sec-note.ok{border-color:color-mix(in srgb,var(--kill) 45%,var(--line));background:color-mix(in srgb,var(--kill) 7%,var(--panel))}
.sec-note.ok .sec-note-h{color:var(--kill)}
.sec-note.flash{background:color-mix(in srgb,var(--gold) 18%,var(--panel));transition:background-color .6s}
.sec-note.ok.flash{background:color-mix(in srgb,var(--kill) 18%,var(--panel))}
.sec-note{transition:background-color 1.2s}
.dr-one.flash{background:color-mix(in srgb,var(--gold) 20%,var(--panel));transition:background-color .6s}

/* RESTYLE (Christiaan, Oct 28; mockups style-*-r8) */
/* Cards are flat with a hairline border and a faint top highlight; What to work on keeps its shadow */
: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(.tl-raised){border-color:var(--line)!important;box-shadow:inset 0 1px 0 var(--hl)!important}
.tldr.tl-raised{border-color:var(--line)!important;box-shadow:inset 0 1px 0 var(--hl),var(--soft-sh-hi)!important}
/* Section tabs: text tabs on a full-width line, the open one underlined in the accent, content right below */
.ftabwrap.ft-pill .ftabs{display:flex!important;width:100%!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:inset 0 -1px 0 var(--line)!important;padding:0!important;gap:1.5rem!important}
.ftabwrap.ft-pill .ftabs button{border-radius:0!important;padding:.7rem .1rem!important;background:none!important;color:var(--muted)}
.ftabwrap.ft-pill .ftabs button[aria-selected="true"]{background:none!important;color:var(--ink)!important;box-shadow:inset 0 -2px 0 var(--acc)!important}
.ftabwrap.ft-pill .fpanels{padding-top:.9rem!important}
/* the "Fights this night" boss pills are gone (pages built before Oct 28 still carry them) */
.fsib{display:none!important}
/* the attempt grid is only as wide as its columns, with no line under its last row (Alive) */
table.pc-t tr:last-child>th{border-bottom:0}
.tablewrap.pc-wrap{width:fit-content;max-width:100%}
/* the "sat ready" bar is centered on the cast icons and the missed circle */
.dr-tt .dr-seg{top:calc(.15rem + 9px - .4rem)}
/* END RESTYLE */
/* The parse in a card's summary line (raid: Kill parse, key: Key parse; Oct 28) keeps its Warcraft Logs tier color, as
   it had in its old stat box */
.deep-hint .kp{color:var(--tc);font-weight:700}