/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #f1eee7;
  --surface-3: #e9e5dc;
  --ink: #1b1a17;
  --ink-2: #55514a;
  --muted: #6f6a61;
  --line: #e4dfd5;
  --line-2: #d6d0c4;
  --accent: #e4572e;
  --accent-ink: #b63c17;
  --accent-soft: #fbe5dc;
  --btn-bg: #b63c17; --btn-bg-hover: #8f2d0e; --btn-ink: #fff; /* filled buttons: 5.9:1 light */
  --teal: #16706d;
  --teal-soft: #dcefed;
  --sun: #eaa826;
  --sun-soft: #fbefd2;
  --good: #1d7a3f;
  --bad: #b3261e;
  --h1: #1d7a3f; --h2: #46700f; --h3: #86620a; --h4: #b04a15; --h5: #b3261e;
  --focus: #e4572e;
  --shadow-1: 0 1px 2px rgba(30, 24, 16, .05);
  --shadow-2: 0 2px 6px rgba(30, 24, 16, .06), 0 12px 32px rgba(30, 24, 16, .08);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --t-sfusd: #2a78d6;
  --t-charter: #6a55c9;
  --t-private: #d0552a;
  --t-catholic: #1d7a3f;
  --t-religious: #b43d72;
  --r: 14px;
  --r-sm: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #131210; --surface: #1c1a17; --surface-2: #25221e; --surface-3: #2f2b26;
    --ink: #f3eee6; --ink-2: #c4bcb0; --muted: #9a9388; --line: #312d27; --line-2: #413c34;
    --accent: #f06a47; --accent-ink: #ff9b80; --accent-soft: #3b2119;
    --btn-bg: #f06a47; --btn-bg-hover: #ff9b80; --btn-ink: #1b1a17;
    --teal: #4fb8b3; --teal-soft: #173230; --sun: #f0b94a; --sun-soft: #3a2f16;
    --good: #4cc47a; --bad: #ff7a70; --focus: #f06a47;
    --h1: #4cc47a; --h2: #a3cf4f; --h3: #e8bd4a; --h4: #f38e55; --h5: #ff7a70;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 4px 24px rgba(0, 0, 0, .5);
    --series-1: #4a90e8; --series-2: #e0673a; --series-3: #1fa577;
    --t-sfusd: #5b9bea; --t-charter: #9d8cf0; --t-private: #f08457; --t-catholic: #4cc47a; --t-religious: #e27aa6;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131210; --surface: #1c1a17; --surface-2: #25221e; --surface-3: #2f2b26;
  --ink: #f3eee6; --ink-2: #c4bcb0; --muted: #9a9388; --line: #312d27; --line-2: #413c34;
  --accent: #f06a47; --accent-ink: #ff9b80; --accent-soft: #3b2119;
  --btn-bg: #f06a47; --btn-bg-hover: #ff9b80; --btn-ink: #1b1a17;
  --teal: #4fb8b3; --teal-soft: #173230; --sun: #f0b94a; --sun-soft: #3a2f16;
  --good: #4cc47a; --bad: #ff7a70; --focus: #f06a47;
  --h1: #4cc47a; --h2: #a3cf4f; --h3: #e8bd4a; --h4: #f38e55; --h5: #ff7a70;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 4px 24px rgba(0, 0, 0, .5);
  --series-1: #4a90e8; --series-2: #e0673a; --series-3: #1fa577;
  --t-sfusd: #5b9bea; --t-charter: #9d8cf0; --t-private: #f08457; --t-catholic: #4cc47a; --t-religious: #e27aa6;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink);
  font: 14.5px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
