:root{color-scheme:dark;--bg:#0b0f16;--panel:#151b25;--panel2:#1d2633;--border:#303b4a;--text:#f4f7fb;--muted:#9ca8b8;--gold:#f4bd57;--green:#65d487;--red:#ff7e7e;--unknown:#a9b4c2}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#222d40 0,var(--bg) 520px);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}.wrap{width:min(1100px,calc(100% - 28px));margin:auto;padding:46px 0}.hero{margin-bottom:24px}.hero-with-logo{display:block}.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.hero-copy{min-width:0;flex:1 1 auto}.site-logo{display:block;flex:0 0 auto;width:clamp(150px,21vw,240px);height:auto;max-height:96px;object-fit:contain;object-position:right top;margin-top:2px}.eyebrow{color:var(--gold);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem}.hero h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.05;margin:.3rem 0}.hero p{color:var(--muted);max-width:760px}.card{background:rgba(21,27,37,.96);border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:0 18px 60px #0005;margin-top:18px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}label{display:grid;gap:7px}label span{font-weight:700;font-size:.9rem}input,select,button{font:inherit}input,select{width:100%;background:#0d131c;color:var(--text);border:1px solid #3c4859;border-radius:9px;padding:11px 12px}input:focus,select:focus{outline:2px solid #f4bd5744;border-color:var(--gold)}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}button{border:0;border-radius:9px;padding:11px 16px;font-weight:850;cursor:pointer;background:linear-gradient(#f8cb74,var(--gold));color:#271800}.secondary{background:var(--panel2);border:1px solid #465365;color:var(--text)}.error{background:#ff7e7e18;border:1px solid #ff7e7e77;padding:14px;border-radius:10px}.candidates{display:grid;gap:9px}.candidate{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px;background:var(--panel2);border-radius:9px}.candidate button{margin:0}.result-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.result-head p{margin:.25rem 0;color:var(--muted)}.tree,.tree ul{list-style:none;margin:0;padding:0}.tree ul{margin-left:20px;padding-left:15px;border-left:1px solid #394556}.node{position:relative;padding:5px 0}.tree ul>.node:before{content:"";position:absolute;left:-15px;top:17px;width:11px;border-top:1px solid #394556}.node-row{display:flex;align-items:flex-start;gap:8px}.status{display:inline-grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;font-weight:900}.node.complete > .node-row > .status{background:#65d48722;color:var(--green)}.node.incomplete > .node-row > .status{background:#ff7e7e22;color:var(--red)}.node.unknown > .node-row > .status{background:#a9b4c222;color:var(--unknown)}.node-name{font-weight:750}.achievement>.node-row .node-name{color:#fff}.criterion>.node-row .node-name{font-weight:600;color:#dbe2eb}.meta{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}.empty{color:var(--muted)}@media(max-width:700px){.grid{grid-template-columns:1fr}.result-head{display:block}.candidate{align-items:flex-start;flex-direction:column}.candidate button{width:100%}}

.achievement-link,.candidate-link{color:inherit;text-decoration:none}.achievement-link:hover,.candidate-link:hover{text-decoration:underline;text-underline-offset:3px}.achievement-link:focus-visible,.candidate-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}

/* Nested branches are opened and closed from their own status icon. */
.status-toggle{padding:0;border:0;background:transparent;font:inherit;cursor:pointer;color:inherit}
.node.complete > .node-row > .status-toggle{background:#65d48722;color:var(--green)}
.node.incomplete > .node-row > .status-toggle{background:#ff7e7e22;color:var(--red)}
.node.unknown > .node-row > .status-toggle{background:#a9b4c222;color:var(--unknown)}
.status-toggle:hover{filter:brightness(1.35)}
.status-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.status-toggle[aria-expanded="true"]{box-shadow:0 0 0 1px currentColor inset}
.tree ul[hidden]{display:none}

/* Achievement rank colours from achievements.csv. */
#achievement option.rank-gold{color:#d6a83c}
#achievement option.rank-silver{color:#b9c2cc}
#achievement option.rank-bronze{color:#c88752}


/* Custom achievement dropdown for consistent rank styling on iPhone and other mobile browsers. */
.custom-select{position:relative;width:100%}
.custom-select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0d131c;color:var(--text);border:1px solid #3c4859;border-radius:9px;padding:11px 12px;text-align:left}
.custom-select-trigger:focus-visible,.custom-select.is-open .custom-select-trigger{outline:2px solid #f4bd5744;border-color:var(--gold)}
.custom-select-value{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.custom-select-value.is-placeholder{color:var(--muted)}
.custom-select-value.rank-gold{color:#d6a83c}
.custom-select-value.rank-silver{color:#b9c2cc}
.custom-select-value.rank-bronze{color:#c88752}
.custom-select-arrow{flex:0 0 auto;color:var(--muted);font-size:.9rem}
.custom-select-menu{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;background:#0d131c;border:1px solid #3c4859;border-radius:12px;box-shadow:0 20px 45px #0008;overflow:hidden}
.custom-select-options{max-height:320px;overflow:auto;padding:6px}
.custom-select-option{width:100%;display:block;border:0;background:transparent;border-radius:8px;padding:10px 12px;text-align:left;color:var(--text);cursor:pointer}
.custom-select-option:hover,.custom-select-option.is-highlighted{background:#1a2230}
.custom-select-option[aria-selected="true"]{box-shadow:0 0 0 1px #49586d inset;background:#141c28}
.custom-select-option.rank-gold{color:#d6a83c}
.custom-select-option.rank-silver{color:#b9c2cc}
.custom-select-option.rank-bronze{color:#c88752}
.custom-select-option.is-indent{padding-left:28px}
.custom-select-option .mini-prefix{color:inherit}

.reward-box{margin-left:auto;flex:0 1 auto;width:max-content;max-width:min(360px,45%);text-align:right;background:#0d131c;border:1px solid #3a4657;border-radius:11px;padding:9px 11px}.reward-label{display:block;color:var(--gold);font-size:.75rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}.reward-link,.reward-fallback{color:#f4f7fb;text-decoration:none;font-weight:750;overflow-wrap:anywhere}.reward-link:hover,.reward-fallback:hover{text-decoration:underline;text-underline-offset:3px}.reward-box .iconsmall{margin-left:8px;vertical-align:middle}.reward-box a.wowhead{display:inline-flex!important;width:auto!important;max-width:100%;align-items:center;justify-content:flex-end;gap:8px}@media(max-width:700px){.reward-box{margin:14px 0 0;width:fit-content;max-width:100%;text-align:left}.reward-box a.wowhead{justify-content:flex-start}}
/* Achievement rank guide shown beneath the page heading. */
.rank-explainer{display:grid;gap:5px;width:100%;max-width:none;margin-top:14px}
.hero .rank-explainer p{margin:0;color:var(--muted);width:100%;max-width:none}
.rank-word{font-weight:850}
.rank-word.rank-gold{color:#d6a83c!important}
.rank-word.rank-silver{color:#b9c2cc!important}
.rank-word.rank-bronze{color:#c88752!important}

@media(max-width:760px){.hero-top{gap:16px}.site-logo{width:clamp(120px,25vw,180px);max-height:76px}}
@media(max-width:560px){.hero-top{gap:10px}.site-logo{width:105px;max-height:60px}.hero h1{font-size:clamp(1.8rem,9vw,2.5rem)}}