/* American Rent Atlas styles.
   Theme tokens (light, then dark via system preference or data-theme), base,
   header, map overlays, side panel, table, responsive. */

:root{
  color-scheme: light;
  --page:#eceef1; --surface:#ffffff; --raised:#f5f7f9; --sunk:#e4e7eb;
  --ink:#101418; --ink2:#4c545f; --muted:#848d99;
  --line:#dce0e5; --line-strong:#c3c9d1;
  --land:#e0e4e9;
  --map-line:rgba(255,255,255,.62); --map-edge:rgba(16,20,24,.38);
  --accent:#2a78d6; --on-accent:#ffffff; --accent-soft:rgba(42,120,214,.12);
  --good:#006300; --crit:#c0392f;
  --ring:rgba(42,120,214,.45);
  --shadow:0 1px 2px rgba(16,20,24,.07), 0 10px 28px rgba(16,20,24,.10);
  --shadow-sm:0 1px 2px rgba(16,20,24,.08);
  --r0:#cde2fb; --r1:#9ec5f4; --r2:#6da7ec; --r3:#3987e5; --r4:#256abf; --r5:#184f95; --r6:#0d366b;
  --g0:#0d366b; --g1:#2a78d6; --g2:#b7d3f6; --g3:#e9e7e3; --g4:#f2b8b8; --g5:#d64a4a; --g6:#8f2020;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --page:#0b0d10; --surface:#14181d; --raised:#1a1f25; --sunk:#0f1216;
    --ink:#eef1f4; --ink2:#a7b0bb; --muted:#7b848f;
    --line:#242a31; --line-strong:#39414a;
    --land:#1a1f26;
    --map-line:rgba(6,8,11,.55); --map-edge:rgba(255,255,255,.30);
    --accent:#3987e5; --on-accent:#06121f; --accent-soft:rgba(57,135,229,.16);
    --good:#0ca30c; --crit:#e66767;
    --ring:rgba(57,135,229,.5);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.45);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --r0:#12325c; --r1:#184f95; --r2:#256abf; --r3:#3987e5; --r4:#6da7ec; --r5:#9ec5f4; --r6:#d7e7fd;
    --g0:#8ec0f5; --g1:#3987e5; --g2:#1c4f8f; --g3:#2b3139; --g4:#8a3030; --g5:#d64a4a; --g6:#f2a0a0;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#0b0d10; --surface:#14181d; --raised:#1a1f25; --sunk:#0f1216;
  --ink:#eef1f4; --ink2:#a7b0bb; --muted:#7b848f;
  --line:#242a31; --line-strong:#39414a;
  --land:#1a1f26;
  --map-line:rgba(6,8,11,.55); --map-edge:rgba(255,255,255,.30);
  --accent:#3987e5; --on-accent:#06121f; --accent-soft:rgba(57,135,229,.16);
  --good:#0ca30c; --crit:#e66767;
  --ring:rgba(57,135,229,.5);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --r0:#12325c; --r1:#184f95; --r2:#256abf; --r3:#3987e5; --r4:#6da7ec; --r5:#9ec5f4; --r6:#d7e7fd;
  --g0:#8ec0f5; --g1:#3987e5; --g2:#1c4f8f; --g3:#2b3139; --g4:#8a3030; --g5:#d64a4a; --g6:#f2a0a0;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:"Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  display:grid; grid-template-rows:auto 1fr; height:100dvh; overflow:hidden;
}
.mono{font-family:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace}
.eyebrow{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
:where(button,input,a,[tabindex]):focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

header{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:10px 18px; background:var(--surface); border-bottom:1px solid var(--line);
  position:relative; z-index:30;
}
.brand{display:flex; flex-direction:column; gap:1px; padding-right:20px; border-right:1px solid var(--line)}
.brand h1{margin:0; font-size:19px; font-weight:700; letter-spacing:-.022em; line-height:1.1}
.brand .eyebrow{font-size:9.5px}
.headline{display:flex; align-items:baseline; gap:10px; padding-right:20px; border-right:1px solid var(--line)}
.headline .num{font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1}
.headline .lab{max-width:158px; font-size:11px; color:var(--ink2); line-height:1.3}
.chip{
  display:inline-flex; align-items:center; gap:4px; padding:1px 7px; border-radius:999px;
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500;
  background:var(--sunk); color:var(--ink2);
}
.chip.up{color:var(--crit)} .chip.down{color:var(--good)}
.controls{display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap}
.seg{display:flex; background:var(--sunk); border-radius:8px; padding:2px; gap:2px}
.seg button{
  padding:5px 11px; border-radius:6px; font-size:12.5px; font-weight:500; color:var(--ink2);
  white-space:nowrap; transition:background .12s, color .12s;
}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm)}
.seg button:hover:not([aria-pressed="true"]){color:var(--ink)}
.search{position:relative}
.search input{
  width:190px; padding:6px 10px 6px 28px; border:1px solid var(--line-strong); border-radius:8px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:12.5px;
}
.search input::placeholder{color:var(--muted)}
.search > svg{position:absolute; left:8px; top:50%; transform:translateY(-50%); color:var(--muted)}
.results{
  position:absolute; top:calc(100% + 5px); left:0; width:288px; max-height:290px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  z-index:40; padding:4px;
}
.results button{
  display:flex; justify-content:space-between; gap:10px; width:100%; padding:6px 8px;
  border-radius:6px; font-size:12.5px; text-align:left;
}
.results button:hover,.results button:focus-visible{background:var(--accent-soft)}
.results .v{font-family:"IBM Plex Mono",monospace; color:var(--ink2); font-size:12px}
.toggle{
  display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink2);
  padding:5px 9px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface);
}
.toggle[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.fetch{display:flex; align-items:center; gap:9px}
#fetchBtn:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
#fetchBtn:disabled{cursor:progress; opacity:.75}
#fetchBtn.busy #fetchIcon{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fetchstat{font-size:11px; color:var(--muted); max-width:220px; line-height:1.3}
.fetchstat.err{color:var(--crit)}

.stage{display:grid; grid-template-columns:minmax(0,1fr) 336px; min-height:0}
.mapwrap{position:relative; min-height:0; background:var(--page); overflow:hidden}
.mapwrap canvas{position:absolute; inset:0; display:block}
#hit{position:absolute; inset:0; cursor:grab; touch-action:pan-y}
#hit.grabbing{cursor:grabbing}
#hit.overpoint{cursor:pointer}
.zoomctl{
  position:absolute; right:16px; top:16px; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:9px;
  box-shadow:var(--shadow); overflow:hidden;
}
.zoomctl button{
  width:30px; height:30px; display:grid; place-items:center;
  background:var(--surface); color:var(--ink2); font-size:15px; line-height:1;
}
.zoomctl button:hover{background:var(--accent-soft); color:var(--accent)}
.zoomctl button:disabled{color:var(--muted); background:var(--surface); cursor:default}
.zoomctl .lvl{
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:var(--muted);
  background:var(--surface); text-align:center; padding:3px 0 4px; cursor:default;
}

.legend{
  position:absolute; left:16px; top:16px; width:268px; padding:11px 13px 10px;
  background:var(--surface); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow);
}
.legend .ttl{font-size:12px; font-weight:600; margin-bottom:1px}
.legend .sub{font-size:11px; color:var(--muted); margin-bottom:8px; line-height:1.3; min-height:28px}
.bar{height:9px; border-radius:3px; border:1px solid var(--line)}
.ticks{display:flex; justify-content:space-between; margin-top:5px}
.ticks span{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink2)}

