/* UK Who lives here (app/modules/residents/uk.php): ukr- rules, core tokens. Categorical slots c0-c5 validated for colour-blind separation (light surface); every chart also has labels or hover text. */
:root{--ukr-c0:#2a78d6;--ukr-c1:#eb6834;--ukr-c2:#1baf7a;--ukr-c3:#eda100;--ukr-c4:#e87ba4;--ukr-c5:#6250d6;--ukr-dv:#7d8797}
.c0{--c:var(--ukr-c0)}.c1{--c:var(--ukr-c1)}.c2{--c:var(--ukr-c2)}.c3{--c:var(--ukr-c3)}.c4{--c:var(--ukr-c4)}.c5{--c:var(--ukr-c5)}
.ukr-two{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.ukr-mt{margin-top:22px}.ukr-mt8{margin-top:8px}
.ukr-fig{min-width:0}
.ukr-fig h4{margin:0 0 10px;font-size:15px;color:var(--ink)}
.ukr-fig h4 span{font-weight:500;color:var(--muted)}
.ukr-leg{margin-top:10px}
/* keys */
.ukr-key{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-2);margin-bottom:10px}
.ukr-key span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ukr-key i{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--bar)}
.ukr-key i.me{background:var(--accent)}.ukr-key i.en{background:var(--ink-2)}.ukr-key i.dv{background:var(--ukr-dv)}
.ukr-key i.sq{width:11px;height:11px;border-radius:3px;background:var(--c,var(--accent))}
.ukr-key i.sq.me{background:var(--accent)}
.ukr-key i.tk{width:2px;height:12px;background:var(--ink)}
.ukr-key b{margin-left:auto;padding-left:8px;color:var(--ink)}
.ukr-key.ukr-col{flex-direction:column;gap:7px;margin-top:14px;font-size:14px}
.ukr-key.ukr-col span{display:flex}
.ukr-key.ukr-lk i.me{background:var(--accent)}
/* line chart */
.ukr-gl{stroke:var(--hair);stroke-width:1}
.ukr-ax{font:500 11px var(--sans);fill:var(--faint)}
.ukr-ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ukr-ln.me{stroke:var(--accent);stroke-width:2.5}.ukr-ln.en{stroke:var(--ink-2)}.ukr-ln.dv{stroke:var(--ukr-dv);stroke-dasharray:5 4}
.ukr-end{stroke:var(--bg);stroke-width:2}.ukr-end.me{fill:var(--accent)}.ukr-end.en{fill:var(--ink-2)}.ukr-end.dv{fill:var(--ukr-dv)}
.ukr-dl{font:600 12px var(--sans);fill:var(--ink-2)}
.ukr-hit{fill:transparent}.ukr-hit:hover{fill:rgba(15,22,35,.04)}
/* diverging change bars */
.ukr-dv{display:grid;grid-template-columns:96px 1fr 48px;gap:10px;align-items:center;margin:9px 0;font-size:13.5px}
.ukr-dv .l{color:var(--ink-2)}.ukr-dv .v{text-align:right;font-weight:700}
.ukr-dvt{position:relative;height:18px;background:var(--surface);border-radius:4px}
.ukr-dvt .z{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--line)}
.ukr-dvt .b{position:absolute;top:3px;bottom:3px;background:var(--accent);border-radius:0 4px 4px 0}
/* age columns */
.ukr-ages{display:grid;grid-template-columns:repeat(18,1fr);gap:4px;height:200px;align-items:end;border-bottom:1px solid var(--line)}
.ukr-ac{position:relative;height:100%;display:flex;align-items:flex-end;cursor:default}
.ukr-ac i{display:block;width:100%;background:color-mix(in srgb,var(--accent) 55%,#fff);border-radius:4px 4px 0 0}
.ukr-ac.hi i{background:var(--accent)}
.ukr-ac em{position:absolute;left:-2px;right:-2px;height:2px;background:var(--ink);border-radius:1px}
.ukr-ac:hover i{filter:brightness(.92)}
.ukr-ax5{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:4px;font-size:11px;color:var(--faint);margin-top:5px;white-space:nowrap}
.ukr-ax5 span:nth-last-child(2){justify-self:end}   /* "80–84" is wider than its column */
.ukr-arr{grid-template-columns:repeat(9,1fr);height:170px;gap:6px}
.ukr-arr .ukr-ac i{background:var(--accent)}
.ukr-ax9{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;font-size:10.5px;color:var(--faint);margin-top:5px;text-align:center;line-height:1.2}
/* histogram */
.ukr-hist{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;height:140px;align-items:end;border-bottom:1px solid var(--line)}
.ukr-hb{height:100%;display:flex;align-items:flex-end}
.ukr-hb i{display:block;width:100%;background:var(--bar);border-radius:3px 3px 0 0}
.ukr-hb.me i{background:var(--accent)}
.ukr-hx{margin:5px 0 0}
.ukr-me-t{color:var(--accent)}
/* stacked bars */
.ukr-sr{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center;margin:8px 0;font-size:13.5px}
.ukr-sr .l{color:var(--ink-2)}
.ukr-stk{display:flex;gap:2px;height:22px;border-radius:5px;overflow:hidden}
.ukr-stk i{display:block;height:100%;background:var(--c);min-width:2px}
.ukr-stk i.c0{background:var(--ukr-c0)}.ukr-stk i.c1{background:var(--ukr-c1)}.ukr-stk i.c2{background:var(--ukr-c2)}.ukr-stk i.c3{background:var(--ukr-c3)}.ukr-stk i.c4{background:var(--ukr-c4)}.ukr-stk i.c5{background:var(--ukr-c5)}
.ukr-stk i:hover{filter:brightness(.9)}
/* waffle */
.ukr-waf{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;max-width:330px}
.ukr-waf i{aspect-ratio:1;border-radius:4px;background:var(--c)}
.ukr-waf i:hover{outline:2px solid var(--ink);outline-offset:1px}
/* dot plots */
.ukr-dot{display:grid;grid-template-columns:150px 1fr 48px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.ukr-dot .l{color:var(--ink-2)}.ukr-dot .v{text-align:right;font-weight:700}
.ukr-dt{position:relative;height:16px}
.ukr-dt::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hair)}
.ukr-dt .rng{position:absolute;top:50%;height:3px;margin-top:-1.5px;background:var(--line);border-radius:2px}
.ukr-dt .d{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--bg)}
.ukr-dt .d.me{background:var(--accent);width:14px;height:14px;margin:-7px 0 0 -7px;z-index:2}.ukr-dt .d.dv{background:var(--ukr-dv)}.ukr-dt .d.en{background:var(--ink-2)}
.ukr-dax{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin:6px 58px 0 160px}
/* big number */
.ukr-big{display:flex;gap:14px;align-items:baseline;margin-bottom:16px}
.ukr-big b{font-size:34px;line-height:1;color:var(--accent-ink)}
.ukr-big span{font-size:14px;color:var(--ink-2)}
/* neighbourhoods */
.ukr-nh,.ukr-nr{display:grid;grid-template-columns:200px 1fr 34px 110px 40px;gap:10px;align-items:center}
.ukr-nh{font-size:11.5px;color:var(--muted);font-weight:600;padding-bottom:6px;border-bottom:1px solid var(--line)}
.ukr-nh small{font-weight:500;color:var(--faint)}
.ukr-nr{padding:7px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.ukr-nr:hover{background:var(--surface)}
.ukr-nr .l{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ukr-nr .v{text-align:right;font-weight:700}
.ukr-nt{position:relative;height:14px}
.ukr-nt::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--hair);border-radius:1px}
.ukr-nt .cm{position:absolute;top:-2px;bottom:-2px;width:1px;border-left:1px dashed var(--faint)}
.ukr-nt .d{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--accent)}
.ukr-sb{height:10px;background:var(--hair);border-radius:5px;overflow:hidden}
.ukr-sb i{display:block;height:100%;background:var(--ukr-c0);border-radius:5px}
/* peers strip */
.ukr-strip{position:relative;height:56px;margin:30px 0 0;border-bottom:1px solid var(--line)}
.ukr-strip a{position:absolute;bottom:10px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--bar);border:2px solid var(--bg)}
.ukr-strip a:hover{background:var(--ink-2)}
.ukr-strip a.me{background:var(--accent);width:16px;height:16px;margin-left:-8px;z-index:2}
.ukr-strip .ukr-pl.me{position:absolute;transform:translateX(-50%);font-size:13px;color:var(--accent-ink);white-space:nowrap}
.ukr-pls{position:relative;height:22px}
.ukr-pls .ukr-pl{position:absolute;top:4px;transform:translateX(-50%);font-size:11.5px;color:var(--muted);white-space:nowrap}
.ukr-strip .ukr-pl.l,.ukr-pls .ukr-pl.l{transform:translateX(-8px)}.ukr-strip .ukr-pl.r,.ukr-pls .ukr-pl.r{transform:translateX(calc(8px - 100%))}
#size .ukr-dax{margin:0}
/* age map */
.ukr-amap .nbmap path.o{fill:var(--hair)}
.ukr-amap .nbmap path.ukr-a1{fill:#dbeafb}.ukr-amap .nbmap path.ukr-a2{fill:#a9cbf1}.ukr-amap .nbmap path.ukr-a3{fill:#6fa6e4}.ukr-amap .nbmap path.ukr-a4{fill:#3a7fd2}.ukr-amap .nbmap path.ukr-a5{fill:#1f5aa5}
.ukr-key i.sq.ukr-a1{background:#dbeafb}.ukr-key i.sq.ukr-a2{background:#a9cbf1}.ukr-key i.sq.ukr-a3{background:#6fa6e4}.ukr-key i.sq.ukr-a4{background:#3a7fd2}.ukr-key i.sq.ukr-a5{background:#1f5aa5}
.ukr-amap .nbmap path.me{stroke:var(--ink);stroke-width:1.6}
.ukr-amap .nbmap a:hover path{stroke:var(--ink);stroke-width:1.2}
/* link cards */
.ukr-more{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ukr-more a{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink-2);font-size:13.5px}
.ukr-more a:hover{border-color:var(--accent);background:var(--accent-tint)}
.ukr-more a b{color:var(--ink);font-size:15px;display:flex;gap:8px;align-items:center}
/* hero figure */
.ukr-hfig{display:flex;flex-direction:column;align-items:center;gap:6px}
.ukr-hfig b{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:20px;background:var(--accent);color:#fff;font-size:30px;font-weight:800;letter-spacing:-.02em}
.ukr-hfig small{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.has-photo .ukr-hfig small{color:#fff}
@media (max-width:860px){
  .ukr-two{grid-template-columns:1fr}
  .ukr-more{grid-template-columns:1fr 1fr}
  .ukr-nh,.ukr-nr{grid-template-columns:130px 1fr 30px 60px 36px;gap:6px}
  .ukr-ax5 span:nth-child(4n+3){visibility:hidden}
  .ukr-dot{grid-template-columns:110px 1fr 44px}
  .ukr-dax{margin-left:120px;margin-right:54px}
  .ukr-sr{grid-template-columns:96px 1fr}
  .ukr-pls .ukr-pl:nth-child(even){top:16px}
  .ukr-pls{height:36px}
}
.ukr-fig .brow .trk{position:relative}
.ukr-sr.me .l{font-weight:700;color:var(--ink)}
.ukr-nbh:not(.all) .ukr-mid{display:none}
.ukr-showall{margin-top:10px;background:none;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font:600 13px var(--sans);color:var(--accent-ink);cursor:pointer}
.ukr-showall:hover{border-color:var(--accent)}
/* bars in half-width figures: wrap long labels */
.ukr-fig .brow{grid-template-columns:170px 1fr 46px}
.ukr-fig .brow .l{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
.ukr-fig .brow.wh2 .trk .fill:first-child{background:var(--accent)}
@media (max-width:860px){.ukr-fig .brow{grid-template-columns:120px 1fr 42px}}
.ukr-fig .wh2 .trk{height:19px}
.ukr-fig .wh2 .fill.r.c-st{top:9px;height:4px;background:var(--ukr-dv)}
.ukr-fig .wh2 .fill.r.c-us{top:15px;height:4px;background:var(--ink-2)}
.ukr-fig .wh2{min-height:32px}
.ukr-key.ukr-leg i{width:14px;height:4px;border-radius:2px}
.ukr-key.ukr-dk i{width:10px;height:10px;border-radius:50%}
.ukr-pstk{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:5px;height:22px}
.ukr-pstk>div{flex:none}
.ukr-pstk .ukr-stk{border-radius:5px 0 0 5px}
.ukr-pstk b{font-size:13px;color:var(--ink)}
.ukr-m0{margin:0 0 6px}
.ukr-dvt .z{left:0}