/* ==== heirs.html: The Heirs (the progression layer) ====
   Self-contained on purpose: nothing here edits style.css or hybrid.css, so every
   selector is scoped under .heirs and the tier colours are defined here, built only
   from the colours the site already uses (bone, amber, coral, violet, green, gold). */
.heirs{
  --hx-bone:244,239,230; --hx-green:111,227,174; --hx-amber:255,180,92; --hx-coral:255,122,114;
  --hx-violet:154,147,255; --hx-lilac:196,188,255; --hx-gold:230,201,133; --hx-brass:217,178,95;
}
main.heirs{max-width:900px}
.heirs .hx-sec{margin-top:22px;padding:18px 22px 20px;scroll-margin-top:70px}
.heirs .hx-sec h2.plaque{margin:0 0 10px}
.heirs .hx-lede{margin:0 0 14px;font:600 18px/1.6 var(--f-ui);color:var(--txt-2);max-width:38em}
.heirs .hx-fine{margin:12px 0 0;font:600 15.5px/1.5 var(--f-ui);color:var(--muted);max-width:40em}
.heirs a.hx-link{color:#fff;text-decoration:underline;text-decoration-color:var(--gold-line,#d9b25f);text-decoration-thickness:1.5px;text-underline-offset:4px;padding:10px 0}

/* ---- the rank chip: one data-tier attribute, nine looks, walking the site's own palette ---- */
.rankchip{--c:var(--hx-bone);display:inline-flex;align-items:center;gap:8px;padding:6px 15px 6px 11px;border-radius:20px;white-space:nowrap;
  font:800 12px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;
  color:rgb(var(--c));background:rgba(var(--c),.12);border:1px solid rgba(var(--c),.5)}
.rankchip svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rankchip[data-tier="1"]{--c:var(--hx-bone);background:rgba(var(--hx-bone),.06);border-color:var(--line);color:var(--muted)}
.rankchip[data-tier="2"]{--c:var(--hx-green)}
.rankchip[data-tier="3"]{--c:var(--hx-amber)}
.rankchip[data-tier="4"]{--c:var(--hx-coral)}
.rankchip[data-tier="5"]{--c:var(--hx-violet);box-shadow:0 0 10px rgba(var(--hx-violet),.35)}
.rankchip[data-tier="6"]{--c:var(--hx-lilac);box-shadow:0 0 12px rgba(var(--hx-lilac),.35)}
.rankchip[data-tier="7"]{--c:var(--hx-gold);box-shadow:0 0 14px rgba(var(--hx-gold),.45)}
.rankchip[data-tier="8"]{--c:var(--hx-gold);background:rgba(var(--hx-gold),.18);border-width:1.5px;box-shadow:0 0 16px rgba(var(--hx-gold),.5)}
.rankchip[data-tier="9"]{--c:var(--hx-brass);background:rgba(var(--hx-brass),.22);border:1.5px solid rgb(var(--hx-brass));animation:hxpulse 2.4s ease-in-out infinite}
@keyframes hxpulse{0%,100%{box-shadow:0 0 12px rgba(var(--hx-brass),.45)}50%{box-shadow:0 0 26px rgba(var(--hx-brass),.85)}}
@media (prefers-reduced-motion:reduce){.rankchip[data-tier="9"]{animation:none;box-shadow:0 0 18px rgba(var(--hx-brass),.6)}}

/* ---- the three path chips ---- */
.hx-path{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font:800 11px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase}
.hx-path.crowd{background:rgba(var(--hx-green),.13);color:rgb(var(--hx-green));border:1px solid rgba(var(--hx-green),.5)}
.hx-path.competitor{background:rgba(var(--hx-coral),.13);color:rgb(var(--hx-coral));border:1px solid rgba(var(--hx-coral),.5)}
.hx-path.bloodline{background:rgba(var(--hx-brass),.14);color:rgb(var(--hx-brass));border:1px solid rgba(var(--hx-brass),.5)}

/* ---- your rank ---- */
.hx-me[hidden],.hx-state[hidden],.hx-ladder-body[hidden]{display:none!important}
.hx-state{margin:0;font:600 18px/1.6 var(--f-ui);color:var(--txt-2);max-width:36em}
.hx-state.quiet{color:var(--muted)}
.hx-actions{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:14px}
.hx-me-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.hx-xp{font:900 34px/1 var(--f-display);color:#fff;font-variant-numeric:tabular-nums}
.hx-xp small{display:block;margin-top:6px;font:700 12px/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hx-bar{position:relative;height:12px;margin:18px 0 6px;border-radius:8px;background:rgba(var(--hx-bone),.1);overflow:hidden}
.hx-bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,rgba(var(--hx-violet),.8),rgb(var(--hx-lilac)));transition:width .8s ease}
@media (prefers-reduced-motion:reduce){.hx-bar i{transition:none}}
.hx-bar-note{margin:0;font:700 15.5px/1.4 var(--f-ui);color:var(--txt-2)}
.hx-paths{display:flex;flex-wrap:wrap;gap:8px 10px;margin:16px 0 0;padding:0;list-style:none}
.hx-paths li{display:inline-flex;align-items:center;gap:8px;font:700 15.5px/1 var(--f-ui);color:var(--txt-2)}
.hx-recent{margin:16px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.hx-recent li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font:600 16px/1.35 var(--f-ui);color:var(--txt-2)}
.hx-recent b{color:#fff;font-variant-numeric:tabular-nums}
.hx-opt{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(var(--hx-bone),.04)}
.hx-opt input{width:24px;height:24px;margin:2px 0 0;flex:none;accent-color:#9a93ff}
.hx-opt label{font:600 16.5px/1.45 var(--f-ui);color:var(--txt-2);cursor:pointer}
.hx-opt label span{display:block;margin-top:2px;font-size:15px;color:var(--muted)}
.hx-opt[data-locked="1"]{opacity:.7}
.hx-opt[data-locked="1"] input,.hx-opt[data-locked="1"] label{cursor:not-allowed}
.hx-msg{margin:10px 0 0;min-height:1.4em;font:700 15.5px/1.4 var(--f-ui);color:var(--txt-2)}

/* ---- the nine ranks ---- */
.hx-ranks{margin:6px 0 0;padding:0;list-style:none}
.hx-ranks li{display:grid;grid-template-columns:minmax(0,17em) 1fr;align-items:center;gap:6px 18px;padding:12px 0;border-top:1px solid var(--line)}
.hx-ranks li:first-child{border-top:0}
.hx-ranks .hx-from{font:700 15.5px/1.35 var(--f-ui);color:var(--muted);font-variant-numeric:tabular-nums}
.hx-ranks li[data-here="1"]{background:linear-gradient(90deg,rgba(var(--hx-violet),.14),transparent);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:10px}
.hx-ranks li[data-here="1"] .hx-from::after{content:"  You are here";color:#fff;font-weight:800;letter-spacing:.04em}

/* ---- the three paths ---- */
.hx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px}
.hx-card{padding:16px 16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(var(--hx-bone),.04)}
.hx-card h3{margin:12px 0 8px;font:800 16px/1.3 var(--f-ui);color:#fff}
.hx-card p{margin:0;font:600 16px/1.55 var(--f-ui);color:var(--txt-2)}
.hx-card p + p{margin-top:10px}
.hx-card .hx-status{color:var(--muted);font-weight:700}

/* ---- how XP works ---- */
.hx-how{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:0}
.hx-how li{padding:12px 0 12px 30px;position:relative;border-top:1px solid var(--line);font:600 17.5px/1.55 var(--f-ui);color:var(--txt-2);max-width:40em}
.hx-how li:first-child{border-top:0}
.hx-how li::before{content:"";position:absolute;left:4px;top:21px;width:10px;height:10px;border-radius:50%;background:rgb(var(--hx-violet))}
.hx-how li.no::before{background:rgb(var(--hx-coral))}
.hx-how b{color:#fff;font-weight:800}

/* ---- the ladder ---- */
.hx-board{margin:6px 0 0;padding:0;list-style:none}
.hx-board li{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;align-items:center;gap:10px 14px;padding:11px 0;border-top:1px solid var(--line)}
.hx-board li:first-child{border-top:0}
.hx-board .pos{font:900 18px/1 var(--f-display);color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.hx-board .nm{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;font:700 18px/1.3 var(--f-ui);color:#fff;overflow-wrap:anywhere}
.hx-board .nm a{color:#fff;text-decoration:underline;text-decoration-color:var(--gold-line,#d9b25f);text-underline-offset:4px}
.hx-board .nm small{display:block;margin-top:4px;font:600 14.5px/1.3 var(--f-ui);color:var(--muted)}
.hx-board .pts{font:800 16px/1 var(--f-ui);color:var(--txt-2);font-variant-numeric:tabular-nums;text-align:right}
.hx-board .pts small{display:block;margin-top:4px;font:700 11.5px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

@media (max-width:760px){
  .heirs .hx-sec{padding:14px 16px 16px}
  .hx-grid{grid-template-columns:1fr}
  .hx-ranks li{grid-template-columns:1fr}
  .hx-board li{grid-template-columns:1.9em minmax(0,1fr)}
  .hx-board .pts{grid-column:2;text-align:left;display:flex;gap:8px;align-items:baseline}
  .hx-board .pts small{display:inline;margin:0}
  .hx-xp{font-size:28px}
}
@media print{.hx-actions,.hx-opt{display:none}}
.hx-ranks .rankchip{justify-self:start;align-self:center;width:max-content;max-width:100%}
.hx-board .rankchip{align-self:flex-start;width:max-content;max-width:100%}