.scrub{
  position:absolute; left:50%; transform:translateX(-50%); bottom:16px;
  display:flex; align-items:center; gap:12px; padding:8px 14px 8px 10px;
  background:var(--surface); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow);
}
.play{
  width:30px; height:30px; border-radius:8px; background:var(--sunk);
  display:grid; place-items:center; color:var(--ink); flex:none;
}
.play:hover{background:var(--accent-soft); color:var(--accent)}
.scrub .yr{font-family:"IBM Plex Mono",monospace; font-size:16px; font-weight:600; width:44px; text-align:center; letter-spacing:-.01em}
input[type=range]{-webkit-appearance:none; appearance:none; width:230px; height:20px; background:none; cursor:pointer; margin:0}
input[type=range]::-webkit-slider-runnable-track{height:3px; border-radius:2px; background:var(--line-strong)}
input[type=range]::-moz-range-track{height:3px; border-radius:2px; background:var(--line-strong)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; margin-top:-5.5px; border-radius:50%;
  background:var(--accent); border:2px solid var(--surface); box-shadow:var(--shadow-sm);
}
input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--accent);
  border:2px solid var(--surface); box-shadow:var(--shadow-sm);
}
.scrub .span{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--muted); width:56px}

.tip{
  position:absolute; top:0; left:0; pointer-events:none; z-index:20; min-width:176px; padding:9px 11px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  opacity:0; transition:opacity .09s;
}
.tip.on{opacity:1}
.tip .nm{font-size:13px; font-weight:600; letter-spacing:-.01em; line-height:1.2}
.tip .rk{font-size:10.5px; color:var(--muted); margin-top:1px}
.tip .row{display:flex; justify-content:space-between; gap:14px; margin-top:5px; font-size:11.5px; color:var(--ink2)}
.tip .row b{font-family:"IBM Plex Mono",monospace; font-weight:500; color:var(--ink)}
.tip .big{font-family:"IBM Plex Mono",monospace; font-size:19px; font-weight:600; letter-spacing:-.02em; margin-top:5px}

