/* Fan-made mixed-band visual theme. Colors are decorative, never school affiliations. */
:root{
  --band-gradient:linear-gradient(90deg,#ff6699,#e85b64,#65c9b0,#aaa0ef,#edc956,#7acced,#57c8c6,#589edb,#bd6579);
}
:root{
  --paper:#141520;--ink:#deddea;--muted:#aaa8be;--accent:#e49abf;
  --orange:#e49abf;--line:#38364e;--surface:#1e1e2d;--raised:#28263a;--selected:#393049;
  --map-bg:#191d2b;--region:#30354b;--region-alt:#34334c;--region-third:#2c3b4e;
  --region-hover:#4a4966;--region-selected:#55516e;--map-label:#c4c6db;
}
body{background:var(--paper);color:var(--ink)}
body::before{content:"";display:block;height:3px;background:var(--band-gradient);opacity:.8}
.header{background:var(--paper)}
.brand{letter-spacing:1px}
.brand-icon,:root .brand-icon{background:var(--raised);color:var(--accent);border:1px solid var(--line);border-radius:13px 4px 13px 4px;transform:rotate(-6deg)}
.header-note{letter-spacing:1px}
h1 em,:root h1 em{color:var(--accent)}
.intro{padding-bottom:12px}
.intro h1{letter-spacing:1px}
.eyebrow{font-size:10px;letter-spacing:1.5px}
.band-strip{display:flex;gap:10px;flex-direction:column;padding:0 0 18px;line-height:1.6}
.band-group{display:flex;align-items:baseline;gap:8px 16px;min-width:0}
.band-group-label{flex:0 0 132px;font-size:10px;color:var(--muted)}
.band-items{display:flex;flex-wrap:wrap;gap:8px 15px;min-width:0}
.band-note{margin:0;font-size:10px;color:var(--muted)}
.band-note a{color:var(--accent);text-underline-offset:3px}
.band-chip small{font-size:9px;opacity:.8}
.band-chip{font-size:10px;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.band-chip::before{content:"";width:6px;height:6px;background:var(--band);border-radius:50%;flex-shrink:0}
.map-section,:root .map-section{border-color:var(--line);background:var(--surface);box-shadow:0 14px 36px #0002;border-radius:14px}
.map-section::before{content:"";display:block;height:2px;background:var(--band-gradient);opacity:.65}
.map-canvas,:root .map-canvas{background:var(--map-bg)}
#grid circle,:root #grid circle{fill:var(--line)}
.district,:root .district{fill:var(--region);stroke:var(--map-bg)}
.district:nth-child(3n+2),:root .district:nth-child(3n+2){fill:var(--region-alt)}
.district:nth-child(3n),:root .district:nth-child(3n){fill:var(--region-third)}
.district:hover,.district:focus,:root .district:hover,:root .district:focus{fill:var(--region-hover)!important}
.district.selected,:root .district.selected{fill:var(--region-selected)!important;stroke:var(--accent)}
.district[aria-disabled="true"]{cursor:default}
.district[aria-disabled="true"]:hover,.district[aria-disabled="true"]:focus{fill:var(--region)!important}
.district[aria-disabled="true"]:nth-child(3n+2):hover{fill:var(--region-alt)!important}
.district[aria-disabled="true"]:nth-child(3n):hover{fill:var(--region-third)!important}
.district-tabs button:disabled,.search-results button:disabled{opacity:.5;cursor:not-allowed;background:var(--surface)}
.district-label,:root .district-label{fill:var(--map-label);stroke:var(--region)}
.marker .pin,:root .marker .pin{fill:var(--accent);stroke:var(--map-bg);stroke-width:1.4;stroke-linejoin:round}
.marker .halo,:root .marker .halo{fill:var(--accent);opacity:.12}
.marker:hover .pin,.marker:focus .pin,.marker.active .pin,:root .marker:hover .pin,:root .marker:focus .pin,:root .marker.active .pin{fill:var(--accent);stroke:var(--ink);stroke-width:2.5}
.marker:focus .halo,.marker.active .halo{opacity:.3}
.region-swatch,:root .region-swatch{background:var(--region-selected)}
.point-swatch,:root .point-swatch{background:var(--accent);border:0;clip-path:polygon(50% 0,62% 34%,100% 38%,71% 61%,80% 100%,50% 77%,20% 100%,29% 61%,0 38%,38% 34%)}
.map-caption small,.compass,.legend{color:var(--muted)}
.live-dot{background:var(--accent)}
.search,.search-results,.search-results button,.popup,.map-actions button,.district-tabs button,.campus-card{background:var(--surface);color:var(--ink);border-color:var(--line)}
.search,:root .search{background:var(--paper)}
.search-results button:hover,.map-actions button:hover,.focus-button:hover{background:var(--selected)}
.focus-button,.school-icon,.tag{background:var(--raised);color:var(--accent)}
.outline-button{color:var(--ink);border-color:var(--line);background:transparent}
.campus-card,:root .campus-card{border-radius:5px 16px 16px 5px;border-left:3px solid var(--accent);background:var(--surface);padding:20px}
.campus-card:nth-child(3n+2){border-left-color:#7bafd0}
.campus-card:nth-child(3n){border-left-color:#b29bcf}
.campus-card:hover,:root .campus-card:hover{border-top-color:var(--accent);border-right-color:var(--accent);border-bottom-color:var(--accent);box-shadow:0 8px 20px #0002}
.campus-card.selected,.district-tabs button.active{background:var(--selected);border-color:var(--accent);color:var(--ink)}
.card-bottom{padding-top:13px;border-top:1px dashed var(--line);color:var(--muted)}
.club-label{font-size:11px;letter-spacing:.5px}
.club-value{font-weight:500}
.school-icon{border:1px solid var(--line);border-radius:50%}
.school-icon.school-logo{overflow:hidden;flex-shrink:0;padding:0;background:#fff}
.school-logo img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;object-position:center;border-radius:50%}
.school-logo img.school-logo-contain{object-fit:contain;border-radius:0}
#campus-detail{background:var(--raised)}
#campus-detail:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:32px}
.campus-detail-content{flex:1;min-width:0}
.campus-detail-logo{flex:0 0 auto;margin:0 32px}
.campus-detail-logo .school-icon{width:160px;height:160px;font-size:64px}
#campus-detail p{color:var(--muted)}
button:focus-visible,a:focus-visible,input:focus-visible{outline-color:var(--accent)}
.search:focus-within{border-color:var(--accent)}
.search input::placeholder{color:var(--muted)}
footer strong{color:var(--accent)}
@media(max-width:520px){
  #campus-detail:not([hidden]){flex-direction:column;align-items:stretch;gap:18px}
  .campus-detail-logo{order:-1;align-self:center;margin:0}
  .campus-detail-logo .school-icon{width:104px;height:104px;font-size:42px}
  .band-strip{gap:6px 12px;padding-bottom:13px}
  .band-group{flex-direction:column;gap:4px}
  .band-group-label{flex-basis:auto}
  .band-items{gap:6px 12px}
  .band-chip{font-size:9px}
  .intro h1{font-size:24px;letter-spacing:0}
  .eyebrow{font-size:9px;letter-spacing:1px}
  .header-note{display:none}
}