/* ===== Mechanicsburg Alumni Map ===== */
:root{
  /* fixed brand maroons — header, feature tile, PA gradient (same in both themes) */
  --maroon:#6d1f2c; --maroon-dark:#4a141d; --maroon-deep:#360d14;
  --radius:14px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

  /* themed tokens — LIGHT (default) */
  --paper:#faf7f5; --card:#ffffff; --ink:#201c1d; --line:#e7ded9;
  --steel:#8b9198; --steel-lt:#c9ced2; --gold:#b98a2e;
  --accent:#6d1f2c; --accent-strong:#4a141d;
  --tip-bg:#201c1d; --tip-fg:#ffffff;
  --ramp-lo:#f0cdd4; --ramp-hi:#5a1622; --pa-fill:#360d14;
  --map-nodata:#e7e2df; --map-stroke:#ffffff; --map-bg:#ffffff; --hl:#e6a400;
  --shadow:0 2px 10px rgba(54,13,20,.08), 0 8px 30px rgba(54,13,20,.06);
}
/* DARK tokens — follow OS unless the viewer forced light */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#181113; --card:#241a1d; --ink:#f3e9ea; --line:#3a2b2f;
    --steel:#a1969a; --steel-lt:#5c4c50; --gold:#e0b25a;
    --accent:#e8788a; --accent-strong:#f2a3b0;
    --tip-bg:#0d0a0b; --tip-fg:#ffffff;
    --ramp-lo:#6a3742; --ramp-hi:#f26a80; --pa-fill:#ffc2cc;
    --map-nodata:#33272b; --map-stroke:#5a464b; --map-bg:#0e0a0b; --hl:#ffd54a;
    --shadow:0 2px 10px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.35);
  }
}
/* explicit toggle wins over the media query in both directions */
:root[data-theme="dark"]{
  --paper:#181113; --card:#241a1d; --ink:#f3e9ea; --line:#3a2b2f;
  --steel:#a1969a; --steel-lt:#5c4c50; --gold:#e0b25a;
  --accent:#e8788a; --accent-strong:#f2a3b0;
  --tip-bg:#0d0a0b; --tip-fg:#ffffff;
  --ramp-lo:#6a3742; --ramp-hi:#f26a80; --pa-fill:#ffc2cc;
  --map-nodata:#33272b; --map-stroke:#5a464b; --map-bg:#0e0a0b; --hl:#ffd54a;
  --shadow:0 2px 10px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 50% -8%, rgba(109,31,44,.06), transparent 60%),
    var(--paper);
  line-height:1.45;
}

