.dep-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 22px; }
.dep-control { min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--soft-ink); cursor: pointer; font-weight: 650; }
.dep-control:hover, .dep-control[aria-pressed="true"] { border-color: var(--sky); background: var(--panel-soft); color: var(--navy); }
.dep-control:focus-visible { outline: 3px solid rgba(52,127,172,.25); outline-offset: 2px; }
.dep-age-controls { display: grid; grid-template-columns: 170px minmax(330px,auto) minmax(250px,1fr); gap: 18px; align-items: center; margin: -8px 0 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.72); }
.dep-age-controls > div:first-child span { display: block; color: var(--ink); font-size: .82rem; font-weight: 680; }
.dep-age-controls > div:first-child small { display: block; margin-top: 3px; color: var(--soft-ink); font-size: .68rem; }
.dep-age-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
.dep-age-buttons button { min-height: 34px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; background: var(--panel-soft); color: var(--soft-ink); cursor: pointer; font-size: .74rem; font-weight: 650; }
.dep-age-buttons button[aria-pressed="true"] { border-color: var(--sky); background: var(--navy); color: #fff; }
.dep-age-buttons button:focus-visible { outline: 3px solid rgba(52,127,172,.25); outline-offset: 2px; }
.dep-age-controls > p { margin: 0; color: var(--soft-ink); font-size: .72rem; line-height: 1.45; }

.dep-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.dep-stat { min-height: 145px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.dep-stat-value { margin-top: 10px; color: var(--navy); font-size: clamp(2rem,4vw,3rem); font-weight: 680; letter-spacing: -.055em; line-height: 1; }
.dep-stat-context { margin: 10px 0 0; color: var(--soft-ink); font-size: .8rem; line-height: 1.45; }

.dep-layout { display: grid; grid-template-columns: minmax(520px,1.55fr) minmax(300px,.8fr); gap: 16px; margin-top: 16px; align-items: start; }
.dep-map-card, .dep-info-card, .dep-ranking { padding: 21px; }
.dep-card-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.dep-card-heading h2, .dep-info-card h2, .dep-ranking h2 { margin: 0; color: var(--ink); font-size: 1.1rem; font-weight: 680; }
.dep-card-heading p, .dep-info-card > p, .dep-ranking > p { margin: 5px 0 0; color: var(--soft-ink); font-size: .84rem; line-height: 1.5; }
.dep-map-wrap { position: relative; min-height: 535px; margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg,#eef5f7,#f9fbfc); }
.dep-map { display: block; width: 100%; height: 535px; }
.dep-area { stroke: #fff; stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: opacity 160ms ease, filter 160ms ease; }
.dep-area:hover, .dep-area:focus { filter: brightness(.93); outline: none; stroke: var(--navy); stroke-width: 2.2; }
.dep-area.water { fill: #dcebf1; }
.dep-tooltip { position: absolute; z-index: 3; width: 225px; padding: 13px 14px; pointer-events: none; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.97); box-shadow: 0 12px 32px rgba(20,42,67,.16); opacity: 0; transform: translate(10px,10px); }
.dep-tooltip.visible { opacity: 1; }
.dep-tooltip strong { display: block; color: var(--navy); font-size: .88rem; }
.dep-tooltip span { display: block; margin-top: 5px; color: var(--soft-ink); font-size: .76rem; line-height: 1.35; }
.dep-legend { margin-top: 17px; }
.dep-legend-title { color: var(--ink); font-size: .78rem; font-weight: 650; }
.dep-legend-scale { display: grid; grid-template-columns: repeat(10,1fr); gap: 2px; margin-top: 7px; }
.dep-legend-scale span { height: 13px; }
.dep-legend-axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--soft-ink); font-size: .7rem; }

.dep-side { display: grid; gap: 16px; }
.dep-info-card { background: #edf5f8; }
.dep-info-card h2 { color: var(--navy); }
.dep-info-card strong { color: var(--ink); }
.dimension-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 12px; margin-top: 18px; }
.dimension { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: .8rem; }
.dimension::before { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); content: ""; }
.reading-list { margin: 16px 0 0; padding: 0; list-style: none; }
.reading-list li { position: relative; margin-top: 11px; padding-left: 20px; color: var(--soft-ink); font-size: .8rem; line-height: 1.5; }
.reading-list li::before { position: absolute; top: .55em; left: 0; width: 8px; height: 2px; background: var(--warm); content: ""; }

.dep-ranking { margin-top: 16px; }
.rank-list { display: grid; gap: 9px; margin-top: 18px; }
.rank-row { display: grid; grid-template-columns: minmax(170px,1.15fr) 72px minmax(150px,.9fr) 105px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.rank-row:first-child { border-top: 0; }
.rank-name { color: var(--ink); font-size: .84rem; }
.rank-decile { color: var(--navy); font-size: .78rem; font-weight: 680; }
.rank-track { height: 9px; overflow: hidden; border-radius: 999px; background: var(--panel-soft); }
.rank-fill { display: block; width: var(--rank-width); height: 100%; border-radius: inherit; background: var(--rank-colour); }
.rank-young { color: var(--soft-ink); font-size: .76rem; text-align: right; white-space: nowrap; }
.dep-notes { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.72); }
.dep-notes summary { color: var(--navy); font-size: .9rem; font-weight: 680; }
.dep-notes p { margin: 12px 0 0; color: var(--soft-ink); font-size: .82rem; line-height: 1.55; }
.dep-notes a { color: var(--blue); }

@media (max-width: 940px) { .dep-layout { grid-template-columns: 1fr; } .dep-side { grid-template-columns: repeat(2,minmax(0,1fr)); } .dep-age-controls { grid-template-columns: 160px 1fr; } .dep-age-controls > p { grid-column: 1/-1; } }
@media (max-width: 700px) { .dep-stat-grid, .dep-side { grid-template-columns: 1fr; } .dep-map-wrap, .dep-map { min-height: 430px; height: 430px; } .rank-row { grid-template-columns: minmax(130px,1fr) 68px 80px; } .rank-track { display: none; } }
@media (max-width: 560px) { .dep-age-controls { grid-template-columns: 1fr; } .dep-age-controls > p { grid-column: auto; } }
@media (max-width: 430px) { .dep-card-heading { display: block; } .dimension-grid { grid-template-columns: 1fr; } .rank-young { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .dep-area { transition: none; } }