.rail{border-left:1px solid var(--line); background:var(--surface); overflow-y:auto; display:flex; flex-direction:column}
.sec{padding:14px 16px; border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:none}
.sec h2{margin:0 0 8px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.metro-name{font-size:17px; font-weight:600; letter-spacing:-.02em; line-height:1.15}
.metro-sub{font-size:11px; color:var(--muted); margin-top:2px}
.big-num{font-family:"IBM Plex Mono",monospace; font-size:32px; font-weight:600; letter-spacing:-.035em; line-height:1}
.unit{font-size:12px; color:var(--muted)}
.statrow{display:flex; align-items:baseline; gap:9px; margin-top:9px; flex-wrap:wrap}
.kv{display:flex; gap:14px; margin:11px 0 0}
.kv > div{flex:1}
.kv dt{font-size:10.5px; color:var(--muted); margin-bottom:2px}
.kv dd{margin:0; font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:500}
.spark{margin-top:10px; width:100%; height:82px; display:block}
.rank-row{
  display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:center; gap:4px 9px;
  width:100%; padding:5px 6px; border-radius:6px; text-align:left;
}
.rank-row:hover{background:var(--accent-soft)}
.rank-row[aria-current="true"]{background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--ring)}
.rank-row .i{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--muted); text-align:right}
.rank-row .nm{font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rank-row .val{font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500}
.rank-bar{grid-column:2/4; height:3px; border-radius:2px; background:var(--sunk); overflow:hidden}
.rank-bar i{display:block; height:100%; border-radius:2px}
.tabs{display:flex; gap:2px; background:var(--sunk); border-radius:7px; padding:2px; margin-bottom:9px}
.tabs button{flex:1; padding:4px 6px; border-radius:5px; font-size:11.5px; color:var(--ink2); font-weight:500}
.tabs button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm)}
.note{font-size:11px; color:var(--muted); line-height:1.5; margin:0}
details.about summary{
  cursor:pointer; font-size:11.5px; color:var(--ink2); list-style:none;
  display:flex; align-items:center; gap:5px; font-weight:500;
}
details.about summary::-webkit-details-marker{display:none}
details.about summary::before{content:"+"; font-family:"IBM Plex Mono",monospace; color:var(--muted)}
details.about[open] summary::before{content:"\2013"}
details.about .note{margin-top:8px}

.tablewrap{position:absolute; inset:0; background:var(--page); overflow:auto; z-index:25; padding:14px 16px 24px}
table{border-collapse:collapse; width:100%; background:var(--surface); border-radius:10px; overflow:hidden; box-shadow:var(--shadow-sm)}
th,td{padding:7px 12px; text-align:left; border-bottom:1px solid var(--line); font-size:12.5px}
th{
  position:sticky; top:0; background:var(--raised); z-index:2; cursor:pointer; user-select:none;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600;
  white-space:nowrap;
}
th:hover{color:var(--ink)}
th[aria-sort]:not([aria-sort="none"]){color:var(--accent)}
td.n{font-family:"IBM Plex Mono",monospace; text-align:right; font-variant-numeric:tabular-nums}
th.n{text-align:right}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--accent-soft)}
.tablewrap .cap{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; gap:12px}
.tablewrap .table-count{font-size:15px; font-weight:600; letter-spacing:-.02em}
.tablewrap .hint{text-align:right}
.swatch{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:7px; vertical-align:-1px; border:1px solid rgba(128,128,128,.28)}

@media (max-width:940px){
  body{overflow:auto; height:auto; display:block}
  .stage{grid-template-columns:1fr}
  .mapwrap{height:66vh; min-height:400px}
  .rail{border-left:none; border-top:1px solid var(--line); overflow:visible}
  .brand,.headline{border-right:none}
  header{gap:12px}
  .controls{margin-left:0; width:100%}
  .search{flex:1; min-width:150px}
  .search input{width:100%}
  .legend{width:auto; right:16px; max-width:268px}
  .mapwrap{height:70vh}
  .scrub{left:auto; right:16px; top:auto; bottom:16px; transform:none; padding:6px 10px}
  input[type=range]{width:110px}
  .scrub .span{display:none}
  .tablewrap{position:static; height:auto; padding:0 0 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}