/* ---------- Header ---------- */
.site-header{
  display:flex; align-items:center; gap:18px;
  padding:20px clamp(16px,4vw,44px);
  background:linear-gradient(100deg, var(--maroon-deep), var(--maroon) 65%, var(--maroon-dark));
  color:#fff;
  box-shadow:var(--shadow);
}
.site-header .logo{ height:66px; width:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.site-header .bh-title{
  margin:0; font-size:clamp(1.15rem,2.6vw,1.9rem); font-weight:800; letter-spacing:.3px;
}
.site-header .subtitle{ margin:.25rem 0 0; color:#f2d9de; font-size:.98rem; font-weight:500; }
.site-header .subtitle span{ color:#fff; font-weight:700; }
.theme-toggle{ position:fixed; top:14px; right:14px; z-index:60; display:inline-flex; align-items:center;
  gap:7px; background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:8px 14px; font:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .1s, background .15s; }
.theme-toggle:hover{ transform:translateY(-1px); }
.theme-toggle .tt-icon{ font-size:.95rem; line-height:1; color:var(--accent); }

/* ---------- Animated intro / hero ---------- */
html{ scroll-behavior:smooth; }
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:64px 20px; overflow:hidden; color:#fff;
  background:linear-gradient(160deg, #360d14 0%, #4a141d 55%, #6d1f2c 100%); }
.hero-bg{ position:absolute; inset:0; background:url("../img/entrance.jpg") center/cover no-repeat;
  opacity:.13; filter:saturate(.55); }
.hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 28%, transparent 42%, rgba(28,6,10,.6) 100%); }
.hero-inner{ position:relative; z-index:1; max-width:860px; display:flex; flex-direction:column;
  align-items:center; gap:16px; }
.hero-logo{ width:min(168px,38vw); height:auto; filter:drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
.hero-motto{ margin:0; font-size:.82rem; letter-spacing:.34em; text-transform:uppercase; font-weight:700;
  color:#e6c27a; padding-left:.34em; }
.hero-title{ margin:0; font-family:Georgia,"Times New Roman",serif; font-weight:800; line-height:1.04;
  font-size:clamp(2.1rem,6vw,4.1rem); text-wrap:balance; letter-spacing:-.5px; }
.hero-tagline{ margin:0; max-width:46ch; font-size:clamp(1rem,2.3vw,1.35rem); color:#f4dce0; line-height:1.5; }
.hero-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(22px,6vw,64px); margin-top:12px; }
.hstat{ display:flex; flex-direction:column; gap:4px; }
.hstat-v{ font-family:Georgia,"Times New Roman",serif; font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(2.1rem,6.5vw,3.4rem); line-height:1; }
.hstat-k{ font-size:.76rem; letter-spacing:.11em; text-transform:uppercase; color:#e9c8cd; font-weight:600; }
.hero-cta{ margin-top:20px; display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:#fff; font-weight:700; font-size:1rem; padding:13px 28px; border-radius:999px;
  border:1.5px solid rgba(255,255,255,.5); transition:background .18s, border-color .18s; }
.hero-cta:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.cta-arrow{ animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.hero-logo,.hero-motto,.hero-title,.hero-tagline,.hero-stats,.hero-cta{
  animation:rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-logo{ animation-delay:.05s; }
.hero-motto{ animation-delay:.28s; }
.hero-title{ animation-delay:.44s; }
.hero-tagline{ animation-delay:.64s; }
.hero-stats{ animation-delay:.86s; }
.hero-cta{ animation-delay:1.15s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-logo,.hero-motto,.hero-title,.hero-tagline,.hero-stats,.hero-cta,.cta-arrow{ animation:none; }
}

/* ---------- Section ---------- */
.map-section{ padding:clamp(16px,3vw,32px) clamp(12px,4vw,44px) 48px; max-width:1280px; margin:0 auto; }

/* ---------- Controls ---------- */
.controls{
  display:flex; align-items:center; gap:18px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 20px; box-shadow:var(--shadow); margin-bottom:20px;
}
.ctrl-label{ font-size:.85rem; font-weight:600; color:var(--accent); white-space:nowrap; }
.slider-wrap{ flex:1; min-width:180px; }
#year-slider{ width:100%; accent-color:var(--accent); height:22px; cursor:pointer; }
.tick-row{ display:flex; justify-content:space-between; margin-top:2px; padding:0 2px; }
.tick-row span{ font-size:.68rem; color:var(--steel); }
.tick-row span.on{ color:var(--accent); font-weight:800; }
.year-badge{
  min-width:84px; text-align:center; font-weight:800; font-size:1.5rem;
  color:var(--accent); font-variant-numeric:tabular-nums;
}

/* ---------- Layout ---------- */
.map-layout{ display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start; }
.map-col{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow); }
.map-holder{ position:relative; width:100%; background:var(--map-bg); border-radius:10px; }
#us-map{ width:100%; height:auto; display:block; }

.state{ stroke:var(--map-stroke); stroke-width:.6; transition:opacity .12s, filter .12s, fill .5s ease; cursor:pointer; }
.state:hover{ filter:brightness(1.06); }
.state.dim{ opacity:.35; }
.state.binhl{ stroke:var(--hl); stroke-width:2.4; paint-order:stroke; }
.state.sel{ stroke:var(--ink); stroke-width:1.8; }

/* Map hint */
.map-hint{ display:flex; align-items:center; gap:8px; margin-top:12px; padding:9px 13px;
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  border:1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius:10px; font-size:.83rem; color:var(--accent); font-weight:600; }
.map-hint .mh-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation:pulse 2.2s ease-out infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);} 70%{box-shadow:0 0 0 8px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
@media (prefers-reduced-motion:reduce){ .map-hint .mh-dot{ animation:none; } }

/* Legend */
.legend{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:12px;
  font-size:.78rem; color:var(--ink); }
.legend .lg-title{ font-weight:700; margin-right:4px; }
.legend .lg-item{ display:inline-flex; align-items:center; gap:6px; }
.legend .lg-item.clickable{ cursor:pointer; padding:2px 6px; margin:-2px 0; border-radius:7px;
  border:1px solid transparent; transition:background .12s, border-color .12s; }
.legend .lg-item.clickable:hover{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
.legend .lg-item.active{ border-color:var(--hl);
  background:color-mix(in srgb, var(--hl) 18%, transparent); font-weight:700; }
.legend .lg-hint{ width:100%; font-size:.72rem; color:var(--steel); margin-top:2px; }
.legend .sw{ width:20px; height:12px; border-radius:3px; border:1px solid rgba(0,0,0,.08); }
.legend .lg-pa{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.legend .sw-pa{ background:var(--pa-fill); }
.legend .sw-nd{ background:var(--map-nodata); }

/* ---------- Tooltip ---------- */
.tooltip{
  position:absolute; pointer-events:none; z-index:5;
  background:var(--tip-bg); color:var(--tip-fg); padding:7px 11px; border-radius:8px;
  font-size:.85rem; box-shadow:0 6px 20px rgba(0,0,0,.25); white-space:nowrap;
  transform:translate(-50%,-130%);
}
.tooltip b{ font-size:.95rem; }
.tooltip .t-val{ color:#ffd9df; font-weight:700; }

/* ---------- Right rail ---------- */
.rail{ display:flex; flex-direction:column; gap:18px; }
.detail-card, .rank-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px;
}
.detail-card .d-eyebrow{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); font-weight:700; }
.detail-card .d-name{ margin:.15rem 0 .1rem; font-size:1.5rem; font-weight:800; color:var(--accent); }
.detail-card .d-big{ font-size:2.6rem; font-weight:800; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.detail-card .d-sub{ color:var(--steel); font-size:.9rem; margin-top:2px; }
.d-stats{ display:flex; gap:20px; margin:14px 0 6px; }
.d-stats .k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--steel);
  font-weight:700; }
.d-stats .v{ font-size:1.15rem; font-weight:800; font-variant-numeric:tabular-nums; }
.v.up{ color:#2f7d43; } .v.down{ color:#b3402f; }
.spark-wrap{ position:relative; margin-top:10px; }
.spark{ width:100%; height:150px; display:block; }
.spark .grid{ stroke:var(--line); stroke-width:1; }
.spark .pt{ fill:var(--accent); }
.spark .pt-cur{ fill:var(--gold); }
.spark .focus-line{ stroke:var(--steel); stroke-width:1; stroke-dasharray:3 3; }
.spark .focus-dot{ fill:var(--card); stroke:var(--accent); stroke-width:2.5; }
.spark .yr{ font-size:9px; fill:var(--steel); }
.spark-hit{ fill:transparent; cursor:crosshair; }
.spark-tip{ position:absolute; pointer-events:none; z-index:5; transform:translate(-50%,-118%);
  background:var(--tip-bg); color:var(--tip-fg); padding:5px 9px; border-radius:7px; font-size:.78rem;
  white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.spark-tip b{ color:#ffd9df; }
.spark-legend{ font-size:.72rem; color:var(--steel); margin-top:2px; text-align:right; }
.d-hint{ font-size:.8rem; color:var(--steel); margin-top:10px; }
.clear-sel{ background:none; border:1px solid var(--line); border-radius:999px; color:var(--accent);
  font:inherit; font-weight:600; font-size:.8rem; padding:4px 12px; cursor:pointer; margin-top:12px; }
.clear-sel:hover{ background:var(--paper); }

/* PA hero (default detail) */
.pa-hero .d-name{ color:var(--accent); }
.pa-hero .pa-share{ display:flex; align-items:baseline; gap:8px; margin-top:6px; }
.pa-hero .pa-share .pct{ font-size:1.3rem; font-weight:800; color:var(--accent); }

/* Movers card (change over time) */
.movers-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px; }
.movers-card .m-title{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel); font-weight:700; }
.movers-card .m-span{ color:var(--accent); }
.m-group-h{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
  font-weight:700; margin:12px 0 1px; }
.mover{ display:flex; align-items:baseline; gap:10px; padding:5px 6px; margin:0 -6px;
  border-radius:7px; cursor:pointer; }
.mover:hover{ background:color-mix(in srgb, var(--accent) 9%, transparent); }
.mover .m-arrow{ font-size:1rem; font-weight:800; width:1.1em; }
.mover .m-arrow.up{ color:#2f9e57; } .mover .m-arrow.down{ color:#e0637a; }
.mover .m-place{ font-weight:700; flex:1; }
.mover .m-place small{ color:var(--steel); font-weight:500; }
.mover .m-delta{ font-weight:800; font-variant-numeric:tabular-nums; }
.mover .m-delta.up{ color:#2f9e57; } .mover .m-delta.down{ color:#e0637a; }
.mover .m-pct{ color:var(--steel); font-size:.82rem; font-variant-numeric:tabular-nums; min-width:3.2em;
  text-align:right; }
/* secondary movers (ranks 2-3): subtler, aligned under the leader */
.mover.sub{ padding-top:2px; padding-bottom:2px; }
.mover.sub .m-place{ font-weight:600; font-size:.88rem; }
.mover.sub .m-place small{ font-size:.8rem; }
.mover.sub .m-delta{ font-weight:700; font-size:.88rem; opacity:.8; }
.mover.sub .m-pct{ font-size:.76rem; }

/* Ranked list */
.rank-card{ padding:14px 8px 10px; }
.rank-title{ display:flex; justify-content:space-between; align-items:baseline; padding:0 12px 6px; }
.rank-title .rt-name{ font-size:.95rem; font-weight:800; color:var(--ink); }
.rank-title .rt-year{ font-size:.8rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.rank-head{ display:flex; justify-content:space-between; padding:0 12px 8px;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--steel); font-weight:700;
  border-bottom:1px solid var(--line); }
.rank-list{ list-style:none; margin:0; padding:4px; max-height:330px; overflow-y:auto; }
.rank-list li{ position:relative; display:grid; grid-template-columns:26px 1fr auto; align-items:center;
  gap:8px; padding:7px 10px; border-radius:9px; cursor:pointer; font-size:.9rem; overflow:hidden; }
.rank-list li > *{ position:relative; z-index:1; }
.rank-list .r-fill{ position:absolute; left:0; top:0; bottom:0; z-index:0; border-radius:9px;
  background:color-mix(in srgb, var(--accent) 15%, transparent); }
.rank-list li:hover .r-fill{ background:color-mix(in srgb, var(--accent) 24%, transparent); }
.rank-list li.sel{ box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.rank-list li.sel .r-fill{ background:color-mix(in srgb, var(--accent) 26%, transparent); }
.rank-list .r-num{ color:var(--steel); font-size:.76rem; font-weight:700; text-align:right; }
.rank-list .r-ab{ font-weight:800; }
.rank-list .r-nm{ color:var(--steel); font-weight:500; font-size:.82rem; margin-left:6px; }
.rank-list .r-val{ font-variant-numeric:tabular-nums; font-weight:700; }

/* ---------- Tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:14px; }
.tile{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; }
.tile.feature{ background:linear-gradient(135deg,var(--maroon),var(--maroon-dark)); color:#fff;
  border-color:transparent; }
.tile.muted{ background:color-mix(in srgb, var(--steel) 8%, var(--card));
  border-style:dashed; }
.tile.muted .t-v{ color:var(--steel); }
.tile .t-k{ font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--steel);
  font-weight:700; }
.tile.feature .t-k{ color:#f0cdd3; }
.tile .t-v{ font-size:1.9rem; font-weight:800; font-variant-numeric:tabular-nums; margin-top:4px; }
.tile .t-note{ font-size:.78rem; color:var(--steel); margin-top:2px; }
.tile.feature .t-note{ color:#f0cdd3; }
.tile{ position:relative; }
.tile .t-year{ position:absolute; top:12px; right:14px; font-size:.72rem; font-weight:700;
  color:var(--steel-lt); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.tile.feature .t-year{ color:rgba(255,255,255,.55); }

.source-note{ font-size:.78rem; color:var(--steel); margin-top:26px; max-width:70ch; }
.source-note p{ margin:.2rem 0; }
.source-note strong{ color:var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .map-layout{ grid-template-columns:1fr; }
  .rank-list{ max-height:300px; }
}
@media (max-width:560px){
  .controls{ flex-wrap:wrap; }
  .year-badge{ font-size:1.25rem; }
  .tiles{ grid-template-columns:1fr 1fr; }
  .site-header .logo{ height:48px; }
}