/* CONNECT-UI-01 (owner directive 2026-10-28): Get Connected map page.
   Uses the site tokens only, so dark and light themes both work from the
   same rules. No keyframe animations here: the site reduced-motion blanket
   kills animation, transitions still run. The section padding is set
   explicitly (INBOX-PAD-01 lesson: style.css pads every <section>). */
.cx-sec{padding-top:6px}
.cx-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.9fr);gap:28px;align-items:start}
@media(max-width:980px){.cx-layout{grid-template-columns:1fr}}
.cx-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.cx-search{flex:1;min-width:220px;position:relative}
.cx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cx-search input{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:11px 16px;font:inherit;font-size:var(--fs-md);outline:none}
.cx-search input:focus{border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-dim)}
.cx-mapmeta{color:var(--mut);font-size:var(--fs-sm)}
.cx-reset{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:10px 16px;font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;white-space:nowrap}
.cx-reset:hover{border-color:var(--lime)}
.cx-map{height:560px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--panel2);z-index:0}
@media(max-width:640px){.cx-map{height:420px}}
.cx-map .leaflet-container{background:var(--panel2);font-family:var(--ff-body);color:var(--ink)}
.cx-map .leaflet-control-zoom{border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:none}
.cx-map .leaflet-control-zoom a{background:var(--panel);color:var(--ink);border-color:var(--line)}
.cx-map .leaflet-control-zoom a:hover{background:var(--panel2);color:var(--lime)}
.cx-map .leaflet-control-attribution{background:var(--panel);color:var(--mut);opacity:.92}
.cx-map .leaflet-control-attribution a{color:var(--mut)}
.cx-divicon{background:transparent;border:none}
.cx-pin{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.cx-pin-avatars{display:flex}
.cx-pin-avatars img,.cx-pin-ini{width:26px;height:26px;border-radius:50%;border:2px solid var(--panel);object-fit:cover;background:var(--lime);color:var(--bg);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-left:-7px}
.cx-pin-avatars>*:first-child{margin-left:0}
.cx-pin-count{background:var(--lime);color:var(--bg);font-size:11px;font-weight:800;border-radius:999px;padding:1px 8px;line-height:1.5}
.cx-pin-label{background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.cx-pin.is-sel .cx-pin-label{background:var(--lime);color:var(--bg);border-color:transparent}
.cx-note{color:var(--mut);font-size:var(--fs-sm);margin:10px 2px 0}
.cx-panel{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:none}
.cx-panel.is-open{display:block}
.cx-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.cx-panel-head h2{margin:0;font-size:var(--fs-xl)}
.cx-panel-sub{color:var(--mut);font-size:var(--fs-sm);margin:6px 0 0}
.cx-panel-close{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:999px;width:32px;height:32px;cursor:pointer;font-size:16px;line-height:1;flex:none}
.cx-panel-close:hover{color:var(--ink);border-color:var(--lime)}
.cx-members{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cx-member{display:flex;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-in);padding:10px 12px;min-width:0}
.cx-member img,.cx-member-ini{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--lime-dim);color:var(--lime);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
.cx-member b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-member span{color:var(--mut);font-size:var(--fs-xs)}
.cx-panel-empty{color:var(--mut);margin:16px 0 0}
.cx-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.cx-stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-in);padding:16px}
.cx-stat b{display:block;font-size:1.75rem;line-height:1.1}
.cx-stat span{color:var(--mut);font-size:var(--fs-sm)}
.cx-rank{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.cx-rank h2{margin:0 0 4px;font-size:var(--fs-xl)}
.cx-rank-sub{color:var(--mut);font-size:var(--fs-sm);margin:0 0 16px}
.cx-ranklist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cx-rankrow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:var(--r-in2);cursor:pointer;border:1px solid transparent;transition:background .2s,border-color .2s}
.cx-rankrow:hover{background:var(--panel2);border-color:var(--line)}
.cx-rankrow.is-sel{background:var(--lime-dim);border-color:var(--lime)}
.cx-ranknum{color:var(--mut);font-weight:700;font-size:var(--fs-sm);text-align:center}
.cx-rankrow.is-top .cx-ranknum{color:var(--lime)}
.cx-rankcity{font-weight:600;min-width:0}
.cx-rankcity .cx-rankbar{display:block;height:5px;background:var(--track);border-radius:999px;overflow:hidden;margin-top:6px}
.cx-rankcity .cx-rankbar i{display:block;height:100%;background:linear-gradient(90deg,var(--lime2),var(--lime));border-radius:inherit}
.cx-rankcount{font-weight:700;text-align:right;white-space:nowrap}
.cx-rankcount small{display:block;color:var(--mut);font-weight:400;font-size:var(--fs-xs)}
.cx-tag{display:inline-block;font-size:var(--fs-xs);color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:middle;font-weight:400}
.cx-rest{display:none}
.cx-rest.is-open{display:grid}
.cx-seemore{width:100%;margin-top:14px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:11px;font:inherit;font-weight:600;cursor:pointer}
.cx-seemore:hover{border-color:var(--lime)}
.cx-extra{display:none;margin-top:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.cx-extra.is-open{display:block}
.cx-extra h3{margin:22px 0 10px;font-size:var(--fs-lg)}
.cx-extra h3:first-child{margin-top:0}
.cx-split{display:grid;gap:10px}
.cx-splitrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;font-size:var(--fs-md);align-items:baseline}
.cx-splitrow b{white-space:nowrap}
.cx-splitbar{height:5px;background:var(--track);border-radius:999px;overflow:hidden;margin-top:-4px}
.cx-splitbar i{display:block;height:100%;background:linear-gradient(90deg,var(--lime2),var(--lime));border-radius:inherit}
.cx-unmapped{color:var(--mut);font-size:var(--fs-sm);line-height:1.7;margin:0}
.cx-cta{margin-top:20px;background:var(--lime-dim);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.cx-cta h3{margin:0 0 6px}
.cx-cta p{margin:0 0 14px;color:var(--body)}
.cx-fallback{padding:48px 20px;text-align:center;color:var(--mut)}
/* CONNECT-CHIPS-01 (research fold-in 2026-10-28): region highlight chips
   above the map, and pin size tiers by student count. */
.cx-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.cx-chip{background:var(--panel2);border:1px solid var(--line);color:var(--body);border-radius:999px;padding:7px 14px;font:inherit;font-size:var(--fs-sm);cursor:pointer}
.cx-chip.is-on{background:var(--lime);color:var(--bg);border-color:transparent;font-weight:700}
.cx-pin{transition:opacity .2s ease}
.cx-pin-dim{opacity:.25;filter:grayscale(1)}
.cx-pin-lg .cx-pin-avatars img,.cx-pin-lg .cx-pin-ini{width:30px;height:30px;font-size:11px}
.cx-pin-lg .cx-pin-label{font-size:13px}
.cx-pin-xl .cx-pin-avatars img,.cx-pin-xl .cx-pin-ini{width:38px;height:38px;font-size:12px}
.cx-pin-xl .cx-pin-label{font-size:13px;font-weight:700}