h2 { font-size: 19px; margin: 22px 0 10px; }
h3 { font-size: 15.5px; margin: 20px 0 8px; }
a { color: var(--teal); text-underline-offset: 2px; }
a:hover { color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
/* Icon size only for our own icons: a global svg rule collapses Leaflet's marker layer. */
button svg, .search svg, .home-pin svg { width: 18px; height: 18px; flex: 0 0 auto; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.fine { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
kbd { font: 600 11px Inter, sans-serif; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; color: var(--muted); background: var(--surface); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink); border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
}
@media (hover: hover) { .btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-ink); } }
.btn:active { transform: translateY(1px); background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
@media (hover: hover) { .btn.ghost:hover { border-color: var(--ink-2); background: var(--surface-2); color: var(--ink); } }
.btn.ghost:active { background: var(--surface-3); border-color: var(--ink-2); color: var(--ink); }
.btn.wide { width: 100%; }
.btn.file input { display: none; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink-2);
  transition: background .15s, border-color .15s, color .15s;
}
@media (hover: hover) { .icon-btn:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); } }
.icon-btn:active { background: var(--surface-3); border-color: var(--line-2); color: var(--ink); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.sq { border-radius: var(--r-sm); }
.pill-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; max-width: 260px;
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.pill-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-btn svg { color: var(--accent); }
@media (hover: hover) { .pill-btn:hover { border-color: var(--line-2); background: var(--surface-2); } }
.pill-btn:active { background: var(--surface-3); border-color: var(--line-2); }
.pill-btn[aria-expanded="true"] { border-color: var(--accent); }
.pill-btn.unset { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.link { background: none; border: 0; color: var(--teal); cursor: pointer; padding: 2px 0; font-size: 13px; font-weight: 600; }
@media (hover: hover) { .link:hover { color: var(--ink); text-decoration: underline; } }
.link:active { color: var(--ink); text-decoration: underline; }
select, input[type="number"], input[type="date"], input[type="text"], input[type="search"], textarea {
  border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-sm); padding: 7px 10px; min-height: 36px;
  transition: border-color .15s, box-shadow .15s;
}
select:hover, input:hover, textarea:hover { border-color: var(--muted); }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
select { cursor: pointer; padding-right: 28px; }
input[type="number"] { width: 76px; }
textarea { width: 100%; min-height: 90px; resize: vertical; }
input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.field { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.field.block { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 12px; font-weight: 600; color: var(--ink); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { width: 32px; height: 18px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; flex: 0 0 auto; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .18s var(--ease); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(14px); }
.switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font-size: 11px; font-weight: 700; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 6px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.logo { width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: #fff; display: grid; place-items: center; font: 700 15px Fraunces, Georgia, serif; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text b { font: 600 19px Fraunces, Georgia, serif; letter-spacing: -.01em; }
.brand-text h1 { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.brand-text small { font-size: 12px; color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.home-panel { padding-bottom: 10px; }
.home-form { display: flex; flex-wrap: wrap; gap: 8px; }
.home-form input { flex: 1 1 260px; min-width: 0; max-width: 560px; }
.home-status { margin-top: 8px; font-size: 13.5px; }
.home-status .aa-name { font-weight: 700; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: -1px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  border: 0; background: none; padding: 10px 10px 11px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13.5px;
  white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
@media (hover: hover) { .tabs button:hover { color: var(--ink); } }
.tabs button:active { color: var(--ink); background: var(--surface-2); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* main.wrap: .wrap's padding shorthand would otherwise zero these. The 16px is the gap under the header,
   so the first heading in a view adds no margin of its own. */
main.wrap { padding-top: 16px; padding-bottom: 40px; min-height: 60vh; }
.view > .section-head:first-child h2, .split > div > h2:first-child, .split > div > .section-head:first-child h2, #sourcesView > h2:first-child { margin-top: 0; }
.view { display: none; }
.view.active { display: block; animation: fade .2s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- guide ---------- */
.guide { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 52px 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow-1); }
.guide ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: g; }
.guide li { counter-increment: g; display: grid; grid-template-columns: 26px 1fr; align-content: start; column-gap: 8px; font-size: 13px; }
.guide li::before { content: counter(g); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.guide li span { color: var(--muted); }
.guide .icon-btn { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 272px 1fr; gap: 20px; align-items: start; }
.split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: start; }
.layout > *, .split > * { min-width: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.section-head h2 { margin-bottom: 10px; }

/* ---------- filters ---------- */
.filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); position: sticky; top: 118px; max-height: calc(100vh - 134px); overflow: auto; scrollbar-width: thin; }
.filters-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.filters-head h2 { margin: 0; font-size: 17px; flex: 1; }
.filters-body { padding: 0 14px 6px; }
.fgroup { border-top: 1px solid var(--line); }
.fgroup:first-child { border-top: 0; }
.fgroup[open] { padding-bottom: 12px; }
.flabel { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; }
.fgroup > .flabel { align-items: center; gap: 8px; margin: 0; padding: 11px 0; cursor: pointer; list-style: none; border-radius: 4px; transition: color .12s; }
.fgroup > .flabel::-webkit-details-marker { display: none; }
.fgroup > .flabel > span { flex: 1 0 auto; }
@media (hover: hover) { .fgroup > .flabel:hover { color: var(--ink); } }
.fgroup > .flabel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Chevron: points down when closed, up when open. */
.fgroup > .flabel::after { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin: 0 3px 3px 0; border: solid var(--muted); border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); transition: transform .15s var(--ease); }
.fgroup[open] > .flabel::after { transform: translateY(3px) rotate(-135deg); }
.flabel output { min-width: 0; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.flabel output.set { color: var(--accent-ink); font-weight: 700; }
.fhint { margin: -4px 0 8px; font-size: 12px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px;
  padding: 4px 10px; font-size: 12.5px; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
@media (hover: hover) { .chip:hover { border-color: var(--ink-2); } }
.chip:active { background: var(--surface-3); border-color: var(--ink-2); }
.chip[aria-pressed="true"]:active { background: var(--ink-2); }
.chip .n { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip[aria-pressed="true"] .n { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.chip.zero:not([aria-pressed="true"]) { opacity: .45; }
.mins { display: grid; gap: 6px; }
.minrow { display: grid; grid-template-columns: 96px 1fr 30px; gap: 8px; align-items: center; font-size: 12.5px; }
.minrow output { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mobile-only { display: none; }
.filters-foot { position: sticky; bottom: 0; padding: 12px 14px; background: var(--surface); border-top: 1px solid var(--line); }

/* ---------- toolbar, quick, active ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.toolbar.tight { margin: 0; }
.search { flex: 1 1 240px; min-width: 0; position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.search input { width: 100%; padding-left: 36px; padding-right: 34px; }
.search kbd { position: absolute; right: 10px; pointer-events: none; }
.search input:focus ~ kbd, .search input:not(:placeholder-shown) ~ kbd { display: none; }
.sortbox { display: inline-flex; gap: 6px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.seg button { display: grid; place-items: center; width: 38px; height: 34px; border: 0; background: none; cursor: pointer; color: var(--muted); transition: background .12s, color .12s; }
.seg button svg { width: 16px; height: 16px; fill: currentColor; }
@media (hover: hover) { .seg button:hover { color: var(--ink); } }
.seg button:active { background: var(--surface-3); color: var(--ink); }
.seg button[aria-pressed="true"]:active { background: var(--ink-2); color: var(--bg); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.quick .chip { padding: 5px 12px; font-weight: 500; }
.active-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-height: 28px; margin-bottom: 12px; font-size: 13px; }
.active-row .count { color: var(--ink-2); margin-right: 4px; }
.active-row .count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fchip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: filter .12s; }
@media (hover: hover) { .fchip:hover { filter: brightness(.95); } }
.fchip:active { filter: brightness(.9); }
.fchip i { font-style: normal; font-size: 14px; line-height: 1; opacity: .7; }
.col-picker { display: flex; flex-wrap: wrap; gap: 8px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; margin-bottom: 12px; box-shadow: var(--shadow-1); }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1);
  cursor: pointer; transition: transform .16s var(--ease), box-shadow .16s, border-color .16s;
}
@media (hover: hover) { .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-2); } }
.card:active { transform: scale(.995); border-color: var(--line-2); background: var(--surface-2); }
.card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.card.mine { border-color: color-mix(in srgb, var(--sun) 55%, var(--line)); }
.c-head { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
.c-title h3 { margin: 0 0 3px; font-size: 16.5px; }
/* Meta lines ("SFUSD · Castro · 0.9 mi · TK-5"): each item draws its own leading dot, and the line is pulled
   left by the dot's width and clipped there, so a wrapped line never ends or starts with a stray "·". The dot sits
   in the item's left padding, so an item that wraps inside itself (a long address) keeps its 2nd line visible. */
.c-meta, .d-meta, .t-meta, .tour-next { display: flex; flex-wrap: wrap; align-items: baseline; margin-left: -14px; clip-path: inset(-6px -6px -6px 14px); }
.c-meta > span, .d-meta > span, .t-meta > span, .tour-next > span { min-width: 0; padding-left: 14px; }
.c-meta > span::before, .d-meta > span::before, .t-meta > span::before, .tour-next > span::before { content: "·"; display: inline-block; width: 14px; margin-left: -14px; text-align: center; color: var(--muted); }
.c-meta { row-gap: 1px; font-size: 12.5px; color: var(--ink-2); }
.c-meta > span::before { color: var(--line-2); }
.c-meta .tdot, .d-meta .tdot, .t-meta .tdot { margin-right: 5px; vertical-align: 1px; }
.tdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--c, var(--muted)); flex: 0 0 auto; }
.t-SFUSD { --c: var(--t-sfusd); } .t-Charter { --c: var(--t-charter); } .t-Private { --c: var(--t-private); }
.t-Catholic { --c: var(--t-catholic); } .t-Religious { --c: var(--t-religious); }
.c-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.star-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; flex: 0 0 auto;
  color: var(--muted); font-size: 13px; line-height: 1; display: grid; place-items: center; transition: color .12s, border-color .12s, transform .12s, background .12s;
}
@media (hover: hover) { .star-btn:hover { color: var(--sun); border-color: var(--sun); } }
.star-btn:active { transform: scale(.92); }
.star-btn[aria-pressed="true"] { color: #fff; background: var(--sun); border-color: var(--sun); }
.star-btn.pop { animation: pop .3s var(--ease); }
@keyframes pop { 50% { transform: scale(1.25); } }
.ring { --p: 0; position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--rc, var(--accent)) calc(var(--p) * 1%), var(--surface-3) 0); }
.ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.ring b { position: relative; font-size: 14px; font-variant-numeric: tabular-nums; }
.ring.none { background: var(--surface-2); }
.ring.none b { color: var(--muted); font-weight: 500; }
.ring.lo { --rc: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; line-height: 1.5; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tag.lang { background: var(--teal-soft); color: var(--teal); font-weight: 600; }
.tag.aa { background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; }
.tag.ms { padding-right: 3px; }
.tag.ms .hv { border-radius: 999px; line-height: 1.4; }
.tag.warn { background: var(--accent-soft); color: var(--accent-ink); }
.tag.unv { background: transparent; color: var(--muted); border: 1px dashed var(--line-2); }
/* Columns in proportion to their widest content ("YR + CARE", "TESTS", "≤1:10", "AFTER-CARE"), so a
   three-across card fits every label. */
.stats { display: grid; grid-template-columns: 1.3fr .85fr 1fr 1.5fr; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin: 0; }
.stats > div { padding: 7px; min-width: 0; border-left: 1px solid var(--line); }
.stats > div:first-child { border-left: 0; }
.stats dt { font-size: 11px; text-transform: uppercase; letter-spacing: .01em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats .q-mark { font-size: 11px; vertical-align: super; margin-left: 1px; }
.stats dd { margin: 1px 0 0; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats dd.na { color: var(--muted); font-weight: 500; }
.pips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.pip { min-width: 0; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pip i { display: flex; gap: 2px; margin-bottom: 3px; }
.pip i u { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); text-decoration: none; }
.pip i u.on { background: var(--hc, var(--teal)); }
.pip.h1 { --hc: var(--h1); } .pip.h2 { --hc: var(--h2); } .pip.h3 { --hc: var(--h3); } .pip.h4 { --hc: var(--h4); } .pip.h5 { --hc: var(--h5); }
/* Value color tiers: green is better for this family, red is worse. */
.hv { --hc: var(--ink); display: inline-block; padding: 0 6px; border-radius: 6px; color: color-mix(in srgb, var(--hc) 88%, var(--ink)); background: color-mix(in srgb, var(--hc) 13%, transparent); font-weight: 650; }
.hv.h1 { --hc: var(--h1); } .hv.h2 { --hc: var(--h2); } .hv.h3 { --hc: var(--h3); } .hv.h4 { --hc: var(--h4); } .hv.h5 { --hc: var(--h5); }
.stats dd .hv { padding: 0 4px; margin-left: -4px; max-width: calc(100% + 4px); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.pip.na i { opacity: .5; } /* fade the empty bars only: the label stays readable */
/* margin-top: auto pins the footer to the card's bottom, so footers line up across a row of cards. */
.c-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; border-top: 1px solid var(--line); padding-top: 9px; font-size: 12.5px; color: var(--ink-2); }
.c-foot .tour-next b { color: var(--accent-ink); }
.c-acts { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* ---------- table ---------- */
.table-wrap { overflow: auto; max-height: calc(100vh - 150px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-weight: 600; font-size: 12px; color: var(--ink-2); white-space: nowrap; cursor: pointer; user-select: none; transition: color .12s; }
th:hover { color: var(--ink); }
th .arr { color: var(--accent); margin-left: 3px; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { cursor: pointer; transition: background .1s; }
@media (hover: hover) { tbody tr:hover { background: var(--surface-2); } }
tbody tr:active { background: var(--surface-3); }
tbody tr:last-child td { border-bottom: 0; }
td.name { font-weight: 600; min-width: 230px; }
td.name .c-meta { font-weight: 400; margin-top: 1px; }
/* The school name stays put while a wide table scrolls sideways. */
#results td.name, #results th:first-child { position: sticky; left: 0; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); }
#results td.name { z-index: 1; }
#results th:first-child { z-index: 3; background: var(--surface-2); }
@media (hover: hover) { #results tbody tr:hover td.name { background: var(--surface-2); } }
#results tbody tr:active td.name { background: var(--surface-3); }
/* Short values stay on one line; only the name and long-text columns wrap. */
#results td:not(.name):not(.wrap) { white-space: nowrap; }
td.long { min-width: 240px; } /* School day prose */
td .na { color: var(--muted); }

/* ---------- drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 12, 8, .38); z-index: 90; animation: fade .2s; }
.drawer {
  visibility: hidden; position: fixed; top: 0; right: 0; height: 100%; width: min(760px, 100%); z-index: 100; background: var(--bg);
  transform: translateX(100%); transition: transform .25s var(--ease), visibility 0s .25s; overflow-y: auto; border-left: 1px solid var(--line); box-shadow: var(--shadow-2);
}
.drawer.open { transform: none; visibility: visible; transition: transform .25s var(--ease); }
.drawer-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 10px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.drawer-pos { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-right: auto; }
.drawer-body { padding: 16px 20px calc(60px + env(safe-area-inset-bottom)); }
.drawer-body h2.d-name { margin: 0 0 4px; font-size: 25px; }
.d-meta { row-gap: 2px; font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.d-actions .star-on { background: var(--sun-soft); border-color: var(--sun); }
.stats.big { grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface); }
.stats.big dd { font-size: 16px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.notes-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; }
.notes-list li { position: relative; padding-left: 16px; }
.notes-list li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.notes-list.warn li::before { background: var(--accent); }
.dgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.dcell { background: var(--surface); padding: 9px 12px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.dcell .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.dcell .sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
/* An odd last cell spans the row instead of leaving an empty gray box beside it. */
.dcell:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Where it leads: one row per stage, TK to high school. */
.path { display: grid; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.pstep { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 9px 12px; font-size: 13px; border-top: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.pstep:first-child { border-top: 0; }
.pk { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 1px 7px; height: fit-content; white-space: nowrap; }
.pstep .sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.pms + .pms { margin-top: 6px; }
.pstep .hv, .tag.ms .hv { padding: 0 5px; font-size: 11.5px; }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.dots u { width: 14px; height: 6px; border-radius: 3px; background: var(--surface-3); }
.dots u.on { background: var(--teal); }
.tlist { display: grid; gap: 6px; }
.odds-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
table.odds th { position: static; cursor: default; }
table.odds th, table.odds td { padding: 7px 10px; }
table.odds tbody tr { cursor: default; }
table.odds td.num { white-space: nowrap; }
.trow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.trow.past { opacity: .5; }
.trow b { min-width: 118px; }
.trow .grow { flex: 1; color: var(--ink-2); min-width: 120px; }
.review { padding: 8px 12px; margin: 6px 0; font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 6px var(--r-sm) var(--r-sm) 6px; }
.review.positive { border-left-color: var(--good); }
.review.negative { border-left-color: var(--bad); }
.review.mixed { border-left-color: var(--sun); }
.review .rh { display: flex; gap: 8px; align-items: center; margin-bottom: 2px; }
.age { font-size: 11px; padding: 0 7px; border-radius: 999px; }
.age.fresh { background: var(--teal-soft); color: var(--teal); }
.age.stale { background: var(--surface-2); color: var(--muted); }
.catbars { display: grid; gap: 7px; }
.catbar { display: grid; grid-template-columns: 150px 1fr 34px; gap: 10px; align-items: center; font-size: 12.5px; }
.catbar .bar { height: 7px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.catbar .bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.catbar .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
details.src-list summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); padding: 6px 0; }
details.src-list summary:hover { color: var(--ink); }
details.src-list ul { font-size: 12.5px; padding-left: 18px; }

/* ---------- map ---------- */
.map-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map { position: relative; isolation: isolate; z-index: 0; height: calc(100vh - 190px); min-height: 420px; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; }
.map-legend .ring-key { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--sun); background: var(--t-sfusd); }
.map-note { font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; margin-bottom: 8px; }
.leaflet-container { font: 13px/1.4 Inter, system-ui, sans-serif; background: var(--surface-2); }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-popup-content b { font-size: 14px; }
.leaflet-tooltip { font: 600 12px Inter, system-ui, sans-serif; border-radius: 8px; }
.home-pin { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent), 0 2px 6px rgba(0,0,0,.3); }
.home-pin svg { width: 16px; height: 16px; }

/* ---------- tours ---------- */
.month { font: 600 13px Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; }
.month:first-child { margin-top: 0; }
.tour { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 6px; transition: border-color .12s, box-shadow .12s; }
@media (hover: hover) { .tour:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); } }
.tour.past { opacity: .5; }
.tdate { text-align: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); padding: 4px 0; }
.tdate b { display: block; font: 700 19px/1.1 Fraunces, Georgia, serif; }
.tdate span { font-size: 10.5px; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
.t-school { font-weight: 600; cursor: pointer; }
.t-school:hover { color: var(--accent-ink); }
.t-meta { font-size: 12.5px; color: var(--ink-2); row-gap: 1px; }
.t-acts { display: flex; gap: 6px; }
/* Key dates tab */
#view-dates .section-head { max-width: 860px; }
.datelist { display: grid; gap: 8px; max-width: 860px; }
.dateitem { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: start; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13.5px; }
.dateitem .kd { font-weight: 700; font-size: 15px; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.dateitem .kd small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.dateitem .dbody b { font-weight: 650; }
.dateitem .kdetail { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.dateitem .days { white-space: nowrap; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); }
.dateitem.soon { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dateitem.soon .days { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.dateitem.past { opacity: .5; }
@media (max-width: 560px) { .dateitem { grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 12px; } .dateitem .days { grid-column: 2; justify-self: start; } }
.pending { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.pending b { cursor: pointer; font-weight: 600; }
.pending b:hover { color: var(--accent-ink); }
.pending .dist { margin-right: auto; }

/* ---------- costs ---------- */
.cost-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-2); margin: 0 0 10px; flex-wrap: wrap; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); }
.stack { display: flex; height: 12px; gap: 2px; min-width: 140px; }
.stack i { display: block; height: 100%; border-radius: 3px; transition: filter .12s; }
.stack i:hover { filter: brightness(1.12); }
.q-mark { color: var(--muted); font-weight: 500; }

/* ---------- scorecards ---------- */
.scorecard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 14px; }
.scorecard:has(> .empty) { padding: 0; border: 0; background: none; } /* "Choose a school" prompt: one box, not two */
.sc-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.sc-row label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.sc-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-top label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.stars { display: inline-flex; gap: 1px; }
.stars button { border: 0; background: none; font-size: 21px; cursor: pointer; color: var(--surface-3); padding: 0 1px; line-height: 1; transition: color .1s, transform .1s; }
.stars button.on { color: var(--sun); }
.stars:hover button { color: var(--sun); }
.stars button:hover ~ button { color: var(--surface-3); }
.stars button:active { transform: scale(1.2); }
.scorecard fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px 12px; margin: 0; }
.scorecard legend { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); padding: 0 4px; }
.scorecard > label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.qs { display: grid; gap: 8px; }
.q { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; font-size: 13px; align-items: start; }
.q input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); }
.q input[type="text"] { grid-column: 2; width: 100%; font-size: 12.5px; min-height: 32px; padding: 5px 9px; }
.sc-save { display: flex; gap: 8px; align-items: center; }
.sc-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .12s; }
@media (hover: hover) { .sc-item:hover { border-color: var(--line-2); } }
.sc-item:active { background: var(--surface-2); }
.sc-item.cur { border-color: var(--accent); }

/* ---------- method & sources ---------- */
.weights { display: grid; gap: 4px; }
.w { display: grid; grid-template-columns: 150px 1fr 26px; gap: 12px; align-items: center; font-size: 13px; padding: 3px 0; }
.w output { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.w span { cursor: help; text-decoration: underline dotted var(--line-2); text-underline-offset: 3px; }
.prefgrid { display: grid; gap: 14px; margin-bottom: 8px; }
.prose { max-width: 760px; font-size: 14px; }
.prose.wide { max-width: 980px; }
#sourcesView > p, #sourcesView .ref, #sourcesView .terms, #sourcesView .src { max-width: 75ch; }
.prose code, .legend-tip code { font: 600 .95em ui-monospace, Consolas, monospace; background: var(--surface-2); padding: 0 4px; border-radius: 4px; }
.prose ul { padding-left: 18px; }
.prose li { margin: 5px 0; }
.src { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.src .meta { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.wt { color: var(--sun); letter-spacing: 1px; white-space: nowrap; }
.ref { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 8px; }
.ref summary { cursor: pointer; padding: 10px 14px; font-weight: 600; }
.ref summary:hover { color: var(--accent-ink); }
.ref .ref-body { padding: 0 14px 12px; font-size: 13px; }
.ref ul { margin: 0; padding-left: 18px; }
.ref li { margin-bottom: 4px; }

.foot { color: var(--muted); font-size: 12px; padding-bottom: 30px; }
.empty { padding: 36px 20px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r); }
.empty .btn { margin-top: 12px; }

/* ---------- tooltip & toast ---------- */
.tip {
  position: fixed; z-index: 300; pointer-events: none; max-width: 280px; padding: 7px 10px; border-radius: 8px;
  background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.45; box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s;
}
.tip.on { opacity: 1; transform: none; }
.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 300; transform: translate(-50%, 12px); opacity: 0;
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--ink); color: var(--bg);
  font-size: 13.5px; box-shadow: var(--shadow-2); transition: opacity .18s, transform .18s var(--ease); max-width: calc(100% - 32px);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast button { background: none; border: 0; color: var(--accent); font-weight: 700; cursor: pointer; padding: 2px 4px; }
[data-tip] { cursor: help; }
button[data-tip], a[data-tip], label[data-tip], .card [data-tip] { cursor: pointer; }
.stats [data-tip], .pip[data-tip], .ring[data-tip] { cursor: help; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .guide ol { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .layout, .split { grid-template-columns: 1fr; }
  .mobile-only { display: inline-flex; }
  .filters-foot.mobile-only { display: block; }
  .filters { display: none; }
  .filters.open {
    display: block; position: fixed; inset: auto 0 0 0; top: 64px; z-index: 120; max-height: none; border-radius: 18px 18px 0 0;
    box-shadow: var(--shadow-2); animation: sheet .25s var(--ease);
  }
  @keyframes sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .stats.big { grid-template-columns: repeat(3, 1fr); }
  .stats.big > div:nth-child(4) { border-left: 0; }
  .stats.big > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  body { font-size: 14px; }
  .brand-text small { display: none; }
  .brand-text b { font-size: 17px; white-space: nowrap; }
  .logo { width: 32px; height: 32px; font-size: 13px; }
  .pill-btn { max-width: 124px; padding: 0 11px; }
  .top-actions { gap: 6px; }
  .guide { padding-right: 44px; }
  .guide ol { grid-template-columns: 1fr; gap: 8px; }
  .sortbox { flex: 1; }
  .sortbox select { flex: 1; min-width: 0; }
  .cols2, .dgrid, .sc-top { grid-template-columns: 1fr; }
  .catbar { grid-template-columns: 112px 1fr 30px; }
  .w { grid-template-columns: 118px 1fr 22px; }
  .tour { grid-template-columns: 48px 1fr; }
  .tour .t-acts { grid-column: 1 / -1; }
  .sc-row { grid-template-columns: 1fr; }
  .drawer-body { padding: 14px 16px 60px; }
}
.terms { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: 8px 16px; margin: 0; font-size: 13.5px; }
.terms dt { font-weight: 700; }
.terms dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .terms { grid-template-columns: 1fr; gap: 2px; } .terms dd { margin-bottom: 8px; } }

/* ---------- legend, compare button ---------- */
.legend-tip { margin-left: auto; order: 99; font-size: 12px; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 999px; padding: 1px 8px; cursor: help; }
.cmp-btn { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
@media (hover: hover) { .cmp-btn:hover { border-color: var(--ink-2); color: var(--ink); } }
.cmp-btn:active { background: var(--surface-3); border-color: var(--ink-2); color: var(--ink); }
.cmp-btn[aria-pressed="true"] { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
.d-actions [data-cmp][aria-pressed="true"] { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }

/* ---------- compare tray & side-by-side ---------- */
.tray {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 12px; width: min(640px, calc(100% - 24px)); padding: 8px 8px 8px 16px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-2); animation: sheet .2s var(--ease);
}
.tray-names { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.has-tray main { padding-bottom: 96px; }
body.has-tray .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
.cmp-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
table.cmp { font-size: 13px; min-width: 100%; }
table.cmp th, table.cmp td { vertical-align: top; min-width: 190px; cursor: default; }
table.cmp thead th { background: var(--surface); position: static; }
table.cmp .lbl { position: sticky; left: 0; z-index: 1; min-width: 108px; width: 108px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 600; }
table.cmp tbody tr { cursor: default; }
table.cmp tbody tr:hover { background: none; }
table.cmp td.best { background: color-mix(in srgb, var(--good) 12%, var(--surface)); font-weight: 700; }
.cmp-h { display: flex; align-items: flex-start; gap: 6px; justify-content: space-between; }
.cmp-h b { cursor: pointer; font-size: 14px; }
.cmp-h b:hover { color: var(--accent-ink); }
.icon-btn.sm-x { width: 28px; height: 28px; font-size: 16px; flex: 0 0 auto; }
table.cmp .notes-list { font-size: 12.5px; gap: 4px; }

/* ---------- my plan ---------- */
.plan-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 14px; }
.plan-summary:empty { display: none; }
.plan-summary div { background: var(--surface); padding: 10px 14px; }
.plan-summary b { display: block; font: 700 22px/1.1 Fraunces, Georgia, serif; }
.plan-summary span { font-size: 12px; color: var(--muted); }
.plan-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 10px; }
.pr-name { cursor: pointer; font-size: 15px; }
.pr-name:hover { color: var(--accent-ink); }
.pr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.step { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; display: grid; gap: 4px; align-content: start; font-size: 13px; position: relative; }
.step .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.step.done { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); background: color-mix(in srgb, var(--good) 6%, var(--surface)); }
.step.done .k::after { content: " ✓"; color: var(--good); }
.step .btn.sm { justify-self: start; }
.pr-note { width: 100%; }

/* ---------- setup (first visit) ---------- */
/* Desktop: a centered dialog, questions on the left and the live "best matches" panel on the right.
   Phones: full screen, the panel folds into one status line above the pinned buttons. */
.su-bg { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(15, 12, 8, .42); animation: su-fade .2s var(--ease); }
.setup {
  width: min(900px, 100%); height: min(620px, 100%); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-2); overflow: hidden; animation: su-in .26s var(--ease);
}
@keyframes su-fade { from { opacity: 0; } }
@keyframes su-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.su-head { display: flex; align-items: center; gap: 16px; padding: 14px 20px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.su-steps { flex: 1; max-width: 440px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.su-steps button { width: 100%; display: grid; gap: 6px; padding: 2px 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--muted); font-size: 12px; font-weight: 600; transition: color .15s; }
.su-steps i { display: block; height: 4px; border-radius: 999px; background: var(--surface-3); transition: background .25s; }
.su-steps .done i { background: color-mix(in srgb, var(--accent) 40%, var(--surface-3)); }
.su-steps .cur { color: var(--ink); }
.su-steps .cur i { background: var(--accent); }
@media (hover: hover) { .su-steps button:hover { color: var(--ink); } }
.su-count { display: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
#suClose { margin-left: auto; white-space: nowrap; }
.su-main { display: grid; grid-template-columns: minmax(0, 1fr) 264px; min-height: 0; }
.su-body { overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px 28px; }
.su-step { animation: su-next .24s var(--ease); }
.su-step.back { animation-name: su-back; }
@keyframes su-next { from { opacity: 0; transform: translateX(14px); } }
@keyframes su-back { from { opacity: 0; transform: translateX(-14px); } }
.su-body h2 { font-size: 26px; margin: 0 0 16px; }
.su-body h2:focus { outline: none; }
.su-body h2:has(+ .su-sub) { margin-bottom: 6px; }
.su-sub { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; }
.su-q { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 24px 0 10px; }
.su-q .flabel { margin: 0; }
#suDistV { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
#suDistV b { color: var(--ink); }
.su-addr { display: flex; gap: 8px; }
.su-addr input { flex: 1; min-width: 0; }
.su-aa { min-height: 20px; margin-top: 8px; font-size: 13px; }
.su-aa .ok { color: var(--good); font-weight: 700; }
/* Distance histogram: one column per half mile, the chosen range in the data color. */
.su-hist { display: flex; align-items: flex-end; height: 100px; border-bottom: 1px solid var(--line-2); }
.su-hist > span { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 0 1px; cursor: pointer; }
.su-hist b { display: block; width: 100%; max-width: 24px; height: 0; border-radius: 4px 4px 0 0; background: var(--line-2); transition: height .35s var(--ease), background .15s; }
.su-hist .in b { background: var(--series-1); }
@media (hover: hover) { .su-hist > span:hover b { filter: brightness(1.12); } }
.su-axis { position: relative; height: 18px; margin-top: 4px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.su-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.su-axis span:first-child { transform: none; }
.su-axis span:last-child { transform: translateX(-100%); }
#suDist { margin-top: 4px; }
/* Choice tiles */
.su-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.su-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.su-tile {
  display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
@media (hover: hover) { .su-tile:hover { border-color: var(--ink-2); } }
.su-tile:active { background: var(--surface-2); }
.su-tile[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.su-tt { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; }
.su-tt .n { margin-left: auto; font-weight: 600; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.su-td { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.su-switches { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.su-crow { display: grid; grid-template-columns: 56px minmax(0, 1fr) 48px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; transition: opacity .2s; }
.su-crow .stack { height: 14px; min-width: 0; }
.su-crow b { text-align: right; font-variant-numeric: tabular-nums; }
.su-crow.dim { opacity: .4; }
.su-cost .legend { margin: 8px 0 0; }
.su-elig { margin-top: 20px; }
.su-only { margin-top: 12px; }
/* Priority meters: three rising bars, filled up to the level. */
.su-prio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.su-pr { display: grid; grid-template-columns: minmax(0, 1fr) auto 62px; align-items: end; gap: 10px; padding: 6px 0 8px; border-bottom: 1px solid var(--line); }
.su-pl { justify-self: start; font-size: 13.5px; font-weight: 600; text-decoration: underline dotted var(--line-2); text-underline-offset: 3px; }
.su-meter { display: flex; align-items: flex-end; height: 32px; border-radius: 6px; cursor: pointer; }
.su-meter i { width: 20px; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.su-meter i::before { content: ""; width: 14px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 16%, var(--line)); transition: background .15s, transform .15s var(--ease); transform-origin: bottom; }
.su-meter i:nth-child(1)::before { height: 9px; }
.su-meter i:nth-child(2)::before { height: 16px; }
.su-meter i:nth-child(3)::before { height: 23px; }
.su-meter i.on::before { background: var(--accent); }
@media (hover: hover) { .su-meter i:hover::before { transform: scaleY(1.12); } }
.su-lv { font-size: 12.5px; color: var(--ink-2); }
.su-lv.off { color: var(--muted); }
/* Live panel */
.su-peek { overflow-y: auto; padding: 22px 20px; background: var(--surface); border-left: 1px solid var(--line); }
.su-n { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; }
.su-n b { font: 650 40px/1 Inter, system-ui, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.su-n span { font-size: 13px; color: var(--muted); }
.su-top { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 11px; }
.su-top li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 5px; align-items: center; font-size: 13px; }
.su-top .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-top .sc .hv { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.su-top i { grid-column: 1 / -1; display: block; height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.su-top u { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .35s var(--ease); }
#suNone:empty { display: none; }
.su-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--surface); border-top: 1px solid var(--line); }
.su-status { display: none; }
#suSkip { margin-right: auto; }
@media (max-width: 760px) {
  .su-main { grid-template-columns: minmax(0, 1fr); }
  .su-peek { display: none; }
  .su-prio { grid-template-columns: minmax(0, 1fr); }
  .su-tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-foot { flex-wrap: wrap; row-gap: 8px; }
  .su-status { display: block; flex: 1 0 100%; min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .su-status b { color: var(--ink); font-variant-numeric: tabular-nums; }
}
@media (max-width: 560px) {
  .su-bg { padding: 0; }
  .setup { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .su-head { gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; }
  .su-steps span { display: none; }
  .su-count { display: inline; }
  .su-body { padding: 18px 16px 24px; }
  .su-body h2 { font-size: 22px; }
  .su-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .su-tile { padding: 11px 13px; }
  .su-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) {
  .su-steps button { min-height: 40px; align-content: center; }
  #suClose, #suSkip { min-height: 40px; }
  .su-meter { height: 40px; }
  .su-meter i { width: 30px; }
  .su-meter i::before { width: 18px; }
  .su-meter i:nth-child(1)::before { height: 11px; }
  .su-meter i:nth-child(2)::before { height: 19px; }
  .su-meter i:nth-child(3)::before { height: 27px; }
  .su-pl { cursor: default; }
}

@media print {
  .top, .guide, .tray, .toast, .foot, .no-print, .drawer, .drawer-backdrop, .tip, .filters { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding: 0; }
  .plan-row, .card, tr { break-inside: avoid; }
  .plan-row, .step, .plan-summary, .plan-summary div { border-color: #bbb; background: #fff; box-shadow: none; }
  .pr-note:placeholder-shown { display: none; }
  .pr-note { border: 0; padding: 0; }
  a { color: #000; }
}

/* ---------- touch & phone usability ---------- */
.touch { display: none; }
/* The filter hint follows the layout (sidebar above 900px, Filters button at or below), not the pointer. */
.narrow-only { display: none; }
@media (max-width: 900px) {
  .wide-only { display: none; }
  .narrow-only { display: inline; }
}
@media (pointer: coarse) {
  .desk { display: none; }
  .touch { display: inline; }
  .search kbd { display: none; }
  /* 16px stops iOS Safari from zooming the page when a field is focused. */
  input[type="text"], input[type="search"], input[type="number"], input[type="date"], select, textarea { font-size: 16px; }
  .icon-btn { width: 42px; height: 42px; }
  .pill-btn { height: 42px; }
  .btn { height: 42px; }
  .btn.sm { height: 38px; padding: 0 12px; }
  .chip, .quick .chip { padding: 8px 13px; font-size: 13.5px; }
  .q input[type="text"] { font-size: 16px; min-height: 40px; }
  .star-btn { width: 38px; height: 38px; font-size: 16px; }
  .cmp-btn { min-height: 40px; padding: 6px 12px; }
  .icon-btn.sm-x { width: 40px; height: 40px; }
  .guide .icon-btn { width: 40px; height: 40px; }
  .link { padding: 8px 2px; }
  .tabs button { padding: 12px 12px 13px; }
  .stars button { font-size: 32px; padding: 2px 3px; }
  .check { min-height: 36px; }
  .switch { min-height: 40px; }
  input[type="range"] { height: 28px; }
  .stats [data-tip], .pip[data-tip], [data-tip] { cursor: default; }
  .tip { max-width: min(320px, calc(100vw - 24px)); font-size: 13px; padding: 9px 12px; }
  .ti { display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; }
}
@media (max-width: 900px) {
  /* Tabs scroll sideways: fade the edge so it's clear there are more. */
  .tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); scroll-snap-type: x proximity; }
  .tabs button { scroll-snap-align: start; }
  .tabs.end { -webkit-mask-image: none; mask-image: none; }
  .quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 10px; padding: 0 16px; }
  .quick::-webkit-scrollbar { display: none; }
  .quick .chip { flex: 0 0 auto; }
  .filters.open { top: calc(env(safe-area-inset-top) + 56px); }
  .filters-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .toolbar { gap: 8px; }
  .search { flex-basis: 100%; }
  .seg, #colsBtn { display: none !important; }
  #filtersToggle { flex: 0 0 auto; }
  .guide { padding: 12px 56px 12px 12px; } /* clear of the 40px close button */
  .guide li { font-size: 12.5px; }
  .card { padding: 13px 13px 11px; }
  .c-title h3 { font-size: 16px; }
  .home-panel .fine { display: none; }
  .pr-steps { grid-template-columns: 1fr; }
  .plan-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.cmp th, table.cmp td { min-width: 150px; }
  table.cmp .lbl { min-width: 84px; width: 84px; }
  .tray { padding-left: 12px; gap: 8px; }
  /* Costs: one compact block per school instead of a wide table. */
  #costTable .table-wrap { overflow: visible; max-height: none; }
  #costTable thead { display: none; }
  #costTable table, #costTable tbody { display: block; }
  #costTable tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  #costTable td { border: 0; padding: 0; text-align: left; }
  #costTable td.name { grid-column: 1 / -1; min-width: 0; margin-bottom: 4px; }
  #costTable td.num::before { content: attr(data-l); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 500; }
  #costTable td.bar { grid-column: 1 / -1; margin-top: 6px; }
  #costTable .stack { min-width: 0; }
  .cost-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .cost-bar .field { justify-content: space-between; }
  .cost-bar .field input { width: 84px; }
  .legend { gap: 6px 14px; }
  .section-head .toolbar { width: 100%; }
  /* Push the buttons right as one group (the first one takes the slack), after any switches. */
  .section-head .toolbar > .btn:not(.btn ~ .btn) { margin-left: auto; }
  .map { height: calc(100svh - 230px); min-height: 360px; }
}
@media (max-width: 400px) {
  /* Too narrow for the wordmark: keep it for screen readers; the logo stands in. */
  .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .top-row { padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- trend charts (detail panel) ---------- */
.trends { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.trendbox { margin: 0; padding: 10px 12px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); min-width: 0; }
.trendbox figcaption { display: grid; gap: 2px; margin-bottom: 4px; font-size: 12px; }
.ttitle { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.thead { color: var(--ink-2); }
.thead b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tchg { color: var(--muted); font-variant-numeric: tabular-nums; }
.trend { display: block; width: 100%; height: auto; overflow: visible; }
.trend .tg { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trend .ty, .trend .tx { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.trend .ty { text-anchor: end; }
.trend .tl { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trend .tl.me { stroke: var(--series-1); }
.trend .tl.sf { stroke: var(--muted); stroke-dasharray: 4 3; }
.trend .tl-bridge { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 1 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trend .tcol rect { fill: transparent; }
.trend .tcross { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.trend .td { opacity: 0; stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.trend .td.me { fill: var(--series-1); }
.trend .td.sf { fill: var(--muted); }
.trend .tcol:hover .tcross, .trend .tcol:hover .td, .trend .tcol.last .td.me { opacity: 1; }
.tlegend { display: flex; gap: 16px; margin: 8px 0 2px; font-size: 12px; color: var(--ink-2); }
.tlegend span::before { content: ""; display: inline-block; width: 18px; border-top: 2px solid var(--series-1); vertical-align: middle; margin-right: 6px; }
.tlegend .lg-ref::before { border-top: 2px dashed var(--muted); }
.tnums { margin: 6px 0 2px; font-size: 12.5px; overflow-x: auto; }
.tnums summary { cursor: pointer; color: var(--ink-2); }
.ttable { width: 100%; margin-top: 6px; font-size: 12.5px; }
.ttable th, .ttable td { padding: 4px 8px; cursor: default; position: static; }
.ttable td:first-child { white-space: nowrap; }
@media (max-width: 560px) { .ttable th, .ttable td { padding: 4px; } }
/* Desktop Compare: the view fills the window under the sticky header, and filters and results
   scroll separately so the toolbar and the table header stay put. The page itself must not scroll
   (or the toolbar slides under the header), so the footer is hidden here and the guide banner
   takes its height out of the flex column. Screen only: print gets the full, unclipped list. */
@media screen and (min-width: 901px) {
  body[data-view="compare"] main { padding-bottom: 12px; min-height: 0; }
  body[data-view="compare"] .foot { display: none; }
  #view-compare.active { display: flex; flex-direction: column; height: calc(100vh - var(--top-h, 110px) - 28px); min-height: 440px; }
  #view-compare .layout { flex: 1; min-height: 0; align-items: stretch; }
  #view-compare .filters { position: static; max-height: none; height: 100%; overscroll-behavior: contain; }
  #view-compare .results { display: flex; flex-direction: column; min-height: 0; }
  #view-compare #results { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; margin: -2px; }
  #view-compare #results > .table-wrap { max-height: none; height: 100%; }
  #view-compare .table-wrap th { z-index: 2; }
  #view-compare .table-wrap th:first-child { z-index: 3; } /* the sticky School header stays above the scrolling ones */
  #view-compare .table-wrap td.num, #view-compare .table-wrap th.num { min-width: 64px; }
  /* The compare tray is fixed at the bottom: keep the last row clear of it. */
  body.has-tray #view-compare #results { padding-bottom: 84px; }
  body.has-tray #view-compare #results > .table-wrap { height: auto; max-height: 100%; }
}

/* Desktop Map: the map fills the window under the header and the legend floats on it, beside the zoom
   buttons, so the page never scrolls the legend under the sticky header. */
@media screen and (min-width: 901px) {
  body[data-view="map"] main { padding-bottom: 12px; min-height: 0; }
  body[data-view="map"] .foot { display: none; }
  #view-map { position: relative; isolation: isolate; z-index: 0; } /* keeps the 800-high legend and Leaflet panes under the drawer */
  #view-map .map { height: calc(100vh - var(--top-h, 110px) - 28px); min-height: 440px; }
  #view-map .map-note { position: absolute; z-index: 800; left: 12px; bottom: 28px; margin: 0; max-width: min(420px, calc(100% - 24px)); box-shadow: var(--shadow-1); }
  #view-map .map-legend { position: absolute; z-index: 800; top: 12px; left: 58px; right: 12px; width: max-content; max-width: calc(100% - 70px); margin: 0; padding: 7px 12px; gap: 6px 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-1); }
}