/* ═══════════════════════════════════════════════════════════════
   Release 14 — neighbourhood scorecard
   Scoped under .hp-nb so nothing here can leak into the rest of the
   site. Uses the existing type scale; adds only what the panel needs.
   ═══════════════════════════════════════════════════════════════ */

.hp-nb{
  --nb-line:#e2e7ea;
  --nb-soft:#f6f8f9;
  --nb-ink:#16232b;
  --nb-mut:#63757f;
  --nb-high:#1c6b4e;
  --nb-good:#2f7fa8;
  --nb-mid:#a4762a;
  --nb-low:#8d4a3c;
  border:1px solid var(--nb-line);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}

/* ── header ─────────────────────────────────────────────────── */
.hp-nb__head{
  display:flex; gap:26px; align-items:center; flex-wrap:wrap;
  padding:26px 28px; border-bottom:1px solid var(--nb-line);
  background:var(--nb-soft);
}
.hp-nb__score{
  flex:0 0 auto; width:118px; height:118px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center;
}
.hp-nb__score--high{background:var(--nb-high)}
.hp-nb__score--good{background:var(--nb-good)}
.hp-nb__score--mid{background:var(--nb-mid)}
.hp-nb__score--low{background:var(--nb-low)}
.hp-nb__score--none{background:#8a97a0}
.hp-nb__num{
  font-size:2.7rem; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.hp-nb__outof{font-size:.68rem; opacity:.85; margin-top:4px; letter-spacing:.04em}
.hp-nb__headtext{flex:1 1 260px; min-width:0}
.hp-nb__eyebrow{
  margin:0 0 4px; font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--nb-good);
}
.hp-nb__head h2{margin:0 0 8px; font-size:1.35rem; line-height:1.2}
.hp-nb__sub{margin:0; color:var(--nb-mut); font-size:.9rem; line-height:1.55; max-width:62ch}

/* ── component bars ─────────────────────────────────────────── */
.hp-nb__bars{
  display:grid; gap:20px; padding:24px 28px;
  border-bottom:1px solid var(--nb-line);
}
@media (min-width:820px){ .hp-nb__bars{grid-template-columns:repeat(3,1fr); gap:26px} }
.hp-nb__barhead{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px;
}
.hp-nb__barname{font-weight:650; font-size:.95rem; color:var(--nb-ink)}
.hp-nb__barweight{font-size:.72rem; color:var(--nb-mut); letter-spacing:.02em}
.hp-nb__barval{
  margin-left:auto; font-weight:700; font-size:1.05rem;
  font-variant-numeric:tabular-nums; color:var(--nb-ink);
}
.hp-nb__track{height:7px; border-radius:4px; background:#e8edef; overflow:hidden}
.hp-nb__fill{height:100%; border-radius:4px; background:var(--nb-good)}
.hp-nb__rule{margin:9px 0 0; font-size:.79rem; color:var(--nb-mut); line-height:1.5}
.hp-nb__gap{
  margin:0; padding:14px 28px; font-size:.82rem; color:var(--nb-mut);
  background:var(--nb-soft); border-bottom:1px solid var(--nb-line);
}

/* ── cards ──────────────────────────────────────────────────── */
.hp-nb__grid{display:grid; gap:1px; background:var(--nb-line)}
@media (min-width:820px){ .hp-nb__grid{grid-template-columns:1fr 1fr} }
.hp-nb__card{background:#fff; padding:24px 28px}
.hp-nb__card h3{margin:0 0 16px; font-size:1rem; font-weight:650}

.hp-nb__schools{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.hp-nb__schools li{
  display:flex; align-items:center; gap:14px;
  padding:10px 0; border-bottom:1px solid #eef2f3;
}
.hp-nb__schools li:last-child{border-bottom:none}
.hp-nb__schoolmain{flex:1 1 auto; min-width:0}
.hp-nb__schoolname{display:block; font-size:.9rem; font-weight:600; line-height:1.35}
.hp-nb__schoolmeta{display:block; font-size:.76rem; color:var(--nb-mut); margin-top:2px}
.hp-nb__eqao{
  flex:0 0 auto; min-width:52px; text-align:center;
  font-weight:700; font-size:1.02rem; font-variant-numeric:tabular-nums;
  color:var(--nb-high); background:#e8f3ee; border-radius:7px; padding:6px 8px;
}
.hp-nb__eqao small{font-size:.62em; font-weight:600; opacity:.75}
.hp-nb__eqao--none{color:var(--nb-mut); background:#eef1f2; font-size:.78rem; font-weight:600}

.hp-nb__stats{display:flex; gap:26px; flex-wrap:wrap; margin-bottom:14px}
.hp-nb__stat strong{
  display:block; font-size:1.5rem; font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums; color:var(--nb-ink);
}
.hp-nb__stat strong small{
  /* The unit belongs on the same line as the figure. Must be more
     specific than the caption rule below, which is a block. */
  display:inline; font-size:.55em; font-weight:600; margin-left:1px;
}
.hp-nb__stat > small{display:block; font-size:.76rem; color:var(--nb-mut); margin-top:4px; max-width:22ch}
.hp-nb__agencies{margin:0 0 10px; font-size:.85rem; color:var(--nb-ink)}
.hp-nb__none{margin:0; font-size:.88rem; color:var(--nb-mut)}
.hp-nb__foot{margin:14px 0 0; font-size:.76rem; color:var(--nb-mut); line-height:1.55}

/* ── method disclosure ──────────────────────────────────────── */
.hp-nb__method{border-top:1px solid var(--nb-line); background:var(--nb-soft)}
.hp-nb__method summary{
  cursor:pointer; padding:15px 28px; font-size:.86rem; font-weight:600;
  color:var(--nb-good); list-style:none;
}
.hp-nb__method summary::-webkit-details-marker{display:none}
.hp-nb__method summary::after{content:" ↓"; font-weight:400}
.hp-nb__method[open] summary::after{content:" ↑"}
.hp-nb__method summary:focus-visible{outline:2px solid var(--nb-good); outline-offset:-2px}
.hp-nb__method > div{padding:0 28px 22px; font-size:.83rem; color:var(--nb-mut); line-height:1.6}
.hp-nb__method p{margin:0 0 10px; max-width:74ch}
.hp-nb__method ul{margin:0 0 12px; padding-left:20px}
.hp-nb__method li{margin-bottom:6px; max-width:74ch}
.hp-nb__method strong{color:var(--nb-ink)}
.hp-nb__src{font-size:.78rem; padding-top:8px; border-top:1px solid var(--nb-line)}

.hp-nb--empty{padding:22px 26px; color:var(--nb-mut); font-size:.9rem}

@media (max-width:520px){
  .hp-nb__head{padding:20px; gap:18px}
  .hp-nb__score{width:92px; height:92px}
  .hp-nb__num{font-size:2.1rem}
  .hp-nb__bars, .hp-nb__card{padding:18px 20px}
  .hp-nb__method summary, .hp-nb__method > div{padding-left:20px; padding-right:20px}
}